sunpeak 0.2.5 → 0.3.2

package/README.md

@@ -15,13 +15,15 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.6-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-blue?style=flat-square&logo=react)](https://reactjs.org/)
 
-The ChatGPT Apps UI SDK.
+The ChatGPT Apps SDK.
 
-Build and test your ChatGPT App UI locally with approved React components.
+Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui React components.
 
 ![ChatGPT Simulator](https://sunpeak.ai/images/chatgpt-simulator.png)
 
-## Quickstart
+## Quickstart 
+
+### New Projects
 
 Requirements: Node (20+), pnpm (10+)
 
@@ -29,25 +31,38 @@ Requirements: Node (20+), pnpm (10+)
 pnpm dlx sunpeak init
 ```
 
+### Existing Projects
+
+Requirements: React (18+), Tailwind 4
+
+```bash
+pnpm add sunpeak
+```
+
 ## Key Features
-- 📺 ChatGPT simulator for rapid UI component development.
-- 📚 React component library built on [shadcn](https://ui.shadcn.com/).
-- 📱 Interface for custom components that work across genAI platforms.
-- 🤝 Styles that fit the [OpenAI design system](https://developers.openai.com/apps-sdk/build/chatgpt-ui).
+- 📺 ChatGPT simulator for local UI component development.
+- 📚 Pre-built component library built on [openai/apps-sdk-ui](https://github.com/openai/apps-sdk-ui).
+- 📱 Interface for cross-platforms MCP UI App development.
+- 🛜 Basic MCP server to serve your UI to ChatGPT prod out-of-the-box.
 - 🧪 Testing framework that replicates advanced ChatGPT behavior locally.
 
 ## Example Component
 ```tsx
-import { SunpeakCard } from "sunpeak";
+import '@/styles/globals.css';
+import { OpenAICard } from "@/components";
 
 export default function App() {
   return (
-    <SunpeakCard
-      image="/photo.jpg"
-      imageAlt="Product"
-      header="Summer Collection"
-      button1={{ children: "Shop Now", onClick: () => console.log("Howdy!") }}
-    />
+    <OpenAICard
+      image="https://example.com/photo.jpg"
+      imageAlt="Lady Bird Lake"
+      header="Lady Bird Lake"
+      metadata="⭐ 4.5 • Austin, TX"
+      button1={{ children: "Visit", isPrimary: true, onClick: () => {} }}
+      button2={{ children: "Learn More", onClick: () => {} }}
+    >
+      Scenic lake perfect for kayaking, paddleboarding, and trails.
+    </OpenAICard>
   );
 }
 ```
@@ -64,9 +79,9 @@ export default function App() {
 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).
+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 UI components (`./template/src/components`) to copy, modify, or use as an example.
+    1. Developers build their UI in the `App` component.
 
 ## Contributing
 

package/dist/chatgpt/chatgpt-simulator-types.d.ts

@@ -0,0 +1,8 @@
+import { DisplayMode, Theme } from './openai-types';
+export type ScreenWidth = 'mobile-s' | 'mobile-l' | 'tablet' | 'full';
+export type SimulatorConfig = {
+    theme: Theme;
+    displayMode: DisplayMode;
+    screenWidth: ScreenWidth;
+};
+export declare const SCREEN_WIDTHS: Record<ScreenWidth, number>;

package/dist/chatgpt/chatgpt-simulator.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface ChatGPTSimulatorProps {
+    children: React.ReactNode;
+    appName?: string;
+    appIcon?: string;
+    userMessage?: string;
+    toolOutput?: Record<string, unknown> | null;
+    widgetState?: Record<string, unknown> | null;
+}
+export declare function ChatGPTSimulator({ children, appName, appIcon, userMessage, toolOutput, widgetState, }: ChatGPTSimulatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chatgpt/conversation.d.ts

@@ -0,0 +1,11 @@
+import { ScreenWidth } from './chatgpt-simulator-types';
+import * as React from 'react';
+interface ConversationProps {
+    children: React.ReactNode;
+    screenWidth: ScreenWidth;
+    appName?: string;
+    appIcon?: string;
+    userMessage?: string;
+}
+export declare function Conversation({ children, screenWidth, appName, appIcon, userMessage, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chatgpt/index.d.ts

@@ -0,0 +1,3 @@
+export { ChatGPTSimulator } from './chatgpt-simulator';
+export { initMockOpenAI } from './mock-openai';
+export * from './theme-provider';

package/dist/chatgpt/mcp-provider.d.ts

@@ -0,0 +1,25 @@
+import { Resource, Tool } from '@modelcontextprotocol/sdk/types.js';
+import { MCPProviderImplementation, WidgetDescriptorMeta, WidgetInvocationMeta } from '../mcp/types.js';
+/**
+ * ChatGPT MCP provider implementation.
+ */
+export declare class ChatGPTMCPProvider implements MCPProviderImplementation {
+    getWidgetDescriptorMeta(): WidgetDescriptorMeta;
+    getWidgetInvocationMeta(): WidgetInvocationMeta;
+    readWidgetContent(distPath: string): string;
+    getWidgetMimeType(): string;
+    getWidgetResourceUri(): string;
+    createTool(config: {
+        name: string;
+        description: string;
+        inputSchema: Tool["inputSchema"];
+    }): Tool;
+    createResource(config: {
+        name: string;
+        description: string;
+    }): Resource;
+}
+/**
+ * Get the ChatGPT MCP provider instance.
+ */
+export declare function getChatGPTMCPProvider(): MCPProviderImplementation;

package/dist/chatgpt/mock-openai.d.ts

@@ -0,0 +1,61 @@
+import { OpenAiGlobals, OpenAiAPI, Theme, DisplayMode, View, ViewMode, UnknownObject } from '../types';
+declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
+    theme: Theme;
+    userAgent: {
+        device: {
+            type: "desktop";
+        };
+        capabilities: {
+            hover: boolean;
+            touch: boolean;
+        };
+    };
+    locale: string;
+    maxHeight: number;
+    displayMode: DisplayMode;
+    safeArea: {
+        insets: {
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+        };
+    };
+    view: View | null;
+    toolInput: Record<string, unknown>;
+    toolOutput: Record<string, unknown> | null;
+    toolResponseMetadata: Record<string, unknown> | null;
+    widgetState: Record<string, unknown> | null;
+    callTool(name: string, args: Record<string, unknown>): Promise<{
+        result: string;
+    }>;
+    sendFollowUpMessage(args: {
+        prompt: string;
+    }): Promise<void>;
+    openExternal(payload: {
+        href: string;
+    }): void;
+    requestDisplayMode(args: {
+        mode: DisplayMode;
+    }): Promise<{
+        mode: DisplayMode;
+    }>;
+    requestModal(args: {
+        mode: ViewMode;
+        params?: UnknownObject;
+    }): Promise<void>;
+    notifyIntrinsicHeight(height: number): void;
+    setWidgetState(state: Record<string, unknown>): Promise<void>;
+    setTheme(theme: Theme): void;
+    setDisplayMode(displayMode: DisplayMode): void;
+    setToolOutput(toolOutput: Record<string, unknown> | null): void;
+    setWidgetStateExternal(widgetState: Record<string, unknown> | null): void;
+    emitUpdate(globals: Partial<OpenAiGlobals>): void;
+}
+export declare function initMockOpenAI(initialData?: {
+    theme?: Theme;
+    displayMode?: DisplayMode;
+    toolOutput?: Record<string, unknown> | null;
+    widgetState?: Record<string, unknown> | null;
+}): MockOpenAI;
+export type { MockOpenAI };

package/dist/chatgpt/openai-provider.d.ts

@@ -0,0 +1,19 @@
+import { WidgetProvider, WidgetGlobals, WidgetAPI } from '../providers/types';
+/**
+ * Check if the OpenAI provider is available.
+ */
+export declare function isOpenAiAvailable(): boolean;
+/**
+ * OpenAI provider implementation.
+ */
+declare class OpenAiProvider implements WidgetProvider {
+    readonly id = "openai";
+    getGlobal<K extends keyof WidgetGlobals>(key: K): WidgetGlobals[K] | null;
+    subscribe(key: keyof WidgetGlobals, onChange: () => void): () => void;
+    getAPI(): WidgetAPI | null;
+}
+/**
+ * Get the OpenAI provider instance (singleton).
+ */
+export declare function getOpenAiProvider(): OpenAiProvider;
+export {};

package/dist/chatgpt/openai-types.d.ts

@@ -0,0 +1,81 @@
+export type UnknownObject = Record<string, unknown>;
+export type Theme = 'light' | 'dark';
+export type SafeAreaInsets = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export type SafeArea = {
+    insets: SafeAreaInsets;
+};
+export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
+export type UserAgent = {
+    device: {
+        type: DeviceType;
+    };
+    capabilities: {
+        hover: boolean;
+        touch: boolean;
+    };
+};
+export type DisplayMode = 'pip' | 'inline' | 'fullscreen';
+export type RequestDisplayMode = (args: {
+    mode: DisplayMode;
+}) => Promise<{
+    mode: DisplayMode;
+}>;
+export type ViewMode = 'modal' | 'default';
+export type View = {
+    mode: ViewMode;
+    params?: UnknownObject;
+};
+export type CallToolResponse = {
+    result: string;
+};
+export type CallTool = (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;
+export type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
+    theme: Theme;
+    userAgent: UserAgent;
+    locale: string;
+    maxHeight: number;
+    displayMode: DisplayMode;
+    safeArea: SafeArea;
+    view: View | null;
+    toolInput: ToolInput;
+    toolOutput: ToolOutput | null;
+    toolResponseMetadata: ToolResponseMetadata | null;
+    widgetState: WidgetState | null;
+    setWidgetState: (state: WidgetState) => Promise<void>;
+};
+export type RequestModal = (args: {
+    mode: ViewMode;
+    params?: UnknownObject;
+}) => Promise<void>;
+export type NotifyIntrinsicHeight = (height: number) => void;
+export type OpenAiAPI = {
+    callTool: CallTool;
+    sendFollowUpMessage: (args: {
+        prompt: string;
+    }) => Promise<void>;
+    openExternal(payload: {
+        href: string;
+    }): void;
+    requestDisplayMode: RequestDisplayMode;
+    requestModal: RequestModal;
+    notifyIntrinsicHeight: NotifyIntrinsicHeight;
+};
+export declare const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+export declare class SetGlobalsEvent extends CustomEvent<{
+    globals: Partial<OpenAiGlobals>;
+}> {
+    readonly type = "openai:set_globals";
+}
+declare global {
+    interface Window {
+        openai: OpenAiAPI & OpenAiGlobals;
+    }
+    interface WindowEventMap {
+        [SET_GLOBALS_EVENT_TYPE]: SetGlobalsEvent;
+    }
+}

package/dist/chatgpt/simple-sidebar.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface SimpleSidebarProps {
+    children: React.ReactNode;
+    controls: React.ReactNode;
+}
+export declare function SimpleSidebar({ children, controls }: SimpleSidebarProps): import("react/jsx-runtime").JSX.Element;
+interface SidebarControlProps {
+    label: string;
+    children: React.ReactNode;
+}
+export declare function SidebarControl({ label, children }: SidebarControlProps): import("react/jsx-runtime").JSX.Element;
+interface SidebarSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    placeholder?: string;
+}
+export declare function SidebarSelect({ value, onChange, options, placeholder }: SidebarSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chatgpt/theme-provider.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+type Theme = "light" | "dark";
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    theme?: Theme;
+};
+type ThemeProviderState = {
+    theme: Theme;
+};
+export declare function ThemeProvider({ children, defaultTheme, theme: controlledTheme, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useThemeContext: () => ThemeProviderState;
+export {};

package/dist/hooks/index.d.ts

@@ -0,0 +1,14 @@
+export { useWidgetGlobal } from './use-widget-global';
+export { useWidgetAPI } from './use-widget-api';
+export { useDisplayMode } from './use-display-mode';
+export { useLocale } from './use-locale';
+export { useMaxHeight } from './use-max-height';
+export { useIsMobile } from './use-mobile';
+export { useSafeArea } from './use-safe-area';
+export { useTheme } from './use-theme';
+export { useToolInput } from './use-tool-input';
+export { useToolResponseMetadata } from './use-tool-response-metadata';
+export { useUserAgent } from './use-user-agent';
+export { useView } from './use-view';
+export { useWidgetProps } from './use-widget-props';
+export { useWidgetState } from './use-widget-state';

package/dist/hooks/use-display-mode.d.ts

@@ -0,0 +1,2 @@
+import { DisplayMode } from '../types';
+export declare const useDisplayMode: () => DisplayMode | null;

package/dist/hooks/use-locale.d.ts

@@ -0,0 +1 @@
+export declare const useLocale: () => string | null;

package/dist/hooks/use-max-height.d.ts

@@ -0,0 +1 @@
+export declare const useMaxHeight: () => number | null;

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-safe-area.d.ts

@@ -0,0 +1,2 @@
+import { SafeArea } from '../types';
+export declare const useSafeArea: () => SafeArea | null;

package/dist/hooks/use-theme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../types';
+export declare const useTheme: () => Theme | null;

package/dist/hooks/use-tool-input.d.ts

@@ -0,0 +1,2 @@
+import { UnknownObject } from '../types';
+export declare function useToolInput<T extends UnknownObject = UnknownObject>(): T | null;

package/dist/hooks/use-tool-response-metadata.d.ts

@@ -0,0 +1,2 @@
+import { UnknownObject } from '../types';
+export declare function useToolResponseMetadata<T extends UnknownObject = UnknownObject>(): T | null;

package/dist/hooks/use-user-agent.d.ts

@@ -0,0 +1,2 @@
+import { UserAgent } from '../types';
+export declare const useUserAgent: () => UserAgent | null;

package/dist/hooks/use-view.d.ts

@@ -0,0 +1,2 @@
+import { View } from '../types';
+export declare function useView(): View | null;

package/dist/hooks/use-widget-api.d.ts

@@ -0,0 +1,8 @@
+import { WidgetAPI } from '../providers';
+/**
+ * Hook to get the widget runtime API.
+ * Automatically detects and uses the appropriate provider (OpenAI, etc.).
+ *
+ * @returns The API object, or null if not available.
+ */
+export declare function useWidgetAPI(): WidgetAPI | null;

package/dist/hooks/use-widget-global.d.ts

@@ -0,0 +1,9 @@
+import { WidgetGlobals } from '../providers';
+/**
+ * Hook to read and subscribe to a global property from the widget runtime.
+ * Automatically detects and uses the appropriate provider (OpenAI, etc.).
+ *
+ * @param key - The global property key to read.
+ * @returns The current value, or null if not available.
+ */
+export declare function useWidgetGlobal<K extends keyof WidgetGlobals>(key: K): WidgetGlobals[K] | null;

package/dist/hooks/use-widget-props.d.ts

@@ -0,0 +1 @@
+export declare function useWidgetProps<T extends Record<string, unknown>>(defaultState?: T | (() => T)): T;

package/dist/hooks/use-widget-state.d.ts

@@ -0,0 +1,4 @@
+import { SetStateAction } from 'react';
+import { UnknownObject } from '../types';
+export declare function useWidgetState<T extends UnknownObject>(defaultState: T | (() => T)): readonly [T, (state: SetStateAction<T>) => void];
+export declare function useWidgetState<T extends UnknownObject>(defaultState?: T | (() => T | null) | null): readonly [T | null, (state: SetStateAction<T | null>) => void];