sunpeak 0.5.39 → 0.5.41

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

@@ -7,103 +7,103 @@
     "react": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "1fcc4295",
+      "fileHash": "264ae3aa",
       "needsInterop": true
     },
     "react-dom": {
       "src": "../../../../node_modules/.pnpm/react-dom@19.2.0_react@19.2.0/node_modules/react-dom/index.js",
       "file": "react-dom.js",
-      "fileHash": "a3591f16",
+      "fileHash": "565f0670",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "94686c0a",
+      "fileHash": "dc93890d",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "1e5db247",
+      "fileHash": "769723ed",
       "needsInterop": true
     },
     "@openai/apps-sdk-ui/components/Button": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Button/index.js",
       "file": "@openai_apps-sdk-ui_components_Button.js",
-      "fileHash": "d6d133fa",
+      "fileHash": "2aaa39fe",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Checkbox": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Checkbox/index.js",
       "file": "@openai_apps-sdk-ui_components_Checkbox.js",
-      "fileHash": "ce84b869",
+      "fileHash": "9bc36d10",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Icon": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Icon/index.js",
       "file": "@openai_apps-sdk-ui_components_Icon.js",
-      "fileHash": "060967f2",
+      "fileHash": "0c8a7bb7",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Input": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Input/index.js",
       "file": "@openai_apps-sdk-ui_components_Input.js",
-      "fileHash": "a6e2b3d5",
+      "fileHash": "66aa5c5a",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/SegmentedControl": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/SegmentedControl/index.js",
       "file": "@openai_apps-sdk-ui_components_SegmentedControl.js",
-      "fileHash": "a5b2ba7d",
+      "fileHash": "97a2aa5f",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Select": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Select/index.js",
       "file": "@openai_apps-sdk-ui_components_Select.js",
-      "fileHash": "681ae142",
+      "fileHash": "be97a54f",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/components/Textarea": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Textarea/index.js",
       "file": "@openai_apps-sdk-ui_components_Textarea.js",
-      "fileHash": "8085e72e",
+      "fileHash": "cb2abaca",
       "needsInterop": false
     },
     "@openai/apps-sdk-ui/theme": {
       "src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/lib/theme.js",
       "file": "@openai_apps-sdk-ui_theme.js",
-      "fileHash": "dcd36bbb",
+      "fileHash": "446e068b",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "a4d88c05",
+      "fileHash": "07860a30",
       "needsInterop": false
     },
     "embla-carousel-react": {
       "src": "../../../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.0/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js",
       "file": "embla-carousel-react.js",
-      "fileHash": "1c3b430c",
+      "fileHash": "361056e7",
       "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": "b4318164",
+      "fileHash": "a42e64fa",
       "needsInterop": false
     },
     "react-dom/client": {
       "src": "../../../../node_modules/.pnpm/react-dom@19.2.0_react@19.2.0/node_modules/react-dom/client.js",
       "file": "react-dom_client.js",
-      "fileHash": "e6bdfdfa",
+      "fileHash": "39ff4ecc",
       "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": "4eb4287f",
+      "fileHash": "01cd3e08",
       "needsInterop": false
     }
   },

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

@@ -1 +1 @@
-{"version":"4.0.13","results":[[":src/components/album/fullscreen-viewer.test.tsx",{"duration":258.46369799999957,"failed":false}],[":src/components/resources/carousel-resource.test.tsx",{"duration":245.01015499999994,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":330.82841299999995,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":62.86271500000021,"failed":false}],[":src/components/resources/counter-resource.test.tsx",{"duration":310.1445560000002,"failed":false}],[":src/components/resources/albums-resource.test.tsx",{"duration":264.3613190000001,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":469.90154299999995,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":360.1429190000001,"failed":false}],[":src/components/card/card.test.tsx",{"duration":55.29722700000002,"failed":false}]]}
+{"version":"4.0.13","results":[[":src/components/album/albums.test.tsx",{"duration":370.11665100000005,"failed":false}],[":src/components/resources/counter-resource.test.tsx",{"duration":311.2705619999997,"failed":false}],[":src/components/resources/carousel-resource.test.tsx",{"duration":257.46737600000006,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":232.20117000000027,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":86.45302899999979,"failed":false}],[":src/components/resources/albums-resource.test.tsx",{"duration":273.0157959999999,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":458.94508499999984,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":290.17094999999995,"failed":false}],[":src/components/card/card.test.tsx",{"duration":54.771146000000044,"failed":false}]]}

package/template/src/components/album/albums.test.tsx

@@ -91,8 +91,13 @@ describe('Albums', () => {
     const firstAlbum = screen.getByText('Summer Vacation').closest('button')!;
     fireEvent.click(firstAlbum);
 
-    // Should update widget state with selected album ID
-    expect(mockSetWidgetState).toHaveBeenCalledWith({ selectedAlbumId: 'album-1' });
+    // Should update widget state with selected album ID using function updater
+    expect(mockSetWidgetState).toHaveBeenCalledTimes(1);
+    const updateFn = mockSetWidgetState.mock.calls[0][0];
+    expect(typeof updateFn).toBe('function');
+    // Test the updater function
+    const result = updateFn({ currentIndex: 0 });
+    expect(result).toEqual({ currentIndex: 0, selectedAlbumId: 'album-1' });
 
     // Should request fullscreen mode
     expect(mockRequestDisplayMode).toHaveBeenCalledWith({ mode: 'fullscreen' });

package/template/src/components/album/albums.tsx

@@ -48,7 +48,7 @@ export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className
 
   const handleSelectAlbum = React.useCallback(
     (album: Album) => {
-      setWidgetState({ selectedAlbumId: album.id });
+      setWidgetState((prev) => ({ ...prev, selectedAlbumId: album.id }));
       api?.requestDisplayMode?.({ mode: 'fullscreen' });
     },
     [setWidgetState, api]

package/template/src/components/album/fullscreen-viewer.test.tsx

@@ -4,11 +4,9 @@ import { FullscreenViewer } from './fullscreen-viewer';
 import type { Album } from './albums';
 
 // Mock sunpeak hooks
-let mockMaxHeight = 800;
 let mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
 
 vi.mock('sunpeak', () => ({
-  useMaxHeight: () => mockMaxHeight,
   useSafeArea: () => mockSafeArea,
 }));
 
@@ -27,8 +25,8 @@ describe('FullscreenViewer', () => {
   it('resets to first photo when album changes', () => {
     const { rerender, container } = render(<FullscreenViewer album={mockAlbum} />);
 
-    // Get the main photo area (not the film strip)
-    const mainPhotoArea = container.querySelector('.flex-1.min-w-0');
+    // Get the main photo area
+    const mainPhotoArea = container.querySelector('.flex-1');
     let mainPhoto = mainPhotoArea?.querySelector('img');
     expect(mainPhoto).toHaveAttribute('alt', 'First Photo');
     expect(mainPhoto).toHaveAttribute('src', 'https://example.com/1.jpg');
@@ -56,8 +54,8 @@ describe('FullscreenViewer', () => {
   it('displays correct photo based on selected index from FilmStrip', () => {
     const { container } = render(<FullscreenViewer album={mockAlbum} />);
 
-    // Get the main photo (not from film strip)
-    const mainPhotoArea = container.querySelector('.flex-1.min-w-0');
+    // Get the main photo
+    const mainPhotoArea = container.querySelector('.flex-1');
     const firstPhoto = mainPhotoArea?.querySelector('img');
 
     expect(firstPhoto).toHaveAttribute('alt', 'First Photo');
@@ -79,28 +77,18 @@ describe('FullscreenViewer', () => {
     expect(images.length).toBe(0);
   });
 
-  it('respects safe area insets for main photo area', () => {
+  it('respects safe area insets', () => {
     mockSafeArea = { insets: { top: 20, bottom: 30, left: 10, right: 15 } };
 
     const { container } = render(<FullscreenViewer album={mockAlbum} />);
 
-    // Find the main photo area
-    const mainPhotoArea = container.querySelector('.flex-1.min-w-0');
-    expect(mainPhotoArea).toBeInTheDocument();
-
-    // Note: calc values may not be computed in jsdom, so we check the element has the style attribute
-    expect(mainPhotoArea).toHaveAttribute('style');
-  });
-
-  it('respects maxHeight constraint', () => {
-    mockMaxHeight = 600;
-
-    const { container } = render(<FullscreenViewer album={mockAlbum} />);
-
-    const mainDiv = container.firstChild as HTMLElement;
-    expect(mainDiv).toHaveStyle({
-      maxHeight: '600px',
-      height: '600px',
+    // Check root div has safe area padding
+    const rootDiv = container.firstChild as HTMLElement;
+    expect(rootDiv).toHaveStyle({
+      paddingTop: '20px',
+      paddingBottom: '30px',
+      paddingLeft: '10px',
+      paddingRight: '15px',
     });
   });
 });

package/template/src/components/album/fullscreen-viewer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMaxHeight, useSafeArea } from 'sunpeak';
+import { useSafeArea } from 'sunpeak';
 import { cn } from '../../lib/index';
 import { FilmStrip } from './film-strip';
 import type { Album } from './albums';
@@ -11,7 +11,6 @@ export type FullscreenViewerProps = {
 
 export const FullscreenViewer = React.forwardRef<HTMLDivElement, FullscreenViewerProps>(
   ({ album, className }, ref) => {
-    const maxHeight = useMaxHeight();
     const safeArea = useSafeArea();
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [width, setWidth] = React.useState(0);
@@ -49,80 +48,40 @@ export const FullscreenViewer = React.forwardRef<HTMLDivElement, FullscreenViewe
     return (
       <div
         ref={containerRef}
-        className={cn('relative w-full h-full bg-surface', className)}
+        className={cn('flex w-full bg-surface', isMobile ? 'flex-col' : 'flex-row', className)}
         style={{
-          maxHeight: maxHeight ?? undefined,
-          height: maxHeight ?? undefined,
-          ['--safe-top' as string]: `${safeArea?.insets.top ?? 0}px`,
-          ['--safe-bottom' as string]: `${safeArea?.insets.bottom ?? 0}px`,
-          ['--safe-left' as string]: `${safeArea?.insets.left ?? 0}px`,
-          ['--safe-right' as string]: `${safeArea?.insets.right ?? 0}px`,
+          paddingTop: `${safeArea?.insets.top ?? 0}px`,
+          paddingBottom: `${safeArea?.insets.bottom ?? 0}px`,
+          paddingLeft: `${safeArea?.insets.left ?? 0}px`,
+          paddingRight: `${safeArea?.insets.right ?? 0}px`,
         }}
       >
-        <div
-          className={cn(
-            'absolute inset-0 flex overflow-hidden',
-            isMobile ? 'flex-col' : 'flex-row'
-          )}
-        >
-          {/* Album header - mobile only */}
-          {isMobile && (
-            <div
-              className="z-10 border-b border-subtle bg-surface/95 backdrop-blur-sm"
-              style={{
-                paddingTop: `calc(0.75rem + var(--safe-top))`,
-                paddingBottom: '0.75rem',
-                paddingLeft: `calc(1rem + var(--safe-left))`,
-                paddingRight: `calc(1rem + var(--safe-right))`,
-              }}
-            >
-              <h2 className="text-base font-semibold text-primary">{album.title}</h2>
-              <p className="text-sm text-secondary">
-                {selectedIndex + 1} / {album.photos.length}
-              </p>
-            </div>
-          )}
-
-          {/* Film strip - desktop only */}
-          {!isMobile && (
-            <div
-              className="absolute pointer-events-none z-10 left-0 top-0 bottom-0 w-40"
-              style={{
-                paddingLeft: `var(--safe-left)`,
-              }}
-            >
-              <FilmStrip album={album} selectedIndex={selectedIndex} onSelect={setSelectedIndex} />
-            </div>
-          )}
+        {/* Album header - mobile only */}
+        {isMobile && (
+          <div className="border-b border-subtle bg-surface/95 backdrop-blur-sm px-4 py-3">
+            <h2 className="text-base font-semibold text-primary">{album.title}</h2>
+            <p className="text-sm text-secondary">
+              {selectedIndex + 1} / {album.photos.length}
+            </p>
+          </div>
+        )}
 
-          {/* Main photo */}
-          <div
-            className="flex-1 min-w-0 relative flex items-center justify-center"
-            style={{
-              paddingTop: isMobile
-                ? `calc(1rem + var(--safe-top))`
-                : `calc(2.5rem + var(--safe-top))`,
-              paddingBottom: isMobile
-                ? `calc(1rem + var(--safe-bottom))`
-                : `calc(2.5rem + var(--safe-bottom))`,
-              paddingLeft: isMobile
-                ? `calc(1rem + var(--safe-left))`
-                : `calc(10rem + var(--safe-left))`,
-              paddingRight: isMobile
-                ? `calc(1rem + var(--safe-right))`
-                : `calc(10rem + var(--safe-right))`,
-            }}
-          >
-            <div className="relative w-full h-full">
-              {selectedPhoto ? (
-                <img
-                  src={selectedPhoto.url}
-                  alt={selectedPhoto.title || album.title}
-                  className="absolute inset-0 m-auto rounded-3xl shadow-sm border border-primary/10 max-w-full max-h-full object-contain"
-                />
-              ) : null}
-            </div>
+        {/* Film strip - desktop only */}
+        {!isMobile && (
+          <div className="w-40 flex-shrink-0">
+            <FilmStrip album={album} selectedIndex={selectedIndex} onSelect={setSelectedIndex} />
           </div>
+        )}
+
+        {/* Main photo */}
+        <div className="flex-1 flex items-center justify-center p-4 md:p-10">
+          {selectedPhoto ? (
+            <img
+              src={selectedPhoto.url}
+              alt={selectedPhoto.title || album.title}
+              className="rounded-3xl shadow-sm border border-primary/10 max-w-full max-h-full object-contain"
+            />
+          ) : null}
         </div>
       </div>
     );

package/template/src/components/carousel/carousel.tsx

@@ -57,7 +57,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
 
       const currentIndex = emblaApi.selectedScrollSnap();
       if (widgetState?.currentIndex !== currentIndex) {
-        setWidgetState({ currentIndex });
+        setWidgetState((prev) => ({ ...prev, currentIndex }));
       }
     }, [emblaApi, widgetState?.currentIndex, setWidgetState]);
 

package/template/src/components/resources/albums-resource.tsx

@@ -15,6 +15,7 @@ export const AlbumsResource = React.forwardRef<HTMLDivElement>((_props, ref) =>
   return (
     <div
       ref={ref}
+      className="h-full"
       style={{
         paddingTop: `${safeArea?.insets.top ?? 0}px`,
         paddingBottom: `${safeArea?.insets.bottom ?? 0}px`,

package/template/src/components/resources/counter-resource.tsx

@@ -1,5 +1,6 @@
 import { useWidgetState, useSafeArea, useMaxHeight, useUserAgent } from 'sunpeak';
 import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { useEffect } from 'react';
 
 interface CounterState extends Record<string, unknown> {
   count?: number;
@@ -22,6 +23,13 @@ export function CounterResource() {
   const count = widgetState?.count ?? 0;
   const hasTouch = userAgent?.capabilities.touch ?? false;
 
+  // Initialize count to 0 if not set
+  useEffect(() => {
+    if (widgetState?.count === undefined) {
+      setWidgetState({ count: 0 });
+    }
+  }, [widgetState?.count, setWidgetState]);
+
   const increment = () => {
     setWidgetState({ count: count + 1 });
   };

package/template/src/simulations/albums-simulation.ts

@@ -3,6 +3,8 @@
  * This file contains only metadata and doesn't import React components or CSS.
  */
 
+import { defaultWidgetMeta } from './widget-config';
+
 const albumsData = {
   albums: [
     {
@@ -144,7 +146,9 @@ export const albumsSimulation = {
     title: 'Albums',
     description: 'Show photo albums widget markup',
     mimeType: 'text/html+skybridge',
-    _meta: {},
+    _meta: {
+      ...defaultWidgetMeta,
+    },
   },
 
   // MCP CallTool protocol - data for CallTool response

package/template/src/simulations/carousel-simulation.ts

@@ -3,6 +3,8 @@
  * This file contains only metadata and doesn't import React components or CSS.
  */
 
+import { defaultWidgetMeta } from './widget-config';
+
 const placesData = {
   places: [
     {
@@ -81,7 +83,9 @@ export const carouselSimulation = {
     title: 'Carousel',
     description: 'Show popular places to visit widget markup',
     mimeType: 'text/html+skybridge',
-    _meta: {},
+    _meta: {
+      ...defaultWidgetMeta,
+    },
   },
 
   // MCP CallTool protocol - data for CallTool response

package/template/src/simulations/counter-simulation.ts

@@ -2,6 +2,9 @@
  * Server-safe configuration for the counter simulation.
  * This file contains only metadata and doesn't import React components or CSS.
  */
+
+import { defaultWidgetMeta } from './widget-config';
+
 export const counterSimulation = {
   userMessage: 'Help me count something',
 
@@ -30,7 +33,9 @@ export const counterSimulation = {
     title: 'Counter',
     description: 'Show a simple counter tool widget markup',
     mimeType: 'text/html+skybridge',
-    _meta: {},
+    _meta: {
+      ...defaultWidgetMeta,
+    },
   },
 
   // MCP CallTool protocol - data for CallTool response

package/template/src/simulations/widget-config.ts

@@ -0,0 +1,42 @@
+/**
+ * Default widget configuration for all simulations.
+ * Individual simulations can override these values as needed.
+ */
+
+export interface WidgetCSP {
+  connect_domains: string[];
+  resource_domains: string[];
+}
+
+export interface WidgetMeta {
+  'openai/widgetDomain': string;
+  'openai/widgetCSP': WidgetCSP;
+}
+
+/**
+ * Default widget metadata that can be spread into resource._meta
+ *
+ * @example
+ * // Use default configuration
+ * resource: {
+ *   _meta: {
+ *     ...defaultWidgetMeta,
+ *   }
+ * }
+ *
+ * @example
+ * // Override specific values
+ * resource: {
+ *   _meta: {
+ *     ...defaultWidgetMeta,
+ *     'openai/widgetDomain': 'https://custom.domain.com',
+ *   }
+ * }
+ */
+export const defaultWidgetMeta: WidgetMeta = {
+  'openai/widgetDomain': 'https://sunpeak.ai', // YOUR DOMAIN HERE.
+  'openai/widgetCSP': {
+    connect_domains: ['https://sunpeak.ai'], // YOUR API HERE.
+    resource_domains: ['https://*.oaistatic.com', 'https://images.unsplash.com'], // YOUR CDN HERE (if any).
+  },
+};