sunpeak 0.14.3 → 0.15.1

package/dist/chatgpt/index.cjs

@@ -1,15 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const chatgpt_index = require("../index-Cdeg96So.cjs");
+const simulatorUrl = require("../simulator-url-uNqOCaPJ.cjs");
+const chatgpt_index = require("../index-BSKuY-oH.cjs");
+const simulator = require("../simulator-BqZmzFVR.cjs");
 const discovery = require("../discovery-CRR3SlyI.cjs");
+exports.createSimulatorUrl = simulatorUrl.createSimulatorUrl;
 exports.ChatGPTSimulator = chatgpt_index.ChatGPTSimulator;
-exports.IframeResource = chatgpt_index.IframeResource;
-exports.McpAppHost = chatgpt_index.McpAppHost;
-exports.SCREEN_WIDTHS = chatgpt_index.SCREEN_WIDTHS;
-exports.ThemeProvider = chatgpt_index.ThemeProvider;
-exports.createSimulatorUrl = chatgpt_index.createSimulatorUrl;
-exports.extractResourceCSP = chatgpt_index.extractResourceCSP;
-exports.useThemeContext = chatgpt_index.useThemeContext;
+exports.IframeResource = simulator.IframeResource;
+exports.McpAppHost = simulator.McpAppHost;
+exports.SCREEN_WIDTHS = simulator.SCREEN_WIDTHS;
+exports.Simulator = simulator.Simulator;
+exports.ThemeProvider = simulator.ThemeProvider;
+exports.extractResourceCSP = simulator.extractResourceCSP;
+exports.useThemeContext = simulator.useThemeContext;
 exports.buildDevSimulations = discovery.buildDevSimulations;
 exports.buildResourceMap = discovery.buildResourceMap;
 exports.buildSimulations = discovery.buildSimulations;

package/dist/chatgpt/index.cjs.map

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

package/dist/chatgpt/index.d.ts

@@ -1,36 +1,14 @@
-/**
- * ChatGPT-specific exports for the Sunpeak simulator.
- *
- * These components and utilities are designed for local development and testing,
- * simulating how resources render in ChatGPT's environment.
- *
- * @example
- * ```tsx
- * import { chatgpt, isChatGPT } from 'sunpeak';
- *
- * // Use the simulator for local development
- * function App() {
- *   return <chatgpt.ChatGPTSimulator simulations={simulations} />;
- * }
- *
- * // Check platform at runtime
- * if (isChatGPT()) {
- *   // Running in ChatGPT
- * }
- * ```
- *
- * @module sunpeak/chatgpt
- */
 export { ChatGPTSimulator } from './chatgpt-simulator';
+export { Simulator } from '../simulator/simulator';
 export type { Simulation } from '../types/simulation';
-export type { ScreenWidth, SimulatorConfig } from './chatgpt-simulator-types';
-export { SCREEN_WIDTHS } from './chatgpt-simulator-types';
-export { McpAppHost } from './mcp-app-host';
-export type { McpAppHostOptions } from './mcp-app-host';
-export { IframeResource, extractResourceCSP } from './iframe-resource';
-export type { ResourceCSP } from './iframe-resource';
-export * from './theme-provider';
-export { createSimulatorUrl } from './simulator-url';
-export type { SimulatorUrlParams } from './simulator-url';
+export type { ScreenWidth, SimulatorConfig } from '../simulator/simulator-types';
+export { SCREEN_WIDTHS } from '../simulator/simulator-types';
+export { McpAppHost } from '../simulator/mcp-app-host';
+export type { McpAppHostOptions } from '../simulator/mcp-app-host';
+export { IframeResource, extractResourceCSP } from '../simulator/iframe-resource';
+export type { ResourceCSP } from '../simulator/iframe-resource';
+export * from '../simulator/theme-provider';
+export { createSimulatorUrl } from '../simulator/simulator-url';
+export type { SimulatorUrlParams } from '../simulator/simulator-url';
 export { buildDevSimulations, buildSimulations, buildResourceMap, createResourceExports, toPascalCase, extractResourceKey, extractSimulationKey, findResourceKey, getComponentName, findResourceDirs, isSimulationFile, extractSimulationName, findSimulationFiles, } from '../lib/discovery';
 export type { BuildSimulationsOptions, BuildDevSimulationsOptions, ResourceMetadata, ResourceDirInfo, FsOps, } from '../lib/discovery';

package/dist/chatgpt/index.js

@@ -1,26 +1,29 @@
-import { C, I, M, S, T, a, e, u } from "../index-CJ3jfcjj.js";
-import { a as a2, b, d, c, e as e2, f, g, h, i, j, k, l, t } from "../discovery-COZUnY6a.js";
+import { c } from "../simulator-url-BQ-7SMht.js";
+import { C } from "../index-CiqvXo8n.js";
+import { I, M, a, S, T, j, m } from "../simulator-CMgCGNuD.js";
+import { b, a as a2, c as c2, d, e, f, g, h, i, j as j2, k, l, t } from "../discovery-DzV3HLXs.js";
 export {
   C as ChatGPTSimulator,
   I as IframeResource,
   M as McpAppHost,
-  S as SCREEN_WIDTHS,
+  a as SCREEN_WIDTHS,
+  S as Simulator,
   T as ThemeProvider,
-  a2 as buildDevSimulations,
-  b as buildResourceMap,
-  d as buildSimulations,
-  c as createResourceExports,
-  a as createSimulatorUrl,
-  e as extractResourceCSP,
-  e2 as extractResourceKey,
+  b as buildDevSimulations,
+  a2 as buildResourceMap,
+  c2 as buildSimulations,
+  d as createResourceExports,
+  c as createSimulatorUrl,
+  j as extractResourceCSP,
+  e as extractResourceKey,
   f as extractSimulationKey,
   g as extractSimulationName,
   h as findResourceDirs,
   i as findResourceKey,
-  j as findSimulationFiles,
+  j2 as findSimulationFiles,
   k as getComponentName,
   l as isSimulationFile,
   t as toPascalCase,
-  u as useThemeContext
+  m as useThemeContext
 };
 //# sourceMappingURL=index.js.map

package/dist/chatgpt/index.js.map

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

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

@@ -0,0 +1,23 @@
+import { ScreenWidth } from '../simulator/simulator-types';
+import { McpUiDisplayMode, McpUiHostContext } from '@modelcontextprotocol/ext-apps';
+import * as React from 'react';
+type Platform = NonNullable<McpUiHostContext['platform']>;
+interface ClaudeConversationProps {
+    children?: React.ReactNode;
+    screenWidth: ScreenWidth;
+    displayMode: McpUiDisplayMode;
+    platform: Platform;
+    onRequestDisplayMode?: (mode: McpUiDisplayMode) => void;
+    appName?: string;
+    appIcon?: string;
+    userMessage?: string;
+    isTransitioning?: boolean;
+}
+/**
+ * Claude conversation shell — mimics Claude's chat UI chrome.
+ *
+ * All three display modes (inline, pip, fullscreen) share the same React tree
+ * shape so that the iframe never unmounts when switching modes.
+ */
+export declare function ClaudeConversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, isTransitioning, }: ClaudeConversationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/claude/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../claude-host-C7KPfOM8.cjs");
+const simulator = require("../simulator-BqZmzFVR.cjs");
+exports.ClaudeSimulator = simulator.Simulator;
+//# sourceMappingURL=index.cjs.map

package/dist/claude/index.cjs.map

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

package/dist/claude/index.d.ts

@@ -0,0 +1 @@
+export { Simulator as ClaudeSimulator } from '../simulator/simulator';

package/dist/claude/index.js

@@ -0,0 +1,6 @@
+import "../claude-host-CaD7ptbt.js";
+import { S } from "../simulator-CMgCGNuD.js";
+export {
+  S as ClaudeSimulator
+};
+//# sourceMappingURL=index.js.map

package/dist/claude/index.js.map

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

package/dist/claude-host-C7KPfOM8.cjs

@@ -0,0 +1,284 @@
+"use strict";
+const simulator = require("./simulator-BqZmzFVR.cjs");
+const jsxRuntime = require("react/jsx-runtime");
+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?",
+  isTransitioning = false
+}) {
+  const isDesktop = platform === "desktop";
+  const containerWidth = screenWidth === "full" ? "100%" : `${simulator.SCREEN_WIDTHS[screenWidth]}px`;
+  const isFullscreen = displayMode === "fullscreen";
+  const isPip = displayMode === "pip";
+  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.jsx(
+          "header",
+          {
+            className: "h-12 flex items-center 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" })
+          }
+        ),
+        /* @__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 ? /* @__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",
+                      {
+                        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" },
+                                    opacity: isTransitioning ? 0 : 1,
+                                    transition: isTransitioning ? "none" : "opacity 100ms"
+                                  },
+                                  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: {},
+  logging: {},
+  updateModelContext: { text: {} },
+  message: { text: {} }
+};
+function applyClaudeTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  document.documentElement.style.colorScheme = theme;
+}
+const CLAUDE_STYLE_VARIABLES = {
+  ...simulator.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)"
+};
+simulator.registerHostShell({
+  id: "claude",
+  label: "Claude",
+  Conversation: ClaudeConversation,
+  applyTheme: applyClaudeTheme,
+  hostInfo: CLAUDE_HOST_INFO,
+  hostCapabilities: CLAUDE_HOST_CAPABILITIES,
+  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)"
+  }
+});
+//# sourceMappingURL=claude-host-C7KPfOM8.cjs.map

package/dist/claude-host-C7KPfOM8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"claude-host-C7KPfOM8.cjs","sources":["../src/claude/claude-conversation.tsx","../src/claude/claude-host.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\ninterface ClaudeConversationProps {\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  isTransitioning?: boolean;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M12 4L4 12M4 4L12 12\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction BackIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M10 3L5 8L10 13\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/**\n * Claude conversation shell — mimics Claude's chat UI chrome.\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.\n */\nexport function ClaudeConversation({\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}: ClaudeConversationProps) {\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 flex items-center h-12 border-b px-3 pointer-events-auto\"\n            style={{\n              borderColor: 'var(--color-border-primary)',\n              backgroundColor: 'var(--sim-bg-conversation, var(--color-background-primary))',\n            }}\n          >\n            <button\n              onClick={handleClose}\n              aria-label=\"Back\"\n              className=\"h-8 w-8 flex items-center justify-center rounded-lg transition-colors hover:opacity-70\"\n              type=\"button\"\n            >\n              <BackIcon />\n            </button>\n            <div className=\"flex-1 text-center text-sm font-medium\">{appName}</div>\n            {isDesktop && <div className=\"w-8\" />}\n          </div>\n          <div className=\"flex-1\" />\n          <footer\n            className=\"pointer-events-auto p-3\"\n            style={{\n              backgroundColor: 'var(--sim-bg-conversation, var(--color-background-primary))',\n            }}\n          >\n            <div className=\"max-w-[48rem] mx-auto\">\n              <input\n                type=\"text\"\n                name=\"userInput\"\n                disabled\n                placeholder=\"Reply to sunpeak...\"\n                className=\"w-full rounded-xl px-4 py-2.5 text-sm\"\n                style={{\n                  backgroundColor: 'var(--sim-bg-reply-input, var(--color-background-secondary))',\n                  border: '1px solid var(--color-border-primary)',\n                  color: 'var(--color-text-primary)',\n                }}\n              />\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-sm font-medium 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 */}\n          {!isFullscreen && (\n            <article className=\"w-full\" dir=\"auto\" data-turn=\"user\">\n              <div className=\"px-4 py-4\">\n                <div className=\"max-w-[48rem] mx-auto flex justify-end\">\n                  <div\n                    className=\"inline-block rounded-2xl px-4 py-2.5 text-sm max-w-[85%]\"\n                    style={{\n                      backgroundColor:\n                        'var(--sim-bg-user-bubble, var(--color-background-tertiary))',\n                    }}\n                  >\n                    {userMessage}\n                  </div>\n                </div>\n              </div>\n            </article>\n          )}\n\n          {/* Assistant turn */}\n          <article className=\"w-full\" dir=\"auto\" data-turn=\"assistant\">\n            <h6 className=\"sr-only\">{appName} said:</h6>\n            <div className=\"px-4 py-2\">\n              <div className=\"max-w-[48rem] mx-auto\">\n                {/* Claude avatar + name */}\n                {!isFullscreen && (\n                  <div className=\"flex items-center gap-2 mb-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 text-xs font-medium text-white\"\n                        style={{ backgroundColor: '#c55a30' }}\n                      >\n                        C\n                      </div>\n                    )}\n                    <span className=\"text-sm font-medium\">{appName}</span>\n                  </div>\n                )}\n\n                {/* ─── CONTENT AREA ─── */}\n                <div\n                  className={\n                    isPip\n                      ? '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'\n                      : isFullscreen\n                        ? 'fixed inset-x-0 top-[3rem] bottom-0 z-50 mx-auto'\n                        : 'relative mb-2 w-full overflow-visible'\n                  }\n                  style={{\n                    ...(isPip ? { maxHeight: '480px' } : {}),\n                    ...(isFullscreen ? { maxWidth: containerWidth } : {}),\n                  }}\n                >\n                  {/* PiP close button */}\n                  {isPip && (\n                    <button\n                      key=\"pip-close\"\n                      onClick={handleClose}\n                      className=\"absolute -start-2 -top-1.5 z-10 rounded-full p-1.5 text-white shadow-md\"\n                      style={{ backgroundColor: '#4a4a4a' }}\n                      aria-label=\"Close picture-in-picture\"\n                      type=\"button\"\n                    >\n                      <CloseIcon />\n                    </button>\n                  )}\n                  <div\n                    key=\"content\"\n                    className={\n                      isPip\n                        ? 'relative overflow-hidden h-full rounded-2xl shadow-lg'\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-secondary)',\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          </article>\n        </main>\n\n        {/* Input area */}\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=\"Reply to sunpeak...\"\n                  className=\"w-full rounded-xl px-4 py-2.5 text-sm\"\n                  style={{\n                    backgroundColor: 'var(--sim-bg-reply-input, var(--color-background-secondary))',\n                    border: '1px solid var(--color-border-primary)',\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 { ClaudeConversation } from './claude-conversation';\n\nconst CLAUDE_HOST_INFO = {\n  name: 'Claude',\n  version: '1.0.0',\n};\n\n/**\n * Claude starts with the baseline MCP App capabilities.\n * Host-specific capabilities (if any) can be added here as Claude's\n * MCP App integration evolves.\n */\nconst CLAUDE_HOST_CAPABILITIES: McpUiHostCapabilities = {\n  openLinks: {},\n  serverTools: {},\n  logging: {},\n  updateModelContext: { text: {} },\n  message: { text: {} },\n};\n\n/**\n * Apply Claude-style theming to the document.\n * Sets data-theme attribute and color-scheme so CSS light-dark() resolves correctly.\n */\nfunction applyClaudeTheme(theme: 'light' | 'dark'): void {\n  document.documentElement.setAttribute('data-theme', theme);\n  document.documentElement.style.colorScheme = theme;\n}\n\n/**\n * Claude-specific style variable overrides (warm beige/cream palette).\n * Inherits defaults from DEFAULT_STYLE_VARIABLES, overriding only colors.\n */\nconst CLAUDE_STYLE_VARIABLES = {\n  ...DEFAULT_STYLE_VARIABLES,\n  // Background colors — warm beige/cream palette\n  '--color-background-primary': 'light-dark(#faf9f5, #262624)',\n  '--color-background-secondary': 'light-dark(#ffffff, #3a3935)',\n  '--color-background-tertiary': 'light-dark(#e8e4dc, #4a4843)',\n  '--color-background-inverse': 'light-dark(#2b2a27, #f3f0e8)',\n  // Text colors\n  '--color-text-primary': 'light-dark(#2d2b27, #e8e4dc)',\n  '--color-text-secondary': 'light-dark(#6b6560, #9b9690)',\n  '--color-text-tertiary': 'light-dark(#9b9690, #6b6560)',\n  '--color-text-inverse': 'light-dark(#e8e4dc, #2d2b27)',\n  // Border colors\n  '--color-border-primary': 'light-dark(#e0ddd5, #4a4843)',\n  '--color-border-secondary': 'light-dark(#d5d1c8, #5a5753)',\n  '--color-border-tertiary': 'light-dark(#f0ede5, #3a3935)',\n};\n\nregisterHostShell({\n  id: 'claude',\n  label: 'Claude',\n  Conversation: ClaudeConversation,\n  applyTheme: applyClaudeTheme,\n  hostInfo: CLAUDE_HOST_INFO,\n  hostCapabilities: CLAUDE_HOST_CAPABILITIES,\n  styleVariables: CLAUDE_STYLE_VARIABLES,\n  pageStyles: {\n    '--sim-bg-sidebar': 'light-dark(#f9f8f3, #252523)',\n    '--sim-bg-conversation': 'light-dark(#faf9f5, #262624)',\n    '--sim-bg-user-bubble': 'light-dark(#f1eee6, #141413)',\n    '--sim-bg-reply-input': 'light-dark(#ffffff, #30302e)',\n  },\n});\n"],"names":["jsx","SCREEN_WIDTHS","jsxs","DEFAULT_STYLE_VARIABLES","registerHostShell"],"mappings":"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"}