sunpeak 0.10.7 → 0.12.1

package/package.json

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

package/template/.sunpeak/dev.tsx

@@ -4,9 +4,9 @@
  * This file bootstraps the ChatGPT simulator for development
  *
  * Auto-discovers simulations and resources by file naming convention:
- * - resources/{resource}/{resource}-{scenario}-simulation.json (e.g., resources/albums/albums-show-simulation.json)
- * - resources/{resource}/{resource}-resource.json
- * - resources/{resource}/{Resource}Resource component (PascalCase)
+ * - tests/simulations/{resource}/{resource}-{scenario}-simulation.json
+ * - src/resources/{resource}/{resource}-resource.json
+ * - src/resources/{resource}/{Resource}Resource component (PascalCase)
  */
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -16,7 +16,7 @@ import '../src/styles/globals.css';
 
 // Build simulations from discovered files
 const simulations = buildDevSimulations({
-  simulationModules: import.meta.glob('../src/resources/*/*-simulation.json', { eager: true }),
+  simulationModules: import.meta.glob('../tests/simulations/*/*-simulation.json', { eager: true }),
   resourceModules: import.meta.glob('../src/resources/*/*-resource.json', { eager: true }),
   resourceComponents: resourceComponents as Record<string, React.ComponentType>,
 });

package/template/README.md

@@ -1,6 +1,6 @@
 # sunpeak-app
 
-A ChatGPT App UI built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
+A ChatGPT App built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
 
 For an initial overview of your new app and a detailed API reference, refer to the [documentation](https://docs.sunpeak.ai/template/project-structure).
 
@@ -19,9 +19,8 @@ That's it! Edit the resource files in [./src/resources/](./src/resources/) to bu
 # Core commands:
 pnpm test              # Run tests with Vitest.
 pnpm test:e2e          # Run end-to-end tests with Playwright.
-sunpeak dev            # Start development server.
+sunpeak dev            # Start dev server + MCP endpoint.
 sunpeak build          # Build all resources for production.
-sunpeak mcp            # Start MCP server for ChatGPT testing with mock data.
 
 # sunpeak repository (think ECR for ChatGPT Apps):
 sunpeak login          # Authenticate with the sunpeak repository.
@@ -33,23 +32,28 @@ The template includes a minimal test setup with Vitest. You can add additional t
 
 ## Project Structure
 
-- `src/resources/` - Directory containing all your MCP Resources (ChatGPT App UIs).
-  - Each resource is a subdirectory containing all files for that resource.
-  - Example: `src/resources/albums/` contains:
-    - `albums-resource.tsx` - The React component.
-    - `albums-resource.json` - Resource metadata (name, title, description, etc.).
-    - `albums-resource.test.tsx` - Unit tests for the resource.
-    - `albums-show-simulation.json` - Simulation data for testing.
-    - `components/` - UI components used by the resource.
-- `tests/e2e/` - Directory containing end-to-end Playwright tests for each resource. Uses the ChatGPTSimulator to test your resources render properly with any state (tool calls, saved state, dark mode, pip display mode, etc.).
+Using a Review page as an example, sunpeak projects look like:
+
+```bash
+my-app/
+├── src/resources/
+│   └── review/
+│       ├── review-resource.tsx                 # Review UI component.
+│       └── review-resource.json                # Review UI MCP metadata.
+├── tests/simulations/
+│   └── review/
+│       ├── review-{scenario1}-simulation.json  # Mock state for testing.
+│       └── review-{scenario2}-simulation.json  # Mock state for testing.
+└── package.json
+```
 
 ## Testing in ChatGPT
 
-Test your app directly in ChatGPT using the built-in MCP server:
+Test your app directly in ChatGPT using the built-in MCP endpoint (starts automatically with `sunpeak dev`):
 
 ```bash
-# Start the MCP server (rebuilds and restarts on file changes).
-sunpeak mcp
+# Start the dev server + MCP endpoint.
+sunpeak dev
 
 # In another terminal, run a tunnel. For example:
 ngrok http 6766
@@ -59,8 +63,6 @@ You can then connect to the tunnel forwarding URL at the `/mcp` path from ChatGP
 
 Once your app is connected, send the name of the app and a tool, like `/sunpeak show review`, to ChatGPT.
 
-When you make changes to the UI, refresh your app in ChatGPT after the MCP server has finished rebuilding your app: `User > Settings > Apps & Connectors > My App > Refresh`
-
 ## Build & Deploy
 
 Build your app for production:
@@ -74,15 +76,11 @@ This creates optimized builds in `dist/`, organized by resource:
 ```bash
 dist/
 ├── albums/
-│   ├── albums.js                     # Built resource component.
-│   ├── albums.json                   # Resource metadata.
-│   └── albums-show-simulation.json   # Resource mock data for testing.
+│   ├── albums.js             # Built resource component.
+│   └── albums.json           # Resource metadata.
 ├── review/
 │   ├── review.js
-│   ├── review.json
-│   ├── review-diff-simulation.json
-│   ├── review-post-simulation.json
-│   └── review-purchase-simulation.json
+│   └── review.json
 └── ...
 ```
 
@@ -90,7 +88,6 @@ Each resource folder contains:
 
 - **`.js` file**: Self-contained bundle with CSS inlined
 - **`.json` file**: Resource metadata with unique `uri` for cache-busting
-- **`*-simulation.json` files**: All affiliated simulation files for the resource. These are not needed for the production runtime, but are used in the sunpeak repository for testing.
 
 Host these files and reference them as resources in your production MCP server.
 Use the sunpeak resource repository for built-in resource hosting.
@@ -104,11 +101,12 @@ src/resources/NAME/
 ├── NAME-resource.tsx              # React component (required)
 ├── NAME-resource.json             # Resource metadata (required)
 ├── NAME-resource.test.tsx         # Unit tests (optional)
-├── NAME-SCENARIO-simulation.json  # Simulation data (optional)
 └── components/                    # UI components (optional)
 ```
 
-Only the resource files (`.tsx` and `.json`) are required to generate a production build and ship a UI. Create the simulation file if you want to preview your resource in `sunpeak dev` or `sunpeak mcp`.
+Only the resource files (`.tsx` and `.json`) are required to generate a production build and ship a UI.
+
+Create the simulation file(s) in `tests/simulations/` if you want to preview your resource in `sunpeak dev`.
 
 ## Resources
 

package/template/_gitignore

@@ -45,3 +45,7 @@ CLAUDE.md
 .temp
 .tmp
 tmp
+
+# Vite cache
+node_modules/.vite
+node_modules/.vite-mcp

package/template/dist/albums/albums.json

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://albums-mkhk2bj6"
+  "uri": "ui://albums-mkk7xzee"
 }

package/template/dist/carousel/carousel.json

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://carousel-mkhk2bj6"
+  "uri": "ui://carousel-mkk7xzee"
 }

package/template/dist/map/map.json

@@ -18,5 +18,5 @@
       ]
     }
   },
-  "uri": "ui://map-mkhk2bj6"
+  "uri": "ui://map-mkk7xzee"
 }

package/template/dist/review/review.json

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://review-mkhk2bj6"
+  "uri": "ui://review-mkk7xzee"
 }

package/template/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sunpeak - ChatGPT App framework</title>
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <!-- Establish CSS layer order BEFORE any JS-injected CSS modules -->
     <style>@layer properties, theme, base, components, utilities;</style>
   </head>

package/template/node_modules/.vite/deps/_metadata.json

@@ -1,121 +1,121 @@
 {
-  "hash": "44587b56",
-  "configHash": "f56e5903",
+  "hash": "4a7f9e31",
+  "configHash": "b26b5701",
   "lockfileHash": "9d20b726",
-  "browserHash": "5011344d",
+  "browserHash": "0def6af7",
   "optimized": {
     "react": {
       "src": "../../../../node_modules/.pnpm/react@19.2.3/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "4158ad30",
+      "fileHash": "f00482ce",
       "needsInterop": true
     },
     "react-dom": {
       "src": "../../../../node_modules/.pnpm/react-dom@19.2.3_react@19.2.3/node_modules/react-dom/index.js",
       "file": "react-dom.js",
-      "fileHash": "eceb9ce1",
+      "fileHash": "1569e6b6",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../../../node_modules/.pnpm/react@19.2.3/node_modules/react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "7a7f1ddd",
+      "fileHash": "0115028c",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../../../node_modules/.pnpm/react@19.2.3/node_modules/react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "346c243c",
+      "fileHash": "feb11853",
       "needsInterop": true
     },
     "@openai/apps-sdk-ui/components/Avatar": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Avatar/index.js",
       "file": "@openai_apps-sdk-ui_components_Avatar.js",
-      "fileHash": "4e36254d",
+      "fileHash": "7bda9dc6",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Button": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Button/index.js",
       "file": "@openai_apps-sdk-ui_components_Button.js",
-      "fileHash": "0ba30b65",
+      "fileHash": "ed76f323",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Checkbox": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.8__@types+react@19._10810175a7ab45acace17e46639bb69b/node_modules/@openai/apps-sdk-ui/dist/es/components/Checkbox/index.js",
       "file": "@openai_apps-sdk-ui_components_Checkbox.js",
-      "fileHash": "c0e24dfb",
+      "fileHash": "ab0a037f",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Icon": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Icon/index.js",
       "file": "@openai_apps-sdk-ui_components_Icon.js",
-      "fileHash": "c5c6ed08",
+      "fileHash": "b6eb2e05",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Input": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.8__@types+react@19._10810175a7ab45acace17e46639bb69b/node_modules/@openai/apps-sdk-ui/dist/es/components/Input/index.js",
       "file": "@openai_apps-sdk-ui_components_Input.js",
-      "fileHash": "a8f4808e",
+      "fileHash": "5d518848",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/SegmentedControl": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.8__@types+react@19._10810175a7ab45acace17e46639bb69b/node_modules/@openai/apps-sdk-ui/dist/es/components/SegmentedControl/index.js",
       "file": "@openai_apps-sdk-ui_components_SegmentedControl.js",
-      "fileHash": "d5c8173c",
+      "fileHash": "2ee50bba",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Select": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.8__@types+react@19._10810175a7ab45acace17e46639bb69b/node_modules/@openai/apps-sdk-ui/dist/es/components/Select/index.js",
       "file": "@openai_apps-sdk-ui_components_Select.js",
-      "fileHash": "4240ac61",
+      "fileHash": "22a1dcf3",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Textarea": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.8__@types+react@19._10810175a7ab45acace17e46639bb69b/node_modules/@openai/apps-sdk-ui/dist/es/components/Textarea/index.js",
       "file": "@openai_apps-sdk-ui_components_Textarea.js",
-      "fileHash": "fb143e76",
+      "fileHash": "aa2d33e1",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/theme": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.8__@types+react@19._10810175a7ab45acace17e46639bb69b/node_modules/@openai/apps-sdk-ui/dist/es/lib/theme.js",
       "file": "@openai_apps-sdk-ui_theme.js",
-      "fileHash": "d63096a5",
+      "fileHash": "5781d4bb",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "f58131a9",
+      "fileHash": "c87a7748",
       "needsInterop": false
     },
     "embla-carousel-react": {
       "src": "../../../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.3/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js",
       "file": "embla-carousel-react.js",
-      "fileHash": "a3f7e176",
+      "fileHash": "54c2792d",
       "needsInterop": false
     },
     "embla-carousel-wheel-gestures": {
       "src": "../../../../node_modules/.pnpm/embla-carousel-wheel-gestures@8.1.0_embla-carousel@8.6.0/node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js",
       "file": "embla-carousel-wheel-gestures.js",
-      "fileHash": "5d368aee",
+      "fileHash": "fa9d042d",
       "needsInterop": false
     },
     "mapbox-gl": {
       "src": "../../../../node_modules/.pnpm/mapbox-gl@3.17.0/node_modules/mapbox-gl/dist/mapbox-gl.js",
       "file": "mapbox-gl.js",
-      "fileHash": "8d8a5e1a",
+      "fileHash": "e9ae0a8d",
       "needsInterop": true
     },
     "react-dom/client": {
       "src": "../../../../node_modules/.pnpm/react-dom@19.2.3_react@19.2.3/node_modules/react-dom/client.js",
       "file": "react-dom_client.js",
-      "fileHash": "1170d116",
+      "fileHash": "517db7cd",
       "needsInterop": true
     },
     "tailwind-merge": {
       "src": "../../../../node_modules/.pnpm/tailwind-merge@3.4.0/node_modules/tailwind-merge/dist/bundle-mjs.mjs",
       "file": "tailwind-merge.js",
-      "fileHash": "fdab5cd1",
+      "fileHash": "9c4aa4b1",
       "needsInterop": false
     }
   },

package/template/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.0.16","results":[[":src/resources/albums/components/albums.test.tsx",{"duration":410.5030049999998,"failed":false}],[":src/resources/carousel/carousel-resource.test.tsx",{"duration":310.719329,"failed":false}],[":src/resources/review/review-resource.test.tsx",{"duration":598.5615620000003,"failed":false}],[":src/resources/map/components/map-view.test.tsx",{"duration":96.15135400000008,"failed":false}],[":src/resources/map/components/place-inspector.test.tsx",{"duration":460.02958199999966,"failed":false}],[":src/resources/albums/components/fullscreen-viewer.test.tsx",{"duration":273.1299219999996,"failed":false}],[":src/resources/map/components/place-list.test.tsx",{"duration":143.12914500000034,"failed":false}],[":src/resources/map/components/place-card.test.tsx",{"duration":351.79216799999995,"failed":false}],[":src/resources/map/components/place-carousel.test.tsx",{"duration":449.5401650000001,"failed":false}],[":src/resources/albums/components/album-carousel.test.tsx",{"duration":70.63576599999988,"failed":false}],[":src/resources/carousel/components/carousel.test.tsx",{"duration":105.63132599999994,"failed":false}],[":src/resources/map/map-resource.test.tsx",{"duration":294.368154,"failed":false}],[":src/resources/albums/albums-resource.test.tsx",{"duration":253.63618599999995,"failed":false}],[":src/resources/albums/components/film-strip.test.tsx",{"duration":482.764449,"failed":false}],[":src/resources/albums/components/album-card.test.tsx",{"duration":269.0116419999997,"failed":false}],[":src/resources/carousel/components/card.test.tsx",{"duration":102.7438790000001,"failed":false}]]}
+{"version":"4.0.16","results":[[":src/resources/review/review-resource.test.tsx",{"duration":549.1222579999999,"failed":false}],[":src/resources/albums/components/albums.test.tsx",{"duration":350.93041600000015,"failed":false}],[":src/resources/carousel/carousel-resource.test.tsx",{"duration":251.43985999999995,"failed":false}],[":src/resources/map/components/map-view.test.tsx",{"duration":87.90785099999994,"failed":false}],[":src/resources/map/components/place-inspector.test.tsx",{"duration":476.03139400000055,"failed":false}],[":src/resources/albums/components/fullscreen-viewer.test.tsx",{"duration":285.097933,"failed":false}],[":src/resources/map/components/place-list.test.tsx",{"duration":136.47718200000008,"failed":false}],[":src/resources/map/components/place-card.test.tsx",{"duration":380.20156,"failed":false}],[":src/resources/map/components/place-carousel.test.tsx",{"duration":452.68627800000013,"failed":false}],[":src/resources/albums/components/album-carousel.test.tsx",{"duration":101.4541720000002,"failed":false}],[":src/resources/carousel/components/carousel.test.tsx",{"duration":77.42705000000001,"failed":false}],[":src/resources/map/map-resource.test.tsx",{"duration":281.73994100000004,"failed":false}],[":src/resources/albums/albums-resource.test.tsx",{"duration":265.21104400000013,"failed":false}],[":src/resources/albums/components/film-strip.test.tsx",{"duration":430.75007900000014,"failed":false}],[":src/resources/albums/components/album-card.test.tsx",{"duration":305.5718360000001,"failed":false}],[":src/resources/carousel/components/card.test.tsx",{"duration":76.69553300000007,"failed":false}]]}

package/template/node_modules/.vite-mcp/deps_temp_992accd8/@openai_apps-sdk-ui_components_Avatar.js

@@ -0,0 +1,96 @@
+import {
+  toCssVariables
+} from "./chunk-RYYR2YMB.js";
+import {
+  clsx_default
+} from "./chunk-CNYJBM5F.js";
+import {
+  require_jsx_runtime
+} from "./chunk-JGVISENQ.js";
+import {
+  require_react
+} from "./chunk-BUOVMFCD.js";
+import {
+  __toESM
+} from "./chunk-ILHRZGIS.js";
+
+// ../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Avatar/Avatar.js
+var import_jsx_runtime = __toESM(require_jsx_runtime());
+var import_react = __toESM(require_react());
+var import_react2 = __toESM(require_react());
+import s from "/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Avatar/Avatar.module.css";
+var Avatar = (props) => {
+  const validImageUrl = validateImageUrl(props.imageUrl);
+  return (0, import_react.createElement)(AvatarInner, { ...props, imageUrl: validImageUrl, key: validImageUrl });
+};
+var AvatarInner = (props) => {
+  const {
+    className,
+    size,
+    overflowCount,
+    name,
+    color = "secondary",
+    variant = "soft",
+    imageUrl,
+    Icon,
+    // asChild support
+    ...restProps
+  } = props;
+  const [imageStatus, setImageStatus] = (0, import_react2.useState)();
+  const isInteractive = !!(restProps.onPointerDown || restProps.onClick);
+  const TagName = isInteractive ? "button" : "span";
+  return (0, import_jsx_runtime.jsx)(TagName, { className: clsx_default(s.Avatar, className), style: toCssVariables({
+    "avatar-size": size
+  }), role: isInteractive ? void 0 : "presentation", "data-color": color, "data-variant": variant, type: isInteractive ? "button" : void 0, ...restProps, children: (() => {
+    if (imageUrl && imageStatus !== "error") {
+      return (0, import_jsx_runtime.jsx)(AvatarImage, { status: imageStatus, url: imageUrl, onError: () => setImageStatus("error"), onLoad: () => setImageStatus("loaded") });
+    }
+    if (Icon) {
+      return (0, import_jsx_runtime.jsx)(Icon, { className: s.AvatarIcon });
+    }
+    return overflowCount ? (0, import_jsx_runtime.jsx)(AvatarOverflowCount, { count: overflowCount }) : (0, import_jsx_runtime.jsx)(AvatarInitial, { name });
+  })() });
+};
+var validateImageUrl = (imageUrl) => {
+  if (!imageUrl) {
+    return;
+  }
+  if (imageUrl.includes("gravatar.com") && imageUrl.includes("cdn.auth0.com")) {
+    return;
+  }
+  return imageUrl;
+};
+var AvatarImage = ({ url, status, onLoad, onError }) => {
+  return (0, import_jsx_runtime.jsx)("span", { className: s.AvatarImageContainer, children: (0, import_jsx_runtime.jsx)("img", { src: url, className: s.AvatarImage, "data-loaded": status === "loaded" ? "" : void 0, onLoad, onError, alt: "", role: "presentation" }) });
+};
+var AvatarInitial = ({ name = "" }) => {
+  const firstInitial = (0, import_react2.useMemo)(() => name.charAt(0).toUpperCase(), [name]);
+  return (0, import_jsx_runtime.jsx)("span", { className: s.AvatarInitial, children: firstInitial });
+};
+var AvatarOverflowCount = ({ count }) => {
+  const formattedCount = (0, import_react2.useMemo)(() => {
+    return new Intl.NumberFormat("en", {
+      notation: "compact",
+      compactDisplay: "short",
+      maximumFractionDigits: 0
+    }).format(count).toLocaleLowerCase();
+  }, [count]);
+  return (0, import_jsx_runtime.jsxs)("span", { className: s.AvatarOverflowCount, "data-letter-count": formattedCount.length, children: [(0, import_jsx_runtime.jsx)("span", { className: s.AvatarOverflowCountSymbol, children: "+" }), formattedCount] });
+};
+
+// ../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Avatar/AvatarGroup.js
+var import_jsx_runtime2 = __toESM(require_jsx_runtime());
+var import_react3 = __toESM(require_react());
+import s2 from "/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Avatar/AvatarGroup.module.css";
+var AvatarGroup = ({ className, stack = "start", size, children }) => {
+  const childrenArray = import_react3.Children.toArray(children);
+  const maybeReversedChildren = stack === "start" ? childrenArray.slice().reverse() : childrenArray;
+  return (0, import_jsx_runtime2.jsx)("div", { className: clsx_default(s2.Group, className), "data-stack": stack, style: toCssVariables({
+    "avatar-size": size
+  }), children: maybeReversedChildren.map((child) => (0, import_react3.isValidElement)(child) ? (0, import_react3.cloneElement)(child) : child) });
+};
+export {
+  Avatar,
+  AvatarGroup
+};
+//# sourceMappingURL=@openai_apps-sdk-ui_components_Avatar.js.map

package/template/node_modules/.vite-mcp/deps_temp_992accd8/@openai_apps-sdk-ui_components_Avatar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/src/components/Avatar/Avatar.tsx", "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.1_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/src/components/Avatar/AvatarGroup.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useMemo, useState } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport { type SemanticColors, type Variants } from \"../../types\"\nimport s from \"./Avatar.module.css\"\n\ntype ImageStatus = undefined | \"error\" | \"loaded\"\n\nexport type AvatarProps = {\n  /** Class name applied to the avatar */\n  className?: string\n  /** Size of the avatar's width & height, in pixels. */\n  size?: number\n  /** Display a formatted count of overflow objects. */\n  overflowCount?: number\n  /** Name used to display initials from */\n  name?: string\n  /**\n   * Color used for the avatar\n   * @default secondary\n   */\n  color?: SemanticColors<\"primary\" | \"secondary\" | \"success\" | \"info\" | \"discovery\" | \"danger\">\n  /**\n   * Style variant of the avatar\n   * @default soft\n   */\n  variant?: Variants<\"soft\" | \"solid\">\n  /** URL of the image to display as the avatar */\n  imageUrl?: string\n  /** Icon to render in the avatar circle */\n  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>\n  /** Optional click handler, which also enables semantic interactions */\n  onClick?: () => void\n  /** Optional pointer handler, which also enables semantic interactions */\n  onPointerDown?: () => void\n}\n\nexport const Avatar = (props: AvatarProps) => {\n  // Validate the image url before sending to the component\n  const validImageUrl = validateImageUrl(props.imageUrl)\n\n  // Keying off of imageUrl allows us to refresh imageStatus automatically through React rendering\n  return <AvatarInner {...props} imageUrl={validImageUrl} key={validImageUrl} />\n}\n\nexport const AvatarInner = (props: AvatarProps) => {\n  const {\n    className,\n    size,\n    overflowCount,\n    name,\n    color = \"secondary\",\n    variant = \"soft\",\n    imageUrl,\n    Icon,\n    // asChild support\n    ...restProps\n  } = props\n  const [imageStatus, setImageStatus] = useState<ImageStatus>()\n  const isInteractive = !!(restProps.onPointerDown || restProps.onClick)\n  const TagName = isInteractive ? \"button\" : \"span\"\n\n  return (\n    <TagName\n      className={clsx(s.Avatar, className)}\n      style={toCssVariables({\n        \"avatar-size\": size,\n      })}\n      role={isInteractive ? undefined : \"presentation\"}\n      data-color={color}\n      data-variant={variant}\n      type={isInteractive ? \"button\" : undefined}\n      {...restProps}\n    >\n      {(() => {\n        if (imageUrl && imageStatus !== \"error\") {\n          return (\n            <AvatarImage\n              status={imageStatus}\n              url={imageUrl}\n              onError={() => setImageStatus(\"error\")}\n              onLoad={() => setImageStatus(\"loaded\")}\n            />\n          )\n        }\n        if (Icon) {\n          return <Icon className={s.AvatarIcon} />\n        }\n        return overflowCount ? (\n          <AvatarOverflowCount count={overflowCount} />\n        ) : (\n          <AvatarInitial name={name} />\n        )\n      })()}\n    </TagName>\n  )\n}\n\nconst validateImageUrl = (imageUrl?: string): string | undefined => {\n  if (!imageUrl) {\n    return\n  }\n\n  // Avoid specific pattern of images from gravatar.com, which use a pair of initials, instead of a single initial.\n  if (imageUrl.includes(\"gravatar.com\") && imageUrl.includes(\"cdn.auth0.com\")) {\n    return\n  }\n\n  return imageUrl\n}\n\nconst AvatarImage = ({\n  url,\n  status,\n  onLoad,\n  onError,\n}: {\n  url: string\n  status: ImageStatus\n  onLoad: () => void\n  onError: () => void\n}) => {\n  return (\n    <span className={s.AvatarImageContainer}>\n      <img\n        src={url}\n        className={s.AvatarImage}\n        data-loaded={status === \"loaded\" ? \"\" : undefined}\n        onLoad={onLoad}\n        onError={onError}\n        alt=\"\"\n        role=\"presentation\"\n      />\n    </span>\n  )\n}\n\nconst AvatarInitial = ({ name = \"\" }: { name?: string }) => {\n  const firstInitial = useMemo(() => name.charAt(0).toUpperCase(), [name])\n\n  return <span className={s.AvatarInitial}>{firstInitial}</span>\n}\n\nconst AvatarOverflowCount = ({ count }: { count: number }) => {\n  const formattedCount = useMemo<string>(() => {\n    return new Intl.NumberFormat(\"en\", {\n      notation: \"compact\",\n      compactDisplay: \"short\",\n      maximumFractionDigits: 0,\n    })\n      .format(count)\n      .toLocaleLowerCase()\n  }, [count])\n\n  return (\n    <span className={s.AvatarOverflowCount} data-letter-count={formattedCount.length}>\n      <span className={s.AvatarOverflowCountSymbol}>+</span>\n      {formattedCount}\n    </span>\n  )\n}\n", "import clsx from \"clsx\"\nimport { Children, cloneElement, isValidElement, type ReactNode } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"./AvatarGroup.module.css\"\n\nexport type AvatarGroupProps = {\n  /** Class name passed to the group container */\n  className?: string\n  /**\n   * Determines stacking layer order\n   * @default start\n   */\n  stack?: \"start\" | \"end\"\n  /** Size all avatars in the group, in pixels. */\n  size?: number\n  children: ReactNode\n}\n\nexport const AvatarGroup = ({ className, stack = \"start\", size, children }: AvatarGroupProps) => {\n  const childrenArray = Children.toArray(children)\n  // Conditionally reverse the array depending on desired stacking priority\n  const maybeReversedChildren = stack === \"start\" ? childrenArray.slice().reverse() : childrenArray\n\n  return (\n    <div\n      className={clsx(s.Group, className)}\n      data-stack={stack}\n      style={toCssVariables({\n        \"avatar-size\": size,\n      })}\n    >\n      {maybeReversedChildren.map((child) => (isValidElement(child) ? cloneElement(child) : child))}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["import_react", "_createElement", "_jsx", "_jsxs", "import_react", "s", "_jsx"]
+}