sunpeak 0.3.8 → 0.4.2

package/dist/style.css

@@ -35,6 +35,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -54,7 +55,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-outline-style: solid;
     }
   }
 }
@@ -69,6 +69,7 @@
     --breakpoint-lg: 1024px;
     --breakpoint-xl: 1280px;
     --breakpoint-2xl: 1536px;
+    --container-md: 28rem;
     --leading-tight: 1.25;
     --leading-normal: 1.5;
     --default-transition-duration: .15s;
@@ -106,6 +107,14 @@
     --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-3xl: var(--font-heading-xl-size);
+    --text-3xl--line-height: var(--font-heading-xl-line-height);
+    --text-3xl--font-weight: var(--font-text-lg-weight);
+    --text-3xl--letter-spacing: var(--font-heading-xl-tracking);
+    --text-6xl: var(--font-heading-4xl-size);
+    --text-6xl--line-height: var(--font-heading-4xl-line-height);
+    --text-6xl--font-weight: var(--font-text-lg-weight);
+    --text-6xl--letter-spacing: var(--font-heading-4xl-tracking);
     --tracking-wide: var(--font-tracking-wide);
     --tracking-normal: var(--font-tracking-normal);
     --tracking-tight: var(--font-tracking-tight);
@@ -3051,6 +3060,10 @@
 @layer components;
 
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+
   .pointer-events-none {
     pointer-events: none;
   }
@@ -3079,6 +3092,10 @@
     position: relative;
   }
 
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -3099,6 +3116,10 @@
     right: calc(var(--spacing) * 6);
   }
 
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+
   .bottom-20 {
     bottom: calc(var(--spacing) * 20);
   }
@@ -3163,6 +3184,10 @@
     }
   }
 
+  .m-auto {
+    margin: auto;
+  }
+
   .mx-auto {
     margin-inline: auto;
   }
@@ -3202,6 +3227,10 @@
     overflow: hidden;
   }
 
+  .block {
+    display: block;
+  }
+
   .contents {
     display: contents;
   }
@@ -3222,6 +3251,14 @@
     display: inline-flex;
   }
 
+  .aspect-\[4\/3\] {
+    aspect-ratio: 4 / 3;
+  }
+
+  .aspect-\[5\/3\] {
+    aspect-ratio: 5 / 3;
+  }
+
   .aspect-square {
     aspect-ratio: 1;
   }
@@ -3259,6 +3296,10 @@
     max-height: min(400px, 100vh - 200px);
   }
 
+  .max-h-full {
+    max-height: 100%;
+  }
+
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
@@ -3279,6 +3320,10 @@
     width: calc(var(--spacing) * 12);
   }
 
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -3303,6 +3348,10 @@
     max-width: 100%;
   }
 
+  .max-w-md {
+    max-width: var(--container-md);
+  }
+
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -3323,6 +3372,10 @@
     flex: none;
   }
 
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
   .grow {
     flex-grow: 1;
   }
@@ -3353,6 +3406,10 @@
     flex-direction: column;
   }
 
+  .flex-row {
+    flex-direction: row;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -3401,6 +3458,12 @@
     margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-6 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
@@ -3435,6 +3498,10 @@
     border-radius: var(--radius-3xl);
   }
 
+  .rounded-\[10px\] {
+    border-radius: 10px;
+  }
+
   .rounded-\[18px\] {
     border-radius: 18px;
   }
@@ -3451,6 +3518,10 @@
     border-radius: var(--radius-full);
   }
 
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -3487,6 +3558,10 @@
     border-color: var(--color-border-subtle);
   }
 
+  .border-transparent {
+    border-color: #0000;
+  }
+
   .bg-\[var\(--color-background-primary\)\] {
     background-color: var(--color-background-primary);
   }
@@ -3503,6 +3578,10 @@
     background-color: var(--color-surface);
   }
 
+  .bg-surface-secondary {
+    background-color: var(--color-surface-secondary);
+  }
+
   .bg-gradient-to-l {
     --tw-gradient-position: to left in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -3518,6 +3597,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .object-contain {
+    object-fit: contain;
+  }
+
   .object-cover {
     object-fit: cover;
   }
@@ -3526,14 +3609,34 @@
     padding: calc(var(--spacing) * 0);
   }
 
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
 
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+
+  .p-\[1px\] {
+    padding: 1px;
+  }
+
   .p-\[var\(--menu-gutter\)\] {
     padding: var(--menu-gutter);
   }
 
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -3542,6 +3645,10 @@
     padding-inline: calc(var(--spacing) * 5);
   }
 
+  .px-40 {
+    padding-inline: calc(var(--spacing) * 40);
+  }
+
   .px-\[var\(--control-gutter-sm\)\] {
     padding-inline: var(--control-gutter-sm);
   }
@@ -3550,6 +3657,10 @@
     padding-inline: var(--menu-item-padding-x, 12px);
   }
 
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * .5);
+  }
+
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -3558,6 +3669,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
+
   .py-\[var\(--menu-item-padding-y\,8px\)\] {
     padding-block: var(--menu-item-padding-y, 8px);
   }
@@ -3574,6 +3689,10 @@
     padding-bottom: calc(var(--spacing) * 10);
   }
 
+  .text-center {
+    text-align: center;
+  }
+
   .text-left {
     text-align: left;
   }
@@ -3582,6 +3701,20 @@
     text-align: start;
   }
 
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-3xl--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-3xl--font-weight));
+  }
+
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-6xl--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-6xl--font-weight));
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3630,6 +3763,11 @@
     line-height: var(--leading-tight);
   }
 
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -3677,10 +3815,18 @@
     color: var(--menu-font-size);
   }
 
+  .text-primary {
+    color: var(--color-text-primary);
+  }
+
   .text-secondary {
     color: var(--color-text-secondary);
   }
 
+  .opacity-60 {
+    opacity: .6;
+  }
+
   .opacity-75 {
     opacity: .75;
   }
@@ -3704,6 +3850,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-sm {
+    --tw-shadow: var(--shadow-100);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-xl {
     --tw-shadow: var(--shadow-400);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3713,6 +3864,11 @@
     box-shadow: var(--shadow), var(--shadow-hairline);
   }
 
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
   .filter {
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
@@ -3906,6 +4062,14 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
+    .hover\:bg-transparent:hover {
+      background-color: #0000;
+    }
+
+    .hover\:opacity-100:hover {
+      opacity: 1;
+    }
+
     .hover\:before\:shadow-\[0_0_0_1px_var\(--input-outline-border-color-hover\)_inset\]:hover:before {
       content: var(--tw-content);
       --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--input-outline-border-color-hover)) inset;
@@ -3941,6 +4105,10 @@
   }
 
   @media (min-width: 768px) {
+    .md\:block {
+      display: block;
+    }
+
     .md\:flex {
       display: flex;
     }
@@ -3954,6 +4122,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+
+  .\[\&\:hover\]\:bg-transparent:hover {
+    background-color: #0000;
+  }
 }
 
 @property --tw-translate-x {
@@ -4141,6 +4313,12 @@
   initial-value: 0 0 #0000;
 }
 
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-blur {
   syntax: "*";
   inherits: false
@@ -4240,9 +4418,3 @@
   inherits: false;
   initial-value: 1;
 }
-
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.3.8",
+  "version": "0.4.2",
   "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui components.",
   "type": "module",
   "main": "./dist/index.cjs",

package/template/data/albums.json

@@ -0,0 +1,112 @@
+{
+  "albums": [
+    {
+      "id": "summer-escape",
+      "title": "Summer Slice",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
+      "photos": [
+        {
+          "id": "s1",
+          "title": "Waves",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        },
+        {
+          "id": "s2",
+          "title": "Palm trees",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
+        },
+        {
+          "id": "s3",
+          "title": "Sunset",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        }
+      ]
+    },
+    {
+      "id": "city-lights",
+      "title": "Pepperoni Nights",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png",
+      "photos": [
+        {
+          "id": "c1",
+          "title": "Downtown",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        },
+        {
+          "id": "c2",
+          "title": "Neon",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
+        },
+        {
+          "id": "c3",
+          "title": "Streets",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        }
+      ]
+    },
+    {
+      "id": "into-the-woods",
+      "title": "Truffle Forest",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png",
+      "photos": [
+        {
+          "id": "n1",
+          "title": "Forest path",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        },
+        {
+          "id": "n2",
+          "title": "Misty",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
+        },
+        {
+          "id": "n3",
+          "title": "Waterfall",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        }
+      ]
+    },
+    {
+      "id": "pizza-tour",
+      "title": "Pizza tour",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
+      "photos": [
+        {
+          "id": "tonys-pizza-napoletana",
+          "title": "Tony's Pizza Napoletana",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        },
+        {
+          "id": "golden-boy-pizza",
+          "title": "Golden Boy Pizza",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
+        },
+        {
+          "id": "pizzeria-delfina-mission",
+          "title": "Pizzeria Delfina (Mission)",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        },
+        {
+          "id": "ragazza",
+          "title": "Ragazza",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
+        },
+        {
+          "id": "del-popolo",
+          "title": "Del Popolo",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        },
+        {
+          "id": "square-pie-guys",
+          "title": "Square Pie Guys",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
+        },
+        {
+          "id": "zero-zero",
+          "title": "Zero Zero",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        }
+      ]
+    }
+  ]
+}

package/template/data/places.json

@@ -0,0 +1,49 @@
+{
+  "places": [
+    {
+      "id": "1",
+      "name": "Lady Bird Lake",
+      "rating": 4.5,
+      "category": "Waterfront",
+      "location": "Austin",
+      "image": "https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop",
+      "description": "Scenic lake perfect for kayaking, paddleboarding, and trails."
+    },
+    {
+      "id": "2",
+      "name": "Texas State Capitol",
+      "rating": 4.8,
+      "category": "Historic Site",
+      "location": "Austin",
+      "image": "https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop",
+      "description": "Stunning capitol building with free tours and beautiful grounds."
+    },
+    {
+      "id": "3",
+      "name": "The Paramount Theatre",
+      "rating": 4.7,
+      "category": "Architecture",
+      "location": "Austin",
+      "image": "https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop",
+      "description": "Century-old performance and movie theatre in the heart of downtown Austin."
+    },
+    {
+      "id": "4",
+      "name": "Zilker Park",
+      "rating": 4.7,
+      "category": "Park",
+      "location": "Austin",
+      "image": "https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop",
+      "description": "Popular park with trails, sports fields, and Barton Springs Pool."
+    },
+    {
+      "id": "5",
+      "name": "South Congress Avenue",
+      "rating": 4.6,
+      "category": "Landmark",
+      "location": "Austin",
+      "image": "https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop",
+      "description": "Vibrant street with unique shops, restaurants, and live music."
+    }
+  ]
+}

package/template/dev/main.tsx

@@ -1,67 +1,12 @@
+import '../src/styles/globals.css';
+
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ChatGPTSimulator } from 'sunpeak';
-import { App } from '../src/App';
-
-const toolOutput = {
-  places: [
-    {
-      id: '1',
-      name: 'Lady Bird Lake',
-      rating: 4.5,
-      category: 'Waterfront',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop',
-      description: 'Scenic lake perfect for kayaking, paddleboarding, and trails.',
-    },
-    {
-      id: '2',
-      name: 'Texas State Capitol',
-      rating: 4.8,
-      category: 'Historic Site',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop',
-      description: 'Stunning capitol building with free tours and beautiful grounds.',
-    },
-    {
-      id: '3',
-      name: 'The Paramount Theatre',
-      rating: 4.7,
-      category: 'Architecture',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop',
-      description: 'Century-old performance and movie theatre in the heart of downtown Austin.',
-    },
-    {
-      id: '4',
-      name: 'Zilker Park',
-      rating: 4.7,
-      category: 'Park',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop',
-      description: 'Popular park with trails, sports fields, and Barton Springs Pool.',
-    },
-    {
-      id: '5',
-      name: 'South Congress Avenue',
-      rating: 4.6,
-      category: 'Landmark',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop',
-      description: 'Vibrant street with unique shops, restaurants, and live music.',
-    },
-  ],
-};
+import { simulations } from '../src/components';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ChatGPTSimulator
-      appName="Splorin"
-      appIcon="✈️"
-      userMessage="Show me popular places to visit in Austin Texas"
-      toolOutput={toolOutput}
-    >
-      <App />
-    </ChatGPTSimulator>
+    <ChatGPTSimulator simulations={simulations} />
   </StrictMode>
 );

package/template/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/dev/main.tsx"></script>
+    <script type="module" src="dev/main.tsx"></script>
   </body>
 </html>