sunpeak 0.1.0

package/dist/index.cjs

@@ -0,0 +1,730 @@
+'use strict';
+
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+// src/components/Button/Button.tsx
+var Button = ({
+  isPrimary = false,
+  onClick,
+  children,
+  className,
+  type = "button",
+  ...props
+}) => {
+  const buttonClasses = clsx.clsx(
+    "sp-button",
+    {
+      "sp-button-primary": isPrimary,
+      "sp-button-secondary": !isPrimary
+    },
+    className
+  );
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onClick();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: buttonClasses, onClick: handleClick, type, ...props, children });
+};
+
+// src/types/chatgpt.ts
+var SET_GLOBALS_EVENT_TYPE = "chatgpt:set_globals";
+
+// src/platforms/chatgpt.ts
+var ChatGPTPlatformAdapter = class {
+  constructor() {
+    this.name = "chatgpt";
+  }
+  isAvailable() {
+    return typeof window !== "undefined" && "openai" in window;
+  }
+  getGlobal(key) {
+    if (!this.isAvailable()) {
+      return null;
+    }
+    return window.openai?.[key] ?? null;
+  }
+  getGlobals() {
+    if (!this.isAvailable()) {
+      return null;
+    }
+    return window.openai ?? null;
+  }
+  subscribe(callback) {
+    if (typeof window === "undefined") {
+      return () => {
+      };
+    }
+    const handleSetGlobal = (_event) => {
+      callback();
+    };
+    window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
+    };
+  }
+};
+var chatgptPlatform = new ChatGPTPlatformAdapter();
+
+// src/platforms/registry.ts
+var DefaultPlatformRegistry = class {
+  constructor() {
+    this.adapters = /* @__PURE__ */ new Map();
+    this.register(chatgptPlatform);
+  }
+  register(adapter) {
+    this.adapters.set(adapter.name, adapter);
+  }
+  get(name) {
+    return this.adapters.get(name) ?? null;
+  }
+  detect() {
+    for (const adapter of this.adapters.values()) {
+      if (adapter.isAvailable()) {
+        return adapter;
+      }
+    }
+    return null;
+  }
+  getAll() {
+    return Array.from(this.adapters.values());
+  }
+};
+function createPlatformRegistry() {
+  return new DefaultPlatformRegistry();
+}
+var defaultPlatformRegistry = createPlatformRegistry();
+var PlatformContext = react.createContext(null);
+function PlatformProvider({ adapter, platform, children }) {
+  const resolvedAdapter = adapter ?? (platform ? defaultPlatformRegistry.get(platform) : null) ?? defaultPlatformRegistry.detect();
+  return /* @__PURE__ */ jsxRuntime.jsx(PlatformContext.Provider, { value: { adapter: resolvedAdapter }, children });
+}
+function usePlatformContext() {
+  const context = react.useContext(PlatformContext);
+  if (!context) {
+    return {
+      adapter: defaultPlatformRegistry.detect()
+    };
+  }
+  return context;
+}
+function usePlatform() {
+  const { adapter } = usePlatformContext();
+  return adapter;
+}
+
+// src/hooks/usePlatformGlobal.ts
+function usePlatformGlobal(key) {
+  const platform = usePlatform();
+  return react.useSyncExternalStore(
+    (onChange) => {
+      if (!platform) {
+        return () => {
+        };
+      }
+      return platform.subscribe(onChange);
+    },
+    () => platform?.getGlobal(key) ?? null,
+    () => platform?.getGlobal(key) ?? null
+  );
+}
+
+// src/hooks/useDisplayMode.ts
+var useDisplayMode = () => {
+  return usePlatformGlobal("displayMode");
+};
+
+// src/hooks/useMaxHeight.ts
+var useMaxHeight = () => {
+  return usePlatformGlobal("maxHeight");
+};
+
+// src/hooks/useRequestDisplayMode.ts
+function useRequestDisplayMode() {
+  const platform = usePlatform();
+  return async (args) => {
+    const globals = platform?.getGlobals();
+    if (globals?.requestDisplayMode) {
+      return await globals.requestDisplayMode(args);
+    }
+    console.warn("requestDisplayMode is not available on this platform");
+    return { mode: args.mode };
+  };
+}
+
+// src/hooks/useColorScheme.ts
+var useColorScheme = () => {
+  return usePlatformGlobal("colorScheme");
+};
+
+// src/hooks/useWidgetProps.ts
+function useWidgetProps(defaultState) {
+  const props = usePlatformGlobal("toolOutput");
+  const fallback = typeof defaultState === "function" ? defaultState() : defaultState ?? null;
+  return props ?? fallback;
+}
+function useWidgetState(defaultState) {
+  const widgetStateFromWindow = usePlatformGlobal("widgetState");
+  const platform = usePlatform();
+  const [widgetState, _setWidgetState] = react.useState(() => {
+    if (widgetStateFromWindow != null) {
+      return widgetStateFromWindow;
+    }
+    return typeof defaultState === "function" ? defaultState() : defaultState ?? null;
+  });
+  react.useEffect(() => {
+    _setWidgetState(widgetStateFromWindow);
+  }, [widgetStateFromWindow]);
+  const setWidgetState = react.useCallback(
+    (state) => {
+      _setWidgetState((prevState) => {
+        const newState = typeof state === "function" ? state(prevState) : state;
+        if (newState != null && platform) {
+          const globals = platform.getGlobals();
+          if (globals?.setWidgetState) {
+            globals.setWidgetState(newState);
+          }
+        }
+        return newState;
+      });
+    },
+    [platform]
+  );
+  return [widgetState, setWidgetState];
+}
+var Card = ({
+  children,
+  image,
+  imageAlt,
+  imageMaxWidth,
+  imageMaxHeight,
+  header,
+  metadata,
+  button1,
+  button2,
+  variant = "default",
+  maxWidth = 800,
+  className,
+  onClick,
+  id,
+  ...props
+}) => {
+  const requestDisplayMode = useRequestDisplayMode();
+  const displayMode = useDisplayMode();
+  const maxHeight = useMaxHeight();
+  const colorScheme = useColorScheme();
+  const [widgetState, setWidgetState] = useWidgetState({});
+  const isInline = displayMode !== "fullscreen" && displayMode !== "pip";
+  const cardClasses = clsx.clsx(
+    "sp-genai-app",
+    "sp-card",
+    "sp-select-none",
+    "sp-antialiased",
+    {
+      "sp-card-elevated": variant === "elevated",
+      "sp-card-bordered": variant === "bordered"
+    },
+    colorScheme && `sp-theme-${colorScheme}`,
+    className
+  );
+  const hasButtons = button1 || button2;
+  const handleCardClick = async (e) => {
+    onClick?.(e);
+    if (isInline && !e.defaultPrevented) {
+      try {
+        if (id) {
+          setWidgetState({ ...widgetState, selectedCardId: id });
+        }
+        await requestDisplayMode({ mode: "fullscreen" });
+      } catch (error) {
+        console.error("Failed to request fullscreen mode:", error);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id,
+      className: cardClasses,
+      style: {
+        width: isInline ? "220px" : "100%",
+        maxWidth: isInline ? "220px" : `${maxWidth}px`,
+        maxHeight: maxHeight ? `${maxHeight}px` : void 0,
+        cursor: isInline ? "pointer" : "default",
+        overflow: "auto"
+      },
+      onClick: handleCardClick,
+      ...props,
+      children: [
+        image && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt: imageAlt,
+            className: "sp-card-image",
+            loading: "lazy",
+            style: {
+              maxWidth: `${imageMaxWidth}px`,
+              maxHeight: `${imageMaxHeight}px`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: isInline ? "12px" : "16px",
+              padding: isInline ? "16px" : "24px",
+              paddingTop: image ? isInline ? "12px" : "16px" : isInline ? "16px" : "24px",
+              flex: 1
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: isInline ? "4px" : "8px", flex: 1 }, children: [
+                header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sp-card-header sp-truncate", children: header }),
+                metadata && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sp-card-metadata", children: metadata }),
+                children && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "sp-card-description",
+                    style: {
+                      marginTop: metadata || header ? isInline ? "4px" : "8px" : "0",
+                      WebkitLineClamp: isInline ? 2 : "unset"
+                    },
+                    children
+                  }
+                )
+              ] }),
+              hasButtons && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
+                button1 && /* @__PURE__ */ jsxRuntime.jsx(Button, { ...button1 }),
+                button2 && /* @__PURE__ */ jsxRuntime.jsx(Button, { ...button2 })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Carousel = ({
+  children,
+  gap = 16,
+  maxWidth = 800,
+  showArrows = true,
+  showEdgeGradients = true,
+  className,
+  ...props
+}) => {
+  const scrollRef = react.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = react.useState(false);
+  const [canScrollRight, setCanScrollRight] = react.useState(false);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [startX, setStartX] = react.useState(0);
+  const [scrollLeft, setScrollLeft] = react.useState(0);
+  const maxHeight = useMaxHeight();
+  const colorScheme = useColorScheme();
+  const checkScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+  };
+  react.useEffect(() => {
+    checkScroll();
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    return () => {
+      el.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, []);
+  const scroll = (direction) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const firstCard = el.children[0];
+    if (!firstCard) return;
+    const cardWidth = firstCard.offsetWidth;
+    const scrollAmount = cardWidth + gap;
+    const targetScroll = direction === "left" ? el.scrollLeft - scrollAmount : el.scrollLeft + scrollAmount;
+    el.scrollTo({
+      left: targetScroll,
+      behavior: "smooth"
+    });
+  };
+  const handleMouseDown = (e) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setIsDragging(true);
+    setStartX(e.pageX - el.offsetLeft);
+    setScrollLeft(el.scrollLeft);
+  };
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+    e.preventDefault();
+    const el = scrollRef.current;
+    if (!el) return;
+    const x = e.pageX - el.offsetLeft;
+    const walk = (x - startX) * 2;
+    el.scrollLeft = scrollLeft - walk;
+  };
+  const handleMouseUpOrLeave = () => {
+    setIsDragging(false);
+  };
+  const containerClasses = clsx.clsx(
+    "sp-genai-app",
+    "sp-carousel",
+    "sp-antialiased",
+    colorScheme && `sp-theme-${colorScheme}`,
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: containerClasses,
+      style: {
+        maxHeight: maxHeight ? `${maxHeight}px` : void 0,
+        maxWidth: `${maxWidth}px`
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: "sp-carousel-scroll",
+            style: { gap: `${gap}px`, cursor: isDragging ? "grabbing" : "grab" },
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUpOrLeave,
+            onMouseLeave: handleMouseUpOrLeave,
+            children
+          }
+        ) }),
+        showEdgeGradients && canScrollLeft && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sp-carousel-edge sp-carousel-edge-left",
+            "aria-hidden": "true",
+            style: { opacity: canScrollLeft ? 1 : 0 }
+          }
+        ),
+        showEdgeGradients && canScrollRight && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sp-carousel-edge sp-carousel-edge-right",
+            "aria-hidden": "true",
+            style: { opacity: canScrollRight ? 1 : 0 }
+          }
+        ),
+        showArrows && canScrollLeft && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            "aria-label": "Previous",
+            className: "sp-carousel-nav-button sp-carousel-nav-button-prev",
+            onClick: () => scroll("left"),
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "sp-carousel-nav-icon",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M15 18L9 12L15 6",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        showArrows && canScrollRight && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            "aria-label": "Next",
+            className: "sp-carousel-nav-button sp-carousel-nav-button-next",
+            onClick: () => scroll("right"),
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "sp-carousel-nav-icon",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M9 18L15 12L9 6",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+function GenAI(renderFn) {
+  const GenAIComponent = (props = {}) => {
+    const maxHeight = useMaxHeight();
+    const colorScheme = useColorScheme();
+    const { className, maxWidth = 800, ...rest } = props;
+    const containerClasses = clsx.clsx(
+      "sp-genai-app",
+      "sp-antialiased",
+      colorScheme && `sp-theme-${colorScheme}`,
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: containerClasses,
+        style: {
+          maxWidth: `${maxWidth}px`,
+          maxHeight: maxHeight ? `${maxHeight}px` : void 0
+        },
+        ...rest,
+        children: renderFn({ maxHeight, colorScheme })
+      }
+    );
+  };
+  GenAIComponent.displayName = "GenAI";
+  return GenAIComponent;
+}
+function ChatGPTSimulator({
+  children,
+  displayMode: initialDisplayMode = "inline",
+  colorScheme: initialColorScheme = "dark",
+  toolInput = {},
+  toolOutput = null,
+  widgetState: initialWidgetState = null,
+  userMessage = "Show me some recommendations",
+  showControls = true,
+  uiSimulations,
+  initialUISimulation
+}) {
+  const [displayMode, setDisplayMode] = react.useState(initialDisplayMode);
+  const [widgetState, setWidgetStateInternal] = react.useState(
+    initialWidgetState
+  );
+  const [bodyWidth, setBodyWidth] = react.useState("100%");
+  const [selectedUISimulation, setSelectedUISimulation] = react.useState(
+    initialUISimulation || uiSimulations?.[0] || ""
+  );
+  const [viewportHeight, setViewportHeight] = react.useState(window.innerHeight);
+  const [colorScheme, setColorScheme] = react.useState(initialColorScheme);
+  react.useEffect(() => {
+    const handleSetGlobals = (event) => {
+      const customEvent = event;
+      if (customEvent.detail?.globals?.colorScheme) {
+        setColorScheme(customEvent.detail.globals.colorScheme);
+      }
+    };
+    window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobals);
+    return () => window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobals);
+  }, []);
+  react.useEffect(() => {
+    const handleResize = () => {
+      setViewportHeight(window.innerHeight);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  react.useEffect(() => {
+    const inputBarHeight = 80;
+    const openaiGlobals = {
+      colorScheme,
+      displayMode,
+      locale: "en-US",
+      maxHeight: displayMode === "fullscreen" ? viewportHeight - inputBarHeight : 600,
+      userAgent: {
+        device: { type: "desktop" },
+        capabilities: { hover: true, touch: false }
+      },
+      safeArea: {
+        insets: { top: 0, bottom: 0, left: 0, right: 0 }
+      },
+      toolInput,
+      toolOutput,
+      toolResponseMetadata: null,
+      widgetState,
+      setWidgetState: async (state) => {
+        console.log("[ChatGPT Simulator] setWidgetState called:", state);
+        setWidgetStateInternal(state);
+      }
+    };
+    const openaiAPI = {
+      callTool: async (name, args) => {
+        console.log("[ChatGPT Simulator] callTool called:", name, args);
+        return { result: "Mock tool result" };
+      },
+      sendFollowUpMessage: async (args) => {
+        console.log("[ChatGPT Simulator] sendFollowUpMessage called:", args);
+      },
+      openExternal: (payload) => {
+        console.log("[ChatGPT Simulator] openExternal called:", payload);
+        window.open(payload.href, "_blank");
+      },
+      requestDisplayMode: async (args) => {
+        console.log("[ChatGPT Simulator] requestDisplayMode called:", args);
+        setDisplayMode(args.mode);
+        return { mode: args.mode };
+      }
+    };
+    window.openai = { ...openaiGlobals, ...openaiAPI };
+    window.dispatchEvent(
+      new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
+        detail: { globals: openaiGlobals }
+      })
+    );
+    return () => {
+      delete window.openai;
+    };
+  }, [colorScheme, displayMode, toolInput, toolOutput, widgetState, viewportHeight]);
+  react.useEffect(() => {
+    if (window.openai) {
+      const inputBarHeight = 80;
+      const calculatedMaxHeight = displayMode === "fullscreen" ? viewportHeight - inputBarHeight : 600;
+      window.openai.colorScheme = colorScheme;
+      window.openai.displayMode = displayMode;
+      window.openai.widgetState = widgetState;
+      window.openai.maxHeight = calculatedMaxHeight;
+      window.dispatchEvent(
+        new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
+          detail: {
+            globals: { colorScheme, displayMode, widgetState, maxHeight: calculatedMaxHeight }
+          }
+        })
+      );
+    }
+  }, [colorScheme, displayMode, widgetState, viewportHeight]);
+  const isFullscreen = displayMode === "fullscreen";
+  const renderChildren = () => {
+    if (typeof children === "function") {
+      return children(selectedUISimulation);
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `chatgpt-simulator chatgpt-simulator--${colorScheme}`, "data-display-mode": displayMode, children: [
+    showControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatgpt-simulator__sidebar", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chatgpt-simulator__sidebar-header", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Controls" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatgpt-simulator__control-group", children: [
+        uiSimulations && uiSimulations.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "App UI",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: selectedUISimulation,
+              onChange: (e) => setSelectedUISimulation(e.target.value),
+              children: uiSimulations.map((simulation) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: simulation, children: simulation }, simulation))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "Color Scheme",
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { value: colorScheme, onChange: (e) => setColorScheme(e.target.value), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "light", children: "Light" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "dark", children: "Dark" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "Display Mode",
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              value: displayMode,
+              onChange: (e) => setDisplayMode(e.target.value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "inline", children: "Inline" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "fullscreen", children: "Fullscreen" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pip", children: "Picture-in-Picture" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "Body Width",
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { value: bodyWidth, onChange: (e) => setBodyWidth(e.target.value), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "100%", children: "100% (Full)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1024px", children: "1024px (Laptop)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "768px", children: "768px (Tablet)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "425px", children: "425px (Mobile L)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "320px", children: "320px (Mobile S)" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatgpt-simulator__main", style: { width: bodyWidth, maxWidth: bodyWidth }, children: [
+      isFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "chatgpt-simulator__close-button",
+          onClick: () => setDisplayMode("inline"),
+          "aria-label": "Exit fullscreen",
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      ),
+      !isFullscreen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chatgpt-simulator__header", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "ChatGPT" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-[var(--thread-content-max-width)] 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(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chatgpt-simulator__message chatgpt-simulator__message--user", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chatgpt-simulator__message-content", children: userMessage }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { 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 first:pt-[1px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full break-words", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatgpt-simulator__app-title", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatgpt-simulator__app-icon", children: "\u2708\uFE0F" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatgpt-simulator__app-name", children: "Splorin" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chatgpt-simulator__component-slot", children: renderChildren() })
+          ] }) }) })
+        ] }),
+        isFullscreen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chatgpt-simulator__fullscreen-content", children: renderChildren() })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chatgpt-simulator__input-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          className: "chatgpt-simulator__input",
+          placeholder: "Message ChatGPT",
+          disabled: true
+        }
+      ) })
+    ] })
+  ] });
+}
+
+exports.Button = Button;
+exports.Card = Card;
+exports.Carousel = Carousel;
+exports.ChatGPTSimulator = ChatGPTSimulator;
+exports.GenAI = GenAI;
+exports.PlatformProvider = PlatformProvider;
+exports.chatgptPlatform = chatgptPlatform;
+exports.createPlatformRegistry = createPlatformRegistry;
+exports.useColorScheme = useColorScheme;
+exports.useDisplayMode = useDisplayMode;
+exports.useMaxHeight = useMaxHeight;
+exports.usePlatform = usePlatform;
+exports.usePlatformGlobal = usePlatformGlobal;
+exports.useRequestDisplayMode = useRequestDisplayMode;
+exports.useWidgetProps = useWidgetProps;
+exports.useWidgetState = useWidgetState;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map