sunpeak 0.1.25 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/README.md +9 -76
  2. package/bin/sunpeak.js +87 -0
  3. package/dist/index.cjs +827 -1361
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +98 -589
  6. package/dist/index.d.ts +98 -589
  7. package/dist/index.js +795 -1337
  8. package/dist/index.js.map +1 -1
  9. package/dist/styles/chatgpt/index.css +146 -0
  10. package/dist/styles/globals.css +220 -0
  11. package/package.json +34 -36
  12. package/template/.prettierignore +4 -0
  13. package/template/.prettierrc +9 -0
  14. package/template/README.md +47 -0
  15. package/template/assets/favicon.ico +0 -0
  16. package/template/components.json +21 -0
  17. package/template/dev/main.tsx +65 -0
  18. package/template/dev/styles.css +5 -0
  19. package/template/eslint.config.cjs +49 -0
  20. package/template/index.html +13 -0
  21. package/template/package.json +56 -0
  22. package/template/src/App.tsx +45 -0
  23. package/template/src/components/index.ts +2 -0
  24. package/template/src/components/shadcn/button.tsx +60 -0
  25. package/template/src/components/shadcn/card.tsx +76 -0
  26. package/template/src/components/shadcn/carousel.tsx +260 -0
  27. package/template/src/components/shadcn/index.ts +5 -0
  28. package/template/src/components/shadcn/label.tsx +24 -0
  29. package/template/src/components/shadcn/select.tsx +157 -0
  30. package/template/src/components/sunpeak-card.test.tsx +76 -0
  31. package/template/src/components/sunpeak-card.tsx +140 -0
  32. package/template/src/components/sunpeak-carousel.test.tsx +42 -0
  33. package/template/src/components/sunpeak-carousel.tsx +126 -0
  34. package/template/src/index.ts +3 -0
  35. package/template/src/lib/index.ts +1 -0
  36. package/template/src/lib/utils.ts +6 -0
  37. package/template/src/styles/chatgpt.css +146 -0
  38. package/template/src/styles/globals.css +220 -0
  39. package/template/src/test/setup.ts +37 -0
  40. package/template/tsconfig.json +32 -0
  41. package/template/tsconfig.node.json +11 -0
  42. package/template/tsup.config.ts +23 -0
  43. package/template/vite.config.ts +35 -0
  44. package/template/vitest.config.ts +15 -0
package/dist/index.d.ts CHANGED
@@ -1,253 +1,19 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { HTMLAttributes, ReactNode, SetStateAction } from 'react';
3
- import * as _mui_material from '@mui/material';
4
- import { ButtonProps as ButtonProps$1 } from '@mui/material';
5
- import { ThemeOptions, Theme as Theme$2 } from '@mui/material/styles';
6
-
7
- interface GenAIProps extends HTMLAttributes<HTMLDivElement> {
8
- /**
9
- * Maximum width in pixels
10
- * @default 800
11
- */
12
- maxWidth?: number;
13
- /**
14
- * Override the color scheme detection
15
- * If not provided, uses window.openai.colorScheme
16
- */
17
- mode?: 'light' | 'dark';
18
- /**
19
- * Whether to inject MUI's CssBaseline component
20
- * @default true
21
- */
22
- enableCssBaseline?: boolean;
23
- }
24
- interface GenAIRenderProps {
25
- /**
26
- * Maximum height from platform (in pixels)
27
- */
28
- maxHeight: number | null;
29
- /**
30
- * Color scheme from platform
31
- */
32
- colorScheme: 'light' | 'dark' | null;
33
- }
34
- /**
35
- * GenAI - Create platform-aware genAI Apps with automatic theming and constraints.
36
- *
37
- * This is the single interface for building genAI Apps. It automatically provides:
38
- * - MUI theming (light/dark mode from platform)
39
- * - Platform constraints (maxHeight)
40
- * - Color scheme information
41
- *
42
- * @example
43
- * ```tsx
44
- * export const MyApp = GenAI(({ maxHeight, colorScheme }) => (
45
- * <div>
46
- * <h2>My App</h2>
47
- * <p>Theme: {colorScheme}</p>
48
- * <p>Max height: {maxHeight}px</p>
49
- * </div>
50
- * ));
51
- * ```
52
- */
53
- declare function GenAI(renderFn: (props: GenAIRenderProps) => ReactNode): {
54
- (props?: GenAIProps): react_jsx_runtime.JSX.Element;
55
- displayName: string;
56
- };
57
-
58
- interface ButtonProps extends Omit<ButtonProps$1, 'onClick'> {
59
- /**
60
- * Whether to use primary styling (accent color) or secondary (outlined)
61
- */
62
- isPrimary?: boolean;
63
- /**
64
- * Click handler (required)
65
- */
66
- onClick: () => void;
67
- }
68
- interface CardProps extends Omit<GenAIProps, 'children'>, HTMLAttributes<HTMLDivElement> {
69
- /**
70
- * Card content
71
- */
72
- children?: ReactNode;
73
- /**
74
- * Image to display at the top of the card
75
- */
76
- image: string;
77
- /**
78
- * Alt text for the image
79
- */
80
- imageAlt: string;
81
- /**
82
- * Maximum width for the image in pixels
83
- */
84
- imageMaxWidth: number;
85
- /**
86
- * Maximum height for the image in pixels
87
- */
88
- imageMaxHeight: number;
89
- /**
90
- * Optional header text (title)
91
- */
92
- header?: ReactNode;
93
- /**
94
- * Optional metadata text (e.g., rating, category)
95
- */
96
- metadata?: ReactNode;
97
- /**
98
- * First action button (0-1)
99
- */
100
- button1?: ButtonProps;
101
- /**
102
- * Second action button (0-1)
103
- */
104
- button2?: ButtonProps;
105
- /**
106
- * Card variant
107
- */
108
- variant?: 'default' | 'bordered' | 'elevated';
109
- }
110
- /**
111
- * Card - A responsive card component that adapts to display mode.
112
- *
113
- * In inline mode:
114
- * - Fixed width for carousel consistency
115
- * - Compact layout optimized for horizontal scrolling
116
- * - Clickable to request fullscreen mode
117
- *
118
- * In fullscreen mode:
119
- * - Full width layout
120
- * - Expanded content display
121
- * - More breathing room for content
122
- *
123
- * Design specs:
124
- * - Image: aspect-square with 24px border radius
125
- * - Typography: 16px medium for header, 12px for metadata, 14px for description
126
- * - Spacing: 12px between sections
127
- * - Max 2 actions in footer (design guideline)
128
- */
129
- declare const Card: ({ children, image, imageAlt, imageMaxWidth, imageMaxHeight, header, metadata, button1, button2, variant, className, onClick, id, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
130
-
131
- interface CarouselProps extends Omit<GenAIProps, 'children'>, HTMLAttributes<HTMLDivElement> {
132
- /**
133
- * Carousel items (typically Card components)
134
- */
135
- children: ReactNode;
136
- /**
137
- * Gap between items in pixels
138
- * @default 16
139
- */
140
- gap?: number;
141
- /**
142
- * Show navigation arrows
143
- * @default true
144
- */
145
- showArrows?: boolean;
146
- /**
147
- * Show edge gradients to indicate more content
148
- * @default true
149
- */
150
- showEdgeGradients?: boolean;
151
- /**
152
- * Card width configuration. Can be a single number or an object specifying inline and fullscreen widths.
153
- * @default { inline: 220, fullscreen: 340 }
154
- */
155
- cardWidth?: number | {
156
- inline?: number;
157
- fullscreen?: number;
158
- };
159
- }
160
- /**
161
- * Carousel - MUI-based carousel for displaying cards side-by-side.
162
- * Follows OpenAI ChatGPT Apps SDK design guidelines.
163
- */
164
- declare const Carousel: ({ children, gap, maxWidth, showArrows, showEdgeGradients, cardWidth: cardWidthProp, className, ...props }: CarouselProps) => react_jsx_runtime.JSX.Element;
165
-
166
- type UnknownObject$1 = Record<string, unknown>;
167
- type Theme$1 = 'light' | 'dark';
168
- type SafeAreaInsets$1 = {
169
- top: number;
170
- bottom: number;
171
- left: number;
172
- right: number;
173
- };
174
- type SafeArea$1 = {
175
- insets: SafeAreaInsets$1;
2
+ import * as React from 'react';
3
+ import { ClassValue } from 'clsx';
4
+
5
+ type Theme$1 = "light" | "dark";
6
+ type ThemeProviderProps = {
7
+ children: React.ReactNode;
8
+ defaultTheme?: Theme$1;
9
+ theme?: Theme$1;
176
10
  };
177
- type DeviceType$1 = 'mobile' | 'tablet' | 'desktop' | 'unknown';
178
- type UserAgent$1 = {
179
- device: {
180
- type: DeviceType$1;
181
- };
182
- capabilities: {
183
- hover: boolean;
184
- touch: boolean;
185
- };
11
+ type ThemeProviderState = {
12
+ theme: Theme$1;
186
13
  };
187
- /** Display mode */
188
- type DisplayMode$1 = 'pip' | 'inline' | 'fullscreen';
189
- type RequestDisplayMode$1 = (args: {
190
- mode: DisplayMode$1;
191
- }) => Promise<{
192
- /**
193
- * The granted display mode. The host may reject the request.
194
- * For mobile, PiP is always coerced to fullscreen.
195
- */
196
- mode: DisplayMode$1;
197
- }>;
198
- type CallToolResponse$1 = {
199
- result: string;
200
- };
201
- /** Calling APIs */
202
- type CallTool$1 = (name: string, args: Record<string, unknown>) => Promise<CallToolResponse$1>;
203
- type ChatGPTGlobals<ToolInput = UnknownObject$1, ToolOutput = UnknownObject$1, ToolResponseMetadata = UnknownObject$1, WidgetState = UnknownObject$1> = {
204
- colorScheme: Theme$1;
205
- userAgent: UserAgent$1;
206
- locale: string;
207
- maxHeight: number;
208
- displayMode: DisplayMode$1;
209
- safeArea: SafeArea$1;
210
- toolInput: ToolInput;
211
- toolOutput: ToolOutput | null;
212
- toolResponseMetadata: ToolResponseMetadata | null;
213
- widgetState: WidgetState | null;
214
- setWidgetState: (state: WidgetState) => Promise<void>;
215
- };
216
- type API = {
217
- callTool: CallTool$1;
218
- sendFollowUpMessage: (args: {
219
- prompt: string;
220
- }) => Promise<void>;
221
- openExternal(payload: {
222
- href: string;
223
- }): void;
224
- requestDisplayMode: RequestDisplayMode$1;
225
- };
226
- /** Extra events */
227
- declare const SET_GLOBALS_EVENT_TYPE = "chatgpt:set_globals";
228
- declare class SetGlobalsEvent extends CustomEvent<{
229
- globals: Partial<ChatGPTGlobals>;
230
- }> {
231
- readonly type = "chatgpt:set_globals";
232
- }
233
- /**
234
- * Global openai object injected by the web sandbox for communicating with ChatGPT host page.
235
- */
236
- declare global {
237
- interface Window {
238
- openai?: API & ChatGPTGlobals;
239
- }
240
- interface WindowEventMap {
241
- [SET_GLOBALS_EVENT_TYPE]: SetGlobalsEvent;
242
- }
243
- }
14
+ declare function ThemeProvider({ children, defaultTheme, theme: controlledTheme, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
15
+ declare const useThemeContext: () => ThemeProviderState;
244
16
 
245
- /**
246
- * Platform-agnostic types for genAI App SDKs
247
- *
248
- * These types define a common interface that can be implemented
249
- * by different platforms (ChatGPT, Gemini, Claude, etc.)
250
- */
251
17
  type UnknownObject = Record<string, unknown>;
252
18
  type Theme = 'light' | 'dark';
253
19
  type SafeAreaInsets = {
@@ -269,7 +35,6 @@ type UserAgent = {
269
35
  touch: boolean;
270
36
  };
271
37
  };
272
- /** Display mode for the app */
273
38
  type DisplayMode = 'pip' | 'inline' | 'fullscreen';
274
39
  type RequestDisplayMode = (args: {
275
40
  mode: DisplayMode;
@@ -280,13 +45,8 @@ type CallToolResponse = {
280
45
  result: string;
281
46
  };
282
47
  type CallTool = (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;
283
- /**
284
- * Platform-agnostic global state interface
285
- *
286
- * All genAI platforms should implement this interface to work with Sunpeak components.
287
- */
288
- type PlatformGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
289
- colorScheme: Theme;
48
+ type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
49
+ theme: Theme;
290
50
  userAgent: UserAgent;
291
51
  locale: string;
292
52
  maxHeight: number;
@@ -298,10 +58,7 @@ type PlatformGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, Tool
298
58
  widgetState: WidgetState | null;
299
59
  setWidgetState: (state: WidgetState) => Promise<void>;
300
60
  };
301
- /**
302
- * Platform API methods
303
- */
304
- type PlatformAPI = {
61
+ type OpenAiAPI = {
305
62
  callTool: CallTool;
306
63
  sendFollowUpMessage: (args: {
307
64
  prompt: string;
@@ -311,347 +68,99 @@ type PlatformAPI = {
311
68
  }): void;
312
69
  requestDisplayMode: RequestDisplayMode;
313
70
  };
314
- /**
315
- * Platform adapter interface
316
- *
317
- * Implement this interface to add support for a new genAI platform.
318
- */
319
- interface PlatformAdapter {
320
- /**
321
- * Platform identifier (e.g., 'chatgpt', 'gemini', 'claude')
322
- */
323
- readonly name: string;
324
- /**
325
- * Check if this platform is available in the current environment
326
- */
327
- isAvailable(): boolean;
328
- /**
329
- * Get a specific global value
330
- */
331
- getGlobal<K extends keyof PlatformGlobals>(key: K): PlatformGlobals[K] | null;
332
- /**
333
- * Get all platform globals
334
- */
335
- getGlobals(): (PlatformAPI & PlatformGlobals) | null;
336
- /**
337
- * Subscribe to changes in platform globals
338
- * Returns an unsubscribe function
339
- */
340
- subscribe(callback: () => void): () => void;
341
- }
342
- /**
343
- * Platform registry to track supported platforms
344
- */
345
- type PlatformType = 'chatgpt' | 'gemini' | 'claude' | 'custom';
346
-
347
- interface ChatGPTSimulatorProps {
348
- /**
349
- * The component to render in the ChatGPT message
350
- * Can be a function that receives the selected App UI
351
- */
352
- children: ReactNode | ((uiSimulation: string) => ReactNode);
353
- /**
354
- * Initial display mode
355
- */
356
- displayMode?: DisplayMode$1;
357
- /**
358
- * Initial color scheme
359
- */
360
- colorScheme?: Theme$1;
361
- /**
362
- * Initial tool input
363
- */
364
- toolInput?: Record<string, unknown>;
365
- /**
366
- * Initial tool output
367
- */
368
- toolOutput?: Record<string, unknown> | null;
369
- /**
370
- * Initial widget state
371
- */
372
- widgetState?: Record<string, unknown> | null;
373
- /**
374
- * User message to display above the component
375
- */
376
- userMessage?: string;
377
- /**
378
- * Show simulator controls
379
- */
380
- showControls?: boolean;
381
- /**
382
- * App UIs for the App UI selector
383
- */
384
- uiSimulations?: string[];
385
- /**
386
- * Initial App UI
387
- */
388
- initialUISimulation?: string;
389
- }
390
- /**
391
- * ChatGPT Simulator Component
392
- *
393
- * Emulates the ChatGPT environment for testing components locally.
394
- * Provides window.openai API and renders components in a ChatGPT-like UI.
395
- */
396
- declare function ChatGPTSimulator({ children, displayMode: initialDisplayMode, colorScheme: initialColorScheme, toolInput, toolOutput, widgetState: initialWidgetState, userMessage, showControls, uiSimulations, initialUISimulation, }: ChatGPTSimulatorProps): react_jsx_runtime.JSX.Element;
397
-
398
- interface PlatformProviderProps {
399
- /**
400
- * The platform adapter to use. If not provided, will auto-detect.
401
- */
402
- adapter?: PlatformAdapter;
403
- /**
404
- * Platform name to use (e.g., 'chatgpt', 'gemini'). If not provided, will auto-detect.
405
- */
406
- platform?: string;
407
- children: ReactNode;
408
- }
409
- /**
410
- * Platform Provider
411
- *
412
- * Wrap your app with this provider to specify which genAI platform to use.
413
- * If no platform is specified, it will auto-detect the available platform.
414
- *
415
- * @example
416
- * ```tsx
417
- * import { PlatformProvider } from 'sunpeak';
418
- *
419
- * // Auto-detect platform
420
- * <PlatformProvider>
421
- * <App />
422
- * </PlatformProvider>
423
- *
424
- * // Explicitly use ChatGPT
425
- * <PlatformProvider platform="chatgpt">
426
- * <App />
427
- * </PlatformProvider>
428
- * ```
429
- */
430
- declare function PlatformProvider({ adapter, platform, children }: PlatformProviderProps): react_jsx_runtime.JSX.Element;
431
- /**
432
- * Hook to access the current platform adapter
433
- *
434
- * Returns null if no platform is available or detected.
435
- */
436
- declare function usePlatform(): PlatformAdapter | null;
437
-
438
- declare class ChatGPTPlatformAdapter implements PlatformAdapter {
439
- readonly name = "chatgpt";
440
- isAvailable(): boolean;
441
- getGlobal<K extends keyof PlatformGlobals>(key: K): PlatformGlobals[K] | null;
442
- getGlobals(): ({
443
- callTool: CallTool$1;
444
- sendFollowUpMessage: (args: {
445
- prompt: string;
446
- }) => Promise<void>;
447
- openExternal(payload: {
448
- href: string;
449
- }): void;
450
- requestDisplayMode: RequestDisplayMode$1;
451
- } & ChatGPTGlobals<UnknownObject$1, UnknownObject$1, UnknownObject$1, UnknownObject$1>) | null;
452
- subscribe(callback: () => void): () => void;
71
+ declare const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
72
+ declare class SetGlobalsEvent extends CustomEvent<{
73
+ globals: Partial<OpenAiGlobals>;
74
+ }> {
75
+ readonly type = "openai:set_globals";
453
76
  }
454
- /**
455
- * Singleton instance of the ChatGPT platform adapter
456
- */
457
- declare const chatgptPlatform: ChatGPTPlatformAdapter;
458
-
459
- /**
460
- * Platform Registry
461
- *
462
- * Manages multiple platform adapters and auto-detects the active platform.
463
- */
464
-
465
- interface PlatformRegistry {
466
- /**
467
- * Register a platform adapter
468
- */
469
- register(adapter: PlatformAdapter): void;
470
- /**
471
- * Get a specific platform adapter by name
472
- */
473
- get(name: string): PlatformAdapter | null;
474
- /**
475
- * Auto-detect and return the active platform
476
- * Returns the first available platform in the registry
477
- */
478
- detect(): PlatformAdapter | null;
479
- /**
480
- * Get all registered platforms
481
- */
482
- getAll(): PlatformAdapter[];
77
+ declare global {
78
+ interface Window {
79
+ openai: OpenAiAPI & OpenAiGlobals;
80
+ }
81
+ interface WindowEventMap {
82
+ [SET_GLOBALS_EVENT_TYPE]: SetGlobalsEvent;
83
+ }
483
84
  }
484
- /**
485
- * Create a new platform registry
486
- */
487
- declare function createPlatformRegistry(): PlatformRegistry;
488
85
 
489
- /**
490
- * Hook to access platform global state in a platform-agnostic way.
491
- * Works with any genAI platform (ChatGPT, Gemini, Claude, etc.)
492
- *
493
- * Uses React's useSyncExternalStore to efficiently subscribe to changes.
494
- *
495
- * @param key - The key of the global state to access
496
- * @returns The value of the global state, or null if not available
497
- *
498
- * @example
499
- * ```tsx
500
- * function MyWidget() {
501
- * const colorScheme = usePlatformGlobal('colorScheme');
502
- * const displayMode = usePlatformGlobal('displayMode');
503
- *
504
- * return <div className={colorScheme === 'dark' ? 'dark' : 'light'}>...</div>;
505
- * }
506
- * ```
507
- */
508
- declare function usePlatformGlobal<K extends keyof PlatformGlobals>(key: K): PlatformGlobals[K] | null;
86
+ type ScreenWidth = 'mobile-s' | 'mobile-l' | 'tablet' | 'full';
87
+ type SimulatorConfig = {
88
+ theme: Theme;
89
+ displayMode: DisplayMode;
90
+ screenWidth: ScreenWidth;
91
+ };
92
+ declare const SCREEN_WIDTHS: Record<ScreenWidth, number>;
509
93
 
510
- /**
511
- * Hook to get the current display mode from the active genAI platform.
512
- * Display modes include: 'inline', 'fullscreen', and 'pip' (picture-in-picture).
513
- *
514
- * Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
515
- *
516
- * @returns The current display mode, or null if not in a supported environment
517
- */
518
- declare const useDisplayMode: () => DisplayMode$1 | null;
94
+ declare const useDisplayMode: () => DisplayMode | null;
519
95
 
520
- /**
521
- * Hook to get the maximum height constraint from the active genAI platform.
522
- * Useful for ensuring your widget doesn't exceed the available space.
523
- *
524
- * Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
525
- *
526
- * @returns The maximum height in pixels, or null if not available
527
- */
528
96
  declare const useMaxHeight: () => number | null;
529
97
 
530
- /**
531
- * Hook to request a specific display mode from the platform
532
- *
533
- * @example
534
- * ```tsx
535
- * const requestDisplayMode = useRequestDisplayMode();
536
- *
537
- * const handleClick = async () => {
538
- * await requestDisplayMode({ mode: 'fullscreen' });
539
- * };
540
- * ```
541
- */
542
- declare function useRequestDisplayMode(): RequestDisplayMode$1;
98
+ declare function useIsMobile(): boolean;
543
99
 
544
- /**
545
- * Hook to get the current color scheme from the active genAI platform.
546
- * Color scheme can be 'light' or 'dark'.
547
- *
548
- * Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
549
- *
550
- * @returns The current color scheme, or null if not in a supported environment
551
- */
552
- declare const useColorScheme: () => Theme$1 | null;
100
+ declare function useOpenAiGlobal<K extends keyof OpenAiGlobals>(key: K): OpenAiGlobals[K] | null;
553
101
 
554
- /**
555
- * Hook to get widget props (tool output) from the active genAI platform.
556
- * This contains the data returned by your server's tool.
557
- *
558
- * Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
559
- *
560
- * @param defaultState - Default state to use if no props are available
561
- * @returns The widget props from the tool output
562
- */
563
- declare function useWidgetProps<T extends Record<string, unknown>>(defaultState?: T | (() => T)): T;
102
+ declare const useTheme: () => Theme | null;
564
103
 
565
- /**
566
- * Hook to manage widget state that persists in the active genAI platform.
567
- * Similar to useState, but syncs with the platform host page.
568
- *
569
- * Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
570
- *
571
- * @param defaultState - Default state value or function to generate it
572
- * @returns A tuple of [state, setState] similar to useState
573
- */
574
- declare function useWidgetState<T extends UnknownObject$1>(defaultState: T | (() => T)): readonly [T, (state: SetStateAction<T>) => void];
575
- declare function useWidgetState<T extends UnknownObject$1>(defaultState?: T | (() => T | null) | null): readonly [T | null, (state: SetStateAction<T | null>) => void];
104
+ declare function useWidgetState<T extends UnknownObject = UnknownObject>(): [
105
+ T | null,
106
+ (state: T) => Promise<void>
107
+ ];
576
108
 
577
- /**
578
- * ChatGPT Theme
579
- *
580
- * Material UI theme implementing OpenAI ChatGPT Apps SDK design guidelines.
581
- *
582
- * @see https://developers.openai.com/apps-sdk/concepts/design-guidelines
583
- */
584
- /**
585
- * Create ChatGPT Light Theme
586
- */
587
- declare const chatgptLightTheme: _mui_material.Theme;
588
- /**
589
- * Create ChatGPT Dark Theme
590
- */
591
- declare const chatgptDarkTheme: _mui_material.Theme;
592
- /**
593
- * Get ChatGPT theme based on mode
594
- */
595
- declare const getChatGPTTheme: (mode: "light" | "dark") => _mui_material.Theme;
596
-
597
- /**
598
- * Base theme options that all platform themes extend
599
- */
600
- declare const baseThemeOptions: ThemeOptions;
601
- /**
602
- * Creates a base theme with common configuration
603
- */
604
- declare const createBaseTheme: () => _mui_material.Theme;
605
-
606
- /**
607
- * Theme System - Multi-Platform Support
608
- *
609
- * This module provides build-time theme substitution for multi-platform support.
610
- * The active theme is determined by the SUNPEAK_PLATFORM environment variable.
611
- *
612
- * Supported platforms:
613
- * - chatgpt (default): OpenAI ChatGPT Apps SDK
614
- * - Add more platforms as needed
615
- *
616
- * Usage:
617
- * ```bash
618
- * # Build for ChatGPT platform (default)
619
- * SUNPEAK_PLATFORM=chatgpt npm run build
620
- *
621
- * # Build for another platform (future)
622
- * SUNPEAK_PLATFORM=gemini npm run build
623
- * ```
624
- */
109
+ interface ChatGPTSimulatorProps {
110
+ children: React.ReactNode;
111
+ appName?: string;
112
+ appIcon?: string;
113
+ userMessage?: string;
114
+ }
115
+ declare function ChatGPTSimulator({ children, appName, appIcon, userMessage }: ChatGPTSimulatorProps): react_jsx_runtime.JSX.Element;
116
+
117
+ declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
118
+ theme: Theme;
119
+ userAgent: {
120
+ device: {
121
+ type: "desktop";
122
+ };
123
+ capabilities: {
124
+ hover: boolean;
125
+ touch: boolean;
126
+ };
127
+ };
128
+ locale: string;
129
+ maxHeight: number;
130
+ displayMode: DisplayMode;
131
+ safeArea: {
132
+ insets: {
133
+ top: number;
134
+ bottom: number;
135
+ left: number;
136
+ right: number;
137
+ };
138
+ };
139
+ toolInput: {};
140
+ toolOutput: null;
141
+ toolResponseMetadata: null;
142
+ widgetState: Record<string, unknown> | null;
143
+ callTool(name: string, args: Record<string, unknown>): Promise<{
144
+ result: string;
145
+ }>;
146
+ sendFollowUpMessage(args: {
147
+ prompt: string;
148
+ }): Promise<void>;
149
+ openExternal(payload: {
150
+ href: string;
151
+ }): void;
152
+ requestDisplayMode(args: {
153
+ mode: DisplayMode;
154
+ }): Promise<{
155
+ mode: DisplayMode;
156
+ }>;
157
+ setWidgetState(state: Record<string, unknown>): Promise<void>;
158
+ setTheme(theme: Theme): void;
159
+ setDisplayMode(displayMode: DisplayMode): void;
160
+ private emitUpdate;
161
+ }
162
+ declare function initMockOpenAI(): MockOpenAI;
625
163
 
626
- /**
627
- * Platform identifier type
628
- */
629
- type Platform = 'chatgpt';
630
- /**
631
- * Get the current platform
632
- * Currently only supports 'chatgpt'
633
- * Future: Can be extended to support multiple platforms via build-time configuration
634
- */
635
- declare const getCurrentPlatform: () => Platform;
636
- /**
637
- * Theme getter function type
638
- */
639
- type ThemeGetter = (mode: 'light' | 'dark') => Theme$2;
640
- /**
641
- * Get theme for current platform
642
- * This is the main function used by components
643
- *
644
- * @param mode - Light or dark mode
645
- * @returns MUI Theme object for the current platform
646
- */
647
- declare const getTheme: (mode: "light" | "dark") => Theme$2;
648
- /**
649
- * Get light theme for current platform
650
- */
651
- declare const getLightTheme: () => Theme$2;
652
- /**
653
- * Get dark theme for current platform
654
- */
655
- declare const getDarkTheme: () => Theme$2;
164
+ declare function cn(...inputs: ClassValue[]): string;
656
165
 
657
- export { type ButtonProps, type CallTool$1 as CallTool, type CallToolResponse$1 as CallToolResponse, Card, type CardProps, Carousel, type CarouselProps, type ChatGPTGlobals, ChatGPTSimulator, type ChatGPTSimulatorProps, type DeviceType$1 as DeviceType, type DisplayMode$1 as DisplayMode, GenAI, type GenAIProps, type GenAIRenderProps, type Platform, type PlatformAPI, type PlatformAdapter, type PlatformGlobals, PlatformProvider, type PlatformProviderProps, type PlatformRegistry, type PlatformType, type RequestDisplayMode$1 as RequestDisplayMode, type SafeArea$1 as SafeArea, type SafeAreaInsets$1 as SafeAreaInsets, type Theme$1 as Theme, type ThemeGetter, type UnknownObject$1 as UnknownObject, type UserAgent$1 as UserAgent, baseThemeOptions, chatgptDarkTheme, chatgptLightTheme, chatgptPlatform, createBaseTheme, createPlatformRegistry, getChatGPTTheme, getCurrentPlatform, getDarkTheme, getLightTheme, getTheme, useColorScheme, useDisplayMode, useMaxHeight, usePlatform, usePlatformGlobal, useRequestDisplayMode, useWidgetProps, useWidgetState };
166
+ export { type CallTool, type CallToolResponse, ChatGPTSimulator, type DeviceType, type DisplayMode, type OpenAiAPI, type OpenAiGlobals, type RequestDisplayMode, SCREEN_WIDTHS, SET_GLOBALS_EVENT_TYPE, type SafeArea, type SafeAreaInsets, type ScreenWidth, SetGlobalsEvent, type SimulatorConfig, type Theme, ThemeProvider, type UnknownObject, type UserAgent, cn, initMockOpenAI, useDisplayMode, useIsMobile, useMaxHeight, useOpenAiGlobal, useTheme, useThemeContext, useWidgetState };