sunpeak 0.6.4 → 0.6.5

package/template/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.0.13","results":[[":src/resources/carousel-resource.test.tsx",{"duration":272.55451200000016,"failed":false}],[":src/resources/counter-resource.test.tsx",{"duration":403.50324999999975,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":332.906375,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":238.23859200000015,"failed":false}],[":src/components/album/album-carousel.test.tsx",{"duration":64.19374000000016,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":96.49479299999985,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":257.8042250000001,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":407.23125600000003,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":254.80172800000014,"failed":false}],[":src/components/carousel/card.test.tsx",{"duration":54.36003299999993,"failed":false}]]}
+{"version":"4.0.13","results":[[":src/resources/carousel-resource.test.tsx",{"duration":268.5257530000001,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":360.95308,"failed":false}],[":src/resources/counter-resource.test.tsx",{"duration":304.96090899999945,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":245.82036500000004,"failed":false}],[":src/components/album/album-carousel.test.tsx",{"duration":80.01594899999964,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":78.85182500000019,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":434.28565300000014,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":222.29475500000012,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":281.053044,"failed":false}],[":src/components/carousel/card.test.tsx",{"duration":53.92481799999996,"failed":false}]]}

package/template/package.json

@@ -14,6 +14,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
+    "mapbox-gl": "^3.9.4",
     "sunpeak": "workspace:*",
     "tailwind-merge": "^3.4.0"
   },

package/template/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './carousel';
 export * from './album';
+export * from './pizzaz';

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

@@ -0,0 +1,6 @@
+export * from './pizzaz';
+export * from './place-card';
+export * from './place-list';
+export * from './place-carousel';
+export * from './place-inspector';
+export * from './map-view';

package/template/src/components/pizzaz/map-view.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { useMaxHeight } from 'sunpeak';
+import { cn } from '../../lib/index';
+import type { Place } from '../../simulations/pizzaz-simulation';
+
+// Public Mapbox token for demo purposes
+mapboxgl.accessToken =
+  'pk.eyJ1IjoiZXJpY25pbmciLCJhIjoiY21icXlubWM1MDRiczJvb2xwM2p0amNyayJ9.n-3O6JI5nOp_Lw96ZO5vJQ';
+
+export type MapViewProps = {
+  places: Place[];
+  selectedPlace: Place | null;
+  isFullscreen: boolean;
+  onSelectPlace: (place: Place) => void;
+  className?: string;
+};
+
+function fitMapToMarkers(map: mapboxgl.Map, coords: [number, number][]) {
+  if (!map || !coords.length) return;
+  if (coords.length === 1) {
+    map.flyTo({ center: coords[0], zoom: 12 });
+    return;
+  }
+  const bounds = coords.reduce(
+    (b, c) => b.extend(c),
+    new mapboxgl.LngLatBounds(coords[0], coords[0])
+  );
+  map.fitBounds(bounds, { padding: 60, animate: true });
+}
+
+export const MapView = React.forwardRef<HTMLDivElement, MapViewProps>(
+  ({ places, selectedPlace, isFullscreen, onSelectPlace, className }, ref) => {
+    const mapRef = React.useRef<HTMLDivElement>(null);
+    const mapObj = React.useRef<mapboxgl.Map | null>(null);
+    const markerObjs = React.useRef<mapboxgl.Marker[]>([]);
+    const maxHeight = useMaxHeight();
+
+    const markerCoords = React.useMemo(() => places.map((p) => p.coords), [places]);
+
+    // Track if initial fit has happened
+    const hasFittedRef = React.useRef(false);
+
+    // Initialize map
+    React.useEffect(() => {
+      if (mapObj.current || !mapRef.current) return;
+
+      // Default to San Francisco if no coords yet
+      const defaultCenter: [number, number] = [-122.4194, 37.7749];
+
+      mapObj.current = new mapboxgl.Map({
+        container: mapRef.current,
+        style: 'mapbox://styles/mapbox/streets-v12',
+        center: defaultCenter,
+        zoom: 12,
+        attributionControl: false,
+      });
+
+      // Resize after first paint
+      requestAnimationFrame(() => {
+        mapObj.current?.resize();
+      });
+
+      // Handle window resize
+      const handleResize = () => mapObj.current?.resize();
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        mapObj.current?.remove();
+        mapObj.current = null;
+      };
+    }, []);
+
+    // Helper function to get inspector offset
+    const getInspectorOffsetPx = React.useCallback((): number => {
+      if (!isFullscreen) return 0;
+      if (typeof window === 'undefined') return 0;
+
+      const isXlUp = window.matchMedia && window.matchMedia('(min-width: 1280px)').matches;
+      const el = document.querySelector('.pizzaz-inspector');
+      const w = el ? el.getBoundingClientRect().width : 360;
+      const half = Math.round(w / 2);
+
+      // xl: inspector on right → negative x offset; lg: inspector on left → positive x offset
+      return isXlUp ? -half : half;
+    }, [isFullscreen]);
+
+    // Helper function to pan to a place
+    const panToPlace = React.useCallback(
+      (place: Place, offsetForInspector = false) => {
+        if (!mapObj.current) return;
+
+        // Validate coords before panning
+        if (!place.coords || !Array.isArray(place.coords) || place.coords.length !== 2) {
+          return;
+        }
+
+        const inspectorOffset = offsetForInspector ? getInspectorOffsetPx() : 0;
+        const flyOpts: Parameters<typeof mapObj.current.flyTo>[0] = {
+          center: place.coords,
+          zoom: 14,
+          speed: 1.2,
+          curve: 1.6,
+        };
+
+        if (inspectorOffset) {
+          flyOpts.offset = [inspectorOffset, 0];
+        }
+
+        mapObj.current.flyTo(flyOpts);
+      },
+      [getInspectorOffsetPx]
+    );
+
+    // Fit to markers when places data loads
+    React.useEffect(() => {
+      if (!mapObj.current || markerCoords.length === 0) return;
+
+      // Validate all coords are valid
+      const allCoordsValid = markerCoords.every(
+        (coord) => Array.isArray(coord) && coord.length === 2
+      );
+      if (!allCoordsValid) return;
+
+      // Only auto-fit on initial load, not on every places change
+      if (!hasFittedRef.current) {
+        hasFittedRef.current = true;
+        // Wait for map to be ready
+        if (mapObj.current.loaded()) {
+          fitMapToMarkers(mapObj.current, markerCoords);
+        } else {
+          mapObj.current.once('load', () => {
+            if (mapObj.current) {
+              fitMapToMarkers(mapObj.current, markerCoords);
+            }
+          });
+        }
+      }
+    }, [markerCoords]);
+
+    // Add markers when places change
+    React.useEffect(() => {
+      if (!mapObj.current) return;
+
+      // Remove existing markers
+      markerObjs.current.forEach((m) => m.remove());
+      markerObjs.current = [];
+
+      // Add new markers
+      places.forEach((place) => {
+        // Validate coords before creating marker
+        if (!place.coords || !Array.isArray(place.coords) || place.coords.length !== 2) {
+          return;
+        }
+
+        const marker = new mapboxgl.Marker({
+          color: '#F46C21',
+        })
+          .setLngLat(place.coords)
+          .addTo(mapObj.current!);
+
+        const el = marker.getElement();
+        if (el) {
+          el.style.cursor = 'pointer';
+          el.addEventListener('click', () => {
+            onSelectPlace(place);
+            panToPlace(place, true);
+          });
+        }
+        markerObjs.current.push(marker);
+      });
+    }, [places, onSelectPlace, panToPlace]);
+
+    // Pan to selected place
+    React.useEffect(() => {
+      if (!mapObj.current || !selectedPlace) return;
+      panToPlace(selectedPlace, true);
+    }, [selectedPlace, panToPlace]);
+
+    // Resize map when display mode or height changes
+    React.useEffect(() => {
+      if (!mapObj.current) return;
+      mapObj.current.resize();
+    }, [maxHeight, isFullscreen]);
+
+    // Combine refs
+    React.useImperativeHandle(ref, () => mapRef.current!);
+
+    return (
+      <div
+        className={cn(
+          'absolute inset-0 overflow-hidden',
+          isFullscreen &&
+            'left-[340px] right-2 top-2 bottom-4 border border-black/10 dark:border-white/10 rounded-3xl',
+          className
+        )}
+      >
+        <div
+          ref={mapRef}
+          className="w-full h-full absolute bottom-0 left-0 right-0"
+          style={{
+            maxHeight: maxHeight ?? undefined,
+            height: isFullscreen ? (maxHeight ?? undefined) : undefined,
+          }}
+        />
+      </div>
+    );
+  }
+);
+MapView.displayName = 'MapView';

package/template/src/components/pizzaz/pizzaz.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import {
+  useWidgetState,
+  useDisplayMode,
+  useWidgetAPI,
+  useWidgetProps,
+  useMaxHeight,
+} from 'sunpeak';
+import { Button } from '@openai/apps-sdk-ui/components/Button';
+import { ExpandLg } from '@openai/apps-sdk-ui/components/Icon';
+import { cn } from '../../lib/index';
+import { PlaceList } from './place-list';
+import { PlaceCarousel } from './place-carousel';
+import { PlaceInspector } from './place-inspector';
+import { MapView } from './map-view';
+import type { Place, PizzazData } from '../../simulations/pizzaz-simulation';
+
+export interface PizzazState extends Record<string, unknown> {
+  selectedPlaceId?: string | null;
+}
+
+export type PizzazProps = {
+  className?: string;
+};
+
+export const Pizzaz = React.forwardRef<HTMLDivElement, PizzazProps>(({ className }, ref) => {
+  const data = useWidgetProps<PizzazData>(() => ({ places: [] }));
+  const [widgetState, setWidgetState] = useWidgetState<PizzazState>(() => ({
+    selectedPlaceId: null,
+  }));
+  const displayMode = useDisplayMode();
+  const api = useWidgetAPI();
+  const maxHeight = useMaxHeight();
+
+  const places = data.places || [];
+  const selectedPlace = places.find((place: Place) => place.id === widgetState?.selectedPlaceId);
+  const isFullscreen = displayMode === 'fullscreen';
+
+  const handleSelectPlace = React.useCallback(
+    (place: Place) => {
+      setWidgetState((prev) => ({ ...prev, selectedPlaceId: place.id }));
+    },
+    [setWidgetState]
+  );
+
+  const handleCloseInspector = React.useCallback(() => {
+    setWidgetState((prev) => ({ ...prev, selectedPlaceId: null }));
+  }, [setWidgetState]);
+
+  const handleRequestFullscreen = React.useCallback(() => {
+    // Clear selection when entering fullscreen from embedded mode
+    if (widgetState?.selectedPlaceId) {
+      setWidgetState((prev) => ({ ...prev, selectedPlaceId: null }));
+    }
+    api?.requestDisplayMode?.({ mode: 'fullscreen' });
+  }, [api, widgetState?.selectedPlaceId, setWidgetState]);
+
+  const containerHeight = isFullscreen ? (maxHeight ?? 600) - 40 : 480;
+
+  return (
+    <div
+      ref={ref}
+      className={cn('relative antialiased w-full overflow-hidden', className)}
+      style={{
+        height: containerHeight,
+        minHeight: 480,
+        maxHeight: maxHeight ?? undefined,
+      }}
+    >
+      <div
+        className={cn(
+          'relative w-full h-full',
+          isFullscreen
+            ? 'rounded-none border-0'
+            : 'border border-black/10 dark:border-white/10 rounded-2xl sm:rounded-3xl'
+        )}
+      >
+        {/* Fullscreen button - only show in embedded mode */}
+        {!isFullscreen && (
+          <Button
+            variant="solid"
+            color="secondary"
+            size="sm"
+            className="absolute top-4 right-4 z-30 rounded-full shadow-lg"
+            onClick={handleRequestFullscreen}
+            aria-label="Enter fullscreen"
+          >
+            <ExpandLg className="h-4 w-4" aria-hidden="true" />
+          </Button>
+        )}
+
+        {/* Desktop sidebar - only in fullscreen */}
+        {isFullscreen && (
+          <PlaceList
+            places={places}
+            selectedId={widgetState?.selectedPlaceId ?? null}
+            onSelect={handleSelectPlace}
+          />
+        )}
+
+        {/* Mobile bottom carousel - only in embedded mode */}
+        {!isFullscreen && (
+          <PlaceCarousel
+            places={places}
+            selectedId={widgetState?.selectedPlaceId ?? null}
+            onSelect={handleSelectPlace}
+          />
+        )}
+
+        {/* Inspector (place details) - only in fullscreen */}
+        {isFullscreen && selectedPlace && (
+          <PlaceInspector place={selectedPlace} onClose={handleCloseInspector} />
+        )}
+
+        {/* Map */}
+        <MapView
+          places={places}
+          selectedPlace={selectedPlace ?? null}
+          isFullscreen={isFullscreen}
+          onSelectPlace={handleSelectPlace}
+        />
+
+        {/* Suggestion chips - only in fullscreen */}
+        {isFullscreen && (
+          <div className="hidden md:flex absolute inset-x-0 bottom-2 z-30 justify-center pointer-events-none">
+            <div className="flex gap-3 pointer-events-auto">
+              {['Open now', 'Top rated', 'Vegetarian friendly'].map((label) => (
+                <Button
+                  key={label}
+                  variant="solid"
+                  color="secondary"
+                  size="sm"
+                  className="rounded-full shadow-md"
+                >
+                  {label}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+Pizzaz.displayName = 'Pizzaz';

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';