sunpeak 0.6.1 → 0.6.5

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

@@ -1 +1 @@
-{"version":"4.0.13","results":[[":src/resources/counter-resource.test.tsx",{"duration":341.562457,"failed":false}],[":src/components/album/albums.test.tsx",{"duration":347.8453920000002,"failed":false}],[":src/resources/carousel-resource.test.tsx",{"duration":281.398232,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":245.63889299999983,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":64.06780200000003,"failed":false}],[":src/resources/albums-resource.test.tsx",{"duration":269.48677499999985,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":490.057513,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":302.1487770000001,"failed":false}],[":src/components/card/card.test.tsx",{"duration":55.60354700000016,"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/album/album-carousel.test.tsx

@@ -0,0 +1,84 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AlbumCarousel } from './album-carousel';
+
+const mockUseDisplayMode = vi.fn(() => 'inline');
+
+// Mock sunpeak hooks
+vi.mock('sunpeak', () => ({
+  useWidgetState: vi.fn(() => [{ currentIndex: 0 }, vi.fn()]),
+  useDisplayMode: () => mockUseDisplayMode(),
+}));
+
+// Mock embla-carousel-react
+vi.mock('embla-carousel-react', () => ({
+  default: vi.fn(() => [vi.fn(), null]),
+}));
+
+// Mock embla-carousel-wheel-gestures
+vi.mock('embla-carousel-wheel-gestures', () => ({
+  WheelGesturesPlugin: vi.fn(() => ({})),
+}));
+
+describe('AlbumCarousel', () => {
+  beforeEach(() => {
+    mockUseDisplayMode.mockReturnValue('inline');
+  });
+
+  it('renders all children with correct card width', () => {
+    const { container } = render(
+      <AlbumCarousel cardWidth={300}>
+        <div>Card 1</div>
+        <div>Card 2</div>
+        <div>Card 3</div>
+      </AlbumCarousel>
+    );
+
+    const cardContainers = container.querySelectorAll('.flex-none');
+    expect(cardContainers).toHaveLength(3);
+
+    cardContainers.forEach((cardContainer) => {
+      const element = cardContainer as HTMLElement;
+      expect(element.style.minWidth).toBe('300px');
+      expect(element.style.maxWidth).toBe('300px');
+    });
+  });
+
+  it('handles cardWidth object with inline/fullscreen modes', () => {
+    // Test inline mode
+    mockUseDisplayMode.mockReturnValue('inline');
+    const { container: inlineContainer } = render(
+      <AlbumCarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+        <div>Card 1</div>
+      </AlbumCarousel>
+    );
+
+    let cardContainer = inlineContainer.querySelector('.flex-none') as HTMLElement;
+    expect(cardContainer.style.minWidth).toBe('250px');
+
+    // Test fullscreen mode
+    mockUseDisplayMode.mockReturnValue('fullscreen');
+    const { container: fullscreenContainer } = render(
+      <AlbumCarousel cardWidth={{ inline: 250, fullscreen: 400 }}>
+        <div>Card 1</div>
+      </AlbumCarousel>
+    );
+
+    cardContainer = fullscreenContainer.querySelector('.flex-none') as HTMLElement;
+    expect(cardContainer.style.minWidth).toBe('400px');
+  });
+
+  it('applies custom gap between cards', () => {
+    const { container } = render(
+      <AlbumCarousel gap={24}>
+        <div>Card 1</div>
+        <div>Card 2</div>
+      </AlbumCarousel>
+    );
+
+    const carouselTrack = container.querySelector('.flex.touch-pan-y') as HTMLElement;
+    expect(carouselTrack.style.gap).toBe('24px');
+    expect(carouselTrack.style.marginLeft).toBe('-24px');
+    expect(carouselTrack.style.paddingLeft).toBe('24px');
+  });
+});

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

@@ -0,0 +1,168 @@
+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 AlbumCarouselState extends Record<string, unknown> {
+  currentIndex?: number;
+}
+
+export type AlbumCarouselProps = {
+  children?: React.ReactNode;
+  gap?: number;
+  showArrows?: boolean;
+  showEdgeGradients?: boolean;
+  cardWidth?: number | { inline?: number; fullscreen?: number };
+  className?: string;
+};
+
+export const AlbumCarousel = React.forwardRef<HTMLDivElement, AlbumCarouselProps>(
+  (
+    { children, gap = 16, showArrows = true, showEdgeGradients = true, cardWidth, className },
+    ref
+  ) => {
+    const [widgetState, setWidgetState] = useWidgetState<AlbumCarouselState>(() => ({
+      currentIndex: 0,
+    }));
+    const displayMode = useDisplayMode();
+
+    const [emblaRef, emblaApi] = useEmblaCarousel(
+      {
+        align: 'start',
+        dragFree: true,
+        containScroll: 'trimSnaps',
+      },
+      [WheelGesturesPlugin()]
+    );
+
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const scrollPrev = React.useCallback(() => {
+      if (emblaApi) emblaApi.scrollPrev();
+    }, [emblaApi]);
+
+    const scrollNext = React.useCallback(() => {
+      if (emblaApi) emblaApi.scrollNext();
+    }, [emblaApi]);
+
+    const onSelect = React.useCallback(() => {
+      if (!emblaApi) return;
+
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
+
+      const currentIndex = emblaApi.selectedScrollSnap();
+      if (widgetState?.currentIndex !== currentIndex) {
+        setWidgetState((prev) => ({ ...prev, currentIndex }));
+      }
+    }, [emblaApi, widgetState?.currentIndex, setWidgetState]);
+
+    React.useEffect(() => {
+      if (!emblaApi) return;
+
+      onSelect();
+      emblaApi.on('select', onSelect);
+      emblaApi.on('reInit', onSelect);
+
+      return () => {
+        emblaApi.off('select', onSelect);
+        emblaApi.off('reInit', onSelect);
+      };
+    }, [emblaApi, onSelect]);
+
+    const childArray = React.Children.toArray(children);
+
+    const getCardWidth = () => {
+      if (typeof cardWidth === 'number') {
+        return cardWidth;
+      }
+      if (cardWidth && typeof cardWidth === 'object') {
+        if (displayMode === 'fullscreen' && cardWidth.fullscreen) {
+          return cardWidth.fullscreen;
+        }
+        if (cardWidth.inline) {
+          return cardWidth.inline;
+        }
+      }
+      return 220;
+    };
+
+    const cardWidthPx = getCardWidth();
+
+    return (
+      <div ref={ref} className={cn('relative w-full', className)}>
+        {/* Left edge gradient */}
+        {showEdgeGradients && canScrollPrev && (
+          <div
+            className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 bg-gradient-to-r from-surface to-transparent"
+            aria-hidden="true"
+          />
+        )}
+
+        {/* Right edge gradient */}
+        {showEdgeGradients && canScrollNext && (
+          <div
+            className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 bg-gradient-to-l from-surface to-transparent"
+            aria-hidden="true"
+          />
+        )}
+
+        {/* Carousel viewport */}
+        <div ref={emblaRef} className="overflow-hidden w-full">
+          <div
+            className="flex touch-pan-y"
+            style={{
+              gap: `${gap}px`,
+              marginLeft: `-${gap}px`,
+              paddingLeft: `${gap}px`,
+            }}
+          >
+            {childArray.map((child, index) => (
+              <div
+                key={index}
+                className="flex-none"
+                style={{
+                  minWidth: `${cardWidthPx}px`,
+                  maxWidth: `${cardWidthPx}px`,
+                }}
+              >
+                {child}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Previous button */}
+        {showArrows && canScrollPrev && (
+          <Button
+            variant="soft"
+            color="secondary"
+            onClick={scrollPrev}
+            className="absolute left-2 top-1/2 -translate-y-1/2 z-20 h-8 w-8 min-w-8 rounded-full p-0 shadow-md"
+            aria-label="Previous slide"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        )}
+
+        {/* Next button */}
+        {showArrows && canScrollNext && (
+          <Button
+            variant="soft"
+            color="secondary"
+            onClick={scrollNext}
+            className="absolute right-2 top-1/2 -translate-y-1/2 z-20 h-8 w-8 min-w-8 rounded-full p-0 shadow-md"
+            aria-label="Next slide"
+          >
+            <ArrowRight className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    );
+  }
+);
+AlbumCarousel.displayName = 'AlbumCarousel';

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

@@ -29,8 +29,8 @@ vi.mock('./fullscreen-viewer', () => ({
   ),
 }));
 
-vi.mock('../carousel', () => ({
-  Carousel: ({ children }: { children: React.ReactNode }) => (
+vi.mock('./album-carousel', () => ({
+  AlbumCarousel: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="carousel">{children}</div>
   ),
 }));

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

@@ -6,7 +6,7 @@ import {
   useWidgetProps,
   useUserAgent,
 } from 'sunpeak';
-import { Carousel } from '../carousel';
+import { AlbumCarousel } from './album-carousel';
 import { AlbumCard } from './album-card';
 import { FullscreenViewer } from './fullscreen-viewer';
 
@@ -60,7 +60,7 @@ export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className
 
   return (
     <div ref={ref} className={className}>
-      <Carousel gap={20} showArrows={false} showEdgeGradients={false} cardWidth={272}>
+      <AlbumCarousel gap={20} showArrows={false} showEdgeGradients={false} cardWidth={272}>
         {albums.map((album: Album) => (
           <AlbumCard
             key={album.id}
@@ -69,7 +69,7 @@ export const Albums = React.forwardRef<HTMLDivElement, AlbumsProps>(({ className
             buttonSize={hasTouch ? 'lg' : 'md'}
           />
         ))}
-      </Carousel>
+      </AlbumCarousel>
     </div>
   );
 });

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

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

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

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

package/template/src/components/index.ts

@@ -1,3 +1,3 @@
-export * from './card';
 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';