sunpeak 0.5.8 → 0.5.10

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

@@ -0,0 +1,77 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { FullscreenViewer } from './fullscreen-viewer';
+import type { Album } from './albums';
+
+// Mock sunpeak hooks
+vi.mock('sunpeak', () => ({
+  useMaxHeight: () => 800,
+}));
+
+describe('FullscreenViewer', () => {
+  const mockAlbum: Album = {
+    id: 'album-1',
+    title: 'Test Album',
+    cover: 'https://example.com/cover.jpg',
+    photos: [
+      { id: '1', title: 'First Photo', url: 'https://example.com/1.jpg' },
+      { id: '2', title: 'Second Photo', url: 'https://example.com/2.jpg' },
+      { id: '3', title: 'Third Photo', url: 'https://example.com/3.jpg' },
+    ],
+  };
+
+  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');
+    let mainPhoto = mainPhotoArea?.querySelector('img');
+    expect(mainPhoto).toHaveAttribute('alt', 'First Photo');
+    expect(mainPhoto).toHaveAttribute('src', 'https://example.com/1.jpg');
+
+    // Create a different album
+    const differentAlbum: Album = {
+      id: 'album-2',
+      title: 'Different Album',
+      cover: 'https://example.com/cover2.jpg',
+      photos: [
+        { id: '4', title: 'New First Photo', url: 'https://example.com/4.jpg' },
+        { id: '5', title: 'New Second Photo', url: 'https://example.com/5.jpg' },
+      ],
+    };
+
+    // Rerender with different album
+    rerender(<FullscreenViewer album={differentAlbum} />);
+
+    // Should show the first photo of the new album
+    mainPhoto = mainPhotoArea?.querySelector('img');
+    expect(mainPhoto).toHaveAttribute('alt', 'New First Photo');
+    expect(mainPhoto).toHaveAttribute('src', 'https://example.com/4.jpg');
+  });
+
+  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');
+    const firstPhoto = mainPhotoArea?.querySelector('img');
+
+    expect(firstPhoto).toHaveAttribute('alt', 'First Photo');
+    expect(firstPhoto).toHaveAttribute('src', 'https://example.com/1.jpg');
+  });
+
+  it('handles empty photos array gracefully', () => {
+    const emptyAlbum: Album = {
+      id: 'empty-album',
+      title: 'Empty Album',
+      cover: 'https://example.com/cover.jpg',
+      photos: [],
+    };
+
+    const { container } = render(<FullscreenViewer album={emptyAlbum} />);
+
+    // Should not render any img element in the main photo area
+    const images = container.querySelectorAll('img');
+    expect(images.length).toBe(0);
+  });
+});

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

@@ -1,60 +1,55 @@
-import * as React from "react"
-import { useMaxHeight } from "sunpeak"
-import { cn } from "../../lib/index"
-import { FilmStrip } from "./film-strip"
-import type { Album } from "./albums"
+import * as React from 'react';
+import { useMaxHeight } from 'sunpeak';
+import { cn } from '../../lib/index';
+import { FilmStrip } from './film-strip';
+import type { Album } from './albums';
 
 export type FullscreenViewerProps = {
-  album: Album
-  className?: string
-}
+  album: Album;
+  className?: string;
+};
 
-export const FullscreenViewer = React.forwardRef<
-  HTMLDivElement,
-  FullscreenViewerProps
->(({ album, className }, ref) => {
-  const maxHeight = useMaxHeight()
-  const [selectedIndex, setSelectedIndex] = React.useState(0)
+export const FullscreenViewer = React.forwardRef<HTMLDivElement, FullscreenViewerProps>(
+  ({ album, className }, ref) => {
+    const maxHeight = useMaxHeight();
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
 
-  React.useEffect(() => {
-    setSelectedIndex(0)
-  }, [album?.id])
+    React.useEffect(() => {
+      setSelectedIndex(0);
+    }, [album?.id]);
 
-  const selectedPhoto = album?.photos?.[selectedIndex]
+    const selectedPhoto = album?.photos?.[selectedIndex];
 
-  return (
-    <div
-      ref={ref}
-      className={cn("relative w-full h-full bg-surface", className)}
-      style={{
-        maxHeight: maxHeight ?? undefined,
-        height: maxHeight ?? undefined,
-      }}
-    >
-      <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">
-          <FilmStrip
-            album={album}
-            selectedIndex={selectedIndex}
-            onSelect={setSelectedIndex}
-          />
-        </div>
+    return (
+      <div
+        ref={ref}
+        className={cn('relative w-full h-full bg-surface', className)}
+        style={{
+          maxHeight: maxHeight ?? undefined,
+          height: maxHeight ?? undefined,
+        }}
+      >
+        <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">
+            <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="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}
+          {/* Main photo */}
+          <div className="flex-1 min-w-0 px-40 py-10 relative flex items-center justify-center">
+            <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>
           </div>
         </div>
       </div>
-    </div>
-  )
-})
-FullscreenViewer.displayName = "FullscreenViewer"
+    );
+  }
+);
+FullscreenViewer.displayName = 'FullscreenViewer';

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

@@ -33,10 +33,7 @@ describe('Card', () => {
     const button1OnClick = vi.fn();
 
     render(
-      <Card
-        onClick={cardOnClick}
-        button1={{ onClick: button1OnClick, children: 'Click Me' }}
-      >
+      <Card onClick={cardOnClick} button1={{ onClick: button1OnClick, children: 'Click Me' }}>
         Content
       </Card>
     );

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

@@ -1,24 +1,24 @@
-import * as React from "react"
-import { Button } from "@openai/apps-sdk-ui/components/Button"
-import { cn } from "../../lib/index"
+import * as React from 'react';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { cn } from '../../lib/index';
 
 export interface CardButtonProps {
-  isPrimary?: boolean
-  onClick: () => void
-  children: React.ReactNode
+  isPrimary?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
 }
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode
-  image?: string
-  imageAlt?: string
-  imageMaxWidth?: number
-  imageMaxHeight?: number
-  header?: React.ReactNode
-  metadata?: React.ReactNode
-  button1?: CardButtonProps
-  button2?: CardButtonProps
-  variant?: "default" | "bordered" | "elevated"
+  children?: React.ReactNode;
+  image?: string;
+  imageAlt?: string;
+  imageMaxWidth?: number;
+  imageMaxHeight?: number;
+  header?: React.ReactNode;
+  metadata?: React.ReactNode;
+  button1?: CardButtonProps;
+  button2?: CardButtonProps;
+  variant?: 'default' | 'bordered' | 'elevated';
 }
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
@@ -33,7 +33,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
       metadata,
       button1,
       button2,
-      variant = "default",
+      variant = 'default',
       className,
       onClick,
       ...props
@@ -41,41 +41,41 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     ref
   ) => {
     const variantClasses = {
-      default: "border border-subtle bg-surface",
-      bordered: "border-2 border-default bg-surface",
-      elevated: "border border-subtle bg-surface shadow-lg",
-    }
+      default: 'border border-subtle bg-surface',
+      bordered: 'border-2 border-default bg-surface',
+      elevated: 'border border-subtle bg-surface shadow-lg',
+    };
 
     const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      onClick?.(e)
-    }
+      onClick?.(e);
+    };
 
     const renderButton = (buttonProps: CardButtonProps) => {
-      const { isPrimary = false, onClick: buttonOnClick, children } = buttonProps
+      const { isPrimary = false, onClick: buttonOnClick, children } = buttonProps;
 
       const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.stopPropagation()
-        buttonOnClick()
-      }
+        e.stopPropagation();
+        buttonOnClick();
+      };
 
       return (
         <Button
-          color={isPrimary ? "primary" : "secondary"}
-          variant={isPrimary ? "solid" : "soft"}
+          color={isPrimary ? 'primary' : 'secondary'}
+          variant={isPrimary ? 'solid' : 'soft'}
           onClick={handleClick}
         >
           {children}
         </Button>
-      )
-    }
+      );
+    };
 
-    const hasButtons = button1 || button2
+    const hasButtons = button1 || button2;
 
     return (
       <div
         ref={ref}
         className={cn(
-          "overflow-hidden rounded-2xl cursor-pointer select-none",
+          'overflow-hidden rounded-2xl cursor-pointer select-none',
           variantClasses[variant],
           className
         )}
@@ -106,16 +106,8 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
               {header}
             </h2>
           )}
-          {metadata && (
-            <p className="text-secondary text-xs mb-1">
-              {metadata}
-            </p>
-          )}
-          {children && (
-            <div className="text-sm leading-normal line-clamp-2 mb-3">
-              {children}
-            </div>
-          )}
+          {metadata && <p className="text-secondary text-xs mb-1">{metadata}</p>}
+          {children && <div className="text-sm leading-normal line-clamp-2 mb-3">{children}</div>}
           {hasButtons && (
             <div className="flex gap-2 flex-wrap mt-auto">
               {button1 && renderButton(button1)}
@@ -124,7 +116,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
           )}
         </div>
       </div>
-    )
+    );
   }
-)
-Card.displayName = "Card"
+);
+Card.displayName = 'Card';

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

@@ -1,110 +1,100 @@
-import * as React from "react"
-import useEmblaCarousel from "embla-carousel-react"
-import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
-import { ArrowLeft, ArrowRight } from "@openai/apps-sdk-ui/components/Icon"
-import { useWidgetState, useDisplayMode } from "sunpeak"
-import { Button } from "@openai/apps-sdk-ui/components/Button"
-import { cn } from "../../lib/index"
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import { ArrowLeft, ArrowRight } from '@openai/apps-sdk-ui/components/Icon';
+import { useWidgetState, useDisplayMode } from 'sunpeak';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { cn } from '../../lib/index';
 
 export interface CarouselState extends Record<string, unknown> {
-  currentIndex?: number
+  currentIndex?: number;
 }
 
 export type CarouselProps = {
-  children?: React.ReactNode
-  gap?: number
-  showArrows?: boolean
-  showEdgeGradients?: boolean
-  cardWidth?: number | { inline?: number; fullscreen?: number }
-  className?: string
-}
-
-export const Carousel = React.forwardRef<
-  HTMLDivElement,
-  CarouselProps
->(
+  children?: React.ReactNode;
+  gap?: number;
+  showArrows?: boolean;
+  showEdgeGradients?: boolean;
+  cardWidth?: number | { inline?: number; fullscreen?: number };
+  className?: string;
+};
+
+export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
   (
-    {
-      children,
-      gap = 16,
-      showArrows = true,
-      showEdgeGradients = true,
-      cardWidth,
-      className,
-    },
+    { children, gap = 16, showArrows = true, showEdgeGradients = true, cardWidth, className },
     ref
   ) => {
     const [widgetState, setWidgetState] = useWidgetState<CarouselState>(() => ({
       currentIndex: 0,
-    }))
-    const displayMode = useDisplayMode()
+    }));
+    const displayMode = useDisplayMode();
 
     const [emblaRef, emblaApi] = useEmblaCarousel(
       {
-        align: "start",
+        align: 'start',
         dragFree: true,
-        containScroll: "trimSnaps",
+        containScroll: 'trimSnaps',
       },
       [WheelGesturesPlugin()]
-    )
+    );
 
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const scrollPrev = React.useCallback(() => {
-      if (emblaApi) emblaApi.scrollPrev()
-    }, [emblaApi])
+      if (emblaApi) emblaApi.scrollPrev();
+    }, [emblaApi]);
 
     const scrollNext = React.useCallback(() => {
-      if (emblaApi) emblaApi.scrollNext()
-    }, [emblaApi])
+      if (emblaApi) emblaApi.scrollNext();
+    }, [emblaApi]);
 
     const onSelect = React.useCallback(() => {
-      if (!emblaApi) return
+      if (!emblaApi) return;
 
-      setCanScrollPrev(emblaApi.canScrollPrev())
-      setCanScrollNext(emblaApi.canScrollNext())
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
 
-      const currentIndex = emblaApi.selectedScrollSnap()
+      const currentIndex = emblaApi.selectedScrollSnap();
       if (widgetState?.currentIndex !== currentIndex) {
-        setWidgetState({ currentIndex })
+        setWidgetState({ currentIndex });
       }
-    }, [emblaApi, widgetState?.currentIndex, setWidgetState])
+    }, [emblaApi, widgetState?.currentIndex, setWidgetState]);
 
     React.useEffect(() => {
-      if (!emblaApi) return
+      if (!emblaApi) return;
 
-      onSelect()
-      emblaApi.on("select", onSelect)
-      emblaApi.on("reInit", onSelect)
+      onSelect();
+      emblaApi.on('select', onSelect);
+      emblaApi.on('reInit', onSelect);
 
       return () => {
-        emblaApi.off("select", onSelect)
-        emblaApi.off("reInit", onSelect)
-      }
-    }, [emblaApi, onSelect])
+        emblaApi.off('select', onSelect);
+        emblaApi.off('reInit', onSelect);
+      };
+    }, [emblaApi, onSelect]);
 
-    const childArray = React.Children.toArray(children)
+    const childArray = React.Children.toArray(children);
 
     const getCardWidth = () => {
-      if (typeof cardWidth === "number") {
-        return cardWidth
+      if (typeof cardWidth === 'number') {
+        return cardWidth;
       }
-      if (cardWidth && typeof cardWidth === "object") {
-        if (displayMode === "fullscreen" && cardWidth.fullscreen) {
-          return cardWidth.fullscreen
+      if (cardWidth && typeof cardWidth === 'object') {
+        if (displayMode === 'fullscreen' && cardWidth.fullscreen) {
+          return cardWidth.fullscreen;
         }
         if (cardWidth.inline) {
-          return cardWidth.inline
+          return cardWidth.inline;
         }
       }
-      return 220
-    }
+      return 220;
+    };
 
-    const cardWidthPx = getCardWidth()
+    const cardWidthPx = getCardWidth();
 
     return (
-      <div ref={ref} className={cn("relative w-full", className)}>
+      <div ref={ref} className={cn('relative w-full', className)}>
         {/* Left edge gradient */}
         {showEdgeGradients && canScrollPrev && (
           <div
@@ -172,7 +162,7 @@ export const Carousel = React.forwardRef<
           </Button>
         )}
       </div>
-    )
+    );
   }
-)
-Carousel.displayName = "Carousel"
+);
+Carousel.displayName = 'Carousel';

package/template/src/components/resources/{AlbumsResource.tsx → albums-resource.tsx}

@@ -1,5 +1,5 @@
-import * as React from "react"
-import { Albums } from "../album/albums"
+import * as React from 'react';
+import { Albums } from '../album/albums';
 
 /**
  * Production-ready Albums Resource
@@ -8,6 +8,6 @@ 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} />
-})
-AlbumsResource.displayName = "AlbumsResource"
+  return <Albums ref={ref} />;
+});
+AlbumsResource.displayName = 'AlbumsResource';

package/template/src/components/resources/{CarouselResource.tsx → carousel-resource.tsx}

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { useWidgetProps } from "sunpeak"
-import { Carousel } from "../carousel/carousel"
-import { Card } from "../card/card"
+import * as React from 'react';
+import { useWidgetProps } from 'sunpeak';
+import { Carousel } from '../carousel/carousel';
+import { Card } from '../card/card';
 
 /**
  * Production-ready Carousel Resource
@@ -11,21 +11,21 @@ import { Card } from "../card/card"
  */
 
 interface CarouselCard {
-  id: string
-  name: string
-  rating: number
-  category: string
-  location: string
-  image: string
-  description: string
+  id: string;
+  name: string;
+  rating: number;
+  category: string;
+  location: string;
+  image: string;
+  description: string;
 }
 
 interface CarouselData extends Record<string, unknown> {
-  places: CarouselCard[]
+  places: CarouselCard[];
 }
 
 export const CarouselResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
-  const data = useWidgetProps<CarouselData>(() => ({ places: [] }))
+  const data = useWidgetProps<CarouselData>(() => ({ places: [] }));
 
   return (
     <div ref={ref}>
@@ -40,12 +40,12 @@ export const CarouselResource = React.forwardRef<HTMLDivElement>((_props, ref) =
             button1={{
               isPrimary: true,
               onClick: () => console.log(`Visit ${place.name}`),
-              children: "Visit",
+              children: 'Visit',
             }}
             button2={{
               isPrimary: false,
               onClick: () => console.log(`Learn more about ${place.name}`),
-              children: "Learn More",
+              children: 'Learn More',
             }}
           >
             {place.description}
@@ -53,6 +53,6 @@ export const CarouselResource = React.forwardRef<HTMLDivElement>((_props, ref) =
         ))}
       </Carousel>
     </div>
-  )
-})
-CarouselResource.displayName = "CarouselResource"
+  );
+});
+CarouselResource.displayName = 'CarouselResource';

package/template/src/components/resources/{CounterResource.tsx → counter-resource.tsx}

@@ -33,55 +33,35 @@ export function CounterResource() {
   return (
     <div className="flex flex-col items-center justify-center p-8 space-y-6">
       <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>
+        <h1 className="text-3xl font-bold text-primary">Welcome to Sunpeak!</h1>
+        <p className="text-secondary">Build your MCP resource here</p>
       </div>
 
       <div className="flex flex-col items-center space-y-4 p-8 border border-subtle rounded-2xl bg-surface shadow-sm">
-        <div className="text-6xl font-bold text-primary">
-          {count}
-        </div>
+        <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">
             −
           </Button>
-          <Button
-            variant="solid"
-            color="primary"
-            onClick={increment}
-            aria-label="Increment"
-          >
+          <Button variant="solid" color="primary" onClick={increment} aria-label="Increment">
             +
           </Button>
         </div>
 
-        <Button
-          variant="outline"
-          color="secondary"
-          onClick={reset}
-          size="sm"
-        >
+        <Button variant="outline" color="secondary" onClick={reset} size="sm">
           Reset
         </Button>
       </div>
 
       <div className="text-center text-sm text-secondary max-w-md space-y-2">
         <p>
-          This counter persists its state using <code className="px-1.5 py-0.5 rounded bg-surface-secondary text-primary">useWidgetState</code>
-        </p>
-        <p>
-          Try switching between examples in the sidebar!
+          This counter persists its state using{' '}
+          <code className="px-1.5 py-0.5 rounded bg-surface-secondary text-primary">
+            useWidgetState
+          </code>
         </p>
+        <p>Try switching between examples in the sidebar!</p>
       </div>
     </div>
   );