sunpeak 0.13.11 → 0.13.12

package/README.md

@@ -73,7 +73,7 @@ my-app/
 ```
 
 1. Project scaffold: Complete development setup with the `sunpeak` library.
-2. UI components: Production-ready components following ChatGPT design guidelines and using OpenAI `apps-sdk-ui` React components.
+2. UI components: Production-ready components following ChatGPT design guidelines.
 3. Convention over configuration:
    1. Create a UI by creating a `-resource.tsx` file that exports a `ResourceConfig` and a React component ([example below](#resource-component)).
    2. Create test state (`Simulation`s) for local dev, ChatGPT dev, automated testing, and demos by creating a `-simulation.json` file. ([example below](#simulation))
@@ -219,4 +219,3 @@ test.describe('Review Resource', () => {
 - [MCP Apps](https://github.com/modelcontextprotocol/ext-apps)
 - [ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
 - [ChatGPT Apps SDK Documentation - UI](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
-- [ChatGPT Apps SDK UI Documentation](https://openai.github.io/apps-sdk-ui/)

package/dist/chatgpt/globals.css

@@ -6227,6 +6227,10 @@ background-color: var(--gray-200);
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -6280,6 +6284,10 @@ background-color: var(--gray-200);
     height: calc(var(--spacing) * 9);
   }
 
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -6530,6 +6538,10 @@ background-color: var(--gray-200);
     gap: calc(var(--spacing) * 1);
   }
 
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -6697,6 +6709,22 @@ background-color: var(--gray-200);
     border-color: #0000000f;
   }
 
+  .border-\[var\(--color-border-danger-outline\)\] {
+    border-color: var(--color-border-danger-outline);
+  }
+
+  .border-\[var\(--color-border-primary-outline\)\] {
+    border-color: var(--color-border-primary-outline);
+  }
+
+  .border-\[var\(--color-border-secondary-outline\)\] {
+    border-color: var(--color-border-secondary-outline);
+  }
+
+  .border-\[var\(--color-border-warning-outline\)\] {
+    border-color: var(--color-border-warning-outline);
+  }
+
   .border-black\/5 {
     border-color: var(--color-black);
   }
@@ -6741,10 +6769,42 @@ background-color: var(--gray-200);
     background-color: #3a3a3a;
   }
 
+  .bg-\[var\(--color-background-danger-soft-alpha\)\] {
+    background-color: var(--color-background-danger-soft-alpha);
+  }
+
+  .bg-\[var\(--color-background-danger-solid\)\] {
+    background-color: var(--color-background-danger-solid);
+  }
+
   .bg-\[var\(--color-background-primary-soft\)\] {
     background-color: var(--color-background-primary-soft);
   }
 
+  .bg-\[var\(--color-background-primary-soft-alpha\)\] {
+    background-color: var(--color-background-primary-soft-alpha);
+  }
+
+  .bg-\[var\(--color-background-primary-solid\)\] {
+    background-color: var(--color-background-primary-solid);
+  }
+
+  .bg-\[var\(--color-background-secondary-soft-alpha\)\] {
+    background-color: var(--color-background-secondary-soft-alpha);
+  }
+
+  .bg-\[var\(--color-background-secondary-solid\)\] {
+    background-color: var(--color-background-secondary-solid);
+  }
+
+  .bg-\[var\(--color-background-warning-soft-alpha\)\] {
+    background-color: var(--color-background-warning-soft-alpha);
+  }
+
+  .bg-\[var\(--color-background-warning-solid\)\] {
+    background-color: var(--color-background-warning-solid);
+  }
+
   .bg-black\/5 {
     background-color: var(--color-black);
   }
@@ -6755,6 +6815,16 @@ background-color: var(--gray-200);
     }
   }
 
+  .bg-black\/10 {
+    background-color: var(--color-black);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/10 {
+      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
+
   .bg-black\/50 {
     background-color: var(--color-black);
   }
@@ -6871,6 +6941,10 @@ background-color: var(--gray-200);
     padding-inline: calc(var(--spacing) * 3);
   }
 
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -7001,6 +7075,11 @@ background-color: var(--gray-200);
     font-size: 10px;
   }
 
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
   .leading-normal {
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
@@ -7064,6 +7143,70 @@ background-color: var(--gray-200);
     color: var(--color-error);
   }
 
+  .text-\[var\(--color-text-danger-ghost\)\] {
+    color: var(--color-text-danger-ghost);
+  }
+
+  .text-\[var\(--color-text-danger-outline\)\] {
+    color: var(--color-text-danger-outline);
+  }
+
+  .text-\[var\(--color-text-danger-soft\)\] {
+    color: var(--color-text-danger-soft);
+  }
+
+  .text-\[var\(--color-text-danger-solid\)\] {
+    color: var(--color-text-danger-solid);
+  }
+
+  .text-\[var\(--color-text-primary-ghost\)\] {
+    color: var(--color-text-primary-ghost);
+  }
+
+  .text-\[var\(--color-text-primary-outline\)\] {
+    color: var(--color-text-primary-outline);
+  }
+
+  .text-\[var\(--color-text-primary-soft\)\] {
+    color: var(--color-text-primary-soft);
+  }
+
+  .text-\[var\(--color-text-primary-solid\)\] {
+    color: var(--color-text-primary-solid);
+  }
+
+  .text-\[var\(--color-text-secondary-ghost\)\] {
+    color: var(--color-text-secondary-ghost);
+  }
+
+  .text-\[var\(--color-text-secondary-outline\)\] {
+    color: var(--color-text-secondary-outline);
+  }
+
+  .text-\[var\(--color-text-secondary-soft\)\] {
+    color: var(--color-text-secondary-soft);
+  }
+
+  .text-\[var\(--color-text-secondary-solid\)\] {
+    color: var(--color-text-secondary-solid);
+  }
+
+  .text-\[var\(--color-text-warning-ghost\)\] {
+    color: var(--color-text-warning-ghost);
+  }
+
+  .text-\[var\(--color-text-warning-outline\)\] {
+    color: var(--color-text-warning-outline);
+  }
+
+  .text-\[var\(--color-text-warning-soft\)\] {
+    color: var(--color-text-warning-soft);
+  }
+
+  .text-\[var\(--color-text-warning-solid\)\] {
+    color: var(--color-text-warning-solid);
+  }
+
   .text-primary {
     color: var(--color-text-primary);
   }
@@ -7188,6 +7331,22 @@ background-color: var(--gray-200);
   }
 
   @media (hover: hover) and (pointer: fine) {
+    .hover\:border-\[var\(--color-border-danger-outline-hover\)\]:hover {
+      border-color: var(--color-border-danger-outline-hover);
+    }
+
+    .hover\:border-\[var\(--color-border-primary-outline-hover\)\]:hover {
+      border-color: var(--color-border-primary-outline-hover);
+    }
+
+    .hover\:border-\[var\(--color-border-secondary-outline-hover\)\]:hover {
+      border-color: var(--color-border-secondary-outline-hover);
+    }
+
+    .hover\:border-\[var\(--color-border-warning-outline-hover\)\]:hover {
+      border-color: var(--color-border-warning-outline-hover);
+    }
+
     .hover\:border-transparent:hover {
       border-color: #0000;
     }
@@ -7196,6 +7355,70 @@ background-color: var(--gray-200);
       background-color: #6a6a6a;
     }
 
+    .hover\:bg-\[var\(--color-background-danger-ghost-hover\)\]:hover {
+      background-color: var(--color-background-danger-ghost-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-danger-outline-hover\)\]:hover {
+      background-color: var(--color-background-danger-outline-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-danger-soft-alpha-hover\)\]:hover {
+      background-color: var(--color-background-danger-soft-alpha-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-danger-solid-hover\)\]:hover {
+      background-color: var(--color-background-danger-solid-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-primary-ghost-hover\)\]:hover {
+      background-color: var(--color-background-primary-ghost-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-primary-outline-hover\)\]:hover {
+      background-color: var(--color-background-primary-outline-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-primary-soft-alpha-hover\)\]:hover {
+      background-color: var(--color-background-primary-soft-alpha-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-primary-solid-hover\)\]:hover {
+      background-color: var(--color-background-primary-solid-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-secondary-ghost-hover\)\]:hover {
+      background-color: var(--color-background-secondary-ghost-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-secondary-outline-hover\)\]:hover {
+      background-color: var(--color-background-secondary-outline-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-secondary-soft-alpha-hover\)\]:hover {
+      background-color: var(--color-background-secondary-soft-alpha-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-secondary-solid-hover\)\]:hover {
+      background-color: var(--color-background-secondary-solid-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-warning-ghost-hover\)\]:hover {
+      background-color: var(--color-background-warning-ghost-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-warning-outline-hover\)\]:hover {
+      background-color: var(--color-background-warning-outline-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-warning-soft-alpha-hover\)\]:hover {
+      background-color: var(--color-background-warning-soft-alpha-hover);
+    }
+
+    .hover\:bg-\[var\(--color-background-warning-solid-hover\)\]:hover {
+      background-color: var(--color-background-warning-solid-hover);
+    }
+
     .hover\:bg-black\/5:hover {
       background-color: var(--color-black);
     }
@@ -7210,6 +7433,22 @@ background-color: var(--gray-200);
       background-color: #0000;
     }
 
+    .hover\:text-\[var\(--color-text-danger-outline-hover\)\]:hover {
+      color: var(--color-text-danger-outline-hover);
+    }
+
+    .hover\:text-\[var\(--color-text-primary-outline-hover\)\]:hover {
+      color: var(--color-text-primary-outline-hover);
+    }
+
+    .hover\:text-\[var\(--color-text-secondary-outline-hover\)\]:hover {
+      color: var(--color-text-secondary-outline-hover);
+    }
+
+    .hover\:text-\[var\(--color-text-warning-outline-hover\)\]:hover {
+      color: var(--color-text-warning-outline-hover);
+    }
+
     .hover\:text-primary:hover {
       color: var(--color-text-primary);
     }
@@ -7224,6 +7463,78 @@ background-color: var(--gray-200);
     outline-style: none;
   }
 
+  .active\:bg-\[var\(--color-background-danger-ghost-active\)\]:active {
+    background-color: var(--color-background-danger-ghost-active);
+  }
+
+  .active\:bg-\[var\(--color-background-danger-outline-active\)\]:active {
+    background-color: var(--color-background-danger-outline-active);
+  }
+
+  .active\:bg-\[var\(--color-background-danger-soft-alpha-active\)\]:active {
+    background-color: var(--color-background-danger-soft-alpha-active);
+  }
+
+  .active\:bg-\[var\(--color-background-danger-solid-active\)\]:active {
+    background-color: var(--color-background-danger-solid-active);
+  }
+
+  .active\:bg-\[var\(--color-background-primary-ghost-active\)\]:active {
+    background-color: var(--color-background-primary-ghost-active);
+  }
+
+  .active\:bg-\[var\(--color-background-primary-outline-active\)\]:active {
+    background-color: var(--color-background-primary-outline-active);
+  }
+
+  .active\:bg-\[var\(--color-background-primary-soft-alpha-active\)\]:active {
+    background-color: var(--color-background-primary-soft-alpha-active);
+  }
+
+  .active\:bg-\[var\(--color-background-primary-solid-active\)\]:active {
+    background-color: var(--color-background-primary-solid-active);
+  }
+
+  .active\:bg-\[var\(--color-background-secondary-ghost-active\)\]:active {
+    background-color: var(--color-background-secondary-ghost-active);
+  }
+
+  .active\:bg-\[var\(--color-background-secondary-outline-active\)\]:active {
+    background-color: var(--color-background-secondary-outline-active);
+  }
+
+  .active\:bg-\[var\(--color-background-secondary-soft-alpha-active\)\]:active {
+    background-color: var(--color-background-secondary-soft-alpha-active);
+  }
+
+  .active\:bg-\[var\(--color-background-secondary-solid-active\)\]:active {
+    background-color: var(--color-background-secondary-solid-active);
+  }
+
+  .active\:bg-\[var\(--color-background-warning-ghost-active\)\]:active {
+    background-color: var(--color-background-warning-ghost-active);
+  }
+
+  .active\:bg-\[var\(--color-background-warning-outline-active\)\]:active {
+    background-color: var(--color-background-warning-outline-active);
+  }
+
+  .active\:bg-\[var\(--color-background-warning-soft-alpha-active\)\]:active {
+    background-color: var(--color-background-warning-soft-alpha-active);
+  }
+
+  .active\:bg-\[var\(--color-background-warning-solid-active\)\]:active {
+    background-color: var(--color-background-warning-solid-active);
+  }
+
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:opacity-50:disabled {
+    opacity: .5;
+  }
+
   @media not all and (min-width: 768px) {
     .max-md\:fixed {
       position: fixed;
@@ -7464,6 +7775,16 @@ background-color: var(--gray-200);
     }
   }
 
+  .dark\:bg-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+    background-color: var(--color-white);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
   .dark\:from-white\/15:where([data-theme="dark"], [data-theme="dark"] *) {
     --tw-gradient-from: var(--color-white);
   }