sunpeak 0.1.25 → 0.2.2

package/dist/index.js

@@ -1,1421 +1,879 @@
-import { useTheme, Box, IconButton, Typography, FormControl, InputLabel, Select, MenuItem, TextField, Button } from '@mui/material';
-import { createContext, useSyncExternalStore, useState, useEffect, useCallback, useRef, Children, useContext } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import CloseIcon from '@mui/icons-material/Close';
+import * as React3 from 'react';
+import { useSyncExternalStore, useCallback, useMemo, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { ChevronDown, ChevronUp, Check, XIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as LabelPrimitive from '@radix-ui/react-label';
 
-// src/components/Card/Card.tsx
-
-// src/types/chatgpt.ts
-var SET_GLOBALS_EVENT_TYPE = "chatgpt:set_globals";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var ThemeProviderContext = React3.createContext(
+  void 0
+);
+function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  theme: controlledTheme,
+  ...props
+}) {
+  const [internalTheme] = React3.useState(defaultTheme);
+  const theme = controlledTheme ?? internalTheme;
+  React3.useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+  }, [theme]);
+  const value = {
+    theme
+  };
+  return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { ...props, value, children });
+}
+var useThemeContext = () => {
+  const context = React3.useContext(ThemeProviderContext);
+  if (context === void 0)
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  return context;
+};
 
-// src/platforms/chatgpt.ts
-var ChatGPTPlatformAdapter = class {
+// src/types/openai.ts
+var SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+var SetGlobalsEvent = class extends CustomEvent {
   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);
-    };
+    super(...arguments);
+    __publicField(this, "type", SET_GLOBALS_EVENT_TYPE);
   }
 };
-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());
-  }
+// src/types/simulator.ts
+var SCREEN_WIDTHS = {
+  "mobile-s": 375,
+  "mobile-l": 425,
+  tablet: 768,
+  full: 1024
 };
-function createPlatformRegistry() {
-  return new DefaultPlatformRegistry();
-}
-var defaultPlatformRegistry = createPlatformRegistry();
-var PlatformContext = createContext(null);
-function PlatformProvider({ adapter, platform, children }) {
-  const resolvedAdapter = adapter ?? (platform ? defaultPlatformRegistry.get(platform) : null) ?? defaultPlatformRegistry.detect();
-  return /* @__PURE__ */ jsx(PlatformContext.Provider, { value: { adapter: resolvedAdapter }, children });
-}
-function usePlatformContext() {
-  const context = 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();
+// src/hooks/use-openai-global.ts
+function useOpenAiGlobal(key) {
   return useSyncExternalStore(
     (onChange) => {
-      if (!platform) {
+      if (typeof window === "undefined") {
         return () => {
         };
       }
-      return platform.subscribe(onChange);
+      const handleSetGlobal = (event) => {
+        const value = event.detail.globals[key];
+        if (value === void 0) {
+          return;
+        }
+        onChange();
+      };
+      window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal, {
+        passive: true
+      });
+      return () => {
+        window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
+      };
     },
-    () => platform?.getGlobal(key) ?? null,
-    () => platform?.getGlobal(key) ?? null
+    () => window.openai?.[key] ?? null,
+    () => window.openai?.[key] ?? null
   );
 }
 
-// src/hooks/useDisplayMode.ts
+// src/hooks/use-display-mode.ts
 var useDisplayMode = () => {
-  return usePlatformGlobal("displayMode");
+  return useOpenAiGlobal("displayMode");
 };
 
-// src/hooks/useMaxHeight.ts
+// src/hooks/use-max-height.ts
 var useMaxHeight = () => {
-  return usePlatformGlobal("maxHeight");
+  return useOpenAiGlobal("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 };
-  };
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React3.useState(void 0);
+  React3.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
 }
 
-// src/hooks/useColorScheme.ts
-var useColorScheme = () => {
-  return usePlatformGlobal("colorScheme");
+// src/hooks/use-theme.ts
+var useTheme = () => {
+  return useOpenAiGlobal("theme");
 };
-
-// src/hooks/useWidgetProps.ts
-function useWidgetProps(defaultState) {
-  const props = usePlatformGlobal("toolOutput");
-  const fallback = typeof defaultState === "function" ? defaultState() : defaultState ?? null;
-  return props ?? fallback;
+function useWidgetState() {
+  const widgetState = useOpenAiGlobal("widgetState");
+  const setWidgetState = useOpenAiGlobal("setWidgetState");
+  const setter = useCallback(
+    async (state) => {
+      if (setWidgetState) {
+        await setWidgetState(state);
+      }
+    },
+    [setWidgetState]
+  );
+  return useMemo(() => [widgetState, setter], [widgetState, setter]);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
 }
-function useWidgetState(defaultState) {
-  const widgetStateFromWindow = usePlatformGlobal("widgetState");
-  const platform = usePlatform();
-  const [widgetState, _setWidgetState] = useState(() => {
-    if (widgetStateFromWindow != null) {
-      return widgetStateFromWindow;
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
     }
-    return typeof defaultState === "function" ? defaultState() : defaultState ?? null;
-  });
-  useEffect(() => {
-    _setWidgetState(widgetStateFromWindow);
-  }, [widgetStateFromWindow]);
-  const setWidgetState = 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",
+function SheetContent({
   className,
-  onClick,
-  id,
+  children,
+  side = "right",
   ...props
-}) => {
-  const requestDisplayMode = useRequestDisplayMode();
-  const displayMode = useDisplayMode();
-  const maxHeight = useMaxHeight();
-  const theme = useTheme();
-  const [widgetState, setWidgetState] = useWidgetState({});
-  const isInline = displayMode !== "fullscreen" && displayMode !== "pip";
-  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__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
       }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
     }
-  };
-  const renderButton = (buttonProps) => {
-    const { isPrimary = false, onClick: buttonOnClick, children: children2, ...muiProps } = buttonProps;
-    const handleClick = (e) => {
-      e.stopPropagation();
-      buttonOnClick();
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = React3.createContext(null);
+function useSidebar() {
+  const context = React3.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React3.useState(false);
+  const [_open, _setOpen] = React3.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React3.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React3.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React3.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
     };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React3.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      className: cn(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
     return /* @__PURE__ */ jsx(
-      Button,
+      "div",
       {
-        ...muiProps,
-        variant: isPrimary ? "contained" : "outlined",
-        onClick: handleClick,
-        children: children2
+        "data-slot": "sidebar",
+        className: cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        ),
+        ...props,
+        children
       }
     );
-  };
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+        },
+        side,
+        children: [
+          /* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsxs(
-    Box,
+    "div",
     {
-      id,
-      className,
-      onClick: handleCardClick,
-      sx: {
-        backgroundColor: theme.palette.background.default,
-        borderRadius: theme.spacing(3),
-        overflow: "auto",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: theme.typography.fontFamily,
-        width: isInline ? "220px" : "100%",
-        maxWidth: isInline ? "220px" : `${imageMaxWidth}px`,
-        maxHeight: maxHeight ? `${maxHeight}px` : void 0,
-        cursor: isInline ? "pointer" : "default",
-        userSelect: "none",
-        marginLeft: isInline ? void 0 : "auto",
-        marginRight: isInline ? void 0 : "auto",
-        ...variant === "bordered" && {
-          border: `1px solid ${theme.palette.divider}`
-        },
-        ...variant === "elevated" && {
-          boxShadow: theme.shadows[2],
-          border: `1px solid ${theme.palette.divider}`
-        }
-      },
-      ...props,
+      className: "group peer text-sidebar-foreground hidden md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
       children: [
-        image && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-          Box,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            component: "img",
-            src: image,
-            alt: imageAlt,
-            loading: "lazy",
-            sx: {
-              width: "100%",
-              height: "auto",
-              aspectRatio: "1",
-              objectFit: "cover",
-              borderRadius: theme.spacing(3),
-              display: "block",
-              maxWidth: `${imageMaxWidth}px`,
-              maxHeight: `${imageMaxHeight}px`
-            }
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
           }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          Box,
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              flex: 1,
-              gap: isInline ? theme.spacing(3) : theme.spacing(4),
-              padding: isInline ? theme.spacing(4) : theme.spacing(6),
-              ...image && {
-                paddingTop: isInline ? theme.spacing(3) : theme.spacing(4)
+            "data-slot": "sidebar-container",
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+                children
               }
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    flex: 1,
-                    gap: isInline ? theme.spacing(1) : theme.spacing(2)
-                  },
-                  children: [
-                    header && /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        sx: {
-                          fontSize: theme.typography.body1.fontSize,
-                          fontWeight: theme.typography.fontWeightMedium,
-                          color: theme.palette.text.primary,
-                          lineHeight: 1.25,
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        },
-                        children: header
-                      }
-                    ),
-                    metadata && /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        sx: {
-                          fontSize: theme.typography.caption.fontSize,
-                          color: theme.palette.text.secondary,
-                          lineHeight: 1.5
-                        },
-                        children: metadata
-                      }
-                    ),
-                    children && /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        sx: {
-                          fontSize: theme.typography.body2.fontSize,
-                          color: theme.palette.text.primary,
-                          lineHeight: 1.5,
-                          display: "-webkit-box",
-                          WebkitBoxOrient: "vertical",
-                          overflow: "hidden",
-                          ...isInline && (metadata || header) && {
-                            marginTop: theme.spacing(1),
-                            WebkitLineClamp: 2
-                          },
-                          ...!isInline && (metadata || header) && {
-                            marginTop: theme.spacing(2),
-                            WebkitLineClamp: "unset"
-                          }
-                        },
-                        children
-                      }
-                    )
-                  ]
-                }
-              ),
-              hasButtons && /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  sx: {
-                    display: "flex",
-                    gap: theme.spacing(2),
-                    flexWrap: "wrap"
-                  },
-                  children: [
-                    button1 && renderButton(button1),
-                    button2 && renderButton(button2)
-                  ]
-                }
-              )
-            ]
+            )
           }
         )
       ]
     }
   );
-};
-var ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-  "path",
-  {
-    d: "M15 18L9 12L15 6",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
-var ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-  "path",
-  {
-    d: "M9 18L15 12L9 6",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
-var Carousel = ({
-  children,
-  gap = 16,
-  maxWidth = 800,
-  showArrows = true,
-  showEdgeGradients = true,
-  cardWidth: cardWidthProp,
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
   className,
+  asChild = false,
   ...props
-}) => {
-  const scrollRef = useRef(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const maxHeight = useMaxHeight();
-  const displayMode = useDisplayMode();
-  const theme = useTheme();
-  const isFullscreen = displayMode === "fullscreen";
-  const getCardWidth = () => {
-    if (typeof cardWidthProp === "number") {
-      return cardWidthProp;
-    }
-    if (typeof cardWidthProp === "object") {
-      return isFullscreen ? cardWidthProp.fullscreen ?? 340 : cardWidthProp.inline ?? 220;
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      ),
+      ...props
     }
-    return isFullscreen ? 340 : 220;
-  };
-  const cardWidth = getCardWidth();
-  const checkScroll = () => {
-    const el = scrollRef.current;
-    if (!el) return;
-    setCanScrollLeft(el.scrollLeft > 0);
-    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
-  };
-  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 cardWidth2 = firstCard.offsetWidth;
-    const scrollAmount = cardWidth2 + 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);
-  };
-  return /* @__PURE__ */ jsxs(
-    Box,
+  );
+}
+function SidebarGroupContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className,
-      sx: {
-        position: "relative",
-        width: "100%",
-        maxWidth: `${maxWidth}px`,
-        maxHeight: maxHeight ? `${maxHeight}px` : void 0
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Box, { sx: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-          Box,
-          {
-            ref: scrollRef,
-            onMouseDown: handleMouseDown,
-            onMouseMove: handleMouseMove,
-            onMouseUp: handleMouseUpOrLeave,
-            onMouseLeave: handleMouseUpOrLeave,
-            sx: {
-              display: "flex",
-              gap: `${gap}px`,
-              overflowX: "auto",
-              overflowY: "hidden",
-              scrollBehavior: isDragging ? "auto" : "smooth",
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              userSelect: "none",
-              cursor: isDragging ? "grabbing" : "grab",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
-            },
-            children: Children.map(children, (child) => /* @__PURE__ */ jsx(
-              Box,
-              {
-                sx: {
-                  flexShrink: 0,
-                  width: `${cardWidth}px`,
-                  "& > *": {
-                    width: "100%",
-                    maxWidth: "100%"
-                  }
-                },
-                children: child
-              }
-            ))
-          }
-        ) }),
-        showEdgeGradients && canScrollLeft && /* @__PURE__ */ jsx(
-          Box,
-          {
-            "aria-hidden": "true",
-            sx: {
-              position: "absolute",
-              top: 0,
-              bottom: 0,
-              left: 0,
-              width: "80px",
-              pointerEvents: "none",
-              background: `linear-gradient(to right, ${theme.palette.background.default} 0%, transparent 100%)`,
-              opacity: canScrollLeft ? 1 : 0,
-              transition: "opacity 0.2s ease",
-              zIndex: 1
-            }
-          }
-        ),
-        showEdgeGradients && canScrollRight && /* @__PURE__ */ jsx(
-          Box,
-          {
-            "aria-hidden": "true",
-            sx: {
-              position: "absolute",
-              top: 0,
-              bottom: 0,
-              right: 0,
-              width: "80px",
-              pointerEvents: "none",
-              background: `linear-gradient(to left, ${theme.palette.background.default} 0%, transparent 100%)`,
-              opacity: canScrollRight ? 1 : 0,
-              transition: "opacity 0.2s ease",
-              zIndex: 1
-            }
-          }
-        ),
-        showArrows && canScrollLeft && /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            "aria-label": "Previous",
-            onClick: () => scroll("left"),
-            sx: {
-              position: "absolute",
-              top: "50%",
-              left: theme.spacing(0.5),
-              transform: "translateY(-50%)",
-              width: 32,
-              height: 32,
-              backgroundColor: theme.palette.background.default,
-              boxShadow: theme.shadows[2],
-              zIndex: 2,
-              "&:hover": {
-                boxShadow: theme.shadows[3],
-                transform: "translateY(-50%) scale(1.05)"
-              },
-              "&:active": {
-                transform: "translateY(-50%) scale(0.95)"
-              },
-              transition: "all 0.2s ease"
-            },
-            children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
-          }
-        ),
-        showArrows && canScrollRight && /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            "aria-label": "Next",
-            onClick: () => scroll("right"),
-            sx: {
-              position: "absolute",
-              top: "50%",
-              right: theme.spacing(0.5),
-              transform: "translateY(-50%)",
-              width: 32,
-              height: 32,
-              backgroundColor: theme.palette.background.default,
-              boxShadow: theme.shadows[2],
-              zIndex: 2,
-              "&:hover": {
-                boxShadow: theme.shadows[3],
-                transform: "translateY(-50%) scale(1.05)"
-              },
-              "&:active": {
-                transform: "translateY(-50%) scale(0.95)"
-              },
-              transition: "all 0.2s ease"
-            },
-            children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-          }
-        )
-      ]
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
     }
   );
-};
-var baseThemeOptions = {
-  spacing: 4,
-  // 4px base unit
-  shape: {
-    borderRadius: 8
-    // Default border radius in pixels
-  },
-  typography: {
-    fontFamily: [
-      "-apple-system",
-      "BlinkMacSystemFont",
-      '"Segoe UI"',
-      "Roboto",
-      '"Helvetica Neue"',
-      "Arial",
-      "sans-serif"
-    ].join(",")
-  },
-  // Common breakpoints for responsive design
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 900,
-      lg: 1200,
-      xl: 1536
+}
+cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
     }
   }
-};
-var createBaseTheme = () => createTheme(baseThemeOptions);
-
-// src/themes/chatgpt.ts
-var lightPalette = {
-  mode: "light",
-  primary: {
-    main: "#f46c21",
-    dark: "#d45e1c",
-    light: "rgba(244, 108, 33, 0.9)",
-    contrastText: "#ffffff"
-  },
-  secondary: {
-    main: "#5d5d5d",
-    contrastText: "#ffffff"
-  },
-  error: {
-    main: "#e02e2a",
-    contrastText: "#ffffff"
-  },
-  warning: {
-    main: "#e25507",
-    contrastText: "#ffffff"
-  },
-  info: {
-    main: "#0285ff",
-    contrastText: "#ffffff"
-  },
-  success: {
-    main: "#008635",
-    contrastText: "#ffffff"
-  },
-  background: {
-    default: "#ffffff",
-    paper: "#f3f3f3"
-  },
-  text: {
-    primary: "#0d0d0d",
-    secondary: "#5d5d5d",
-    disabled: "#8f8f8f"
-  },
-  divider: "rgba(0, 0, 0, 0.15)",
-  action: {
-    hover: "rgba(0, 0, 0, 0.04)",
-    selected: "rgba(0, 0, 0, 0.08)",
-    disabled: "#8f8f8f",
-    disabledBackground: "rgba(0, 0, 0, 0.12)"
-  },
-  grey: {
-    50: "#f3f3f3",
-    100: "#e8e8e8",
-    200: "rgba(0, 0, 0, 0.05)",
-    300: "rgba(0, 0, 0, 0.15)",
-    400: "#8f8f8f",
-    500: "#5d5d5d",
-    900: "#0d0d0d"
+);
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
   }
-};
-var darkPalette = {
-  mode: "dark",
-  primary: {
-    main: "#f46c21",
-    dark: "#d45e1c",
-    light: "rgba(244, 108, 33, 0.9)",
-    contrastText: "#ffffff"
-  },
-  secondary: {
-    main: "#cdcdcd",
-    contrastText: "#212121"
-  },
-  error: {
-    main: "#ff8583",
-    contrastText: "#212121"
-  },
-  warning: {
-    main: "#ff9e6c",
-    contrastText: "#212121"
-  },
-  info: {
-    main: "#0285ff",
-    contrastText: "#ffffff"
-  },
-  success: {
-    main: "#40c977",
-    contrastText: "#212121"
-  },
-  background: {
-    default: "#212121",
-    paper: "#414141"
-  },
-  text: {
-    primary: "#ffffff",
-    secondary: "#cdcdcd",
-    disabled: "#afafaf"
-  },
-  divider: "rgba(0, 0, 0, 0.15)",
-  action: {
-    hover: "rgba(255, 255, 255, 0.08)",
-    selected: "rgba(255, 255, 255, 0.16)",
-    disabled: "#afafaf",
-    disabledBackground: "rgba(255, 255, 255, 0.12)"
-  },
-  grey: {
-    50: "#414141",
-    100: "#303030",
-    200: "rgba(0, 0, 0, 0.05)",
-    300: "rgba(0, 0, 0, 0.15)",
-    400: "#afafaf",
-    500: "#cdcdcd",
-    900: "#ffffff",
-    800: "#212121"
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
   }
-};
-var typography = {
-  fontFamily: [
-    "-apple-system",
-    "BlinkMacSystemFont",
-    '"Segoe UI"',
-    "Roboto",
-    '"Helvetica Neue"',
-    "Arial",
-    "sans-serif"
-  ].join(","),
-  fontSize: 16,
-  fontWeightLight: 300,
-  fontWeightRegular: 400,
-  fontWeightMedium: 500,
-  fontWeightBold: 600,
-  h1: {
-    fontSize: "1.25rem",
-    fontWeight: 600,
-    lineHeight: 1.25
-  },
-  h2: {
-    fontSize: "1.125rem",
-    fontWeight: 600,
-    lineHeight: 1.25
-  },
-  h3: {
-    fontSize: "1rem",
-    fontWeight: 600,
-    lineHeight: 1.25
-  },
-  h4: {
-    fontSize: "1rem",
-    fontWeight: 500,
-    lineHeight: 1.25
-  },
-  h5: {
-    fontSize: "0.875rem",
-    fontWeight: 600,
-    lineHeight: 1.25
-  },
-  h6: {
-    fontSize: "0.75rem",
-    fontWeight: 600,
-    lineHeight: 1.25
-  },
-  body1: {
-    fontSize: "1rem",
-    lineHeight: 1.5
-  },
-  body2: {
-    fontSize: "0.875rem",
-    lineHeight: 1.5
-  },
-  button: {
-    fontSize: "0.875rem",
-    fontWeight: 500,
-    lineHeight: 1.25,
-    textTransform: "none"
-  },
-  caption: {
-    fontSize: "0.75rem",
-    lineHeight: 1.5
-  },
-  overline: {
-    fontSize: "0.75rem",
-    fontWeight: 500,
-    lineHeight: 1.5,
-    textTransform: "uppercase"
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
   }
-};
-var spacing = 4;
-var shape = {
-  borderRadius: 8
-};
-var shadows = [
-  "none",
-  "0px 1px 2px rgba(0, 0, 0, 0.05)",
-  "0px 2px 6px rgba(0, 0, 0, 0.06)",
-  "0px 4px 12px rgba(0, 0, 0, 0.1)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)",
-  "0px 8px 24px rgba(0, 0, 0, 0.12)"
-];
-var components = {
-  MuiButton: {
-    styleOverrides: {
-      root: {
-        borderRadius: "0.5rem",
-        padding: "0.375rem 1rem",
-        fontSize: "0.875rem",
-        fontWeight: 500,
-        textTransform: "none",
-        transition: "all 0.2s ease"
-      },
-      contained: {
-        boxShadow: "none",
-        "&:hover": {
-          boxShadow: "none"
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
         }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label2 = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label2.displayName = LabelPrimitive.Root.displayName;
+function Conversation({
+  children,
+  screenWidth,
+  displayMode,
+  appName = "ChatGPT",
+  appIcon,
+  userMessage = "Show me some interesting places to visit."
+}) {
+  const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
+  if (displayMode === "fullscreen") {
+    return /* @__PURE__ */ jsx(SidebarInset, { className: "flex flex-col bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children }) });
+  }
+  return /* @__PURE__ */ jsxs(SidebarInset, { className: "flex flex-col bg-background", children: [
+    /* @__PURE__ */ jsx("header", { className: "h-12 border-b border-border bg-background flex items-center px-4 text-lg", children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "ChatGPT" }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col flex-1 mx-auto 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: [
+            /* @__PURE__ */ jsxs(
+              "article",
+              {
+                className: "text-foreground 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 pt-12 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: "bg-secondary text-secondary-foreground relative rounded-[18px] px-4 py-3 max-w-[70%]", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: userMessage }) }) })
+                    }
+                  ) }) }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "article",
+              {
+                className: "text-foreground 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: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-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 bg-primary flex items-center justify-center text-primary-foreground font-medium text-xs", 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__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "w-full overflow-x-auto",
+                              displayMode === "pip" && "fixed bottom-20 right-6 z-50 w-80 rounded-xl shadow-xl border bg-card p-4 overflow-x-hidden"
+                            ),
+                            children
+                          }
+                        ) })
+                      }
+                    )
+                  ] }) }) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("footer", { className: "bg-background", 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",
+              disabled: true,
+              placeholder: "Message ChatGPT",
+              className: "w-full bg-secondary text-secondary-foreground placeholder:text-muted-foreground rounded-3xl px-5 py-3 pr-12 outline-none"
+            }
+          ) }) }) })
+        ]
       }
-    }
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: {
-        borderRadius: "0.75rem",
-        overflow: "hidden"
+    )
+  ] });
+}
+
+// src/components/simulator/mock-openai.ts
+var MockOpenAI = class {
+  constructor() {
+    __publicField(this, "theme", "light");
+    __publicField(this, "userAgent", {
+      device: { type: "desktop" },
+      capabilities: {
+        hover: true,
+        touch: false
       }
-    }
-  },
-  MuiPaper: {
-    styleOverrides: {
-      rounded: {
-        borderRadius: "0.75rem"
+    });
+    __publicField(this, "locale", "en-US");
+    __publicField(this, "maxHeight", 600);
+    __publicField(this, "displayMode", "inline");
+    __publicField(this, "safeArea", {
+      insets: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
       }
+    });
+    __publicField(this, "toolInput", {});
+    __publicField(this, "toolOutput", null);
+    __publicField(this, "toolResponseMetadata", null);
+    __publicField(this, "widgetState", null);
+  }
+  async callTool(name, args) {
+    console.log("Mock callTool:", name, args);
+    return { result: JSON.stringify({ success: true }) };
+  }
+  async sendFollowUpMessage(args) {
+    console.log("Mock sendFollowUpMessage:", args.prompt);
+  }
+  openExternal(payload) {
+    console.log("Mock openExternal:", payload.href);
+    window.open(payload.href, "_blank");
+  }
+  async requestDisplayMode(args) {
+    this.setDisplayMode(args.mode);
+    return { mode: args.mode };
+  }
+  async setWidgetState(state) {
+    this.widgetState = state;
+    this.emitUpdate({ widgetState: state });
+  }
+  setTheme(theme) {
+    this.theme = theme;
+    this.emitUpdate({ theme });
+  }
+  setDisplayMode(displayMode) {
+    this.displayMode = displayMode;
+    this.emitUpdate({ displayMode });
+  }
+  emitUpdate(globals) {
+    if (typeof window !== "undefined") {
+      const event = new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
+        detail: { globals }
+      });
+      window.dispatchEvent(event);
     }
   }
 };
-var chatgptLightTheme = createTheme({
-  ...baseThemeOptions,
-  palette: lightPalette,
-  typography,
-  spacing,
-  shape,
-  shadows,
-  components
-});
-var chatgptDarkTheme = createTheme({
-  ...baseThemeOptions,
-  palette: darkPalette,
-  typography,
-  spacing,
-  shape,
-  shadows,
-  components
-});
-var getChatGPTTheme = (mode) => {
-  return mode === "dark" ? chatgptDarkTheme : chatgptLightTheme;
-};
-
-// src/themes/index.ts
-var getCurrentPlatform = () => {
-  return "chatgpt";
-};
-var platformThemes = {
-  chatgpt: getChatGPTTheme
-  // Add more platforms here:
-  // gemini: getGeminiTheme,
-  // claude: getClaudeTheme,
-};
-var getTheme = (mode) => {
-  const platform = getCurrentPlatform();
-  const themeGetter = platformThemes[platform];
-  if (!themeGetter) {
-    console.warn(`Unknown platform "${platform}", falling back to chatgpt theme`);
-    return getChatGPTTheme(mode);
+function initMockOpenAI() {
+  if (typeof window !== "undefined") {
+    const mock = new MockOpenAI();
+    window.openai = mock;
+    return mock;
   }
-  return themeGetter(mode);
-};
-var getLightTheme = () => getTheme("light");
-var getDarkTheme = () => getTheme("dark");
-function GenAI(renderFn) {
-  const GenAIComponent = (props = {}) => {
-    const maxHeight = useMaxHeight();
-    const detectedColorScheme = useColorScheme();
-    const {
-      className,
-      maxWidth = 800,
-      mode: overrideMode,
-      enableCssBaseline = true,
-      ...rest
-    } = props;
-    const colorScheme = overrideMode || detectedColorScheme || "light";
-    const theme = getTheme(colorScheme);
-    return /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
-      enableCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          className,
-          sx: {
-            maxWidth: `${maxWidth}px`,
-            maxHeight: maxHeight ? `${maxHeight}px` : void 0
-          },
-          ...rest,
-          children: renderFn({ maxHeight, colorScheme })
-        }
-      )
-    ] });
-  };
-  GenAIComponent.displayName = "GenAI";
-  return GenAIComponent;
+  return new MockOpenAI();
 }
 function ChatGPTSimulator({
   children,
-  displayMode: initialDisplayMode = "inline",
-  colorScheme: initialColorScheme = "dark",
-  toolInput = {},
-  toolOutput = null,
-  widgetState: initialWidgetState = null,
-  userMessage = "Show me some recommendations",
-  showControls = true,
-  uiSimulations,
-  initialUISimulation
+  appName,
+  appIcon,
+  userMessage
 }) {
-  const [displayMode, setDisplayMode] = useState(initialDisplayMode);
-  const [widgetState, setWidgetStateInternal] = useState(
-    initialWidgetState
-  );
-  const [bodyWidth, setBodyWidth] = useState("100%");
-  const [selectedUISimulation, setSelectedUISimulation] = useState(
-    initialUISimulation || uiSimulations?.[0] || ""
-  );
-  const [viewportHeight, setViewportHeight] = useState(window.innerHeight);
-  const [colorScheme, setColorScheme] = useState(initialColorScheme);
-  const theme = getTheme(colorScheme);
+  const [theme, setTheme] = useState("dark");
+  const [displayMode, setDisplayMode] = useState("inline");
+  const [screenWidth, setScreenWidth] = useState("full");
+  const mock = useMemo(() => initMockOpenAI(), []);
   useEffect(() => {
-    const handleSetGlobals = (event) => {
-      const customEvent = event;
-      if (customEvent.detail?.globals?.colorScheme) {
-        setColorScheme(customEvent.detail.globals.colorScheme);
+    return () => {
+      if (typeof window !== "undefined") {
+        delete window.openai;
       }
     };
-    window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobals);
-    return () => window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobals);
-  }, []);
-  useEffect(() => {
-    const handleResize = () => {
-      setViewportHeight(window.innerHeight);
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
   }, []);
   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]);
-  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);
+    if (mock) {
+      mock.setTheme(theme);
     }
-    return children;
-  };
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: {
-        minHeight: "100vh",
-        width: "100vw",
-        display: "flex",
-        fontFamily: theme.typography.fontFamily,
-        backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary,
-        boxSizing: "border-box",
-        "@media (max-width: 768px)": {
-          flexDirection: "column"
-        }
-      },
-      children: [
-        showControls && /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              width: "250px",
-              flexShrink: 0,
-              padding: theme.spacing(5),
-              display: "flex",
-              flexDirection: "column",
-              gap: theme.spacing(5),
-              overflowY: "auto",
-              backgroundColor: theme.palette.mode === "light" ? theme.palette.background.paper : theme.palette.background.default,
-              borderRight: `1px solid ${theme.palette.divider}`,
-              boxSizing: "border-box",
-              "@media (max-width: 768px)": {
-                width: "100%",
-                borderRight: "none",
-                borderBottom: `1px solid ${theme.palette.divider}`,
-                padding: theme.spacing(4)
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, children: "Controls" }) }),
-              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: theme.spacing(3) }, children: [
-                uiSimulations && uiSimulations.length > 0 && /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", children: [
-                  /* @__PURE__ */ jsx(InputLabel, { children: "App UI" }),
-                  /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      value: selectedUISimulation,
-                      onChange: (e) => setSelectedUISimulation(e.target.value),
-                      label: "App UI",
-                      children: uiSimulations.map((simulation) => /* @__PURE__ */ jsx(MenuItem, { value: simulation, children: simulation }, simulation))
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", children: [
-                  /* @__PURE__ */ jsx(InputLabel, { children: "Color Scheme" }),
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      value: colorScheme,
-                      onChange: (e) => setColorScheme(e.target.value),
-                      label: "Color Scheme",
-                      children: [
-                        /* @__PURE__ */ jsx(MenuItem, { value: "light", children: "Light" }),
-                        /* @__PURE__ */ jsx(MenuItem, { value: "dark", children: "Dark" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", children: [
-                  /* @__PURE__ */ jsx(InputLabel, { children: "Display Mode" }),
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      value: displayMode,
-                      onChange: (e) => setDisplayMode(e.target.value),
-                      label: "Display Mode",
-                      children: [
-                        /* @__PURE__ */ jsx(MenuItem, { value: "inline", children: "Inline" }),
-                        /* @__PURE__ */ jsx(MenuItem, { value: "fullscreen", children: "Fullscreen" }),
-                        /* @__PURE__ */ jsx(MenuItem, { value: "pip", children: "Picture-in-Picture" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", children: [
-                  /* @__PURE__ */ jsx(InputLabel, { children: "Body Width" }),
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      value: bodyWidth,
-                      onChange: (e) => setBodyWidth(e.target.value),
-                      label: "Body Width",
-                      children: [
-                        /* @__PURE__ */ jsx(MenuItem, { value: "100%", children: "100% (Full)" }),
-                        /* @__PURE__ */ jsx(MenuItem, { value: "1024px", children: "1024px (Laptop)" }),
-                        /* @__PURE__ */ jsx(MenuItem, { value: "768px", children: "768px (Tablet)" }),
-                        /* @__PURE__ */ jsx(MenuItem, { value: "425px", children: "425px (Mobile L)" }),
-                        /* @__PURE__ */ jsx(MenuItem, { value: "320px", children: "320px (Mobile S)" })
-                      ]
-                    }
-                  )
-                ] })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              flex: 1,
-              minWidth: 0,
-              display: "flex",
-              flexDirection: "column",
-              overflowY: "auto",
-              padding: isFullscreen ? 0 : `${theme.spacing(4)} 0 ${theme.spacing(4)} ${theme.spacing(6)}`,
-              position: "relative",
-              height: isFullscreen ? "100vh" : "auto",
-              boxSizing: "border-box"
-            },
-            children: [
-              isFullscreen && /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  onClick: () => setDisplayMode("inline"),
-                  "aria-label": "Exit fullscreen",
-                  sx: {
-                    position: "absolute",
-                    top: theme.spacing(4),
-                    left: theme.spacing(4),
-                    width: 40,
-                    height: 40,
-                    backgroundColor: theme.palette.background.paper,
-                    zIndex: 10,
-                    "&:hover": {
-                      backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[200] : theme.palette.grey[800]
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(CloseIcon, {})
-                }
-              ),
-              !isFullscreen && /* @__PURE__ */ jsx(Box, { sx: { mb: theme.spacing(4) }, children: /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { fontWeight: 600, margin: 0 }, children: "ChatGPT" }) }),
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  sx: {
-                    maxWidth: bodyWidth === "100%" ? "48rem" : bodyWidth,
-                    mx: "auto",
-                    flex: 1,
-                    position: "relative",
-                    display: "flex",
-                    width: "100%",
-                    minWidth: 0,
-                    flexDirection: "column",
-                    boxSizing: "border-box"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", maxWidth: "100%", flexDirection: "column", flexGrow: 1, minWidth: 0, boxSizing: "border-box" }, children: [
-                      !isFullscreen && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          Box,
-                          {
-                            sx: {
-                              display: "flex",
-                              alignItems: "flex-start",
-                              justifyContent: "flex-end",
-                              marginLeft: "auto",
-                              marginRight: theme.spacing(6),
-                              maxWidth: "70%",
-                              "@media (max-width: 768px)": {
-                                maxWidth: "85%"
-                              }
-                            },
-                            children: /* @__PURE__ */ jsx(
-                              Box,
-                              {
-                                sx: {
-                                  flex: "0 1 auto",
-                                  padding: `${theme.spacing(2)} ${theme.spacing(4)}`,
-                                  borderRadius: theme.spacing(3),
-                                  lineHeight: 1.5,
-                                  fontSize: theme.typography.body1.fontSize,
-                                  overflowWrap: "break-word",
-                                  wordBreak: "break-word",
-                                  minWidth: 0,
-                                  backgroundColor: theme.palette.grey[100],
-                                  color: theme.palette.text.primary,
-                                  boxSizing: "border-box"
-                                },
-                                children: userMessage
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Box,
-                          {
-                            sx: {
-                              minHeight: "32px",
-                              position: "relative",
-                              display: "flex",
-                              width: "100%",
-                              minWidth: 0,
-                              flexDirection: "column",
-                              alignItems: "flex-end",
-                              gap: theme.spacing(2),
-                              textAlign: "start",
-                              wordBreak: "break-word",
-                              whiteSpace: "normal",
-                              boxSizing: "border-box"
-                            },
-                            children: /* @__PURE__ */ jsx(
-                              Box,
-                              {
-                                sx: {
-                                  display: "flex",
-                                  width: "100%",
-                                  minWidth: 0,
-                                  flexDirection: "column",
-                                  gap: theme.spacing(1),
-                                  "&:empty": { display: "none" },
-                                  "&:first-of-type": { pt: "1px" },
-                                  boxSizing: "border-box"
-                                },
-                                children: /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", minWidth: 0, wordBreak: "break-word", boxSizing: "border-box" }, children: [
-                                  /* @__PURE__ */ jsxs(
-                                    Box,
-                                    {
-                                      sx: {
-                                        color: theme.palette.text.secondary,
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: theme.spacing(2),
-                                        margin: `${theme.spacing(4)} 0`,
-                                        fontSize: theme.typography.body2.fontSize,
-                                        fontWeight: 500,
-                                        opacity: 0.7
-                                      },
-                                      children: [
-                                        /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: theme.typography.body1.fontSize, lineHeight: 1 }, children: "\u2708\uFE0F" }),
-                                        /* @__PURE__ */ jsx(Box, { component: "span", sx: { lineHeight: 1 }, children: "Splorin" })
-                                      ]
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(
-                                    Box,
-                                    {
-                                      sx: {
-                                        overflow: "hidden",
-                                        width: "100%",
-                                        minWidth: 0,
-                                        boxSizing: "border-box"
-                                      },
-                                      children: renderChildren()
-                                    }
-                                  )
-                                ] })
-                              }
-                            )
-                          }
-                        )
-                      ] }),
-                      isFullscreen && /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          sx: {
-                            flex: 1,
-                            display: "flex",
-                            flexDirection: "column",
-                            width: "100%",
-                            minWidth: 0,
-                            height: "100%",
-                            overflowY: "auto",
-                            paddingBottom: "80px",
-                            boxSizing: "border-box"
-                          },
-                          children: renderChildren()
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        sx: {
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          margin: `${theme.spacing(4)} 0`,
-                          padding: `0 ${theme.spacing(10)} 0 ${theme.spacing(4)}`,
-                          display: "flex",
-                          justifyContent: "center",
-                          pointerEvents: "none",
-                          boxSizing: "border-box"
-                        },
-                        children: /* @__PURE__ */ jsx(
-                          TextField,
-                          {
-                            placeholder: "Message ChatGPT",
-                            disabled: true,
-                            sx: {
-                              pointerEvents: "auto",
-                              width: "100%",
-                              maxWidth: "800px",
-                              boxSizing: "border-box",
-                              "& .MuiOutlinedInput-root": {
-                                borderRadius: theme.spacing(8),
-                                backgroundColor: theme.palette.grey[100],
-                                "& fieldset": {
-                                  borderColor: theme.palette.mode === "light" ? theme.palette.grey[300] : theme.palette.grey[700]
-                                },
-                                "&.Mui-disabled": {
-                                  cursor: "not-allowed",
-                                  opacity: 0.6
-                                }
-                              },
-                              "& .MuiInputBase-input::placeholder": {
-                                color: theme.palette.text.secondary,
-                                opacity: 0.7
-                              }
-                            }
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
+  }, [mock, theme]);
+  useEffect(() => {
+    if (mock) {
+      mock.setDisplayMode(displayMode);
     }
-  ) });
+  }, [mock, displayMode]);
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxs(SidebarProvider, { defaultOpen: true, children: [
+    /* @__PURE__ */ jsx(Sidebar, { children: /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+      /* @__PURE__ */ jsx(SidebarGroupLabel, { className: "text-md", children: "Controls" }),
+      /* @__PURE__ */ jsxs(SidebarGroupContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "app-ui-select", className: "text-xs", children: "App UI" }),
+          /* @__PURE__ */ jsxs(Select, { value: "carousel", onValueChange: () => {
+          }, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "app-ui-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "carousel", children: "Carousel" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "theme-select", className: "text-xs", children: "Color Scheme" }),
+          /* @__PURE__ */ jsxs(Select, { value: theme, onValueChange: (value) => setTheme(value), children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "theme-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "light", children: "Light" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "dark", children: "Dark" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "display-mode-select", className: "text-xs", children: "Display Mode" }),
+          /* @__PURE__ */ jsxs(Select, { value: displayMode, onValueChange: (value) => setDisplayMode(value), children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "display-mode-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "inline", children: "Inline" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "pip", children: "Picture in Picture" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "fullscreen", children: "Fullscreen" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "screen-width-select", className: "text-xs", children: "Body Width" }),
+          /* @__PURE__ */ jsxs(Select, { value: screenWidth, onValueChange: (value) => setScreenWidth(value), children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "screen-width-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "mobile-s", children: "Mobile S (375px)" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "mobile-l", children: "Mobile L (425px)" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "tablet", children: "Tablet (768px)" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "full", children: "100% (Full)" })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(
+      Conversation,
+      {
+        screenWidth,
+        displayMode,
+        appName,
+        appIcon,
+        userMessage,
+        children
+      }
+    )
+  ] }) });
 }
 
-export { Card, Carousel, ChatGPTSimulator, GenAI, PlatformProvider, baseThemeOptions, chatgptDarkTheme, chatgptLightTheme, chatgptPlatform, createBaseTheme, createPlatformRegistry, getChatGPTTheme, getCurrentPlatform, getDarkTheme, getLightTheme, getTheme, useColorScheme, useDisplayMode, useMaxHeight, usePlatform, usePlatformGlobal, useRequestDisplayMode, useWidgetProps, useWidgetState };
+export { ChatGPTSimulator, SCREEN_WIDTHS, SET_GLOBALS_EVENT_TYPE, SetGlobalsEvent, ThemeProvider, cn, initMockOpenAI, useDisplayMode, useIsMobile, useMaxHeight, useOpenAiGlobal, useTheme, useThemeContext, useWidgetState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map