sunpeak 0.5.10 → 0.5.12

package/dist/style.css

@@ -3063,6 +3063,14 @@
     pointer-events: none;
   }
 
+  .collapse {
+    visibility: collapse;
+  }
+
+  .visible {
+    visibility: visible;
+  }
+
   .sr-only {
     clip-path: inset(50%);
     white-space: nowrap;
@@ -3686,14 +3694,14 @@
     padding-right: calc(var(--spacing) * 12);
   }
 
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
-  }
-
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
 
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+
   .text-center {
     text-align: center;
   }

package/package.json

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

package/template/src/components/album/album-card.tsx

@@ -7,15 +7,17 @@ export type AlbumCardProps = {
   album: Album;
   onSelect?: (album: Album) => void;
   className?: string;
+  buttonSize?: 'xs' | 'sm' | 'md' | 'lg';
 };
 
 export const AlbumCard = React.forwardRef<HTMLButtonElement, AlbumCardProps>(
-  ({ album, onSelect, className }, ref) => {
+  ({ album, onSelect, className, buttonSize = 'md' }, ref) => {
     return (
       <Button
         ref={ref}
         variant="ghost"
         color="secondary"
+        size={buttonSize}
         className={cn(
           'rounded-xl flex-shrink-0 w-full h-full p-0 text-left flex flex-col [&:hover]:bg-transparent hover:bg-transparent cursor-pointer',
           className

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

@@ -6,12 +6,20 @@ import { Albums, type AlbumsData } from './albums';
 const mockSetWidgetState = vi.fn();
 const mockRequestDisplayMode = vi.fn();
 let mockWidgetData: AlbumsData = { albums: [] };
+let mockUserAgent: {
+  device: { type: 'desktop' | 'mobile' | 'tablet' | 'unknown' };
+  capabilities: { hover: boolean; touch: boolean };
+} = {
+  device: { type: 'desktop' },
+  capabilities: { hover: true, touch: false },
+};
 
 vi.mock('sunpeak', () => ({
   useWidgetProps: () => mockWidgetData,
   useWidgetState: () => [{ selectedAlbumId: null }, mockSetWidgetState],
   useDisplayMode: () => 'default',
   useWidgetAPI: () => ({ requestDisplayMode: mockRequestDisplayMode }),
+  useUserAgent: () => mockUserAgent,
 }));
 
 // Mock child components to simplify testing
@@ -27,6 +35,22 @@ vi.mock('../carousel', () => ({
   ),
 }));
 
+vi.mock('./album-card', () => ({
+  AlbumCard: ({
+    album,
+    onSelect,
+    buttonSize,
+  }: {
+    album: { title: string };
+    onSelect: (a: unknown) => void;
+    buttonSize?: string;
+  }) => (
+    <button onClick={() => onSelect(album)} data-button-size={buttonSize}>
+      {album.title}
+    </button>
+  ),
+}));
+
 describe('Albums', () => {
   const mockAlbums = [
     {
@@ -46,6 +70,7 @@ describe('Albums', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockWidgetData = { albums: mockAlbums };
+    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
   });
 
   it('renders Carousel with all albums in default mode', () => {
@@ -85,4 +110,26 @@ describe('Albums', () => {
     const buttons = container.querySelectorAll('button');
     expect(buttons.length).toBe(0);
   });
+
+  it('passes larger button size for touch devices', () => {
+    mockUserAgent = { device: { type: 'mobile' }, capabilities: { hover: false, touch: true } };
+
+    render(<Albums />);
+
+    const albumButtons = screen.getAllByRole('button');
+    albumButtons.forEach((button) => {
+      expect(button).toHaveAttribute('data-button-size', 'lg');
+    });
+  });
+
+  it('passes standard button size for non-touch devices', () => {
+    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
+
+    render(<Albums />);
+
+    const albumButtons = screen.getAllByRole('button');
+    albumButtons.forEach((button) => {
+      expect(button).toHaveAttribute('data-button-size', 'md');
+    });
+  });
 });

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { useWidgetState, useDisplayMode, useWidgetAPI, useWidgetProps } from 'sunpeak';
+import {
+  useWidgetState,
+  useDisplayMode,
+  useWidgetAPI,
+  useWidgetProps,
+  useUserAgent,
+} from 'sunpeak';
 import { Carousel } from '../carousel';
 import { AlbumCard } from './album-card';
 import { FullscreenViewer } from './fullscreen-viewer';
@@ -34,9 +40,11 @@ export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className
   }));
   const displayMode = useDisplayMode();
   const api = useWidgetAPI();
+  const userAgent = useUserAgent();
 
   const albums = data.albums || [];
   const selectedAlbum = albums.find((album) => album.id === widgetState?.selectedAlbumId);
+  const hasTouch = userAgent?.capabilities.touch ?? false;
 
   const handleSelectAlbum = React.useCallback(
     (album: Album) => {
@@ -54,7 +62,12 @@ export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className
     <div ref={ref} className={className}>
       <Carousel gap={20} showArrows={false} showEdgeGradients={false} cardWidth={272}>
         {albums.map((album) => (
-          <AlbumCard key={album.id} album={album} onSelect={handleSelectAlbum} />
+          <AlbumCard
+            key={album.id}
+            album={album}
+            onSelect={handleSelectAlbum}
+            buttonSize={hasTouch ? 'lg' : 'md'}
+          />
         ))}
       </Carousel>
     </div>

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

@@ -4,8 +4,12 @@ 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: () => 800,
+  useMaxHeight: () => mockMaxHeight,
+  useSafeArea: () => mockSafeArea,
 }));
 
 describe('FullscreenViewer', () => {
@@ -74,4 +78,29 @@ describe('FullscreenViewer', () => {
     const images = container.querySelectorAll('img');
     expect(images.length).toBe(0);
   });
+
+  it('respects safe area insets for main photo area', () => {
+    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',
+    });
+  });
 });

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMaxHeight } from 'sunpeak';
+import { useMaxHeight, useSafeArea } from 'sunpeak';
 import { cn } from '../../lib/index';
 import { FilmStrip } from './film-strip';
 import type { Album } from './albums';
@@ -12,6 +12,7 @@ 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);
 
     React.useEffect(() => {
@@ -31,12 +32,25 @@ export const FullscreenViewer = React.forwardRef<HTMLDivElement, FullscreenViewe
       >
         <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">
+          <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} />
           </div>
 
           {/* Main photo */}
-          <div className="flex-1 min-w-0 px-40 py-10 relative flex items-center justify-center">
+          <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

package/template/src/components/card/card.tsx

@@ -19,6 +19,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   button1?: CardButtonProps;
   button2?: CardButtonProps;
   variant?: 'default' | 'bordered' | 'elevated';
+  buttonSize?: 'xs' | 'sm' | 'md' | 'lg';
 }
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
@@ -34,6 +35,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
       button1,
       button2,
       variant = 'default',
+      buttonSize = 'sm',
       className,
       onClick,
       ...props
@@ -63,6 +65,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
           color={isPrimary ? 'primary' : 'secondary'}
           variant={isPrimary ? 'solid' : 'soft'}
           onClick={handleClick}
+          size={buttonSize}
         >
           {children}
         </Button>

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

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AlbumsResource } from './albums-resource';
+
+// Mock sunpeak hooks
+let mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
+let mockMaxHeight = 600;
+
+vi.mock('sunpeak', () => ({
+  useSafeArea: () => mockSafeArea,
+  useMaxHeight: () => mockMaxHeight,
+}));
+
+// Mock Albums component
+vi.mock('../album/albums', () => ({
+  Albums: () => <div data-testid="albums-component">Albums Component</div>,
+}));
+
+describe('AlbumsResource', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
+    mockMaxHeight = 600;
+  });
+
+  it('renders Albums component', () => {
+    render(<AlbumsResource />);
+
+    expect(screen.getByTestId('albums-component')).toBeInTheDocument();
+    expect(screen.getByText('Albums Component')).toBeInTheDocument();
+  });
+
+  it('respects safe area insets', () => {
+    mockSafeArea = { insets: { top: 20, bottom: 30, left: 10, right: 15 } };
+
+    const { container } = render(<AlbumsResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    expect(mainDiv).toHaveStyle({
+      paddingTop: '20px',
+      paddingBottom: '30px',
+      paddingLeft: '10px',
+      paddingRight: '15px',
+    });
+  });
+
+  it('respects maxHeight constraint', () => {
+    mockMaxHeight = 800;
+
+    const { container } = render(<AlbumsResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    expect(mainDiv).toHaveStyle({
+      maxHeight: '800px',
+    });
+  });
+
+  it('applies zero safe area insets when not provided', () => {
+    mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
+
+    const { container } = render(<AlbumsResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    expect(mainDiv).toHaveStyle({
+      paddingTop: '0px',
+      paddingBottom: '0px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+    });
+  });
+
+  it('handles undefined maxHeight gracefully', () => {
+    mockMaxHeight = undefined as unknown as number;
+
+    const { container } = render(<AlbumsResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    // maxHeight should not be set when undefined
+    expect(mainDiv.style.maxHeight).toBe('');
+  });
+});

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useSafeArea, useMaxHeight } from 'sunpeak';
 import { Albums } from '../album/albums';
 
 /**
@@ -8,6 +9,22 @@ import { Albums } from '../album/albums';
  * Can be dropped into any production environment without changes.
  */
 export const AlbumsResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
-  return <Albums ref={ref} />;
+  const safeArea = useSafeArea();
+  const maxHeight = useMaxHeight();
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        paddingTop: `${safeArea?.insets.top ?? 0}px`,
+        paddingBottom: `${safeArea?.insets.bottom ?? 0}px`,
+        paddingLeft: `${safeArea?.insets.left ?? 0}px`,
+        paddingRight: `${safeArea?.insets.right ?? 0}px`,
+        maxHeight: maxHeight ?? undefined,
+      }}
+    >
+      <Albums />
+    </div>
+  );
 });
 AlbumsResource.displayName = 'AlbumsResource';

package/template/src/components/resources/carousel-resource.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CarouselResource } from './carousel-resource';
+
+// Mock sunpeak hooks
+interface Place {
+  id: string;
+  name: string;
+  rating: number;
+  category: string;
+  location: string;
+  image: string;
+  description: string;
+}
+
+let mockWidgetData: { places: Place[] } = { places: [] };
+let mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
+let mockMaxHeight = 600;
+let mockUserAgent: {
+  device: { type: 'desktop' | 'mobile' | 'tablet' | 'unknown' };
+  capabilities: { hover: boolean; touch: boolean };
+} = {
+  device: { type: 'desktop' },
+  capabilities: { hover: true, touch: false },
+};
+
+vi.mock('sunpeak', () => ({
+  useWidgetProps: () => mockWidgetData,
+  useSafeArea: () => mockSafeArea,
+  useMaxHeight: () => mockMaxHeight,
+  useUserAgent: () => mockUserAgent,
+}));
+
+// Mock child components
+vi.mock('../carousel/carousel', () => ({
+  Carousel: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="carousel">{children}</div>
+  ),
+}));
+
+vi.mock('../card/card', () => ({
+  Card: ({ header, buttonSize }: { header: React.ReactNode; buttonSize?: string }) => (
+    <div data-testid="card" data-button-size={buttonSize}>
+      {header}
+    </div>
+  ),
+}));
+
+describe('CarouselResource', () => {
+  const mockPlaces = [
+    {
+      id: 'place-1',
+      name: 'Beach Resort',
+      rating: 4.5,
+      category: 'Hotel',
+      location: 'Miami',
+      image: 'https://example.com/beach.jpg',
+      description: 'Beautiful beach resort',
+    },
+    {
+      id: 'place-2',
+      name: 'Mountain Lodge',
+      rating: 4.8,
+      category: 'Lodge',
+      location: 'Colorado',
+      image: 'https://example.com/mountain.jpg',
+      description: 'Cozy mountain lodge',
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockWidgetData = { places: [] };
+    mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
+    mockMaxHeight = 600;
+    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
+  });
+
+  it('renders carousel with places', () => {
+    mockWidgetData = { places: mockPlaces };
+
+    render(<CarouselResource />);
+
+    expect(screen.getByTestId('carousel')).toBeInTheDocument();
+    expect(screen.getByText('Beach Resort')).toBeInTheDocument();
+    expect(screen.getByText('Mountain Lodge')).toBeInTheDocument();
+  });
+
+  it('renders empty carousel when no places provided', () => {
+    mockWidgetData = { places: [] };
+
+    const { container } = render(<CarouselResource />);
+
+    expect(screen.getByTestId('carousel')).toBeInTheDocument();
+    expect(container.querySelectorAll('[data-testid="card"]').length).toBe(0);
+  });
+
+  it('respects safe area insets', () => {
+    mockSafeArea = { insets: { top: 20, bottom: 30, left: 10, right: 15 } };
+
+    const { container } = render(<CarouselResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    expect(mainDiv).toHaveStyle({
+      paddingTop: '20px',
+      paddingBottom: '30px',
+      paddingLeft: '10px',
+      paddingRight: '15px',
+    });
+  });
+
+  it('respects maxHeight constraint', () => {
+    mockMaxHeight = 500;
+
+    const { container } = render(<CarouselResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    expect(mainDiv).toHaveStyle({
+      maxHeight: '500px',
+    });
+  });
+
+  it('passes larger button size for touch devices', () => {
+    mockUserAgent = { device: { type: 'mobile' }, capabilities: { hover: false, touch: true } };
+    mockWidgetData = { places: mockPlaces };
+
+    render(<CarouselResource />);
+
+    const cards = screen.getAllByTestId('card');
+    cards.forEach((card) => {
+      expect(card).toHaveAttribute('data-button-size', 'md');
+    });
+  });
+
+  it('passes standard button size for non-touch devices', () => {
+    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
+    mockWidgetData = { places: mockPlaces };
+
+    render(<CarouselResource />);
+
+    const cards = screen.getAllByTestId('card');
+    cards.forEach((card) => {
+      expect(card).toHaveAttribute('data-button-size', 'sm');
+    });
+  });
+
+  it('renders all place information', () => {
+    mockWidgetData = { places: mockPlaces };
+
+    render(<CarouselResource />);
+
+    // Check that place names are rendered
+    expect(screen.getByText('Beach Resort')).toBeInTheDocument();
+    expect(screen.getByText('Mountain Lodge')).toBeInTheDocument();
+  });
+});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useWidgetProps } from 'sunpeak';
+import { useWidgetProps, useSafeArea, useMaxHeight, useUserAgent } from 'sunpeak';
 import { Carousel } from '../carousel/carousel';
 import { Card } from '../card/card';
 
@@ -26,9 +26,23 @@ interface CarouselData extends Record<string, unknown> {
 
 export const CarouselResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
   const data = useWidgetProps<CarouselData>(() => ({ places: [] }));
+  const safeArea = useSafeArea();
+  const maxHeight = useMaxHeight();
+  const userAgent = useUserAgent();
+
+  const hasTouch = userAgent?.capabilities.touch ?? false;
 
   return (
-    <div ref={ref}>
+    <div
+      ref={ref}
+      style={{
+        paddingTop: `${safeArea?.insets.top ?? 0}px`,
+        paddingBottom: `${safeArea?.insets.bottom ?? 0}px`,
+        paddingLeft: `${safeArea?.insets.left ?? 0}px`,
+        paddingRight: `${safeArea?.insets.right ?? 0}px`,
+        maxHeight: maxHeight ?? undefined,
+      }}
+    >
       <Carousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
         {(data.places || []).map((place: CarouselCard) => (
           <Card
@@ -37,6 +51,7 @@ export const CarouselResource = React.forwardRef<HTMLDivElement>((_props, ref) =
             imageAlt={place.name}
             header={place.name}
             metadata={`⭐ ${place.rating} • ${place.category} • ${place.location}`}
+            buttonSize={hasTouch ? 'md' : 'sm'}
             button1={{
               isPrimary: true,
               onClick: () => console.log(`Visit ${place.name}`),