sunpeak 0.5.39 → 0.6.1

package/dist/providers/openai/types.d.ts

@@ -9,7 +9,7 @@ export type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject,
     theme: Theme;
     userAgent: UserAgent;
     locale: string;
-    maxHeight: number;
+    maxHeight: number | undefined;
     displayMode: DisplayMode;
     safeArea: SafeArea;
     view: View | null;

package/dist/providers/types.d.ts

@@ -12,7 +12,7 @@ export type WidgetGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject,
     theme: Theme;
     userAgent: UserAgent;
     locale: string;
-    maxHeight: number;
+    maxHeight: number | undefined;
     displayMode: DisplayMode;
     safeArea: SafeArea;
     view: View | null;

package/dist/style.css

@@ -5,6 +5,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-pan-x: initial;
       --tw-pan-y: initial;
       --tw-pinch-zoom: initial;
@@ -125,6 +130,7 @@
     --tracking-tight: var(--font-tracking-tight);
     --shadow-hairline: var(--shadow-hairline);
     --color-white: var(--white);
+    --color-black: var(--black);
   }
 
   :root, :where([data-theme]) {
@@ -3072,7 +3078,11 @@
   }
 }
 
-@layer components;
+@layer components {
+  :has(.sunpeak-simulator-root) :where([role="listbox"], [data-radix-select-content], [data-radix-popper-content-wrapper]) {
+    z-index: 100 !important;
+  }
+}
 
 @layer utilities {
   .pointer-events-auto {
@@ -3127,6 +3137,22 @@
     inset-inline-start: calc(var(--spacing) * -2);
   }
 
+  .start-0 {
+    inset-inline-start: calc(var(--spacing) * 0);
+  }
+
+  .start-4 {
+    inset-inline-start: calc(var(--spacing) * 4);
+  }
+
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
+
+  .end-4 {
+    inset-inline-end: calc(var(--spacing) * 4);
+  }
+
   .-top-1\.5 {
     top: calc(var(--spacing) * -1.5);
   }
@@ -3139,8 +3165,12 @@
     top: 50%;
   }
 
-  .top-14 {
-    top: calc(var(--spacing) * 14);
+  .top-12 {
+    top: calc(var(--spacing) * 12);
+  }
+
+  .top-18 {
+    top: calc(var(--spacing) * 18);
   }
 
   .right-0 {
@@ -3159,10 +3189,6 @@
     left: calc(var(--spacing) * 0);
   }
 
-  .left-1\/2 {
-    left: 50%;
-  }
-
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
@@ -3175,6 +3201,10 @@
     z-index: 20;
   }
 
+  .z-30 {
+    z-index: 30;
+  }
+
   .z-40 {
     z-index: 40;
   }
@@ -3223,8 +3253,8 @@
     }
   }
 
-  .m-auto {
-    margin: auto;
+  .mx-0 {
+    margin-inline: calc(var(--spacing) * 0);
   }
 
   .mx-auto {
@@ -3319,6 +3349,10 @@
     height: calc(var(--spacing) * 12);
   }
 
+  .h-\[3\.25rem\] {
+    height: 3.25rem;
+  }
+
   .h-auto {
     height: auto;
   }
@@ -3367,10 +3401,18 @@
     width: calc(var(--spacing) * 56);
   }
 
+  .w-auto {
+    width: auto;
+  }
+
   .w-full {
     width: 100%;
   }
 
+  .max-w-\[40rem\] {
+    max-width: 40rem;
+  }
+
   .max-w-\[48rem\] {
     max-width: 48rem;
   }
@@ -3379,10 +3421,6 @@
     max-width: 70%;
   }
 
-  .max-w-\[calc\(100vw-2rem\)\] {
-    max-width: calc(100vw - 2rem);
-  }
-
   .max-w-full {
     max-width: 100%;
   }
@@ -3415,16 +3453,15 @@
     flex-grow: 1;
   }
 
-  .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .transform {
+    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
@@ -3548,10 +3585,6 @@
     overflow: visible;
   }
 
-  .overflow-x-auto {
-    overflow-x: auto;
-  }
-
   .overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -3592,6 +3625,11 @@
     border-radius: var(--radius-xl);
   }
 
+  .rounded-r-md {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -3602,6 +3640,11 @@
     border-width: 2px;
   }
 
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
@@ -3632,14 +3675,20 @@
     background-color: #3a3a3a;
   }
 
-  .bg-\[var\(--color-background-primary\)\] {
-    background-color: var(--color-background-primary);
-  }
-
   .bg-\[var\(--color-background-primary-soft\)\] {
     background-color: var(--color-background-primary-soft);
   }
 
+  .bg-black\/50 {
+    background-color: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/50 {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+
   .bg-sidebar {
     background-color: var(--color-surface-secondary);
   }
@@ -3652,6 +3701,10 @@
     background-color: var(--color-surface-secondary);
   }
 
+  .bg-white {
+    background-color: var(--color-white);
+  }
+
   .bg-gradient-to-l {
     --tw-gradient-position: to left in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -3679,6 +3732,10 @@
     padding: calc(var(--spacing) * 0);
   }
 
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
   }
@@ -3903,13 +3960,13 @@
     opacity: .6;
   }
 
-  .shadow-\[0px_0px_0px_1px_var\(--border-heavy\)\,0px_4px_12px_rgba\(0\,0\,0\,0\.12\)\] {
-    --tw-shadow: 0px 0px 0px 1px var(--tw-shadow-color, var(--border-heavy)), 0px 4px 12px var(--tw-shadow-color, #0000001f);
+  .shadow-\[0px_0px_0px_1px_\#fff3\,0px_4px_12px_rgba\(0\,0\,0\,0\.12\)\] {
+    --tw-shadow: 0px 0px 0px 1px var(--tw-shadow-color, #fff3), 0px 4px 12px var(--tw-shadow-color, #0000001f);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .shadow-\[0px_0px_0px_1px_var\(--border-heavy\)\,0px_6px_20px_rgba\(0\,0\,0\,0\.1\)\] {
-    --tw-shadow: 0px 0px 0px 1px var(--tw-shadow-color, var(--border-heavy)), 0px 6px 20px var(--tw-shadow-color, #0000001a);
+  .shadow-\[0px_0px_0px_1px_\#fff3\,0px_6px_20px_rgba\(0\,0\,0\,0\.1\)\] {
+    --tw-shadow: 0px 0px 0px 1px var(--tw-shadow-color, #fff3), 0px 6px 20px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -3998,28 +4055,99 @@
   }
 
   @media not all and (min-width: 768px) {
-    .max-md\:hidden {
-      display: none;
+    .max-md\:fixed {
+      position: fixed;
+    }
+
+    .max-md\:inset-y-0 {
+      inset-block: calc(var(--spacing) * 0);
+    }
+
+    .max-md\:left-0 {
+      left: calc(var(--spacing) * 0);
+    }
+
+    .max-md\:z-\[100\] {
+      z-index: 100;
+    }
+
+    .max-md\:-translate-x-full {
+      --tw-translate-x: -100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .max-md\:translate-x-0 {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .max-md\:transition-transform {
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
+    .max-md\:duration-300 {
+      --tw-duration: .3s;
+      transition-duration: .3s;
+    }
+  }
+
+  @media not all and (min-width: 576px) {
+    .max-sm\:-mx-\[1rem\] {
+      margin-inline: -1rem;
+    }
+
+    .max-sm\:w-\[100cqw\] {
+      width: 100cqw;
+    }
+
+    .max-sm\:overflow-hidden {
+      overflow: hidden;
     }
   }
 
   @media (min-width: 576px) {
+    .sm\:start-0 {
+      inset-inline-start: calc(var(--spacing) * 0);
+    }
+
+    .sm\:end-0 {
+      inset-inline-end: calc(var(--spacing) * 0);
+    }
+
+    .sm\:top-\[3\.25rem\] {
+      top: 3.25rem;
+    }
+
+    .sm\:w-full {
+      width: 100%;
+    }
+
     .sm\:rounded-3xl {
       border-radius: var(--radius-3xl);
     }
   }
 
   @media (min-width: 768px) {
-    .md\:left-\[calc\(50vw\+7rem\)\] {
-      left: calc(50vw + 7rem);
+    .md\:relative {
+      position: relative;
     }
 
-    .md\:flex {
-      display: flex;
+    .md\:z-auto {
+      z-index: auto;
     }
 
-    .md\:max-w-\[calc\(100vw-16rem\)\] {
-      max-width: calc(100vw - 16rem);
+    .md\:-mx-4 {
+      margin-inline: calc(var(--spacing) * -4);
+    }
+
+    .md\:hidden {
+      display: none;
+    }
+
+    .md\:p-10 {
+      padding: calc(var(--spacing) * 10);
     }
 
     .md\:pt-8 {
@@ -4027,6 +4155,16 @@
     }
   }
 
+  @media (min-width: 1024px) {
+    .lg\:max-w-\[48rem\] {
+      max-width: 48rem;
+    }
+  }
+
+  .dark\:bg-\[\#212121\]:where([data-theme="dark"], [data-theme="dark"] *) {
+    background-color: #212121;
+  }
+
   .dark\:bg-\[\#303030\]:where([data-theme="dark"], [data-theme="dark"] *) {
     background-color: #303030;
   }
@@ -4059,6 +4197,31 @@
   initial-value: 0;
 }
 
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-pan-x {
   syntax: "*";
   inherits: false

package/package.json

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

package/template/.sunpeak/dev.tsx

@@ -6,7 +6,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ChatGPTSimulator, type Simulation } from 'sunpeak';
 import { SIMULATIONS } from '../src/simulations';
-import * as Resources from '../src/components/resources';
+import * as Resources from '../src/resources';
 import '../src/styles/globals.css';
 
 /**
@@ -25,7 +25,7 @@ function getResourceComponentFromURI(uri: string): React.ComponentType {
   if (!component) {
     throw new Error(
       `Resource component "${componentName}" not found. ` +
-        `Make sure it's exported from src/components/resources/index.ts`
+        `Make sure it's exported from src/resources/index.ts`
     );
   }
 

package/template/README.md

@@ -11,7 +11,7 @@ pnpm install
 pnpm dev
 ```
 
-That's it! Edit the resource files in [./src/components/resources/](./src/components/resources/) to build your resource UI.
+That's it! Edit the resource files in [./src/resources/](./src/resources/) to build your resource UI.
 
 ## Commands
 
@@ -34,7 +34,7 @@ The template includes a minimal test setup with Vitest. You can add additional t
 
 **Do not customize (required by `sunpeak build`):**
 
-- `src/components/resources/` - Resource files must be here
+- `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`)
 
@@ -87,7 +87,7 @@ This creates optimized builds in `dist/chatgpt/`:
 - `dist/chatgpt/counter.js`
 - `dist/chatgpt/albums.js`
 - `dist/chatgpt/carousel.js`
-- _(One .js file per resource in src/components/resources/)_
+- _(One .js file per resource in src/resources/)_
 
 Each file is a self-contained bundle with CSS inlined. Host these files and reference them as resources in your production MCP server.