sunpeak 0.6.1 → 0.6.5

package/template/src/components/pizzaz/place-card.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Star } from '@openai/apps-sdk-ui/components/Icon';
+import { cn } from '../../lib/index';
+import type { Place } from '../../simulations/pizzaz-simulation';
+
+export type PlaceCardProps = {
+  place: Place;
+  isSelected?: boolean;
+  onClick?: () => void;
+  className?: string;
+};
+
+export const PlaceCard = React.forwardRef<HTMLDivElement, PlaceCardProps>(
+  ({ place, isSelected, onClick, className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'rounded-2xl px-3 select-none hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer',
+          isSelected && 'bg-black/5 dark:bg-white/5',
+          className
+        )}
+      >
+        <div
+          className={cn(
+            'border-b hover:border-transparent',
+            isSelected ? 'border-transparent' : 'border-black/5 dark:border-white/5'
+          )}
+        >
+          <button
+            className="w-full text-left py-3 transition flex gap-3 items-center"
+            onClick={onClick}
+          >
+            <img
+              src={place.thumbnail}
+              alt={place.name}
+              className="h-16 w-16 rounded-lg object-cover flex-none"
+              loading="lazy"
+            />
+            <div className="min-w-0">
+              <div className="font-medium truncate text-primary">{place.name}</div>
+              <div className="text-xs text-secondary truncate">{place.description}</div>
+              <div className="text-xs mt-1 text-secondary flex items-center gap-1">
+                <Star className="h-3 w-3" aria-hidden="true" />
+                {place.rating.toFixed(1)}
+                {place.price && <span>· {place.price}</span>}
+              </div>
+            </div>
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+PlaceCard.displayName = 'PlaceCard';

package/template/src/components/pizzaz/place-carousel.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { cn } from '../../lib/index';
+import { PlaceCard } from './place-card';
+import type { Place } from '../../simulations/pizzaz-simulation';
+
+export type PlaceCarouselProps = {
+  places: Place[];
+  selectedId: string | null;
+  onSelect: (place: Place) => void;
+  className?: string;
+};
+
+export const PlaceCarousel = React.forwardRef<HTMLDivElement, PlaceCarouselProps>(
+  ({ places, selectedId, onSelect, className }, ref) => {
+    const [emblaRef] = useEmblaCarousel({ dragFree: true, loop: false });
+
+    return (
+      <div
+        ref={ref}
+        className={cn('absolute inset-x-0 bottom-0 z-20 pointer-events-auto', className)}
+      >
+        <div className="pt-2">
+          <div className="overflow-hidden" ref={emblaRef}>
+            <div className="px-3 py-3 flex gap-3">
+              {places.map((place) => (
+                <div
+                  key={place.id}
+                  className="ring ring-black/10 dark:ring-white/10 max-w-[330px] w-full shadow-xl rounded-2xl bg-surface flex-shrink-0"
+                >
+                  <PlaceCard
+                    place={place}
+                    isSelected={selectedId === place.id}
+                    onClick={() => onSelect(place)}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+PlaceCarousel.displayName = 'PlaceCarousel';

package/template/src/components/pizzaz/place-inspector.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { Avatar } from '@openai/apps-sdk-ui/components/Avatar';
+import { X, Star } from '@openai/apps-sdk-ui/components/Icon';
+import { cn } from '../../lib/index';
+import type { Place } from '../../simulations/pizzaz-simulation';
+
+export type PlaceInspectorProps = {
+  place: Place;
+  onClose: () => void;
+  className?: string;
+};
+
+const REVIEWS = [
+  {
+    user: 'Leo M.',
+    avatar: 'https://persistent.oaistatic.com/pizzaz/user1.png',
+    text: 'Fantastic crust and balanced toppings. The marinara is spot on!',
+  },
+  {
+    user: 'Priya S.',
+    avatar: 'https://persistent.oaistatic.com/pizzaz/user2.png',
+    text: 'Cozy vibe and friendly staff. Quick service on a Friday night.',
+  },
+  {
+    user: 'Maya R.',
+    avatar: 'https://persistent.oaistatic.com/pizzaz/user3.png',
+    text: 'Great for sharing. Will definitely come back with friends.',
+  },
+];
+
+export const PlaceInspector = React.forwardRef<HTMLDivElement, PlaceInspectorProps>(
+  ({ place, onClose, className }, ref) => {
+    if (!place) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'pizzaz-inspector absolute z-30 top-0 bottom-4 left-0 right-auto xl:left-auto xl:right-6 md:z-20 w-[340px] xl:w-[360px] xl:top-6 xl:bottom-8 pointer-events-auto',
+          'animate-in fade-in slide-in-from-left-2 xl:slide-in-from-right-2 duration-200',
+          className
+        )}
+      >
+        {/* Close button */}
+        <Button
+          variant="solid"
+          color="secondary"
+          size="sm"
+          className="absolute z-10 top-4 left-4 xl:top-4 xl:left-4 shadow-xl rounded-full"
+          onClick={onClose}
+          aria-label="Close details"
+        >
+          <X className="h-[18px] w-[18px]" aria-hidden="true" />
+        </Button>
+
+        <div className="relative h-full overflow-y-auto rounded-none xl:rounded-3xl bg-surface xl:shadow-xl xl:ring ring-black/10 dark:ring-white/10">
+          {/* Thumbnail */}
+          <div className="relative mt-2 xl:mt-0 px-2 xl:px-0">
+            <img
+              src={place.thumbnail}
+              alt={place.name}
+              className="w-full rounded-3xl xl:rounded-none h-80 object-cover xl:rounded-t-2xl"
+              loading="lazy"
+            />
+          </div>
+
+          <div className="h-[calc(100%-11rem)] sm:h-[calc(100%-14rem)]">
+            {/* Place info */}
+            <div className="p-4 sm:p-5">
+              <div className="text-2xl font-medium truncate text-primary">{place.name}</div>
+              <div className="text-sm mt-1 text-secondary flex items-center gap-1">
+                <Star className="h-3.5 w-3.5" aria-hidden="true" />
+                {place.rating.toFixed(1)}
+                {place.price && <span>· {place.price}</span>}
+                <span>· {place.city}</span>
+              </div>
+
+              {/* Action buttons */}
+              <div className="mt-3 flex flex-row items-center gap-3 font-medium">
+                <Button
+                  variant="solid"
+                  color="warning"
+                  size="sm"
+                  className="rounded-full"
+                  onClick={() => console.log('Add to favorites:', place.id)}
+                >
+                  Add to favorites
+                </Button>
+                <Button
+                  variant="outline"
+                  color="primary"
+                  size="sm"
+                  className="rounded-full"
+                  style={{ color: '#F46C21' }}
+                  onClick={() => console.log('Contact:', place.id)}
+                >
+                  Contact
+                </Button>
+              </div>
+
+              {/* Description */}
+              <div className="text-sm mt-5 text-primary">
+                {place.description} Enjoy a slice at one of SF&apos;s favorites. Fresh ingredients,
+                great crust, and cozy vibes.
+              </div>
+            </div>
+
+            {/* Reviews */}
+            <div className="px-4 sm:px-5 pb-4">
+              <div className="text-lg font-medium mb-2 text-primary">Reviews</div>
+              <ul className="space-y-3 divide-y divide-black/5 dark:divide-white/5">
+                {REVIEWS.map((review, idx) => (
+                  <li key={idx} className="py-3">
+                    <div className="flex items-start gap-3">
+                      <Avatar imageUrl={review.avatar} name={review.user} size={32} />
+                      <div className="min-w-0 gap-1 flex flex-col">
+                        <div className="text-xs font-medium text-secondary">{review.user}</div>
+                        <div className="text-sm text-primary">{review.text}</div>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+PlaceInspector.displayName = 'PlaceInspector';

package/template/src/components/pizzaz/place-list.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Settings } from '@openai/apps-sdk-ui/components/Icon';
+import { cn } from '../../lib/index';
+import { PlaceCard } from './place-card';
+import type { Place } from '../../simulations/pizzaz-simulation';
+
+export type PlaceListProps = {
+  places: Place[];
+  selectedId: string | null;
+  onSelect: (place: Place) => void;
+  className?: string;
+};
+
+export const PlaceList = React.forwardRef<HTMLDivElement, PlaceListProps>(
+  ({ places, selectedId, onSelect, className }, ref) => {
+    const scrollRef = React.useRef<HTMLDivElement>(null);
+    const [showBottomFade, setShowBottomFade] = React.useState(false);
+
+    const updateBottomFadeVisibility = React.useCallback(() => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const atBottom = Math.ceil(el.scrollTop + el.clientHeight) >= el.scrollHeight;
+      setShowBottomFade(!atBottom);
+    }, []);
+
+    React.useEffect(() => {
+      updateBottomFadeVisibility();
+      const el = scrollRef.current;
+      if (!el) return;
+
+      const onScroll = () => updateBottomFadeVisibility();
+      el.addEventListener('scroll', onScroll, { passive: true });
+      window.addEventListener('resize', updateBottomFadeVisibility);
+
+      return () => {
+        el.removeEventListener('scroll', onScroll);
+        window.removeEventListener('resize', updateBottomFadeVisibility);
+      };
+    }, [places, updateBottomFadeVisibility]);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'absolute inset-y-0 bottom-4 left-0 z-20 w-[340px] max-w-[75%] pointer-events-auto',
+          className
+        )}
+      >
+        <div ref={scrollRef} className="relative px-2 h-full overflow-y-auto bg-surface">
+          {/* Header */}
+          <div className="flex justify-between flex-row items-center px-3 sticky bg-surface top-0 py-4 text-md font-medium">
+            <span className="text-primary">{places.length} results</span>
+            <Settings className="h-5 w-5 text-secondary" aria-hidden="true" />
+          </div>
+
+          {/* Place list */}
+          <div>
+            {places.map((place) => (
+              <PlaceCard
+                key={place.id}
+                place={place}
+                isSelected={selectedId === place.id}
+                onClick={() => onSelect(place)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Bottom fade gradient */}
+        {showBottomFade && (
+          <div
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-9 z-10 transition-opacity duration-200"
+            aria-hidden="true"
+          >
+            <div
+              className="w-full h-full bg-gradient-to-t from-black/15 to-transparent dark:from-white/15"
+              style={{
+                WebkitMaskImage:
+                  'linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 100%)',
+                maskImage:
+                  'linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 100%)',
+              }}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+PlaceList.displayName = 'PlaceList';

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

@@ -32,13 +32,10 @@ vi.mock('sunpeak', () => ({
 }));
 
 // Mock child components
-vi.mock('../components/carousel/carousel', () => ({
+vi.mock('../components/carousel', () => ({
   Carousel: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="carousel">{children}</div>
   ),
-}));
-
-vi.mock('../components/card/card', () => ({
   Card: ({ header, buttonSize }: { header: React.ReactNode; buttonSize?: string }) => (
     <div data-testid="card" data-button-size={buttonSize}>
       {header}

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useWidgetProps, useSafeArea, useMaxHeight, useUserAgent } from 'sunpeak';
-import { Carousel } from '../components/carousel/carousel';
-import { Card } from '../components/card/card';
+import { Carousel, Card } from '../components/carousel';
 
 /**
  * Production-ready Carousel Resource

package/template/src/resources/index.ts

@@ -1,3 +1,4 @@
 export { CounterResource } from './counter-resource';
 export { AlbumsResource } from './albums-resource';
 export { CarouselResource } from './carousel-resource';
+export { PizzazResource } from './pizzaz-resource';

package/template/src/resources/pizzaz-resource.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useSafeArea, useMaxHeight } from 'sunpeak';
+import { Pizzaz } from '../components/pizzaz/pizzaz';
+
+/**
+ * Production-ready Pizzaz Resource
+ *
+ * This resource displays a pizza restaurant finder with an interactive map,
+ * place listings, and detailed inspector view.
+ * Can be dropped into any production environment without changes.
+ */
+export const PizzazResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  const safeArea = useSafeArea();
+  const maxHeight = useMaxHeight();
+
+  return (
+    <div
+      ref={ref}
+      className="h-full"
+      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,
+      }}
+    >
+      <Pizzaz />
+    </div>
+  );
+});
+PizzazResource.displayName = 'PizzazResource';

package/template/src/simulations/index.ts

@@ -8,9 +8,11 @@
 import { counterSimulation } from './counter-simulation.js';
 import { albumsSimulation } from './albums-simulation.js';
 import { carouselSimulation } from './carousel-simulation.js';
+import { pizzazSimulation } from './pizzaz-simulation.js';
 
 export const SIMULATIONS = {
   counter: counterSimulation,
   albums: albumsSimulation,
   carousel: carouselSimulation,
+  pizzaz: pizzazSimulation,
 } as const;

package/template/src/simulations/pizzaz-simulation.ts

@@ -0,0 +1,177 @@
+/**
+ * Server-safe configuration for the pizzaz simulation.
+ * This file contains only metadata and doesn't import React components or CSS.
+ */
+
+import { defaultWidgetMeta } from './widget-config';
+
+export interface Place {
+  id: string;
+  name: string;
+  coords: [number, number];
+  description: string;
+  city: string;
+  rating: number;
+  price: string;
+  thumbnail: string;
+}
+
+export interface PizzazData extends Record<string, unknown> {
+  places: Place[];
+}
+
+const pizzazData: PizzazData = {
+  places: [
+    {
+      id: 'nova-slice-lab',
+      name: 'Nova Slice Lab',
+      coords: [-122.4098, 37.8001],
+      description: 'Award-winning Neapolitan pies in North Beach.',
+      city: 'North Beach',
+      rating: 4.8,
+      price: '$$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-1.png',
+    },
+    {
+      id: 'midnight-marinara',
+      name: 'Midnight Marinara',
+      coords: [-122.4093, 37.799],
+      description: 'Focaccia-style squares, late-night favorite.',
+      city: 'North Beach',
+      rating: 4.6,
+      price: '$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-2.png',
+    },
+    {
+      id: 'cinder-oven-co',
+      name: 'Cinder Oven Co.',
+      coords: [-122.4255, 37.7613],
+      description: 'Thin-crust classics on 18th Street.',
+      city: 'Mission',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-3.png',
+    },
+    {
+      id: 'neon-crust-works',
+      name: 'Neon Crust Works',
+      coords: [-122.4388, 37.7775],
+      description: 'Deep-dish and cornmeal crust favorites.',
+      city: 'Alamo Square',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-6.png',
+    },
+    {
+      id: 'luna-pie-collective',
+      name: 'Luna Pie Collective',
+      coords: [-122.4077, 37.799],
+      description: 'Wood-fired pies and burrata in North Beach.',
+      city: 'North Beach',
+      rating: 4.6,
+      price: '$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-4.png',
+    },
+    {
+      id: 'bricklight-deep-dish',
+      name: 'Bricklight Deep Dish',
+      coords: [-122.4097, 37.7992],
+      description: 'Chicago-style pies from Tony Gemignani.',
+      city: 'North Beach',
+      rating: 4.4,
+      price: '$$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-5.png',
+    },
+    {
+      id: 'garden-ember-pies',
+      name: 'Garden Ember Pies',
+      coords: [-122.438, 37.7722],
+      description: 'Neighborhood spot with seasonal toppings.',
+      city: 'Lower Haight',
+      rating: 4.4,
+      price: '$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-1.png',
+    },
+    {
+      id: 'atlas-fire-pizzeria',
+      name: 'Atlas Fire Pizzeria',
+      coords: [-122.4123, 37.7899],
+      description: 'Sourdough, wood-fired pies near Nob Hill.',
+      city: 'Nob Hill',
+      rating: 4.6,
+      price: '$$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-2.png',
+    },
+    {
+      id: 'circuit-slice-garage',
+      name: 'Circuit Slice Garage',
+      coords: [-122.4135, 37.7805],
+      description: 'Crispy-edged Detroit-style in SoMa.',
+      city: 'SoMa',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-3.png',
+    },
+    {
+      id: 'velvet-mozza-lounge',
+      name: 'Velvet Mozza Lounge',
+      coords: [-122.4019, 37.7818],
+      description: 'Bianca pies and cocktails near Yerba Buena.',
+      city: 'Yerba Buena',
+      rating: 4.3,
+      price: '$$',
+      thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-6.png',
+    },
+  ],
+};
+
+export const pizzazSimulation = {
+  userMessage: 'Find pizza near me',
+
+  // MCP Tool protocol - official Tool type from MCP SDK used in ListTools response
+  tool: {
+    name: 'find-pizza',
+    description: 'Find pizza restaurants nearby',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false } as const,
+    title: 'Find Pizza',
+    annotations: { readOnlyHint: true },
+    _meta: {
+      'openai/outputTemplate': 'ui://PizzazResource',
+      'openai/toolInvocation/invoking': 'Finding pizza places',
+      'openai/toolInvocation/invoked': 'Found pizza places',
+      'openai/widgetAccessible': true,
+      'openai/resultCanProduceWidget': true,
+    },
+  },
+
+  // MCP Resource protocol - official Resource type from MCP SDK used in ListResources response
+  // resource.name is used as the simulation identifier
+  // resource.title is used as the simulation display label
+  resource: {
+    uri: 'ui://PizzazResource',
+    name: 'pizzaz',
+    title: 'Pizzaz',
+    description: 'Pizza restaurant finder widget',
+    mimeType: 'text/html+skybridge',
+    _meta: {
+      ...defaultWidgetMeta,
+      'openai/widgetCSP': {
+        ...defaultWidgetMeta['openai/widgetCSP'],
+        connect_domains: [
+          ...defaultWidgetMeta['openai/widgetCSP'].connect_domains,
+          'https://api.mapbox.com',
+        ],
+        resource_domains: [
+          ...defaultWidgetMeta['openai/widgetCSP'].resource_domains,
+          'https://api.mapbox.com',
+        ],
+      },
+    },
+  },
+
+  // MCP CallTool protocol - data for CallTool response
+  toolCall: {
+    structuredContent: pizzazData,
+    _meta: {},
+  },
+} as const;

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

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