create-skybridge 0.0.0-dev.171ea52 → 0.0.0-dev.173bfe3

package/templates/ecom/src/tools/render-carousel.ts

@@ -0,0 +1,161 @@
+import { z } from "zod";
+import { getProducts } from "../catalog/index.js";
+import { CAROUSEL_MAX_SIZE, CAROUSEL_RANGE } from "../config.js";
+import { PriceSchema, type Product, SpecSchema } from "../types.js";
+
+// The `render-carousel` tool: takes the IDs the model curated and returns the
+// matching products for the carousel view to render. Data access lives in
+// `src/catalog/`; everything else this tool needs lives in this file.
+
+// ---------------------------------------------------------------------------
+// Input
+// ---------------------------------------------------------------------------
+
+const inputSchema = {
+  ids: z
+    .array(z.string())
+    .min(1)
+    .max(CAROUSEL_MAX_SIZE)
+    .describe("Product IDs to present, in display order."),
+};
+
+type RenderInput = z.infer<z.ZodObject<typeof inputSchema>>;
+
+// ---------------------------------------------------------------------------
+// Output — model-facing grounding, for the LLM ONLY. The carousel view is NOT
+// built from this; it renders from the full data in `_meta`. Keep it to what the
+// model needs to reference and compare the displayed products afterward.
+// ---------------------------------------------------------------------------
+
+const outputSchema = {
+  products: z
+    .array(
+      z.object({
+        id: z.string().describe("Product SKU or reference."),
+        title: z.string(),
+        options: z
+          .array(z.object({ label: z.string(), values: z.array(z.string()) }))
+          .describe("Variations available (e.g. colors, sizes)."),
+        description: z.string().optional(),
+        price: PriceSchema.optional(),
+        outOfStock: z.boolean(),
+        specs: z
+          .array(SpecSchema)
+          .describe("Product-specific facts (material, dimensions, care…)."),
+      }),
+    )
+    .describe(
+      "The products shown in the carousel, in display order. For your reference only — to curate, compare, and answer follow-ups. Ground every claim in this data; never invent facts.",
+    ),
+};
+
+type RenderOutput = z.infer<z.ZodObject<typeof outputSchema>>;
+
+// ---------------------------------------------------------------------------
+// Mapping: trim each product's `card` and `options` into the model-facing
+// grounding (outputSchema), dropping presentational fields (media, url). The
+// full data stays in `_meta` for the view.
+// @todo: choose what the model sees per product. Grounding only: no
+// presentational data (media, styling); that rides in `_meta` for the view.
+// ---------------------------------------------------------------------------
+
+function toStructuredContent(products: Product[]): RenderOutput {
+  const groundingProducts: RenderOutput["products"] = [];
+
+  for (const product of products) {
+    const { card } = product;
+
+    const options: { label: string; values: string[] }[] = [];
+    for (const option of product.options) {
+      const values: string[] = [];
+      for (const value of option.values) {
+        values.push(value.label);
+      }
+      options.push({ label: option.label, values });
+    }
+
+    groundingProducts.push({
+      id: product.id,
+      title: card.title,
+      description: card.description,
+      price: card.price,
+      outOfStock: card.outOfStock ?? false,
+      options,
+      specs: card.specs,
+    });
+  }
+
+  return { products: groundingProducts };
+}
+
+// ---------------------------------------------------------------------------
+// Tool (registered from server.ts to keep the typed tool chain intact)
+// ---------------------------------------------------------------------------
+
+export const renderCarouselDefinition = {
+  name: "render-carousel" as const,
+
+  // @todo: adapt the wording to your catalog and brand voice (tone, vocabulary,
+  // how to present products). The behavioral rules below apply to any catalog.
+  description: `\
+Display the products you curated as an inline carousel for the client.
+
+## When to call
+Call this AFTER searching and curating, and BEFORE writing your recommendation. Avoid describing the products in text first since the carousel shows them.
+
+## What to pass
+Pass the IDs of the ${CAROUSEL_RANGE} products you chose, in display order (most relevant first). Order is significant: the carousel shows them in this exact order and your recommendation must follow the same sequence. Pass distinct products, not several variants of the same one; the detail view lets the client explore a product's variants (colors, sizes, and so on).
+
+## After the carousel
+Recommend in carousel order so the client can follow along. The cards already show image, title, price, and key facts, so do not repeat them: add useful analysis tied to the client's need. Suggest a refinement the client has not addressed yet (from the available filters), never one they already used.
+
+## Accuracy
+Use only the data returned for each product. Never invent facts, materials, or availability. If the client asks about something not present, open that product's detail or search again before answering.`,
+  annotations: {
+    readOnlyHint: true,
+    openWorldHint: false,
+    destructiveHint: false,
+  },
+
+  // @todo: customize the status messages shown in ChatGPT while the tool runs.
+  _meta: {
+    "openai/toolInvocation/invoking": "Loading product carousel",
+    "openai/toolInvocation/invoked": "Loaded product carousel",
+  },
+
+  // The carousel and product details UI rendered inline in the conversation.
+  view: {
+    // `as const` keeps this a literal (like `name` above) so it matches the
+    // generated ViewNameRegistry; a bare string widens and fails the build.
+    component: "carousel" as const,
+    description: "Browse the curated products.",
+    // @todo: declare the CSP domains this view needs. Add your image origins to
+    // `resourceDomains` so product images load, and the product site to
+    // `redirectDomains` so the detail view's "View on site" link and the host's
+    // "Open in app" URL (useOpenExternal / setOpenInAppUrl) are allowed.
+    // csp: {
+    //   resourceDomains: ["https://images.example.com"],
+    //   redirectDomains: ["https://www.example.com"],
+    // },
+  },
+
+  inputSchema,
+  outputSchema,
+};
+
+export async function renderCarouselHandler({ ids }: RenderInput) {
+  const products = await getProducts(ids);
+
+  return {
+    // Full products (incl. variants) for the view; not in model context.
+    _meta: { products },
+    structuredContent: toStructuredContent(products),
+    content: [
+      {
+        type: "text" as const,
+        text: `Rendered ${products.length} product(s) in the carousel.`,
+      },
+    ],
+    isError: false,
+  };
+}

package/templates/ecom/src/tools/search-products.ts

@@ -0,0 +1,196 @@
+import { z } from "zod";
+import { search } from "../catalog/index.js";
+import {
+  CAROUSEL_MAX_SIZE,
+  CAROUSEL_RANGE,
+  MIN_SEARCH_ITERATIONS,
+} from "../config.js";
+import { PriceSchema, type SearchResult, SpecSchema } from "../types.js";
+
+// The `search-products` tool: keyword + filters in, matching products out as
+// structured output for the model. It has NO view — include only what the model
+// needs to curate (ids + properties), never presentational data (images, media);
+// render-carousel handles that. Data access lives in `src/catalog/`; everything
+// else this tool needs lives in this file.
+
+// ---------------------------------------------------------------------------
+// Input
+// ---------------------------------------------------------------------------
+
+const inputSchema = {
+  // @todo: tune this guidance to your catalog's vocabulary. The model reads
+  // it to turn conversational input into a good keyword.
+  keyword: z.string().describe(
+    `\
+Short noun phrases extracted from conversational input. Never pass full sentences. \
+Include color, material, and style descriptors for accuracy. \
+For vague gift or occasion queries without a clear product type, use broad category terms.`,
+  ),
+
+  // @todo: set the sort options your backend supports (or remove).
+  sort: z.enum(["price-asc", "price-desc"]).optional().describe("Sort order."),
+
+  // @todo: declare the filters your catalog supports. Add one param per
+  // facet (category, color, size...), each optional so the model only sends
+  // what the user asked for. `priceRange` below is just an example, remove it.
+  priceRange: z
+    .string()
+    .optional()
+    .describe(
+      "Price range in dollars. Format: 'min-max' e.g. '0-500', '1000-2000'.",
+    ),
+};
+
+export type SearchInput = z.infer<z.ZodObject<typeof inputSchema>>;
+
+// ---------------------------------------------------------------------------
+// Output — model-facing grounding, returned in structuredContent.
+// ---------------------------------------------------------------------------
+
+const productSchema = z.object({
+  id: z.string().describe("Stable product ID; pass to render-carousel."),
+  title: z.string(),
+  description: z.string().optional(),
+  price: PriceSchema.optional(),
+  outOfStock: z
+    .boolean()
+    .optional()
+    .describe("True when the product is not purchasable."),
+  specs: z
+    .array(SpecSchema)
+    .describe("Product-specific facts to curate on (material, dimensions…)."),
+
+  // @todo: Add whatever custom fields the model should curate on as real types,
+  // not `specs` strings (e.g. `rating`, `discountPct`, `badges`).
+});
+
+const outputSchema = {
+  products: z.array(productSchema).describe("Matching products, sorted."),
+  pages: z
+    .object({
+      current: z.number(),
+      total: z.number(),
+    })
+    .optional()
+    .describe("Pagination: current page and total page count."),
+  totalHits: z
+    .number()
+    .optional()
+    .describe("Total matching products across all pages."),
+};
+
+type SearchOutput = z.infer<z.ZodObject<typeof outputSchema>>;
+
+// ---------------------------------------------------------------------------
+// Mapping: project each product's `card` into the model-facing grounding
+// (outputSchema), dropping presentational fields (media, url).
+// @todo: choose what the model sees per product. Grounding only: the model
+// curates on facts, so presentational data never belongs here.
+// ---------------------------------------------------------------------------
+
+function toStructuredContent({
+  products,
+  pages,
+  totalHits,
+}: SearchResult): SearchOutput {
+  const results: SearchOutput["products"] = [];
+  for (const { id, card } of products) {
+    results.push({
+      id,
+      title: card.title,
+      description: card.description,
+      price: card.price,
+      outOfStock: card.outOfStock,
+      specs: card.specs,
+    });
+  }
+  return { products: results, pages, totalHits };
+}
+
+// ---------------------------------------------------------------------------
+// Narration — framing + next-step instructions for the model. The products
+// themselves ride in structuredContent; this text carries NO result data.
+// @todo: customize the NEXT STEPS guidance below for your flow (keep searching
+// vs. curate and render). Remind the model to ground claims in the structured
+// results and never invent facts.
+// ---------------------------------------------------------------------------
+
+function narrate({ products }: SearchOutput): string {
+  const size = products.length;
+
+  if (size === 0) {
+    return `\
+No products found.
+
+NEXT STEP: Broaden the keyword or relax filters, then search again.`;
+  }
+
+  if (size < CAROUSEL_MAX_SIZE) {
+    return `\
+Only a few results.
+
+NEXT STEPS:
+1. If the client asked for a specific product by name, these are fine: curate and call render-carousel with the selected IDs.
+2. Otherwise, search again with broader terms before rendering.`;
+  }
+
+  return `\
+Enough results to present.
+
+NEXT STEPS:
+1. Curate the best matches for the client's intent from the structured results.
+2. Write your recommendation mentioning the selected products.
+3. Call render-carousel with the selected IDs.`;
+}
+
+// ---------------------------------------------------------------------------
+// Tool (registered from server.ts to keep the typed tool chain intact)
+// ---------------------------------------------------------------------------
+
+export const searchProductsDefinition = {
+  name: "search-products" as const,
+
+  // @todo: describe YOUR catalog and how the agent should search and curate
+  // it. This is the model's main guide: be specific about your categories,
+  // the multi-call search loop, and when to render vs. keep searching.
+  description: `\
+Search the product catalog. Handles any query: specific products, broad categories, gifts, occasions, or open discovery.
+Never assume a category is unavailable: always search before responding.
+
+The response is data only: a list of matching products (name, ID, price, description, and any product-specific facts) plus pagination and the available filters. The raw results are for your eyes only: the client never sees them.
+
+NEVER describe or characterize the raw results to the client: do not mention how many there are, what categories they fall into, or that they look off-topic.
+
+Act on the response as follows:
+
+- FIRST SEARCH: use keywords only (plus sort if needed).
+- ITERATE: a single search is not always enough. Run several searches (${MIN_SEARCH_ITERATIONS} minimum) before rendering: vary the keyword, apply a filter, or page deeper, and compare results across them. Quality comes from this multi-call exploration; one call then render gives shallow results.
+- CURATION: read results and pick the best matches for the client's intent, grounding your choice in each product's description. If zero results, broaden the keyword or relax filters and search again: do NOT call render-carousel. If fewer than 3 results and the user didn't ask for a specific product, search again with broader terms. Only after exploring across several searches, call render-carousel with the selected IDs.
+- PRESENT: Once you have ${CAROUSEL_RANGE} distinct, relevant products, call render-carousel with their IDs. Recommend ONLY AFTER the carousel displays, in carousel order.
+
+The sweet spot is ${CAROUSEL_RANGE} products.
+`,
+  annotations: {
+    readOnlyHint: true,
+    openWorldHint: false,
+    destructiveHint: false,
+  },
+
+  // @todo: customize the status messages shown in ChatGPT while the tool runs.
+  _meta: {
+    "openai/toolInvocation/invoking": "Searching the catalog",
+    "openai/toolInvocation/invoked": "Searched the catalog",
+  },
+
+  inputSchema,
+  outputSchema,
+};
+
+export async function searchProductsHandler(input: SearchInput) {
+  const results = toStructuredContent(await search(input));
+  return {
+    structuredContent: results,
+    content: [{ type: "text" as const, text: narrate(results) }],
+    isError: false,
+  };
+}

package/templates/ecom/src/types.ts

@@ -0,0 +1,87 @@
+import { z } from "zod";
+
+export const PriceSchema = z.object({
+  amount: z.number(),
+  currency: z.string(),
+});
+export type Price = z.infer<typeof PriceSchema>;
+
+// A product-specific fact (an objective spec: material, dimensions, capacity,
+// care…). `label` is optional so a fact can be a bare value (e.g. "Waterproof").
+export const SpecSchema = z.object({
+  label: z.string().optional(),
+  value: z.string(),
+});
+export type Spec = z.infer<typeof SpecSchema>;
+
+// ---------------------------------------------------------------------------
+// Product model — what the catalog providers in `src/catalog/` return and the
+// views render. Model: variant-as-full-product. Each `Variant` is a complete,
+// buyable product (its own title, price, media). A `Product` ties sibling
+// variants together and declares the axes (`Option`s) they vary on. A product
+// with no variations is just a product with a single variant and no options.
+// ---------------------------------------------------------------------------
+
+// One selectable value on an axis, e.g. the "Black" choice on the "Color" axis.
+type OptionValue = {
+  id: string; // stable key referenced by Variant.selection, e.g. "black"
+  label: string; // shown to the user, e.g. "Black"
+  media?: string; // optional swatch / image representing this value
+};
+
+// A variation axis the variants differ on, e.g. Color or Size.
+export type Option = {
+  id: string; // stable key, used as a key in Variant.selection, e.g. "color"
+  label: string; // shown to the user, e.g. "Color"
+  values: OptionValue[]; // in display order
+};
+
+// Display fields shared by a Variant and by a product's `card`.
+type Meta = {
+  title: string;
+  description?: string;
+  price?: Price;
+  media: string[]; // images for this item; media[0] is the primary/cover
+  url?: string; // link to this item's external product page
+  outOfStock?: boolean; // true = not purchasable
+  // Objective, product-specific facts (material, dimensions, capacity, care…),
+  // rendered as-is. Each fact's label is optional.
+  specs: Spec[];
+
+  // @todo: Add whatever custom fields the carousel should render as real types
+  // (e.g. `rating` → stars, `discountPct` → badge, `badges` → chips).
+};
+
+// One buyable product: full display Meta plus which value it takes on each axis.
+export type Variant = Meta & {
+  id: string; // SKU / article number; unique within the catalog
+  // The chosen value per axis: keys are Option.id, values are OptionValue.id.
+  // e.g. { color: "black", size: "40" }
+  selection: Record<string, string>;
+};
+
+// A product: one carousel card backed by one or more variants and the axes they
+// vary on (none for a single-variant product).
+export type Product = {
+  id: string; // stable product key
+  // The axes the variants vary on, in display order. Order is semantic: the
+  // detail picker narrows availability top-down (each axis constrained by the
+  // ones before it), so put the imagery-driving axis (usually color) first.
+  options: Option[];
+  // Only the variants that actually exist. A missing combination (e.g. no
+  // { color: "black", size: "40" }) is simply absent from this list — that is how
+  // contingent variations are expressed. Derive the selectable values for an axis
+  // by filtering this list on the choices already made.
+  variants: Variant[];
+  // The product's carousel card. Surfaced both in the carousel (the view
+  // renders it) and to the model (structuredContent is projected from it).
+  card: Meta;
+};
+
+// What a catalog provider's `search` returns. `pages` and `totalHits` are
+// optional: not every backend reports them.
+export type SearchResult = {
+  products: Product[];
+  pages?: { current: number; total: number };
+  totalHits?: number;
+};

package/templates/ecom/src/views/carousel/detail/detail.css.ts

@@ -0,0 +1,115 @@
+import { style } from "@vanilla-extract/css";
+import { colors, primitives } from "../../../design/tokens";
+
+// Two-column breakpoint. Layout is driven by the pane's own width (container
+// query), never the viewport, so a phone and a resized desktop pane agree.
+const TWO_COLUMN_MIN_WIDTH = "560px";
+
+export const detail = style({
+  containerType: "inline-size",
+  maxHeight: "100dvh",
+  overflowY: "auto",
+  padding: primitives.space.s,
+  // Clear the notch / home indicator when the page bleeds to the screen edge.
+  paddingBottom: `calc(${primitives.space.s} + env(safe-area-inset-bottom))`,
+});
+
+// Product / variant id, idiomatically top-right. @todo: reposition (drop the
+// right align, or move it in the JSX) or remove it.
+export const reference = style({
+  textAlign: "right",
+  color: colors.content.subtle,
+  marginBottom: primitives.space["3xs"],
+});
+
+// Single column by default; two columns (gallery | info) once the pane is wide.
+export const grid = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: primitives.space.s,
+  maxWidth: "1099px",
+  marginInline: "auto",
+  "@container": {
+    [`(min-width: ${TWO_COLUMN_MIN_WIDTH})`]: {
+      display: "grid",
+      // `minmax(0, 1fr)` (not `1fr`) lets a column shrink below its content's
+      // intrinsic width, so a chip row scrolls/wraps instead of blowing out.
+      gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+      gridTemplateAreas: '"gallery info"',
+      alignItems: "start",
+    },
+  },
+});
+
+export const galleryCell = style({
+  "@container": {
+    [`(min-width: ${TWO_COLUMN_MIN_WIDTH})`]: {
+      gridArea: "gallery",
+      position: "sticky",
+      top: primitives.space.s,
+    },
+  },
+});
+
+// The info column owns all inter-section spacing; sections set no outer margin.
+export const info = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: primitives.space.xs,
+  "@container": {
+    [`(min-width: ${TWO_COLUMN_MIN_WIDTH})`]: { gridArea: "info" },
+  },
+});
+
+export const title = style({ color: colors.content.intense });
+
+export const price = style({ color: colors.content.intense });
+
+// Product facts as a simple list: one line per fact, "label: value" (or just
+// the value when unlabeled). marginTop separates it from the section heading.
+// @todo: reshape freely (a table, grouped sections, inline chips…)
+export const specList = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: primitives.space["3xs"],
+  marginTop: primitives.space["3xs"],
+  marginBottom: 0,
+});
+
+// One fact on a line: "label:" then value.
+export const specRow = style({
+  display: "flex",
+  gap: primitives.space["4xs"],
+});
+
+export const specLabel = style({
+  margin: 0,
+  color: colors.content.subtle,
+});
+
+export const specValue = style({
+  margin: 0,
+  color: colors.content.intense,
+});
+
+// Primary CTA. @todo: tune to your brand; add a secondary action beside it
+// (ask-the-assistant, contact) as a per-catalog extension.
+export const cta = style({
+  minHeight: "44px",
+  padding: `${primitives.space["3xs"]} ${primitives.space.s}`,
+  borderRadius: primitives.radius.m,
+  border: "none",
+  backgroundColor: colors.common.accent,
+  color: colors.content.invertIntense,
+  fontFamily: primitives.font.family.primary,
+  fontSize: primitives.font.size.m,
+  fontWeight: primitives.font.weight.medium,
+  cursor: "pointer",
+  selectors: {
+    "&:disabled": {
+      backgroundColor: colors.surface.intense,
+      color: colors.content.subtle,
+      cursor: "not-allowed",
+    },
+  },
+});

package/templates/ecom/src/views/carousel/detail/detail.stories.tsx

@@ -0,0 +1,133 @@
+import type { Product } from "../../../types.js";
+import { DetailView } from "./index";
+
+function shot(fill: string) {
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23${fill}'/%3E%3Ccircle cx='200' cy='200' r='110' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E`;
+}
+
+// A long media set (primary shot + several accents) so the desktop thumbnail
+// rail is taller than the image and overflows past its bottom.
+const ACCENT_FILLS = [
+  "c9d4f5",
+  "f5d4c9",
+  "d4f5c9",
+  "f5f0c9",
+  "e0c9f5",
+  "c9f5f0",
+  "f5c9e0",
+  "d9d9d9",
+];
+
+function galleryMedia(primaryFill: string): string[] {
+  const media = [shot(primaryFill)];
+  for (const fill of ACCENT_FILLS) {
+    media.push(shot(fill));
+  }
+  return media;
+}
+
+const DESCRIPTION =
+  "A relaxed-fit jacket in water-repellent cotton.\n\nDropped shoulders, a two-way zip, and ribbed cuffs. Fully lined, with two zip pockets at the front and one inside.";
+
+// One story, every picker behavior:
+// - Hole in the matrix: {sand,L} does not exist, so under Sand, L is
+//   hard-disabled; switching to Sand while L is selected snaps Size to M.
+// - Sold out: {black,L} renders struck but selectable; the CTA locks as
+//   "Out of stock".
+// - Axis not applicable: the indigo colorway is one-size (no `size` key), so
+//   choosing "Indigo" hides the Size row; indigo resolves and stays buyable.
+function jacket(
+  id: string,
+  color: string,
+  colorLabel: string,
+  size: string | null,
+  outOfStock = false,
+): Product["variants"][number] {
+  const fill =
+    color === "sand" ? "d8c7a8" : color === "indigo" ? "3f4a8a" : "2b2b2b";
+  return {
+    id,
+    selection: size == null ? { color } : { color, size },
+    title: `Field jacket — ${colorLabel}`,
+    description: DESCRIPTION,
+    price: { amount: color === "black" ? 229 : 249, currency: "EUR" },
+    media: galleryMedia(fill),
+    url: "https://example.com/jacket",
+    outOfStock,
+    specs: [
+      { label: "Material", value: "Water-repellent cotton" },
+      { label: "Lining", value: "Recycled polyester" },
+      { label: "Fit", value: "Relaxed" },
+      { label: "Closure", value: "Two-way zip" },
+      { label: "Pockets", value: "Two zip front, one inside" },
+      { label: "Collar", value: "Stand-up" },
+      { label: "Cuffs", value: "Ribbed" },
+      { label: "Weight", value: "780 g" },
+      { label: "Origin", value: "Made in Portugal" },
+      { value: "Machine washable" }, // label-less fact (renders value only)
+    ],
+  };
+}
+
+const PRODUCT: Product = {
+  id: "field-jacket",
+  options: [
+    {
+      id: "color",
+      label: "Color",
+      values: [
+        { id: "black", label: "Black", media: shot("2b2b2b") },
+        { id: "sand", label: "Sand", media: shot("d8c7a8") },
+        { id: "indigo", label: "Indigo", media: shot("3f4a8a") },
+      ],
+    },
+    {
+      id: "size",
+      label: "Size",
+      values: [
+        { id: "m", label: "M" },
+        { id: "l", label: "L" },
+      ],
+    },
+  ],
+  variants: [
+    jacket("fj-black-m", "black", "Black", "m"),
+    jacket("fj-black-l", "black", "Black", "l", true),
+    jacket("fj-sand-m", "sand", "Sand", "m"),
+    jacket("fj-indigo", "indigo", "Indigo", null),
+  ],
+  card: {
+    title: "Field jacket",
+    price: { amount: 229, currency: "EUR" },
+    media: [shot("2b2b2b")],
+    specs: [],
+  },
+};
+
+export const Default = () => <DetailView product={PRODUCT} />;
+
+// Single-variant product: no picker, buyable immediately.
+const SIMPLE: Product = {
+  id: "tote",
+  options: [],
+  variants: [
+    {
+      id: "tote",
+      selection: {},
+      title: "Canvas tote",
+      description: "A sturdy everyday canvas tote.",
+      price: { amount: 39, currency: "EUR" },
+      media: [shot("e1e1e1")],
+      url: "https://example.com/tote",
+      specs: [{ label: "Material", value: "Canvas" }],
+    },
+  ],
+  card: {
+    title: "Canvas tote",
+    price: { amount: 39, currency: "EUR" },
+    media: [shot("e1e1e1")],
+    specs: [],
+  },
+};
+
+export const SingleVariant = () => <DetailView product={SIMPLE} />;