sunpeak 0.8.8 → 0.9.2

package/template/dist/review.json

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://review-mjw4w0g9"
+  "uri": "ui://review-mk1rwc3i"
 }

package/template/node_modules/.bin/playwright

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/test/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/test/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules/@playwright/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/@playwright+test@1.57.0/node_modules:/home/runner/work/sunpeak/sunpeak/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../@playwright/test/cli.js" "$@"
+else
+  exec node  "$basedir/../@playwright/test/cli.js" "$@"
+fi

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

@@ -1,3 +1,7 @@
+import {
+  dist_exports4 as dist_exports
+} from "./chunk-TSEQUROC.js";
+import "./chunk-XZTIOEPG.js";
 import {
   useResizeObserver
 } from "./chunk-JAGHY6H6.js";
@@ -6,10 +10,6 @@ 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,6 +1,12 @@
 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,
@@ -19,12 +25,6 @@ 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

@@ -1,121 +1,121 @@
 {
-  "hash": "2f940a3d",
+  "hash": "b74c9763",
   "configHash": "f56e5903",
-  "lockfileHash": "bdba07c2",
-  "browserHash": "0bd02dfa",
+  "lockfileHash": "8ed69ad2",
+  "browserHash": "238bb651",
   "optimized": {
     "react": {
       "src": "../../../../node_modules/.pnpm/react@19.2.3/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "d6aa24ec",
+      "fileHash": "9f8922cb",
       "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": "a84166b8",
+      "fileHash": "b39e5f22",
       "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": "92c4ccf8",
+      "fileHash": "98b0fafe",
       "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": "fee8e947",
+      "fileHash": "589dec17",
       "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": "d1d0268f",
+      "fileHash": "e1ca40fe",
       "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": "0d815226",
+      "fileHash": "4566ca48",
       "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": "e87c4e4e",
+      "fileHash": "b2edde35",
       "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": "5c946825",
+      "fileHash": "e62f20ec",
       "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": "e5d8b16c",
+      "fileHash": "0204cb80",
       "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": "4494f051",
+      "fileHash": "7bf18eee",
       "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": "e67a1bb8",
+      "fileHash": "79ea3e4b",
       "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": "c9eb4f91",
+      "fileHash": "44843a19",
       "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": "8d57b3ed",
+      "fileHash": "e60dca1c",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "e10bef76",
+      "fileHash": "f15d30c1",
       "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": "6d9c07d5",
+      "fileHash": "6b3141d4",
       "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": "3f6f688e",
+      "fileHash": "efa2153a",
       "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": "7f66cd45",
+      "fileHash": "2b20f694",
       "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": "c9a3870a",
+      "fileHash": "5e9ee085",
       "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": "9262acf9",
+      "fileHash": "487e9f49",
       "needsInterop": false
     }
   },
@@ -123,6 +123,12 @@
     "chunk-2DZGWGIP": {
       "file": "chunk-2DZGWGIP.js"
     },
+    "chunk-TSEQUROC": {
+      "file": "chunk-TSEQUROC.js"
+    },
+    "chunk-XZTIOEPG": {
+      "file": "chunk-XZTIOEPG.js"
+    },
     "chunk-N6DVYEXK": {
       "file": "chunk-N6DVYEXK.js"
     },
@@ -138,12 +144,6 @@
     "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":334.697216,"failed":false}],[":src/resources/review-resource.test.tsx",{"duration":555.3965230000001,"failed":false}],[":src/resources/carousel-resource.test.tsx",{"duration":255.80494199999998,"failed":false}],[":src/components/map/map-view.test.tsx",{"duration":80.3751279999999,"failed":false}],[":src/components/map/place-inspector.test.tsx",{"duration":425.41421500000024,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":254.88947699999972,"failed":false}],[":src/components/map/place-list.test.tsx",{"duration":128.85422500000004,"failed":false}],[":src/components/map/place-card.test.tsx",{"duration":346.91089099999976,"failed":false}],[":src/components/map/place-carousel.test.tsx",{"duration":450.42473600000017,"failed":false}],[":src/components/album/album-carousel.test.tsx",{"duration":95.884546,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":82.93981499999995,"failed":false}],[":src/resources/map-resource.test.tsx",{"duration":289.9950490000001,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":250.440699,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":397.1800680000001,"failed":false}],[":src/components/carousel/card.test.tsx",{"duration":74.95684000000006,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":283.6294740000001,"failed":false}]]}
+{"version":"4.0.16","results":[[":src/components/album/albums.test.tsx",{"duration":337.9990579999999,"failed":false}],[":src/resources/carousel-resource.test.tsx",{"duration":249.7428500000001,"failed":false}],[":src/resources/review-resource.test.tsx",{"duration":532.4556819999998,"failed":false}],[":src/components/map/place-inspector.test.tsx",{"duration":402.02946900000006,"failed":false}],[":src/components/map/map-view.test.tsx",{"duration":91.84771499999988,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":254.4845110000001,"failed":false}],[":src/components/map/place-list.test.tsx",{"duration":157.57383200000004,"failed":false}],[":src/components/map/place-card.test.tsx",{"duration":353.70146399999976,"failed":false}],[":src/components/map/place-carousel.test.tsx",{"duration":461.7055280000002,"failed":false}],[":src/components/album/album-carousel.test.tsx",{"duration":96.31957500000021,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":88.95574399999987,"failed":false}],[":src/resources/map-resource.test.tsx",{"duration":294.10313500000007,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":276.18517599999996,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":478.3753600000002,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":350.313899,"failed":false}],[":src/components/carousel/card.test.tsx",{"duration":99.09871700000008,"failed":false}]]}

package/template/package.json

@@ -7,7 +7,8 @@
     "dev": "sunpeak dev",
     "build": "sunpeak build",
     "mcp": "sunpeak mcp",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@openai/apps-sdk-ui": "^0.2.1",
@@ -19,6 +20,7 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/template/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:6776',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'PORT=6776 pnpm dev',
+    url: 'http://localhost:6776',
+    reuseExistingServer: !process.env.CI,
+    timeout: 10000,
+  },
+});

package/template/src/resources/review-resource.test.tsx

@@ -107,12 +107,12 @@ describe('ReviewResource', () => {
       expect(screen.getByText('Please review the following items')).toBeInTheDocument();
     });
 
-    it('renders empty state when no sections', () => {
+    it('renders loading when no sections', () => {
       mockWidgetData = { title: 'Test', sections: [] };
 
       render(<ReviewResource />);
 
-      expect(screen.getByText('Nothing to confirm')).toBeInTheDocument();
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
     });
 
     it('has the correct displayName', () => {

package/template/src/resources/review-resource.tsx

@@ -425,7 +425,12 @@ export const ReviewResource = React.forwardRef<HTMLDivElement>((_props, ref) =>
 
         {/* Sections */}
         {sections.length === 0 ? (
-          <p className="text-secondary text-center py-8">Nothing to confirm</p>
+          // Note: Apps cannot distinguish between "still loading" and "empty response".
+          // We show a loading state as the optimistic assumption.
+          <div className="flex items-center justify-center gap-2 py-8 text-secondary">
+            <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+            <span>Loading...</span>
+          </div>
         ) : (
           sections.map((section, i) => <Section key={i} section={section} />)
         )}

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

@@ -13,7 +13,7 @@
       "openai/resultCanProduceWidget": true
     }
   },
-  "toolCall": {
+  "callToolResult": {
     "structuredContent": {
       "albums": [
         {

package/template/src/simulations/carousel-show-simulation.json

@@ -13,7 +13,7 @@
       "openai/resultCanProduceWidget": true
     }
   },
-  "toolCall": {
+  "callToolResult": {
     "structuredContent": {
       "places": [
         {

package/template/src/simulations/map-show-simulation.json

@@ -13,7 +13,7 @@
       "openai/resultCanProduceWidget": true
     }
   },
-  "toolCall": {
+  "callToolResult": {
     "structuredContent": {
       "places": [
         {

package/template/src/simulations/review-diff-simulation.json

@@ -13,7 +13,7 @@
       "openai/resultCanProduceWidget": true
     }
   },
-  "toolCall": {
+  "callToolResult": {
     "structuredContent": {
       "title": "Refactor Authentication Module",
       "description": "The following changes will update the authentication system to use JWT tokens instead of session-based auth.",

package/template/src/simulations/review-post-simulation.json

@@ -13,7 +13,7 @@
       "openai/resultCanProduceWidget": true
     }
   },
-  "toolCall": {
+  "callToolResult": {
     "structuredContent": {
       "title": "Review Your Post",
       "description": "This post will be published to your connected accounts.",

package/template/src/simulations/review-purchase-simulation.json

@@ -13,7 +13,7 @@
       "openai/resultCanProduceWidget": true
     }
   },
-  "toolCall": {
+  "callToolResult": {
     "structuredContent": {
       "title": "Confirm Your Order",
       "description": "Please review your order before completing the purchase.",

package/template/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

package/template/tests/e2e/albums.spec.ts

@@ -0,0 +1,120 @@
+import { test, expect } from '@playwright/test';
+import { createSimulatorUrl } from 'sunpeak/chatgpt';
+
+test.describe('Albums Resource', () => {
+  test.describe('Light Mode', () => {
+    test('should render album cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'light' }));
+
+      const albumCard = page.locator('button:has-text("Summer Slice")');
+      await expect(albumCard).toBeVisible();
+
+      // Verify album card unique styles
+      const styles = await albumCard.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+          borderRadius: computed.borderRadius,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+      expect(styles.borderRadius).toBe('12px'); // rounded-xl
+    });
+
+    test('should have album image with correct aspect ratio', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'light' }));
+
+      const albumImage = page.locator('button:has-text("Summer Slice") img').first();
+      await expect(albumImage).toBeVisible();
+
+      // Verify aspect-[4/3] container
+      const imageContainer = page.locator('button:has-text("Summer Slice") .aspect-\\[4\\/3\\]');
+      await expect(imageContainer).toBeVisible();
+
+      const containerStyles = await imageContainer.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          overflow: computed.overflow,
+        };
+      });
+
+      expect(containerStyles.borderRadius).toBe('12px'); // rounded-xl
+      expect(containerStyles.overflow).toBe('hidden');
+    });
+  });
+
+  test.describe('Dark Mode', () => {
+    test('should render album cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'dark' }));
+
+      const albumCard = page.locator('button:has-text("Summer Slice")');
+      await expect(albumCard).toBeVisible();
+
+      const styles = await albumCard.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+          borderRadius: computed.borderRadius,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+      expect(styles.borderRadius).toBe('12px'); // rounded-xl
+    });
+
+    test('should have text with appropriate contrast', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'albums-show', theme: 'dark' }));
+
+      const albumTitle = page.locator('button:has-text("Summer Slice") .text-primary').first();
+      await expect(albumTitle).toBeVisible();
+
+      // In dark mode, text-primary should be light colored for contrast
+      const titleStyles = await albumTitle.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          color: computed.color,
+        };
+      });
+
+      // Verify the text color exists (should be a light color in dark mode)
+      expect(titleStyles.color).toBeTruthy();
+    });
+  });
+
+  test.describe('Fullscreen Mode', () => {
+    test('should render correctly in fullscreen displayMode', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'albums-show', theme: 'light', displayMode: 'fullscreen' })
+      );
+
+      // Wait for content to load
+      await page.waitForLoadState('networkidle');
+
+      // The root container should be present
+      const root = page.locator('#root');
+      await expect(root).not.toBeEmpty();
+    });
+
+    test('should maintain album card styles in fullscreen', async ({ page }) => {
+      await page.goto(
+        createSimulatorUrl({ simulation: 'albums-show', theme: 'dark', displayMode: 'fullscreen' })
+      );
+
+      const albumCard = page.locator('button:has-text("Summer Slice")');
+      await expect(albumCard).toBeVisible();
+
+      const styles = await albumCard.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+          borderRadius: computed.borderRadius,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+      expect(styles.borderRadius).toBe('12px');
+    });
+  });
+});

package/template/tests/e2e/carousel.spec.ts

@@ -0,0 +1,127 @@
+import { test, expect } from '@playwright/test';
+import { createSimulatorUrl } from 'sunpeak/chatgpt';
+
+test.describe('Carousel Resource', () => {
+  test.describe('Light Mode', () => {
+    test('should render carousel cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'light' }));
+
+      // Wait for carousel to load
+      await page.waitForLoadState('networkidle');
+
+      // Find a card in the carousel
+      const card = page.locator('.rounded-2xl').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          cursor: computed.cursor,
+        };
+      });
+
+      expect(styles.borderRadius).toBe('16px'); // rounded-2xl
+      expect(styles.cursor).toBe('pointer');
+    });
+
+    test('should have card with border styling', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Cards have border-subtle styling
+      const card = page.locator('.rounded-2xl.border').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderWidth: computed.borderWidth,
+          borderStyle: computed.borderStyle,
+        };
+      });
+
+      expect(styles.borderWidth).toBe('1px');
+      expect(styles.borderStyle).toBe('solid');
+    });
+
+    test('should have interactive buttons', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'light' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Find the Visit button (primary button)
+      const visitButton = page.locator('button:has-text("Visit")').first();
+      await expect(visitButton).toBeAttached();
+
+      const styles = await visitButton.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          cursor: computed.cursor,
+        };
+      });
+
+      expect(styles.cursor).toBe('pointer');
+    });
+  });
+
+  test.describe('Dark Mode', () => {
+    test('should render carousel cards with correct styles', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      const card = page.locator('.rounded-2xl').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          borderRadius: computed.borderRadius,
+          cursor: computed.cursor,
+        };
+      });
+
+      expect(styles.borderRadius).toBe('16px'); // rounded-2xl
+      expect(styles.cursor).toBe('pointer');
+    });
+
+    test('should have appropriate background color for dark mode', async ({ page }) => {
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'dark' }));
+
+      await page.waitForLoadState('networkidle');
+
+      // Verify the card has a background color set
+      const card = page.locator('.rounded-2xl.bg-surface').first();
+      await expect(card).toBeVisible();
+
+      const styles = await card.evaluate((el) => {
+        const computed = window.getComputedStyle(el);
+        return {
+          backgroundColor: computed.backgroundColor,
+        };
+      });
+
+      // Background color should be set (not transparent)
+      expect(styles.backgroundColor).toBeTruthy();
+      expect(styles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
+    });
+
+    test('should load without console errors', async ({ page }) => {
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+
+      await page.goto(createSimulatorUrl({ simulation: 'carousel-show', theme: 'dark' }));
+      await page.waitForLoadState('networkidle');
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  // Note: No fullscreen test for carousel as per requirements
+});