sunpeak 0.13.10 → 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);
   }
@@ -6328,6 +6336,10 @@ background-color: var(--gray-200);
     min-height: calc(var(--spacing) * 8);
   }
 
+  .min-h-dvh {
+    min-height: 100dvh;
+  }
+
   .w-1 {
     width: calc(var(--spacing) * 1);
   }
@@ -6526,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);
   }
@@ -6693,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);
   }
@@ -6737,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);
   }
@@ -6751,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);
   }
@@ -6867,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);
   }
@@ -6997,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);
@@ -7060,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);
   }
@@ -7184,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;
     }
@@ -7192,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);
     }
@@ -7206,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);
     }
@@ -7220,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;
@@ -7460,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);
   }

package/dist/chatgpt/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const chatgpt_index = require("../index-BhfrUoaZ.cjs");
+const chatgpt_index = require("../index-Cdeg96So.cjs");
 const discovery = require("../discovery-CRR3SlyI.cjs");
 exports.ChatGPTSimulator = chatgpt_index.ChatGPTSimulator;
 exports.IframeResource = chatgpt_index.IframeResource;

package/dist/chatgpt/index.js

@@ -1,4 +1,4 @@
-import { C, I, M, S, T, a, e, u } from "../index-D6Z9ZDNT.js";
+import { C, I, M, S, T, a, e, u } from "../index-CJ3jfcjj.js";
 import { a as a2, b, d, c, e as e2, f, g, h, i, j, k, l, t } from "../discovery-COZUnY6a.js";
 export {
   C as ChatGPTSimulator,

package/dist/{index-D6Z9ZDNT.js → index-CJ3jfcjj.js}

@@ -14408,16 +14408,17 @@ function generateScriptHtml(scriptSrc, theme, cspPolicy) {
   <meta http-equiv="Content-Security-Policy" content="${safeCsp}" />
   <title>Resource</title>
   <style>
+    html {
+      /* Set color-scheme before the resource script loads so system UI (scrollbars,
+         form elements) is themed correctly from first paint. Once the script loads,
+         applyDocumentTheme() takes over with an inline style. */
+      color-scheme: ${safeTheme};
+    }
     html, body, #root {
       margin: 0;
       padding: 0;
       width: 100%;
-      /* Use min-height instead of height so body sizes to content.
-         This allows ResizeObserver to detect content changes and
-         report accurate intrinsic height to the host. */
-      min-height: 100%;
-      background: transparent;
-      color-scheme: dark light;
+      background-color: var(--color-surface);
     }
   </style>
   <script>${PAINT_FENCE_SCRIPT}<\/script>
@@ -15127,4 +15128,4 @@ export {
   index as i,
   useThemeContext as u
 };
-//# sourceMappingURL=index-D6Z9ZDNT.js.map
+//# sourceMappingURL=index-CJ3jfcjj.js.map