sunpeak 0.5.10 → 0.5.13

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}`),

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

@@ -0,0 +1,116 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CounterResource } from './counter-resource';
+
+// Mock sunpeak hooks
+const mockSetWidgetState = vi.fn();
+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', () => ({
+  useWidgetState: () => [{ count: 0 }, mockSetWidgetState],
+  useSafeArea: () => mockSafeArea,
+  useMaxHeight: () => mockMaxHeight,
+  useUserAgent: () => mockUserAgent,
+}));
+
+describe('CounterResource', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
+    mockMaxHeight = 600;
+    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
+  });
+
+  it('renders counter with initial count', () => {
+    render(<CounterResource />);
+
+    expect(screen.getByText('Welcome to Sunpeak!')).toBeInTheDocument();
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it('increments counter when + button is clicked', () => {
+    render(<CounterResource />);
+
+    const incrementButton = screen.getByLabelText('Increment');
+    fireEvent.click(incrementButton);
+
+    expect(mockSetWidgetState).toHaveBeenCalledWith({ count: 1 });
+  });
+
+  it('decrements counter when - button is clicked', () => {
+    render(<CounterResource />);
+
+    const decrementButton = screen.getByLabelText('Decrement');
+    fireEvent.click(decrementButton);
+
+    expect(mockSetWidgetState).toHaveBeenCalledWith({ count: -1 });
+  });
+
+  it('resets counter when Reset button is clicked', () => {
+    render(<CounterResource />);
+
+    const resetButton = screen.getByText('Reset');
+    fireEvent.click(resetButton);
+
+    expect(mockSetWidgetState).toHaveBeenCalledWith({ count: 0 });
+  });
+
+  it('respects safe area insets', () => {
+    mockSafeArea = { insets: { top: 20, bottom: 30, left: 10, right: 15 } };
+
+    const { container } = render(<CounterResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    expect(mainDiv).toHaveStyle({
+      paddingTop: 'calc(2rem + 20px)',
+      paddingBottom: 'calc(2rem + 30px)',
+      paddingLeft: 'calc(2rem + 10px)',
+      paddingRight: 'calc(2rem + 15px)',
+    });
+  });
+
+  it('respects maxHeight constraint', () => {
+    mockMaxHeight = 400;
+
+    const { container } = render(<CounterResource />);
+    const mainDiv = container.firstChild as HTMLElement;
+
+    expect(mainDiv).toHaveStyle({
+      maxHeight: '400px',
+    });
+  });
+
+  it('renders larger buttons for touch devices', () => {
+    mockUserAgent = { device: { type: 'mobile' }, capabilities: { hover: false, touch: true } };
+
+    render(<CounterResource />);
+
+    const incrementButton = screen.getByLabelText('Increment');
+    const resetButton = screen.getByText('Reset');
+
+    // Buttons should have larger size for touch
+    expect(incrementButton).toBeInTheDocument();
+    expect(resetButton).toBeInTheDocument();
+  });
+
+  it('renders standard-sized buttons for non-touch devices', () => {
+    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
+
+    render(<CounterResource />);
+
+    const incrementButton = screen.getByLabelText('Increment');
+    const resetButton = screen.getByText('Reset');
+
+    // Buttons should have standard size for non-touch
+    expect(incrementButton).toBeInTheDocument();
+    expect(resetButton).toBeInTheDocument();
+  });
+});

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

@@ -1,4 +1,4 @@
-import { useWidgetState } from 'sunpeak';
+import { useWidgetState, useSafeArea, useMaxHeight, useUserAgent } from 'sunpeak';
 import { Button } from '@openai/apps-sdk-ui/components/Button';
 
 interface CounterState extends Record<string, unknown> {
@@ -15,8 +15,12 @@ export function CounterResource() {
   const [widgetState, setWidgetState] = useWidgetState<CounterState>(() => ({
     count: 0,
   }));
+  const safeArea = useSafeArea();
+  const maxHeight = useMaxHeight();
+  const userAgent = useUserAgent();
 
   const count = widgetState?.count ?? 0;
+  const hasTouch = userAgent?.capabilities.touch ?? false;
 
   const increment = () => {
     setWidgetState({ count: count + 1 });
@@ -31,7 +35,16 @@ export function CounterResource() {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center p-8 space-y-6">
+    <div
+      className="flex flex-col items-center justify-center p-8 space-y-6"
+      style={{
+        paddingTop: `calc(2rem + ${safeArea?.insets.top ?? 0}px)`,
+        paddingBottom: `calc(2rem + ${safeArea?.insets.bottom ?? 0}px)`,
+        paddingLeft: `calc(2rem + ${safeArea?.insets.left ?? 0}px)`,
+        paddingRight: `calc(2rem + ${safeArea?.insets.right ?? 0}px)`,
+        maxHeight: maxHeight ?? undefined,
+      }}
+    >
       <div className="text-center space-y-2">
         <h1 className="text-3xl font-bold text-primary">Welcome to Sunpeak!</h1>
         <p className="text-secondary">Build your MCP resource here</p>
@@ -41,15 +54,27 @@ export function CounterResource() {
         <div className="text-6xl font-bold text-primary">{count}</div>
 
         <div className="flex gap-2">
-          <Button variant="soft" color="secondary" onClick={decrement} aria-label="Decrement">
+          <Button
+            variant="soft"
+            color="secondary"
+            onClick={decrement}
+            aria-label="Decrement"
+            size={hasTouch ? 'lg' : 'md'}
+          >
             −
           </Button>
-          <Button variant="solid" color="primary" onClick={increment} aria-label="Increment">
+          <Button
+            variant="solid"
+            color="primary"
+            onClick={increment}
+            aria-label="Increment"
+            size={hasTouch ? 'lg' : 'md'}
+          >
             +
           </Button>
         </div>
 
-        <Button variant="outline" color="secondary" onClick={reset} size="sm">
+        <Button variant="outline" color="secondary" onClick={reset} size={hasTouch ? 'md' : 'sm'}>
           Reset
         </Button>
       </div>