sunpeak 0.16.27 → 0.16.28

package/dist/simulator-BYIH-xqQ.cjs

@@ -0,0 +1,3701 @@
+const require_chunk = require("./chunk-9hOWP6kD.cjs");
+const require_protocol = require("./protocol-jbxhzcnS.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/lib/default-style-variables.ts
+var DEFAULT_STYLE_VARIABLES = {
+	"--color-background-primary": "light-dark(#ffffff, #1a1a1a)",
+	"--color-background-secondary": "light-dark(#f5f5f5, #2d2d2d)",
+	"--color-background-tertiary": "light-dark(#e5e5e5, #404040)",
+	"--color-background-inverse": "light-dark(#1a1a1a, #ffffff)",
+	"--color-background-ghost": "light-dark(rgba(255,255,255,0), rgba(26,26,26,0))",
+	"--color-background-info": "light-dark(#eff6ff, #1e3a5f)",
+	"--color-background-danger": "light-dark(#fef2f2, #7f1d1d)",
+	"--color-background-success": "light-dark(#f0fdf4, #14532d)",
+	"--color-background-warning": "light-dark(#fefce8, #713f12)",
+	"--color-background-disabled": "light-dark(rgba(255,255,255,0.5), rgba(26,26,26,0.5))",
+	"--color-text-primary": "light-dark(#1f2937, #f3f4f6)",
+	"--color-text-secondary": "light-dark(#6b7280, #9ca3af)",
+	"--color-text-tertiary": "light-dark(#9ca3af, #6b7280)",
+	"--color-text-inverse": "light-dark(#f3f4f6, #1f2937)",
+	"--color-text-ghost": "light-dark(rgba(107,114,128,0.5), rgba(156,163,175,0.5))",
+	"--color-text-info": "light-dark(#1d4ed8, #60a5fa)",
+	"--color-text-danger": "light-dark(#b91c1c, #f87171)",
+	"--color-text-success": "light-dark(#15803d, #4ade80)",
+	"--color-text-warning": "light-dark(#a16207, #fbbf24)",
+	"--color-text-disabled": "light-dark(rgba(31,41,55,0.5), rgba(243,244,246,0.5))",
+	"--color-border-primary": "light-dark(#e5e7eb, #404040)",
+	"--color-border-secondary": "light-dark(#d1d5db, #525252)",
+	"--color-border-tertiary": "light-dark(#f3f4f6, #374151)",
+	"--color-border-inverse": "light-dark(rgba(255,255,255,0.3), rgba(0,0,0,0.3))",
+	"--color-border-ghost": "light-dark(rgba(229,231,235,0), rgba(64,64,64,0))",
+	"--color-border-info": "light-dark(#93c5fd, #1e40af)",
+	"--color-border-danger": "light-dark(#fca5a5, #991b1b)",
+	"--color-border-success": "light-dark(#86efac, #166534)",
+	"--color-border-warning": "light-dark(#fde047, #854d0e)",
+	"--color-border-disabled": "light-dark(rgba(229,231,235,0.5), rgba(64,64,64,0.5))",
+	"--color-ring-primary": "light-dark(#3b82f6, #60a5fa)",
+	"--color-ring-secondary": "light-dark(#6b7280, #9ca3af)",
+	"--color-ring-inverse": "light-dark(#ffffff, #1f2937)",
+	"--color-ring-info": "light-dark(#2563eb, #3b82f6)",
+	"--color-ring-danger": "light-dark(#dc2626, #ef4444)",
+	"--color-ring-success": "light-dark(#16a34a, #22c55e)",
+	"--color-ring-warning": "light-dark(#ca8a04, #eab308)",
+	"--font-sans": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+	"--font-mono": "ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace",
+	"--font-weight-normal": "400",
+	"--font-weight-medium": "500",
+	"--font-weight-semibold": "600",
+	"--font-weight-bold": "700",
+	"--font-text-xs-size": "0.75rem",
+	"--font-text-sm-size": "0.875rem",
+	"--font-text-md-size": "1rem",
+	"--font-text-lg-size": "1.125rem",
+	"--font-heading-xs-size": "0.75rem",
+	"--font-heading-sm-size": "0.875rem",
+	"--font-heading-md-size": "1rem",
+	"--font-heading-lg-size": "1.25rem",
+	"--font-heading-xl-size": "1.5rem",
+	"--font-heading-2xl-size": "1.875rem",
+	"--font-heading-3xl-size": "2.25rem",
+	"--font-text-xs-line-height": "1.4",
+	"--font-text-sm-line-height": "1.4",
+	"--font-text-md-line-height": "1.5",
+	"--font-text-lg-line-height": "1.5",
+	"--font-heading-xs-line-height": "1.4",
+	"--font-heading-sm-line-height": "1.4",
+	"--font-heading-md-line-height": "1.4",
+	"--font-heading-lg-line-height": "1.3",
+	"--font-heading-xl-line-height": "1.25",
+	"--font-heading-2xl-line-height": "1.2",
+	"--font-heading-3xl-line-height": "1.1",
+	"--border-radius-xs": "2px",
+	"--border-radius-sm": "4px",
+	"--border-radius-md": "6px",
+	"--border-radius-lg": "8px",
+	"--border-radius-xl": "12px",
+	"--border-radius-full": "9999px",
+	"--border-width-regular": "1px",
+	"--shadow-hairline": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+	"--shadow-sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+	"--shadow-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+	"--shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
+};
+//#endregion
+//#region src/simulator/hosts.ts
+var registry = /* @__PURE__ */ new Map();
+/** Register a host shell. Idempotent — re-registering with the same id replaces. */
+function registerHostShell(shell) {
+	registry.set(shell.id, shell);
+}
+/** Get a registered host shell by id. */
+function getHostShell(id) {
+	return registry.get(id);
+}
+/** Get all registered host shells, in insertion order. */
+function getRegisteredHosts() {
+	return Array.from(registry.values());
+}
+//#endregion
+//#region src/simulator/simulator-types.ts
+var SCREEN_WIDTHS = {
+	"mobile-s": 375,
+	"mobile-l": 425,
+	tablet: 768,
+	full: 1024
+};
+//#endregion
+//#region src/chatgpt/chatgpt-conversation.tsx
+function CloseIcon$1({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M5.83071 5.83077C6.33839 5.32309 7.16151 5.32309 7.66919 5.83077L12 10.1615L16.3307 5.83077C16.8384 5.32309 17.6615 5.32309 18.1692 5.83077C18.6769 6.33845 18.6769 7.16157 18.1692 7.66925L13.8384 12L18.1692 16.3308C18.6769 16.8385 18.6769 17.6616 18.1692 18.1693C17.6615 18.6769 16.8384 18.6769 16.3307 18.1693L12 13.8385L7.66919 18.1693C7.16151 18.6769 6.33839 18.6769 5.83071 18.1693C5.32303 17.6616 5.32303 16.8385 5.83071 16.3308L10.1615 12L5.83071 7.66925C5.32303 7.16157 5.32303 6.33845 5.83071 5.83077Z"
+		})
+	});
+}
+/**
+* Conversation layout that renders children (iframe) at a stable tree position.
+*
+* All three display modes (inline, pip, fullscreen) share the same React tree
+* shape so that the iframe never unmounts when switching modes, avoiding a
+* white-flash reload.
+*
+* Visual differences are achieved purely with CSS:
+* - **inline**: content in normal document flow
+* - **pip**: content wrapper becomes `position: fixed` floating overlay
+* - **fullscreen**: content wrapper becomes `position: fixed` covering the viewport;
+*   fullscreen chrome (header/footer) rendered as a separate fixed overlay
+*/
+function Conversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName = "Sunpeak", appIcon, userMessage = "What have you got for me today?", headerAction, onContentWidthChange }) {
+	const isDesktop = platform === "desktop";
+	const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
+	const isFullscreen = displayMode === "fullscreen";
+	const isPip = displayMode === "pip";
+	const contentRef = (0, react.useRef)(null);
+	const onContentWidthChangeRef = (0, react.useRef)(onContentWidthChange);
+	(0, react.useEffect)(() => {
+		onContentWidthChangeRef.current = onContentWidthChange;
+	});
+	const setContentRef = (0, react.useCallback)((node) => {
+		contentRef.current = node;
+	}, []);
+	(0, react.useEffect)(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const width = Math.round(entry.contentBoxSize[0]?.inlineSize ?? entry.contentRect.width);
+				if (width > 0) onContentWidthChangeRef.current?.(width);
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	const handleClose = () => onRequestDisplayMode?.("inline");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col w-full h-full flex-1 items-center relative",
+		style: {
+			transform: "translate(0)",
+			backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))",
+			color: "var(--color-text-primary)"
+		},
+		children: [
+			isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "fixed start-0 end-0 top-0 bottom-0 z-[51] mx-auto flex flex-col pointer-events-none",
+				style: { maxWidth: containerWidth },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "z-10 grid h-[3.25rem] grid-cols-[1fr_auto_1fr] border-b px-2 pointer-events-auto",
+						style: {
+							borderColor: "var(--color-border-primary)",
+							backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex items-center justify-start gap-3",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									onClick: handleClose,
+									"aria-label": "Close",
+									className: "h-7 w-7 flex items-center justify-center rounded-md transition-colors hover:opacity-70",
+									type: "button",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon$1, {})
+								})
+							}),
+							isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex items-center justify-center text-base",
+								children: appName
+							}),
+							isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "flex-1" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+						className: "relative",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute inset-x-0 bottom-0 h-full -z-10",
+							style: {
+								maskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
+								WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
+								backdropFilter: "blur(16px)",
+								WebkitBackdropFilter: "blur(16px)"
+							}
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto px-4 pt-4 pb-4 pointer-events-auto",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "relative",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "text",
+									name: "userInput",
+									disabled: true,
+									placeholder: "Message sunpeak.ai",
+									className: "w-full rounded-3xl px-5 py-3 pr-12 shadow-sm",
+									style: {
+										backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
+										color: "var(--color-text-primary)",
+										border: "1px solid var(--color-border-tertiary)"
+									}
+								})
+							})
+						})]
+					})
+				]
+			}),
+			!isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "h-12 flex items-center gap-3 px-4 text-lg sticky top-0 z-40 w-full",
+				style: {
+					maxWidth: containerWidth,
+					backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "sunpeak.ai" }), headerAction]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
+				style: { maxWidth: containerWidth },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+					className: "flex-1 overflow-y-auto overflow-x-hidden flex flex-col",
+					children: [
+						!isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+							className: "w-full focus:outline-none",
+							dir: "auto",
+							"data-turn": "user",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", {
+								className: "sr-only",
+								children: "You said:"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-base my-auto mx-auto md:pt-8 px-4",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "flex max-w-full flex-col grow",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											"data-message-author-role": "user",
+											className: "min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "flex w-full flex-col gap-1 empty:hidden items-end",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "relative rounded-[18px] px-4 py-3 max-w-[70%]",
+													style: { backgroundColor: "var(--sim-bg-user-bubble, var(--color-background-tertiary))" },
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+														className: "whitespace-pre-wrap",
+														children: userMessage
+													})
+												})
+											})
+										})
+									})
+								})
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+							className: "w-full focus:outline-none flex-1",
+							dir: "auto",
+							"data-turn": "assistant",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h6", {
+								className: "sr-only",
+								children: [appName, " said:"]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-base my-auto mx-auto pb-10 px-4",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "flex max-w-full flex-col grow",
+										children: [!isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex items-center gap-2 my-3",
+											children: [appIcon ? appIcon.startsWith("data:") || appIcon.startsWith("http") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+												src: appIcon,
+												alt: "",
+												className: "size-6 rounded-full object-cover"
+											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "size-6 flex items-center justify-center text-base",
+												children: appIcon
+											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "size-6 rounded-full flex items-center justify-center font-medium text-xs text-white",
+												style: { backgroundColor: "#10a37f" },
+												children: "AI"
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "font-semibold text-sm",
+												children: appName
+											})]
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											"data-message-author-role": "assistant",
+											className: "min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "flex w-full flex-col gap-1 empty:hidden",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													ref: setContentRef,
+													className: isPip ? "no-scrollbar @w-xl/main:top-4 fixed start-4 end-4 top-12 z-50 mx-auto max-w-[40rem] lg:max-w-[48rem] sm:start-0 sm:end-0 sm:top-[3.25rem] sm:w-full overflow-visible" : isFullscreen ? "no-scrollbar fixed inset-x-0 top-[3.25rem] bottom-0 z-50 mx-auto" : "no-scrollbar relative mb-2 @w-sm/main:w-full mx-0 max-sm:-mx-[1rem] max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible",
+													style: {
+														...isPip ? { maxHeight: "480px" } : {},
+														...isFullscreen ? { maxWidth: containerWidth } : {}
+													},
+													children: [isPip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														onClick: handleClose,
+														className: "absolute -start-2 -top-1.5 z-10 rounded-full bg-[#3a3a3a] p-1.5 text-white shadow-[0px_0px_0px_1px_#fff3,0px_4px_12px_rgba(0,0,0,0.12)] hover:bg-[#6a6a6a]",
+														"aria-label": "Close picture-in-picture",
+														type: "button",
+														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon$1, { className: "h-4 w-4" })
+													}, "pip-close"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+														className: isPip ? "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_#fff3,0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4" : "relative overflow-hidden h-full",
+														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+															className: "h-full w-full max-w-full",
+															style: { ...isPip ? {
+																overflow: "auto",
+																backgroundColor: "var(--color-background-primary)"
+															} : isFullscreen ? {
+																overflow: "auto",
+																backgroundColor: "var(--color-background-primary)"
+															} : { backgroundColor: "transparent" } },
+															children
+														})
+													}, "content")]
+												})
+											})
+										})]
+									})
+								})
+							})]
+						}),
+						!isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "sticky bottom-0 z-10 pointer-events-none",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "absolute inset-x-0 bottom-0 h-full -z-10",
+								style: {
+									maskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
+									WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
+									backdropFilter: "blur(16px)",
+									WebkitBackdropFilter: "blur(16px)"
+								}
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto px-4 pt-4 pb-4 pointer-events-auto",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "relative",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "text",
+										name: "userInput",
+										disabled: true,
+										placeholder: "Message sunpeak.ai",
+										className: "w-full rounded-3xl px-5 py-3 pr-12 shadow-sm",
+										style: {
+											backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
+											color: "var(--color-text-primary)",
+											border: "1px solid var(--color-border-tertiary)"
+										}
+									})
+								})
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#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.
+*/
+var CHATGPT_HOST_INFO = {
+	name: "chatgpt",
+	version: "0.0.1"
+};
+var CHATGPT_HOST_CAPABILITIES = {
+	openLinks: {},
+	serverTools: {},
+	serverResources: {},
+	logging: {},
+	updateModelContext: {},
+	message: {},
+	sandbox: { permissions: { microphone: {} } }
+};
+/**
+* Apply ChatGPT-style theming to the document.
+* Sets data-theme attribute and color-scheme for light-dark() CSS support.
+*/
+function applyChatGPTTheme(theme) {
+	document.documentElement.setAttribute("data-theme", theme);
+	document.documentElement.style.colorScheme = theme;
+}
+registerHostShell({
+	id: "chatgpt",
+	label: "ChatGPT",
+	Conversation,
+	applyTheme: applyChatGPTTheme,
+	hostInfo: CHATGPT_HOST_INFO,
+	hostCapabilities: CHATGPT_HOST_CAPABILITIES,
+	userAgent: "chatgpt",
+	styleVariables: { ...DEFAULT_STYLE_VARIABLES },
+	pageStyles: {
+		"--sim-bg-sidebar": "light-dark(#ffffff, #212121)",
+		"--sim-bg-conversation": "light-dark(#ffffff, #212121)",
+		"--sim-bg-user-bubble": "light-dark(rgba(233,233,233,0.5), rgba(50,50,50,0.85))",
+		"--sim-bg-reply-input": "light-dark(#ffffff, #212121)"
+	}
+});
+//#endregion
+//#region src/claude/claude-conversation.tsx
+function CloseIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M12 4L4 12M4 4L12 12",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})
+	});
+}
+function BackIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M10 3L5 8L10 13",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/**
+* Claude conversation shell — mimics Claude's chat UI chrome.
+*
+* All three display modes (inline, pip, fullscreen) share the same React tree
+* shape so that the iframe never unmounts when switching modes.
+*/
+function ClaudeConversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName = "Sunpeak", appIcon, userMessage = "What have you got for me today?", headerAction, onContentWidthChange }) {
+	const isDesktop = platform === "desktop";
+	const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
+	const isFullscreen = displayMode === "fullscreen";
+	const isPip = displayMode === "pip";
+	const contentRef = (0, react.useRef)(null);
+	const onContentWidthChangeRef = (0, react.useRef)(onContentWidthChange);
+	(0, react.useEffect)(() => {
+		onContentWidthChangeRef.current = onContentWidthChange;
+	});
+	const setContentRef = (0, react.useCallback)((node) => {
+		contentRef.current = node;
+	}, []);
+	(0, react.useEffect)(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const width = Math.round(entry.contentBoxSize[0]?.inlineSize ?? entry.contentRect.width);
+				if (width > 0) onContentWidthChangeRef.current?.(width);
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	const handleClose = () => onRequestDisplayMode?.("inline");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col w-full h-full flex-1 items-center relative",
+		style: {
+			transform: "translate(0)",
+			backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))",
+			color: "var(--color-text-primary)"
+		},
+		children: [
+			isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "fixed start-0 end-0 top-0 bottom-0 z-[51] mx-auto flex flex-col pointer-events-none",
+				style: { maxWidth: containerWidth },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "z-10 flex items-center h-12 border-b px-3 pointer-events-auto",
+						style: {
+							borderColor: "var(--color-border-primary)",
+							backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: handleClose,
+								"aria-label": "Back",
+								className: "h-8 w-8 flex items-center justify-center rounded-lg transition-colors hover:opacity-70",
+								type: "button",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackIcon, {})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-1 text-center text-sm font-medium",
+								children: appName
+							}),
+							isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-8" })
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "flex-1" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+						className: "pointer-events-auto p-3",
+						style: { backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))" },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "max-w-[48rem] mx-auto",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								name: "userInput",
+								disabled: true,
+								placeholder: "Reply to sunpeak...",
+								className: "w-full rounded-xl px-4 py-2.5 text-sm",
+								style: {
+									backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
+									border: "1px solid var(--color-border-primary)",
+									color: "var(--color-text-primary)"
+								}
+							})
+						})
+					})
+				]
+			}),
+			!isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "h-12 flex items-center gap-3 px-4 text-sm font-medium sticky top-0 z-40 w-full",
+				style: {
+					maxWidth: containerWidth,
+					backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "sunpeak.ai" }), headerAction]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
+				style: { maxWidth: containerWidth },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+					className: "flex-1 overflow-y-auto overflow-x-hidden",
+					children: [!isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
+						className: "w-full",
+						dir: "auto",
+						"data-turn": "user",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "px-4 py-4",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "max-w-[48rem] mx-auto flex justify-end",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "inline-block rounded-2xl px-4 py-2.5 text-sm max-w-[85%]",
+									style: { backgroundColor: "var(--sim-bg-user-bubble, var(--color-background-tertiary))" },
+									children: userMessage
+								})
+							})
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+						className: "w-full",
+						dir: "auto",
+						"data-turn": "assistant",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h6", {
+							className: "sr-only",
+							children: [appName, " said:"]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "px-4 py-2",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "max-w-[48rem] mx-auto",
+								children: [!isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center gap-2 mb-3",
+									children: [appIcon ? appIcon.startsWith("data:") || appIcon.startsWith("http") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										src: appIcon,
+										alt: "",
+										className: "size-6 rounded-full object-cover"
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "size-6 flex items-center justify-center text-base",
+										children: appIcon
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "size-6 rounded-full flex items-center justify-center text-xs font-medium text-white",
+										style: { backgroundColor: "#c55a30" },
+										children: "C"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-sm font-medium",
+										children: appName
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									ref: setContentRef,
+									className: isPip ? "fixed start-4 end-4 top-12 z-50 mx-auto max-w-[40rem] lg:max-w-[48rem] sm:start-0 sm:end-0 sm:top-[3rem] sm:w-full overflow-visible" : isFullscreen ? "fixed inset-x-0 top-[3rem] bottom-0 z-50 mx-auto" : "relative mb-2 w-full overflow-visible",
+									style: {
+										...isPip ? { maxHeight: "480px" } : {},
+										...isFullscreen ? { maxWidth: containerWidth } : {}
+									},
+									children: [isPip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										onClick: handleClose,
+										className: "absolute -start-2 -top-1.5 z-10 rounded-full p-1.5 text-white shadow-md",
+										style: { backgroundColor: "#4a4a4a" },
+										"aria-label": "Close picture-in-picture",
+										type: "button",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
+									}, "pip-close"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: isPip ? "relative overflow-hidden h-full rounded-2xl shadow-lg" : "relative overflow-hidden h-full",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "h-full w-full max-w-full",
+											style: { ...isPip ? {
+												overflow: "auto",
+												backgroundColor: "var(--color-background-secondary)"
+											} : isFullscreen ? {
+												overflow: "auto",
+												backgroundColor: "var(--color-background-primary)"
+											} : { backgroundColor: "transparent" } },
+											children
+										})
+									}, "content")]
+								})]
+							})
+						})]
+					})]
+				}), !isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+					style: { backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))" },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "max-w-[48rem] mx-auto px-4 py-4",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "relative",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								name: "userInput",
+								disabled: true,
+								placeholder: "Reply to sunpeak...",
+								className: "w-full rounded-xl px-4 py-2.5 text-sm",
+								style: {
+									backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
+									border: "1px solid var(--color-border-primary)"
+								}
+							})
+						})
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/claude/claude-host.ts
+var CLAUDE_HOST_INFO = {
+	name: "Claude",
+	version: "1.0.0"
+};
+var CLAUDE_HOST_CAPABILITIES = {
+	openLinks: {},
+	serverTools: {},
+	serverResources: {},
+	downloadFile: {},
+	logging: {},
+	updateModelContext: { text: {} },
+	message: { text: {} },
+	sandbox: {}
+};
+/**
+* Apply Claude-style theming to the document.
+* Sets data-theme attribute and color-scheme so CSS light-dark() resolves correctly.
+*/
+function applyClaudeTheme(theme) {
+	document.documentElement.setAttribute("data-theme", theme);
+	document.documentElement.style.colorScheme = theme;
+}
+registerHostShell({
+	id: "claude",
+	label: "Claude",
+	Conversation: ClaudeConversation,
+	applyTheme: applyClaudeTheme,
+	hostInfo: CLAUDE_HOST_INFO,
+	hostCapabilities: CLAUDE_HOST_CAPABILITIES,
+	userAgent: "claude",
+	styleVariables: {
+		...DEFAULT_STYLE_VARIABLES,
+		"--color-background-primary": "light-dark(#faf9f5, #262624)",
+		"--color-background-secondary": "light-dark(#ffffff, #3a3935)",
+		"--color-background-tertiary": "light-dark(#e8e4dc, #4a4843)",
+		"--color-background-inverse": "light-dark(#2b2a27, #f3f0e8)",
+		"--color-text-primary": "light-dark(#2d2b27, #e8e4dc)",
+		"--color-text-secondary": "light-dark(#6b6560, #9b9690)",
+		"--color-text-tertiary": "light-dark(#9b9690, #6b6560)",
+		"--color-text-inverse": "light-dark(#e8e4dc, #2d2b27)",
+		"--color-border-primary": "light-dark(#e0ddd5, #4a4843)",
+		"--color-border-secondary": "light-dark(#d5d1c8, #5a5753)",
+		"--color-border-tertiary": "light-dark(#f0ede5, #3a3935)"
+	},
+	pageStyles: {
+		"--sim-bg-sidebar": "light-dark(#f9f8f3, #252523)",
+		"--sim-bg-conversation": "light-dark(#faf9f5, #262624)",
+		"--sim-bg-user-bubble": "light-dark(#f1eee6, #141413)",
+		"--sim-bg-reply-input": "light-dark(#ffffff, #30302e)"
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.2.2_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__react-_e9bf7657371391a829fe8b4e289b253c/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."), D = require_protocol.union([
+	require_protocol.literal("inline"),
+	require_protocol.literal("fullscreen"),
+	require_protocol.literal("pip")
+]).describe("Display mode for UI presentation."), OQ = require_protocol.union([
+	require_protocol.literal("--color-background-primary"),
+	require_protocol.literal("--color-background-secondary"),
+	require_protocol.literal("--color-background-tertiary"),
+	require_protocol.literal("--color-background-inverse"),
+	require_protocol.literal("--color-background-ghost"),
+	require_protocol.literal("--color-background-info"),
+	require_protocol.literal("--color-background-danger"),
+	require_protocol.literal("--color-background-success"),
+	require_protocol.literal("--color-background-warning"),
+	require_protocol.literal("--color-background-disabled"),
+	require_protocol.literal("--color-text-primary"),
+	require_protocol.literal("--color-text-secondary"),
+	require_protocol.literal("--color-text-tertiary"),
+	require_protocol.literal("--color-text-inverse"),
+	require_protocol.literal("--color-text-ghost"),
+	require_protocol.literal("--color-text-info"),
+	require_protocol.literal("--color-text-danger"),
+	require_protocol.literal("--color-text-success"),
+	require_protocol.literal("--color-text-warning"),
+	require_protocol.literal("--color-text-disabled"),
+	require_protocol.literal("--color-border-primary"),
+	require_protocol.literal("--color-border-secondary"),
+	require_protocol.literal("--color-border-tertiary"),
+	require_protocol.literal("--color-border-inverse"),
+	require_protocol.literal("--color-border-ghost"),
+	require_protocol.literal("--color-border-info"),
+	require_protocol.literal("--color-border-danger"),
+	require_protocol.literal("--color-border-success"),
+	require_protocol.literal("--color-border-warning"),
+	require_protocol.literal("--color-border-disabled"),
+	require_protocol.literal("--color-ring-primary"),
+	require_protocol.literal("--color-ring-secondary"),
+	require_protocol.literal("--color-ring-inverse"),
+	require_protocol.literal("--color-ring-info"),
+	require_protocol.literal("--color-ring-danger"),
+	require_protocol.literal("--color-ring-success"),
+	require_protocol.literal("--color-ring-warning"),
+	require_protocol.literal("--font-sans"),
+	require_protocol.literal("--font-mono"),
+	require_protocol.literal("--font-weight-normal"),
+	require_protocol.literal("--font-weight-medium"),
+	require_protocol.literal("--font-weight-semibold"),
+	require_protocol.literal("--font-weight-bold"),
+	require_protocol.literal("--font-text-xs-size"),
+	require_protocol.literal("--font-text-sm-size"),
+	require_protocol.literal("--font-text-md-size"),
+	require_protocol.literal("--font-text-lg-size"),
+	require_protocol.literal("--font-heading-xs-size"),
+	require_protocol.literal("--font-heading-sm-size"),
+	require_protocol.literal("--font-heading-md-size"),
+	require_protocol.literal("--font-heading-lg-size"),
+	require_protocol.literal("--font-heading-xl-size"),
+	require_protocol.literal("--font-heading-2xl-size"),
+	require_protocol.literal("--font-heading-3xl-size"),
+	require_protocol.literal("--font-text-xs-line-height"),
+	require_protocol.literal("--font-text-sm-line-height"),
+	require_protocol.literal("--font-text-md-line-height"),
+	require_protocol.literal("--font-text-lg-line-height"),
+	require_protocol.literal("--font-heading-xs-line-height"),
+	require_protocol.literal("--font-heading-sm-line-height"),
+	require_protocol.literal("--font-heading-md-line-height"),
+	require_protocol.literal("--font-heading-lg-line-height"),
+	require_protocol.literal("--font-heading-xl-line-height"),
+	require_protocol.literal("--font-heading-2xl-line-height"),
+	require_protocol.literal("--font-heading-3xl-line-height"),
+	require_protocol.literal("--border-radius-xs"),
+	require_protocol.literal("--border-radius-sm"),
+	require_protocol.literal("--border-radius-md"),
+	require_protocol.literal("--border-radius-lg"),
+	require_protocol.literal("--border-radius-xl"),
+	require_protocol.literal("--border-radius-full"),
+	require_protocol.literal("--border-width-regular"),
+	require_protocol.literal("--shadow-hairline"),
+	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."), VQ = require_protocol.record(OQ.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.).
+
+Note: This type uses \`Record<K, string | undefined>\` rather than \`Partial<Record<K, string>>\`
+for compatibility with Zod schema generation. Both are functionally equivalent for validation.`), require_protocol.union([require_protocol.string(), require_protocol._undefined()]).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.).
+
+Note: This type uses \`Record<K, string | undefined>\` rather than \`Partial<Record<K, string>>\`
+for compatibility with Zod schema generation. Both are functionally equivalent for validation.`)).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.).
+
+Note: This type uses \`Record<K, string | undefined>\` rather than \`Partial<Record<K, string>>\`
+for compatibility with Zod schema generation. Both are functionally equivalent for validation.`), V = require_protocol.object({
+	method: require_protocol.literal("ui/open-link"),
+	params: require_protocol.object({ url: require_protocol.string().describe("URL to open in the host's browser") })
+});
+require_protocol.object({ isError: require_protocol.boolean().optional().describe("True if the host failed to open the URL (e.g., due to security policy).") }).passthrough();
+require_protocol.object({ isError: require_protocol.boolean().optional().describe("True if the download failed (e.g., user cancelled or host denied).") }).passthrough();
+require_protocol.object({ isError: require_protocol.boolean().optional().describe("True if the host rejected or failed to deliver the message.") }).passthrough();
+var F = require_protocol.object({
+	method: require_protocol.literal("ui/notifications/sandbox-proxy-ready"),
+	params: require_protocol.object({})
+}), j = 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
+- Empty or omitted → no network connections (secure default)`),
+	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({
+	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."),
+	clipboardWrite: require_protocol.object({}).optional().describe("Request clipboard write access.\n\nMaps to Permission Policy `clipboard-write` feature.")
+}), P = require_protocol.object({
+	method: require_protocol.literal("ui/notifications/size-changed"),
+	params: require_protocol.object({
+		width: require_protocol.number().optional().describe("New width in pixels."),
+		height: require_protocol.number().optional().describe("New height in pixels.")
+	})
+});
+require_protocol.object({
+	method: require_protocol.literal("ui/notifications/tool-input"),
+	params: require_protocol.object({ arguments: require_protocol.record(require_protocol.string(), require_protocol.unknown().describe("Complete tool call arguments as key-value pairs.")).optional().describe("Complete tool call arguments as key-value pairs.") })
+});
+require_protocol.object({
+	method: require_protocol.literal("ui/notifications/tool-input-partial"),
+	params: require_protocol.object({ arguments: require_protocol.record(require_protocol.string(), require_protocol.unknown().describe("Partial tool call arguments (incomplete, may change).")).optional().describe("Partial tool call arguments (incomplete, may change).") })
+});
+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 p = require_protocol.object({ fonts: require_protocol.string().optional() }), c = require_protocol.object({
+	variables: VQ.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"),
+	params: require_protocol.object({})
+});
+var R = require_protocol.record(require_protocol.string(), require_protocol.unknown()), O = require_protocol.object({
+	text: require_protocol.object({}).optional().describe("Host supports text content blocks."),
+	image: require_protocol.object({}).optional().describe("Host supports image content blocks."),
+	audio: require_protocol.object({}).optional().describe("Host supports audio content blocks."),
+	resource: require_protocol.object({}).optional().describe("Host supports resource content blocks."),
+	resourceLink: require_protocol.object({}).optional().describe("Host supports resource link content blocks."),
+	structuredContent: require_protocol.object({}).optional().describe("Host supports structured content.")
+}), 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."),
+	serverTools: require_protocol.object({ listChanged: require_protocol.boolean().optional().describe("Host supports tools/list_changed notifications.") }).optional().describe("Host can proxy tool calls to the MCP server."),
+	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.")
+	}).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.")
+}), 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.")
+}), M = 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."),
+	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.
+
+**Host-dependent:** The format and validation rules for this field are determined by each host. Servers MUST consult host-specific documentation for the expected domain format. Common patterns include:
+- Hash-based subdomains (e.g., \`{hash}.claudemcpcontent.com\`)
+- URL-derived subdomains (e.g., \`www-example-com.oaiusercontent.com\`)
+
+If omitted, host uses default sandbox origin (typically per-conversation).`),
+	prefersBorder: require_protocol.boolean().optional().describe(`Visual boundary preference - true if view prefers a visible border.
+
+Boolean requesting whether a visible border and background is provided by the host. Specifying an explicit value for this is recommended because hosts' defaults may vary.
+
+- \`true\`: request visible border + background
+- \`false\`: request no visible border + background
+- omitted: host decides border`)
+});
+var W = require_protocol.object({
+	method: require_protocol.literal("ui/request-display-mode"),
+	params: require_protocol.object({ mode: D.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 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(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`)
+});
+require_protocol.object({ mimeTypes: require_protocol.array(require_protocol.string()).optional().describe("Array of supported MIME types for UI resources.\nMust include `\"text/html;profile=mcp-app\"` for MCP Apps support.") });
+var S = require_protocol.object({
+	method: require_protocol.literal("ui/download-file"),
+	params: require_protocol.object({ contents: require_protocol.array(require_protocol.union([require_protocol.EmbeddedResourceSchema, require_protocol.ResourceLinkSchema])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.") })
+}), C = require_protocol.object({
+	method: require_protocol.literal("ui/message"),
+	params: require_protocol.object({
+		role: require_protocol.literal("user").describe("Message role, currently only \"user\" is supported."),
+		content: require_protocol.array(require_protocol.ContentBlockSchema).describe("Message content blocks (text, image, etc.).")
+	})
+});
+require_protocol.object({
+	method: require_protocol.literal("ui/notifications/sandbox-resource-ready"),
+	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.")
+	})
+});
+require_protocol.object({
+	method: require_protocol.literal("ui/notifications/tool-result"),
+	params: require_protocol.CallToolResultSchema.describe("Standard MCP tool execution result.")
+});
+var q = require_protocol.object({
+	toolInfo: 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: m.optional().describe("Current color theme preference."),
+	styles: c.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."),
+	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."),
+	timeZone: require_protocol.string().optional().describe("User's timezone in IANA format."),
+	userAgent: require_protocol.string().optional().describe("Host application identifier."),
+	platform: require_protocol.union([
+		require_protocol.literal("web"),
+		require_protocol.literal("desktop"),
+		require_protocol.literal("mobile")
+	]).optional().describe("Platform type for responsive design decisions."),
+	deviceCapabilities: require_protocol.object({
+		touch: require_protocol.boolean().optional().describe("Whether the device supports touch input."),
+		hover: require_protocol.boolean().optional().describe("Whether the device supports hover interactions.")
+	}).optional().describe("Device input capabilities."),
+	safeAreaInsets: require_protocol.object({
+		top: require_protocol.number().describe("Top safe area inset in pixels."),
+		right: require_protocol.number().describe("Right safe area inset in pixels."),
+		bottom: require_protocol.number().describe("Bottom safe area inset in pixels."),
+		left: require_protocol.number().describe("Left safe area inset in pixels.")
+	}).optional().describe("Mobile safe area boundaries in pixels.")
+}).passthrough();
+require_protocol.object({
+	method: require_protocol.literal("ui/notifications/host-context-changed"),
+	params: q.describe("Partial context update containing only changed fields.")
+});
+var y = require_protocol.object({
+	method: require_protocol.literal("ui/update-model-context"),
+	params: require_protocol.object({
+		content: require_protocol.array(require_protocol.ContentBlockSchema).optional().describe("Context content blocks (text, image, etc.)."),
+		structuredContent: require_protocol.record(require_protocol.string(), require_protocol.unknown().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")
+	})
+}), 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: 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: n.describe("Features and capabilities provided by the host."),
+	hostContext: q.describe("Rich context about the host environment.")
+}).passthrough();
+var N = class {
+	eventTarget;
+	eventSource;
+	messageListener;
+	constructor(X = window.parent, Y) {
+		this.eventTarget = X;
+		this.eventSource = Y;
+		this.messageListener = (Z) => {
+			if (Y && Z.source !== this.eventSource) {
+				console.debug("Ignoring message from unknown source", Z);
+				return;
+			}
+			let $ = require_protocol.JSONRPCMessageSchema.safeParse(Z.data);
+			if ($.success) console.debug("Parsed message", $.data), this.onmessage?.($.data);
+			else if (Z.data?.jsonrpc !== "2.0") console.debug("Ignoring non-JSON-RPC message", $.error.message, Z);
+			else console.error("Failed to parse message", $.error.message, Z), this.onerror?.(Error("Invalid JSON-RPC message received: " + $.error.message));
+		};
+	}
+	async start() {
+		window.addEventListener("message", this.messageListener);
+	}
+	async send(X, Y) {
+		if (X.method !== "ui/notifications/tool-input-partial") console.debug("Sending message", X);
+		this.eventTarget.postMessage(X, "*");
+	}
+	async close() {
+		window.removeEventListener("message", this.messageListener), this.onclose?.();
+	}
+	onclose;
+	onerror;
+	onmessage;
+	sessionId;
+	setProtocolVersion;
+};
+var rQ = [G];
+var oQ = class extends require_protocol.Protocol {
+	_client;
+	_hostInfo;
+	_capabilities;
+	_appCapabilities;
+	_hostContext = {};
+	_appInfo;
+	constructor(X, Y, Z, $) {
+		super($);
+		this._client = X;
+		this._hostInfo = Y;
+		this._capabilities = Z;
+		this._hostContext = $?.hostContext || {}, this.setRequestHandler(f, (K) => this._oninitialize(K)), this.setRequestHandler(require_protocol.PingRequestSchema, (K, J) => {
+			return this.onping?.(K.params, J), {};
+		}), this.setRequestHandler(W, (K) => {
+			return { mode: this._hostContext.displayMode ?? "inline" };
+		});
+	}
+	getAppCapabilities() {
+		return this._appCapabilities;
+	}
+	getAppVersion() {
+		return this._appInfo;
+	}
+	onping;
+	set onsizechange(X) {
+		this.setNotificationHandler(P, (Y) => X(Y.params));
+	}
+	set onsandboxready(X) {
+		this.setNotificationHandler(F, (Y) => X(Y.params));
+	}
+	set oninitialized(X) {
+		this.setNotificationHandler(M, (Y) => X(Y.params));
+	}
+	set onmessage(X) {
+		this.setRequestHandler(C, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	set onopenlink(X) {
+		this.setRequestHandler(V, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	set ondownloadfile(X) {
+		this.setRequestHandler(S, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	set onrequestdisplaymode(X) {
+		this.setRequestHandler(W, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	set onloggingmessage(X) {
+		this.setNotificationHandler(require_protocol.LoggingMessageNotificationSchema, async (Y) => {
+			X(Y.params);
+		});
+	}
+	set onupdatemodelcontext(X) {
+		this.setRequestHandler(y, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	set oncalltool(X) {
+		this.setRequestHandler(require_protocol.CallToolRequestSchema, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	sendToolListChanged(X = {}) {
+		return this.notification({
+			method: "notifications/tools/list_changed",
+			params: X
+		});
+	}
+	set onlistresources(X) {
+		this.setRequestHandler(require_protocol.ListResourcesRequestSchema, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	set onlistresourcetemplates(X) {
+		this.setRequestHandler(require_protocol.ListResourceTemplatesRequestSchema, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	set onreadresource(X) {
+		this.setRequestHandler(require_protocol.ReadResourceRequestSchema, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	sendResourceListChanged(X = {}) {
+		return this.notification({
+			method: "notifications/resources/list_changed",
+			params: X
+		});
+	}
+	set onlistprompts(X) {
+		this.setRequestHandler(require_protocol.ListPromptsRequestSchema, async (Y, Z) => {
+			return X(Y.params, Z);
+		});
+	}
+	sendPromptListChanged(X = {}) {
+		return this.notification({
+			method: "notifications/prompts/list_changed",
+			params: X
+		});
+	}
+	assertCapabilityForMethod(X) {}
+	assertRequestHandlerCapability(X) {}
+	assertNotificationCapability(X) {}
+	assertTaskCapability(X) {
+		throw Error("Tasks are not supported in MCP Apps");
+	}
+	assertTaskHandlerCapability(X) {
+		throw Error("Task handlers are not supported in MCP Apps");
+	}
+	getCapabilities() {
+		return this._capabilities;
+	}
+	async _oninitialize(X) {
+		let Y = X.params.protocolVersion;
+		return this._appCapabilities = X.params.appCapabilities, this._appInfo = X.params.appInfo, {
+			protocolVersion: rQ.includes(Y) ? Y : G,
+			hostCapabilities: this.getCapabilities(),
+			hostInfo: this._hostInfo,
+			hostContext: this._hostContext
+		};
+	}
+	setHostContext(X) {
+		let Y = {}, Z = !1;
+		for (let $ of Object.keys(X)) {
+			let K = this._hostContext[$], J = X[$];
+			if (aQ(K, J)) continue;
+			Y[$] = J, Z = !0;
+		}
+		if (Z) this._hostContext = X, this.sendHostContextChange(Y);
+	}
+	sendHostContextChange(X) {
+		return this.notification({
+			method: "ui/notifications/host-context-changed",
+			params: X
+		});
+	}
+	sendToolInput(X) {
+		return this.notification({
+			method: "ui/notifications/tool-input",
+			params: X
+		});
+	}
+	sendToolInputPartial(X) {
+		return this.notification({
+			method: "ui/notifications/tool-input-partial",
+			params: X
+		});
+	}
+	sendToolResult(X) {
+		return this.notification({
+			method: "ui/notifications/tool-result",
+			params: X
+		});
+	}
+	sendToolCancelled(X) {
+		return this.notification({
+			method: "ui/notifications/tool-cancelled",
+			params: X
+		});
+	}
+	sendSandboxResourceReady(X) {
+		return this.notification({
+			method: "ui/notifications/sandbox-resource-ready",
+			params: X
+		});
+	}
+	teardownResource(X, Y) {
+		return this.request({
+			method: "ui/resource-teardown",
+			params: X
+		}, R, Y);
+	}
+	sendResourceTeardown = this.teardownResource;
+	async connect(X) {
+		if (this.transport) throw Error("AppBridge is already connected. Call close() before connecting again.");
+		if (this._client) {
+			let Y = this._client.getServerCapabilities();
+			if (!Y) throw Error("Client server capabilities not available");
+			if (Y.tools) {
+				if (this.oncalltool = async (Z, $) => {
+					return this._client.request({
+						method: "tools/call",
+						params: Z
+					}, require_protocol.CallToolResultSchema, { signal: $.signal });
+				}, Y.tools.listChanged) this._client.setNotificationHandler(require_protocol.ToolListChangedNotificationSchema, (Z) => this.sendToolListChanged(Z.params));
+			}
+			if (Y.resources) {
+				if (this.onlistresources = async (Z, $) => {
+					return this._client.request({
+						method: "resources/list",
+						params: Z
+					}, require_protocol.ListResourcesResultSchema, { signal: $.signal });
+				}, this.onlistresourcetemplates = async (Z, $) => {
+					return this._client.request({
+						method: "resources/templates/list",
+						params: Z
+					}, require_protocol.ListResourceTemplatesResultSchema, { signal: $.signal });
+				}, this.onreadresource = async (Z, $) => {
+					return this._client.request({
+						method: "resources/read",
+						params: Z
+					}, require_protocol.ReadResourceResultSchema, { signal: $.signal });
+				}, Y.resources.listChanged) this._client.setNotificationHandler(require_protocol.ResourceListChangedNotificationSchema, (Z) => this.sendResourceListChanged(Z.params));
+			}
+			if (Y.prompts) {
+				if (this.onlistprompts = async (Z, $) => {
+					return this._client.request({
+						method: "prompts/list",
+						params: Z
+					}, require_protocol.ListPromptsResultSchema, { signal: $.signal });
+				}, Y.prompts.listChanged) this._client.setNotificationHandler(require_protocol.PromptListChangedNotificationSchema, (Z) => this.sendPromptListChanged(Z.params));
+			}
+		}
+		return super.connect(X);
+	}
+};
+function aQ(X, Y) {
+	return JSON.stringify(X) === JSON.stringify(Y);
+}
+//#endregion
+//#region src/simulator/mcp-app-host.ts
+var DEFAULT_HOST_INFO = {
+	name: "SunpeakSimulator",
+	version: "1.0.0"
+};
+var DEFAULT_HOST_CAPABILITIES = {
+	openLinks: {},
+	serverTools: {},
+	serverResources: {},
+	downloadFile: {},
+	logging: {},
+	updateModelContext: { text: {} },
+	message: { text: {} },
+	sandbox: {}
+};
+/**
+* MCP Apps host for the Sunpeak simulator.
+* Wraps AppBridge to provide a simpler API for the simulator.
+* Connects to an iframe via PostMessageTransport.
+*/
+var McpAppHost = class {
+	bridge;
+	options;
+	_initialized = false;
+	_contentWindow = null;
+	_fenceId = 0;
+	_fenceCleanup = null;
+	_prevDisplayMode;
+	_pendingToolInput = null;
+	_pendingToolResult = null;
+	constructor(options = {}) {
+		this.options = options;
+		this._prevDisplayMode = options.hostContext?.displayMode;
+		this.bridge = new oQ(null, options.hostInfo ?? DEFAULT_HOST_INFO, options.hostCapabilities ?? DEFAULT_HOST_CAPABILITIES, { hostContext: options.hostContext });
+		this.bridge.oninitialized = () => {
+			this._initialized = true;
+			if (this._pendingToolInput) {
+				this.bridge.sendToolInput(this._pendingToolInput);
+				this._pendingToolInput = null;
+			}
+			if (this._pendingToolResult) {
+				this.bridge.sendToolResult(this._pendingToolResult);
+				this._pendingToolResult = null;
+			}
+		};
+		this.bridge.onopenlink = async ({ url }) => {
+			console.log("[MCP App] openLink:", url);
+			if (this.options.onOpenLink) this.options.onOpenLink(url);
+			else {
+				try {
+					const parsed = new URL(url);
+					if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+						console.warn("[MCP App] openLink blocked non-http(s) URL:", url);
+						return {};
+					}
+				} catch {
+					console.warn("[MCP App] openLink blocked invalid URL:", url);
+					return {};
+				}
+				window.open(url, "_blank");
+			}
+			return {};
+		};
+		this.bridge.onmessage = async ({ role, content }) => {
+			if (this.options.onMessage) this.options.onMessage(role, content);
+			else console.log("[MCP App] sendMessage:", {
+				role,
+				content
+			});
+			return {};
+		};
+		this.bridge.onrequestdisplaymode = async ({ mode }) => {
+			this.options.onDisplayModeChange?.(mode);
+			return { mode };
+		};
+		this.bridge.onupdatemodelcontext = async ({ content, structuredContent }) => {
+			this.options.onUpdateModelContext?.(content ?? [], structuredContent);
+			return {};
+		};
+		this.bridge.onsizechange = (params) => {
+			this.options.onSizeChanged?.(params);
+		};
+		this.bridge.onloggingmessage = (params) => {
+			if (this.options.onLog) this.options.onLog(params);
+			else {
+				const level = params.level ?? "info";
+				const prefix = `[MCP App${params.logger ? ` ${params.logger}` : ""}]`;
+				if (level === "error" || level === "critical" || level === "alert" || level === "emergency") console.error(prefix, params.data);
+				else if (level === "warning") console.warn(prefix, params.data);
+				else if (level === "debug") console.debug(prefix, params.data);
+				else console.log(prefix, params.data);
+			}
+		};
+		this.bridge.oncalltool = async (params) => {
+			if (this.options.onCallTool) return this.options.onCallTool(params);
+			console.log("[MCP App] callServerTool:", params.name, params.arguments);
+			return { content: [{
+				type: "text",
+				text: `[Simulator] Tool "${params.name}" called (no handler configured)`
+			}] };
+		};
+		this.bridge.ondownloadfile = async ({ contents }) => {
+			if (this.options.onDownloadFile) this.options.onDownloadFile(contents);
+			else console.log("[MCP App] downloadFile:", contents.length, "item(s)");
+			return {};
+		};
+		this.bridge.onsandboxready = () => {
+			this.options.onSandboxReady?.();
+		};
+	}
+	/**
+	* Connect to an iframe's contentWindow.
+	*/
+	async connectToIframe(contentWindow) {
+		this._contentWindow = contentWindow;
+		const transport = new N(contentWindow, contentWindow);
+		await this.bridge.connect(transport);
+	}
+	/**
+	* Wait for the iframe to process all pending messages and commit its DOM.
+	*
+	* Uses a postMessage fence: since messages to the same target are delivered
+	* in FIFO order, a fence message sent after setHostContext is guaranteed to
+	* be processed after the host context change. The iframe's fence responder
+	* waits for requestAnimationFrame before acking, ensuring the DOM has been
+	* committed for the re-render triggered by the context change.
+	*
+	* Returns immediately if the iframe is not connected.
+	*/
+	waitForPaint() {
+		const win = this._contentWindow;
+		if (!win) return Promise.resolve();
+		this._fenceCleanup?.();
+		const id = ++this._fenceId;
+		return new Promise((resolve) => {
+			const handler = (event) => {
+				if (event.source !== win) return;
+				if (event.data?.method === "sunpeak/fence-ack" && event.data.params?.fenceId === id) {
+					cleanup();
+					resolve();
+				}
+			};
+			const cleanup = () => {
+				window.removeEventListener("message", handler);
+				if (this._fenceCleanup === cleanup) this._fenceCleanup = null;
+			};
+			this._fenceCleanup = cleanup;
+			window.addEventListener("message", handler);
+			try {
+				win.postMessage({
+					jsonrpc: "2.0",
+					method: "sunpeak/fence",
+					params: { fenceId: id }
+				}, "*");
+			} catch {
+				cleanup();
+				resolve();
+			}
+		});
+	}
+	/**
+	* 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.
+	* If the app hasn't initialized yet, the input is queued.
+	*/
+	sendToolInput(args) {
+		const params = { arguments: args };
+		if (this._initialized) this.bridge.sendToolInput(params);
+		else this._pendingToolInput = params;
+	}
+	/**
+	* Send tool result to the app.
+	* If the app hasn't initialized yet, the result is queued.
+	*/
+	sendToolResult(result) {
+		if (this._initialized) this.bridge.sendToolResult(result);
+		else this._pendingToolResult = result;
+	}
+	/**
+	* Send partial/streaming tool input to the app.
+	* Useful for simulating streaming tool arguments.
+	*/
+	sendToolInputPartial(args) {
+		const params = { arguments: args };
+		if (this._initialized) this.bridge.sendToolInputPartial(params);
+	}
+	/**
+	* Send tool cancellation notification to the app.
+	* Simulates user or host cancelling a tool execution.
+	*/
+	sendToolCancelled(reason) {
+		const params = reason ? { reason } : {};
+		if (this._initialized) this.bridge.sendToolCancelled(params);
+	}
+	/**
+	* Send HTML resource to the sandbox proxy for secure loading.
+	* Used in the double-iframe architecture after the proxy signals readiness.
+	*/
+	sendSandboxResourceReady(params) {
+		this.bridge.sendSandboxResourceReady(params);
+	}
+	/**
+	* Send a custom message to the connected iframe (for sandbox proxy commands).
+	*/
+	sendRawMessage(data) {
+		const win = this._contentWindow;
+		if (!win) return;
+		try {
+			win.postMessage(data, "*");
+		} catch {}
+	}
+	/**
+	* Close the connection.
+	*/
+	async close() {
+		this._fenceCleanup?.();
+		this._fenceCleanup = null;
+		try {
+			if (this._initialized) await this.bridge.teardownResource({});
+		} catch {}
+		await this.bridge.close();
+		this._initialized = false;
+	}
+	/**
+	* Debug: Inject state directly into the app's useAppState hook.
+	* This bypasses the normal MCP Apps protocol and is intended for
+	* simulator testing/debugging only.
+	*/
+	injectState(state) {
+		const win = this._contentWindow;
+		if (!win) return;
+		try {
+			win.postMessage({
+				jsonrpc: "2.0",
+				method: "sunpeak/injectState",
+				params: { state }
+			}, "*");
+		} catch {}
+	}
+	/**
+	* Update mutable options (callbacks) after construction.
+	* Allows the simulator to swap handlers (e.g. onCallTool) without
+	* recreating the host and tearing down the iframe connection.
+	*/
+	updateOptions(partial) {
+		Object.assign(this.options, partial);
+	}
+	get initialized() {
+		return this._initialized;
+	}
+};
+//#endregion
+//#region src/simulator/mock-openai-runtime.ts
+/**
+* Mock OpenAI runtime for the simulator.
+*
+* ChatGPT-specific hooks (useUploadFile, useRequestModal, etc.) call
+* `window.openai` directly — they don't use the MCP protocol. When the
+* ChatGPT host is selected in the simulator, we inject this mock into
+* the iframe's window so those hooks work during local development.
+*/
+/**
+* Inline script that sets up a mock `window.openai` for srcdoc iframes.
+* Embedded in the generated HTML *before* the app's script so that
+* `isChatGPT()` and hooks work from the very first render.
+*/
+var MOCK_OPENAI_RUNTIME_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("");
+//#endregion
+//#region src/simulator/sandbox-proxy.ts
+/**
+* Sandbox proxy for the double-iframe architecture.
+*
+* Real hosts (ChatGPT, Claude) use a two-level iframe structure:
+*   1. Outer iframe (sandbox proxy) — acts as a message relay on a separate origin
+*   2. Inner iframe — loads the untrusted app HTML
+*
+* The proxy relays PostMessage between the host (parent) and the app (inner iframe),
+* providing origin isolation and security boundaries.
+*
+* The simulator replicates this architecture so apps are tested under the same
+* iframe nesting they'll encounter in production.
+*
+* Protocol:
+*   1. Host creates outer iframe with proxy HTML (srcdoc)
+*   2. Proxy sends `ui/notifications/sandbox-proxy-ready` to parent
+*   3. Host sends `ui/notifications/sandbox-resource-ready` with { html, sandbox, csp, permissions }
+*      OR `sunpeak/sandbox-load-src` with { src } for dev mode
+*   4. Proxy creates inner iframe and loads the content
+*   5. All subsequent messages relay transparently between parent and inner iframe
+*/
+/**
+* Generate the sandbox proxy HTML.
+*
+* This HTML is loaded into the outer iframe via srcdoc. It:
+*   - Signals readiness via `ui/notifications/sandbox-proxy-ready`
+*   - Listens for resource content or URL to load into the inner iframe
+*   - Relays all PostMessage between parent and inner iframe
+*   - Optionally injects platform runtime scripts (e.g., mock window.openai)
+*
+* @param platformScript - Optional JS to inject into the inner iframe before the app loads
+*/
+function generateSandboxProxyHtml(platformScript) {
+	const escapedPlatformScript = platformScript ? JSON.stringify(platformScript) : "null";
+	const colorScheme = "dark";
+	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 = ${escapedPlatformScript};
+
+  // 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) {
+      // ── Messages from the host ──
+
+      // 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.
+      // If the inner iframe has a fence responder (same-origin, script injected),
+      // the ack is deterministic. Otherwise fall back to a 150ms timeout.
+      if (data.method === 'sunpeak/fence' && data.params) {
+        var fenceId = data.params.fenceId;
+        var acked = false;
+        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);
+        if (innerWindow) {
+          try { innerWindow.postMessage(data, '*'); } catch(e) {}
+        }
+        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;
+
+    // Write HTML content into the inner iframe
+    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%';
+
+    // Set color-scheme on the inner iframe to match the host theme.
+    // This ensures prefers-color-scheme resolves correctly inside.
+    if (params.theme) {
+      innerFrame.style.colorScheme = params.theme;
+    }
+
+    // After load, inject helpers into the inner iframe
+    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 for immediate rendering
+      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 */ }
+      }
+
+      // Signal that load is complete — fade in
+      innerFrame.style.opacity = '1';
+      innerFrame.style.transition = 'opacity 100ms';
+    });
+
+    // Start hidden for smooth fade-in
+    innerFrame.style.opacity = '0';
+    document.body.appendChild(innerFrame);
+    innerWindow = innerFrame.contentWindow;
+  }
+
+  // Paint fence responder — same as in iframe-resource.ts
+  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 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.
+  setTimeout(function() {
+    window.parent.postMessage({
+      jsonrpc: '2.0',
+      method: 'ui/notifications/sandbox-proxy-ready',
+      params: {}
+    }, '*');
+  }, 0);
+})();
+<\/script>
+</body>
+</html>`;
+}
+//#endregion
+//#region src/simulator/iframe-resource.tsx
+/**
+* Allowed origins for cross-origin script loading.
+* - Local development: localhost, 127.0.0.1, file://
+* - Production: sunpeak-prod-app-storage.s3.us-east-2.amazonaws.com (serves user scripts)
+*/
+var ALLOWED_SCRIPT_ORIGINS = [
+	"https://sunpeak-prod-app-storage.s3.us-east-2.amazonaws.com",
+	"http://localhost",
+	"https://localhost",
+	"http://127.0.0.1",
+	"https://127.0.0.1"
+];
+/**
+* Escapes HTML special characters to prevent XSS via attribute injection.
+*/
+function escapeHtml(str) {
+	return str.replace(/[&<>"']/g, (c) => {
+		return {
+			"&": "&amp;",
+			"<": "&lt;",
+			">": "&gt;",
+			"\"": "&quot;",
+			"'": "&#39;"
+		}[c] ?? c;
+	});
+}
+/**
+* Validates that a URL is from an allowed origin.
+* Allows same-origin URLs and URLs from whitelisted domains.
+*/
+function isAllowedUrl(src) {
+	if (!src) return false;
+	if (src.startsWith("/") && !src.startsWith("//")) return true;
+	if (!src.includes("://")) return false;
+	try {
+		const url = new URL(src);
+		if (url.origin === window.location.origin) return true;
+		if (url.hostname === "localhost" || url.hostname === "127.0.0.1") return true;
+		return ALLOWED_SCRIPT_ORIGINS.some((allowed) => {
+			try {
+				return url.origin === new URL(allowed).origin;
+			} catch {
+				return false;
+			}
+		});
+	} catch {
+		return false;
+	}
+}
+/**
+* Extract CSP configuration from a resource's _meta.ui.csp field.
+*/
+function extractResourceCSP(resource) {
+	return (resource._meta?.ui)?.csp;
+}
+/**
+* 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.
+*/
+function isValidCspSource(source) {
+	if (!source || /[\s;,']/.test(source) || source === "*") return false;
+	try {
+		const url = new URL(source);
+		return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "ws:" || url.protocol === "wss:";
+	} catch {
+		return false;
+	}
+}
+/**
+* Generates a Content Security Policy string.
+*/
+function generateCSP(csp, scriptSrc) {
+	let scriptOrigin = "";
+	try {
+		scriptOrigin = new URL(scriptSrc, window.location.origin).origin;
+	} catch {}
+	const frameSources = /* @__PURE__ */ new Set();
+	if (csp?.frameDomains) for (const domain of csp.frameDomains) if (isValidCspSource(domain)) frameSources.add(domain);
+	else console.warn("[IframeResource] Ignoring invalid CSP frame domain:", domain);
+	const frameSrc = frameSources.size > 0 ? `frame-src ${Array.from(frameSources).join(" ")}` : "frame-src 'none'";
+	const baseSources = new Set(["'self'"]);
+	if (csp?.baseUriDomains) for (const domain of csp.baseUriDomains) if (isValidCspSource(domain)) baseSources.add(domain);
+	else console.warn("[IframeResource] Ignoring invalid CSP base-uri domain:", domain);
+	const directives = [
+		"default-src 'none'",
+		`script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: ${scriptOrigin}`.trim(),
+		`style-src 'self' 'unsafe-inline' ${scriptOrigin}`.trim(),
+		frameSrc,
+		"object-src 'none'",
+		"form-action 'none'",
+		`base-uri ${Array.from(baseSources).join(" ")}`
+	];
+	const connectSources = new Set(["'self'"]);
+	if (scriptOrigin) connectSources.add(scriptOrigin);
+	if (csp?.connectDomains) for (const domain of csp.connectDomains) if (isValidCspSource(domain)) connectSources.add(domain);
+	else console.warn("[IframeResource] Ignoring invalid CSP connect domain:", domain);
+	directives.push(`connect-src ${Array.from(connectSources).join(" ")}`);
+	const resourceSources = new Set([
+		"'self'",
+		"data:",
+		"blob:"
+	]);
+	if (scriptOrigin) resourceSources.add(scriptOrigin);
+	if (csp?.resourceDomains) for (const domain of csp.resourceDomains) if (isValidCspSource(domain)) resourceSources.add(domain);
+	else console.warn("[IframeResource] Ignoring invalid CSP resource domain:", domain);
+	const resourceList = Array.from(resourceSources).join(" ");
+	directives.push(`img-src ${resourceList}`);
+	directives.push(`font-src ${resourceList}`);
+	directives.push(`media-src ${resourceList}`);
+	return directives.join("; ");
+}
+/**
+* Paint fence responder script body.
+* Embedded in the generated HTML for scriptSrc mode. The sandbox proxy
+* handles fence injection for src-mode iframes.
+*/
+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}},"*");
+});}});`;
+/**
+* Generates HTML wrapper for a script URL.
+* The MCP Apps SDK in the loaded script handles communication via PostMessageTransport.
+*/
+function generateScriptHtml(scriptSrc, theme, cspPolicy, platformScript) {
+	const safeScriptSrc = escapeHtml(scriptSrc);
+	const safeCsp = escapeHtml(cspPolicy);
+	const safeTheme = escapeHtml(theme);
+	return `<!DOCTYPE html>
+<html lang="en" data-theme="${safeTheme}" style="color-scheme:${safeTheme};background:Canvas">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="color-scheme" content="${safeTheme}" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Security-Policy" content="${safeCsp}" />
+  <title>Resource</title>
+  <style>
+    html {
+      /* Use the MCP App background variable once JS sets it, otherwise
+         Canvas (the system color that auto-adapts to color-scheme). */
+      background-color: var(--color-background-primary, Canvas);
+    }
+    body, #root {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      background: transparent;
+    }
+  </style>
+  <script>${PAINT_FENCE_SCRIPT}<\/script>${platformScript ? `\n  <script>${platformScript}<\/script>` : ""}
+</head>
+<body>
+  <div id="root"></div>
+  <script src="${safeScriptSrc}"><\/script>
+</body>
+</html>`;
+}
+/**
+* Build the iframe `allow` attribute from resource-declared permissions.
+* Maps McpUiResourcePermissions to Permission Policy directives and
+* combines them with simulator baseline permissions.
+*/
+function buildIframeAllow(permissions) {
+	const parts = ["local-network-access *"];
+	for (const [key, directive] of [
+		["camera", "camera"],
+		["microphone", "microphone"],
+		["geolocation", "geolocation"],
+		["clipboardWrite", "clipboard-write"]
+	]) if (permissions?.[key]) parts.push(directive);
+	return parts.join("; ");
+}
+/**
+* IframeResource renders MCP Apps in an iframe, communicating via the
+* MCP Apps protocol (PostMessageTransport + AppBridge).
+*
+* Supports two modes:
+* - `src`: Load an HTML page directly (dev mode with Vite HMR)
+* - `scriptSrc`: Generate HTML wrapper for a JS file (production builds)
+*
+* The loaded app uses the MCP Apps SDK's useApp() hook which automatically
+* connects via PostMessageTransport to window.parent. The parent side uses
+* McpAppHost (wrapping AppBridge) to communicate.
+*/
+function IframeResource({ src, scriptSrc, hostContext, toolInput, toolInputPartial, toolResult, hostOptions, csp, permissions, prefersBorder, className, style, onDisplayModeReady, debugInjectState, injectOpenAIRuntime, sandboxUrl }) {
+	const iframeRef = (0, react.useRef)(null);
+	const hostRef = (0, react.useRef)(null);
+	const resourceUrl = src ?? scriptSrc;
+	const srcRef = (0, react.useRef)(src);
+	srcRef.current = src;
+	const scriptSrcRef = (0, react.useRef)(scriptSrc);
+	scriptSrcRef.current = scriptSrc;
+	const cspRef = (0, react.useRef)(csp);
+	cspRef.current = csp;
+	const hostContextRef = (0, react.useRef)(hostContext);
+	hostContextRef.current = hostContext;
+	const injectOpenAIRuntimeRef = (0, react.useRef)(injectOpenAIRuntime);
+	injectOpenAIRuntimeRef.current = injectOpenAIRuntime;
+	const permissionsRef = (0, react.useRef)(permissions);
+	permissionsRef.current = permissions;
+	const hasReceivedSizeRef = (0, react.useRef)(false);
+	const displayModeRef = (0, react.useRef)(hostContext?.displayMode);
+	displayModeRef.current = hostContext?.displayMode;
+	const lastContentHeightRef = (0, react.useRef)(null);
+	const host = (0, react.useMemo)(() => new McpAppHost({
+		hostContext,
+		...hostOptions,
+		onSizeChanged: (params) => {
+			hostOptions?.onSizeChanged?.(params);
+			if (params.height != null) lastContentHeightRef.current = params.height;
+			if (displayModeRef.current === "fullscreen") return;
+			const iframe = iframeRef.current;
+			if (!iframe) return;
+			const style = getComputedStyle(iframe);
+			const isBorderBox = style.boxSizing === "border-box";
+			const from = {};
+			const to = {};
+			if (params.width != null) {
+				let w = params.width;
+				if (isBorderBox) w += parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+				from.minWidth = `${iframe.offsetWidth}px`;
+				iframe.style.minWidth = `min(${w}px, 100%)`;
+				to.minWidth = `min(${w}px, 100%)`;
+			}
+			if (params.height != null) {
+				hasReceivedSizeRef.current = true;
+				let h = params.height;
+				if (isBorderBox) h += parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+				from.height = `${iframe.offsetHeight}px`;
+				iframe.style.height = `${h}px`;
+				to.height = `${h}px`;
+			}
+			if (Object.keys(from).length > 0) iframe.animate([from, to], {
+				duration: 300,
+				easing: "ease-out"
+			});
+		},
+		onDisplayModeReady: (mode) => onDisplayModeReady?.(mode),
+		onSandboxReady: () => {
+			const currentSrc = srcRef.current;
+			const currentScriptSrc = scriptSrcRef.current;
+			const currentHost = hostRef.current;
+			if (!currentHost) return;
+			if (currentScriptSrc) {
+				const absoluteScriptSrc = currentScriptSrc.startsWith("/") ? `${window.location.origin}${currentScriptSrc}` : currentScriptSrc;
+				const cspPolicy = generateCSP(cspRef.current, absoluteScriptSrc);
+				const appHtml = generateScriptHtml(absoluteScriptSrc, hostContextRef.current?.theme ?? "dark", cspPolicy, injectOpenAIRuntimeRef.current ? MOCK_OPENAI_RUNTIME_SCRIPT : void 0);
+				currentHost.sendSandboxResourceReady({
+					html: appHtml,
+					sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+				});
+				if (iframeRef.current) {
+					iframeRef.current.style.opacity = "1";
+					iframeRef.current.style.transition = "opacity 100ms";
+				}
+			} else if (currentSrc) {
+				const absoluteSrc = currentSrc.startsWith("/") ? `${window.location.origin}${currentSrc}` : currentSrc;
+				const allowAttr = buildIframeAllow(permissionsRef.current);
+				currentHost.sendRawMessage({
+					jsonrpc: "2.0",
+					method: "sunpeak/sandbox-load-src",
+					params: {
+						src: absoluteSrc,
+						allow: allowAttr,
+						theme: hostContextRef.current?.theme,
+						styleVars: hostContextRef.current?.styles?.variables
+					}
+				});
+			}
+		}
+	}), []);
+	hostRef.current = host;
+	const setIframeRef = (0, react.useCallback)((node) => {
+		iframeRef.current = node;
+		if (node?.contentWindow) host.connectToIframe(node.contentWindow);
+	}, [host]);
+	const handleLoad = (0, react.useCallback)(() => {
+		if (iframeRef.current) {
+			iframeRef.current.style.opacity = "1";
+			iframeRef.current.style.transition = "opacity 100ms";
+		}
+	}, []);
+	(0, react.useEffect)(() => {
+		if (hostOptions) host.updateOptions(hostOptions);
+	}, [host, hostOptions]);
+	(0, react.useEffect)(() => {
+		if (hostContext) host.setHostContext(hostContext);
+		if (iframeRef.current) {
+			if (hostContext?.displayMode === "fullscreen") iframeRef.current.style.height = "100%";
+			else if (lastContentHeightRef.current != null) iframeRef.current.style.height = `${lastContentHeightRef.current}px`;
+		}
+	}, [host, hostContext]);
+	(0, react.useEffect)(() => {
+		if (toolInput) host.sendToolInput(toolInput);
+	}, [host, toolInput]);
+	(0, react.useEffect)(() => {
+		if (toolInputPartial) host.sendToolInputPartial(toolInputPartial);
+	}, [host, toolInputPartial]);
+	(0, react.useEffect)(() => {
+		if (toolResult) host.sendToolResult(toolResult);
+	}, [host, toolResult]);
+	(0, react.useEffect)(() => {
+		if (debugInjectState != null) host.injectState(debugInjectState);
+	}, [host, debugInjectState]);
+	(0, react.useEffect)(() => {
+		return () => {
+			hostRef.current?.close();
+		};
+	}, []);
+	const isValidUrl = (0, react.useMemo)(() => resourceUrl && isAllowedUrl(resourceUrl), [resourceUrl]);
+	const allowAttribute = (0, react.useMemo)(() => buildIframeAllow(permissions), [permissions]);
+	const borderStyle = prefersBorder ? { border: "1px solid var(--color-border-primary, #e5e7eb)" } : { border: "none" };
+	const sandboxSrc = (0, react.useMemo)(() => {
+		if (!sandboxUrl) return void 0;
+		const url = new URL("/proxy", sandboxUrl);
+		if (injectOpenAIRuntime) url.searchParams.set("platform", "chatgpt");
+		return url.toString();
+	}, [sandboxUrl, injectOpenAIRuntime]);
+	const proxyHtml = (0, react.useMemo)(() => {
+		if (sandboxSrc) return void 0;
+		return generateSandboxProxyHtml(injectOpenAIRuntime ? MOCK_OPENAI_RUNTIME_SCRIPT : void 0);
+	}, [sandboxSrc, injectOpenAIRuntime]);
+	const iframeStyle = {
+		...borderStyle,
+		background: "transparent",
+		colorScheme: hostContext?.theme === "light" ? "light dark" : "dark light",
+		opacity: 0,
+		width: "100%",
+		...hostContext?.displayMode === "fullscreen" ? { height: "100%" } : { minHeight: "200px" },
+		...style
+	};
+	const dims = hostContext?.containerDimensions;
+	const isFullscreenMode = hostContext?.displayMode === "fullscreen";
+	const wrapperStyle = {};
+	if (dims && !isFullscreenMode) {
+		const h = "height" in dims ? dims.height : void 0;
+		const mh = "maxHeight" in dims ? dims.maxHeight : void 0;
+		const w = "width" in dims ? dims.width : void 0;
+		const mw = "maxWidth" in dims ? dims.maxWidth : void 0;
+		if (h != null) {
+			wrapperStyle.height = h;
+			wrapperStyle.overflow = "hidden";
+		}
+		if (mh != null) {
+			wrapperStyle.maxHeight = mh;
+			wrapperStyle.overflow = "hidden";
+		}
+		if (w != null) wrapperStyle.width = w;
+		if (mw != null) wrapperStyle.maxWidth = mw;
+	}
+	if (src && !isValidUrl) {
+		console.error("[IframeResource] URL not allowed:", src);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				color: "red",
+				padding: 20
+			},
+			children: ["Error: URL not allowed: ", src]
+		});
+	}
+	if (scriptSrc && !isValidUrl) {
+		console.error("[IframeResource] Script source not allowed:", scriptSrc);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				color: "red",
+				padding: 20
+			},
+			children: "Error: Script source not allowed."
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: wrapperStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+			ref: setIframeRef,
+			onLoad: handleLoad,
+			style: iframeStyle,
+			title: "Resource Preview",
+			sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox",
+			allow: allowAttribute,
+			src: sandboxSrc ?? void 0,
+			srcDoc: sandboxSrc ? void 0 : proxyHtml
+		})
+	});
+}
+//#endregion
+//#region src/simulator/use-simulator-state.ts
+var DEFAULT_THEME = "dark";
+var DEFAULT_DISPLAY_MODE = "inline";
+var DEFAULT_PLATFORM = "desktop";
+/**
+* Parse URL params for initial simulator values.
+* Supported params:
+* - simulation: simulation name (e.g., 'show-albums')
+* - theme: 'light' | 'dark'
+* - displayMode: 'inline' | 'pip' | 'fullscreen'
+* - locale: e.g., 'en-US'
+* - maxHeight: number (containerDimensions.maxHeight)
+* - maxWidth: number (containerDimensions.maxWidth)
+* - deviceType: 'mobile' | 'tablet' | 'desktop' → maps to platform
+* - hover: 'true' | 'false'
+* - touch: 'true' | 'false'
+* - safeAreaTop, safeAreaBottom, safeAreaLeft, safeAreaRight: number
+* - host: 'chatgpt' | 'claude'
+* - prodTools: 'true' | 'false'
+* - prodResources: 'true' | 'false'
+*/
+function parseUrlParams() {
+	if (typeof window === "undefined") return {};
+	const params = new URLSearchParams(window.location.search);
+	const simulation = params.get("simulation") ?? void 0;
+	const theme = params.get("theme");
+	const displayMode = params.get("displayMode");
+	const locale = params.get("locale");
+	const maxHeightParam = params.get("maxHeight");
+	const containerMaxHeight = maxHeightParam ? Number(maxHeightParam) : void 0;
+	const maxWidthParam = params.get("maxWidth");
+	const containerMaxWidth = maxWidthParam ? Number(maxWidthParam) : void 0;
+	const host = params.get("host") ?? void 0;
+	const prodToolsParam = params.get("prodTools");
+	const prodTools = prodToolsParam === "true" ? true : prodToolsParam === "false" ? false : void 0;
+	const prodResourcesParam = params.get("prodResources");
+	const prodResources = prodResourcesParam === "true" ? true : prodResourcesParam === "false" ? false : void 0;
+	const deviceType = params.get("deviceType");
+	let platform;
+	if (deviceType === "mobile" || deviceType === "tablet") platform = "mobile";
+	else if (deviceType === "desktop") platform = "desktop";
+	const hoverParam = params.get("hover");
+	const touchParam = params.get("touch");
+	const deviceCapabilities = hoverParam || touchParam ? {
+		hover: hoverParam === "false" ? false : true,
+		touch: touchParam === "true" ? true : false
+	} : void 0;
+	const safeAreaTop = params.get("safeAreaTop");
+	const safeAreaBottom = params.get("safeAreaBottom");
+	const safeAreaLeft = params.get("safeAreaLeft");
+	const safeAreaRight = params.get("safeAreaRight");
+	const safeAreaInsets = safeAreaTop || safeAreaBottom || safeAreaLeft || safeAreaRight ? {
+		top: safeAreaTop ? Number(safeAreaTop) : 0,
+		bottom: safeAreaBottom ? Number(safeAreaBottom) : 0,
+		left: safeAreaLeft ? Number(safeAreaLeft) : 0,
+		right: safeAreaRight ? Number(safeAreaRight) : 0
+	} : void 0;
+	return {
+		simulation,
+		theme: theme ?? void 0,
+		displayMode: displayMode ?? void 0,
+		locale: locale ?? void 0,
+		containerMaxHeight,
+		containerMaxWidth,
+		platform,
+		deviceCapabilities,
+		safeAreaInsets,
+		host: host ?? void 0,
+		prodTools,
+		prodResources
+	};
+}
+function useSimulatorState({ simulations, defaultHost = "chatgpt" }) {
+	const simulationNames = Object.keys(simulations).filter((name) => simulations[name].resource).sort((a, b) => {
+		const simA = simulations[a];
+		const simB = simulations[b];
+		const resourceLabelA = simA.resource.title || simA.resource.name;
+		const resourceLabelB = simB.resource.title || simB.resource.name;
+		const labelA = `${resourceLabelA}: ${simA.tool.title || simA.tool.name}`;
+		const labelB = `${resourceLabelB}: ${simB.tool.title || simB.tool.name}`;
+		return labelA.localeCompare(labelB);
+	});
+	const urlParams = (0, react.useMemo)(() => parseUrlParams(), []);
+	const [screenWidth, setScreenWidth] = (0, react.useState)("full");
+	const isMobileWidth = (width) => width === "mobile-s" || width === "mobile-l";
+	const [activeHost, setActiveHost] = (0, react.useState)(urlParams.host ?? defaultHost);
+	const [selectedSimulationName, setSelectedSimulationName] = (0, react.useState)((0, react.useMemo)(() => {
+		const defaultName = simulationNames[0] ?? "";
+		if (!urlParams.simulation) return defaultName;
+		return urlParams.simulation in simulations ? urlParams.simulation : defaultName;
+	}, [
+		urlParams.simulation,
+		simulations,
+		simulationNames
+	]));
+	const selectedSim = simulations[selectedSimulationName];
+	const [theme, setTheme] = (0, react.useState)(urlParams.theme ?? DEFAULT_THEME);
+	const [displayMode, _setDisplayMode] = (0, react.useState)(urlParams.displayMode ?? DEFAULT_DISPLAY_MODE);
+	const [locale, setLocale] = (0, react.useState)(urlParams.locale ?? "en-US");
+	const [containerHeight, setContainerHeight] = (0, react.useState)(void 0);
+	const [containerWidth, setContainerWidth] = (0, react.useState)(void 0);
+	const [containerMaxHeight, setContainerMaxHeight] = (0, react.useState)(urlParams.containerMaxHeight);
+	const [containerMaxWidth, setContainerMaxWidth] = (0, react.useState)(urlParams.containerMaxWidth);
+	const [platform, setPlatform] = (0, react.useState)(urlParams.platform ?? DEFAULT_PLATFORM);
+	const [hover, setHover] = (0, react.useState)(urlParams.deviceCapabilities?.hover ?? true);
+	const [touch, setTouch] = (0, react.useState)(urlParams.deviceCapabilities?.touch ?? false);
+	const [safeAreaInsets, setSafeAreaInsets] = (0, react.useState)(urlParams.safeAreaInsets ?? {
+		top: 0,
+		bottom: 0,
+		left: 0,
+		right: 0
+	});
+	const [timeZone, setTimeZone] = (0, react.useState)(() => Intl.DateTimeFormat().resolvedOptions().timeZone);
+	const [measuredContentWidth, setMeasuredContentWidth] = (0, react.useState)(void 0);
+	const handleContentWidthChange = (0, react.useCallback)((width) => {
+		setMeasuredContentWidth(width);
+	}, []);
+	const setDisplayMode = (mode) => {
+		if (isMobileWidth(screenWidth) && mode === "pip") _setDisplayMode("fullscreen");
+		else _setDisplayMode(mode);
+	};
+	const handleDisplayModeReady = (0, react.useCallback)((_mode) => {}, []);
+	const containerDimensions = (0, react.useMemo)(() => {
+		if (containerHeight != null || containerWidth != null || containerMaxHeight != null || containerMaxWidth != null) return {
+			...containerHeight != null ? { height: containerHeight } : {},
+			...containerWidth != null ? { width: containerWidth } : {},
+			...containerMaxHeight != null ? { maxHeight: containerMaxHeight } : {},
+			...containerMaxWidth != null ? { maxWidth: containerMaxWidth } : {}
+		};
+		if (displayMode === "fullscreen") return {
+			height: typeof window !== "undefined" ? window.innerHeight - 52 : 800,
+			width: measuredContentWidth ?? (typeof window !== "undefined" ? window.innerWidth : 1280)
+		};
+		if (displayMode === "pip") return {
+			height: 480,
+			...measuredContentWidth != null ? { maxWidth: measuredContentWidth } : {}
+		};
+		if (measuredContentWidth != null) return { maxWidth: measuredContentWidth };
+	}, [
+		containerHeight,
+		containerWidth,
+		containerMaxHeight,
+		containerMaxWidth,
+		measuredContentWidth,
+		displayMode
+	]);
+	const hostContext = (0, react.useMemo)(() => ({
+		theme,
+		displayMode,
+		availableDisplayModes: [
+			"inline",
+			"pip",
+			"fullscreen"
+		],
+		locale,
+		timeZone,
+		platform,
+		deviceCapabilities: {
+			hover,
+			touch
+		},
+		safeAreaInsets,
+		...containerDimensions ? { containerDimensions } : {}
+	}), [
+		theme,
+		displayMode,
+		locale,
+		timeZone,
+		platform,
+		hover,
+		touch,
+		safeAreaInsets,
+		containerDimensions
+	]);
+	const [toolInput, setToolInput] = (0, react.useState)(() => selectedSim?.toolInput ?? {});
+	const [toolResult, setToolResult] = (0, react.useState)(() => selectedSim?.toolResult);
+	const [toolInputJson, setToolInputJson] = (0, react.useState)(() => JSON.stringify(toolInput, null, 2));
+	const [toolResultJson, setToolResultJson] = (0, react.useState)(() => JSON.stringify(toolResult ?? null, null, 2));
+	const [modelContextJson, setModelContextJson] = (0, react.useState)("null");
+	const [modelContext, setModelContext] = (0, react.useState)(null);
+	const [editingField, setEditingField] = (0, react.useState)(null);
+	const [toolInputError, setToolInputError] = (0, react.useState)("");
+	const [toolResultError, setToolResultError] = (0, react.useState)("");
+	const [modelContextError, setModelContextError] = (0, react.useState)("");
+	(0, react.useEffect)(() => {
+		const newInput = selectedSim?.toolInput ?? {};
+		const newResult = selectedSim?.toolResult ?? void 0;
+		setToolInput(newInput);
+		setToolResult(newResult);
+		if (editingField !== "toolInput") {
+			setToolInputJson(JSON.stringify(newInput, null, 2));
+			setToolInputError("");
+		}
+		if (editingField !== "toolResult") {
+			setToolResultJson(JSON.stringify(newResult ?? null, null, 2));
+			setToolResultError("");
+		}
+		if (editingField !== "modelContext") {
+			setModelContextJson("null");
+			setModelContext(null);
+			setModelContextError("");
+		}
+	}, [selectedSimulationName, selectedSim]);
+	(0, react.useEffect)(() => {
+		if (isMobileWidth(screenWidth) && displayMode === "pip") _setDisplayMode("fullscreen");
+	}, [screenWidth, displayMode]);
+	const handleDisplayModeChange = (mode) => {
+		setDisplayMode(mode);
+	};
+	const handleUpdateModelContext = (content, structuredContent) => {
+		setModelContextJson(JSON.stringify(structuredContent ?? content, null, 2));
+	};
+	const validateJSON = (json, setJson, setError) => {
+		setJson(json);
+		try {
+			if (json.trim() !== "") JSON.parse(json);
+			setError("");
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Invalid JSON");
+		}
+	};
+	const commitJSON = (json, setError, updateFn) => {
+		try {
+			const parsed = json.trim() === "" ? null : JSON.parse(json);
+			setError("");
+			updateFn(parsed);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Invalid JSON");
+		} finally {
+			setEditingField(null);
+		}
+	};
+	const effectiveToolResult = (0, react.useMemo)(() => {
+		if (!toolResult && !modelContext) return void 0;
+		if (!modelContext) return toolResult;
+		const baseResult = toolResult ?? { content: [] };
+		const baseStructured = baseResult.structuredContent ?? {};
+		return {
+			...baseResult,
+			structuredContent: {
+				...baseStructured,
+				...modelContext
+			}
+		};
+	}, [toolResult, modelContext]);
+	const resourceUrl = selectedSim?.resourceUrl;
+	const resourceScript = selectedSim?.resourceScript;
+	const csp = selectedSim?.resource ? extractResourceCSP(selectedSim.resource) : void 0;
+	const resourceMeta = (selectedSim?.resource?._meta)?.ui;
+	return {
+		simulationNames,
+		selectedSimulationName,
+		setSelectedSimulationName,
+		selectedSim,
+		activeHost,
+		setActiveHost,
+		screenWidth,
+		setScreenWidth,
+		theme,
+		setTheme,
+		displayMode,
+		setDisplayMode,
+		locale,
+		setLocale,
+		containerHeight,
+		setContainerHeight,
+		containerWidth,
+		setContainerWidth,
+		containerMaxHeight,
+		setContainerMaxHeight,
+		containerMaxWidth,
+		setContainerMaxWidth,
+		platform,
+		setPlatform,
+		hover,
+		setHover,
+		touch,
+		setTouch,
+		safeAreaInsets,
+		setSafeAreaInsets,
+		timeZone,
+		setTimeZone,
+		hostContext,
+		handleDisplayModeReady,
+		toolInput,
+		setToolInput,
+		toolResult,
+		setToolResult,
+		effectiveToolResult,
+		modelContext,
+		setModelContext,
+		toolInputJson,
+		setToolInputJson,
+		toolInputError,
+		setToolInputError,
+		toolResultJson,
+		setToolResultJson,
+		toolResultError,
+		setToolResultError,
+		modelContextJson,
+		setModelContextJson,
+		modelContextError,
+		setModelContextError,
+		editingField,
+		setEditingField,
+		validateJSON,
+		commitJSON,
+		measuredContentWidth,
+		handleContentWidthChange,
+		handleDisplayModeChange,
+		handleUpdateModelContext,
+		resourceUrl,
+		resourceScript,
+		csp,
+		permissions: resourceMeta?.permissions,
+		prefersBorder: resourceMeta?.prefersBorder ?? false,
+		urlProdTools: urlParams.prodTools,
+		urlProdResources: urlParams.prodResources
+	};
+}
+//#endregion
+//#region src/simulator/theme-provider.tsx
+var ThemeProviderContext = react.createContext(void 0);
+/** Default theme applier: sets data-theme attribute on document.documentElement */
+function defaultApplyTheme(theme) {
+	if (typeof document !== "undefined") document.documentElement.setAttribute("data-theme", theme);
+}
+function ThemeProvider({ children, defaultTheme = "light", theme: controlledTheme, applyTheme, ...props }) {
+	const [internalTheme] = react.useState(defaultTheme);
+	const theme = controlledTheme ?? internalTheme;
+	const applier = applyTheme ?? defaultApplyTheme;
+	react.useLayoutEffect(() => {
+		if (typeof window !== "undefined" && typeof document !== "undefined") try {
+			applier(theme);
+		} catch (error) {
+			console.warn("Failed to apply document theme:", error);
+		}
+	}, [theme, applier]);
+	const value = { theme };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeProviderContext.Provider, {
+		...props,
+		value,
+		children
+	});
+}
+var useThemeContext = () => {
+	const context = react.useContext(ThemeProviderContext);
+	if (context === void 0) throw new Error("useThemeContext must be used within a ThemeProvider");
+	return context;
+};
+//#endregion
+//#region src/simulator/simple-sidebar.tsx
+var DEFAULT_SIDEBAR_WIDTH = 224;
+function ChevronRightIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			fillRule: "evenodd",
+			d: "M8.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L14.586 12 8.293 5.707a1 1 0 0 1 0-1.414Z",
+			clipRule: "evenodd"
+		})
+	});
+}
+function SimpleSidebar({ children, controls, headerRight }) {
+	const [isDrawerOpen, setIsDrawerOpen] = react.useState(false);
+	const [sidebarWidth, setSidebarWidth] = react.useState(DEFAULT_SIDEBAR_WIDTH);
+	const [isResizing, setIsResizing] = react.useState(false);
+	const handleMouseDown = react.useCallback((e) => {
+		e.preventDefault();
+		setIsResizing(true);
+	}, []);
+	react.useEffect(() => {
+		if (!isResizing) return;
+		const handleMouseMove = (e) => {
+			const maxWidth = Math.floor(window.innerWidth / 3);
+			setSidebarWidth(Math.min(maxWidth, Math.max(DEFAULT_SIDEBAR_WIDTH, e.clientX)));
+		};
+		const handleMouseUp = () => {
+			setIsResizing(false);
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [isResizing]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "sunpeak-simulator-root flex h-screen w-full overflow-hidden relative",
+		children: [
+			isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "fixed inset-0 z-50 cursor-col-resize" }),
+			isDrawerOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "md:hidden fixed inset-0 bg-black/50 z-40 pointer-events-auto",
+				onClick: (e) => {
+					if (e.target === e.currentTarget) setIsDrawerOpen(false);
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+				className: `
+          relative flex flex-col bg-sidebar
+          md:z-auto
+          max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-[100]
+          max-md:transition-transform max-md:duration-300 max-md:!w-2/3
+          ${isDrawerOpen ? "max-md:translate-x-0" : "max-md:-translate-x-full"}
+        `,
+				style: {
+					width: sidebarWidth,
+					borderRight: "1px solid var(--color-border-primary)"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "space-y-3",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center justify-between sticky top-0 bg-sidebar z-10 py-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+								className: "text-xs font-semibold",
+								style: { color: "var(--color-text-primary)" },
+								children: "Controls"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [headerRight, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									onClick: () => setIsDrawerOpen(false),
+									className: "md:hidden p-1 transition-colors",
+									style: { color: "var(--color-text-secondary)" },
+									type: "button",
+									"aria-label": "Close sidebar",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+										width: "16",
+										height: "16",
+										viewBox: "0 0 16 16",
+										fill: "none",
+										xmlns: "http://www.w3.org/2000/svg",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+											d: "M12 4L4 12M4 4L12 12",
+											stroke: "currentColor",
+											strokeWidth: "2",
+											strokeLinecap: "round"
+										})
+									})
+								})]
+							})]
+						}), controls] })
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					onMouseDown: handleMouseDown,
+					className: "hidden md:block absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-black/10 dark:hover:bg-white/10 active:bg-black/20 dark:active:bg-white/20 transition-colors"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+				className: "flex-1 overflow-auto relative",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					onClick: () => setIsDrawerOpen(true),
+					className: "md:hidden fixed top-18 left-0 z-30 bg-sidebar rounded-r-md p-2 shadow-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors",
+					style: {
+						borderRight: "1px solid var(--color-border-primary)",
+						borderTop: "1px solid var(--color-border-primary)",
+						borderBottom: "1px solid var(--color-border-primary)"
+					},
+					type: "button",
+					"aria-label": "Open sidebar",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRightIcon, {})
+				}), children]
+			})
+		]
+	});
+}
+var DOCS_BASE_URL = "https://sunpeak.ai/docs";
+function HelpIcon({ tooltip, docsPath }) {
+	const [pos, setPos] = react.useState(null);
+	const ref = react.useRef(null);
+	const showTooltip = () => {
+		const rect = ref.current?.getBoundingClientRect();
+		if (rect) setPos({
+			top: rect.top + rect.height / 2,
+			left: rect.right + 6
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		ref,
+		href: `${DOCS_BASE_URL}/${docsPath}`,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "inline-flex items-center justify-center no-underline flex-shrink-0 transition-colors",
+		style: { color: "var(--color-text-tertiary, var(--color-text-secondary))" },
+		onClick: (e) => e.stopPropagation(),
+		onMouseEnter: showTooltip,
+		onMouseLeave: () => setPos(null),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "6",
+				cy: "6",
+				r: "5.25",
+				stroke: "currentColor",
+				strokeWidth: "1"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: "6.25",
+				y: "8.5",
+				textAnchor: "middle",
+				fill: "currentColor",
+				fontSize: "7.5",
+				fontWeight: "600",
+				fontFamily: "system-ui, sans-serif",
+				children: "?"
+			})]
+		}), pos && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "pointer-events-none fixed whitespace-nowrap rounded px-2 py-1 text-[11px] font-normal leading-tight z-[200]",
+			style: {
+				top: pos.top,
+				left: pos.left,
+				transform: "translateY(-50%)",
+				backgroundColor: "var(--color-text-primary)",
+				color: "var(--color-background-primary)"
+			},
+			children: tooltip
+		})]
+	});
+}
+function SidebarControl({ label, children, tooltip, docsPath }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "text-[10px] font-medium leading-tight inline-flex items-center gap-1",
+			style: { color: "var(--color-text-secondary)" },
+			children: [label, tooltip && docsPath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpIcon, {
+				tooltip,
+				docsPath
+			})]
+		}), children]
+	});
+}
+function SidebarCollapsibleControl({ label, children, defaultCollapsed = true, tooltip, docsPath }) {
+	const [isCollapsed, setIsCollapsed] = react.useState(defaultCollapsed);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			onClick: () => setIsCollapsed(!isCollapsed),
+			className: "w-full flex items-center justify-between text-[10px] font-medium leading-tight transition-colors py-1 cursor-pointer",
+			style: { color: "var(--color-text-secondary)" },
+			type: "button",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center gap-1",
+				children: [label, tooltip && docsPath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpIcon, {
+					tooltip,
+					docsPath
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[8px]",
+				children: isCollapsed ? "▶" : "▼"
+			})]
+		}), !isCollapsed && children]
+	});
+}
+var formElementStyle = {
+	color: "var(--color-text-primary)",
+	backgroundColor: "var(--color-background-primary)",
+	cursor: "pointer"
+};
+function SidebarSelect({ value, onChange, options, placeholder }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+		value,
+		onChange: (e) => onChange(e.target.value),
+		className: "w-full h-7 text-xs rounded-full px-2 outline-none appearance-none bg-no-repeat bg-[length:12px] bg-[right_6px_center]",
+		style: {
+			...formElementStyle,
+			backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z'/%3e%3c/svg%3e")`,
+			paddingRight: "1.5rem"
+		},
+		children: [placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			value: "",
+			disabled: true,
+			children: placeholder
+		}), options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			value: option.value,
+			children: option.label
+		}, option.value))]
+	});
+}
+function SidebarInput({ value, onChange, applyOnBlur = false, placeholder, type = "text", disabled = false }) {
+	const [draft, setDraft] = (0, react.useState)(value);
+	const [isEditing, setIsEditing] = (0, react.useState)(false);
+	const [prevValue, setPrevValue] = (0, react.useState)(value);
+	if (!isEditing && value !== prevValue) {
+		setPrevValue(value);
+		setDraft(value);
+	}
+	if (applyOnBlur) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type,
+		value: draft,
+		onChange: (e) => setDraft(e.target.value),
+		onFocus: () => setIsEditing(true),
+		onBlur: () => {
+			setIsEditing(false);
+			onChange(draft);
+		},
+		placeholder,
+		disabled,
+		className: "w-full h-7 text-xs rounded-md px-2 outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+		style: {
+			...formElementStyle,
+			cursor: disabled ? void 0 : "text"
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type,
+		value,
+		onChange: (e) => onChange(e.target.value),
+		placeholder,
+		disabled,
+		className: "w-full h-7 text-xs rounded-md px-2 outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+		style: {
+			...formElementStyle,
+			cursor: disabled ? void 0 : "text"
+		}
+	});
+}
+function SidebarCheckbox({ checked, onChange, label, tooltip, docsPath }) {
+	const id = react.useId();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-1.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			id,
+			type: "checkbox",
+			checked,
+			onChange: (e) => onChange(e.target.checked),
+			className: "outline-none cursor-pointer"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			htmlFor: id,
+			className: "text-[11px] select-none cursor-pointer leading-tight inline-flex items-center gap-1",
+			style: { color: "var(--color-text-primary)" },
+			children: [label, tooltip && docsPath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpIcon, {
+				tooltip,
+				docsPath
+			})]
+		})]
+	});
+}
+function SidebarTextarea({ value, onChange, onFocus, onBlur, placeholder, maxRows = 8, error }) {
+	const contentRows = value?.split("\n").length ?? 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-0.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			value,
+			onChange: (e) => onChange(e.target.value),
+			onFocus,
+			onBlur,
+			placeholder,
+			rows: Math.min(contentRows, maxRows),
+			className: "w-full text-[10px] font-mono rounded-md px-2 py-1.5 outline-none resize-y",
+			style: {
+				...formElementStyle,
+				cursor: "text",
+				whiteSpace: "pre",
+				overflowX: "auto",
+				overflowWrap: "normal",
+				...error ? { boxShadow: "inset 0 0 0 1px var(--color-text-danger, #dc2626)" } : {}
+			},
+			"aria-invalid": !!error
+		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-[9px]",
+			style: { color: "var(--color-text-danger, #dc2626)" },
+			children: error
+		})]
+	});
+}
+function SidebarToggle({ value, onChange, options }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "inline-flex w-full rounded-full p-[3px] gap-0.5",
+		style: { backgroundColor: "var(--color-background-tertiary)" },
+		role: "group",
+		"aria-label": "Toggle options",
+		children: options.map((option) => {
+			const isSelected = value === option.value;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick: () => onChange(option.value),
+				"aria-pressed": isSelected,
+				className: "flex-1 text-[10px] font-medium h-[22px] px-2 rounded-full outline-none transition-all duration-150 cursor-pointer",
+				style: {
+					backgroundColor: isSelected ? "var(--color-background-primary)" : "transparent",
+					color: isSelected ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+					boxShadow: isSelected ? "0 1px 2px 0 rgba(0,0,0,0.06)" : "none"
+				},
+				type: "button",
+				children: option.label
+			}, option.value);
+		})
+	});
+}
+//#endregion
+//#region src/types/simulation.ts
+/**
+* Resolve a `ServerToolMock` to a concrete `CallToolResult` given the call arguments.
+*
+* - Simple form (single result): returns it directly.
+* - Conditional form (array of `{ when, result }`): returns the first entry
+*   whose `when` keys all shallow-equal the corresponding values in `args`.
+*   Falls back to `undefined` if no condition matches.
+*/
+function resolveServerToolResult(mock, args) {
+	if (!Array.isArray(mock)) return mock;
+	for (const entry of mock) if (Object.entries(entry.when).every(([key, value]) => args != null && args[key] === value)) return entry.result;
+}
+//#endregion
+//#region src/simulator/simulator.tsx
+function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, defaultHost = "chatgpt", onCallTool, defaultProdTools = false, defaultProdResources = false, hideSimulatorModes = false, sandboxUrl }) {
+	const state = useSimulatorState({
+		simulations,
+		defaultHost
+	});
+	const [prodTools, setProdTools] = react.useState(state.urlProdTools ?? defaultProdTools);
+	const [prodResources, setProdResources] = react.useState(state.urlProdResources ?? defaultProdResources);
+	const [isRunning, setIsRunning] = react.useState(false);
+	const [hasRun, setHasRun] = react.useState(false);
+	const [showCheck, setShowCheck] = react.useState(false);
+	const checkTimerRef = react.useRef(void 0);
+	react.useEffect(() => {
+		if (prodTools) setHasRun(false);
+		else {
+			const simResult = state.selectedSim?.toolResult ?? void 0;
+			state.setToolResult(simResult);
+		}
+	}, [prodTools, state.selectedSimulationName]);
+	react.useEffect(() => () => clearTimeout(checkTimerRef.current), []);
+	const toolOptions = react.useMemo(() => {
+		if (!prodTools) return [];
+		const seen = /* @__PURE__ */ new Map();
+		for (const simName of state.simulationNames) {
+			const toolName = simulations[simName].tool.name;
+			if (!seen.has(toolName)) seen.set(toolName, simName);
+		}
+		return Array.from(seen.entries()).map(([toolName, simName]) => ({
+			value: simName,
+			label: simulations[simName].tool.title || toolName
+		}));
+	}, [
+		prodTools,
+		state.simulationNames,
+		simulations
+	]);
+	const handleRun = react.useCallback(async () => {
+		if (!onCallTool || !state.selectedSim) return;
+		const toolName = state.selectedSim.tool.name;
+		setIsRunning(true);
+		try {
+			const result = await onCallTool({
+				name: toolName,
+				arguments: state.toolInput
+			});
+			state.setToolResult(result);
+			state.setToolResultJson(JSON.stringify(result, null, 2));
+			state.setToolResultError("");
+			setHasRun(true);
+			setShowCheck(true);
+			clearTimeout(checkTimerRef.current);
+			checkTimerRef.current = setTimeout(() => setShowCheck(false), 2e3);
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			state.setToolResult({
+				content: [{
+					type: "text",
+					text: `Error: ${message}`
+				}],
+				isError: true
+			});
+			state.setToolResultJson(JSON.stringify({
+				content: [{
+					type: "text",
+					text: `Error: ${message}`
+				}],
+				isError: true
+			}, null, 2));
+		} finally {
+			setIsRunning(false);
+		}
+	}, [onCallTool, state]);
+	const activeShell = getHostShell(state.activeHost);
+	const registeredHosts = getRegisteredHosts();
+	const ShellConversation = activeShell?.Conversation;
+	const hostContext = react.useMemo(() => {
+		const styleVars = activeShell?.styleVariables;
+		const userAgent = activeShell?.userAgent;
+		const ctx = { ...state.hostContext };
+		if (styleVars) ctx.styles = { variables: styleVars };
+		if (userAgent) ctx.userAgent = userAgent;
+		return ctx;
+	}, [state.hostContext, activeShell]);
+	react.useEffect(() => {
+		const vars = activeShell?.styleVariables;
+		if (!vars) return;
+		const root = document.documentElement;
+		for (const [key, value] of Object.entries(vars)) if (value) root.style.setProperty(key, value);
+	}, [activeShell]);
+	const prevPageStyleKeysRef = react.useRef([]);
+	react.useEffect(() => {
+		const root = document.documentElement;
+		for (const key of prevPageStyleKeysRef.current) root.style.removeProperty(key);
+		const pageStyles = activeShell?.pageStyles;
+		if (pageStyles) {
+			const keys = [];
+			for (const [key, value] of Object.entries(pageStyles)) {
+				root.style.setProperty(key, value);
+				keys.push(key);
+			}
+			prevPageStyleKeysRef.current = keys;
+		} else prevPageStyleKeysRef.current = [];
+	}, [activeShell]);
+	const handleCallTool = react.useCallback((params) => {
+		if (onCallTool) return onCallTool(params);
+		const mock = state.selectedSim?.serverTools?.[params.name];
+		if (mock) {
+			const result = resolveServerToolResult(mock, params.arguments);
+			if (result) return result;
+		}
+		return { content: [{
+			type: "text",
+			text: `[Simulator] Tool "${params.name}" called — no serverTools mock found in simulation "${state.selectedSimulationName}".`
+		}] };
+	}, [
+		onCallTool,
+		state.selectedSim,
+		state.selectedSimulationName
+	]);
+	const prodToolsUserMessage = prodTools && state.selectedSim ? `Call my ${state.selectedSim.tool.title || state.selectedSim.tool.name} tool` : void 0;
+	const prodResourcesPath = react.useMemo(() => {
+		if (!prodResources || !state.selectedSim?.resource) return void 0;
+		const name = state.selectedSim.resource.name;
+		return `/dist/${name}/${name}.html`;
+	}, [prodResources, state.selectedSim?.resource]);
+	const [prodResourcesReady, setProdResourcesReady] = react.useState(false);
+	const [prodResourcesGeneration, setProdResourcesGeneration] = react.useState(0);
+	const prodResourcesWasReady = react.useRef(false);
+	react.useEffect(() => {
+		if (!prodResourcesPath) {
+			setProdResourcesReady(false);
+			prodResourcesWasReady.current = false;
+			return;
+		}
+		let cancelled = false;
+		let timer;
+		const check = async () => {
+			let ok = false;
+			try {
+				ok = (await fetch(prodResourcesPath, { method: "HEAD" })).ok;
+			} catch {}
+			if (cancelled) return;
+			if (ok) {
+				if (!prodResourcesWasReady.current) setProdResourcesGeneration((g) => g + 1);
+				prodResourcesWasReady.current = true;
+				setProdResourcesReady(true);
+			} else {
+				prodResourcesWasReady.current = false;
+				setProdResourcesReady(false);
+			}
+			timer = setTimeout(check, 1e3);
+		};
+		check();
+		return () => {
+			cancelled = true;
+			clearTimeout(timer);
+		};
+	}, [prodResourcesPath]);
+	const effectiveResourceUrl = (prodResourcesPath && prodResourcesReady ? prodResourcesPath : void 0) ?? state.resourceUrl;
+	const prodResourcesLoading = !!prodResourcesPath && !prodResourcesReady;
+	const showEmptyState = prodTools && !hasRun;
+	let content;
+	const iframeBg = "var(--sim-bg-conversation, var(--color-background-primary, transparent))";
+	if (showEmptyState) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "h-full w-full flex items-center justify-center",
+		style: { background: iframeBg },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "text-sm",
+			style: { color: "var(--color-text-secondary)" },
+			children: [
+				"Press ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Run" }),
+				" to call the tool"
+			]
+		})
+	});
+	else if (prodResourcesLoading) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "h-full w-full flex items-center justify-center",
+		style: { background: iframeBg },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-sm",
+			style: { color: "var(--color-text-secondary)" },
+			children: "Building…"
+		})
+	});
+	else if (effectiveResourceUrl) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "h-full w-full",
+		style: { background: iframeBg },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IframeResource, {
+			src: effectiveResourceUrl,
+			hostContext,
+			toolInput: state.toolInput,
+			toolResult: state.effectiveToolResult,
+			hostOptions: {
+				hostInfo: activeShell?.hostInfo,
+				hostCapabilities: activeShell?.hostCapabilities,
+				onDisplayModeChange: state.handleDisplayModeChange,
+				onUpdateModelContext: state.handleUpdateModelContext,
+				onCallTool: handleCallTool
+			},
+			permissions: state.permissions,
+			prefersBorder: state.prefersBorder,
+			onDisplayModeReady: state.handleDisplayModeReady,
+			debugInjectState: state.modelContext,
+			injectOpenAIRuntime: state.activeHost === "chatgpt",
+			sandboxUrl,
+			className: "h-full w-full"
+		}, `${state.activeHost}-${state.selectedSimulationName}-${prodResources}-${prodResourcesGeneration}`)
+	});
+	else if (!prodResources && state.resourceScript) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "h-full w-full",
+		style: { background: iframeBg },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IframeResource, {
+			scriptSrc: state.resourceScript,
+			hostContext,
+			toolInput: state.toolInput,
+			toolResult: state.effectiveToolResult,
+			csp: state.csp,
+			hostOptions: {
+				hostInfo: activeShell?.hostInfo,
+				hostCapabilities: activeShell?.hostCapabilities,
+				onDisplayModeChange: state.handleDisplayModeChange,
+				onUpdateModelContext: state.handleUpdateModelContext,
+				onCallTool: handleCallTool
+			},
+			permissions: state.permissions,
+			prefersBorder: state.prefersBorder,
+			onDisplayModeReady: state.handleDisplayModeReady,
+			debugInjectState: state.modelContext,
+			injectOpenAIRuntime: state.activeHost === "chatgpt",
+			sandboxUrl,
+			className: "h-full w-full"
+		}, `${state.activeHost}-${state.selectedSimulationName}`)
+	});
+	else content = children;
+	const applyTheme = activeShell?.applyTheme;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
+		theme: state.theme,
+		applyTheme,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleSidebar, {
+			controls: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [
+					!hideSimulatorModes && onCallTool && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+						checked: prodTools,
+						onChange: setProdTools,
+						label: "Prod Tools",
+						tooltip: "Use real tool handlers instead of simulations",
+						docsPath: "api-reference/cli/dev#prod-tools-and-prod-resources-flags"
+					}),
+					!hideSimulatorModes && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+						checked: prodResources,
+						onChange: setProdResources,
+						label: "Prod Resources",
+						tooltip: "Load resources from dist/ builds instead of HMR",
+						docsPath: "api-reference/cli/dev#prod-tools-and-prod-resources-flags"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-2 gap-2",
+						children: [registeredHosts.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+							label: "Host",
+							tooltip: "Host runtime to simulate",
+							docsPath: "api-reference/functions/host-detection",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+								value: state.activeHost,
+								onChange: (value) => state.setActiveHost(value),
+								options: registeredHosts.map((h) => ({
+									value: h.id,
+									label: h.label
+								}))
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+							label: "Width",
+							tooltip: "Chat width",
+							docsPath: "api-reference/simulations/simulator",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+								value: state.screenWidth,
+								onChange: (value) => state.setScreenWidth(value),
+								options: [
+									{
+										value: "mobile-s",
+										label: "Mobile S (375px)"
+									},
+									{
+										value: "mobile-l",
+										label: "Mobile L (425px)"
+									},
+									{
+										value: "tablet",
+										label: "Tablet (768px)"
+									},
+									{
+										value: "full",
+										label: "100% (Full)"
+									}
+								]
+							})
+						})]
+					}),
+					prodTools && toolOptions.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+						label: "Tool",
+						tooltip: "Tool to call with prod handler",
+						docsPath: "api-reference/cli/dev",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+							value: state.selectedSimulationName,
+							onChange: (value) => state.setSelectedSimulationName(value),
+							options: toolOptions
+						})
+					}),
+					!prodTools && state.simulationNames.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+						label: "Simulation",
+						tooltip: "Test fixture to render",
+						docsPath: "api-reference/simulations/simulation",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+							value: state.selectedSimulationName,
+							onChange: (value) => state.setSelectedSimulationName(value),
+							options: state.simulationNames.map((name) => {
+								const sim = simulations[name];
+								const resourceTitle = sim.resource ? sim.resource.title || sim.resource.name : void 0;
+								const toolTitle = sim.tool.title || sim.tool.name;
+								return {
+									value: name,
+									label: resourceTitle ? `${resourceTitle}: ${toolTitle}` : toolTitle
+								};
+							})
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+						label: "Host Context",
+						defaultCollapsed: false,
+						tooltip: "Host-provided environment",
+						docsPath: "api-reference/hooks/use-host-context",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "grid grid-cols-[2fr_1fr] gap-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+										label: "Theme",
+										tooltip: "Host color theme",
+										docsPath: "api-reference/hooks/use-theme",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarToggle, {
+											value: state.theme,
+											onChange: (value) => state.setTheme(value),
+											options: [{
+												value: "light",
+												label: "Light"
+											}, {
+												value: "dark",
+												label: "Dark"
+											}]
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+										label: "Locale",
+										tooltip: "BCP 47 language tag",
+										docsPath: "api-reference/hooks/use-locale",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+											applyOnBlur: true,
+											value: state.locale,
+											onChange: (value) => state.setLocale(value),
+											placeholder: "en-US"
+										})
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+									label: "Display Mode",
+									tooltip: "Host resource rendering paradigm",
+									docsPath: "api-reference/hooks/use-display-mode",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarToggle, {
+										value: state.displayMode,
+										onChange: (value) => state.setDisplayMode(value),
+										options: [
+											{
+												value: "inline",
+												label: "Inline"
+											},
+											{
+												value: "pip",
+												label: "PiP"
+											},
+											{
+												value: "fullscreen",
+												label: "Full"
+											}
+										]
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "grid grid-cols-7 gap-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "col-span-3",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+											label: "Platform",
+											tooltip: "End user device platform",
+											docsPath: "api-reference/hooks/use-platform",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+												value: state.platform,
+												onChange: (value) => {
+													const p = value;
+													state.setPlatform(p);
+													if (p === "mobile") {
+														state.setHover(false);
+														state.setTouch(true);
+													} else if (p === "desktop") {
+														state.setHover(true);
+														state.setTouch(false);
+													} else {
+														state.setHover(true);
+														state.setTouch(false);
+													}
+												},
+												options: [
+													{
+														value: "mobile",
+														label: "Mobile"
+													},
+													{
+														value: "desktop",
+														label: "Desktop"
+													},
+													{
+														value: "web",
+														label: "Web"
+													}
+												]
+											})
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "col-span-4",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+											label: "Capabilities",
+											tooltip: "End user device capabilities",
+											docsPath: "api-reference/hooks/use-device-capabilities",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex gap-2",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+													checked: state.hover,
+													onChange: state.setHover,
+													label: "Hover"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+													checked: state.touch,
+													onChange: state.setTouch,
+													label: "Touch"
+												})]
+											})
+										})
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+									label: "Time Zone",
+									tooltip: "End user IANA time zone",
+									docsPath: "api-reference/hooks/use-time-zone",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+										applyOnBlur: true,
+										value: state.timeZone,
+										onChange: (value) => state.setTimeZone(value),
+										placeholder: "e.g. America/New_York"
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+									label: "Container Dimensions",
+									tooltip: "Host-enforced size constraints (px)",
+									docsPath: "api-reference/hooks/use-viewport",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "grid grid-cols-4 gap-1",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+												label: "Height",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: "-",
+													value: state.containerHeight != null ? String(state.containerHeight) : "",
+													onChange: (value) => state.setContainerHeight(value ? Number(value) : void 0)
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+												label: "Width",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: "-",
+													value: state.containerWidth != null ? String(state.containerWidth) : "",
+													onChange: (value) => state.setContainerWidth(value ? Number(value) : void 0)
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+												label: "Max H",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: "-",
+													value: state.containerMaxHeight != null ? String(state.containerMaxHeight) : "",
+													onChange: (value) => state.setContainerMaxHeight(value ? Number(value) : void 0)
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+												label: "Max W",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: state.measuredContentWidth != null ? String(state.measuredContentWidth) : "-",
+													value: state.containerMaxWidth != null ? String(state.containerMaxWidth) : "",
+													onChange: (value) => state.setContainerMaxWidth(value ? Number(value) : void 0)
+												})
+											})
+										]
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+									label: "Safe Area Insets",
+									tooltip: "Device safe area padding (px)",
+									docsPath: "api-reference/hooks/use-safe-area",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "grid grid-cols-4 gap-1",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-center gap-0.5",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-[10px]",
+													style: { color: "var(--color-text-secondary)" },
+													children: "↑"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: "-",
+													value: state.safeAreaInsets.top ? String(state.safeAreaInsets.top) : "",
+													onChange: (value) => state.setSafeAreaInsets((prev) => ({
+														...prev,
+														top: Number(value) || 0
+													}))
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-center gap-0.5",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-[10px]",
+													style: { color: "var(--color-text-secondary)" },
+													children: "↓"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: "-",
+													value: state.safeAreaInsets.bottom ? String(state.safeAreaInsets.bottom) : "",
+													onChange: (value) => state.setSafeAreaInsets((prev) => ({
+														...prev,
+														bottom: Number(value) || 0
+													}))
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-center gap-0.5",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-[10px]",
+													style: { color: "var(--color-text-secondary)" },
+													children: "←"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: "-",
+													value: state.safeAreaInsets.left ? String(state.safeAreaInsets.left) : "",
+													onChange: (value) => state.setSafeAreaInsets((prev) => ({
+														...prev,
+														left: Number(value) || 0
+													}))
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-center gap-0.5",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-[10px]",
+													style: { color: "var(--color-text-secondary)" },
+													children: "→"
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+													type: "number",
+													applyOnBlur: true,
+													placeholder: "-",
+													value: state.safeAreaInsets.right ? String(state.safeAreaInsets.right) : "",
+													onChange: (value) => state.setSafeAreaInsets((prev) => ({
+														...prev,
+														right: Number(value) || 0
+													}))
+												})]
+											})
+										]
+									})
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+						label: "App Context",
+						defaultCollapsed: true,
+						tooltip: "App-provided context shared with the model",
+						docsPath: "api-reference/hooks/use-app-state",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTextarea, {
+							value: state.modelContextJson,
+							onChange: (json) => state.validateJSON(json, state.setModelContextJson, state.setModelContextError),
+							onFocus: () => state.setEditingField("modelContext"),
+							onBlur: () => state.commitJSON(state.modelContextJson, state.setModelContextError, (parsed) => {
+								state.setModelContext(parsed);
+							}),
+							error: state.modelContextError,
+							maxRows: 8
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+						label: "Tool Input (JSON)",
+						defaultCollapsed: !prodTools,
+						tooltip: "Arguments passed to the tool",
+						docsPath: "api-reference/hooks/use-tool-data",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTextarea, {
+							value: state.toolInputJson,
+							onChange: (json) => state.validateJSON(json, state.setToolInputJson, state.setToolInputError),
+							onFocus: () => state.setEditingField("toolInput"),
+							onBlur: () => state.commitJSON(state.toolInputJson, state.setToolInputError, (parsed) => state.setToolInput(parsed ?? {})),
+							error: state.toolInputError,
+							maxRows: 8
+						})
+					}, `tool-input-${prodTools}`),
+					!prodTools && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+						label: "Tool Result (JSON)",
+						defaultCollapsed: false,
+						tooltip: "Structured content returned by the tool",
+						docsPath: "api-reference/hooks/use-tool-data",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTextarea, {
+							value: state.toolResultJson,
+							onChange: (json) => state.validateJSON(json, state.setToolResultJson, state.setToolResultError),
+							onFocus: () => state.setEditingField("toolResult"),
+							onBlur: () => state.commitJSON(state.toolResultJson, state.setToolResultError, (parsed) => {
+								if (parsed === null) state.setToolResult(void 0);
+								else {
+									const result = parsed;
+									if ("content" in result || "structuredContent" in result) state.setToolResult(result);
+									else state.setToolResult({
+										content: [],
+										structuredContent: result
+									});
+								}
+							}),
+							error: state.toolResultError,
+							maxRows: 8
+						})
+					})
+				]
+			}),
+			children: ShellConversation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellConversation, {
+				screenWidth: state.screenWidth,
+				displayMode: state.displayMode,
+				platform: state.platform,
+				onRequestDisplayMode: state.handleDisplayModeChange,
+				appName,
+				appIcon,
+				userMessage: prodToolsUserMessage ?? state.selectedSim?.userMessage,
+				onContentWidthChange: state.handleContentWidthChange,
+				headerAction: prodTools && onCallTool ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: handleRun,
+					disabled: isRunning,
+					className: "rounded-full px-3 py-1 text-sm font-medium transition-opacity disabled:opacity-40 flex items-center gap-1.5 cursor-pointer",
+					style: {
+						backgroundColor: "var(--color-text-primary)",
+						color: "var(--color-background-primary)"
+					},
+					children: [showCheck ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						width: "12",
+						height: "12",
+						viewBox: "0 0 12 12",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 6L5 9L10 3" })
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						width: "10",
+						height: "12",
+						viewBox: "0 0 10 12",
+						fill: "currentColor",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 0L10 6L0 12V0Z" })
+					}), "Run"]
+				}) : void 0,
+				children: content
+			}) : content
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "DEFAULT_STYLE_VARIABLES", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_STYLE_VARIABLES;
+	}
+});
+Object.defineProperty(exports, "IframeResource", {
+	enumerable: true,
+	get: function() {
+		return IframeResource;
+	}
+});
+Object.defineProperty(exports, "McpAppHost", {
+	enumerable: true,
+	get: function() {
+		return McpAppHost;
+	}
+});
+Object.defineProperty(exports, "SCREEN_WIDTHS", {
+	enumerable: true,
+	get: function() {
+		return SCREEN_WIDTHS;
+	}
+});
+Object.defineProperty(exports, "SidebarCheckbox", {
+	enumerable: true,
+	get: function() {
+		return SidebarCheckbox;
+	}
+});
+Object.defineProperty(exports, "SidebarCollapsibleControl", {
+	enumerable: true,
+	get: function() {
+		return SidebarCollapsibleControl;
+	}
+});
+Object.defineProperty(exports, "SidebarControl", {
+	enumerable: true,
+	get: function() {
+		return SidebarControl;
+	}
+});
+Object.defineProperty(exports, "SidebarInput", {
+	enumerable: true,
+	get: function() {
+		return SidebarInput;
+	}
+});
+Object.defineProperty(exports, "SidebarSelect", {
+	enumerable: true,
+	get: function() {
+		return SidebarSelect;
+	}
+});
+Object.defineProperty(exports, "SidebarTextarea", {
+	enumerable: true,
+	get: function() {
+		return SidebarTextarea;
+	}
+});
+Object.defineProperty(exports, "SidebarToggle", {
+	enumerable: true,
+	get: function() {
+		return SidebarToggle;
+	}
+});
+Object.defineProperty(exports, "SimpleSidebar", {
+	enumerable: true,
+	get: function() {
+		return SimpleSidebar;
+	}
+});
+Object.defineProperty(exports, "Simulator", {
+	enumerable: true,
+	get: function() {
+		return Simulator;
+	}
+});
+Object.defineProperty(exports, "ThemeProvider", {
+	enumerable: true,
+	get: function() {
+		return ThemeProvider;
+	}
+});
+Object.defineProperty(exports, "extractResourceCSP", {
+	enumerable: true,
+	get: function() {
+		return extractResourceCSP;
+	}
+});
+Object.defineProperty(exports, "getHostShell", {
+	enumerable: true,
+	get: function() {
+		return getHostShell;
+	}
+});
+Object.defineProperty(exports, "getRegisteredHosts", {
+	enumerable: true,
+	get: function() {
+		return getRegisteredHosts;
+	}
+});
+Object.defineProperty(exports, "registerHostShell", {
+	enumerable: true,
+	get: function() {
+		return registerHostShell;
+	}
+});
+Object.defineProperty(exports, "resolveServerToolResult", {
+	enumerable: true,
+	get: function() {
+		return resolveServerToolResult;
+	}
+});
+Object.defineProperty(exports, "useSimulatorState", {
+	enumerable: true,
+	get: function() {
+		return useSimulatorState;
+	}
+});
+Object.defineProperty(exports, "useThemeContext", {
+	enumerable: true,
+	get: function() {
+		return useThemeContext;
+	}
+});
+
+//# sourceMappingURL=simulator-BYIH-xqQ.cjs.map