sunpeak 0.16.27 → 0.16.28

package/dist/simulator-Gc6n_fT4.cjs

@@ -1,3549 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const protocol = require("./protocol-DkDHRwOW.cjs");
-function _interopNamespaceDefault(e) {
-  const n2 = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n2, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n2.default = e;
-  return Object.freeze(n2);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const DEFAULT_STYLE_VARIABLES = {
-  // Background colors
-  "--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))",
-  // Text colors
-  "--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))",
-  // Border colors
-  "--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))",
-  // Ring colors (focus)
-  "--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)",
-  // Typography — Family
-  "--font-sans": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  "--font-mono": "ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace",
-  // Typography — Weight
-  "--font-weight-normal": "400",
-  "--font-weight-medium": "500",
-  "--font-weight-semibold": "600",
-  "--font-weight-bold": "700",
-  // Typography — Text Size
-  "--font-text-xs-size": "0.75rem",
-  "--font-text-sm-size": "0.875rem",
-  "--font-text-md-size": "1rem",
-  "--font-text-lg-size": "1.125rem",
-  // Typography — Heading Size
-  "--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",
-  // Typography — Text Line Height
-  "--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",
-  // Typography — Heading Line Height
-  "--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
-  "--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
-  "--border-width-regular": "1px",
-  // Shadows
-  "--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)"
-};
-const registry = /* @__PURE__ */ new Map();
-function registerHostShell(shell) {
-  registry.set(shell.id, shell);
-}
-function getHostShell(id) {
-  return registry.get(id);
-}
-function getRegisteredHosts() {
-  return Array.from(registry.values());
-}
-const SCREEN_WIDTHS = {
-  "mobile-s": 375,
-  "mobile-l": 425,
-  tablet: 768,
-  full: 1024
-};
-function CloseIcon$1({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsxRuntime.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"
-    }
-  ) });
-}
-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 = React.useRef(null);
-  const onContentWidthChangeRef = React.useRef(onContentWidthChange);
-  React.useEffect(() => {
-    onContentWidthChangeRef.current = onContentWidthChange;
-  });
-  const setContentRef = React.useCallback((node) => {
-    contentRef.current = node;
-  }, []);
-  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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CloseIcon$1, {})
-                      }
-                    ) }),
-                    isDesktop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-base", children: appName }),
-                    isDesktop && /* @__PURE__ */ jsxRuntime.jsx("div", {})
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "relative", children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto px-4 pt-4 pb-4 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "sunpeak.ai" }),
-              headerAction
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
-            style: { maxWidth: containerWidth },
-            children: /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden flex flex-col", children: [
-              !isFullscreen && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "sr-only", children: "You said:" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto md:pt-8 px-4", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden items-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap", children: userMessage })
-                      }
-                    ) })
-                  }
-                ) }) }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "w-full focus:outline-none flex-1", dir: "auto", "data-turn": "assistant", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("h6", { className: "sr-only", children: [
-                  appName,
-                  " said:"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto pb-10 px-4", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex max-w-full flex-col grow", children: [
-                  !isFullscreen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-3", children: [
-                    appIcon ? appIcon.startsWith("data:") || appIcon.startsWith("http") ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: appIcon, alt: "", className: "size-6 rounded-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: "size-6 rounded-full flex items-center justify-center font-medium text-xs text-white",
-                        style: { backgroundColor: "#10a37f" },
-                        children: "AI"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: appName })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CloseIcon$1, { className: "h-4 w-4" })
-                              },
-                              "pip-close"
-                            ),
-                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "sticky bottom-0 z-10 pointer-events-none", children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto px-4 pt-4 pb-4 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.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)"
-                    }
-                  }
-                ) }) })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-const CHATGPT_HOST_INFO = {
-  name: "chatgpt",
-  version: "0.0.1"
-};
-const CHATGPT_HOST_CAPABILITIES = {
-  openLinks: {},
-  serverTools: {},
-  serverResources: {},
-  logging: {},
-  updateModelContext: {},
-  message: {},
-  sandbox: {
-    permissions: {
-      microphone: {}
-    }
-  }
-};
-function applyChatGPTTheme(theme) {
-  document.documentElement.setAttribute("data-theme", theme);
-  document.documentElement.style.colorScheme = theme;
-}
-const CHATGPT_STYLE_VARIABLES = {
-  ...DEFAULT_STYLE_VARIABLES
-};
-registerHostShell({
-  id: "chatgpt",
-  label: "ChatGPT",
-  Conversation,
-  applyTheme: applyChatGPTTheme,
-  hostInfo: CHATGPT_HOST_INFO,
-  hostCapabilities: CHATGPT_HOST_CAPABILITIES,
-  userAgent: "chatgpt",
-  styleVariables: CHATGPT_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)"
-  }
-});
-function CloseIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M12 4L4 12M4 4L12 12",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round"
-    }
-  ) });
-}
-function BackIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M10 3L5 8L10 13",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-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 = React.useRef(null);
-  const onContentWidthChangeRef = React.useRef(onContentWidthChange);
-  React.useEffect(() => {
-    onContentWidthChangeRef.current = onContentWidthChange;
-  });
-  const setContentRef = React.useCallback((node) => {
-    contentRef.current = node;
-  }, []);
-  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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BackIcon, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-center text-sm font-medium", children: appName }),
-                    isDesktop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "footer",
-                {
-                  className: "pointer-events-auto p-3",
-                  style: {
-                    backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "sunpeak.ai" }),
-              headerAction
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
-            style: { maxWidth: containerWidth },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
-                !isFullscreen && /* @__PURE__ */ jsxRuntime.jsx("article", { className: "w-full", dir: "auto", "data-turn": "user", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("article", { className: "w-full", dir: "auto", "data-turn": "assistant", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("h6", { className: "sr-only", children: [
-                    appName,
-                    " said:"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[48rem] mx-auto", children: [
-                    !isFullscreen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-                      appIcon ? appIcon.startsWith("data:") || appIcon.startsWith("http") ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: appIcon, alt: "", className: "size-6 rounded-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: "size-6 rounded-full flex items-center justify-center text-xs font-medium text-white",
-                          style: { backgroundColor: "#c55a30" },
-                          children: "C"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: appName })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CloseIcon, {})
-                            },
-                            "pip-close"
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              className: isPip ? "relative overflow-hidden h-full rounded-2xl shadow-lg" : "relative overflow-hidden h-full",
-                              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "footer",
-                {
-                  style: {
-                    backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.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)"
-                      }
-                    }
-                  ) }) })
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-const CLAUDE_HOST_INFO = {
-  name: "Claude",
-  version: "1.0.0"
-};
-const CLAUDE_HOST_CAPABILITIES = {
-  openLinks: {},
-  serverTools: {},
-  serverResources: {},
-  downloadFile: {},
-  logging: {},
-  updateModelContext: { text: {} },
-  message: { text: {} },
-  sandbox: {}
-};
-function applyClaudeTheme(theme) {
-  document.documentElement.setAttribute("data-theme", theme);
-  document.documentElement.style.colorScheme = theme;
-}
-const CLAUDE_STYLE_VARIABLES = {
-  ...DEFAULT_STYLE_VARIABLES,
-  // Background colors — warm beige/cream palette
-  "--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)",
-  // Text colors
-  "--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)",
-  // Border colors
-  "--color-border-primary": "light-dark(#e0ddd5, #4a4843)",
-  "--color-border-secondary": "light-dark(#d5d1c8, #5a5753)",
-  "--color-border-tertiary": "light-dark(#f0ede5, #3a3935)"
-};
-registerHostShell({
-  id: "claude",
-  label: "Claude",
-  Conversation: ClaudeConversation,
-  applyTheme: applyClaudeTheme,
-  hostInfo: CLAUDE_HOST_INFO,
-  hostCapabilities: CLAUDE_HOST_CAPABILITIES,
-  userAgent: "claude",
-  styleVariables: CLAUDE_STYLE_VARIABLES,
-  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)"
-  }
-});
-var G = "2026-01-26", _ = "ui/notifications/tool-input-partial";
-var m = protocol.union([protocol.literal("light"), protocol.literal("dark")]).describe("Color theme preference for the host environment."), D = protocol.union([protocol.literal("inline"), protocol.literal("fullscreen"), protocol.literal("pip")]).describe("Display mode for UI presentation."), OQ = protocol.union([protocol.literal("--color-background-primary"), protocol.literal("--color-background-secondary"), protocol.literal("--color-background-tertiary"), protocol.literal("--color-background-inverse"), protocol.literal("--color-background-ghost"), protocol.literal("--color-background-info"), protocol.literal("--color-background-danger"), protocol.literal("--color-background-success"), protocol.literal("--color-background-warning"), protocol.literal("--color-background-disabled"), protocol.literal("--color-text-primary"), protocol.literal("--color-text-secondary"), protocol.literal("--color-text-tertiary"), protocol.literal("--color-text-inverse"), protocol.literal("--color-text-ghost"), protocol.literal("--color-text-info"), protocol.literal("--color-text-danger"), protocol.literal("--color-text-success"), protocol.literal("--color-text-warning"), protocol.literal("--color-text-disabled"), protocol.literal("--color-border-primary"), protocol.literal("--color-border-secondary"), protocol.literal("--color-border-tertiary"), protocol.literal("--color-border-inverse"), protocol.literal("--color-border-ghost"), protocol.literal("--color-border-info"), protocol.literal("--color-border-danger"), protocol.literal("--color-border-success"), protocol.literal("--color-border-warning"), protocol.literal("--color-border-disabled"), protocol.literal("--color-ring-primary"), protocol.literal("--color-ring-secondary"), protocol.literal("--color-ring-inverse"), protocol.literal("--color-ring-info"), protocol.literal("--color-ring-danger"), protocol.literal("--color-ring-success"), protocol.literal("--color-ring-warning"), protocol.literal("--font-sans"), protocol.literal("--font-mono"), protocol.literal("--font-weight-normal"), protocol.literal("--font-weight-medium"), protocol.literal("--font-weight-semibold"), protocol.literal("--font-weight-bold"), protocol.literal("--font-text-xs-size"), protocol.literal("--font-text-sm-size"), protocol.literal("--font-text-md-size"), protocol.literal("--font-text-lg-size"), protocol.literal("--font-heading-xs-size"), protocol.literal("--font-heading-sm-size"), protocol.literal("--font-heading-md-size"), protocol.literal("--font-heading-lg-size"), protocol.literal("--font-heading-xl-size"), protocol.literal("--font-heading-2xl-size"), protocol.literal("--font-heading-3xl-size"), protocol.literal("--font-text-xs-line-height"), protocol.literal("--font-text-sm-line-height"), protocol.literal("--font-text-md-line-height"), protocol.literal("--font-text-lg-line-height"), protocol.literal("--font-heading-xs-line-height"), protocol.literal("--font-heading-sm-line-height"), protocol.literal("--font-heading-md-line-height"), protocol.literal("--font-heading-lg-line-height"), protocol.literal("--font-heading-xl-line-height"), protocol.literal("--font-heading-2xl-line-height"), protocol.literal("--font-heading-3xl-line-height"), protocol.literal("--border-radius-xs"), protocol.literal("--border-radius-sm"), protocol.literal("--border-radius-md"), protocol.literal("--border-radius-lg"), protocol.literal("--border-radius-xl"), protocol.literal("--border-radius-full"), protocol.literal("--border-width-regular"), protocol.literal("--shadow-hairline"), protocol.literal("--shadow-sm"), protocol.literal("--shadow-md"), protocol.literal("--shadow-lg")]).describe("CSS variable keys available to MCP apps for theming."), VQ = 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.`), protocol.union([protocol.string(), 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 = protocol.object({ method: protocol.literal("ui/open-link"), params: protocol.object({ url: protocol.string().describe("URL to open in the host's browser") }) });
-protocol.object({ isError: protocol.boolean().optional().describe("True if the host failed to open the URL (e.g., due to security policy).") }).passthrough();
-protocol.object({ isError: protocol.boolean().optional().describe("True if the download failed (e.g., user cancelled or host denied).") }).passthrough();
-protocol.object({ isError: protocol.boolean().optional().describe("True if the host rejected or failed to deliver the message.") }).passthrough();
-var F = protocol.object({ method: protocol.literal("ui/notifications/sandbox-proxy-ready"), params: protocol.object({}) }), j = protocol.object({ connectDomains: protocol.array(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: protocol.array(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: protocol.array(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: protocol.array(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 = protocol.object({ camera: protocol.object({}).optional().describe("Request camera access.\n\nMaps to Permission Policy `camera` feature."), microphone: protocol.object({}).optional().describe("Request microphone access.\n\nMaps to Permission Policy `microphone` feature."), geolocation: protocol.object({}).optional().describe("Request geolocation access.\n\nMaps to Permission Policy `geolocation` feature."), clipboardWrite: protocol.object({}).optional().describe("Request clipboard write access.\n\nMaps to Permission Policy `clipboard-write` feature.") }), P = protocol.object({ method: protocol.literal("ui/notifications/size-changed"), params: protocol.object({ width: protocol.number().optional().describe("New width in pixels."), height: protocol.number().optional().describe("New height in pixels.") }) });
-protocol.object({ method: protocol.literal("ui/notifications/tool-input"), params: protocol.object({ arguments: protocol.record(protocol.string(), protocol.unknown().describe("Complete tool call arguments as key-value pairs.")).optional().describe("Complete tool call arguments as key-value pairs.") }) });
-protocol.object({ method: protocol.literal("ui/notifications/tool-input-partial"), params: protocol.object({ arguments: protocol.record(protocol.string(), protocol.unknown().describe("Partial tool call arguments (incomplete, may change).")).optional().describe("Partial tool call arguments (incomplete, may change).") }) });
-protocol.object({ method: protocol.literal("ui/notifications/tool-cancelled"), params: protocol.object({ reason: protocol.string().optional().describe('Optional reason for the cancellation (e.g., "user action", "timeout").') }) });
-var p = protocol.object({ fonts: protocol.string().optional() }), c = protocol.object({ variables: VQ.optional().describe("CSS variables for theming the app."), css: p.optional().describe("CSS blocks that apps can inject.") });
-protocol.object({ method: protocol.literal("ui/resource-teardown"), params: protocol.object({}) });
-var R = protocol.record(protocol.string(), protocol.unknown()), O = protocol.object({ text: protocol.object({}).optional().describe("Host supports text content blocks."), image: protocol.object({}).optional().describe("Host supports image content blocks."), audio: protocol.object({}).optional().describe("Host supports audio content blocks."), resource: protocol.object({}).optional().describe("Host supports resource content blocks."), resourceLink: protocol.object({}).optional().describe("Host supports resource link content blocks."), structuredContent: protocol.object({}).optional().describe("Host supports structured content.") }), n = protocol.object({ experimental: protocol.object({}).optional().describe("Experimental features (structure TBD)."), openLinks: protocol.object({}).optional().describe("Host supports opening external URLs."), downloadFile: protocol.object({}).optional().describe("Host supports file downloads via ui/download-file."), serverTools: protocol.object({ listChanged: protocol.boolean().optional().describe("Host supports tools/list_changed notifications.") }).optional().describe("Host can proxy tool calls to the MCP server."), serverResources: protocol.object({ listChanged: protocol.boolean().optional().describe("Host supports resources/list_changed notifications.") }).optional().describe("Host can proxy resource reads to the MCP server."), logging: protocol.object({}).optional().describe("Host accepts log messages."), sandbox: 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 = protocol.object({ experimental: protocol.object({}).optional().describe("Experimental features (structure TBD)."), tools: protocol.object({ listChanged: protocol.boolean().optional().describe("App supports tools/list_changed notifications.") }).optional().describe("App exposes MCP-style tools that the host can call."), availableDisplayModes: protocol.array(D).optional().describe("Display modes the app supports.") }), M = protocol.object({ method: protocol.literal("ui/notifications/initialized"), params: protocol.object({}).optional() });
-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: 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: 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 = protocol.object({ method: protocol.literal("ui/request-display-mode"), params: protocol.object({ mode: D.describe("The display mode being requested.") }) });
-protocol.object({ mode: D.describe("The display mode that was actually set. May differ from requested if not supported.") }).passthrough();
-var l = protocol.union([protocol.literal("model"), protocol.literal("app")]).describe("Tool visibility scope - who can access the tool.");
-protocol.object({ resourceUri: protocol.string().optional(), visibility: 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`) });
-protocol.object({ mimeTypes: protocol.array(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 = protocol.object({ method: protocol.literal("ui/download-file"), params: protocol.object({ contents: protocol.array(protocol.union([protocol.EmbeddedResourceSchema, protocol.ResourceLinkSchema])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.") }) }), C = protocol.object({ method: protocol.literal("ui/message"), params: protocol.object({ role: protocol.literal("user").describe('Message role, currently only "user" is supported.'), content: protocol.array(protocol.ContentBlockSchema).describe("Message content blocks (text, image, etc.).") }) });
-protocol.object({ method: protocol.literal("ui/notifications/sandbox-resource-ready"), params: protocol.object({ html: protocol.string().describe("HTML content to load into the inner iframe."), sandbox: 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.") }) });
-protocol.object({ method: protocol.literal("ui/notifications/tool-result"), params: protocol.CallToolResultSchema.describe("Standard MCP tool execution result.") });
-var q = protocol.object({ toolInfo: protocol.object({ id: protocol.RequestIdSchema.optional().describe("JSON-RPC id of the tools/call request."), tool: 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: protocol.array(D).optional().describe("Display modes the host supports."), containerDimensions: protocol.union([protocol.object({ height: protocol.number().describe("Fixed container height in pixels.") }), protocol.object({ maxHeight: protocol.union([protocol.number(), protocol._undefined()]).optional().describe("Maximum container height in pixels.") })]).and(protocol.union([protocol.object({ width: protocol.number().describe("Fixed container width in pixels.") }), protocol.object({ maxWidth: protocol.union([protocol.number(), 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: protocol.string().optional().describe("User's language and region preference in BCP 47 format."), timeZone: protocol.string().optional().describe("User's timezone in IANA format."), userAgent: protocol.string().optional().describe("Host application identifier."), platform: protocol.union([protocol.literal("web"), protocol.literal("desktop"), protocol.literal("mobile")]).optional().describe("Platform type for responsive design decisions."), deviceCapabilities: protocol.object({ touch: protocol.boolean().optional().describe("Whether the device supports touch input."), hover: protocol.boolean().optional().describe("Whether the device supports hover interactions.") }).optional().describe("Device input capabilities."), safeAreaInsets: protocol.object({ top: protocol.number().describe("Top safe area inset in pixels."), right: protocol.number().describe("Right safe area inset in pixels."), bottom: protocol.number().describe("Bottom safe area inset in pixels."), left: protocol.number().describe("Left safe area inset in pixels.") }).optional().describe("Mobile safe area boundaries in pixels.") }).passthrough();
-protocol.object({ method: protocol.literal("ui/notifications/host-context-changed"), params: q.describe("Partial context update containing only changed fields.") });
-var y = protocol.object({ method: protocol.literal("ui/update-model-context"), params: protocol.object({ content: protocol.array(protocol.ContentBlockSchema).optional().describe("Context content blocks (text, image, etc.)."), structuredContent: protocol.record(protocol.string(), protocol.unknown().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.") }) }), f = protocol.object({ method: protocol.literal("ui/initialize"), params: protocol.object({ appInfo: protocol.ImplementationSchema.describe("App identification (name and version)."), appCapabilities: i.describe("Features and capabilities this app provides."), protocolVersion: protocol.string().describe("Protocol version this app supports.") }) });
-protocol.object({ protocolVersion: protocol.string().describe('Negotiated protocol version string (e.g., "2025-11-21").'), hostInfo: 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();
-class N {
-  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 $ = 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 !== _) 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];
-class oQ extends 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(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(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(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(protocol.ListResourcesRequestSchema, async (Y, Z) => {
-      return X(Y.params, Z);
-    });
-  }
-  set onlistresourcetemplates(X) {
-    this.setRequestHandler(protocol.ListResourceTemplatesRequestSchema, async (Y, Z) => {
-      return X(Y.params, Z);
-    });
-  }
-  set onreadresource(X) {
-    this.setRequestHandler(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(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 = false;
-    for (let $ of Object.keys(X)) {
-      let K = this._hostContext[$], J = X[$];
-      if (aQ(K, J)) continue;
-      Y[$] = J, Z = true;
-    }
-    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 }, protocol.CallToolResultSchema, { signal: $.signal });
-        }, Y.tools.listChanged) this._client.setNotificationHandler(protocol.ToolListChangedNotificationSchema, (Z) => this.sendToolListChanged(Z.params));
-      }
-      if (Y.resources) {
-        if (this.onlistresources = async (Z, $) => {
-          return this._client.request({ method: "resources/list", params: Z }, protocol.ListResourcesResultSchema, { signal: $.signal });
-        }, this.onlistresourcetemplates = async (Z, $) => {
-          return this._client.request({ method: "resources/templates/list", params: Z }, protocol.ListResourceTemplatesResultSchema, { signal: $.signal });
-        }, this.onreadresource = async (Z, $) => {
-          return this._client.request({ method: "resources/read", params: Z }, protocol.ReadResourceResultSchema, { signal: $.signal });
-        }, Y.resources.listChanged) this._client.setNotificationHandler(protocol.ResourceListChangedNotificationSchema, (Z) => this.sendResourceListChanged(Z.params));
-      }
-      if (Y.prompts) {
-        if (this.onlistprompts = async (Z, $) => {
-          return this._client.request({ method: "prompts/list", params: Z }, protocol.ListPromptsResultSchema, { signal: $.signal });
-        }, Y.prompts.listChanged) this._client.setNotificationHandler(protocol.PromptListChangedNotificationSchema, (Z) => this.sendPromptListChanged(Z.params));
-      }
-    }
-    return super.connect(X);
-  }
-}
-function aQ(X, Y) {
-  return JSON.stringify(X) === JSON.stringify(Y);
-}
-const DEFAULT_HOST_INFO = { name: "SunpeakSimulator", version: "1.0.0" };
-const DEFAULT_HOST_CAPABILITIES = {
-  openLinks: {},
-  serverTools: {},
-  serverResources: {},
-  downloadFile: {},
-  logging: {},
-  updateModelContext: { text: {} },
-  message: { text: {} },
-  sandbox: {}
-};
-class McpAppHost {
-  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;
-    const hostInfo = options.hostInfo ?? DEFAULT_HOST_INFO;
-    const hostCapabilities = options.hostCapabilities ?? DEFAULT_HOST_CAPABILITIES;
-    this.bridge = new oQ(null, hostInfo, hostCapabilities, {
-      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;
-  }
-}
-const 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("");
-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>`;
-}
-const 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"
-];
-function escapeHtml(str) {
-  return str.replace(/[&<>"']/g, (c2) => {
-    const entities = {
-      "&": "&amp;",
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;"
-    };
-    return entities[c2] ?? c2;
-  });
-}
-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;
-  }
-}
-function extractResourceCSP(resource) {
-  const meta = resource._meta;
-  const ui = meta?.ui;
-  return ui?.csp;
-}
-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;
-  }
-}
-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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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("; ");
-}
-const PAINT_FENCE_SCRIPT = `window.addEventListener("message",function(e){
-if(e.data&&e.data.method==="sunpeak/fence"){
-var fid=e.data.params&&e.data.params.fenceId;
-requestAnimationFrame(function(){
-e.source.postMessage({jsonrpc:"2.0",method:"sunpeak/fence-ack",params:{fenceId:fid}},"*");
-});}});`;
-function generateScriptHtml(scriptSrc, theme, cspPolicy, platformScript) {
-  const safeScriptSrc = escapeHtml(scriptSrc);
-  const safeCsp = escapeHtml(cspPolicy);
-  const safeTheme = escapeHtml(theme);
-  const platformTag = platformScript ? `
-  <script>${platformScript}<\/script>` : "";
-  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>${platformTag}
-</head>
-<body>
-  <div id="root"></div>
-  <script src="${safeScriptSrc}"><\/script>
-</body>
-</html>`;
-}
-function buildIframeAllow(permissions) {
-  const parts = [
-    "local-network-access *"
-    // Always needed for local dev server access
-  ];
-  const permMap = [
-    ["camera", "camera"],
-    ["microphone", "microphone"],
-    ["geolocation", "geolocation"],
-    ["clipboardWrite", "clipboard-write"]
-  ];
-  for (const [key, directive] of permMap) {
-    if (permissions?.[key]) {
-      parts.push(directive);
-    }
-  }
-  return parts.join("; ");
-}
-function IframeResource({
-  src,
-  scriptSrc,
-  hostContext,
-  toolInput,
-  toolInputPartial,
-  toolResult,
-  hostOptions,
-  csp,
-  permissions,
-  prefersBorder,
-  className,
-  style,
-  onDisplayModeReady,
-  debugInjectState,
-  injectOpenAIRuntime,
-  sandboxUrl
-}) {
-  const iframeRef = React.useRef(null);
-  const hostRef = React.useRef(null);
-  const resourceUrl = src ?? scriptSrc;
-  const srcRef = React.useRef(src);
-  srcRef.current = src;
-  const scriptSrcRef = React.useRef(scriptSrc);
-  scriptSrcRef.current = scriptSrc;
-  const cspRef = React.useRef(csp);
-  cspRef.current = csp;
-  const hostContextRef = React.useRef(hostContext);
-  hostContextRef.current = hostContext;
-  const injectOpenAIRuntimeRef = React.useRef(injectOpenAIRuntime);
-  injectOpenAIRuntimeRef.current = injectOpenAIRuntime;
-  const permissionsRef = React.useRef(permissions);
-  permissionsRef.current = permissions;
-  const hasReceivedSizeRef = React.useRef(false);
-  const displayModeRef = React.useRef(hostContext?.displayMode);
-  displayModeRef.current = hostContext?.displayMode;
-  const lastContentHeightRef = React.useRef(null);
-  const host = 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 style2 = getComputedStyle(iframe);
-        const isBorderBox = style2.boxSizing === "border-box";
-        const from = {};
-        const to = {};
-        if (params.width != null) {
-          let w = params.width;
-          if (isBorderBox) {
-            w += parseFloat(style2.borderLeftWidth) + parseFloat(style2.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(style2.borderTopWidth) + parseFloat(style2.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 theme = hostContextRef.current?.theme ?? "dark";
-          const platformScriptStr = injectOpenAIRuntimeRef.current ? MOCK_OPENAI_RUNTIME_SCRIPT : void 0;
-          const appHtml = generateScriptHtml(
-            absoluteScriptSrc,
-            theme,
-            cspPolicy,
-            platformScriptStr
-          );
-          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
-            }
-          });
-        }
-      }
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-    // Stable - create once
-  );
-  hostRef.current = host;
-  const setIframeRef = React.useCallback(
-    (node) => {
-      iframeRef.current = node;
-      if (node?.contentWindow) {
-        host.connectToIframe(node.contentWindow);
-      }
-    },
-    [host]
-  );
-  const handleLoad = React.useCallback(() => {
-    if (iframeRef.current) {
-      iframeRef.current.style.opacity = "1";
-      iframeRef.current.style.transition = "opacity 100ms";
-    }
-  }, []);
-  React.useEffect(() => {
-    if (hostOptions) {
-      host.updateOptions(hostOptions);
-    }
-  }, [host, hostOptions]);
-  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]);
-  React.useEffect(() => {
-    if (toolInput) {
-      host.sendToolInput(toolInput);
-    }
-  }, [host, toolInput]);
-  React.useEffect(() => {
-    if (toolInputPartial) {
-      host.sendToolInputPartial(toolInputPartial);
-    }
-  }, [host, toolInputPartial]);
-  React.useEffect(() => {
-    if (toolResult) {
-      host.sendToolResult(toolResult);
-    }
-  }, [host, toolResult]);
-  React.useEffect(() => {
-    if (debugInjectState != null) {
-      host.injectState(debugInjectState);
-    }
-  }, [host, debugInjectState]);
-  React.useEffect(() => {
-    return () => {
-      hostRef.current?.close();
-    };
-  }, []);
-  const isValidUrl = React.useMemo(() => resourceUrl && isAllowedUrl(resourceUrl), [resourceUrl]);
-  const allowAttribute = React.useMemo(() => buildIframeAllow(permissions), [permissions]);
-  const borderStyle = prefersBorder ? { border: "1px solid var(--color-border-primary, #e5e7eb)" } : { border: "none" };
-  const sandboxSrc = 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 = React.useMemo(() => {
-    if (sandboxSrc) return void 0;
-    const platformScript = injectOpenAIRuntime ? MOCK_OPENAI_RUNTIME_SCRIPT : void 0;
-    return generateSandboxProxyHtml(platformScript);
-  }, [sandboxSrc, injectOpenAIRuntime]);
-  const iframeStyle = {
-    ...borderStyle,
-    background: "transparent",
-    colorScheme: hostContext?.theme === "light" ? "light dark" : "dark light",
-    // Start hidden; handleLoad fades in via direct DOM update
-    opacity: 0,
-    width: "100%",
-    // In fullscreen, fill the container immediately. In other modes, use
-    // minHeight to prevent collapse while waiting for the app to report size.
-    ...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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { color: "red", padding: 20 }, children: "Error: Script source not allowed." });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsxRuntime.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
-    }
-  ) });
-}
-const DEFAULT_THEME = "dark";
-const DEFAULT_DISPLAY_MODE = "inline";
-const DEFAULT_PLATFORM = "desktop";
-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 hasCapParams = hoverParam || touchParam;
-  const deviceCapabilities = hasCapParams ? {
-    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 hasSafeAreaParams = safeAreaTop || safeAreaBottom || safeAreaLeft || safeAreaRight;
-  const safeAreaInsets = hasSafeAreaParams ? {
-    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 = React.useMemo(() => parseUrlParams(), []);
-  const [screenWidth, setScreenWidth] = React.useState("full");
-  const isMobileWidth = (width) => width === "mobile-s" || width === "mobile-l";
-  const [activeHost, setActiveHost] = React.useState(urlParams.host ?? defaultHost);
-  const initialSimulationName = React.useMemo(() => {
-    const defaultName = simulationNames[0] ?? "";
-    if (!urlParams.simulation) return defaultName;
-    return urlParams.simulation in simulations ? urlParams.simulation : defaultName;
-  }, [urlParams.simulation, simulations, simulationNames]);
-  const [selectedSimulationName, setSelectedSimulationName] = React.useState(initialSimulationName);
-  const selectedSim = simulations[selectedSimulationName];
-  const [theme, setTheme] = React.useState(urlParams.theme ?? DEFAULT_THEME);
-  const [displayMode, _setDisplayMode] = React.useState(
-    urlParams.displayMode ?? DEFAULT_DISPLAY_MODE
-  );
-  const [locale, setLocale] = React.useState(urlParams.locale ?? "en-US");
-  const [containerHeight, setContainerHeight] = React.useState(void 0);
-  const [containerWidth, setContainerWidth] = React.useState(void 0);
-  const [containerMaxHeight, setContainerMaxHeight] = React.useState(
-    urlParams.containerMaxHeight
-  );
-  const [containerMaxWidth, setContainerMaxWidth] = React.useState(
-    urlParams.containerMaxWidth
-  );
-  const [platform, setPlatform] = React.useState(urlParams.platform ?? DEFAULT_PLATFORM);
-  const [hover, setHover] = React.useState(urlParams.deviceCapabilities?.hover ?? true);
-  const [touch, setTouch] = React.useState(urlParams.deviceCapabilities?.touch ?? false);
-  const [safeAreaInsets, setSafeAreaInsets] = React.useState(
-    urlParams.safeAreaInsets ?? { top: 0, bottom: 0, left: 0, right: 0 }
-  );
-  const [timeZone, setTimeZone] = React.useState(() => Intl.DateTimeFormat().resolvedOptions().timeZone);
-  const [measuredContentWidth, setMeasuredContentWidth] = React.useState(void 0);
-  const handleContentWidthChange = React.useCallback((width) => {
-    setMeasuredContentWidth(width);
-  }, []);
-  const setDisplayMode = (mode) => {
-    if (isMobileWidth(screenWidth) && mode === "pip") {
-      _setDisplayMode("fullscreen");
-    } else {
-      _setDisplayMode(mode);
-    }
-  };
-  const handleDisplayModeReady = React.useCallback((_mode) => {
-  }, []);
-  const containerDimensions = 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") {
-      const h = typeof window !== "undefined" ? window.innerHeight - 52 : 800;
-      const w = measuredContentWidth ?? (typeof window !== "undefined" ? window.innerWidth : 1280);
-      return { height: h, width: w };
-    }
-    if (displayMode === "pip") {
-      return {
-        height: 480,
-        ...measuredContentWidth != null ? { maxWidth: measuredContentWidth } : {}
-      };
-    }
-    if (measuredContentWidth != null) {
-      return { maxWidth: measuredContentWidth };
-    }
-    return void 0;
-  }, [
-    containerHeight,
-    containerWidth,
-    containerMaxHeight,
-    containerMaxWidth,
-    measuredContentWidth,
-    displayMode
-  ]);
-  const hostContext = 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] = React.useState(
-    () => selectedSim?.toolInput ?? {}
-  );
-  const [toolResult, setToolResult] = React.useState(
-    () => selectedSim?.toolResult
-  );
-  const [toolInputJson, setToolInputJson] = React.useState(() => JSON.stringify(toolInput, null, 2));
-  const [toolResultJson, setToolResultJson] = React.useState(
-    () => JSON.stringify(toolResult ?? null, null, 2)
-  );
-  const [modelContextJson, setModelContextJson] = React.useState("null");
-  const [modelContext, setModelContext] = React.useState(null);
-  const [editingField, setEditingField] = React.useState(null);
-  const [toolInputError, setToolInputError] = React.useState("");
-  const [toolResultError, setToolResultError] = React.useState("");
-  const [modelContextError, setModelContextError] = React.useState("");
-  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]);
-  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 = 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;
-  const permissions = resourceMeta?.permissions;
-  const prefersBorder = resourceMeta?.prefersBorder ?? false;
-  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,
-    prefersBorder,
-    urlProdTools: urlParams.prodTools,
-    urlProdResources: urlParams.prodResources
-  };
-}
-const ThemeProviderContext = React__namespace.createContext(void 0);
-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__namespace.useState(defaultTheme);
-  const theme = controlledTheme ?? internalTheme;
-  const applier = applyTheme ?? defaultApplyTheme;
-  React__namespace.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__ */ jsxRuntime.jsx(ThemeProviderContext.Provider, { ...props, value, children });
-}
-const useThemeContext = () => {
-  const context = React__namespace.useContext(ThemeProviderContext);
-  if (context === void 0) throw new Error("useThemeContext must be used within a ThemeProvider");
-  return context;
-};
-const DEFAULT_SIDEBAR_WIDTH = 224;
-function ChevronRightIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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__namespace.useState(false);
-  const [sidebarWidth, setSidebarWidth] = React__namespace.useState(DEFAULT_SIDEBAR_WIDTH);
-  const [isResizing, setIsResizing] = React__namespace.useState(false);
-  const handleMouseDown = React__namespace.useCallback((e) => {
-    e.preventDefault();
-    setIsResizing(true);
-  }, []);
-  React__namespace.useEffect(() => {
-    if (!isResizing) return;
-    const handleMouseMove = (e) => {
-      const maxWidth = Math.floor(window.innerWidth / 3);
-      const newWidth = Math.min(maxWidth, Math.max(DEFAULT_SIDEBAR_WIDTH, e.clientX));
-      setSidebarWidth(newWidth);
-    };
-    const handleMouseUp = () => {
-      setIsResizing(false);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isResizing]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sunpeak-simulator-root flex h-screen w-full overflow-hidden relative", children: [
-    isResizing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 cursor-col-resize" }),
-    isDrawerOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between sticky top-0 bg-sidebar z-10 py-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: "text-xs font-semibold",
-                  style: { color: "var(--color-text-primary)" },
-                  children: "Controls"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                headerRight,
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                      "svg",
-                      {
-                        width: "16",
-                        height: "16",
-                        viewBox: "0 0 16 16",
-                        fill: "none",
-                        xmlns: "http://www.w3.org/2000/svg",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            d: "M12 4L4 12M4 4L12 12",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinecap: "round"
-                          }
-                        )
-                      }
-                    )
-                  }
-                )
-              ] })
-            ] }),
-            controls
-          ] }) }) }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-auto relative", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ChevronRightIcon, {})
-        }
-      ),
-      children
-    ] })
-  ] });
-}
-const DOCS_BASE_URL = "https://sunpeak.ai/docs";
-function HelpIcon({ tooltip, docsPath }) {
-  const [pos, setPos] = React__namespace.useState(null);
-  const ref = React__namespace.useRef(null);
-  const showTooltip = () => {
-    const rect = ref.current?.getBoundingClientRect();
-    if (rect) {
-      setPos({ top: rect.top + rect.height / 2, left: rect.right + 6 });
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            width: "12",
-            height: "12",
-            viewBox: "0 0 12 12",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "5.25", stroke: "currentColor", strokeWidth: "1" }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(HelpIcon, { tooltip, docsPath })
-        ]
-      }
-    ),
-    children
-  ] });
-}
-function SidebarCollapsibleControl({
-  label,
-  children,
-  defaultCollapsed = true,
-  tooltip,
-  docsPath
-}) {
-  const [isCollapsed, setIsCollapsed] = React__namespace.useState(defaultCollapsed);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-            label,
-            tooltip && docsPath && /* @__PURE__ */ jsxRuntime.jsx(HelpIcon, { tooltip, docsPath })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: isCollapsed ? "▶" : "▼" })
-        ]
-      }
-    ),
-    !isCollapsed && children
-  ] });
-}
-const formElementStyle = {
-  color: "var(--color-text-primary)",
-  backgroundColor: "var(--color-background-primary)",
-  cursor: "pointer"
-};
-function SidebarSelect({ value, onChange, options, placeholder }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
-        options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
-      ]
-    }
-  );
-}
-function SidebarInput({
-  value,
-  onChange,
-  applyOnBlur = false,
-  placeholder,
-  type = "text",
-  disabled = false
-}) {
-  const [draft, setDraft] = React.useState(value);
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [prevValue, setPrevValue] = React.useState(value);
-  if (!isEditing && value !== prevValue) {
-    setPrevValue(value);
-    setDraft(value);
-  }
-  if (applyOnBlur) {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        id,
-        type: "checkbox",
-        checked,
-        onChange: (e) => onChange(e.target.checked),
-        className: "outline-none cursor-pointer"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(HelpIcon, { tooltip, docsPath })
-        ]
-      }
-    )
-  ] });
-}
-function SidebarTextarea({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  placeholder,
-  maxRows = 8,
-  error
-}) {
-  const contentRows = value?.split("\n").length ?? 1;
-  const rows = Math.min(contentRows, maxRows);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        onFocus,
-        onBlur,
-        placeholder,
-        rows,
-        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__ */ jsxRuntime.jsx("div", { className: "text-[9px]", style: { color: "var(--color-text-danger, #dc2626)" }, children: error })
-  ] });
-}
-function SidebarToggle({ value, onChange, options }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
-        );
-      })
-    }
-  );
-}
-function resolveServerToolResult(mock, args) {
-  if (!Array.isArray(mock)) return mock;
-  for (const entry of mock) {
-    const matches = Object.entries(entry.when).every(
-      ([key, value]) => args != null && args[key] === value
-    );
-    if (matches) return entry.result;
-  }
-  return void 0;
-}
-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__namespace.useState(state.urlProdTools ?? defaultProdTools);
-  const [prodResources, setProdResources] = React__namespace.useState(
-    state.urlProdResources ?? defaultProdResources
-  );
-  const [isRunning, setIsRunning] = React__namespace.useState(false);
-  const [hasRun, setHasRun] = React__namespace.useState(false);
-  const [showCheck, setShowCheck] = React__namespace.useState(false);
-  const checkTimerRef = React__namespace.useRef(void 0);
-  React__namespace.useEffect(() => {
-    if (prodTools) {
-      setHasRun(false);
-    } else {
-      const simResult = state.selectedSim?.toolResult ?? void 0;
-      state.setToolResult(simResult);
-    }
-  }, [prodTools, state.selectedSimulationName]);
-  React__namespace.useEffect(() => () => clearTimeout(checkTimerRef.current), []);
-  const toolOptions = React__namespace.useMemo(() => {
-    if (!prodTools) return [];
-    const seen = /* @__PURE__ */ new Map();
-    for (const simName of state.simulationNames) {
-      const sim = simulations[simName];
-      const toolName = sim.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__namespace.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__namespace.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__namespace.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__namespace.useRef([]);
-  React__namespace.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__namespace.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__namespace.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__namespace.useState(false);
-  const [prodResourcesGeneration, setProdResourcesGeneration] = React__namespace.useState(0);
-  const prodResourcesWasReady = React__namespace.useRef(false);
-  React__namespace.useEffect(() => {
-    if (!prodResourcesPath) {
-      setProdResourcesReady(false);
-      prodResourcesWasReady.current = false;
-      return;
-    }
-    let cancelled = false;
-    let timer;
-    const check = async () => {
-      let ok = false;
-      try {
-        const res = await fetch(prodResourcesPath, { method: "HEAD" });
-        ok = res.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__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "h-full w-full flex items-center justify-center",
-        style: { background: iframeBg },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", style: { color: "var(--color-text-secondary)" }, children: [
-          "Press ",
-          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Run" }),
-          " to call the tool"
-        ] })
-      }
-    );
-  } else if (prodResourcesLoading) {
-    content = /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "h-full w-full flex items-center justify-center",
-        style: { background: iframeBg },
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--color-text-secondary)" }, children: "Building…" })
-      }
-    );
-  } else if (effectiveResourceUrl) {
-    content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full", style: { background: iframeBg }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-full w-full", style: { background: iframeBg }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ThemeProvider, { theme: state.theme, applyTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
-    SimpleSidebar,
-    {
-      controls: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        !hideSimulatorModes && onCallTool && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-          registeredHosts.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarControl,
-            {
-              label: "Host",
-              tooltip: "Host runtime to simulate",
-              docsPath: "api-reference/functions/host-detection",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                SidebarSelect,
-                {
-                  value: state.activeHost,
-                  onChange: (value) => state.setActiveHost(value),
-                  options: registeredHosts.map((h) => ({
-                    value: h.id,
-                    label: h.label
-                  }))
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarControl,
-            {
-              label: "Width",
-              tooltip: "Chat width",
-              docsPath: "api-reference/simulations/simulator",
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          SidebarControl,
-          {
-            label: "Tool",
-            tooltip: "Tool to call with prod handler",
-            docsPath: "api-reference/cli/dev",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              SidebarSelect,
-              {
-                value: state.selectedSimulationName,
-                onChange: (value) => state.setSelectedSimulationName(value),
-                options: toolOptions
-              }
-            )
-          }
-        ),
-        !prodTools && state.simulationNames.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarControl,
-          {
-            label: "Simulation",
-            tooltip: "Test fixture to render",
-            docsPath: "api-reference/simulations/simulation",
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          SidebarCollapsibleControl,
-          {
-            label: "Host Context",
-            defaultCollapsed: false,
-            tooltip: "Host-provided environment",
-            docsPath: "api-reference/hooks/use-host-context",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[2fr_1fr] gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SidebarControl,
-                  {
-                    label: "Theme",
-                    tooltip: "Host color theme",
-                    docsPath: "api-reference/hooks/use-theme",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SidebarToggle,
-                      {
-                        value: state.theme,
-                        onChange: (value) => state.setTheme(value),
-                        options: [
-                          { value: "light", label: "Light" },
-                          { value: "dark", label: "Dark" }
-                        ]
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SidebarControl,
-                  {
-                    label: "Locale",
-                    tooltip: "BCP 47 language tag",
-                    docsPath: "api-reference/hooks/use-locale",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SidebarInput,
-                      {
-                        applyOnBlur: true,
-                        value: state.locale,
-                        onChange: (value) => state.setLocale(value),
-                        placeholder: "en-US"
-                      }
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SidebarControl,
-                {
-                  label: "Display Mode",
-                  tooltip: "Host resource rendering paradigm",
-                  docsPath: "api-reference/hooks/use-display-mode",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    SidebarToggle,
-                    {
-                      value: state.displayMode,
-                      onChange: (value) => state.setDisplayMode(value),
-                      options: [
-                        { value: "inline", label: "Inline" },
-                        { value: "pip", label: "PiP" },
-                        { value: "fullscreen", label: "Full" }
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  SidebarControl,
-                  {
-                    label: "Platform",
-                    tooltip: "End user device platform",
-                    docsPath: "api-reference/hooks/use-platform",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SidebarSelect,
-                      {
-                        value: state.platform,
-                        onChange: (value) => {
-                          const p2 = value;
-                          state.setPlatform(p2);
-                          if (p2 === "mobile") {
-                            state.setHover(false);
-                            state.setTouch(true);
-                          } else if (p2 === "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__ */ jsxRuntime.jsx("div", { className: "col-span-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  SidebarControl,
-                  {
-                    label: "Capabilities",
-                    tooltip: "End user device capabilities",
-                    docsPath: "api-reference/hooks/use-device-capabilities",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        SidebarCheckbox,
-                        {
-                          checked: state.hover,
-                          onChange: state.setHover,
-                          label: "Hover"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        SidebarCheckbox,
-                        {
-                          checked: state.touch,
-                          onChange: state.setTouch,
-                          label: "Touch"
-                        }
-                      )
-                    ] })
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SidebarControl,
-                {
-                  label: "Time Zone",
-                  tooltip: "End user IANA time zone",
-                  docsPath: "api-reference/hooks/use-time-zone",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    SidebarInput,
-                    {
-                      applyOnBlur: true,
-                      value: state.timeZone,
-                      onChange: (value) => state.setTimeZone(value),
-                      placeholder: "e.g. America/New_York"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SidebarControl,
-                {
-                  label: "Container Dimensions",
-                  tooltip: "Host-enforced size constraints (px)",
-                  docsPath: "api-reference/hooks/use-viewport",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Height", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SidebarInput,
-                      {
-                        type: "number",
-                        applyOnBlur: true,
-                        placeholder: "-",
-                        value: state.containerHeight != null ? String(state.containerHeight) : "",
-                        onChange: (value) => state.setContainerHeight(value ? Number(value) : void 0)
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Width", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SidebarInput,
-                      {
-                        type: "number",
-                        applyOnBlur: true,
-                        placeholder: "-",
-                        value: state.containerWidth != null ? String(state.containerWidth) : "",
-                        onChange: (value) => state.setContainerWidth(value ? Number(value) : void 0)
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max H", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SidebarInput,
-                      {
-                        type: "number",
-                        applyOnBlur: true,
-                        placeholder: "-",
-                        value: state.containerMaxHeight != null ? String(state.containerMaxHeight) : "",
-                        onChange: (value) => state.setContainerMaxHeight(value ? Number(value) : void 0)
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max W", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                SidebarControl,
-                {
-                  label: "Safe Area Insets",
-                  tooltip: "Device safe area padding (px)",
-                  docsPath: "api-reference/hooks/use-safe-area",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "text-[10px]",
-                          style: { color: "var(--color-text-secondary)" },
-                          children: "↑"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "text-[10px]",
-                          style: { color: "var(--color-text-secondary)" },
-                          children: "↓"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "text-[10px]",
-                          style: { color: "var(--color-text-secondary)" },
-                          children: "←"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "text-[10px]",
-                          style: { color: "var(--color-text-secondary)" },
-                          children: "→"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          SidebarCollapsibleControl,
-          {
-            label: "App Context",
-            defaultCollapsed: true,
-            tooltip: "App-provided context shared with the model",
-            docsPath: "api-reference/hooks/use-app-state",
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          SidebarCollapsibleControl,
-          {
-            label: "Tool Input (JSON)",
-            defaultCollapsed: !prodTools,
-            tooltip: "Arguments passed to the tool",
-            docsPath: "api-reference/hooks/use-tool-data",
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          SidebarCollapsibleControl,
-          {
-            label: "Tool Result (JSON)",
-            defaultCollapsed: false,
-            tooltip: "Structured content returned by the tool",
-            docsPath: "api-reference/hooks/use-tool-data",
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    width: "12",
-                    height: "12",
-                    viewBox: "0 0 12 12",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 6L5 9L10 3" })
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "12", viewBox: "0 0 10 12", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0L10 6L0 12V0Z" }) }),
-                "Run"
-              ]
-            }
-          ) : void 0,
-          children: content
-        }
-      ) : content
-    }
-  ) });
-}
-exports.DEFAULT_STYLE_VARIABLES = DEFAULT_STYLE_VARIABLES;
-exports.IframeResource = IframeResource;
-exports.McpAppHost = McpAppHost;
-exports.SCREEN_WIDTHS = SCREEN_WIDTHS;
-exports.SidebarCheckbox = SidebarCheckbox;
-exports.SidebarCollapsibleControl = SidebarCollapsibleControl;
-exports.SidebarControl = SidebarControl;
-exports.SidebarInput = SidebarInput;
-exports.SidebarSelect = SidebarSelect;
-exports.SidebarTextarea = SidebarTextarea;
-exports.SidebarToggle = SidebarToggle;
-exports.SimpleSidebar = SimpleSidebar;
-exports.Simulator = Simulator;
-exports.ThemeProvider = ThemeProvider;
-exports.extractResourceCSP = extractResourceCSP;
-exports.getHostShell = getHostShell;
-exports.getRegisteredHosts = getRegisteredHosts;
-exports.registerHostShell = registerHostShell;
-exports.resolveServerToolResult = resolveServerToolResult;
-exports.useSimulatorState = useSimulatorState;
-exports.useThemeContext = useThemeContext;
-//# sourceMappingURL=simulator-Gc6n_fT4.cjs.map