sunpeak 0.3.8 → 0.4.2

package/template/mcp/server.ts

@@ -1,59 +1,13 @@
 import { runMCPServer } from 'sunpeak/mcp';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { readFileSync } from 'fs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-// Dummy data matching the dev script
-const toolOutput = {
-  places: [
-    {
-      id: '1',
-      name: 'Lady Bird Lake',
-      rating: 4.5,
-      category: 'Waterfront',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop',
-      description: 'Scenic lake perfect for kayaking, paddleboarding, and trails.',
-    },
-    {
-      id: '2',
-      name: 'Texas State Capitol',
-      rating: 4.8,
-      category: 'Historic Site',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop',
-      description: 'Stunning capitol building with free tours and beautiful grounds.',
-    },
-    {
-      id: '3',
-      name: 'The Paramount Theatre',
-      rating: 4.7,
-      category: 'Architecture',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop',
-      description: 'Century-old performance and movie theatre in the heart of downtown Austin.',
-    },
-    {
-      id: '4',
-      name: 'Zilker Park',
-      rating: 4.7,
-      category: 'Park',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop',
-      description: 'Popular park with trails, sports fields, and Barton Springs Pool.',
-    },
-    {
-      id: '5',
-      name: 'South Congress Avenue',
-      rating: 4.6,
-      category: 'Landmark',
-      location: 'Austin',
-      image: 'https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop',
-      description: 'Vibrant street with unique shops, restaurants, and live music.',
-    },
-  ],
-};
+// Load places data from JSON file
+const placesDataPath = path.resolve(__dirname, '../data/places.json');
+const toolOutput = JSON.parse(readFileSync(placesDataPath, 'utf-8'));
 
 runMCPServer({
   name: 'my-sunpeak-app',

package/template/src/App.tsx

@@ -1,49 +1,97 @@
 import './styles/globals.css';
-import 'sunpeak/style.css';
-
-import { useWidgetProps } from 'sunpeak';
-import { OpenAICarousel, OpenAICard } from './components';
-
-export interface Place {
-  id: string;
-  name: string;
-  rating: number;
-  category: string;
-  location: string;
-  image: string;
-  description: string;
-}
 
-export interface AppData extends Record<string, unknown> {
-  places: Place[];
+import { useWidgetState } from 'sunpeak';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+
+interface CounterState extends Record<string, unknown> {
+  count?: number;
 }
 
+/**
+ * Welcome to your Sunpeak App!
+ *
+ * This is a simple counter app to get you started.
+ * Try building your own app here!
+ *
+ * Tips:
+ * - Use the Component dropdown in the sidebar to see example apps
+ * - Check out the components folder for reusable components
+ * - Use sunpeak hooks for state management and display modes
+ * - Edit this file and see your changes live
+ * - Edit ./components/simulations/app-simulation.tsx to customize your simulation
+ */
 export function App() {
-  const data = useWidgetProps<AppData>(() => ({ places: [] }));
+  const [widgetState, setWidgetState] = useWidgetState<CounterState>(() => ({
+    count: 0,
+  }));
+
+  const count = widgetState?.count ?? 0;
+
+  const increment = () => {
+    setWidgetState({ count: count + 1 });
+  };
+
+  const decrement = () => {
+    setWidgetState({ count: count - 1 });
+  };
+
+  const reset = () => {
+    setWidgetState({ count: 0 });
+  };
 
   return (
-    <OpenAICarousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={220}>
-      {data.places.map((place) => (
-        <OpenAICard
-          key={place.id}
-          image={place.image}
-          imageAlt={place.name}
-          header={place.name}
-          metadata={`⭐ ${place.rating} • ${place.category} • ${place.location}`}
-          button1={{
-            isPrimary: true,
-            onClick: () => console.log(`Visit ${place.name}`),
-            children: 'Visit',
-          }}
-          button2={{
-            isPrimary: false,
-            onClick: () => console.log(`Learn more about ${place.name}`),
-            children: 'Learn More',
-          }}
+    <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 ChatGPT app 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="flex gap-2">
+          <Button
+            variant="soft"
+            color="secondary"
+            onClick={decrement}
+            aria-label="Decrement"
+          >
+            −
+          </Button>
+          <Button
+            variant="solid"
+            color="primary"
+            onClick={increment}
+            aria-label="Increment"
+          >
+            +
+          </Button>
+        </div>
+
+        <Button
+          variant="outline"
+          color="secondary"
+          onClick={reset}
+          size="sm"
         >
-          {place.description}
-        </OpenAICard>
-      ))}
-    </OpenAICarousel>
+          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!
+        </p>
+      </div>
+    </div>
   );
 }

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

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { Button } from "@openai/apps-sdk-ui/components/Button"
+import { cn } from "../../lib/index"
+import type { Album } from "./albums"
+
+export type AlbumCardProps = {
+  album: Album
+  onSelect?: (album: Album) => void
+  className?: string
+}
+
+export const AlbumCard = React.forwardRef<HTMLButtonElement, AlbumCardProps>(
+  ({ album, onSelect, className }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        color="secondary"
+        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
+        )}
+        onClick={() => onSelect?.(album)}
+      >
+        <div className="aspect-[4/3] w-full overflow-hidden rounded-xl flex-shrink-0">
+          <img
+            src={album.cover}
+            alt={album.title}
+            className="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </div>
+        <div className="flex-shrink-0 w-full p-2">
+          <div className="text-base font-normal text-primary">
+            {album.title}
+          </div>
+          <div className="text-sm text-secondary">
+            {album.photos.length} {album.photos.length === 1 ? "photo" : "photos"}
+          </div>
+        </div>
+      </Button>
+    )
+  }
+)
+AlbumCard.displayName = "AlbumCard"

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

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { useWidgetState, useDisplayMode, useWidgetAPI, useWidgetProps } from "sunpeak"
+import { Carousel } from "../carousel"
+import { AlbumCard } from "./album-card"
+import { FullscreenViewer } from "./fullscreen-viewer"
+
+export interface Album {
+  id: string
+  title: string
+  cover: string
+  photos: Array<{
+    id: string
+    title: string
+    url: string
+  }>
+}
+
+export interface OpenAIAlbumsData extends Record<string, unknown> {
+  albums: Album[]
+}
+
+export interface OpenAIAlbumsState extends Record<string, unknown> {
+  selectedAlbumId?: string | null
+}
+
+export type OpenAIAlbumsProps = {
+  className?: string
+}
+
+export const OpenAIAlbums = React.forwardRef<HTMLDivElement, OpenAIAlbumsProps>(
+  ({ className }, ref) => {
+    const data = useWidgetProps<OpenAIAlbumsData>(() => ({ albums: [] }))
+    const [widgetState, setWidgetState] = useWidgetState<OpenAIAlbumsState>(() => ({
+      selectedAlbumId: null,
+    }))
+    const displayMode = useDisplayMode()
+    const api = useWidgetAPI()
+
+    const albums = data.albums || []
+    const selectedAlbum = albums.find(
+      (album) => album.id === widgetState?.selectedAlbumId
+    )
+
+    const handleSelectAlbum = React.useCallback(
+      (album: Album) => {
+        setWidgetState({ selectedAlbumId: album.id })
+        api?.requestDisplayMode?.({ mode: "fullscreen" })
+      },
+      [setWidgetState, api]
+    )
+
+    if (displayMode === "fullscreen" && selectedAlbum) {
+      return (
+        <FullscreenViewer
+          ref={ref}
+          album={selectedAlbum}
+        />
+      )
+    }
+
+    return (
+      <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} />
+          ))}
+        </Carousel>
+      </div>
+    )
+  }
+)
+OpenAIAlbums.displayName = "OpenAIAlbums"

package/template/src/components/album/film-strip.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { Button } from "@openai/apps-sdk-ui/components/Button"
+import { cn } from "../../lib/index"
+import type { Album } from "./albums"
+
+export type FilmStripProps = {
+  album: Album
+  selectedIndex: number
+  onSelect?: (index: number) => void
+  className?: string
+}
+
+export const FilmStrip = React.forwardRef<HTMLDivElement, FilmStripProps>(
+  ({ album, selectedIndex, onSelect, className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "h-full w-full overflow-auto flex flex-col items-center justify-center p-5 space-y-5",
+          className
+        )}
+      >
+        {album.photos.map((photo, idx) => (
+          <Button
+            key={photo.id}
+            variant="ghost"
+            color="secondary"
+            onClick={() => onSelect?.(idx)}
+            className={cn(
+              "block w-full h-auto p-[1px] pointer-events-auto rounded-[10px] border transition-all",
+              idx === selectedIndex
+                ? "border-primary shadow-md"
+                : "border-transparent hover:border-primary/30 opacity-60 hover:opacity-100"
+            )}
+          >
+            <div className="aspect-[5/3] rounded-lg overflow-hidden w-full">
+              <img
+                src={photo.url}
+                alt={photo.title || `Photo ${idx + 1}`}
+                className="h-full w-full object-cover"
+                loading="lazy"
+              />
+            </div>
+          </Button>
+        ))}
+      </div>
+    )
+  }
+)
+FilmStrip.displayName = "FilmStrip"

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

@@ -0,0 +1,60 @@
+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
+}
+
+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])
+
+  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>
+
+        {/* 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>
+  )
+})
+FullscreenViewer.displayName = "FullscreenViewer"

package/template/src/components/album/index.ts

@@ -0,0 +1,4 @@
+export * from './album-card';
+export * from './albums';
+export * from './fullscreen-viewer';
+export * from './film-strip';

package/template/src/components/{openai-card.test.tsx → card/card.test.tsx}

@@ -1,29 +1,29 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
-import { OpenAICard } from './openai-card';
+import { Card } from './card';
 
-describe('OpenAICard', () => {
+describe('Card', () => {
   it('renders correct variant classes', () => {
     const { container, rerender } = render(
-      <OpenAICard variant="default" data-testid="card">
+      <Card variant="default" data-testid="card">
         Content
-      </OpenAICard>
+      </Card>
     );
 
     const card = container.firstChild as HTMLElement;
     expect(card.className).toContain('border border-subtle bg-surface');
 
     rerender(
-      <OpenAICard variant="bordered" data-testid="card">
+      <Card variant="bordered" data-testid="card">
         Content
-      </OpenAICard>
+      </Card>
     );
     expect(card.className).toContain('border-2 border-default bg-surface');
 
     rerender(
-      <OpenAICard variant="elevated" data-testid="card">
+      <Card variant="elevated" data-testid="card">
         Content
-      </OpenAICard>
+      </Card>
     );
     expect(card.className).toContain('shadow-lg');
   });
@@ -33,12 +33,12 @@ describe('OpenAICard', () => {
     const button1OnClick = vi.fn();
 
     render(
-      <OpenAICard
+      <Card
         onClick={cardOnClick}
         button1={{ onClick: button1OnClick, children: 'Click Me' }}
       >
         Content
-      </OpenAICard>
+      </Card>
     );
 
     const button = screen.getByText('Click Me');
@@ -53,12 +53,12 @@ describe('OpenAICard', () => {
     const button2OnClick = vi.fn();
 
     render(
-      <OpenAICard
+      <Card
         button1={{ onClick: button1OnClick, children: 'Button 1', isPrimary: true }}
         button2={{ onClick: button2OnClick, children: 'Button 2' }}
       >
         Content
-      </OpenAICard>
+      </Card>
     );
 
     const button1 = screen.getByText('Button 1');

package/template/src/components/{openai-card.tsx → card/card.tsx}

@@ -1,14 +1,14 @@
 import * as React from "react"
 import { Button } from "@openai/apps-sdk-ui/components/Button"
-import { cn } from "../lib/index"
+import { cn } from "../../lib/index"
 
-export interface OpenAIButtonProps {
+export interface CardButtonProps {
   isPrimary?: boolean
   onClick: () => void
   children: React.ReactNode
 }
 
-export interface OpenAICardProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode
   image?: string
   imageAlt?: string
@@ -16,12 +16,12 @@ export interface OpenAICardProps extends React.HTMLAttributes<HTMLDivElement> {
   imageMaxHeight?: number
   header?: React.ReactNode
   metadata?: React.ReactNode
-  button1?: OpenAIButtonProps
-  button2?: OpenAIButtonProps
+  button1?: CardButtonProps
+  button2?: CardButtonProps
   variant?: "default" | "bordered" | "elevated"
 }
 
-export const OpenAICard = React.forwardRef<HTMLDivElement, OpenAICardProps>(
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
   (
     {
       children,
@@ -50,7 +50,7 @@ export const OpenAICard = React.forwardRef<HTMLDivElement, OpenAICardProps>(
       onClick?.(e)
     }
 
-    const renderButton = (buttonProps: OpenAIButtonProps) => {
+    const renderButton = (buttonProps: CardButtonProps) => {
       const { isPrimary = false, onClick: buttonOnClick, children } = buttonProps
 
       const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -123,4 +123,4 @@ export const OpenAICard = React.forwardRef<HTMLDivElement, OpenAICardProps>(
     )
   }
 )
-OpenAICard.displayName = "OpenAICard"
+Card.displayName = "Card"

package/template/src/components/card/index.ts

@@ -0,0 +1 @@
+export * from './card';

package/template/src/components/{openai-carousel.test.tsx → carousel/carousel.test.tsx}

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { OpenAICarousel } from './openai-carousel';
+import { Carousel } from './carousel';
 
 const mockUseDisplayMode = vi.fn(() => 'inline');
 
@@ -20,18 +20,18 @@ vi.mock('embla-carousel-wheel-gestures', () => ({
   WheelGesturesPlugin: vi.fn(() => ({})),
 }));
 
-describe('OpenAICarousel', () => {
+describe('Carousel', () => {
   beforeEach(() => {
     mockUseDisplayMode.mockReturnValue('inline');
   });
 
   it('renders all children with correct card width', () => {
     const { container } = render(
-      <OpenAICarousel cardWidth={300}>
+      <Carousel cardWidth={300}>
         <div>Card 1</div>
         <div>Card 2</div>
         <div>Card 3</div>
-      </OpenAICarousel>
+      </Carousel>
     );
 
     const cardContainers = container.querySelectorAll('.flex-none');
@@ -48,9 +48,9 @@ describe('OpenAICarousel', () => {
     // Test inline mode
     mockUseDisplayMode.mockReturnValue('inline');
     const { container: inlineContainer } = render(
-      <OpenAICarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+      <Carousel cardWidth={{ inline: 250, fullscreen: 400 }}>
         <div>Card 1</div>
-      </OpenAICarousel>
+      </Carousel>
     );
 
     let cardContainer = inlineContainer.querySelector('.flex-none') as HTMLElement;
@@ -59,9 +59,9 @@ describe('OpenAICarousel', () => {
     // Test fullscreen mode
     mockUseDisplayMode.mockReturnValue('fullscreen');
     const { container: fullscreenContainer } = render(
-      <OpenAICarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+      <Carousel cardWidth={{ inline: 250, fullscreen: 400 }}>
         <div>Card 1</div>
-      </OpenAICarousel>
+      </Carousel>
     );
 
     cardContainer = fullscreenContainer.querySelector('.flex-none') as HTMLElement;
@@ -70,10 +70,10 @@ describe('OpenAICarousel', () => {
 
   it('applies custom gap between cards', () => {
     const { container } = render(
-      <OpenAICarousel gap={24}>
+      <Carousel gap={24}>
         <div>Card 1</div>
         <div>Card 2</div>
-      </OpenAICarousel>
+      </Carousel>
     );
 
     const carouselTrack = container.querySelector('.flex.touch-pan-y') as HTMLElement;

package/template/src/components/{openai-carousel.tsx → carousel/carousel.tsx}

@@ -4,13 +4,13 @@ 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 { cn } from "../../lib/index"
 
-export interface OpenAICarouselState extends Record<string, unknown> {
+export interface CarouselState extends Record<string, unknown> {
   currentIndex?: number
 }
 
-export type OpenAICarouselProps = {
+export type CarouselProps = {
   children?: React.ReactNode
   gap?: number
   showArrows?: boolean
@@ -19,9 +19,9 @@ export type OpenAICarouselProps = {
   className?: string
 }
 
-export const OpenAICarousel = React.forwardRef<
+export const Carousel = React.forwardRef<
   HTMLDivElement,
-  OpenAICarouselProps
+  CarouselProps
 >(
   (
     {
@@ -34,7 +34,7 @@ export const OpenAICarousel = React.forwardRef<
     },
     ref
   ) => {
-    const [widgetState, setWidgetState] = useWidgetState<OpenAICarouselState>(() => ({
+    const [widgetState, setWidgetState] = useWidgetState<CarouselState>(() => ({
       currentIndex: 0,
     }))
     const displayMode = useDisplayMode()
@@ -175,4 +175,4 @@ export const OpenAICarousel = React.forwardRef<
     )
   }
 )
-OpenAICarousel.displayName = "OpenAICarousel"
+Carousel.displayName = "Carousel"

package/template/src/components/carousel/index.ts

@@ -0,0 +1 @@
+export * from './carousel';

package/template/src/components/index.ts

@@ -1,2 +1,4 @@
-export * from './openai-carousel';
-export * from './openai-card';
+export * from './card';
+export * from './carousel';
+export * from './album';
+export * from './simulations';