sunpeak 0.9.6 → 0.9.10

package/dist/{simulator-url-BStCoFTv.cjs → simulator-url-oevkxbU4.cjs}

@@ -57,19 +57,38 @@ class OpenAiProvider {
     };
   }
   getAPI() {
-    var _a2, _b2, _c, _d, _e, _f, _g;
     if (typeof window === "undefined" || !window.openai) {
       return null;
     }
-    const api = window.openai;
     return {
-      callTool: (_a2 = api.callTool) == null ? void 0 : _a2.bind(api),
-      sendFollowUpMessage: (_b2 = api.sendFollowUpMessage) == null ? void 0 : _b2.bind(api),
-      openExternal: (_c = api.openExternal) == null ? void 0 : _c.bind(api),
-      requestDisplayMode: (_d = api.requestDisplayMode) == null ? void 0 : _d.bind(api),
-      requestModal: (_e = api.requestModal) == null ? void 0 : _e.bind(api),
-      notifyIntrinsicHeight: (_f = api.notifyIntrinsicHeight) == null ? void 0 : _f.bind(api),
-      setWidgetState: (_g = api.setWidgetState) == null ? void 0 : _g.bind(api)
+      callTool: (...args) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = window.openai) == null ? void 0 : _a2.callTool) == null ? void 0 : _b2.call(_a2, ...args);
+      },
+      sendFollowUpMessage: (...args) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = window.openai) == null ? void 0 : _a2.sendFollowUpMessage) == null ? void 0 : _b2.call(_a2, ...args);
+      },
+      openExternal: (...args) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = window.openai) == null ? void 0 : _a2.openExternal) == null ? void 0 : _b2.call(_a2, ...args);
+      },
+      requestDisplayMode: (...args) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = window.openai) == null ? void 0 : _a2.requestDisplayMode) == null ? void 0 : _b2.call(_a2, ...args);
+      },
+      requestModal: (...args) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = window.openai) == null ? void 0 : _a2.requestModal) == null ? void 0 : _b2.call(_a2, ...args);
+      },
+      notifyIntrinsicHeight: (...args) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = window.openai) == null ? void 0 : _a2.notifyIntrinsicHeight) == null ? void 0 : _b2.call(_a2, ...args);
+      },
+      setWidgetState: (...args) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = window.openai) == null ? void 0 : _a2.setWidgetState) == null ? void 0 : _b2.call(_a2, ...args);
+      }
     };
   }
 }
@@ -172,8 +191,17 @@ function useWidgetState(defaultState) {
     }
     return typeof defaultState === "function" ? defaultState() : defaultState ?? null;
   });
+  const hasSentInitialState = React.useRef(false);
   React.useEffect(() => {
-    _setWidgetState(widgetStateFromProvider);
+    if (!hasSentInitialState.current && widgetStateFromProvider == null && widgetState != null && (api == null ? void 0 : api.setWidgetState)) {
+      hasSentInitialState.current = true;
+      api.setWidgetState(widgetState);
+    }
+  }, [api, widgetState, widgetStateFromProvider]);
+  React.useEffect(() => {
+    if (widgetStateFromProvider != null) {
+      _setWidgetState(widgetStateFromProvider);
+    }
   }, [widgetStateFromProvider]);
   const setWidgetState = React.useCallback(
     (state) => {
@@ -5625,7 +5653,7 @@ const useEscCloseStack = (listening, cb) => {
   }, [id, listening, latestCallback]);
 };
 const __vite_import_meta_env__ = { "DEV": false, "MODE": "production" };
-const META_ENV = typeof { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("simulator-url-BStCoFTv.cjs", document.baseURI).href } !== "undefined" ? __vite_import_meta_env__ : void 0;
+const META_ENV = typeof { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("simulator-url-oevkxbU4.cjs", document.baseURI).href } !== "undefined" ? __vite_import_meta_env__ : void 0;
 const NODE_ENV = typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) ? (_b = process.env) == null ? void 0 : _b.NODE_ENV : "production";
 const isDev = NODE_ENV === "development" || !!(META_ENV == null ? void 0 : META_ENV.DEV);
 const isJSDomLike = typeof navigator !== "undefined" && /(jsdom|happy-dom)/i.test(navigator.userAgent) || typeof globalThis.happyDOM === "object";
@@ -7369,9 +7397,34 @@ const Segment = ({ children, ...restProps }) => {
   return jsxRuntime.jsx(Item2, { className: s.SegmentedControlOption, ...restProps, onPointerEnter: handlePressableMouseEnter, children: jsxRuntime.jsx("span", { className: "relative", children }) });
 };
 SegmentedControl.Option = Segment;
+const DEFAULT_SIDEBAR_WIDTH = 224;
 function SimpleSidebar({ children, controls }) {
   const [isDrawerOpen, setIsDrawerOpen] = React__namespace.useState(false);
+  const [sidebarWidth, setSidebarWidth] = React__namespace.useState(DEFAULT_SIDEBAR_WIDTH);
+  const [isResizing, setIsResizing] = React__namespace.useState(false);
+  const handleMouseDown = React__namespace.useCallback((e) => {
+    e.preventDefault();
+    setIsResizing(true);
+  }, []);
+  React__namespace.useEffect(() => {
+    if (!isResizing) return;
+    const handleMouseMove = (e) => {
+      const maxWidth = Math.floor(window.innerWidth / 3);
+      const newWidth = Math.min(maxWidth, Math.max(DEFAULT_SIDEBAR_WIDTH, e.clientX));
+      setSidebarWidth(newWidth);
+    };
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sunpeak-simulator-root flex h-screen w-full overflow-hidden relative", children: [
+    isResizing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 cursor-col-resize" }),
     isDrawerOpen && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -7383,50 +7436,60 @@ function SimpleSidebar({ children, controls }) {
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
         className: `
-          w-56 flex flex-col border-r border-subtle bg-sidebar
-          md:relative md:z-auto
+          relative flex flex-col border-r border-subtle bg-sidebar
+          md:z-auto
           max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-[100]
-          max-md:transition-transform max-md:duration-300
+          max-md:transition-transform max-md:duration-300 max-md:!w-2/3
           ${isDrawerOpen ? "max-md:translate-x-0" : "max-md:-translate-x-full"}
         `,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between sticky top-0 bg-sidebar z-10 py-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold", children: "Controls" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => setIsDrawerOpen(false),
-                className: "md:hidden text-secondary hover:text-primary transition-colors p-1",
-                type: "button",
-                "aria-label": "Close sidebar",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        d: "M12 4L4 12M4 4L12 12",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ] }),
-          controls
-        ] }) }) })
+        style: { width: sidebarWidth },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between sticky top-0 bg-sidebar z-10 py-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold", children: "Controls" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => setIsDrawerOpen(false),
+                  className: "md:hidden text-secondary hover:text-primary transition-colors p-1",
+                  type: "button",
+                  "aria-label": "Close sidebar",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: "M12 4L4 12M4 4L12 12",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ] }),
+            controls
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onMouseDown: handleMouseDown,
+              className: "hidden md:block absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors"
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-auto relative", children: [
@@ -7520,9 +7583,11 @@ function SidebarTextarea({
   onFocus,
   onBlur,
   placeholder,
-  rows = 2,
+  maxRows = 8,
   error
 }) {
+  const contentRows = (value == null ? void 0 : value.split("\n").length) ?? 1;
+  const rows = Math.min(contentRows, maxRows);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Textarea,
@@ -7534,7 +7599,8 @@ function SidebarTextarea({
         placeholder,
         rows,
         size: "2xs",
-        className: "text-[10px] font-mono",
+        className: "text-[10px] font-mono resize-y [&>textarea]:!h-full [&>textarea]:!max-h-none [&>textarea]:!min-h-0",
+        style: { whiteSpace: "pre", overflowX: "auto", overflowWrap: "normal" },
         invalid: !!error
       }
     ),
@@ -8376,8 +8442,8 @@ class MockOpenAI {
     console.log("Mock notifyIntrinsicHeight:", height);
   }
   async setWidgetState(state) {
-    this.widgetState = state;
-    this.emitUpdate({ widgetState: state });
+    this.widgetState = { ...this.widgetState, ...state };
+    this.emitUpdate({ widgetState: this.widgetState });
   }
   setTheme(theme) {
     this.theme = theme;
@@ -8588,11 +8654,17 @@ function ChatGPTSimulator({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only initialize once
     []
   );
+  if (typeof window !== "undefined") {
+    window.openai = mock;
+    resetProviderCache();
+  }
   React.useEffect(() => {
     var _a2, _b2;
     if (selectedSim) {
       mock.toolInput = ((_a2 = selectedSim.callToolRequestParams) == null ? void 0 : _a2.arguments) ?? {};
-      mock.widgetState = selectedSim.widgetState ?? null;
+      if (selectedSim.widgetState !== void 0) {
+        mock.setWidgetStateExternal(selectedSim.widgetState);
+      }
       mock.toolOutput = ((_b2 = selectedSim.callToolResult) == null ? void 0 : _b2.structuredContent) ?? null;
     }
   }, [selectedSimulationName, selectedSim, mock]);
@@ -8604,7 +8676,7 @@ function ChatGPTSimulator({
   const safeArea = useSafeArea();
   const view = useView();
   const toolInput = useToolInput();
-  const [widgetState] = useWidgetState();
+  const widgetState = useWidgetGlobal("widgetState");
   const toolResponseMetadata = useToolResponseMetadata();
   const toolOutput = useWidgetProps();
   const [toolInputJson, setToolInputJson] = React.useState(
@@ -8628,12 +8700,6 @@ function ChatGPTSimulator({
   const [toolResponseMetadataError, setToolResponseMetadataError] = React.useState("");
   const [widgetStateError, setWidgetStateError] = React.useState("");
   const [viewParamsError, setViewParamsError] = React.useState("");
-  React.useLayoutEffect(() => {
-    if (mock && typeof window !== "undefined") {
-      window.openai = mock;
-      resetProviderCache();
-    }
-  }, [mock]);
   React.useEffect(() => {
     if (mock) {
       mock.emitUpdate({
@@ -8722,11 +8788,15 @@ function ChatGPTSimulator({
     SimpleSidebar,
     {
       controls: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        simulationNames.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Simulation", children: /* @__PURE__ */ jsxRuntime.jsx(
+        simulationNames.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Simulation", children: /* @__PURE__ */ jsxRuntime.jsx(
           SidebarSelect,
           {
             value: selectedSimulationName,
-            onChange: (value) => setSelectedSimulationName(value),
+            onChange: (value) => {
+              const newSim = simulations[value];
+              mock.setWidgetStateExternal((newSim == null ? void 0 : newSim.widgetState) ?? null);
+              setSelectedSimulationName(value);
+            },
             options: simulationNames.map((name) => {
               const sim = simulations[name];
               const resourceTitle = sim.resource.title || sim.resource.name;
@@ -8751,237 +8821,254 @@ function ChatGPTSimulator({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Theme", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarToggle,
-          {
-            value: theme,
-            onChange: (value) => mock.setTheme(value),
-            options: [
-              { value: "light", label: "Light" },
-              { value: "dark", label: "Dark" }
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Display Mode", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarToggle,
-          {
-            value: displayMode,
-            onChange: (value) => {
-              const newMode = value;
-              if (isMobileWidth(screenWidth) && newMode === "pip") {
-                mock.setDisplayMode("fullscreen");
-              } else {
-                mock.setDisplayMode(newMode);
-              }
-            },
-            options: [
-              { value: "inline", label: "Inline" },
-              { value: "pip", label: "PiP" },
-              { value: "fullscreen", label: "Full" }
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Locale", children: /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarInput,
+        /* @__PURE__ */ jsxRuntime.jsx(SidebarCollapsibleControl, { label: "Runtime Globals", defaultCollapsed: false, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Theme", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarToggle,
             {
-              value: locale,
-              onChange: (value) => mock.setLocale(value),
-              placeholder: "e.g. en-US"
+              value: theme,
+              onChange: (value) => mock.setTheme(value),
+              options: [
+                { value: "light", label: "Light" },
+                { value: "dark", label: "Dark" }
+              ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max Height (PiP)", children: /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarInput,
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Display Mode", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarToggle,
             {
-              type: "number",
-              value: displayMode === "pip" && maxHeight !== void 0 ? String(maxHeight) : "",
+              value: displayMode,
               onChange: (value) => {
-                if (displayMode === "pip") {
-                  mock.setMaxHeight(value ? Number(value) : 480);
+                const newMode = value;
+                if (isMobileWidth(screenWidth) && newMode === "pip") {
+                  mock.setDisplayMode("fullscreen");
+                } else {
+                  mock.setDisplayMode(newMode);
                 }
               },
-              placeholder: displayMode === "pip" ? "480" : "-",
-              disabled: displayMode !== "pip"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "User Agent - Device", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarSelect,
-          {
-            value: (userAgent == null ? void 0 : userAgent.device.type) ?? "desktop",
-            onChange: (value) => {
-              const deviceType = value;
-              let capabilities;
-              switch (deviceType) {
-                case "mobile":
-                  capabilities = { hover: false, touch: true };
-                  break;
-                case "tablet":
-                  capabilities = { hover: false, touch: true };
-                  break;
-                case "desktop":
-                  capabilities = { hover: true, touch: false };
-                  break;
-                case "unknown":
-                default:
-                  capabilities = { hover: true, touch: false };
-                  break;
-              }
-              mock.setUserAgent({
-                ...userAgent,
-                device: { type: deviceType },
-                capabilities
-              });
-            },
-            options: [
-              { value: "mobile", label: "Mobile" },
-              { value: "tablet", label: "Tablet" },
-              { value: "desktop", label: "Desktop" },
-              { value: "unknown", label: "Unknown" }
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Capabilities", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarCheckbox,
-            {
-              checked: (userAgent == null ? void 0 : userAgent.capabilities.hover) ?? true,
-              onChange: (checked) => mock.setUserAgent({
-                ...userAgent,
-                device: (userAgent == null ? void 0 : userAgent.device) ?? { type: "desktop" },
-                capabilities: {
-                  hover: checked,
-                  touch: (userAgent == null ? void 0 : userAgent.capabilities.touch) ?? false
-                }
-              }),
-              label: "Hover"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarCheckbox,
-            {
-              checked: (userAgent == null ? void 0 : userAgent.capabilities.touch) ?? false,
-              onChange: (checked) => mock.setUserAgent({
-                ...userAgent,
-                device: (userAgent == null ? void 0 : userAgent.device) ?? { type: "desktop" },
-                capabilities: {
-                  hover: (userAgent == null ? void 0 : userAgent.capabilities.hover) ?? true,
-                  touch: checked
-                }
-              }),
-              label: "Touch"
+              options: [
+                { value: "inline", label: "Inline" },
+                { value: "pip", label: "PiP" },
+                { value: "fullscreen", label: "Full" }
+              ]
             }
-          )
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Safe Area Insets", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[9px] text-secondary", children: "Top" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Locale", children: /* @__PURE__ */ jsxRuntime.jsx(
               SidebarInput,
               {
-                type: "number",
-                value: String((safeArea == null ? void 0 : safeArea.insets.top) ?? 0),
-                onChange: (value) => mock.setSafeArea({
-                  insets: {
-                    ...safeArea == null ? void 0 : safeArea.insets,
-                    top: Number(value),
-                    bottom: (safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0,
-                    left: (safeArea == null ? void 0 : safeArea.insets.left) ?? 0,
-                    right: (safeArea == null ? void 0 : safeArea.insets.right) ?? 0
-                  }
-                })
+                value: locale,
+                onChange: (value) => mock.setLocale(value),
+                placeholder: "e.g. en-US"
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[9px] text-secondary", children: "Bottom" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max Height (PiP)", children: /* @__PURE__ */ jsxRuntime.jsx(
               SidebarInput,
               {
                 type: "number",
-                value: String((safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0),
-                onChange: (value) => mock.setSafeArea({
-                  insets: {
-                    ...safeArea == null ? void 0 : safeArea.insets,
-                    top: (safeArea == null ? void 0 : safeArea.insets.top) ?? 0,
-                    bottom: Number(value),
-                    left: (safeArea == null ? void 0 : safeArea.insets.left) ?? 0,
-                    right: (safeArea == null ? void 0 : safeArea.insets.right) ?? 0
+                value: displayMode === "pip" && maxHeight !== void 0 ? String(maxHeight) : "",
+                onChange: (value) => {
+                  if (displayMode === "pip") {
+                    mock.setMaxHeight(value ? Number(value) : 480);
                   }
-                })
+                },
+                placeholder: displayMode === "pip" ? "480" : "-",
+                disabled: displayMode !== "pip"
               }
-            )
+            ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[9px] text-secondary", children: "Left" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "User Agent - Device", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarSelect,
+            {
+              value: (userAgent == null ? void 0 : userAgent.device.type) ?? "desktop",
+              onChange: (value) => {
+                const deviceType = value;
+                let capabilities;
+                switch (deviceType) {
+                  case "mobile":
+                    capabilities = { hover: false, touch: true };
+                    break;
+                  case "tablet":
+                    capabilities = { hover: false, touch: true };
+                    break;
+                  case "desktop":
+                    capabilities = { hover: true, touch: false };
+                    break;
+                  case "unknown":
+                  default:
+                    capabilities = { hover: true, touch: false };
+                    break;
+                }
+                mock.setUserAgent({
+                  ...userAgent,
+                  device: { type: deviceType },
+                  capabilities
+                });
+              },
+              options: [
+                { value: "mobile", label: "Mobile" },
+                { value: "tablet", label: "Tablet" },
+                { value: "desktop", label: "Desktop" },
+                { value: "unknown", label: "Unknown" }
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Capabilities", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              SidebarInput,
+              SidebarCheckbox,
               {
-                type: "number",
-                value: String((safeArea == null ? void 0 : safeArea.insets.left) ?? 0),
-                onChange: (value) => mock.setSafeArea({
-                  insets: {
-                    ...safeArea == null ? void 0 : safeArea.insets,
-                    top: (safeArea == null ? void 0 : safeArea.insets.top) ?? 0,
-                    bottom: (safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0,
-                    left: Number(value),
-                    right: (safeArea == null ? void 0 : safeArea.insets.right) ?? 0
+                checked: (userAgent == null ? void 0 : userAgent.capabilities.hover) ?? true,
+                onChange: (checked) => mock.setUserAgent({
+                  ...userAgent,
+                  device: (userAgent == null ? void 0 : userAgent.device) ?? { type: "desktop" },
+                  capabilities: {
+                    hover: checked,
+                    touch: (userAgent == null ? void 0 : userAgent.capabilities.touch) ?? false
                   }
-                })
+                }),
+                label: "Hover"
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[9px] text-secondary", children: "Right" }),
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              SidebarInput,
+              SidebarCheckbox,
               {
-                type: "number",
-                value: String((safeArea == null ? void 0 : safeArea.insets.right) ?? 0),
-                onChange: (value) => mock.setSafeArea({
-                  insets: {
-                    ...safeArea == null ? void 0 : safeArea.insets,
-                    top: (safeArea == null ? void 0 : safeArea.insets.top) ?? 0,
-                    bottom: (safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0,
-                    left: (safeArea == null ? void 0 : safeArea.insets.left) ?? 0,
-                    right: Number(value)
+                checked: (userAgent == null ? void 0 : userAgent.capabilities.touch) ?? false,
+                onChange: (checked) => mock.setUserAgent({
+                  ...userAgent,
+                  device: (userAgent == null ? void 0 : userAgent.device) ?? { type: "desktop" },
+                  capabilities: {
+                    hover: (userAgent == null ? void 0 : userAgent.capabilities.hover) ?? true,
+                    touch: checked
                   }
-                })
+                }),
+                label: "Touch"
               }
             )
-          ] })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Safe Area Insets", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-secondary", children: "↑" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarInput,
+                {
+                  type: "number",
+                  value: String((safeArea == null ? void 0 : safeArea.insets.top) ?? 0),
+                  onChange: (value) => mock.setSafeArea({
+                    insets: {
+                      ...safeArea == null ? void 0 : safeArea.insets,
+                      top: Number(value),
+                      bottom: (safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0,
+                      left: (safeArea == null ? void 0 : safeArea.insets.left) ?? 0,
+                      right: (safeArea == null ? void 0 : safeArea.insets.right) ?? 0
+                    }
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-secondary", children: "↓" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarInput,
+                {
+                  type: "number",
+                  value: String((safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0),
+                  onChange: (value) => mock.setSafeArea({
+                    insets: {
+                      ...safeArea == null ? void 0 : safeArea.insets,
+                      top: (safeArea == null ? void 0 : safeArea.insets.top) ?? 0,
+                      bottom: Number(value),
+                      left: (safeArea == null ? void 0 : safeArea.insets.left) ?? 0,
+                      right: (safeArea == null ? void 0 : safeArea.insets.right) ?? 0
+                    }
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-secondary", children: "←" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarInput,
+                {
+                  type: "number",
+                  value: String((safeArea == null ? void 0 : safeArea.insets.left) ?? 0),
+                  onChange: (value) => mock.setSafeArea({
+                    insets: {
+                      ...safeArea == null ? void 0 : safeArea.insets,
+                      top: (safeArea == null ? void 0 : safeArea.insets.top) ?? 0,
+                      bottom: (safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0,
+                      left: Number(value),
+                      right: (safeArea == null ? void 0 : safeArea.insets.right) ?? 0
+                    }
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-secondary", children: "→" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarInput,
+                {
+                  type: "number",
+                  value: String((safeArea == null ? void 0 : safeArea.insets.right) ?? 0),
+                  onChange: (value) => mock.setSafeArea({
+                    insets: {
+                      ...safeArea == null ? void 0 : safeArea.insets,
+                      top: (safeArea == null ? void 0 : safeArea.insets.top) ?? 0,
+                      bottom: (safeArea == null ? void 0 : safeArea.insets.bottom) ?? 0,
+                      left: (safeArea == null ? void 0 : safeArea.insets.left) ?? 0,
+                      right: Number(value)
+                    }
+                  })
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "View Mode", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarSelect,
+            {
+              value: (view == null ? void 0 : view.mode) ?? "default",
+              onChange: (value) => mock.setView(
+                value === "default" ? null : {
+                  mode: value,
+                  params: view == null ? void 0 : view.params
+                }
+              ),
+              options: [
+                { value: "default", label: "Default (null)" },
+                { value: "modal", label: "Modal" }
+              ]
+            }
+          ) }),
+          view && view.mode !== "default" && /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "View Params (JSON)", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarTextarea,
+            {
+              value: viewParamsJson,
+              onChange: (json) => validateJSON(json, setViewParamsJson, setViewParamsError),
+              onFocus: () => setEditingField("viewParams"),
+              onBlur: () => commitJSON(viewParamsJson, setViewParamsError, (parsed) => {
+                if (view) {
+                  mock.setView({ ...view, params: parsed ?? void 0 });
+                }
+              }),
+              error: viewParamsError,
+              maxRows: 2
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarCollapsibleControl, { label: "Widget State (JSON)", defaultCollapsed: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarTextarea,
+            {
+              value: widgetStateJson,
+              onChange: (json) => validateJSON(json, setWidgetStateJson, setWidgetStateError),
+              onFocus: () => setEditingField("widgetState"),
+              onBlur: () => commitJSON(
+                widgetStateJson,
+                setWidgetStateError,
+                (parsed) => mock.setWidgetStateExternal(parsed)
+              ),
+              error: widgetStateError,
+              maxRows: 8
+            }
+          ) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "View Mode", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarSelect,
-          {
-            value: (view == null ? void 0 : view.mode) ?? "default",
-            onChange: (value) => mock.setView(
-              value === "default" ? null : {
-                mode: value,
-                params: view == null ? void 0 : view.params
-              }
-            ),
-            options: [
-              { value: "default", label: "Default (null)" },
-              { value: "modal", label: "Modal" }
-            ]
-          }
-        ) }),
-        view && view.mode !== "default" && /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "View Params (JSON)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarTextarea,
-          {
-            value: viewParamsJson,
-            onChange: (json) => validateJSON(json, setViewParamsJson, setViewParamsError),
-            onFocus: () => setEditingField("viewParams"),
-            onBlur: () => commitJSON(viewParamsJson, setViewParamsError, (parsed) => {
-              if (view) {
-                mock.setView({ ...view, params: parsed ?? void 0 });
-              }
-            }),
-            error: viewParamsError,
-            rows: 2
-          }
-        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(SidebarCollapsibleControl, { label: "Tool Input (JSON)", children: /* @__PURE__ */ jsxRuntime.jsx(
           SidebarTextarea,
           {
@@ -8994,7 +9081,7 @@ function ChatGPTSimulator({
               (parsed) => mock.setToolInput(parsed ?? {})
             ),
             error: toolInputError,
-            rows: 8
+            maxRows: 8
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(SidebarCollapsibleControl, { label: "Tool Output (JSON)", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9009,7 +9096,7 @@ function ChatGPTSimulator({
               (parsed) => mock.setToolOutput(parsed)
             ),
             error: toolOutputError,
-            rows: 8
+            maxRows: 8
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(SidebarCollapsibleControl, { label: "Tool Response Metadata (JSON)", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9024,22 +9111,7 @@ function ChatGPTSimulator({
               (parsed) => mock.setToolResponseMetadata(parsed)
             ),
             error: toolResponseMetadataError,
-            rows: 8
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarCollapsibleControl, { label: "Widget State (JSON)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarTextarea,
-          {
-            value: widgetStateJson,
-            onChange: (json) => validateJSON(json, setWidgetStateJson, setWidgetStateError),
-            onFocus: () => setEditingField("widgetState"),
-            onBlur: () => commitJSON(
-              widgetStateJson,
-              setWidgetStateError,
-              (parsed) => mock.setWidgetStateExternal(parsed)
-            ),
-            error: widgetStateError,
-            rows: 8
+            maxRows: 8
           }
         ) })
       ] }),
@@ -9130,4 +9202,4 @@ exports.useWidgetAPI = useWidgetAPI;
 exports.useWidgetGlobal = useWidgetGlobal;
 exports.useWidgetProps = useWidgetProps;
 exports.useWidgetState = useWidgetState;
-//# sourceMappingURL=simulator-url-BStCoFTv.cjs.map
+//# sourceMappingURL=simulator-url-oevkxbU4.cjs.map