sunpeak 0.6.4 → 0.6.6

package/template/src/components/map/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/map-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/index.ts

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

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useSafeArea, useMaxHeight } from 'sunpeak';
+import { Map } from '../components/map/map';
+
+/**
+ * Production-ready Map 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 MapResource = 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,
+      }}
+    >
+      <Map />
+    </div>
+  );
+});
+MapResource.displayName = 'MapResource';

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 { mapSimulation } from './map-simulation.js';
 
 export const SIMULATIONS = {
   counter: counterSimulation,
   albums: albumsSimulation,
   carousel: carouselSimulation,
+  map: mapSimulation,
 } as const;

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

@@ -0,0 +1,177 @@
+/**
+ * Server-safe configuration for the map 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 MapData extends Record<string, unknown> {
+  places: Place[];
+}
+
+const mapData: MapData = {
+  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 mapSimulation = {
+  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://MapResource',
+      '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://MapResource',
+    name: 'map',
+    title: 'Map',
+    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: mapData,
+    _meta: {},
+  },
+} as const;