sunpeak 0.5.41 → 0.6.1

package/dist/style.css

@@ -130,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]) {
@@ -3077,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 {
@@ -3124,6 +3129,10 @@
     position: sticky;
   }
 
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
   .-start-2 {
     inset-inline-start: calc(var(--spacing) * -2);
   }
@@ -3156,8 +3165,12 @@
     top: 50%;
   }
 
-  .top-4 {
-    top: calc(var(--spacing) * 4);
+  .top-12 {
+    top: calc(var(--spacing) * 12);
+  }
+
+  .top-18 {
+    top: calc(var(--spacing) * 18);
   }
 
   .right-0 {
@@ -3188,6 +3201,10 @@
     z-index: 20;
   }
 
+  .z-30 {
+    z-index: 30;
+  }
+
   .z-40 {
     z-index: 40;
   }
@@ -3608,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;
@@ -3618,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;
@@ -3648,14 +3675,20 @@
     background-color: #3a3a3a;
   }
 
-  .bg-\[\#212121\] {
-    background-color: #212121;
-  }
-
   .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);
   }
@@ -3668,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));
@@ -3695,6 +3732,10 @@
     padding: calc(var(--spacing) * 0);
   }
 
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
   }
@@ -4014,8 +4055,41 @@
   }
 
   @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;
     }
   }
 
@@ -4056,12 +4130,20 @@
   }
 
   @media (min-width: 768px) {
+    .md\:relative {
+      position: relative;
+    }
+
+    .md\:z-auto {
+      z-index: auto;
+    }
+
     .md\:-mx-4 {
       margin-inline: calc(var(--spacing) * -4);
     }
 
-    .md\:flex {
-      display: flex;
+    .md\:hidden {
+      display: none;
     }
 
     .md\:p-10 {
@@ -4079,6 +4161,10 @@
     }
   }
 
+  .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;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.5.41",
+  "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.