sunpeak 0.2.4 → 0.2.5

package/README.md

@@ -59,6 +59,15 @@ export default function App() {
 - 🔄 **Anthropic Claude** - Design system available (SDK support coming soon)
 - 🔧 **Custom platforms** - Implement your own platform adapter
 
+## What is sunpeak exactly?
+
+sunpeak is an npm package consisting of:
+
+1. **A CLI utility** for working with sunpeak (`./bin`).
+2. **A `sunpeak` library** (`./src`). This library contains common runtime APIs and testing utilities—including a ChatGPT simulator—to be used as a dependency by sunpeak projects.
+3. **A templated npm package** (`./template`) that is initialized by the CLI to help developers set up sunpeak projects. These projects have the `sunpeak` dependency already wired up alongside a collection of pre-built shadcn UI components (`./template/src/components`) to copy, modify, or use as an example.
+    1. Developers build their final UI in the `App` component, which is then built against CSS files that codify the design systems of each of the genAI platforms (of which ChatGPT is the only one today).
+
 ## Contributing
 
 We welcome your contributions!
@@ -69,4 +78,5 @@ For development quickstart on this package, see [DEVELOPMENT.md](./DEVELOPMENT.m
 
 - [ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
 - [ChatGPT Apps SDK UI Documentation](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
+- [ChatGPT Apps SDK window.openai Reference](https://developers.openai.com/apps-sdk/build/mcp-server#understand-the-windowopenai-widget-runtime)
 - [ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)

package/dist/index.cjs

@@ -76,49 +76,120 @@ var SetGlobalsEvent = class extends CustomEvent {
   }
 };
 
-// src/types/simulator.ts
-var SCREEN_WIDTHS = {
-  "mobile-s": 375,
-  "mobile-l": 425,
-  tablet: 768,
-  full: 1024
+// src/providers/openai.ts
+function isOpenAiAvailable() {
+  return typeof window !== "undefined" && window.openai != null;
+}
+var OpenAiProvider = class {
+  constructor() {
+    __publicField(this, "id", "openai");
+  }
+  getGlobal(key) {
+    if (typeof window === "undefined" || !window.openai) {
+      return null;
+    }
+    return window.openai[key] ?? null;
+  }
+  subscribe(key, onChange) {
+    if (typeof window === "undefined") {
+      return () => {
+      };
+    }
+    const handleEvent = (event) => {
+      if (event.detail.globals[key] !== void 0) {
+        onChange();
+      }
+    };
+    window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleEvent, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleEvent);
+    };
+  }
+  getAPI() {
+    if (typeof window === "undefined" || !window.openai) {
+      return null;
+    }
+    const api = window.openai;
+    return {
+      callTool: api.callTool?.bind(api),
+      sendFollowUpMessage: api.sendFollowUpMessage?.bind(api),
+      openExternal: api.openExternal?.bind(api),
+      requestDisplayMode: api.requestDisplayMode?.bind(api),
+      requestModal: api.requestModal?.bind(api),
+      notifyIntrinsicHeight: api.notifyIntrinsicHeight?.bind(api),
+      setWidgetState: api.setWidgetState?.bind(api)
+    };
+  }
 };
+var openAiProvider = null;
+function getOpenAiProvider() {
+  if (!openAiProvider) {
+    openAiProvider = new OpenAiProvider();
+  }
+  return openAiProvider;
+}
+
+// src/providers/index.ts
+var cachedProvider = null;
+var detectionComplete = false;
+function getProvider() {
+  if (detectionComplete) {
+    return cachedProvider;
+  }
+  if (isOpenAiAvailable()) {
+    cachedProvider = getOpenAiProvider();
+  }
+  detectionComplete = true;
+  return cachedProvider;
+}
+function isProviderAvailable() {
+  return getProvider() !== null;
+}
+function getGlobal(key) {
+  const provider = getProvider();
+  return provider?.getGlobal(key) ?? null;
+}
+function subscribeToGlobal(key, onChange) {
+  const provider = getProvider();
+  return provider?.subscribe(key, onChange) ?? (() => {
+  });
+}
+function getAPI() {
+  const provider = getProvider();
+  return provider?.getAPI() ?? null;
+}
+function resetProviderCache() {
+  cachedProvider = null;
+  detectionComplete = false;
+}
 
-// src/hooks/use-openai-global.ts
-function useOpenAiGlobal(key) {
+// src/hooks/use-widget-global.ts
+function useWidgetGlobal(key) {
   return React3.useSyncExternalStore(
-    (onChange) => {
-      if (typeof window === "undefined") {
-        return () => {
-        };
-      }
-      const handleSetGlobal = (event) => {
-        const value = event.detail.globals[key];
-        if (value === void 0) {
-          return;
-        }
-        onChange();
-      };
-      window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal, {
-        passive: true
-      });
-      return () => {
-        window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
-      };
-    },
-    () => window.openai?.[key] ?? null,
-    () => window.openai?.[key] ?? null
+    (onChange) => subscribeToGlobal(key, onChange),
+    () => getGlobal(key),
+    () => getGlobal(key)
   );
 }
+function useWidgetAPI() {
+  return React3.useMemo(() => getAPI(), []);
+}
 
 // src/hooks/use-display-mode.ts
 var useDisplayMode = () => {
-  return useOpenAiGlobal("displayMode");
+  return useWidgetGlobal("displayMode");
+};
+
+// src/hooks/use-locale.ts
+var useLocale = () => {
+  return useWidgetGlobal("locale");
 };
 
 // src/hooks/use-max-height.ts
 var useMaxHeight = () => {
-  return useOpenAiGlobal("maxHeight");
+  return useWidgetGlobal("maxHeight");
 };
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
@@ -135,26 +206,84 @@ function useIsMobile() {
   return !!isMobile;
 }
 
+// src/hooks/use-safe-area.ts
+var useSafeArea = () => {
+  return useWidgetGlobal("safeArea");
+};
+
 // src/hooks/use-theme.ts
 var useTheme = () => {
-  return useOpenAiGlobal("theme");
+  return useWidgetGlobal("theme");
 };
-function useWidgetState() {
-  const widgetState = useOpenAiGlobal("widgetState");
-  const setWidgetState = useOpenAiGlobal("setWidgetState");
-  const setter = React3.useCallback(
-    async (state) => {
-      if (setWidgetState) {
-        await setWidgetState(state);
-      }
+
+// src/hooks/use-tool-input.ts
+function useToolInput() {
+  return useWidgetGlobal("toolInput");
+}
+
+// src/hooks/use-tool-response-metadata.ts
+function useToolResponseMetadata() {
+  return useWidgetGlobal("toolResponseMetadata");
+}
+
+// src/hooks/use-user-agent.ts
+var useUserAgent = () => {
+  return useWidgetGlobal("userAgent");
+};
+
+// src/hooks/use-view.ts
+function useView() {
+  return useWidgetGlobal("view");
+}
+
+// src/hooks/use-widget-props.ts
+function useWidgetProps(defaultState) {
+  const props = useWidgetGlobal("toolOutput");
+  const fallback = typeof defaultState === "function" ? defaultState() : defaultState ?? null;
+  return props ?? fallback;
+}
+function useWidgetState(defaultState) {
+  const widgetStateFromProvider = useWidgetGlobal("widgetState");
+  const api = useWidgetAPI();
+  const [widgetState, _setWidgetState] = React3.useState(() => {
+    if (widgetStateFromProvider != null) {
+      return widgetStateFromProvider;
+    }
+    return typeof defaultState === "function" ? defaultState() : defaultState ?? null;
+  });
+  React3.useEffect(() => {
+    _setWidgetState(widgetStateFromProvider);
+  }, [widgetStateFromProvider]);
+  const setWidgetState = React3.useCallback(
+    (state) => {
+      _setWidgetState((prevState) => {
+        const newState = typeof state === "function" ? state(prevState) : state;
+        if (newState != null && api?.setWidgetState) {
+          api.setWidgetState(newState);
+        }
+        return newState;
+      });
     },
-    [setWidgetState]
+    [api]
   );
-  return React3.useMemo(() => [widgetState, setter], [widgetState, setter]);
+  return [widgetState, setWidgetState];
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+
+// src/lib/media-queries.ts
+function matchMediaQuery(query) {
+  return window.matchMedia(query).matches;
+}
+function createMediaQueryFn(query) {
+  return () => matchMediaQuery(query);
+}
+var prefersReducedMotion = createMediaQueryFn(
+  "(prefers-reduced-motion: reduce)"
+);
+var isPrimarilyTouchDevice = createMediaQueryFn("(pointer: coarse)");
+var isHoverAvailable = createMediaQueryFn("(hover: hover)");
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
 }
@@ -647,14 +776,22 @@ var Label2 = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Label2.displayName = LabelPrimitive__namespace.Root.displayName;
+
+// src/types/simulator.ts
+var SCREEN_WIDTHS = {
+  "mobile-s": 375,
+  "mobile-l": 425,
+  tablet: 768,
+  full: 1024
+};
 function Conversation({
   children,
   screenWidth,
-  displayMode,
   appName = "ChatGPT",
   appIcon,
   userMessage = "Show me some interesting places to visit."
 }) {
+  const displayMode = useDisplayMode() ?? "inline";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
   if (displayMode === "fullscreen") {
     return /* @__PURE__ */ jsxRuntime.jsx(SidebarInset, { className: "flex flex-col bg-background", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children }) });
@@ -762,6 +899,7 @@ var MockOpenAI = class {
         right: 0
       }
     });
+    __publicField(this, "view", null);
     __publicField(this, "toolInput", {});
     __publicField(this, "toolOutput", null);
     __publicField(this, "toolResponseMetadata", null);
@@ -782,6 +920,14 @@ var MockOpenAI = class {
     this.setDisplayMode(args.mode);
     return { mode: args.mode };
   }
+  async requestModal(args) {
+    console.log("Mock requestModal:", args);
+    this.view = { mode: args.mode, params: args.params };
+    this.emitUpdate({ view: this.view });
+  }
+  notifyIntrinsicHeight(height) {
+    console.log("Mock notifyIntrinsicHeight:", height);
+  }
   async setWidgetState(state) {
     this.widgetState = state;
     this.emitUpdate({ widgetState: state });
@@ -794,33 +940,76 @@ var MockOpenAI = class {
     this.displayMode = displayMode;
     this.emitUpdate({ displayMode });
   }
+  setToolOutput(toolOutput) {
+    this.toolOutput = toolOutput;
+    this.emitUpdate({ toolOutput });
+  }
+  setWidgetStateExternal(widgetState) {
+    this.widgetState = widgetState;
+    this.emitUpdate({ widgetState });
+  }
   emitUpdate(globals) {
     if (typeof window !== "undefined") {
-      const event = new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
-        detail: { globals }
+      queueMicrotask(() => {
+        const event = new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
+          detail: { globals }
+        });
+        window.dispatchEvent(event);
       });
-      window.dispatchEvent(event);
     }
   }
 };
-function initMockOpenAI() {
+function initMockOpenAI(initialData) {
   if (typeof window !== "undefined") {
     const mock = new MockOpenAI();
+    if (initialData?.theme !== void 0) {
+      mock.theme = initialData.theme;
+    }
+    if (initialData?.displayMode !== void 0) {
+      mock.displayMode = initialData.displayMode;
+    }
+    if (initialData?.toolOutput !== void 0) {
+      mock.toolOutput = initialData.toolOutput;
+    }
+    if (initialData?.widgetState !== void 0) {
+      mock.widgetState = initialData.widgetState;
+    }
     window.openai = mock;
     return mock;
   }
   return new MockOpenAI();
 }
+var DEFAULT_THEME = "dark";
+var DEFAULT_DISPLAY_MODE = "inline";
 function ChatGPTSimulator({
   children,
   appName,
   appIcon,
-  userMessage
+  userMessage,
+  toolOutput = null,
+  widgetState = null
 }) {
-  const [theme, setTheme] = React3.useState("dark");
-  const [displayMode, setDisplayMode] = React3.useState("inline");
-  const [screenWidth, setScreenWidth] = React3.useState("full");
-  const mock = React3.useMemo(() => initMockOpenAI(), []);
+  const [screenWidth, setScreenWidth] = React3__namespace.useState("full");
+  const mock = React3.useMemo(
+    () => initMockOpenAI({
+      theme: DEFAULT_THEME,
+      displayMode: DEFAULT_DISPLAY_MODE
+    }),
+    []
+  );
+  const theme = useTheme() ?? DEFAULT_THEME;
+  const displayMode = useDisplayMode() ?? DEFAULT_DISPLAY_MODE;
+  React3.useLayoutEffect(() => {
+    if (mock && typeof window !== "undefined") {
+      window.openai = mock;
+      if (toolOutput !== void 0) {
+        mock.setToolOutput(toolOutput);
+      }
+      if (widgetState !== void 0) {
+        mock.setWidgetStateExternal(widgetState);
+      }
+    }
+  }, [mock, toolOutput, widgetState]);
   React3.useEffect(() => {
     return () => {
       if (typeof window !== "undefined") {
@@ -828,31 +1017,13 @@ function ChatGPTSimulator({
       }
     };
   }, []);
-  React3.useEffect(() => {
-    if (mock) {
-      mock.setTheme(theme);
-    }
-  }, [mock, theme]);
-  React3.useEffect(() => {
-    if (mock) {
-      mock.setDisplayMode(displayMode);
-    }
-  }, [mock, displayMode]);
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsxs(SidebarProvider, { defaultOpen: true, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(SidebarGroup, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupLabel, { className: "text-md", children: "Controls" }),
       /* @__PURE__ */ jsxRuntime.jsxs(SidebarGroupContent, { className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "app-ui-select", className: "text-xs", children: "App UI" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: "carousel", onValueChange: () => {
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "app-ui-select", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "carousel", children: "Carousel" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "theme-select", className: "text-xs", children: "Color Scheme" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: theme, onValueChange: (value) => setTheme(value), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "theme-select", className: "text-xs", children: "Theme" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: theme, onValueChange: (value) => mock.setTheme(value), children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "theme-select", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
             /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "light", children: "Light" }),
@@ -862,7 +1033,7 @@ function ChatGPTSimulator({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "display-mode-select", className: "text-xs", children: "Display Mode" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: displayMode, onValueChange: (value) => setDisplayMode(value), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: displayMode, onValueChange: (value) => mock.setDisplayMode(value), children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "display-mode-select", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
             /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "inline", children: "Inline" }),
@@ -889,7 +1060,6 @@ function ChatGPTSimulator({
       Conversation,
       {
         screenWidth,
-        displayMode,
         appName,
         appIcon,
         userMessage,
@@ -905,13 +1075,32 @@ exports.SET_GLOBALS_EVENT_TYPE = SET_GLOBALS_EVENT_TYPE;
 exports.SetGlobalsEvent = SetGlobalsEvent;
 exports.ThemeProvider = ThemeProvider;
 exports.cn = cn;
+exports.getAPI = getAPI;
+exports.getGlobal = getGlobal;
+exports.getOpenAiProvider = getOpenAiProvider;
+exports.getProvider = getProvider;
 exports.initMockOpenAI = initMockOpenAI;
+exports.isHoverAvailable = isHoverAvailable;
+exports.isOpenAiAvailable = isOpenAiAvailable;
+exports.isPrimarilyTouchDevice = isPrimarilyTouchDevice;
+exports.isProviderAvailable = isProviderAvailable;
+exports.prefersReducedMotion = prefersReducedMotion;
+exports.resetProviderCache = resetProviderCache;
+exports.subscribeToGlobal = subscribeToGlobal;
 exports.useDisplayMode = useDisplayMode;
 exports.useIsMobile = useIsMobile;
+exports.useLocale = useLocale;
 exports.useMaxHeight = useMaxHeight;
-exports.useOpenAiGlobal = useOpenAiGlobal;
+exports.useSafeArea = useSafeArea;
 exports.useTheme = useTheme;
 exports.useThemeContext = useThemeContext;
+exports.useToolInput = useToolInput;
+exports.useToolResponseMetadata = useToolResponseMetadata;
+exports.useUserAgent = useUserAgent;
+exports.useView = useView;
+exports.useWidgetAPI = useWidgetAPI;
+exports.useWidgetGlobal = useWidgetGlobal;
+exports.useWidgetProps = useWidgetProps;
 exports.useWidgetState = useWidgetState;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map