sunpeak 0.9.3 → 0.9.8

package/dist/{simulator-url-CG8lAAC3.cjs → simulator-url-BpCa95pE.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(() => {
+    if (!hasSentInitialState.current && widgetStateFromProvider == null && widgetState != null && (api == null ? void 0 : api.setWidgetState)) {
+      hasSentInitialState.current = true;
+      api.setWidgetState(widgetState);
+    }
+  }, [api, widgetState, widgetStateFromProvider]);
   React.useEffect(() => {
-    _setWidgetState(widgetStateFromProvider);
+    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-CG8lAAC3.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-BpCa95pE.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";
@@ -7520,9 +7548,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 +7564,8 @@ function SidebarTextarea({
         placeholder,
         rows,
         size: "2xs",
-        className: "text-[10px] font-mono",
+        className: "text-[10px] font-mono resize-y",
+        style: { whiteSpace: "pre", overflowX: "auto", overflowWrap: "normal" },
         invalid: !!error
       }
     ),
@@ -7560,8 +7591,591 @@ const SCREEN_WIDTHS = {
   tablet: 768,
   full: 1024
 };
+const ALLOWED_SCRIPT_ORIGINS = [
+  "https://sandbox.sunpeakai.com",
+  "http://localhost",
+  "https://localhost",
+  "http://127.0.0.1",
+  "https://127.0.0.1"
+];
+const ALLOWED_PARENT_ORIGINS = [
+  "https://app.sunpeak.ai",
+  "http://localhost",
+  "https://localhost",
+  "http://127.0.0.1",
+  "https://127.0.0.1"
+];
+function escapeHtml(str) {
+  return str.replace(/[&<>"']/g, (c) => {
+    const entities = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    };
+    return entities[c] ?? c;
+  });
+}
+function isAllowedScriptSrc(src) {
+  if (!src) {
+    return false;
+  }
+  if (src.startsWith("/") && !src.startsWith("//")) {
+    return true;
+  }
+  if (!src.includes("://")) {
+    return false;
+  }
+  try {
+    const url = new URL(src);
+    if (url.origin === window.location.origin) {
+      return true;
+    }
+    if (url.hostname === "localhost" || url.hostname === "127.0.0.1") {
+      return true;
+    }
+    return ALLOWED_SCRIPT_ORIGINS.some((allowed) => {
+      try {
+        const allowedUrl = new URL(allowed);
+        return url.origin === allowedUrl.origin;
+      } catch {
+        return false;
+      }
+    });
+  } catch {
+    return false;
+  }
+}
+function generateCSP(csp, scriptSrc) {
+  let scriptOrigin = "";
+  try {
+    const scriptUrl = new URL(scriptSrc, window.location.origin);
+    scriptOrigin = scriptUrl.origin;
+  } catch {
+  }
+  const directives = [
+    "default-src 'self'",
+    // Allow inline scripts for the bridge, blob: for dynamic content, and the script origin
+    `script-src 'self' 'unsafe-inline' blob: ${scriptOrigin}`.trim(),
+    // Allow inline styles and data: URIs for images embedded in CSS
+    `style-src 'self' 'unsafe-inline' ${scriptOrigin}`.trim(),
+    // Disallow iframes within the iframe (no nesting)
+    "frame-src 'none'",
+    // Disallow form submissions
+    "form-action 'none'",
+    // Disallow changing the base URL
+    "base-uri 'self'"
+  ];
+  const connectSources = /* @__PURE__ */ new Set(["'self'"]);
+  if (scriptOrigin) {
+    connectSources.add(scriptOrigin);
+  }
+  if (csp == null ? void 0 : csp.connect_domains) {
+    for (const domain of csp.connect_domains) {
+      connectSources.add(domain);
+    }
+  }
+  directives.push(`connect-src ${Array.from(connectSources).join(" ")}`);
+  const resourceSources = /* @__PURE__ */ new Set(["'self'", "data:", "blob:"]);
+  if (scriptOrigin) {
+    resourceSources.add(scriptOrigin);
+  }
+  if (csp == null ? void 0 : csp.resource_domains) {
+    for (const domain of csp.resource_domains) {
+      resourceSources.add(domain);
+    }
+  }
+  const resourceList = Array.from(resourceSources).join(" ");
+  directives.push(`img-src ${resourceList}`);
+  directives.push(`font-src ${resourceList}`);
+  directives.push(`media-src ${resourceList}`);
+  return directives.join("; ");
+}
+function generateBridgeScript(allowedParentOrigins) {
+  const originsJson = JSON.stringify(allowedParentOrigins);
+  return `
+<script>
+(function() {
+  // Allowed origins that can send messages to this iframe
+  var allowedOrigins = ${originsJson};
+
+  // MessagePort for secure communication with parent (set during handshake)
+  var messagePort = null;
+
+  // Queue messages until port is ready
+  var messageQueue = [];
+
+  // Check if an origin is allowed (handles localhost with any port)
+  function isAllowedOrigin(origin) {
+    // Note: We no longer accept 'null' origin - MessageChannel provides security
+    for (var i = 0; i < allowedOrigins.length; i++) {
+      if (origin === allowedOrigins[i]) return true;
+      // Handle localhost/127.0.0.1 with any port
+      if (allowedOrigins[i].indexOf('localhost') !== -1 || allowedOrigins[i].indexOf('127.0.0.1') !== -1) {
+        try {
+          var allowed = new URL(allowedOrigins[i]);
+          var test = new URL(origin);
+          if (test.hostname === allowed.hostname && test.protocol === allowed.protocol) return true;
+        } catch (e) {}
+      }
+    }
+    return false;
+  }
+
+  // Send message via MessagePort (queues if port not ready)
+  function sendToParent(message) {
+    if (messagePort) {
+      messagePort.postMessage(message);
+    } else {
+      messageQueue.push(message);
+    }
+  }
+
+  // Flush queued messages once port is ready
+  function flushMessageQueue() {
+    while (messageQueue.length > 0) {
+      var msg = messageQueue.shift();
+      messagePort.postMessage(msg);
+    }
+  }
+
+  // Set up window.openai with placeholder values (updated via MessageChannel)
+  window.openai = {
+    theme: 'dark',
+    locale: 'en-US',
+    displayMode: 'inline',
+    maxHeight: undefined,
+    userAgent: { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } },
+    safeArea: { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+    view: null,
+    toolInput: {},
+    toolOutput: null,
+    toolResponseMetadata: null,
+    widgetState: null,
+
+    // API methods that send messages to parent via MessagePort
+    callTool: function(name, args) {
+      sendToParent({ type: 'openai:callTool', payload: { name, args } });
+    },
+    sendFollowUpMessage: function(params) {
+      sendToParent({ type: 'openai:sendFollowUpMessage', payload: params });
+    },
+    openExternal: function(params) {
+      sendToParent({ type: 'openai:openExternal', payload: params });
+    },
+    requestDisplayMode: function(params) {
+      sendToParent({ type: 'openai:requestDisplayMode', payload: params });
+    },
+    requestModal: function(params) {
+      sendToParent({ type: 'openai:requestModal', payload: params });
+    },
+    notifyIntrinsicHeight: function(height) {
+      // Height updates use postMessage directly to avoid delays during handshake.
+      // This is safe because height values are validated on the parent side.
+      window.parent.postMessage({ type: 'openai:notifyIntrinsicHeight', payload: { height } }, '*');
+    },
+    setWidgetState: function(state) {
+      sendToParent({ type: 'openai:setWidgetState', payload: state });
+    },
+  };
+
+  // Handle incoming messages on the MessagePort
+  function handlePortMessage(event) {
+    var data = event.data;
+    if (!data || typeof data !== 'object') return;
+
+    if (data.type === 'openai:init' || data.type === 'openai:update') {
+      var payload = data.payload || {};
+
+      // Update window.openai with new values
+      if (payload.theme !== undefined) {
+        window.openai.theme = payload.theme;
+        // Also set data-theme attribute for CSS theming
+        document.documentElement.dataset.theme = payload.theme;
+      }
+      if (payload.displayMode !== undefined) window.openai.displayMode = payload.displayMode;
+      if (payload.locale !== undefined) window.openai.locale = payload.locale;
+      if (payload.maxHeight !== undefined) window.openai.maxHeight = payload.maxHeight;
+      if (payload.userAgent !== undefined) window.openai.userAgent = payload.userAgent;
+      if (payload.safeArea !== undefined) window.openai.safeArea = payload.safeArea;
+      if (payload.view !== undefined) window.openai.view = payload.view;
+      if (payload.toolInput !== undefined) window.openai.toolInput = payload.toolInput;
+      if (payload.toolOutput !== undefined) window.openai.toolOutput = payload.toolOutput;
+      if (payload.toolResponseMetadata !== undefined) window.openai.toolResponseMetadata = payload.toolResponseMetadata;
+      if (payload.widgetState !== undefined) window.openai.widgetState = payload.widgetState;
+
+      // Dispatch custom event so widgets can react to changes
+      // Must match SET_GLOBALS_EVENT_TYPE ('openai:set_globals') in providers/openai/types.ts
+      window.dispatchEvent(new CustomEvent('openai:set_globals', { detail: { globals: payload } }));
+    }
+  }
+
+  // Listen for handshake message from parent (transfers MessagePort)
+  window.addEventListener('message', function(event) {
+    // Strict source validation: only accept messages from parent window
+    if (event.source !== window.parent) {
+      console.warn('[IframeBridge] Rejected message from non-parent source');
+      return;
+    }
+
+    // Validate message origin (allows localhost with any port)
+    if (!isAllowedOrigin(event.origin)) {
+      console.warn('[IframeBridge] Rejected message from untrusted origin:', event.origin);
+      return;
+    }
+
+    // Handle handshake with MessagePort transfer
+    if (event.data && event.data.type === 'openai:handshake' && event.ports && event.ports.length > 0) {
+      messagePort = event.ports[0];
+      messagePort.onmessage = handlePortMessage;
+      messagePort.start();
+
+      // Flush any queued messages
+      flushMessageQueue();
+
+      // Confirm handshake complete
+      sendToParent({ type: 'openai:handshake_complete' });
+    }
+  });
+
+  // Signal to parent that we're ready for handshake
+  window.parent.postMessage({ type: 'openai:ready' }, '*');
+
+  // Auto-measure and report content height immediately
+  var lastHeight = 0;
+  var pendingFrame = null;
+  function reportHeight() {
+    var height = document.documentElement.scrollHeight || document.body.scrollHeight;
+    if (height > 0 && height !== lastHeight) {
+      lastHeight = height;
+      window.openai.notifyIntrinsicHeight(height);
+    }
+  }
+
+  // Schedule height report on next animation frame (batches rapid changes)
+  function scheduleHeightReport() {
+    if (pendingFrame) return;
+    pendingFrame = requestAnimationFrame(function() {
+      pendingFrame = null;
+      reportHeight();
+    });
+  }
+
+  // Report height immediately when ready
+  if (document.readyState === 'complete') {
+    reportHeight();
+  } else {
+    window.addEventListener('load', reportHeight);
+  }
+
+  // Use ResizeObserver to track size changes
+  if (typeof ResizeObserver !== 'undefined') {
+    var resizeObserver = new ResizeObserver(function() {
+      scheduleHeightReport();
+    });
+    function observeElements() {
+      if (document.body) resizeObserver.observe(document.body);
+      if (document.documentElement) resizeObserver.observe(document.documentElement);
+      // Also observe the root element if it exists
+      var root = document.getElementById('root');
+      if (root) resizeObserver.observe(root);
+    }
+    if (document.body) {
+      observeElements();
+    } else {
+      document.addEventListener('DOMContentLoaded', observeElements);
+    }
+  }
+
+  // Use MutationObserver to detect DOM changes that may affect height
+  if (typeof MutationObserver !== 'undefined') {
+    var mutationObserver = new MutationObserver(function() {
+      scheduleHeightReport();
+    });
+    function observeMutations() {
+      mutationObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true
+      });
+    }
+    if (document.body) {
+      observeMutations();
+    } else {
+      document.addEventListener('DOMContentLoaded', observeMutations);
+    }
+  }
+})();
+<\/script>
+`;
+}
+function generateScriptHtml(scriptSrc, theme, cspPolicy) {
+  const safeScriptSrc = escapeHtml(scriptSrc);
+  const safeCsp = escapeHtml(cspPolicy);
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Security-Policy" content="${safeCsp}" />
+  <title>Resource</title>
+  <style>
+    html, body, #root {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      width: 100%;
+    }
+    body {
+      background: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="${safeScriptSrc}"><\/script>
+</body>
+</html>`;
+}
+function injectBridgeScript(htmlContent, bridgeScript) {
+  const headMatch = htmlContent.match(/<head[^>]*>/i);
+  if (headMatch) {
+    const insertPos = headMatch.index + headMatch[0].length;
+    return htmlContent.slice(0, insertPos) + bridgeScript + htmlContent.slice(insertPos);
+  }
+  const doctypeMatch = htmlContent.match(/<!DOCTYPE[^>]*>/i);
+  if (doctypeMatch) {
+    const insertPos = doctypeMatch.index + doctypeMatch[0].length;
+    return htmlContent.slice(0, insertPos) + bridgeScript + htmlContent.slice(insertPos);
+  }
+  return bridgeScript + htmlContent;
+}
+function IframeResource({ scriptSrc, className, style, csp }) {
+  const iframeRef = React.useRef(null);
+  const messageChannelRef = React.useRef(null);
+  const messagePortRef = React.useRef(null);
+  const [isHeightReady, setIsHeightReady] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    setIsHeightReady(false);
+    const timeout = setTimeout(() => {
+      setIsHeightReady(true);
+    }, 500);
+    return () => clearTimeout(timeout);
+  }, [scriptSrc]);
+  const theme = useTheme();
+  const displayMode = useDisplayMode();
+  const locale = useLocale();
+  const maxHeight = useMaxHeight();
+  const userAgent = useUserAgent();
+  const safeArea = useSafeArea();
+  const view = useView();
+  const toolInput = useToolInput();
+  const toolOutput = useWidgetProps();
+  const toolResponseMetadata = useToolResponseMetadata();
+  const [widgetState] = useWidgetState();
+  const currentState = React__namespace.useMemo(
+    () => ({
+      theme,
+      displayMode,
+      locale,
+      maxHeight,
+      userAgent,
+      safeArea,
+      view,
+      toolInput,
+      toolOutput,
+      toolResponseMetadata,
+      widgetState
+    }),
+    [
+      theme,
+      displayMode,
+      locale,
+      maxHeight,
+      userAgent,
+      safeArea,
+      view,
+      toolInput,
+      toolOutput,
+      toolResponseMetadata,
+      widgetState
+    ]
+  );
+  const sendUpdate = React.useCallback(
+    (type) => {
+      const port = messagePortRef.current;
+      if (port) {
+        const message = {
+          type,
+          payload: currentState
+        };
+        port.postMessage(message);
+      }
+    },
+    [currentState]
+  );
+  const sendUpdateRef = React.useRef(sendUpdate);
+  React.useEffect(() => {
+    sendUpdateRef.current = sendUpdate;
+  }, [sendUpdate]);
+  const handlePortMessage = React.useCallback(
+    (event) => {
+      var _a2, _b2;
+      if (!event.data || typeof event.data !== "object" || typeof event.data.type !== "string") {
+        return;
+      }
+      const { type } = event.data;
+      switch (type) {
+        case "openai:handshake_complete":
+          sendUpdateRef.current("openai:init");
+          break;
+        case "openai:requestDisplayMode": {
+          const payload = event.data.payload;
+          if (!payload || typeof payload !== "object" || !("mode" in payload) || typeof payload.mode !== "string") {
+            console.warn("[IframeResource] Invalid requestDisplayMode payload");
+            return;
+          }
+          const validModes = ["inline", "pip", "fullscreen"];
+          const mode = payload.mode;
+          if (!validModes.includes(mode)) {
+            console.warn("[IframeResource] Invalid display mode:", mode);
+            return;
+          }
+          if (typeof window !== "undefined" && ((_a2 = window.openai) == null ? void 0 : _a2.requestDisplayMode)) {
+            window.openai.requestDisplayMode({ mode });
+          }
+          break;
+        }
+        case "openai:setWidgetState": {
+          const payload = event.data.payload;
+          if (payload !== null && (typeof payload !== "object" || Array.isArray(payload))) {
+            console.warn("[IframeResource] Invalid widgetState payload");
+            return;
+          }
+          if (typeof window !== "undefined" && ((_b2 = window.openai) == null ? void 0 : _b2.setWidgetState)) {
+            window.openai.setWidgetState(payload);
+          }
+          break;
+        }
+        case "openai:notifyIntrinsicHeight": {
+          const payload = event.data.payload;
+          if (!payload || typeof payload !== "object" || !("height" in payload) || typeof payload.height !== "number") {
+            console.warn("[IframeResource] Invalid notifyIntrinsicHeight payload");
+            return;
+          }
+          const height = payload.height;
+          if (height <= 0 || height > 1e5) {
+            console.warn("[IframeResource] Height out of range:", height);
+            return;
+          }
+          if (iframeRef.current) {
+            iframeRef.current.style.height = `${height}px`;
+          }
+          break;
+        }
+        case "openai:callTool":
+        case "openai:sendFollowUpMessage":
+        case "openai:openExternal":
+        case "openai:requestModal":
+          console.log(`[IframeResource] Received ${type}:`, event.data.payload);
+          break;
+      }
+    },
+    []
+    // No dependencies - uses refs for changing values
+  );
+  React.useEffect(() => {
+    const handleMessage = (event) => {
+      if (iframeRef.current && event.source !== iframeRef.current.contentWindow) {
+        return;
+      }
+      if (!event.data || typeof event.data !== "object" || typeof event.data.type !== "string") {
+        return;
+      }
+      if (event.data.type === "openai:ready") {
+        const channel = new MessageChannel();
+        messageChannelRef.current = channel;
+        messagePortRef.current = channel.port1;
+        channel.port1.onmessage = handlePortMessage;
+        channel.port1.start();
+        const iframe = iframeRef.current;
+        if (iframe == null ? void 0 : iframe.contentWindow) {
+          iframe.contentWindow.postMessage({ type: "openai:handshake" }, "*", [channel.port2]);
+        }
+      }
+      if (event.data.type === "openai:notifyIntrinsicHeight") {
+        const payload = event.data.payload;
+        if (!payload || typeof payload !== "object" || !("height" in payload) || typeof payload.height !== "number") {
+          return;
+        }
+        const height = payload.height;
+        if (height <= 0 || height > 1e5) {
+          return;
+        }
+        if (iframeRef.current) {
+          iframeRef.current.style.height = `${height}px`;
+          setIsHeightReady(true);
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      if (messagePortRef.current) {
+        messagePortRef.current.close();
+      }
+    };
+  }, [handlePortMessage]);
+  React.useEffect(() => {
+    sendUpdate("openai:update");
+  }, [sendUpdate]);
+  const isValidScriptSrc = React.useMemo(() => isAllowedScriptSrc(scriptSrc), [scriptSrc]);
+  const blobUrl = React.useMemo(() => {
+    if (!isValidScriptSrc) {
+      console.error("[IframeResource] Script source not allowed:", scriptSrc);
+      const errorHtml = `<!DOCTYPE html><html><body><h1>Error</h1><p>Script source not allowed.</p></body></html>`;
+      const blob2 = new Blob([errorHtml], { type: "text/html" });
+      return URL.createObjectURL(blob2);
+    }
+    const absoluteScriptSrc = scriptSrc.startsWith("/") ? `${window.location.origin}${scriptSrc}` : scriptSrc;
+    const cspPolicy = generateCSP(csp, absoluteScriptSrc);
+    const bridgeScript = generateBridgeScript(ALLOWED_PARENT_ORIGINS);
+    const html = injectBridgeScript(
+      generateScriptHtml(absoluteScriptSrc, theme ?? "dark", cspPolicy),
+      bridgeScript
+    );
+    const blob = new Blob([html], { type: "text/html" });
+    return URL.createObjectURL(blob);
+  }, [scriptSrc, theme, isValidScriptSrc, csp]);
+  React.useEffect(() => {
+    return () => URL.revokeObjectURL(blobUrl);
+  }, [blobUrl]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      ref: iframeRef,
+      src: blobUrl,
+      className,
+      style: {
+        border: "none",
+        width: "100%",
+        height: "100%",
+        // Hide until first height update to prevent flash of incorrect size
+        opacity: isHeightReady ? 1 : 0,
+        transition: "opacity 0.1s ease-in",
+        ...style
+      },
+      title: "Resource Preview",
+      sandbox: "allow-scripts",
+      allow: "accelerometer 'none'; autoplay 'none'; camera 'none'; display-capture 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; publickey-credentials-get 'none'; usb 'none'; xr-spatial-tracking 'none'"
+    }
+  );
+}
 function Conversation({
   children,
+  iframeScriptSrc,
   screenWidth,
   appName = "Sunpeak",
   appIcon,
@@ -7573,6 +8187,8 @@ function Conversation({
   const userAgent = useUserAgent();
   const isDesktop = (userAgent == null ? void 0 : userAgent.device.type) === "desktop";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
+  const widgetCSP = resourceMeta == null ? void 0 : resourceMeta["openai/widgetCSP"];
+  const content = iframeScriptSrc ? /* @__PURE__ */ jsxRuntime.jsx(IframeResource, { scriptSrc: iframeScriptSrc, className: "h-full w-full", csp: widgetCSP }) : children;
   if (displayMode === "fullscreen") {
     const handleClose = () => {
       if (api == null ? void 0 : api.requestDisplayMode) {
@@ -7622,7 +8238,7 @@ function Conversation({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto", children }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto", children: content }) }),
               /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -7712,10 +8328,10 @@ function Conversation({
                                       children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, { className: "h-4 w-4" })
                                     }
                                   ),
-                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_#fff3,0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-white dark:bg-[#212121]", children }) })
+                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_#fff3,0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-white dark:bg-[#212121]", children: content }) })
                                 ]
                               }
-                            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "no-scrollbar relative mb-2 @w-sm/main:w-full mx-0 max-sm:-mx-[1rem] max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full", children }) }) })
+                            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "no-scrollbar relative mb-2 @w-sm/main:w-full mx-0 max-sm:-mx-[1rem] max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full", children: content }) }) })
                           }
                         )
                       ] }) }) })
@@ -7791,8 +8407,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;
@@ -8003,11 +8619,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]);
@@ -8019,7 +8641,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(
@@ -8043,12 +8665,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({
@@ -8131,16 +8747,21 @@ function ChatGPTSimulator({
     }
   };
   const SelectedComponent = selectedSim == null ? void 0 : selectedSim.resourceComponent;
+  const iframeScriptSrc = !SelectedComponent ? selectedSim == null ? void 0 : selectedSim.resourceScript : void 0;
   const content = SelectedComponent ? /* @__PURE__ */ jsxRuntime.jsx(SelectedComponent, {}) : children;
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(
     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;
@@ -8165,237 +8786,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"
+              options: [
+                { value: "inline", label: "Inline" },
+                { value: "pip", label: "PiP" },
+                { value: "fullscreen", label: "Full" }
+              ]
             }
-          ),
-          /* @__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"
-            }
-          )
-        ] }) }) }),
-        /* @__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,
           {
@@ -8408,7 +9046,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(
@@ -8423,7 +9061,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(
@@ -8438,22 +9076,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
           }
         ) })
       ] }),
@@ -8465,6 +9088,7 @@ function ChatGPTSimulator({
           appIcon,
           userMessage,
           resourceMeta: selectedSim == null ? void 0 : selectedSim.resource._meta,
+          iframeScriptSrc,
           children: content
         },
         selectedSimulationName
@@ -8517,6 +9141,7 @@ function createSimulatorUrl(params, basePath = "/") {
   return queryString ? `${basePath}?${queryString}` : basePath;
 }
 exports.ChatGPTSimulator = ChatGPTSimulator;
+exports.IframeResource = IframeResource;
 exports.SCREEN_WIDTHS = SCREEN_WIDTHS;
 exports.ThemeProvider = ThemeProvider;
 exports.clsx = clsx;
@@ -8542,4 +9167,4 @@ exports.useWidgetAPI = useWidgetAPI;
 exports.useWidgetGlobal = useWidgetGlobal;
 exports.useWidgetProps = useWidgetProps;
 exports.useWidgetState = useWidgetState;
-//# sourceMappingURL=simulator-url-CG8lAAC3.cjs.map
+//# sourceMappingURL=simulator-url-BpCa95pE.cjs.map