sunpeak 0.8.1 → 0.8.5

package/dist/style.css

@@ -27,6 +27,7 @@
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -118,6 +119,10 @@
     --text-xs--line-height: var(--font-text-xs-line-height);
     --text-xs--font-weight: var(--font-text-xs-weight);
     --text-xs--letter-spacing: var(--font-text-xs-tracking);
+    --text-xl: var(--font-heading-md-size);
+    --text-xl--line-height: var(--font-heading-md-line-height);
+    --text-xl--font-weight: var(--font-text-lg-weight);
+    --text-xl--letter-spacing: var(--font-heading-md-tracking);
     --text-2xl: var(--font-heading-lg-size);
     --text-2xl--line-height: var(--font-heading-lg-line-height);
     --text-2xl--font-weight: var(--font-text-lg-weight);
@@ -3318,6 +3323,10 @@
     margin-inline-end: calc(var(--spacing) * 2);
   }
 
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -3381,6 +3390,10 @@
     display: inline;
   }
 
+  .table {
+    display: table;
+  }
+
   .aspect-\[4\/3\] {
     aspect-ratio: 4 / 3;
   }
@@ -3414,6 +3427,10 @@
     height: calc(var(--spacing) * 5);
   }
 
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -3490,6 +3507,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
   .w-7 {
     width: calc(var(--spacing) * 7);
   }
@@ -3664,6 +3685,10 @@
     gap: calc(var(--spacing) * 3);
   }
 
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
   :where(.space-y-0\.5 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
@@ -3959,6 +3984,10 @@
     padding: calc(var(--spacing) * 2);
   }
 
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -4015,6 +4044,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -4023,6 +4056,10 @@
     padding-top: calc(var(--spacing) * 2);
   }
 
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
   .pr-12 {
     padding-right: calc(var(--spacing) * 12);
   }
@@ -4101,6 +4138,13 @@
     font-weight: var(--tw-font-weight, var(--text-sm--font-weight));
   }
 
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-xl--font-weight));
+  }
+
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -4150,6 +4194,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+
   .break-words {
     overflow-wrap: break-word;
   }
@@ -4170,6 +4219,10 @@
     white-space: pre-wrap;
   }
 
+  .text-\[\#000000\] {
+    color: #000;
+  }
+
   .text-\[var\(--color-error\)\] {
     color: var(--color-error);
   }
@@ -4186,6 +4239,10 @@
     color: var(--color-white);
   }
 
+  .uppercase {
+    text-transform: uppercase;
+  }
+
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -4754,6 +4811,11 @@
   inherits: false
 }
 
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.8.1",
+  "version": "0.8.5",
   "description": "The ChatGPT App framework. Quickstart, build, & test your ChatGPT App locally!",
   "type": "module",
   "main": "./dist/index.cjs",

package/template/README.md

@@ -2,7 +2,7 @@
 
 A ChatGPT App UI built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
 
-For an initial overview of your new app and the sunpeak API, refer to the [documentation](https://docs.sunpeak.ai/template/project-structure).
+For an initial overview of your new app and a detailed API reference, refer to the [documentation](https://docs.sunpeak.ai/template/project-structure).
 
 ## Quickstart
 
@@ -19,26 +19,27 @@ That's it! Edit the resource files in [./src/resources/](./src/resources/) to bu
 sunpeak dev            # Start development server
 sunpeak build          # Build all resources for production
 sunpeak mcp            # Start MCP server with auto-reload
-pnpm test           # Run tests with Vitest
+pnpm test              # Run tests with Vitest
 ```
 
 The template includes a minimal test setup with Vitest. You can add additional tooling (linting, formatting, type-checking) as needed for your project.
 
 ### Customization
 
+**Do not customize (required by `sunpeak` commands):**
+
+- `src/resources/` - Resource files must be here
+- `src/simulations/` - Simulation files must be here
+- Resource file naming: `*-resource.tsx` (e.g., `counter-resource.tsx`)
+- Simulation file naming: `*-simulation.tsx` (e.g., `counter-simulation.tsx`)
+- `src/index-resource.tsx` - Build template (must have `// RESOURCE_IMPORT` and `// RESOURCE_MOUNT` comments)
+
 **You can customize:**
 
 - Package.json scripts - Add your own tooling (lint, format, typecheck, etc.)
 - Component structure within `src/components/`
 - Package manager (pnpm, npm, or yarn auto-detected)
-
-**Do not customize (required by `sunpeak build`):**
-
-- `src/resources/` - Resource files must be here
-- `src/index-resource.tsx` - Build template (must have `// RESOURCE_IMPORT` and `// RESOURCE_MOUNT` comments)
-- Resource file naming: `*-resource.tsx` (e.g., `counter-resource.tsx`)
-
-If you need to customize these paths, create a custom build script instead of using `sunpeak build`.
+- Pretty much everything else!
 
 ## Testing
 
@@ -70,7 +71,7 @@ ngrok http 6766
 
 You can then connect to the tunnel forwarding URL at the `/mcp` path from ChatGPT **in developer mode** to see your UI in action: `User > Settings > Apps & Connectors > Create`
 
-Once your app is connected, send the name of a tool, like `show counter`, to ChatGPT.
+Once your app is connected, send the name of the app and a tool, like `/sunpeak show counter`, to ChatGPT.
 
 When you make changes to the UI, refresh your app in ChatGPT after the MCP server has finished rebuilding your app: `User > Settings > Apps & Connectors > My App > Refresh`
 
@@ -84,12 +85,26 @@ sunpeak build
 
 This creates optimized builds in `dist/`:
 
-- `dist/counter.js`
 - `dist/albums.js`
-- `dist/carousel.js`
+- `dist/albums.json`
+- `dist/counter.js`
+- `dist/counter.json`
 - _(One .js file per resource in src/resources/)_
+- _(One .json file per resource in src/resources/)_
+
+Each `.js` file is a self-contained bundle with CSS inlined. Host these files and reference them as resources in your production MCP server.
+
+Each `.json` file is a copy of each of your resource MCP metadata files `src/resource/*-resource.json`. The copy is identical, but with a unique `uri` field added that will cache-bust earlier resource versions pre-loaded in ChatGPT.
+
+## Add a new UI (Resource)
+
+To add a new UI (MCP Resource), simply create the following files:
+
+- `src/resource/NAME-resource.tsx`
+- `src/resource/NAME-resource.json`
+- `src/simulations/NAME-TOOLNAME-simulation.json`
 
-Each file is a self-contained bundle with CSS inlined. Host these files and reference them as resources in your production MCP server.
+Only the resource files are required to generate a production build and ship a UI. Create the simulation file if you want to preview your resource in `sunpeak dev` or `sunpeak mcp`.
 
 ## Resources