sunpeak 0.5.8 → 0.5.9

package/README.md

@@ -29,7 +29,7 @@ Quickstart, build, and test your ChatGPT App locally with OpenAI apps-sdk-ui Rea
   </a>
 </div>
 
-## Quickstart 
+## Quickstart
 
 ### New Projects
 
@@ -42,6 +42,7 @@ pnpm dlx sunpeak new
 To add sunpeak to an existing project, refer to the [documentation](https://docs.sunpeak.ai/add-to-existing-project).
 
 ## Key Features
+
 - 📺 [ChatGPT simulator](https://docs.sunpeak.ai/library/chatgpt-simulator) for local UI component development.
 - 📚 [Pre-built component library](https://docs.sunpeak.ai/template/ui-components) built on [openai/apps-sdk-ui](https://github.com/openai/apps-sdk-ui).
 - 📱 [Multi-platform interface](https://docs.sunpeak.ai/library/multi-platform-apis) for portable MCP UI App development.
@@ -49,9 +50,10 @@ To add sunpeak to an existing project, refer to the [documentation](https://docs
 - 🧪 [Testing framework](https://docs.sunpeak.ai/guides/testing) that replicates advanced ChatGPT behavior locally.
 
 ## Example Component
+
 ```tsx
-import "./styles/globals.css";
-import { Card } from "./components/card";
+import './styles/globals.css';
+import { Card } from './components/card';
 
 export default function App() {
   return (
@@ -60,8 +62,8 @@ export default function App() {
       imageAlt="Lady Bird Lake"
       header="Lady Bird Lake"
       metadata="⭐ 4.5 • Austin, TX"
-      button1={{ children: "Visit", isPrimary: true, onClick: () => {} }}
-      button2={{ children: "Learn More", onClick: () => {} }}
+      button1={{ children: 'Visit', isPrimary: true, onClick: () => {} }}
+      button2={{ children: 'Learn More', onClick: () => {} }}
     >
       Scenic lake perfect for kayaking, paddleboarding, and trails.
     </Card>
@@ -75,12 +77,12 @@ sunpeak is an npm package consisting of:
 
 1. **A CLI utility** for working with sunpeak (`./bin`).
 2. **A templated npm package** (`./template`). This template includes:
-    1. Project scaffold - Complete development setup with build, test, and dev tooling.
-    2. Pre-built UI components - Production-ready components following ChatGPT design guidelines.
+   1. Project scaffold - Complete development setup with build, test, and dev tooling.
+   2. Pre-built UI components - Production-ready components following ChatGPT design guidelines.
 3. **The `sunpeak` library** (`./src`). This library contains:
-    1. Multi-platform APIs - Abstraction layer for future platform support (Gemini, Claude).
-    2. ChatGPT simulator - Local development environment replicating ChatGPT's widget runtime.
-    3. MCP server - View local widgets in the real ChatGPT.
+   1. Multi-platform APIs - Abstraction layer for future platform support (Gemini, Claude).
+   2. ChatGPT simulator - Local development environment replicating ChatGPT's widget runtime.
+   3. MCP server - View local widgets in the real ChatGPT.
 
 ## Contributing
 

package/bin/sunpeak.js

@@ -21,7 +21,7 @@ async function init(projectName) {
   if (!projectName) {
     projectName = await prompt('☀️ 🏔️ Project name [my-app]: ');
     if (!projectName) {
-      projectName = 'my-app'
+      projectName = 'my-app';
     }
   }
 
@@ -48,7 +48,7 @@ async function init(projectName) {
     filter: (src) => {
       const name = basename(src);
       return name !== 'node_modules' && name !== 'pnpm-lock.yaml';
-    }
+    },
   });
 
   // Read sunpeak version from root package.json
@@ -78,7 +78,7 @@ See README.md for more details.
 `);
 }
 
-const [,, command, ...args] = process.argv;
+const [, , command, ...args] = process.argv;
 
 if (command === 'new') {
   init(args[0]);

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-type Theme = "light" | "dark";
+import * as React from 'react';
+type Theme = 'light' | 'dark';
 type ThemeProviderProps = {
     children: React.ReactNode;
     defaultTheme?: Theme;

package/dist/index.cjs

@@ -236,15 +236,11 @@ function SidebarSelect({ value, onChange, options, placeholder }) {
           break;
         case "ArrowDown":
           event.preventDefault();
-          setHighlightedIndex(
-            (prev) => prev < options.length - 1 ? prev + 1 : 0
-          );
+          setHighlightedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
           break;
         case "ArrowUp":
           event.preventDefault();
-          setHighlightedIndex(
-            (prev) => prev > 0 ? prev - 1 : options.length - 1
-          );
+          setHighlightedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
           break;
         case "Enter":
           event.preventDefault();
@@ -3384,9 +3380,7 @@ function matchMediaQuery(query) {
 function createMediaQueryFn(query) {
   return () => matchMediaQuery(query);
 }
-const prefersReducedMotion = createMediaQueryFn(
-  "(prefers-reduced-motion: reduce)"
-);
+const prefersReducedMotion = createMediaQueryFn("(prefers-reduced-motion: reduce)");
 const isPrimarilyTouchDevice = createMediaQueryFn("(pointer: coarse)");
 const isHoverAvailable = createMediaQueryFn("(hover: hover)");
 const SCREEN_WIDTHS = {
@@ -3615,9 +3609,7 @@ function applyDocumentTheme(theme) {
   htmlTag.setAttribute("data-theme", theme);
   htmlTag.style.colorScheme = theme;
 }
-const ThemeProviderContext = React__namespace.createContext(
-  void 0
-);
+const ThemeProviderContext = React__namespace.createContext(void 0);
 function ThemeProvider({
   children,
   defaultTheme = "light",
@@ -3642,8 +3634,7 @@ function ThemeProvider({
 }
 const useThemeContext = () => {
   const context = React__namespace.useContext(ThemeProviderContext);
-  if (context === void 0)
-    throw new Error("useThemeContext must be used within a ThemeProvider");
+  if (context === void 0) throw new Error("useThemeContext must be used within a ThemeProvider");
   return context;
 };
 const DEFAULT_THEME = "dark";