sunpeak 0.5.36 → 0.5.41

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

@@ -2,11 +2,11 @@ import {
   Button,
   ButtonLink,
   CopyButton
-} from "./chunk-675LFNY2.js";
-import "./chunk-QPJAV452.js";
-import "./chunk-XB525PXG.js";
+} from "./chunk-EVJ3DVH5.js";
 import "./chunk-YOJ6QPGS.js";
 import "./chunk-BAG6OO6S.js";
+import "./chunk-XB525PXG.js";
+import "./chunk-QPJAV452.js";
 import "./chunk-EGRHWZRV.js";
 import "./chunk-CNYJBM5F.js";
 import "./chunk-PTVT3RFX.js";

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-SGWD4VEU.js";
-import "./chunk-KFGKZMLK.js";
 import {
   useResizeObserver
 } from "./chunk-YOJ6QPGS.js";
@@ -9,6 +5,10 @@ import {
   handlePressableMouseEnter,
   waitForAnimationFrame
 } from "./chunk-BAG6OO6S.js";
+import {
+  dist_exports4 as dist_exports
+} from "./chunk-SGWD4VEU.js";
+import "./chunk-KFGKZMLK.js";
 import "./chunk-EGRHWZRV.js";
 import {
   clsx_default

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

@@ -1,14 +1,23 @@
-import {
-  Input
-} from "./chunk-CQ3GYAYB.js";
 import {
   Button,
   LoadingIndicator,
   TransitionGroup
-} from "./chunk-675LFNY2.js";
+} from "./chunk-EVJ3DVH5.js";
 import {
-  o
-} from "./chunk-QPJAV452.js";
+  useTimeout
+} from "./chunk-YOJ6QPGS.js";
+import {
+  handlePressableMouseEnter,
+  preventDefaultHandler,
+  toCssVariables,
+  waitForAnimationFrame
+} from "./chunk-BAG6OO6S.js";
+import {
+  dist_exports,
+  dist_exports3 as dist_exports2,
+  dist_exports5 as dist_exports3
+} from "./chunk-SGWD4VEU.js";
+import "./chunk-KFGKZMLK.js";
 import {
   Check_default,
   ChevronDownVector_default,
@@ -18,20 +27,11 @@ import {
   X_default
 } from "./chunk-XB525PXG.js";
 import {
-  dist_exports,
-  dist_exports3 as dist_exports2,
-  dist_exports5 as dist_exports3
-} from "./chunk-SGWD4VEU.js";
-import "./chunk-KFGKZMLK.js";
-import {
-  useTimeout
-} from "./chunk-YOJ6QPGS.js";
+  Input
+} from "./chunk-CQ3GYAYB.js";
 import {
-  handlePressableMouseEnter,
-  preventDefaultHandler,
-  toCssVariables,
-  waitForAnimationFrame
-} from "./chunk-BAG6OO6S.js";
+  o
+} from "./chunk-QPJAV452.js";
 import "./chunk-EGRHWZRV.js";
 import {
   clsx_default

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

@@ -1,9 +1,9 @@
-import {
-  o
-} from "./chunk-QPJAV452.js";
 import {
   toCssVariables
 } from "./chunk-BAG6OO6S.js";
+import {
+  o
+} from "./chunk-QPJAV452.js";
 import "./chunk-EGRHWZRV.js";
 import {
   clsx_default

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

@@ -7,118 +7,115 @@
     "react": {
       "src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/index.js",
       "file": "react.js",
-      "fileHash": "e328b168",
+      "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": "24da7214",
+      "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": "a22ed365",
+      "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": "995b8d9a",
+      "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": "46265110",
+      "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": "df3f5c67",
+      "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": "baa257c2",
+      "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": "b09a0706",
+      "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": "30f3b4fa",
+      "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": "c07720fa",
+      "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": "4d8a8d87",
+      "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": "9e5b445c",
+      "fileHash": "446e068b",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "8c4d2ac1",
+      "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": "3b8004d6",
+      "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": "8678cd8b",
+      "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": "df32aaf4",
+      "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": "11ec8e32",
+      "fileHash": "01cd3e08",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-CQ3GYAYB": {
-      "file": "chunk-CQ3GYAYB.js"
-    },
-    "chunk-675LFNY2": {
-      "file": "chunk-675LFNY2.js"
+    "chunk-EVJ3DVH5": {
+      "file": "chunk-EVJ3DVH5.js"
     },
-    "chunk-QPJAV452": {
-      "file": "chunk-QPJAV452.js"
+    "chunk-YOJ6QPGS": {
+      "file": "chunk-YOJ6QPGS.js"
     },
-    "chunk-XB525PXG": {
-      "file": "chunk-XB525PXG.js"
+    "chunk-BAG6OO6S": {
+      "file": "chunk-BAG6OO6S.js"
     },
     "chunk-SGWD4VEU": {
       "file": "chunk-SGWD4VEU.js"
@@ -126,11 +123,14 @@
     "chunk-KFGKZMLK": {
       "file": "chunk-KFGKZMLK.js"
     },
-    "chunk-YOJ6QPGS": {
-      "file": "chunk-YOJ6QPGS.js"
+    "chunk-XB525PXG": {
+      "file": "chunk-XB525PXG.js"
     },
-    "chunk-BAG6OO6S": {
-      "file": "chunk-BAG6OO6S.js"
+    "chunk-CQ3GYAYB": {
+      "file": "chunk-CQ3GYAYB.js"
+    },
+    "chunk-QPJAV452": {
+      "file": "chunk-QPJAV452.js"
     },
     "chunk-EGRHWZRV": {
       "file": "chunk-EGRHWZRV.js"

package/template/node_modules/.vite/deps/{chunk-675LFNY2.js → chunk-EVJ3DVH5.js}

@@ -1,10 +1,3 @@
-import {
-  o
-} from "./chunk-QPJAV452.js";
-import {
-  Check_default,
-  Copy_default
-} from "./chunk-XB525PXG.js";
 import {
   useTimeout
 } from "./chunk-YOJ6QPGS.js";
@@ -19,6 +12,13 @@ import {
   toTransformProperty,
   waitForAnimationFrame
 } from "./chunk-BAG6OO6S.js";
+import {
+  Check_default,
+  Copy_default
+} from "./chunk-XB525PXG.js";
+import {
+  o
+} from "./chunk-QPJAV452.js";
 import {
   clsx_default
 } from "./chunk-CNYJBM5F.js";
@@ -625,4 +625,4 @@ export {
   ButtonLink,
   CopyButton
 };
-//# sourceMappingURL=chunk-675LFNY2.js.map
+//# sourceMappingURL=chunk-EVJ3DVH5.js.map

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

@@ -1 +1 @@
-{"version":"4.0.13","results":[[":src/components/resources/carousel-resource.test.tsx",{"duration":288.1622299999999,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":326.12392699999987,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":260.0158970000002,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":69.38757799999985,"failed":false}],[":src/components/resources/counter-resource.test.tsx",{"duration":335.9426239999998,"failed":false}],[":src/components/resources/albums-resource.test.tsx",{"duration":287.460425,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":444.058082,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":340.6524770000001,"failed":false}],[":src/components/card/card.test.tsx",{"duration":59.76885399999992,"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,56 +11,77 @@ 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);
+    const containerRef = React.useRef<HTMLDivElement>(null);
 
     React.useEffect(() => {
       setSelectedIndex(0);
     }, [album?.id]);
 
+    // Measure component width to determine mobile vs desktop layout
+    React.useEffect(() => {
+      const element = containerRef.current;
+      if (!element) return;
+
+      const updateWidth = () => {
+        setWidth(element.getBoundingClientRect().width);
+      };
+
+      updateWidth();
+
+      const resizeObserver = new ResizeObserver(updateWidth);
+      resizeObserver.observe(element);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, []);
+
+    // Combine refs
+    React.useImperativeHandle(ref, () => containerRef.current!);
+
     const selectedPhoto = album?.photos?.[selectedIndex];
+    const isMobile = width > 0 && width < 768;
 
     return (
       <div
-        ref={ref}
-        className={cn('relative w-full h-full bg-surface', className)}
+        ref={containerRef}
+        className={cn('flex w-full bg-surface', isMobile ? 'flex-col' : 'flex-row', className)}
         style={{
-          maxHeight: maxHeight ?? undefined,
-          height: maxHeight ?? undefined,
+          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="absolute inset-0 flex flex-row overflow-hidden">
-          {/* Film strip */}
-          <div
-            className="hidden md:block absolute pointer-events-none z-10 left-0 top-0 bottom-0 w-40"
-            style={{
-              paddingLeft: `${safeArea?.insets.left ?? 0}px`,
-            }}
-          >
-            <FilmStrip album={album} selectedIndex={selectedIndex} onSelect={setSelectedIndex} />
+        {/* 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 px-40 py-10 relative flex items-center justify-center"
-            style={{
-              paddingTop: `calc(2.5rem + ${safeArea?.insets.top ?? 0}px)`,
-              paddingBottom: `calc(2.5rem + ${safeArea?.insets.bottom ?? 0}px)`,
-              paddingLeft: `calc(10rem + ${safeArea?.insets.left ?? 0}px)`,
-              paddingRight: `calc(10rem + ${safeArea?.insets.right ?? 0}px)`,
-            }}
-          >
-            <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