sunpeak 0.6.1 → 0.6.5

package/dist/style.css

@@ -14,6 +14,7 @@
       --tw-pan-y: initial;
       --tw-pinch-zoom: initial;
       --tw-space-y-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
@@ -117,6 +118,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-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);
+    --text-2xl--letter-spacing: var(--font-heading-lg-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);
@@ -3133,6 +3138,14 @@
     inset: calc(var(--spacing) * 0);
   }
 
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+
   .-start-2 {
     inset-inline-start: calc(var(--spacing) * -2);
   }
@@ -3165,6 +3178,14 @@
     top: 50%;
   }
 
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
+
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+
   .top-12 {
     top: calc(var(--spacing) * 12);
   }
@@ -3181,10 +3202,26 @@
     right: calc(var(--spacing) * 2);
   }
 
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+
+  .right-auto {
+    right: auto;
+  }
+
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
 
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
+
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -3193,6 +3230,14 @@
     left: calc(var(--spacing) * 2);
   }
 
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+
+  .left-\[340px\] {
+    left: 340px;
+  }
+
   .z-10 {
     z-index: 10;
   }
@@ -3269,6 +3314,26 @@
     margin-block: auto;
   }
 
+  .me-2 {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+
   .mt-auto {
     margin-top: auto;
   }
@@ -3333,10 +3398,22 @@
     height: calc(var(--spacing) * 6);
   }
 
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
 
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -3345,14 +3422,34 @@
     height: calc(var(--spacing) * 8);
   }
 
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
 
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
+
   .h-\[3\.25rem\] {
     height: 3.25rem;
   }
 
+  .h-\[18px\] {
+    height: 18px;
+  }
+
+  .h-\[calc\(100\%-11rem\)\] {
+    height: calc(100% - 11rem);
+  }
+
   .h-auto {
     height: auto;
   }
@@ -3377,10 +3474,22 @@
     min-height: calc(var(--spacing) * 8);
   }
 
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
 
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+
   .w-7 {
     width: calc(var(--spacing) * 7);
   }
@@ -3393,6 +3502,10 @@
     width: calc(var(--spacing) * 12);
   }
 
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -3401,6 +3514,14 @@
     width: calc(var(--spacing) * 56);
   }
 
+  .w-\[18px\] {
+    width: 18px;
+  }
+
+  .w-\[340px\] {
+    width: 340px;
+  }
+
   .w-auto {
     width: auto;
   }
@@ -3421,6 +3542,14 @@
     max-width: 70%;
   }
 
+  .max-w-\[75\%\] {
+    max-width: 75%;
+  }
+
+  .max-w-\[330px\] {
+    max-width: 330px;
+  }
+
   .max-w-full {
     max-width: 100%;
   }
@@ -3471,6 +3600,10 @@
     touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3573,6 +3706,30 @@
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.divide-y > :not(:last-child)) {
+    --tw-divide-y-reverse: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-top-style: var(--tw-border-style);
+    border-top-width: calc(1px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  }
+
+  :where(.divide-black\/5 > :not(:last-child)) {
+    border-color: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.divide-black\/5 > :not(:last-child)) {
+      border-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
+
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   .overflow-auto {
     overflow: auto;
   }
@@ -3621,6 +3778,10 @@
     border-radius: var(--radius-md);
   }
 
+  .rounded-none {
+    border-radius: 0;
+  }
+
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -3635,6 +3796,11 @@
     border-width: 1px;
   }
 
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -3659,6 +3825,26 @@
     border-color: #0000000f;
   }
 
+  .border-black\/5 {
+    border-color: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-black\/5 {
+      border-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
+
+  .border-black\/10 {
+    border-color: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-black\/10 {
+      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
+
   .border-default {
     border-color: var(--color-border);
   }
@@ -3679,6 +3865,16 @@
     background-color: var(--color-background-primary-soft);
   }
 
+  .bg-black\/5 {
+    background-color: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/5 {
+      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
+
   .bg-black\/50 {
     background-color: var(--color-black);
   }
@@ -3715,6 +3911,25 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
+  .bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .from-black\/15 {
+    --tw-gradient-from: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-black\/15 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 15%, transparent);
+    }
+  }
+
+  .from-black\/15 {
+    --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));
+  }
+
   .to-transparent {
     --tw-gradient-to: transparent;
     --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));
@@ -3804,6 +4019,10 @@
     padding-top: calc(var(--spacing) * 0);
   }
 
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
   .pr-12 {
     padding-right: calc(var(--spacing) * 12);
   }
@@ -3812,6 +4031,10 @@
     padding-bottom: calc(var(--spacing) * 3);
   }
 
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
@@ -3836,6 +4059,13 @@
     font-family: var(--font-mono);
   }
 
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-2xl--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-2xl--font-weight));
+  }
+
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
@@ -3956,6 +4186,11 @@
     color: var(--color-white);
   }
 
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
   .opacity-60 {
     opacity: .6;
   }
@@ -3985,6 +4220,26 @@
     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);
+  }
+
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring-black\/10 {
+    --tw-ring-color: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-black\/10 {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
+
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -4005,6 +4260,12 @@
     backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   }
 
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4017,6 +4278,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -4032,10 +4299,24 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
+    .hover\:border-transparent:hover {
+      border-color: #0000;
+    }
+
     .hover\:bg-\[\#6a6a6a\]:hover {
       background-color: #6a6a6a;
     }
 
+    .hover\:bg-black\/5:hover {
+      background-color: var(--color-black);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-black\/5:hover {
+        background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+      }
+    }
+
     .hover\:bg-transparent:hover {
       background-color: #0000;
     }
@@ -4120,6 +4401,10 @@
       top: 3.25rem;
     }
 
+    .sm\:h-\[calc\(100\%-14rem\)\] {
+      height: calc(100% - 14rem);
+    }
+
     .sm\:w-full {
       width: 100%;
     }
@@ -4127,6 +4412,14 @@
     .sm\:rounded-3xl {
       border-radius: var(--radius-3xl);
     }
+
+    .sm\:p-5 {
+      padding: calc(var(--spacing) * 5);
+    }
+
+    .sm\:px-5 {
+      padding-inline: calc(var(--spacing) * 5);
+    }
   }
 
   @media (min-width: 768px) {
@@ -4134,6 +4427,10 @@
       position: relative;
     }
 
+    .md\:z-20 {
+      z-index: 20;
+    }
+
     .md\:z-auto {
       z-index: auto;
     }
@@ -4142,6 +4439,10 @@
       margin-inline: calc(var(--spacing) * -4);
     }
 
+    .md\:flex {
+      display: flex;
+    }
+
     .md\:hidden {
       display: none;
     }
@@ -4161,6 +4462,97 @@
     }
   }
 
+  @media (min-width: 1280px) {
+    .xl\:top-4 {
+      top: calc(var(--spacing) * 4);
+    }
+
+    .xl\:top-6 {
+      top: calc(var(--spacing) * 6);
+    }
+
+    .xl\:right-6 {
+      right: calc(var(--spacing) * 6);
+    }
+
+    .xl\:bottom-8 {
+      bottom: calc(var(--spacing) * 8);
+    }
+
+    .xl\:left-4 {
+      left: calc(var(--spacing) * 4);
+    }
+
+    .xl\:left-auto {
+      left: auto;
+    }
+
+    .xl\:mt-0 {
+      margin-top: calc(var(--spacing) * 0);
+    }
+
+    .xl\:w-\[360px\] {
+      width: 360px;
+    }
+
+    .xl\:rounded-3xl {
+      border-radius: var(--radius-3xl);
+    }
+
+    .xl\:rounded-none {
+      border-radius: 0;
+    }
+
+    .xl\:rounded-t-2xl {
+      border-top-left-radius: var(--radius-2xl);
+      border-top-right-radius: var(--radius-2xl);
+    }
+
+    .xl\:px-0 {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+
+    .xl\: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);
+    }
+
+    .xl\:ring {
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  :where(.dark\:divide-white\/5:where([data-theme="dark"], [data-theme="dark"] *) > :not(:last-child)) {
+    border-color: var(--color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.dark\:divide-white\/5:where([data-theme="dark"], [data-theme="dark"] *) > :not(:last-child)) {
+      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+
+  .dark\:border-white\/5:where([data-theme="dark"], [data-theme="dark"] *) {
+    border-color: var(--color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:border-white\/5:where([data-theme="dark"], [data-theme="dark"] *) {
+      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+
+  .dark\:border-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+    border-color: var(--color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:border-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
   .dark\:bg-\[\#212121\]:where([data-theme="dark"], [data-theme="dark"] *) {
     background-color: #212121;
   }
@@ -4169,6 +4561,52 @@
     background-color: #303030;
   }
 
+  .dark\:bg-white\/5:where([data-theme="dark"], [data-theme="dark"] *) {
+    background-color: var(--color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/5:where([data-theme="dark"], [data-theme="dark"] *) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+
+  .dark\:from-white\/15:where([data-theme="dark"], [data-theme="dark"] *) {
+    --tw-gradient-from: var(--color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-white\/15:where([data-theme="dark"], [data-theme="dark"] *) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-white) 15%, transparent);
+    }
+  }
+
+  .dark\:from-white\/15:where([data-theme="dark"], [data-theme="dark"] *) {
+    --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));
+  }
+
+  .dark\:ring-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+    --tw-ring-color: var(--color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:ring-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .dark\:hover\:bg-white\/5:where([data-theme="dark"], [data-theme="dark"] *):hover {
+      background-color: var(--color-white);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-white\/5:where([data-theme="dark"], [data-theme="dark"] *):hover {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+  }
+
   .light\:border:where([data-theme="light"], [data-theme="light"] *) {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -4243,6 +4681,12 @@
   initial-value: 0;
 }
 
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

package/package.json

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

package/template/.sunpeak/dev.tsx

@@ -41,7 +41,7 @@ const simulations: Simulation[] = Object.values(
 }));
 
 // Read app config from package.json or use defaults
-const appName = import.meta.env?.VITE_APP_NAME || 'Sunpeak App';
+const appName = import.meta.env?.VITE_APP_NAME || 'Sunpeak';
 const appIcon = import.meta.env?.VITE_APP_ICON || '🌄';
 
 createRoot(document.getElementById('root')!).render(