sunpeak 0.9.10 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.9.10",
+  "version": "0.10.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:
- * - simulations/{resource}-{tool}-simulation.json (e.g., albums-show-simulation.json)
- * - resources/{resource}-resource.json
- * - resources/{Resource}Resource component (PascalCase)
+ * - resources/{resource}/{resource}-{tool}-simulation.json (e.g., resources/albums/albums-show-simulation.json)
+ * - resources/{resource}/{resource}-resource.json
+ * - resources/{resource}/{Resource}Resource component (PascalCase)
  */
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -16,8 +16,8 @@ import '../src/styles/globals.css';
 
 // Build simulations from discovered files
 const simulations = buildDevSimulations({
-  simulationModules: import.meta.glob('../src/simulations/*-simulation.json', { eager: true }),
-  resourceModules: import.meta.glob('../src/resources/*-resource.json', { eager: true }),
+  simulationModules: import.meta.glob('../src/resources/*/*-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

@@ -16,48 +16,34 @@ That's it! Edit the resource files in [./src/resources/](./src/resources/) to bu
 ## Commands
 
 ```bash
-sunpeak dev            # Start development server
-sunpeak build          # Build all resources for production
-sunpeak mcp            # Start MCP server with auto-reload
-pnpm test              # Run tests with Vitest
+# Core commands:
+pnpm test              # Run tests with Vitest.
+pnpm test:e2e          # Run end-to-end tests with Playwright.
+sunpeak dev            # Start development server.
+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.
+sunpeak push           # Push built resources to the sunpeak repository.
+sunpeak pull           # Pull built resources from the sunpeak repository (for your prod MCP server).
 ```
 
 The template includes a minimal test setup with Vitest. You can add additional tooling (linting, formatting, type-checking) as needed for your project.
 
-### Customization
+## Project Structure
 
-**Do not customize (required by `sunpeak` commands):**
+- `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.).
 
-- `src/resources/` - Resource files must be here
-- `src/simulations/` - Simulation files must be here
-- Resource file naming: `*-resource.tsx` (e.g., `review-resource.tsx`)
-- Simulation file naming: `*-simulation.json` (e.g., `review-purchase-simulation.json`)
-- `src/index-resource.tsx` - Build template (must have `// RESOURCE_IMPORT` and `// RESOURCE_MOUNT` comments)
-
-**You can customize:**
-
-- Package.json scripts - Add your own tooling (lint, format, typecheck, etc.)
-- Component structure within `src/components/`
-- Package manager (pnpm, npm, or yarn auto-detected)
-- Pretty much everything else!
-
-## Testing
-
-### Testing Locally
-
-Run the test suite:
-
-```bash
-pnpm test
-```
-
-For manual QA of the UI:
-
-```bash
-sunpeak dev
-```
-
-### Testing in ChatGPT
+## Testing in ChatGPT
 
 Test your app directly in ChatGPT using the built-in MCP server:
 
@@ -83,28 +69,46 @@ Build your app for production:
 sunpeak build
 ```
 
-This creates optimized builds in `dist/`:
+This creates optimized builds in `dist/`, organized by resource:
 
-- `dist/albums.js`
-- `dist/albums.json`
-- `dist/review.js`
-- `dist/review.json`
-- _(One .js file per resource in src/resources/)_
-- _(One .json file per resource in src/resources/)_
+```bash
+dist/
+├── albums/
+│   ├── albums.js                     # Built resource component.
+│   ├── albums.json                   # Resource metadata.
+│   └── albums-show-simulation.json   # Resource mock data for testing.
+├── review/
+│   ├── review.js
+│   ├── review.json
+│   ├── review-diff-simulation.json
+│   ├── review-post-simulation.json
+│   └── review-purchase-simulation.json
+└── ...
+```
+
+Each resource folder contains:
 
-Each `.js` file is a self-contained bundle with CSS inlined. Host these files and reference them as resources in your production MCP server.
+- **`.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.
 
-Each `.json` file is a copy of each of your resource MCP metadata files `src/resource/*-resource.json`. The copy is identical, but with a unique `uri` field added that will cache-bust earlier resource versions pre-loaded in ChatGPT.
+Host these files and reference them as resources in your production MCP server.
+Use the sunpeak resource repository for built-in resource hosting.
 
 ## Add a new UI (Resource)
 
-To add a new UI (MCP Resource), simply create the following files:
+To add a new UI (MCP Resource), create a new directory under `src/resources/` with the following files:
 
-- `src/resources/NAME-resource.tsx`
-- `src/resources/NAME-resource.json`
-- `src/simulations/NAME-TOOLNAME-simulation.json`
+```
+src/resources/NAME/
+├── NAME-resource.tsx         # React component (required)
+├── NAME-resource.json        # Resource metadata (required)
+├── NAME-resource.test.tsx    # Unit tests (optional)
+├── NAME-TOOLNAME-simulation.json  # Simulation data (optional)
+└── components/               # UI components (optional)
+```
 
-Only the resource files 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 if you want to preview your resource in `sunpeak dev` or `sunpeak mcp`.
 
 ## Resources
 

package/template/dist/{albums.json → albums/albums.json}

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://albums-mka2vgl6"
+  "uri": "ui://albums-mkd2axzd"
 }

package/template/dist/{carousel.json → carousel/carousel.json}

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://carousel-mka2vgl6"
+  "uri": "ui://carousel-mkd2axzd"
 }

package/template/dist/{map.json → map/map.json}

@@ -18,5 +18,5 @@
       ]
     }
   },
-  "uri": "ui://map-mka2vgl6"
+  "uri": "ui://map-mkd2axzd"
 }

package/template/dist/{review.json → review/review.json}

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://review-mka2vgl6"
+  "uri": "ui://review-mkd2axzd"
 }

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_SegmentedControl.js

@@ -1,7 +1,3 @@
-import {
-  dist_exports4 as dist_exports
-} from "./chunk-TSEQUROC.js";
-import "./chunk-XZTIOEPG.js";
 import {
   useResizeObserver
 } from "./chunk-JAGHY6H6.js";
@@ -10,6 +6,10 @@ import {
   waitForAnimationFrame
 } from "./chunk-DYQDWJMS.js";
 import "./chunk-EGRHWZRV.js";
+import {
+  dist_exports4 as dist_exports
+} from "./chunk-TSEQUROC.js";
+import "./chunk-XZTIOEPG.js";
 import {
   clsx_default
 } from "./chunk-CNYJBM5F.js";

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Select.js

@@ -1,12 +1,6 @@
 import {
   Input
 } from "./chunk-2DZGWGIP.js";
-import {
-  dist_exports,
-  dist_exports3 as dist_exports2,
-  dist_exports5 as dist_exports3
-} from "./chunk-TSEQUROC.js";
-import "./chunk-XZTIOEPG.js";
 import {
   Button,
   LoadingIndicator,
@@ -25,6 +19,12 @@ import {
   waitForAnimationFrame
 } from "./chunk-DYQDWJMS.js";
 import "./chunk-EGRHWZRV.js";
+import {
+  dist_exports,
+  dist_exports3 as dist_exports2,
+  dist_exports5 as dist_exports3
+} from "./chunk-TSEQUROC.js";
+import "./chunk-XZTIOEPG.js";
 import {
   clsx_default
 } from "./chunk-CNYJBM5F.js";

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

@@ -7,115 +7,115 @@
     "react": {
       "src": "../../../../node_modules/.pnpm/react@19.2.3/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "e9d7bd7c",
+      "fileHash": "978df452",
       "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": "6077638f",
+      "fileHash": "739c8c96",
       "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": "d1b53763",
+      "fileHash": "c6a55f8c",
       "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": "7220a079",
+      "fileHash": "2e3249cd",
       "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": "a4018122",
+      "fileHash": "84d35df3",
       "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": "a08e5fc7",
+      "fileHash": "c08d365b",
       "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.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Checkbox/index.js",
       "file": "@openai_apps-sdk-ui_components_Checkbox.js",
-      "fileHash": "568a2156",
+      "fileHash": "b0e3c856",
       "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": "870168af",
+      "fileHash": "25eae116",
       "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.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Input/index.js",
       "file": "@openai_apps-sdk-ui_components_Input.js",
-      "fileHash": "f6d4ad60",
+      "fileHash": "e06a7192",
       "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.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/SegmentedControl/index.js",
       "file": "@openai_apps-sdk-ui_components_SegmentedControl.js",
-      "fileHash": "99bd53a9",
+      "fileHash": "fad6e91f",
       "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.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Select/index.js",
       "file": "@openai_apps-sdk-ui_components_Select.js",
-      "fileHash": "849b8549",
+      "fileHash": "fb9567a2",
       "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.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/components/Textarea/index.js",
       "file": "@openai_apps-sdk-ui_components_Textarea.js",
-      "fileHash": "1655679b",
+      "fileHash": "7281a5a0",
       "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.7__@types+react@19._90324f97b7190ccfdbe40a9e8bef3385/node_modules/@openai/apps-sdk-ui/dist/es/lib/theme.js",
       "file": "@openai_apps-sdk-ui_theme.js",
-      "fileHash": "2d1cd0a4",
+      "fileHash": "8eb63021",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "3c893bd9",
+      "fileHash": "c3e9c6e8",
       "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": "177240f7",
+      "fileHash": "2e92d16c",
       "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": "1a9092e3",
+      "fileHash": "ca493790",
       "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": "4acc5784",
+      "fileHash": "5ba95985",
       "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": "0d690983",
+      "fileHash": "4c39d1d2",
       "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": "600e9867",
+      "fileHash": "88ea5519",
       "needsInterop": false
     }
   },
@@ -123,12 +123,6 @@
     "chunk-2DZGWGIP": {
       "file": "chunk-2DZGWGIP.js"
     },
-    "chunk-TSEQUROC": {
-      "file": "chunk-TSEQUROC.js"
-    },
-    "chunk-XZTIOEPG": {
-      "file": "chunk-XZTIOEPG.js"
-    },
     "chunk-N6DVYEXK": {
       "file": "chunk-N6DVYEXK.js"
     },
@@ -144,6 +138,12 @@
     "chunk-EGRHWZRV": {
       "file": "chunk-EGRHWZRV.js"
     },
+    "chunk-TSEQUROC": {
+      "file": "chunk-TSEQUROC.js"
+    },
+    "chunk-XZTIOEPG": {
+      "file": "chunk-XZTIOEPG.js"
+    },
     "chunk-CNYJBM5F": {
       "file": "chunk-CNYJBM5F.js"
     },

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

@@ -1 +1 @@
-{"version":"4.0.16","results":[[":src/components/album/albums.test.tsx",{"duration":324.77866399999994,"failed":false}],[":src/resources/review-resource.test.tsx",{"duration":529.694369,"failed":false}],[":src/resources/carousel-resource.test.tsx",{"duration":263.42517499999985,"failed":false}],[":src/components/map/map-view.test.tsx",{"duration":85.665119,"failed":false}],[":src/components/map/place-inspector.test.tsx",{"duration":409.3448330000001,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":228.8939330000003,"failed":false}],[":src/components/map/place-list.test.tsx",{"duration":147.47323099999994,"failed":false}],[":src/components/map/place-card.test.tsx",{"duration":355.5575329999999,"failed":false}],[":src/components/map/place-carousel.test.tsx",{"duration":429.1329959999998,"failed":false}],[":src/components/album/album-carousel.test.tsx",{"duration":79.22797600000013,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":73.47246699999982,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":289.68861300000003,"failed":false}],[":src/resources/map-resource.test.tsx",{"duration":255.71324299999992,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":408.4503480000001,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":321.1045839999997,"failed":false}],[":src/components/carousel/card.test.tsx",{"duration":76.67339900000002,"failed":false}]]}
+{"version":"4.0.16","results":[[":src/resources/albums/components/albums.test.tsx",{"duration":312.6829419999999,"failed":false}],[":src/resources/carousel/carousel-resource.test.tsx",{"duration":266.349324,"failed":false}],[":src/resources/review/review-resource.test.tsx",{"duration":575.062723,"failed":false}],[":src/resources/map/components/place-inspector.test.tsx",{"duration":408.8364120000001,"failed":false}],[":src/resources/map/components/map-view.test.tsx",{"duration":76.36474199999998,"failed":false}],[":src/resources/albums/components/fullscreen-viewer.test.tsx",{"duration":271.794167,"failed":false}],[":src/resources/map/components/place-list.test.tsx",{"duration":147.25542700000005,"failed":false}],[":src/resources/map/components/place-card.test.tsx",{"duration":334.0843209999998,"failed":false}],[":src/resources/map/components/place-carousel.test.tsx",{"duration":402.49088800000004,"failed":false}],[":src/resources/albums/components/album-carousel.test.tsx",{"duration":83.27303100000017,"failed":false}],[":src/resources/carousel/components/carousel.test.tsx",{"duration":99.52693,"failed":false}],[":src/resources/map/map-resource.test.tsx",{"duration":291.25948700000004,"failed":false}],[":src/resources/albums/albums-resource.test.tsx",{"duration":222.6419860000001,"failed":false}],[":src/resources/albums/components/film-strip.test.tsx",{"duration":473.575382,"failed":false}],[":src/resources/albums/components/album-card.test.tsx",{"duration":399.02311299999997,"failed":false}],[":src/resources/carousel/components/card.test.tsx",{"duration":69.64156500000013,"failed":false}]]}

package/template/src/resources/{albums-resource.test.tsx → albums/albums-resource.test.tsx}

@@ -12,7 +12,7 @@ vi.mock('sunpeak', () => ({
 }));
 
 // Mock Albums component
-vi.mock('../components/album/albums', () => ({
+vi.mock('./components/albums', () => ({
   Albums: () => <div data-testid="albums-component">Albums Component</div>,
 }));
 

package/template/src/resources/{albums-resource.tsx → albums/albums-resource.tsx}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSafeArea, useMaxHeight } from 'sunpeak';
-import { Albums } from '../components/album/albums';
+import { Albums } from './components/albums';
 
 /**
  * Production-ready Albums Resource

package/template/src/resources/albums/albums-show-simulation.json

@@ -0,0 +1,131 @@
+{
+  "userMessage": "Pizza time",
+  "tool": {
+    "name": "show-albums",
+    "description": "Show photo albums",
+    "inputSchema": { "type": "object", "properties": {}, "additionalProperties": false },
+    "title": "Show Albums",
+    "annotations": { "readOnlyHint": true },
+    "_meta": {
+      "openai/toolInvocation/invoking": "Loading albums",
+      "openai/toolInvocation/invoked": "Album loaded",
+      "openai/widgetAccessible": true,
+      "openai/resultCanProduceWidget": true
+    }
+  },
+  "callToolResult": {
+    "structuredContent": {
+      "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"
+            }
+          ]
+        }
+      ]
+    },
+    "_meta": {}
+  }
+}

package/template/src/{components/album → resources/albums/components}/album-card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from '@openai/apps-sdk-ui/components/Button';
-import { cn } from '../../lib/index';
+import { cn } from '../../../lib/index';
 import type { Album } from './albums';
 
 export type AlbumCardProps = {

package/template/src/{components/album → resources/albums/components}/album-carousel.tsx

@@ -4,7 +4,7 @@ import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
 import { ArrowLeft, ArrowRight } from '@openai/apps-sdk-ui/components/Icon';
 import { useWidgetState, useDisplayMode } from 'sunpeak';
 import { Button } from '@openai/apps-sdk-ui/components/Button';
-import { cn } from '../../lib/index';
+import { cn } from '../../../lib/index';
 
 export interface AlbumCarouselState extends Record<string, unknown> {
   currentIndex?: number;

package/template/src/{components/album → resources/albums/components}/film-strip.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from '@openai/apps-sdk-ui/components/Button';
-import { cn } from '../../lib/index';
+import { cn } from '../../../lib/index';
 import type { Album } from './albums';
 
 export type FilmStripProps = {

package/template/src/{components/album → resources/albums/components}/fullscreen-viewer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSafeArea } from 'sunpeak';
-import { cn } from '../../lib/index';
+import { cn } from '../../../lib/index';
 import { FilmStrip } from './film-strip';
 import type { Album } from './albums';
 

package/template/src/resources/{carousel-resource.test.tsx → carousel/carousel-resource.test.tsx}

@@ -32,7 +32,7 @@ vi.mock('sunpeak', () => ({
 }));
 
 // Mock child components
-vi.mock('../components/carousel', () => ({
+vi.mock('./components', () => ({
   Carousel: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="carousel">{children}</div>
   ),

package/template/src/resources/{carousel-resource.tsx → carousel/carousel-resource.tsx}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useWidgetProps, useSafeArea, useMaxHeight, useUserAgent } from 'sunpeak';
-import { Carousel, Card } from '../components/carousel';
+import { Carousel, Card } from './components';
 
 /**
  * Production-ready Carousel Resource