sunpeak 0.1.19 → 0.1.25

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sunpeak AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,11 @@
+<div align="center">
+  <a href="https://sunpeak.ai">
+    <picture>
+      <img alt="Sunpeak logo" src="https://sunpeak.ai/images/sunpeak_github.svg">
+    </picture>
+  </a>
+</div>
+
 # sunpeak
 
 [![npm version](https://img.shields.io/npm/v/sunpeak.svg?style=flat-square)](https://www.npmjs.com/package/sunpeak)
@@ -7,24 +15,26 @@
 [![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/)
 
-React library for cross-platform genAI App UIs. Supports **OpenAI ChatGPT Apps**, with pluggable architecture for **Gemini**, **Claude**, and other platforms.
+React library for ChatGPT Apps. Build and test ChatGPT Apps locally with approved components.
 
-![ChatGPT Simulator](./assets/chatgpt-simulator.png)
+![ChatGPT Simulator](https://sunpeak.ai/images/chatgpt-simulator.png)
 
 **Key Features:**
 - 📺 ChatGPT simulator for rapid UI component development.
 - 📱 Interface for cross-platform custom components.
-- 🤝 [MUI](https://mui.com/material-ui/)-based components compliant with the OpenAI design system.
+- 🤝 [Material UI](https://mui.com/material-ui/)-based components compliant with the OpenAI design system.
 - 📚 Library of approved Apps.
 - 🧪 Testing framework that replicates advanced platform behavior locally.
 
-## Development Quickstart
+## Quickstart
+
+Requirements: Node (20+), pnpm (10+)
 
-Requirements: Node 20+, pnpm 10+
+Use our `create-sunpeak` utility to scaffold your own sunpeak app:
 
 ```bash
-git clone https://github.com/Sunpeak-AI/sunpeak.git
-pnpm dev
+pnpm dlx create-sunpeak my-app
+cd my-app && pnpm dev
 ```
 
 ## Building Apps
@@ -77,10 +87,6 @@ export const MyApp = GenAI(({ maxHeight, colorScheme }) => (
 - 🔄 **Anthropic Claude** - Design system available (SDK support coming soon)
 - 🔧 **Custom platforms** - Implement your own platform adapter
 
-### Platform Auto-Detection
-
-Sunpeak automatically detects the active platform. No configuration needed for basic usage!
-
 ## What's Included
 
 ### Components
@@ -89,7 +95,7 @@ Sunpeak automatically detects the active platform. No configuration needed for b
   - Platform constraints (maxHeight)
 - **Card** - Responsive card component
 - **Carousel** - Horizontal scrolling carousel
-- **ChatGPTSimulator** - Local development environment
+- **ChatGPTSimulator** - Local development & testing environment
 
 ### Hooks
 - **usePlatformGlobal** - Platform-agnostic global state access
@@ -102,20 +108,15 @@ Sunpeak automatically detects the active platform. No configuration needed for b
 
 ### Design Systems
 - **ChatGPT** - MUI theme following OpenAI Apps SDK guidelines
-- **Custom** - Build your own MUI theme (see [THEMING.md](./THEMING.md))
+- **Custom** - Build your own MUI theme
 
-**See [THEMING.md](./THEMING.md)** for creating custom design systems and complete theming documentation.
+## Contributing
 
-## Deployment
+We welcome your contributions!
 
-On pushes to `main`, Github Actions CI/CD automatically increments the version number, creates the git tag & release, and deploys to npm.
+For development quickstart on this package, see [DEVELOPMENT.md](./DEVELOPMENT.md).
 
 ## Resources
 
 - [OpenAI ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
 - [OpenAI ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)
-- [Theming Guide](./THEMING.md)
-
-## License
-
-MIT

package/dist/index.cjs

@@ -404,6 +404,7 @@ var Carousel = ({
   maxWidth = 800,
   showArrows = true,
   showEdgeGradients = true,
+  cardWidth: cardWidthProp,
   className,
   ...props
 }) => {
@@ -417,7 +418,16 @@ var Carousel = ({
   const displayMode = useDisplayMode();
   const theme = material.useTheme();
   const isFullscreen = displayMode === "fullscreen";
-  const cardWidth = isFullscreen ? 340 : void 0;
+  const getCardWidth = () => {
+    if (typeof cardWidthProp === "number") {
+      return cardWidthProp;
+    }
+    if (typeof cardWidthProp === "object") {
+      return isFullscreen ? cardWidthProp.fullscreen ?? 340 : cardWidthProp.inline ?? 220;
+    }
+    return isFullscreen ? 340 : 220;
+  };
+  const cardWidth = getCardWidth();
   const checkScroll = () => {
     const el = scrollRef.current;
     if (!el) return;
@@ -501,7 +511,7 @@ var Carousel = ({
                 display: "none"
               }
             },
-            children: isFullscreen ? react.Children.map(children, (child) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: react.Children.map(children, (child) => /* @__PURE__ */ jsxRuntime.jsx(
               material.Box,
               {
                 sx: {
@@ -514,7 +524,7 @@ var Carousel = ({
                 },
                 children: child
               }
-            )) : children
+            ))
           }
         ) }),
         showEdgeGradients && canScrollLeft && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1083,10 +1093,15 @@ function ChatGPTSimulator({
     {
       sx: {
         minHeight: "100vh",
+        width: "100vw",
         display: "flex",
         fontFamily: theme.typography.fontFamily,
         backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary
+        color: theme.palette.text.primary,
+        boxSizing: "border-box",
+        "@media (max-width: 768px)": {
+          flexDirection: "column"
+        }
       },
       children: [
         showControls && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1094,7 +1109,7 @@ function ChatGPTSimulator({
           {
             sx: {
               width: "250px",
-              minWidth: "250px",
+              flexShrink: 0,
               padding: theme.spacing(5),
               display: "flex",
               flexDirection: "column",
@@ -1102,9 +1117,9 @@ function ChatGPTSimulator({
               overflowY: "auto",
               backgroundColor: theme.palette.mode === "light" ? theme.palette.background.paper : theme.palette.background.default,
               borderRight: `1px solid ${theme.palette.divider}`,
+              boxSizing: "border-box",
               "@media (max-width: 768px)": {
                 width: "100%",
-                minWidth: "unset",
                 borderRight: "none",
                 borderBottom: `1px solid ${theme.palette.divider}`,
                 padding: theme.spacing(4)
@@ -1183,15 +1198,14 @@ function ChatGPTSimulator({
           {
             sx: {
               flex: 1,
+              minWidth: 0,
               display: "flex",
               flexDirection: "column",
-              margin: "0 auto",
               overflowY: "auto",
               padding: isFullscreen ? 0 : `${theme.spacing(4)} 0 ${theme.spacing(4)} ${theme.spacing(6)}`,
               position: "relative",
-              width: bodyWidth,
-              maxWidth: bodyWidth,
-              height: isFullscreen ? "100vh" : "auto"
+              height: isFullscreen ? "100vh" : "auto",
+              boxSizing: "border-box"
             },
             children: [
               isFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1219,17 +1233,18 @@ function ChatGPTSimulator({
                 material.Box,
                 {
                   sx: {
-                    maxWidth: "48rem",
+                    maxWidth: bodyWidth === "100%" ? "48rem" : bodyWidth,
                     mx: "auto",
                     flex: 1,
                     position: "relative",
                     display: "flex",
                     width: "100%",
                     minWidth: 0,
-                    flexDirection: "column"
+                    flexDirection: "column",
+                    boxSizing: "border-box"
                   },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", maxWidth: "100%", flexDirection: "column", flexGrow: 1 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", maxWidth: "100%", flexDirection: "column", flexGrow: 1, minWidth: 0, boxSizing: "border-box" }, children: [
                       !isFullscreen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           material.Box,
@@ -1254,10 +1269,12 @@ function ChatGPTSimulator({
                                   borderRadius: theme.spacing(3),
                                   lineHeight: 1.5,
                                   fontSize: theme.typography.body1.fontSize,
-                                  overflow: "hidden",
-                                  minWidth: "100px",
-                                  backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[800],
-                                  color: theme.palette.text.primary
+                                  overflowWrap: "break-word",
+                                  wordBreak: "break-word",
+                                  minWidth: 0,
+                                  backgroundColor: theme.palette.grey[100],
+                                  color: theme.palette.text.primary,
+                                  boxSizing: "border-box"
                                 },
                                 children: userMessage
                               }
@@ -1272,12 +1289,14 @@ function ChatGPTSimulator({
                               position: "relative",
                               display: "flex",
                               width: "100%",
+                              minWidth: 0,
                               flexDirection: "column",
                               alignItems: "flex-end",
                               gap: theme.spacing(2),
                               textAlign: "start",
                               wordBreak: "break-word",
-                              whiteSpace: "normal"
+                              whiteSpace: "normal",
+                              boxSizing: "border-box"
                             },
                             children: /* @__PURE__ */ jsxRuntime.jsx(
                               material.Box,
@@ -1285,12 +1304,14 @@ function ChatGPTSimulator({
                                 sx: {
                                   display: "flex",
                                   width: "100%",
+                                  minWidth: 0,
                                   flexDirection: "column",
                                   gap: theme.spacing(1),
                                   "&:empty": { display: "none" },
-                                  "&:first-of-type": { pt: "1px" }
+                                  "&:first-of-type": { pt: "1px" },
+                                  boxSizing: "border-box"
                                 },
-                                children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%", wordBreak: "break-word" }, children: [
+                                children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%", minWidth: 0, wordBreak: "break-word", boxSizing: "border-box" }, children: [
                                   /* @__PURE__ */ jsxRuntime.jsxs(
                                     material.Box,
                                     {
@@ -1315,11 +1336,9 @@ function ChatGPTSimulator({
                                     {
                                       sx: {
                                         overflow: "hidden",
-                                        minWidth: "300px",
-                                        maxWidth: "100%",
-                                        "@media (max-width: 768px)": {
-                                          minWidth: "200px"
-                                        }
+                                        width: "100%",
+                                        minWidth: 0,
+                                        boxSizing: "border-box"
                                       },
                                       children: renderChildren()
                                     }
@@ -1338,9 +1357,11 @@ function ChatGPTSimulator({
                             display: "flex",
                             flexDirection: "column",
                             width: "100%",
+                            minWidth: 0,
                             height: "100%",
                             overflowY: "auto",
-                            paddingBottom: "80px"
+                            paddingBottom: "80px",
+                            boxSizing: "border-box"
                           },
                           children: renderChildren()
                         }
@@ -1355,9 +1376,11 @@ function ChatGPTSimulator({
                           left: 0,
                           right: 0,
                           margin: `${theme.spacing(4)} 0`,
+                          padding: `0 ${theme.spacing(10)} 0 ${theme.spacing(4)}`,
                           display: "flex",
                           justifyContent: "center",
-                          pointerEvents: "none"
+                          pointerEvents: "none",
+                          boxSizing: "border-box"
                         },
                         children: /* @__PURE__ */ jsxRuntime.jsx(
                           material.TextField,
@@ -1368,9 +1391,10 @@ function ChatGPTSimulator({
                               pointerEvents: "auto",
                               width: "100%",
                               maxWidth: "800px",
+                              boxSizing: "border-box",
                               "& .MuiOutlinedInput-root": {
                                 borderRadius: theme.spacing(8),
-                                backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[800],
+                                backgroundColor: theme.palette.grey[100],
                                 "& fieldset": {
                                   borderColor: theme.palette.mode === "light" ? theme.palette.grey[300] : theme.palette.grey[700]
                                 },