pizzaz-mcp 1.0.0

package/src/pizzaz/markers.json

@@ -0,0 +1,104 @@
+{
+  "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.7990],
+      "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.7990],
+      "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.4380, 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"
+    }
+  ]
+}

package/src/pizzaz-albums/AlbumCard.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Button } from "@openai/apps-sdk-ui/components/Button";
+import { Image } from "@openai/apps-sdk-ui/components/Image";
+import { Badge } from "@openai/apps-sdk-ui/components/Badge";
+
+function AlbumCard({ album, onSelect }) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      color="secondary"
+      pill={false}
+      className="group relative flex-shrink-0 w-[272px] bg-white text-left p-0 h-auto min-h-0 rounded-none shadow-none gap-0 before:hidden"
+      onClick={() => onSelect?.(album)}
+    >
+      <div className="flex w-full flex-col gap-2">
+        <div className="relative aspect-[4/3] w-full overflow-hidden rounded-2xl shadow-lg">
+          <Image
+            src={album.cover}
+            alt={album.title}
+            className="h-full w-full object-cover"
+            loading="lazy"
+          />
+          <Badge
+            variant="soft"
+            color="secondary"
+            size="sm"
+            pill
+            className="absolute left-3 top-3 bg-white/50 backdrop-blur-sm"
+          >
+            Featured
+          </Badge>
+        </div>
+        <div className="px-1.5">
+          <div className="text-base font-medium truncate">{album.title}</div>
+          <div className="mt-0.5 text-sm font-normal text-black/60">
+            {album.photos.length} photos
+          </div>
+        </div>
+      </div>
+    </Button>
+  );
+}
+
+export default AlbumCard;

package/src/pizzaz-albums/FilmStrip.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function FilmStrip({ album, selectedIndex, onSelect }) {
+  return (
+    <div className="h-full w-full overflow-auto flex flex-col items-center justify-center p-5 space-y-5">
+      {album.photos.map((photo, idx) => (
+        <button
+          key={photo.id}
+          type="button"
+          onClick={() => onSelect?.(idx)}
+          className={
+            "block w-full p-[1px] pointer-events-auto rounded-[10px] cursor-pointer border transition-[colors,opacity] " +
+            (idx === selectedIndex
+              ? "border-black"
+              : "border-black/0 hover:border-black/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>
+  );
+}

package/src/pizzaz-albums/FullscreenViewer.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useMaxHeight } from "../use-max-height";
+import FilmStrip from "./FilmStrip";
+
+export default function FullscreenViewer({ album }) {
+  const maxHeight = useMaxHeight() ?? undefined;
+  const [index, setIndex] = React.useState(0);
+
+  React.useEffect(() => {
+    setIndex(0);
+  }, [album?.id]);
+
+  const photo = album?.photos?.[index];
+
+  return (
+    <div
+      className="relative w-full h-full bg-white"
+      style={{
+        maxHeight,
+        height: maxHeight,
+      }}
+    >
+      <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={index} onSelect={setIndex} />
+        </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">
+            {photo ? (
+              <img
+                src={photo.url}
+                alt={photo.title || album.title}
+                className="absolute inset-0 m-auto rounded-3xl shadow-sm border border-black/10 max-w-full max-h-full object-contain"
+              />
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pizzaz-albums/albums.json

@@ -0,0 +1,112 @@
+{
+  "albums": [
+    {
+      "id": "summer-escape",
+      "title": "Summer Slice",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
+      "photos": [
+        {
+          "id": "s1",
+          "title": "Waves",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        },
+        {
+          "id": "s2",
+          "title": "Palm trees",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
+        },
+        {
+          "id": "s3",
+          "title": "Sunset",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        }
+      ]
+    },
+    {
+      "id": "city-lights",
+      "title": "Pepperoni Nights",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png",
+      "photos": [
+        {
+          "id": "c1",
+          "title": "Downtown",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        },
+        {
+          "id": "c2",
+          "title": "Neon",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
+        },
+        {
+          "id": "c3",
+          "title": "Streets",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        }
+      ]
+    },
+    {
+      "id": "into-the-woods",
+      "title": "Truffle Forest",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png",
+      "photos": [
+        {
+          "id": "n1",
+          "title": "Forest path",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        },
+        {
+          "id": "n2",
+          "title": "Misty",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
+        },
+        {
+          "id": "n3",
+          "title": "Waterfall",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        }
+      ]
+    },
+    {
+      "id": "pizza-tour",
+      "title": "Pizza tour",
+      "cover": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
+      "photos": [
+        {
+          "id": "tonys-pizza-napoletana",
+          "title": "Tony's Pizza Napoletana",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        },
+        {
+          "id": "golden-boy-pizza",
+          "title": "Golden Boy Pizza",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-3.png"
+        },
+        {
+          "id": "pizzeria-delfina-mission",
+          "title": "Pizzeria Delfina (Mission)",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-6.png"
+        },
+        {
+          "id": "ragazza",
+          "title": "Ragazza",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-4.png"
+        },
+        {
+          "id": "del-popolo",
+          "title": "Del Popolo",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-5.png"
+        },
+        {
+          "id": "square-pie-guys",
+          "title": "Square Pie Guys",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png"
+        },
+        {
+          "id": "zero-zero",
+          "title": "Zero Zero",
+          "url": "https://persistent.oaistatic.com/pizzaz/pizzaz-2.png"
+        }
+      ]
+    }
+  ]
+}

package/src/pizzaz-albums/index.jsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import albumsData from "./albums.json";
+import { useMaxHeight } from "../use-max-height";
+import { useOpenAiGlobal } from "../use-openai-global";
+import FullscreenViewer from "./FullscreenViewer";
+import AlbumCard from "./AlbumCard";
+import { Button } from "@openai/apps-sdk-ui/components/Button";
+
+function AlbumsCarousel({ onSelect }) {
+  const albums = albumsData?.albums || [];
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: "center",
+    loop: false,
+    containScroll: "trimSnaps",
+    slidesToScroll: "auto",
+    dragFree: false,
+  });
+  const [canPrev, setCanPrev] = React.useState(false);
+  const [canNext, setCanNext] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!emblaApi) return;
+    const updateButtons = () => {
+      setCanPrev(emblaApi.canScrollPrev());
+      setCanNext(emblaApi.canScrollNext());
+    };
+    updateButtons();
+    emblaApi.on("select", updateButtons);
+    emblaApi.on("reInit", updateButtons);
+    return () => {
+      emblaApi.off("select", updateButtons);
+      emblaApi.off("reInit", updateButtons);
+    };
+  }, [emblaApi]);
+
+  return (
+    <div className="antialiased relative w-full text-black py-5 select-none">
+      <div className="overflow-hidden max-sm:mx-5" ref={emblaRef}>
+        <div className="flex gap-5 items-stretch">
+          {albums.map((album) => (
+            <AlbumCard key={album.id} album={album} onSelect={onSelect} />
+          ))}
+        </div>
+      </div>
+      <div
+        aria-hidden
+        className={
+          "pointer-events-none absolute inset-y-0 left-0 w-3 z-[5] transition-opacity duration-200 " +
+          (canPrev ? "opacity-100" : "opacity-0")
+        }
+      >
+        <div
+          className="h-full w-full border-l border-black/15 bg-gradient-to-r from-black/10 to-transparent"
+          style={{
+            WebkitMaskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+            maskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+          }}
+        />
+      </div>
+      <div
+        aria-hidden
+        className={
+          "pointer-events-none absolute inset-y-0 right-0 w-3 z-[5] transition-opacity duration-200 " +
+          (canNext ? "opacity-100" : "opacity-0")
+        }
+      >
+        <div
+          className="h-full w-full border-r border-black/15 bg-gradient-to-l from-black/10 to-transparent"
+          style={{
+            WebkitMaskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+            maskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+          }}
+        />
+      </div>
+      {canPrev && (
+        <Button
+          aria-label="Previous"
+          className="absolute left-2 top-1/2 -translate-y-1/2 z-10 shadow-lg"
+          color="secondary"
+          size="sm"
+          variant="soft"
+          uniform
+          onClick={() => emblaApi && emblaApi.scrollPrev()}
+          type="button"
+        >
+          <ArrowLeft
+            strokeWidth={1.5}
+            className="h-4.5 w-4.5"
+            aria-hidden="true"
+          />
+        </Button>
+      )}
+      {canNext && (
+        <Button
+          aria-label="Next"
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 shadow-lg"
+          color="secondary"
+          size="sm"
+          variant="soft"
+          uniform
+          onClick={() => emblaApi && emblaApi.scrollNext()}
+          type="button"
+        >
+          <ArrowRight
+            strokeWidth={1.5}
+            className="h-4.5 w-4.5"
+            aria-hidden="true"
+          />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function App() {
+  const displayMode = useOpenAiGlobal("displayMode");
+  const [selectedAlbum, setSelectedAlbum] = React.useState(null);
+  const maxHeight = useMaxHeight() ?? undefined;
+
+  const handleSelectAlbum = (album) => {
+    setSelectedAlbum(album);
+    if (window?.webplus?.requestDisplayMode) {
+      window.webplus.requestDisplayMode({ mode: "fullscreen" });
+    }
+  };
+
+  return (
+    <div
+      className="relative antialiased w-full"
+      style={{
+        maxHeight,
+        height: displayMode === "fullscreen" ? maxHeight : undefined,
+      }}
+    >
+      {displayMode !== "fullscreen" && (
+        <AlbumsCarousel onSelect={handleSelectAlbum} />
+      )}
+
+      {displayMode === "fullscreen" && selectedAlbum && (
+        <FullscreenViewer album={selectedAlbum} />
+      )}
+    </div>
+  );
+}
+
+createRoot(document.getElementById("pizzaz-albums-root")).render(<App />);

package/src/pizzaz-carousel/PlaceCard.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Star } from "lucide-react";
+import { Button } from "@openai/apps-sdk-ui/components/Button";
+import { Image } from "@openai/apps-sdk-ui/components/Image";
+
+export default function PlaceCard({ place }) {
+  if (!place) return null;
+  return (
+    <div className="min-w-[220px] select-none max-w-[220px] w-[65vw] sm:w-[220px] self-stretch flex flex-col">
+      <div className="w-full">
+        <Image
+          src={place.thumbnail}
+          alt={place.name}
+          className="w-full aspect-square rounded-2xl object-cover ring ring-black/5 shadow-[0px_2px_6px_rgba(0,0,0,0.06)]"
+        />
+      </div>
+      <div className="mt-3 flex flex-col flex-1">
+        <div className="text-base font-medium truncate line-clamp-1">
+          {place.name}
+        </div>
+        <div className="text-xs mt-1 text-black/60 flex items-center gap-1">
+          <Star className="h-3 w-3" aria-hidden="true" />
+          {place.rating?.toFixed ? place.rating.toFixed(1) : place.rating}
+          {place.price ? <span>· {place.price}</span> : null}
+          <span>· San Francisco</span>
+        </div>
+        {place.description ? (
+          <div className="text-sm mt-2 text-black/80 flex-auto">
+            {place.description}
+          </div>
+        ) : null}
+        <div className="mt-5">
+          <Button color="primary" size="sm" variant="solid">
+            Learn more
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pizzaz-carousel/index.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import "../index.css";
+import { createRoot } from "react-dom/client";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import markers from "../pizzaz/markers.json";
+import PlaceCard from "./PlaceCard";
+import { Button } from "@openai/apps-sdk-ui/components/Button";
+
+function App() {
+  const places = markers?.places || [];
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: "center",
+    loop: false,
+    containScroll: "trimSnaps",
+    slidesToScroll: "auto",
+    dragFree: false,
+  });
+  const [canPrev, setCanPrev] = React.useState(false);
+  const [canNext, setCanNext] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!emblaApi) return;
+    const updateButtons = () => {
+      setCanPrev(emblaApi.canScrollPrev());
+      setCanNext(emblaApi.canScrollNext());
+    };
+    updateButtons();
+    emblaApi.on("select", updateButtons);
+    emblaApi.on("reInit", updateButtons);
+    return () => {
+      emblaApi.off("select", updateButtons);
+      emblaApi.off("reInit", updateButtons);
+    };
+  }, [emblaApi]);
+
+  return (
+    <div className="antialiased relative w-full text-black py-5 bg-white">
+      <div className="overflow-hidden" ref={emblaRef}>
+        <div className="flex gap-4 max-sm:mx-5 items-stretch">
+          {places.map((place) => (
+            <PlaceCard key={place.id} place={place} />
+          ))}
+        </div>
+      </div>
+      {/* Edge gradients */}
+      <div
+        aria-hidden
+        className={
+          "pointer-events-none absolute inset-y-0 left-0 w-3 z-[5] transition-opacity duration-200 " +
+          (canPrev ? "opacity-100" : "opacity-0")
+        }
+      >
+        <div
+          className="h-full w-full border-l border-black/15 bg-gradient-to-r from-black/10 to-transparent"
+          style={{
+            WebkitMaskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+            maskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+          }}
+        />
+      </div>
+      <div
+        aria-hidden
+        className={
+          "pointer-events-none absolute inset-y-0 right-0 w-3 z-[5] transition-opacity duration-200 " +
+          (canNext ? "opacity-100" : "opacity-0")
+        }
+      >
+        <div
+          className="h-full w-full border-r border-black/15 bg-gradient-to-l from-black/10 to-transparent"
+          style={{
+            WebkitMaskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+            maskImage:
+              "linear-gradient(to bottom, transparent 0%, white 30%, white 70%, transparent 100%)",
+          }}
+        />
+      </div>
+      {canPrev && (
+        <Button
+          aria-label="Previous"
+          className="absolute left-2 top-1/2 -translate-y-1/2 z-10 shadow-lg"
+          color="secondary"
+          size="sm"
+          variant="soft"
+          uniform
+          onClick={() => emblaApi && emblaApi.scrollPrev()}
+          type="button"
+        >
+          <ArrowLeft
+            strokeWidth={1.5}
+            className="h-4.5 w-4.5"
+            aria-hidden="true"
+          />
+        </Button>
+      )}
+      {canNext && (
+        <Button
+          aria-label="Next"
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 shadow-lg"
+          color="secondary"
+          size="sm"
+          variant="soft"
+          uniform
+          onClick={() => emblaApi && emblaApi.scrollNext()}
+          type="button"
+        >
+          <ArrowRight
+            strokeWidth={1.5}
+            className="h-4.5 w-4.5"
+            aria-hidden="true"
+          />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+createRoot(document.getElementById("pizzaz-carousel-root")).render(<App />);