sunpeak 0.14.3 → 0.15.1

package/dist/simulator-url-BQ-7SMht.js

@@ -0,0 +1,335 @@
+import { a as SCREEN_WIDTHS, r as registerHostShell, D as DEFAULT_STYLE_VARIABLES } from "./simulator-CMgCGNuD.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ 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?",
+  isTransitioning = false
+}) {
+  const isDesktop = platform === "desktop";
+  const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
+  const isFullscreen = displayMode === "fullscreen";
+  const isPip = displayMode === "pip";
+  const handleClose = () => onRequestDisplayMode?.("inline");
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ 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__ */ jsx(CloseIcon, {})
+                      }
+                    ) }),
+                    isDesktop && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-base", children: appName }),
+                    isDesktop && /* @__PURE__ */ jsx("div", {})
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsx(
+                "footer",
+                {
+                  className: "pointer-events-auto",
+                  style: {
+                    backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
+                  },
+                  children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      name: "userInput",
+                      disabled: true,
+                      placeholder: "Message sunpeak.ai",
+                      className: "w-full rounded-3xl px-5 py-3 pr-12 shadow-md",
+                      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__ */ jsx(
+          "header",
+          {
+            className: "h-12 flex items-center 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__ */ jsx("span", { children: "sunpeak.ai" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
+            style: { maxWidth: containerWidth },
+            children: [
+              /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
+                !isFullscreen && /* @__PURE__ */ jsxs("article", { className: "w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
+                  /* @__PURE__ */ jsx("h5", { className: "sr-only", children: "You said:" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-base my-auto mx-auto md:pt-8 px-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden items-end", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "whitespace-pre-wrap", children: userMessage })
+                        }
+                      ) })
+                    }
+                  ) }) }) })
+                ] }),
+                /* @__PURE__ */ jsxs("article", { className: "w-full focus:outline-none", dir: "auto", "data-turn": "assistant", children: [
+                  /* @__PURE__ */ jsxs("h6", { className: "sr-only", children: [
+                    appName,
+                    " said:"
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "text-base my-auto mx-auto pb-10 px-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-full flex-col grow", children: [
+                    !isFullscreen && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 my-3", children: [
+                      appIcon ? /* @__PURE__ */ jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-6 rounded-full flex items-center justify-center font-medium text-xs text-white",
+                          style: { backgroundColor: "#10a37f" },
+                          children: "AI"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: appName })
+                    ] }),
+                    /* @__PURE__ */ 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__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            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__ */ 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__ */ jsx(CloseIcon, { className: "h-4 w-4" })
+                                },
+                                "pip-close"
+                              ),
+                              /* @__PURE__ */ 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__ */ 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" },
+                                        opacity: isTransitioning ? 0 : 1,
+                                        transition: isTransitioning ? "none" : "opacity 100ms"
+                                      },
+                                      children
+                                    }
+                                  )
+                                },
+                                "content"
+                              )
+                            ]
+                          }
+                        ) })
+                      }
+                    )
+                  ] }) }) })
+                ] })
+              ] }),
+              !isFullscreen && /* @__PURE__ */ jsx(
+                "footer",
+                {
+                  style: {
+                    backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
+                  },
+                  children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      name: "userInput",
+                      disabled: true,
+                      placeholder: "Message sunpeak.ai",
+                      className: "w-full rounded-3xl px-5 py-3 pr-12 shadow-md",
+                      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: "1.0.0"
+};
+const CHATGPT_HOST_CAPABILITIES = {
+  openLinks: {},
+  serverTools: {},
+  logging: {},
+  updateModelContext: { text: {} },
+  message: { text: {} }
+};
+function applyChatGPTTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  document.documentElement.style.colorScheme = theme;
+}
+const CHATGPT_STYLE_VARIABLES = {
+  ...DEFAULT_STYLE_VARIABLES,
+  // Background colors — ChatGPT's standard palette
+  "--color-background-primary": "light-dark(#ffffff, #212121)",
+  "--color-background-secondary": "light-dark(#f7f7f8, #2f2f2f)",
+  "--color-background-tertiary": "light-dark(#ececf1, #444654)",
+  "--color-background-inverse": "light-dark(#212121, #ffffff)",
+  // Text colors
+  "--color-text-primary": "light-dark(#0d0d0d, #ececec)",
+  "--color-text-secondary": "light-dark(#6e6e80, #acacbe)",
+  "--color-text-tertiary": "light-dark(#acacbe, #6e6e80)",
+  "--color-text-inverse": "light-dark(#ececec, #0d0d0d)",
+  // Border colors
+  "--color-border-primary": "light-dark(#e5e5e5, #4e4e4e)",
+  "--color-border-secondary": "light-dark(#d9d9e3, #565869)",
+  "--color-border-tertiary": "light-dark(#f0f0f0, #3a3a3a)"
+};
+registerHostShell({
+  id: "chatgpt",
+  label: "ChatGPT",
+  Conversation,
+  applyTheme: applyChatGPTTheme,
+  hostInfo: CHATGPT_HOST_INFO,
+  hostCapabilities: CHATGPT_HOST_CAPABILITIES,
+  styleVariables: CHATGPT_STYLE_VARIABLES,
+  pageStyles: {
+    "--sim-bg-sidebar": "light-dark(#f9f9f9, #181818)",
+    "--sim-bg-conversation": "light-dark(#ffffff, #212121)",
+    "--sim-bg-user-bubble": "light-dark(#f4f4f4, #303030)",
+    "--sim-bg-reply-input": "light-dark(#ffffff, #303030)"
+  }
+});
+function createSimulatorUrl(params, basePath = "/") {
+  const searchParams = new URLSearchParams();
+  if (params.simulation !== void 0) {
+    searchParams.set("simulation", params.simulation);
+  }
+  if (params.host !== void 0) {
+    searchParams.set("host", params.host);
+  }
+  if (params.theme !== void 0) {
+    searchParams.set("theme", params.theme);
+  }
+  if (params.displayMode !== void 0) {
+    searchParams.set("displayMode", params.displayMode);
+  }
+  if (params.locale !== void 0) {
+    searchParams.set("locale", params.locale);
+  }
+  if (params.maxHeight !== void 0) {
+    searchParams.set("maxHeight", String(params.maxHeight));
+  }
+  if (params.deviceType !== void 0) {
+    searchParams.set("deviceType", params.deviceType);
+  }
+  if (params.hover !== void 0) {
+    searchParams.set("hover", String(params.hover));
+  }
+  if (params.touch !== void 0) {
+    searchParams.set("touch", String(params.touch));
+  }
+  if (params.safeAreaTop !== void 0) {
+    searchParams.set("safeAreaTop", String(params.safeAreaTop));
+  }
+  if (params.safeAreaBottom !== void 0) {
+    searchParams.set("safeAreaBottom", String(params.safeAreaBottom));
+  }
+  if (params.safeAreaLeft !== void 0) {
+    searchParams.set("safeAreaLeft", String(params.safeAreaLeft));
+  }
+  if (params.safeAreaRight !== void 0) {
+    searchParams.set("safeAreaRight", String(params.safeAreaRight));
+  }
+  const queryString = searchParams.toString();
+  return queryString ? `${basePath}?${queryString}` : basePath;
+}
+export {
+  Conversation as C,
+  createSimulatorUrl as c
+};
+//# sourceMappingURL=simulator-url-BQ-7SMht.js.map

package/dist/simulator-url-BQ-7SMht.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simulator-url-BQ-7SMht.js","sources":["../src/chatgpt/chatgpt-conversation.tsx","../src/chatgpt/chatgpt-host.ts","../src/simulator/simulator-url.ts"],"sourcesContent":["import * as React from 'react';\nimport { SCREEN_WIDTHS, type ScreenWidth } from '../simulator/simulator-types';\nimport type { McpUiDisplayMode, McpUiHostContext } from '@modelcontextprotocol/ext-apps';\n\ntype Platform = NonNullable<McpUiHostContext['platform']>;\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className={className}>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        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\"\n      />\n    </svg>\n  );\n}\n\ninterface ConversationProps {\n  children?: React.ReactNode;\n  screenWidth: ScreenWidth;\n  displayMode: McpUiDisplayMode;\n  platform: Platform;\n  onRequestDisplayMode?: (mode: McpUiDisplayMode) => void;\n  appName?: string;\n  appIcon?: string;\n  userMessage?: string;\n  /**\n   * Whether the content is transitioning between display modes.\n   * When true, the content area is hidden (opacity 0) to prevent the pip\n   * border from flashing at a stale height before the iframe resizes.\n   */\n  isTransitioning?: boolean;\n}\n\n/**\n * Conversation layout that renders children (iframe) at a stable tree position.\n *\n * All three display modes (inline, pip, fullscreen) share the same React tree\n * shape so that the iframe never unmounts when switching modes, avoiding a\n * white-flash reload.\n *\n * Visual differences are achieved purely with CSS:\n * - **inline**: content in normal document flow\n * - **pip**: content wrapper becomes `position: fixed` floating overlay\n * - **fullscreen**: content wrapper becomes `position: fixed` covering the viewport;\n *   fullscreen chrome (header/footer) rendered as a separate fixed overlay\n */\nexport function Conversation({\n  children,\n  screenWidth,\n  displayMode,\n  platform,\n  onRequestDisplayMode,\n  appName = 'Sunpeak',\n  appIcon,\n  userMessage = 'What have you got for me today?',\n  isTransitioning = false,\n}: ConversationProps) {\n  const isDesktop = platform === 'desktop';\n  const containerWidth = screenWidth === 'full' ? '100%' : `${SCREEN_WIDTHS[screenWidth]}px`;\n  const isFullscreen = displayMode === 'fullscreen';\n  const isPip = displayMode === 'pip';\n\n  const handleClose = () => onRequestDisplayMode?.('inline');\n\n  return (\n    <div\n      className=\"flex flex-col w-full h-full flex-1 items-center relative\"\n      style={{\n        transform: 'translate(0)',\n        backgroundColor: 'var(--sim-bg-conversation, var(--color-background-primary))',\n        color: 'var(--color-text-primary)',\n      }}\n    >\n      {/* ─── Fullscreen chrome overlay ─── */}\n      {isFullscreen && (\n        <div\n          className=\"fixed start-0 end-0 top-0 bottom-0 z-[51] mx-auto flex flex-col pointer-events-none\"\n          style={{ maxWidth: containerWidth }}\n        >\n          <div\n            className=\"z-10 grid h-[3.25rem] grid-cols-[1fr_auto_1fr] border-b px-2 pointer-events-auto\"\n            style={{\n              borderColor: 'var(--color-border-primary)',\n              backgroundColor: 'var(--sim-bg-conversation, var(--color-background-primary))',\n            }}\n          >\n            <div className=\"flex items-center justify-start gap-3\">\n              <button\n                onClick={handleClose}\n                aria-label=\"Close\"\n                className=\"h-7 w-7 flex items-center justify-center rounded-md transition-colors hover:opacity-70\"\n                type=\"button\"\n              >\n                <CloseIcon />\n              </button>\n            </div>\n            {isDesktop && (\n              <div className=\"flex items-center justify-center text-base\">{appName}</div>\n            )}\n            {isDesktop && <div />}\n          </div>\n          {/* Spacer - pointer events pass through to content below */}\n          <div className=\"flex-1\" />\n          <footer\n            className=\"pointer-events-auto\"\n            style={{\n              backgroundColor: 'var(--sim-bg-conversation, var(--color-background-primary))',\n            }}\n          >\n            <div className=\"max-w-[48rem] mx-auto px-4 py-4\">\n              <div className=\"relative\">\n                <input\n                  type=\"text\"\n                  name=\"userInput\"\n                  disabled\n                  placeholder=\"Message sunpeak.ai\"\n                  className=\"w-full rounded-3xl px-5 py-3 pr-12 shadow-md\"\n                  style={{\n                    backgroundColor: 'var(--sim-bg-reply-input, var(--color-background-secondary))',\n                    color: 'var(--color-text-primary)',\n                    border: '1px solid var(--color-border-tertiary)',\n                  }}\n                />\n              </div>\n            </div>\n          </footer>\n        </div>\n      )}\n\n      {/* ─── Conversation header ─── */}\n      {!isFullscreen && (\n        <header\n          className=\"h-12 flex items-center px-4 text-lg sticky top-0 z-40 w-full\"\n          style={{\n            maxWidth: containerWidth,\n            backgroundColor: 'var(--sim-bg-conversation, var(--color-background-primary))',\n          }}\n        >\n          <span>sunpeak.ai</span>\n        </header>\n      )}\n\n      {/* ─── Conversation container ─── */}\n      <div\n        className=\"flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden\"\n        style={{ maxWidth: containerWidth }}\n      >\n        <main className=\"flex-1 overflow-y-auto overflow-x-hidden\">\n          {/* User turn - hidden in fullscreen */}\n          {!isFullscreen && (\n            <article className=\"w-full focus:outline-none\" dir=\"auto\" data-turn=\"user\">\n              <h5 className=\"sr-only\">You said:</h5>\n              <div className=\"text-base my-auto mx-auto md:pt-8 px-4\">\n                <div className=\"max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col\">\n                  <div className=\"flex max-w-full flex-col grow\">\n                    <div\n                      data-message-author-role=\"user\"\n                      className=\"min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal\"\n                    >\n                      <div className=\"flex w-full flex-col gap-1 empty:hidden items-end\">\n                        <div\n                          className=\"relative rounded-[18px] px-4 py-3 max-w-[70%]\"\n                          style={{\n                            backgroundColor:\n                              'var(--sim-bg-user-bubble, var(--color-background-tertiary))',\n                          }}\n                        >\n                          <div className=\"whitespace-pre-wrap\">{userMessage}</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </article>\n          )}\n\n          {/* Assistant turn */}\n          <article className=\"w-full focus:outline-none\" dir=\"auto\" data-turn=\"assistant\">\n            <h6 className=\"sr-only\">{appName} said:</h6>\n            <div className=\"text-base my-auto mx-auto pb-10 px-4\">\n              <div className=\"max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col\">\n                <div className=\"flex max-w-full flex-col grow\">\n                  {/* Assistant avatar and name - hidden in fullscreen */}\n                  {!isFullscreen && (\n                    <div className=\"flex items-center gap-2 my-3\">\n                      {appIcon ? (\n                        <div className=\"size-6 flex items-center justify-center text-base\">\n                          {appIcon}\n                        </div>\n                      ) : (\n                        <div\n                          className=\"size-6 rounded-full flex items-center justify-center font-medium text-xs text-white\"\n                          style={{ backgroundColor: '#10a37f' }}\n                        >\n                          AI\n                        </div>\n                      )}\n                      <span className=\"font-semibold text-sm\">{appName}</span>\n                    </div>\n                  )}\n\n                  {/* Assistant message content */}\n                  <div\n                    data-message-author-role=\"assistant\"\n                    className=\"min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal\"\n                  >\n                    <div className=\"flex w-full flex-col gap-1 empty:hidden\">\n                      {/*\n                       * ─── CONTENT AREA ───\n                       * Children (iframe) are always at this tree position.\n                       * CSS handles visual positioning for each display mode:\n                       *   inline:     normal flow (position: relative)\n                       *   pip:        floating overlay (position: fixed)\n                       *   fullscreen: viewport takeover (position: fixed)\n                       */}\n                      <div\n                        className={\n                          isPip\n                            ? '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'\n                            : isFullscreen\n                              ? 'no-scrollbar fixed inset-x-0 top-[3.25rem] bottom-0 z-50 mx-auto'\n                              : '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'\n                        }\n                        style={{\n                          ...(isPip ? { maxHeight: '480px' } : {}),\n                          ...(isFullscreen ? { maxWidth: containerWidth } : {}),\n                        }}\n                      >\n                        {/* PiP close button - keyed so it doesn't shift content's position */}\n                        {isPip && (\n                          <button\n                            key=\"pip-close\"\n                            onClick={handleClose}\n                            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]\"\n                            aria-label=\"Close picture-in-picture\"\n                            type=\"button\"\n                          >\n                            <CloseIcon className=\"h-4 w-4\" />\n                          </button>\n                        )}\n                        <div\n                          key=\"content\"\n                          className={\n                            isPip\n                              ? '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'\n                              : 'relative overflow-hidden h-full'\n                          }\n                        >\n                          <div\n                            className=\"h-full w-full max-w-full\"\n                            style={{\n                              ...(isPip\n                                ? {\n                                    overflow: 'auto',\n                                    backgroundColor: 'var(--color-background-primary)',\n                                  }\n                                : isFullscreen\n                                  ? {\n                                      overflow: 'auto',\n                                      backgroundColor: 'var(--color-background-primary)',\n                                    }\n                                  : { backgroundColor: 'transparent' }),\n                              opacity: isTransitioning ? 0 : 1,\n                              transition: isTransitioning ? 'none' : 'opacity 100ms',\n                            }}\n                          >\n                            {children}\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </article>\n        </main>\n\n        {/* Input area - hidden in fullscreen since fullscreen chrome has its own footer */}\n        {!isFullscreen && (\n          <footer\n            style={{\n              backgroundColor: 'var(--sim-bg-conversation, var(--color-background-primary))',\n            }}\n          >\n            <div className=\"max-w-[48rem] mx-auto px-4 py-4\">\n              <div className=\"relative\">\n                <input\n                  type=\"text\"\n                  name=\"userInput\"\n                  disabled\n                  placeholder=\"Message sunpeak.ai\"\n                  className=\"w-full rounded-3xl px-5 py-3 pr-12 shadow-md\"\n                  style={{\n                    backgroundColor: 'var(--sim-bg-reply-input, var(--color-background-secondary))',\n                    color: 'var(--color-text-primary)',\n                    border: '1px solid var(--color-border-tertiary)',\n                  }}\n                />\n              </div>\n            </div>\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n}\n","import type { McpUiHostCapabilities } from '@modelcontextprotocol/ext-apps';\nimport { registerHostShell } from '../simulator/hosts';\nimport { DEFAULT_STYLE_VARIABLES } from '../simulator/host-styles';\nimport { Conversation } from './chatgpt-conversation';\n\nconst CHATGPT_HOST_INFO = {\n  name: 'ChatGPT',\n  version: '1.0.0',\n};\n\nconst CHATGPT_HOST_CAPABILITIES: McpUiHostCapabilities = {\n  openLinks: {},\n  serverTools: {},\n  logging: {},\n  updateModelContext: { text: {} },\n  message: { text: {} },\n};\n\n/**\n * Apply ChatGPT-style theming to the document.\n * Sets data-theme attribute and color-scheme for light-dark() CSS support.\n */\nfunction applyChatGPTTheme(theme: 'light' | 'dark'): void {\n  document.documentElement.setAttribute('data-theme', theme);\n  document.documentElement.style.colorScheme = theme;\n}\n\n/**\n * ChatGPT-specific style variable overrides.\n * Inherits defaults, overriding colors to match ChatGPT's palette.\n */\nconst CHATGPT_STYLE_VARIABLES = {\n  ...DEFAULT_STYLE_VARIABLES,\n  // Background colors — ChatGPT's standard palette\n  '--color-background-primary': 'light-dark(#ffffff, #212121)',\n  '--color-background-secondary': 'light-dark(#f7f7f8, #2f2f2f)',\n  '--color-background-tertiary': 'light-dark(#ececf1, #444654)',\n  '--color-background-inverse': 'light-dark(#212121, #ffffff)',\n  // Text colors\n  '--color-text-primary': 'light-dark(#0d0d0d, #ececec)',\n  '--color-text-secondary': 'light-dark(#6e6e80, #acacbe)',\n  '--color-text-tertiary': 'light-dark(#acacbe, #6e6e80)',\n  '--color-text-inverse': 'light-dark(#ececec, #0d0d0d)',\n  // Border colors\n  '--color-border-primary': 'light-dark(#e5e5e5, #4e4e4e)',\n  '--color-border-secondary': 'light-dark(#d9d9e3, #565869)',\n  '--color-border-tertiary': 'light-dark(#f0f0f0, #3a3a3a)',\n};\n\nregisterHostShell({\n  id: 'chatgpt',\n  label: 'ChatGPT',\n  Conversation,\n  applyTheme: applyChatGPTTheme,\n  hostInfo: CHATGPT_HOST_INFO,\n  hostCapabilities: CHATGPT_HOST_CAPABILITIES,\n  styleVariables: CHATGPT_STYLE_VARIABLES,\n  pageStyles: {\n    '--sim-bg-sidebar': 'light-dark(#f9f9f9, #181818)',\n    '--sim-bg-conversation': 'light-dark(#ffffff, #212121)',\n    '--sim-bg-user-bubble': 'light-dark(#f4f4f4, #303030)',\n    '--sim-bg-reply-input': 'light-dark(#ffffff, #303030)',\n  },\n});\n","import type { Theme, DisplayMode, DeviceType } from '../types/runtime';\n\n/**\n * Strongly-typed URL parameters for the Simulator.\n *\n * Use with `createSimulatorUrl()` to generate type-safe URL paths for e2e tests.\n *\n * @example\n * ```ts\n * import { createSimulatorUrl } from 'sunpeak/chatgpt';\n *\n * // In e2e tests:\n * await page.goto(createSimulatorUrl({\n *   simulation: 'albums-show',\n *   theme: 'dark',\n *   displayMode: 'fullscreen',\n *   host: 'claude',\n * }));\n * ```\n */\nexport interface SimulatorUrlParams {\n  /**\n   * The simulation name to load (e.g., 'albums-show', 'review-diff').\n   * Corresponds to the simulation JSON filename without the '-simulation.json' suffix.\n   */\n  simulation?: string;\n\n  /**\n   * The host shell to use (e.g., 'chatgpt', 'claude').\n   * Switches conversation chrome, theming, and reported host info/capabilities.\n   * @default 'chatgpt'\n   */\n  host?: string;\n\n  /**\n   * The color theme for the simulator.\n   * @default 'dark'\n   */\n  theme?: Theme;\n\n  /**\n   * The display mode for the widget.\n   * - 'inline': Embedded in the conversation\n   * - 'pip': Picture-in-picture mode with max height\n   * - 'fullscreen': Full screen overlay\n   * @default 'inline'\n   */\n  displayMode?: DisplayMode;\n\n  /**\n   * The locale for the simulator (e.g., 'en-US', 'ja-JP').\n   * @default 'en-US'\n   */\n  locale?: string;\n\n  /**\n   * Maximum height in pixels for PiP mode.\n   * Only applicable when displayMode is 'pip'.\n   */\n  maxHeight?: number;\n\n  /**\n   * The device type to simulate.\n   * Affects default hover/touch capabilities.\n   */\n  deviceType?: DeviceType;\n\n  /**\n   * Whether the device supports hover interactions.\n   * @default true for desktop, false for mobile/tablet\n   */\n  hover?: boolean;\n\n  /**\n   * Whether the device supports touch interactions.\n   * @default false for desktop, true for mobile/tablet\n   */\n  touch?: boolean;\n\n  /**\n   * Safe area inset from the top of the screen (in pixels).\n   * Used for devices with notches or status bars.\n   */\n  safeAreaTop?: number;\n\n  /**\n   * Safe area inset from the bottom of the screen (in pixels).\n   * Used for devices with home indicators.\n   */\n  safeAreaBottom?: number;\n\n  /**\n   * Safe area inset from the left of the screen (in pixels).\n   */\n  safeAreaLeft?: number;\n\n  /**\n   * Safe area inset from the right of the screen (in pixels).\n   */\n  safeAreaRight?: number;\n}\n\n/**\n * Creates a URL path with query parameters for the ChatGPT Simulator.\n *\n * @param params - The simulator parameters to encode\n * @param basePath - The base path for the URL (default: '/')\n * @returns A URL path string with encoded query parameters\n *\n * @example\n * ```ts\n * // Basic usage\n * createSimulatorUrl({ simulation: 'albums-show', theme: 'light' })\n * // Returns: '/?simulation=albums-show&theme=light'\n *\n * // With display mode\n * createSimulatorUrl({\n *   simulation: 'review-diff',\n *   theme: 'dark',\n *   displayMode: 'fullscreen',\n * })\n * // Returns: '/?simulation=review-diff&theme=dark&displayMode=fullscreen'\n *\n * // With device simulation\n * createSimulatorUrl({\n *   simulation: 'map-show',\n *   deviceType: 'mobile',\n *   touch: true,\n *   hover: false,\n * })\n * // Returns: '/?simulation=map-show&deviceType=mobile&touch=true&hover=false'\n *\n * // With safe area insets (for notch simulation)\n * createSimulatorUrl({\n *   simulation: 'carousel-show',\n *   safeAreaTop: 44,\n *   safeAreaBottom: 34,\n * })\n * // Returns: '/?simulation=carousel-show&safeAreaTop=44&safeAreaBottom=34'\n * ```\n */\nexport function createSimulatorUrl(params: SimulatorUrlParams, basePath = '/'): string {\n  const searchParams = new URLSearchParams();\n\n  // Add each defined parameter\n  if (params.simulation !== undefined) {\n    searchParams.set('simulation', params.simulation);\n  }\n  if (params.host !== undefined) {\n    searchParams.set('host', params.host);\n  }\n  if (params.theme !== undefined) {\n    searchParams.set('theme', params.theme);\n  }\n  if (params.displayMode !== undefined) {\n    searchParams.set('displayMode', params.displayMode);\n  }\n  if (params.locale !== undefined) {\n    searchParams.set('locale', params.locale);\n  }\n  if (params.maxHeight !== undefined) {\n    searchParams.set('maxHeight', String(params.maxHeight));\n  }\n  if (params.deviceType !== undefined) {\n    searchParams.set('deviceType', params.deviceType);\n  }\n  if (params.hover !== undefined) {\n    searchParams.set('hover', String(params.hover));\n  }\n  if (params.touch !== undefined) {\n    searchParams.set('touch', String(params.touch));\n  }\n  if (params.safeAreaTop !== undefined) {\n    searchParams.set('safeAreaTop', String(params.safeAreaTop));\n  }\n  if (params.safeAreaBottom !== undefined) {\n    searchParams.set('safeAreaBottom', String(params.safeAreaBottom));\n  }\n  if (params.safeAreaLeft !== undefined) {\n    searchParams.set('safeAreaLeft', String(params.safeAreaLeft));\n  }\n  if (params.safeAreaRight !== undefined) {\n    searchParams.set('safeAreaRight', String(params.safeAreaRight));\n  }\n  const queryString = searchParams.toString();\n  return queryString ? `${basePath}?${queryString}` : basePath;\n}\n"],"names":[],"mappings":"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"}