@godaddy/gd-commerce-storefront 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as Dialog from "@radix-ui/react-dialog";
-import { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Link, useParams, useSearchParams } from "react-router";
 import { useQuery } from "@tanstack/react-query";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -122,8 +122,9 @@ function getAvailableInventoryQuantity(item) {
 	if (!edges || edges.length === 0) return null;
 	return edges.find((edge) => edge?.node?.type === "AVAILABLE")?.node?.quantity ?? 0;
 }
+const imageMediaTypes = new Set(["IMAGE", "PHOTO"]);
 function getImageUrls(item) {
-	return item?.mediaObjects?.edges?.filter((edge) => edge?.node?.type === "IMAGE" && edge.node.url).map((edge) => edge?.node?.url).filter((url) => Boolean(url)) ?? [];
+	return item?.mediaObjects?.edges?.filter((edge) => imageMediaTypes.has(edge?.node?.type ?? "") && edge?.node?.url).map((edge) => edge?.node?.url).filter((url) => Boolean(url)) ?? [];
 }
 function getPrimaryImageUrl(item) {
 	return getImageUrls(item)[0] ?? null;
@@ -147,6 +148,10 @@ function getProductAttributes(skuGroup) {
 		};
 	}) ?? [];
 }
+/** The product's display name: its label, then its name. */
+function getProductName(skuGroup) {
+	return skuGroup.label ?? skuGroup.name ?? "Product";
+}
 
 //#endregion
 //#region src/sample-cart.tsx
@@ -651,9 +656,9 @@ function CartDrawer() {
 		subtotal: item.totals?.subTotal?.value,
 		currency: item.totals?.subTotal?.currencyCode
 	}));
-	const summary = getCartSummaryTotals(cart);
+	const summary$1 = getCartSummaryTotals(cart);
 	const currency = isSample ? "USD" : cart?.totals?.total?.currencyCode ?? config.currencyCode;
-	const subtotal = isSample ? sample.items.reduce((sum, item) => sum + item.price * item.quantity, 0) : summary.subtotal;
+	const subtotal = isSample ? sample.items.reduce((sum, item) => sum + item.price * item.quantity, 0) : summary$1.subtotal;
 	async function handleAction(action, operation) {
 		if (locked) return;
 		setDrawerAction(action);
@@ -849,7 +854,35 @@ function CartDrawer() {
 }
 
 //#endregion
-//#region src/catalog.tsx
+//#region src/part.ts
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+/** Classes for the element that receives a part's `className`. The package CSS reset skips `commerce-part`. */
+const partClass = (...classes) => cx("commerce-part", ...classes);
+/**
+* Counts the parts mounted under a root, by key. Parts register in an effect, and a parent's effects run after its
+* children's, so the root can read `has` in its own effect. `onChange` must be stable; it runs after each change.
+*/
+function usePartRegistry(onChange) {
+	const counts = useRef(/* @__PURE__ */ new Map());
+	const has = useCallback((key) => counts.current.has(key), []);
+	const register = useCallback((key) => {
+		counts.current.set(key, (counts.current.get(key) ?? 0) + 1);
+		onChange?.(has);
+		return () => {
+			const count = (counts.current.get(key) ?? 1) - 1;
+			if (count > 0) counts.current.set(key, count);
+			else counts.current.delete(key);
+			onChange?.(has);
+		};
+	}, [has, onChange]);
+	return useMemo(() => ({
+		register,
+		has
+	}), [register, has]);
+}
+
+//#endregion
+//#region src/product-card.tsx
 function ProductImage({ url, name, className = "" }) {
 	const [failed, setFailed] = useState(false);
 	return url && !failed ? /* @__PURE__ */ jsx("img", {
@@ -865,74 +898,257 @@ function ProductImage({ url, name, className = "" }) {
 		children: "No image available"
 	});
 }
-function ProductCard({ product }) {
-	return /* @__PURE__ */ jsx(StorefrontSurface, { children: /* @__PURE__ */ jsx(ProductCardContent, { product }) });
+/** Set by `CatalogProducts` for each entry it renders, so the card template needs no product prop. */
+const CatalogItemContext = createContext(null);
+const titleLink = "title-link";
+function cardValue(item, productPath, links) {
+	if (item.source === "sample") return {
+		...links,
+		source: "sample",
+		sample: item.sample,
+		product: null,
+		name: item.sample.name,
+		href: null,
+		isSample: true
+	};
+	return {
+		...links,
+		source: "live",
+		product: item.product,
+		name: getProductName(item.product),
+		href: `${productPath}/${encodeURIComponent(item.product.id ?? "")}`,
+		isSample: false
+	};
+}
+const ProductCardContext = createContext(null);
+function useProductCardInternal(part) {
+	const context = useContext(ProductCardContext);
+	if (!context) throw new Error(`${part} must be rendered inside <ProductCardRoot>.`);
+	return context;
+}
+/** Read the card's product, name, and link from inside `ProductCardRoot`. */
+function useProductCard() {
+	const { product, name, href, isSample } = useProductCardInternal("useProductCard");
+	return useMemo(() => ({
+		product,
+		name,
+		href,
+		isSample
+	}), [
+		product,
+		name,
+		href,
+		isSample
+	]);
 }
-function ProductCardContent({ product }) {
+/** Provides one product to card parts. Inside `CatalogProducts` it renders the current catalog entry. */
+function ProductCardRoot({ children, product, className }) {
+	const catalogItem = useContext(CatalogItemContext);
 	const { config } = useCommerce();
-	const name = product.label ?? product.name ?? "Product";
-	const href = `${config.productPath}/${encodeURIComponent(product.id ?? "")}`;
-	const selectedSku = getSingleMatchedSku(product);
-	selectedSku?.id;
-	const hasVariants = getProductAttributes(product).length > 0;
-	const min = product.priceRange?.min;
-	const max = product.priceRange?.max;
-	return /* @__PURE__ */ jsxs("article", {
-		className: "group flex min-w-0 flex-col overflow-hidden rounded-lg border border-neutral-200",
-		children: [/* @__PURE__ */ jsx(Link, {
-			to: href,
-			tabIndex: -1,
-			"aria-hidden": "true",
-			className: "block aspect-square overflow-hidden",
+	const [imageLinked, setImageLinked] = useState(false);
+	const { register, has } = usePartRegistry(useCallback((registered) => setImageLinked(!registered(titleLink)), []));
+	useEffect(() => {
+		setImageLinked(!has(titleLink));
+	}, [has]);
+	const value = useMemo(() => {
+		const item = catalogItem ?? (product ? {
+			source: "live",
+			product
+		} : null);
+		return item && cardValue(item, config.productPath, {
+			imageLinked,
+			register
+		});
+	}, [
+		catalogItem,
+		product,
+		config.productPath,
+		imageLinked,
+		register
+	]);
+	if (catalogItem && product) throw new Error("Inside <CatalogProducts>, ProductCardRoot shows each catalog product. Remove its product prop.");
+	if (!value) throw new Error("ProductCardRoot needs a product prop outside <CatalogProducts>.");
+	const card = /* @__PURE__ */ jsx(ProductCardContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("article", {
+			className: partClass("group", className),
+			children: /* @__PURE__ */ jsx(CatalogItemContext.Provider, {
+				value: null,
+				children
+			})
+		})
+	});
+	return catalogItem ? card : /* @__PURE__ */ jsx(StorefrontSurface, { children: card });
+}
+/**
+* The product's first image, linked to its page. Samples show a placeholder. With a `ProductCardTitle` in the card,
+* the title is the one link keyboard and screen reader users get; without one, the image link is.
+*/
+function ProductCardImage({ className }) {
+	const card = useProductCardInternal("ProductCardImage");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: card.source === "live" ? /* @__PURE__ */ jsx(Link, {
+			to: card.href,
+			tabIndex: card.imageLinked ? void 0 : -1,
+			"aria-hidden": card.imageLinked ? void 0 : "true",
+			className: "block aspect-square overflow-hidden focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4",
 			children: /* @__PURE__ */ jsx(ProductImage, {
-				url: getPrimaryImageUrl(product),
-				name,
+				url: getPrimaryImageUrl(card.product),
+				name: card.name,
 				className: "motion-safe:transition-transform motion-safe:duration-200 motion-safe:group-hover:scale-105"
 			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-1 flex-col p-6",
-			children: [
-				/* @__PURE__ */ jsx("h2", {
-					className: "break-words text-2xl font-semibold leading-tight",
-					children: /* @__PURE__ */ jsx(Link, {
-						className: "rounded text-inherit hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
-						to: href,
-						children: name
-					})
-				}),
-				product.description && /* @__PURE__ */ jsx("p", {
-					className: "mt-3 line-clamp-3 text-sm leading-6",
-					children: product.description
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "mt-auto pt-6",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-wrap items-end justify-between gap-4 border-t border-neutral-200 pt-5",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "min-w-0 flex-1 text-lg font-semibold leading-7",
-							children: typeof min === "number" ? `${money(min, config.currencyCode)}${typeof max === "number" && max !== min ? ` – ${money(max, config.currencyCode)}` : ""}` : "Price unavailable"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "max-w-full",
-							children: !hasVariants && selectedSku ? /* @__PURE__ */ jsx(AddToCartButton, {
-								sku: selectedSku,
-								name
-							}) : /* @__PURE__ */ jsx(Link, {
-								className: buttonClass,
-								to: href,
-								children: hasVariants ? "Choose options" : "View product"
-							})
-						})]
-					})
+		}) : /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "flex aspect-square items-center justify-center bg-neutral-100",
+			children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 rounded-lg border border-neutral-300" })
+		})
+	});
+}
+/** The product name as an H2, linked to its page. */
+function ProductCardTitle({ className }) {
+	const { name, href, register } = useProductCardInternal("ProductCardTitle");
+	useEffect(() => href ? register(titleLink) : void 0, [href, register]);
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("h2", {
+			className: "break-words text-2xl font-semibold leading-tight",
+			children: href ? /* @__PURE__ */ jsx(Link, {
+				className: "rounded text-inherit hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+				to: href,
+				children: name
+			}) : name
+		})
+	});
+}
+/** Up to three lines of the product description. Renders nothing without one. */
+function ProductCardDescription({ className }) {
+	const { product } = useProductCardInternal("ProductCardDescription");
+	if (!product?.description) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "line-clamp-3 text-sm leading-6",
+			children: product.description
+		})
+	});
+}
+/** The product's price, or its price range when variants differ. */
+function ProductCardPrice({ className }) {
+	const card = useProductCardInternal("ProductCardPrice");
+	const { config } = useCommerce();
+	let text;
+	if (card.source === "sample") text = money(card.sample.price, "USD");
+	else {
+		const min = card.product.priceRange?.min;
+		const max = card.product.priceRange?.max;
+		text = typeof min === "number" ? `${money(min, config.currencyCode)}${typeof max === "number" && max !== min ? ` – ${money(max, config.currencyCode)}` : ""}` : "Price unavailable";
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-lg font-semibold leading-7",
+			children: text
+		})
+	});
+}
+/**
+* Adds the product directly when it has exactly one SKU and no options; otherwise links to its page to choose.
+* Samples add to the sample cart.
+*/
+function ProductCardAction({ className }) {
+	const card = useProductCardInternal("ProductCardAction");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: card.source === "live" ? /* @__PURE__ */ jsx(LiveAction, {
+			product: card.product,
+			name: card.name,
+			href: card.href
+		}) : /* @__PURE__ */ jsx(SampleAction, { sample: card.sample })
+	});
+}
+function LiveAction({ product, name, href }) {
+	const selectedSku = getSingleMatchedSku(product);
+	const hasVariants = getProductAttributes(product).length > 0;
+	if (!hasVariants && selectedSku) return /* @__PURE__ */ jsx(AddToCartButton, {
+		sku: selectedSku,
+		name
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		className: buttonClass,
+		to: href,
+		children: hasVariants ? "Choose options" : "View product"
+	});
+}
+function SampleAction({ sample }) {
+	const { add } = useSampleCart();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: buttonClass,
+		"aria-label": `Add ${sample.name} to sample cart`,
+		onClick: () => add(sample.key),
+		children: "Add to cart"
+	});
+}
+const packagedCardClass = "flex min-w-0 flex-col overflow-hidden rounded-lg border border-neutral-200";
+/** The packaged card's parts, inside a root that has `packagedCardClass`. */
+function PackagedCardParts() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProductCardImage, {}), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col p-6",
+		children: [
+			/* @__PURE__ */ jsx(ProductCardTitle, {}),
+			/* @__PURE__ */ jsx(ProductCardDescription, { className: "mt-3" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-auto pt-6",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-end justify-between gap-4 border-t border-neutral-200 pt-5",
+					children: [/* @__PURE__ */ jsx(ProductCardPrice, { className: "min-w-0 flex-1" }), /* @__PURE__ */ jsx(ProductCardAction, { className: "max-w-full" })]
 				})
-			]
-		})]
+			})
+		]
+	})] });
+}
+/** The packaged card for one `SKUGroup`. Compose `ProductCardRoot` and the card parts for a custom card. */
+function ProductCard({ product }) {
+	return /* @__PURE__ */ jsx(ProductCardRoot, {
+		product,
+		className: packagedCardClass,
+		children: /* @__PURE__ */ jsx(PackagedCardParts, {})
 	});
 }
-function Catalog(props) {
+
+//#endregion
+//#region src/catalog.tsx
+const CatalogContext = createContext(null);
+const sampleCatalog = { source: "sample" };
+function useCatalogInternal(part) {
+	const context = useContext(CatalogContext);
+	if (!context) throw new Error(`${part} must be rendered inside <CatalogRoot>.`);
+	return context;
+}
+/** Loads one cursor page of products, or the built-in samples, and provides them to catalog parts. */
+function CatalogRoot({ children, className, sampleProducts: sampleProducts$1 = false }) {
 	const { connection } = useCommerce();
-	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" ? /* @__PURE__ */ jsx(CatalogContent, { ...props }) : connection === "unbound" && props.sampleProducts ? /* @__PURE__ */ jsx(SampleCatalog, { ...props }) : /* @__PURE__ */ jsx(CommerceStatus, {}) });
+	let content;
+	if (connection === "ready") content = /* @__PURE__ */ jsx(CatalogLoader, {
+		className,
+		children
+	});
+	else if (connection === "unbound" && sampleProducts$1) content = /* @__PURE__ */ jsx(CatalogContext.Provider, {
+		value: sampleCatalog,
+		children: /* @__PURE__ */ jsx("section", {
+			className: partClass(className),
+			"data-commerce-source": "sample",
+			children
+		})
+	});
+	else content = /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx(CommerceStatus, {})
+	});
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: content });
 }
-function CatalogContent({ title = "Shop all products", description = "Explore the collection and find your favorites.", showHeader = true }) {
+function CatalogLoader({ children, className }) {
 	const { config } = useCommerce();
 	const [params, setParams] = useSearchParams();
 	const after = params.get("after") ?? "";
@@ -951,34 +1167,94 @@ function CatalogContent({ title = "Shop all products", description = "Explore th
 			headers: { "X-Commerce-Scope": config.cartScope }
 		})
 	});
-	function goToPage(cursor) {
+	const goToPage = useCallback((cursor) => {
 		const next = new URLSearchParams(params);
 		if (cursor) next.set("after", cursor);
 		else next.delete("after");
 		setParams(next);
+	}, [params, setParams]);
+	const nodes = useMemo(() => products.data?.skuGroups?.edges?.flatMap((edge) => edge?.node?.id ? [edge.node] : []) ?? [], [products.data]);
+	const value = useMemo(() => ({
+		source: "live",
+		products,
+		nodes,
+		after,
+		goToPage
+	}), [
+		products,
+		nodes,
+		after,
+		goToPage
+	]);
+	return /* @__PURE__ */ jsx(CatalogContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("section", {
+			className: partClass(className),
+			children
+		})
+	});
+}
+/** The catalog title as the page's H1, with a description. */
+function CatalogHeader({ title = "Shop all products", description = "Explore the collection and find your favorites.", className }) {
+	useCatalogInternal("CatalogHeader");
+	return /* @__PURE__ */ jsxs("header", {
+		className: partClass(className),
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl",
+			children: title
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-5 max-w-xl text-base leading-7 sm:text-lg",
+			children: description
+		})]
+	});
+}
+/** Announces loading, failure, or how many products the page shows. */
+function CatalogSummary({ className }) {
+	const catalog = useCatalogInternal("CatalogSummary");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			role: "status",
+			children: summary(catalog)
+		})
+	});
+}
+function summary(catalog) {
+	if (catalog.source === "sample") return "Sample products · Example prices in USD";
+	if (catalog.products.isPending) return "Loading products…";
+	if (catalog.products.isError) return "Products unavailable";
+	return `Showing ${catalog.nodes.length} product${catalog.nodes.length === 1 ? "" : "s"}`;
+}
+const sampleItems = sampleProducts.map((sample) => ({
+	key: sample.key,
+	item: {
+		source: "sample",
+		sample
 	}
-	const nodes = products.data?.skuGroups?.edges?.flatMap((edge) => edge?.node?.id ? [edge.node] : []) ?? [];
-	const pageInfo = products.data?.skuGroups?.pageInfo;
-	return /* @__PURE__ */ jsxs("section", { children: [
-		showHeader && /* @__PURE__ */ jsxs("header", {
-			className: "border-b border-neutral-200 pb-10 pt-4 sm:pb-14 sm:pt-8",
-			children: [/* @__PURE__ */ jsx("h1", {
-				className: "max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl",
-				children: title
-			}), /* @__PURE__ */ jsx("p", {
-				className: "mt-5 max-w-xl text-base leading-7 sm:text-lg",
-				children: description
-			})]
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "border-b border-neutral-200 py-6 sm:py-8",
-			children: /* @__PURE__ */ jsx("p", {
-				className: "text-sm",
-				role: "status",
-				children: products.isPending ? "Loading products…" : products.isError ? "Products unavailable" : `Showing ${nodes.length} product${nodes.length === 1 ? "" : "s"}`
-			})
-		}),
-		products.isPending && /* @__PURE__ */ jsx("div", {
+}));
+const packagedCard = /* @__PURE__ */ jsx(ProductCardRoot, {
+	className: packagedCardClass,
+	children: /* @__PURE__ */ jsx(PackagedCardParts, {})
+});
+/**
+* The product cards. `className` goes on the element that contains the cards, such as a grid. The loading
+* placeholder, the error with its retry, and the empty message render just before that element.
+*/
+function CatalogProducts({ className, children }) {
+	const catalog = useCatalogInternal("CatalogProducts");
+	const card = Children.toArray(children).some((child) => child !== "") ? children : packagedCard;
+	const nodes = catalog.source === "live" ? catalog.nodes : null;
+	const items = useMemo(() => nodes ? nodes.map((product) => ({
+		key: product.id ?? "",
+		item: {
+			source: "live",
+			product
+		}
+	})) : sampleItems, [nodes]);
+	const products = catalog.source === "live" ? catalog.products : null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		products?.isPending && /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
 			className: "grid grid-cols-1 gap-6 py-8 sm:grid-cols-2 lg:grid-cols-3",
 			children: [
@@ -997,7 +1273,7 @@ function CatalogContent({ title = "Shop all products", description = "Explore th
 				})]
 			}, item))
 		}),
-		products.isError && /* @__PURE__ */ jsxs("div", {
+		products?.isError && /* @__PURE__ */ jsxs("div", {
 			role: "alert",
 			className: "rounded-lg bg-red-50 p-5 text-red-800",
 			children: [/* @__PURE__ */ jsx("p", { children: message(products.error) }), /* @__PURE__ */ jsx("button", {
@@ -1007,17 +1283,30 @@ function CatalogContent({ title = "Shop all products", description = "Explore th
 				children: "Retry products"
 			})]
 		}),
-		products.isSuccess && !nodes.length && /* @__PURE__ */ jsx("p", {
+		products?.isSuccess && !items.length && /* @__PURE__ */ jsx("p", {
 			className: "py-16 text-center",
 			children: "No products available."
 		}),
 		/* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-1 gap-6 py-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:py-10",
-			children: nodes.map((product) => /* @__PURE__ */ jsx(ProductCard, { product }, product.id))
-		}),
-		/* @__PURE__ */ jsxs("nav", {
-			"aria-label": "Product pages",
-			className: "flex justify-between border-t border-neutral-200 pt-6",
+			className: partClass(className),
+			children: items.map(({ key, item }) => /* @__PURE__ */ jsx(CatalogItemContext.Provider, {
+				value: item,
+				children: card
+			}, key))
+		})
+	] });
+}
+/** First-page and next-page buttons. Renders nothing for samples, which have one page. */
+function CatalogPagination({ className }) {
+	const catalog = useCatalogInternal("CatalogPagination");
+	if (catalog.source === "sample") return null;
+	const { after, goToPage } = catalog;
+	const pageInfo = catalog.products.data?.skuGroups?.pageInfo;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Product pages",
+		className: partClass(className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between",
 			children: [after ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: buttonClass,
@@ -1030,60 +1319,21 @@ function CatalogContent({ title = "Shop all products", description = "Explore th
 				children: "Next page"
 			})]
 		})
-	] });
+	});
 }
-function SampleCatalog({ title = "Shop all products", description = "Explore the collection and find your favorites.", showHeader = true }) {
-	const { add } = useSampleCart();
-	return /* @__PURE__ */ jsxs("section", {
-		"data-commerce-source": "sample",
+/** The packaged catalog. Compose `CatalogRoot` and the catalog parts for a custom layout. */
+function Catalog({ title, description, showHeader = true, sampleProducts: sampleProducts$1 }) {
+	return /* @__PURE__ */ jsxs(CatalogRoot, {
+		sampleProducts: sampleProducts$1,
 		children: [
-			showHeader && /* @__PURE__ */ jsxs("header", {
-				className: "border-b border-neutral-200 pb-10 pt-4 sm:pb-14 sm:pt-8",
-				children: [/* @__PURE__ */ jsx("h1", {
-					className: "max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl",
-					children: title
-				}), /* @__PURE__ */ jsx("p", {
-					className: "mt-5 max-w-xl text-base leading-7 sm:text-lg",
-					children: description
-				})]
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "border-b border-neutral-200 py-6 text-sm",
-				role: "status",
-				children: "Sample products · Example prices in USD"
+			showHeader && /* @__PURE__ */ jsx(CatalogHeader, {
+				title,
+				description,
+				className: "border-b border-neutral-200 pb-10 pt-4 sm:pb-14 sm:pt-8"
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-1 gap-6 py-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:py-10",
-				children: sampleProducts.map((product) => /* @__PURE__ */ jsxs("article", {
-					className: "flex min-w-0 flex-col overflow-hidden rounded-lg border border-neutral-200",
-					children: [/* @__PURE__ */ jsx("div", {
-						"aria-hidden": "true",
-						className: "flex aspect-square items-center justify-center bg-neutral-100",
-						children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 rounded-lg border border-neutral-300" })
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-1 flex-col p-6",
-						children: [/* @__PURE__ */ jsx("h2", {
-							className: "break-words text-2xl font-semibold leading-tight",
-							children: product.name
-						}), /* @__PURE__ */ jsx("div", {
-							className: "mt-auto pt-6",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "flex flex-wrap items-end justify-between gap-4 border-t border-neutral-200 pt-5",
-								children: [/* @__PURE__ */ jsx("p", {
-									className: "text-lg font-semibold leading-7",
-									children: money(product.price, "USD")
-								}), /* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: buttonClass,
-									"aria-label": `Add ${product.name} to sample cart`,
-									onClick: () => add(product.key),
-									children: "Add to cart"
-								})]
-							})
-						})]
-					})]
-				}, product.key))
-			})
+			/* @__PURE__ */ jsx(CatalogSummary, { className: "border-b border-neutral-200 py-6 sm:py-8" }),
+			/* @__PURE__ */ jsx(CatalogProducts, { className: "grid grid-cols-1 gap-6 py-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:py-10" }),
+			/* @__PURE__ */ jsx(CatalogPagination, { className: "border-t border-neutral-200 pt-6" })
 		]
 	});
 }
@@ -1099,15 +1349,72 @@ function CommerceStorefront({ children,...props }) {
 }
 
 //#endregion
-//#region src/product-details.tsx
-function ProductDetails() {
+//#region src/product-details-context.tsx
+const ProductDetailsContext = createContext(null);
+function useProductDetailsInternal(part) {
+	const context = useContext(ProductDetailsContext);
+	if (!context) throw new Error(`${part} must be rendered inside <ProductDetailsRoot>.`);
+	return context;
+}
+/** Read the current product, verified SKU, and purchase status from inside `ProductDetailsRoot`. */
+function useProductDetails() {
+	const { product, name, selectedSku, quantity, availableQuantity, status, images } = useProductDetailsInternal("useProductDetails");
+	return {
+		product,
+		name,
+		selectedSku,
+		quantity,
+		availableQuantity,
+		status,
+		images
+	};
+}
+/**
+* Build a custom control for one product attribute. Returns `null` when the product has no such attribute.
+* A selection is never purchasable until the server verifies it.
+*/
+function useProductDetailsOption(attribute) {
+	const { attributes, selections, selectOption, register } = useProductDetailsInternal("useProductDetailsOption");
+	useEffect(() => register(`attribute:${attribute}`), [attribute, register]);
+	const index = attributes.findIndex((candidate) => candidate.name === attribute);
+	const match = attributes[index];
+	if (!match) return null;
+	const selected = selections[index] || null;
+	return {
+		name: match.name,
+		label: match.label,
+		selected,
+		values: match.values.map((value) => ({
+			name: value.name,
+			label: value.label,
+			selected: value.name === selected
+		})),
+		select: (value) => {
+			if (value === null) selectOption(attribute, "");
+			else if (match.values.some((candidate) => candidate.name === value)) selectOption(attribute, value);
+		}
+	};
+}
+/** Register the explicit SKU control so the layout check knows SKU-list products can be completed. */
+function useSkuOptionRegistration() {
+	const { register } = useProductDetailsInternal("ProductDetailsOptions");
+	useEffect(() => register("sku"), [register]);
+}
+/** Loads the product for the route's `:productId` and provides state to product parts. */
+function ProductDetailsRoot({ children, className }) {
 	const { productId = "" } = useParams();
 	const { connection } = useCommerce();
-	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" ? /* @__PURE__ */ jsx(ProductDetailsContent, { productId }, productId) : /* @__PURE__ */ jsx(CommerceStatus, {}) });
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" ? /* @__PURE__ */ jsx(ProductDetailsLoader, {
+		productId,
+		className,
+		children
+	}, productId) : /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx(CommerceStatus, {})
+	}) });
 }
-function ProductDetailsContent({ productId }) {
+function ProductDetailsLoader({ productId, className, children }) {
 	const { config } = useCommerce();
-	const fieldId = useId();
 	const [params, setParams] = useSearchParams();
 	const [quantity, setQuantity] = useState(1);
 	const [imageIndex, setImageIndex] = useState(0);
@@ -1130,10 +1437,10 @@ function ProductDetailsContent({ productId }) {
 	const skuOptions = getLabeledSkuOptions(group);
 	const explicitSku = skuOptions.find((sku) => sku.id === params.get("sku"));
 	const selections = attributes.map((attribute) => params.get(`option.${attribute.name}`) ?? "");
-	const complete = skuOptions.length > 0 ? !!explicitSku : attributes.every((attribute, index) => attribute.values.some((value) => value.name === selections[index]));
+	const complete = skuOptions.length > 0 ? !!explicitSku : attributes.every((attribute, index) => attribute.values.some((value$1) => value$1.name === selections[index]));
 	const selectionParams = new URLSearchParams();
-	selections.filter(Boolean).forEach((value) => {
-		selectionParams.append("attributeValues", value);
+	selections.filter(Boolean).forEach((value$1) => {
+		selectionParams.append("attributeValues", value$1);
 	});
 	const matched = useQuery({
 		retry: false,
@@ -1152,26 +1459,35 @@ function ProductDetailsContent({ productId }) {
 	});
 	const selectionVerified = complete && product.isSuccess && !product.isFetching && (attributes.length === 0 || matched.isSuccess && !matched.isFetching);
 	const selectedSku = selectionVerified ? explicitSku ?? getSingleMatchedSku(attributes.length ? matched.data?.skuGroup : group) : null;
-	const skuId = selectedSku?.id ?? null;
-	const skuPrice = selectedSku?.prices?.edges?.find((edge) => edge?.node?.value)?.node;
+	const status = !complete ? "incomplete" : matched.isError && !matched.isFetching ? "variant-error" : !selectionVerified ? "checking" : selectedSku ? "ready" : attributes.length ? "unavailable" : "not-purchasable";
 	const selectedImages = getImageUrls(selectedSku);
 	const images = [...new Set(selectedImages.length ? selectedImages : getImageUrls(group))];
-	const available = getAvailableInventoryQuantity(selectedSku);
-	const name = group?.label ?? group?.name ?? "Product";
-	const selectOption = (attribute, value) => {
+	const changeSelection = (key, value$1) => {
 		const next = new URLSearchParams(params);
-		if (value) next.set(`option.${attribute}`, value);
-		else next.delete(`option.${attribute}`);
+		if (value$1) next.set(key, value$1);
+		else next.delete(key);
 		setParams(next);
 		setQuantity(1);
 		setImageIndex(0);
 	};
-	if (product.isPending) return /* @__PURE__ */ jsx("p", {
-		role: "status",
-		children: "Loading product…"
+	const { register, has } = usePartRegistry();
+	const requiredControls = [...attributes.map((attribute) => `attribute:${attribute.name}`), ...skuOptions.length ? ["sku"] : []].join("\n");
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		const missing = requiredControls.split("\n").filter((control) => control && !has(control));
+		if (missing.length === 0) return;
+		console.warn(`[gd-commerce-storefront] No control for ${missing.map((control) => control === "sku" ? "the SKU option" : `"${control.slice(10)}"`).join(", ")} is rendered right now, so this product cannot be added to the cart until one is. Render <ProductDetailsOptions />, <ProductDetailsOption attribute='…' /> for each attribute, or <ProductDetailsPurchase />, or ignore this if the control mounts later.`);
+	}, [requiredControls, has]);
+	if (product.isPending) return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("p", {
+			role: "status",
+			children: "Loading product…"
+		})
 	});
 	if (product.isError && !productNotFound) return /* @__PURE__ */ jsxs("div", {
 		role: "alert",
+		className: partClass(className),
 		children: [
 			/* @__PURE__ */ jsx("h1", {
 				className: "text-2xl font-semibold",
@@ -1189,175 +1505,358 @@ function ProductDetailsContent({ productId }) {
 			})
 		]
 	});
-	if (productNotFound || !group) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
-		className: "text-2xl font-semibold",
-		children: "Product not found"
-	}), /* @__PURE__ */ jsx(Link, {
-		className: `${buttonClass} mt-4`,
-		to: config.catalogPath,
-		children: "Back to shop"
-	})] });
-	return /* @__PURE__ */ jsxs("article", { children: [/* @__PURE__ */ jsx(Link, {
-		className: "mb-8 inline-flex min-h-11 items-center text-sm text-inherit underline underline-offset-4 focus-visible:outline focus-visible:outline-2 sm:mb-10",
-		to: config.catalogPath,
-		children: "← Back to shop"
-	}), /* @__PURE__ */ jsxs("div", {
-		className: "grid items-start gap-8 lg:grid-cols-12 lg:gap-12",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 lg:col-span-7",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "aspect-square overflow-hidden rounded-lg",
-				children: /* @__PURE__ */ jsx(ProductImage, {
-					url: images[imageIndex] ?? images[0],
-					name
-				}, images[imageIndex] ?? images[0])
-			}), images.length > 1 && /* @__PURE__ */ jsx("div", {
-				className: "mt-4 flex gap-3 overflow-x-auto",
-				children: images.map((url, index) => /* @__PURE__ */ jsx("button", {
+	if (productNotFound || !group) return /* @__PURE__ */ jsxs("div", {
+		className: partClass(className),
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-2xl font-semibold",
+			children: "Product not found"
+		}), /* @__PURE__ */ jsx(Link, {
+			className: `${buttonClass} mt-4`,
+			to: config.catalogPath,
+			children: "Back to shop"
+		})]
+	});
+	const value = {
+		product: group,
+		name: getProductName(group),
+		selectedSku,
+		quantity,
+		availableQuantity: getAvailableInventoryQuantity(selectedSku),
+		status,
+		images,
+		attributes,
+		selections,
+		skuOptions,
+		explicitSkuId: explicitSku?.id ?? "",
+		price: selectedSku?.prices?.edges?.find((edge) => edge?.node?.value)?.node,
+		imageIndex: Math.min(imageIndex, Math.max(images.length - 1, 0)),
+		variantError: matched.error,
+		setImageIndex: (index) => {
+			if (Number.isInteger(index) && index >= 0 && index < images.length) setImageIndex(index);
+		},
+		setQuantity,
+		selectOption: (attribute, next) => changeSelection(`option.${attribute}`, next),
+		selectSku: (skuId) => changeSelection("sku", skuOptions.some((sku) => sku.id === skuId) ? skuId : ""),
+		retryVariant: () => {
+			if (matched.isError) matched.refetch();
+		},
+		register
+	};
+	return /* @__PURE__ */ jsx(ProductDetailsContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("article", {
+			className: partClass(className),
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/product-purchase.tsx
+const disabledReasons = {
+	incomplete: "Select all options to add this item to your cart.",
+	checking: "Checking this variant…",
+	"variant-error": "Availability for this selection could not be checked.",
+	unavailable: "This combination is unavailable. Choose different options.",
+	"not-purchasable": "This product is not currently available to purchase."
+};
+/** The packaged purchase area: options, status, availability, quantity, and add to cart. */
+function ProductDetailsPurchase({ className }) {
+	const { attributes, skuOptions } = useProductDetailsInternal("ProductDetailsPurchase");
+	const belowOptions = attributes.length || skuOptions.length ? "-mt-4" : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: partClass("space-y-6", className),
+		children: [
+			/* @__PURE__ */ jsx(OptionControls, {}),
+			/* @__PURE__ */ jsx(ProductDetailsPurchaseStatus, { className: belowOptions }),
+			/* @__PURE__ */ jsx(ProductDetailsAvailability, { className: belowOptions }),
+			/* @__PURE__ */ jsx(ProductDetailsQuantity, {}),
+			/* @__PURE__ */ jsx(ProductDetailsAddToCart, {})
+		]
+	});
+}
+/** A select for every product attribute, or the SKU list for products without attributes. */
+function ProductDetailsOptions({ className }) {
+	const { attributes, skuOptions } = useProductDetailsInternal("ProductDetailsOptions");
+	if (attributes.length === 0 && skuOptions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass("space-y-6", className),
+		children: /* @__PURE__ */ jsx(OptionControls, {})
+	});
+}
+function OptionControls() {
+	const { attributes, skuOptions } = useProductDetailsInternal("ProductDetailsOptions");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [attributes.map((attribute) => /* @__PURE__ */ jsx(ProductDetailsOption, { attribute: attribute.name }, attribute.id || attribute.name)), skuOptions.length > 0 && /* @__PURE__ */ jsx(SkuOption, {})] });
+}
+function Select({ children,...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("select", {
+			className: `${inputClass} w-full appearance-none pr-10`,
+			...props,
+			children
+		}), /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-600",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 6l4 4 4-4",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+}
+function SkuOption() {
+	const { skuOptions, explicitSkuId, selectSku } = useProductDetailsInternal("ProductDetailsOptions");
+	const id = useId();
+	useSkuOptionRegistration();
+	return /* @__PURE__ */ jsxs("div", {
+		className: partClass(),
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			className: "mb-2 block font-medium",
+			children: "Option"
+		}), /* @__PURE__ */ jsxs(Select, {
+			id,
+			value: explicitSkuId,
+			onChange: (event) => selectSku(event.target.value),
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: "Select an option"
+			}), skuOptions.map((sku) => /* @__PURE__ */ jsx("option", {
+				value: sku.id ?? "",
+				children: sku.label?.trim() || sku.name?.trim()
+			}, sku.id))]
+		})]
+	});
+}
+/** A select for one product attribute. Use `useProductDetailsOption` for swatches or other custom controls. */
+function ProductDetailsOption({ attribute, className }) {
+	const option = useProductDetailsOption(attribute);
+	if (!option) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", {
+			className: "mb-2 font-medium",
+			children: option.label
+		}), /* @__PURE__ */ jsxs(Select, {
+			"aria-label": option.label,
+			value: option.selected ?? "",
+			onChange: (event) => option.select(event.target.value || null),
+			children: [/* @__PURE__ */ jsxs("option", {
+				value: "",
+				children: ["Select ", option.label.toLowerCase()]
+			}), option.values.map((value) => /* @__PURE__ */ jsx("option", {
+				value: value.name,
+				children: value.label
+			}, value.name))]
+		})] })
+	});
+}
+/** The single message explaining why the selection is not yet purchasable. Renders nothing when ready. */
+function ProductDetailsPurchaseStatus({ className }) {
+	const { status, variantError, retryVariant } = useProductDetailsInternal("ProductDetailsPurchaseStatus");
+	let content;
+	switch (status) {
+		case "ready": return null;
+		case "variant-error":
+			content = /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "text-red-700",
+				children: [/* @__PURE__ */ jsx("p", { children: message(variantError) }), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: `h-20 w-20 shrink-0 overflow-hidden rounded-lg border-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${imageIndex === index ? "border-neutral-900" : "border-transparent"}`,
-					"aria-label": `View image ${index + 1}`,
-					"aria-pressed": imageIndex === index,
-					onClick: () => setImageIndex(index),
-					children: /* @__PURE__ */ jsx(ProductImage, {
-						url,
-						name: ""
-					})
-				}, url))
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
+					className: "min-h-11 bg-white text-red-700 underline",
+					onClick: retryVariant,
+					children: "Retry availability"
+				})]
+			});
+			break;
+		case "unavailable":
+			content = /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "text-sm text-red-700",
+				children: disabledReasons[status]
+			});
+			break;
+		case "not-purchasable":
+			content = /* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				children: disabledReasons[status]
+			});
+			break;
+		case "incomplete":
+		case "checking":
+			content = /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "text-sm",
+				children: disabledReasons[status]
+			});
+			break;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: content
+	});
+}
+/** Stock for the verified SKU. Renders nothing until a SKU is verified. */
+function ProductDetailsAvailability({ className }) {
+	const { selectedSku, availableQuantity } = useProductDetailsInternal("ProductDetailsAvailability");
+	if (!selectedSku) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			"aria-live": "polite",
+			children: availableQuantity === null ? "Available to order" : availableQuantity === 0 ? "This variant is out of stock" : `${availableQuantity} available`
+		})
+	});
+}
+/** Quantity for the verified SKU. Renders nothing until a SKU is verified. */
+function ProductDetailsQuantity({ className }) {
+	const { selectedSku, availableQuantity, quantity, setQuantity } = useProductDetailsInternal("ProductDetailsQuantity");
+	const id = useId();
+	if (!selectedSku) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: partClass(className),
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			className: "mb-2 block font-medium",
+			children: "Quantity"
+		}), /* @__PURE__ */ jsx("input", {
+			id,
+			type: "number",
+			min: 1,
+			max: availableQuantity ?? void 0,
+			step: 1,
+			className: `${inputClass} w-28`,
+			value: Number.isNaN(quantity) ? "" : quantity,
+			onChange: (event) => setQuantity(event.target.valueAsNumber)
+		})]
+	});
+}
+/** Adds the verified SKU and quantity. While disabled, its accessible description says why. */
+function ProductDetailsAddToCart({ className }) {
+	const { selectedSku, name, quantity, status } = useProductDetailsInternal("ProductDetailsAddToCart");
+	const reasonId = useId();
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: selectedSku ? /* @__PURE__ */ jsx(AddToCartButton, {
+			sku: selectedSku,
+			name,
+			quantity
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: `${buttonClass} w-full`,
+			disabled: true,
+			"aria-describedby": reasonId,
+			children: "Add to cart"
+		}), /* @__PURE__ */ jsx("span", {
+			id: reasonId,
+			hidden: true,
+			children: status === "ready" ? "" : disabledReasons[status]
+		})] })
+	});
+}
+
+//#endregion
+//#region src/product-details.tsx
+/** The packaged product page for `${productPath}/:productId`. Compose the parts for a custom layout. */
+function ProductDetails() {
+	return /* @__PURE__ */ jsxs(ProductDetailsRoot, { children: [/* @__PURE__ */ jsx(ProductDetailsBackLink, { className: "mb-8 sm:mb-10" }), /* @__PURE__ */ jsxs("div", {
+		className: "grid items-start gap-8 lg:grid-cols-12 lg:gap-12",
+		children: [/* @__PURE__ */ jsx(ProductDetailsGallery, { className: "min-w-0 lg:col-span-7" }), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 lg:col-span-5 lg:py-4",
 			children: [
-				/* @__PURE__ */ jsx("h1", {
-					className: "break-words text-4xl font-semibold leading-tight sm:text-5xl",
-					children: name
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					"aria-live": "polite",
-					className: "mt-6 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-2xl font-medium",
-					"data-testid": "product-price",
-					children: [skuPrice?.value?.value != null ? money(skuPrice.value.value, skuPrice.value.currencyCode ?? config.currencyCode) : group.priceRange?.min != null ? `From ${money(group.priceRange.min, config.currencyCode)}` : "Price unavailable", skuPrice?.compareAtValue?.value != null && skuPrice.value?.value != null && skuPrice.compareAtValue.value > skuPrice.value.value && /* @__PURE__ */ jsx("del", {
-						className: "text-lg font-normal",
-						children: money(skuPrice.compareAtValue.value, skuPrice.compareAtValue.currencyCode ?? config.currencyCode)
-					})]
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "my-8 whitespace-pre-line text-base leading-7",
-					children: selectedSku?.description ?? group.description
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "space-y-6 border-t border-neutral-200 pt-8",
-					children: [
-						attributes.map((attribute, index) => /* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", {
-							className: "mb-2 font-medium",
-							children: attribute.label
-						}), /* @__PURE__ */ jsxs("select", {
-							className: `${inputClass} w-full`,
-							"aria-label": attribute.label,
-							value: selections[index],
-							onChange: (event) => selectOption(attribute.name, event.target.value),
-							children: [/* @__PURE__ */ jsxs("option", {
-								value: "",
-								children: ["Select ", attribute.label.toLowerCase()]
-							}), attribute.values.map((value) => /* @__PURE__ */ jsx("option", {
-								value: value.name,
-								children: value.label
-							}, value.id || value.name))]
-						})] }, attribute.id || attribute.name)),
-						skuOptions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
-							htmlFor: `${fieldId}-sku-option`,
-							className: "mb-2 block font-medium",
-							children: "Option"
-						}), /* @__PURE__ */ jsxs("select", {
-							id: `${fieldId}-sku-option`,
-							className: `${inputClass} w-full`,
-							value: explicitSku?.id ?? "",
-							onChange: (event) => {
-								const next = new URLSearchParams(params);
-								if (event.target.value) next.set("sku", event.target.value);
-								else next.delete("sku");
-								setParams(next);
-								setQuantity(1);
-								setImageIndex(0);
-							},
-							children: [/* @__PURE__ */ jsx("option", {
-								value: "",
-								children: "Select an option"
-							}), skuOptions.map((sku) => /* @__PURE__ */ jsx("option", {
-								value: sku.id ?? "",
-								children: sku.label?.trim() || sku.name?.trim()
-							}, sku.id))]
-						})] }),
-						matched.isError ? /* @__PURE__ */ jsxs("div", {
-							role: "alert",
-							className: "text-red-700",
-							children: [/* @__PURE__ */ jsx("p", { children: message(matched.error) }), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "min-h-11 bg-white text-red-700 underline",
-								onClick: () => {
-									if (matched.isError) matched.refetch();
-								},
-								children: "Retry availability"
-							})]
-						}) : null,
-						!complete && /* @__PURE__ */ jsx("p", {
-							id: `${fieldId}-variant-guidance`,
-							role: "status",
-							className: "text-sm",
-							children: "Select all options to add this item to your cart."
-						}),
-						selectionVerified && attributes.length > 0 && !skuId && /* @__PURE__ */ jsx("p", {
-							role: "status",
-							className: "text-sm text-red-700",
-							children: "This combination is unavailable. Choose different options."
-						}),
-						selectionVerified && attributes.length === 0 && !skuId && /* @__PURE__ */ jsx("p", {
-							className: "text-sm",
-							children: "This product is not currently available to purchase."
-						}),
-						complete && (product.isFetching || matched.isFetching) && /* @__PURE__ */ jsx("p", {
-							role: "status",
-							children: "Checking this variant…"
-						}),
-						selectedSku && /* @__PURE__ */ jsxs(Fragment, { children: [
-							/* @__PURE__ */ jsx("p", {
-								className: "text-sm",
-								"aria-live": "polite",
-								children: available === null ? "Available to order" : available === 0 ? "This variant is out of stock" : `${available} available`
-							}),
-							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
-								htmlFor: `${fieldId}-quantity`,
-								className: "mb-2 block font-medium",
-								children: "Quantity"
-							}), /* @__PURE__ */ jsx("input", {
-								id: `${fieldId}-quantity`,
-								type: "number",
-								min: 1,
-								max: available ?? void 0,
-								step: 1,
-								className: `${inputClass} w-28`,
-								value: Number.isNaN(quantity) ? "" : quantity,
-								onChange: (event) => setQuantity(event.target.valueAsNumber)
-							})] }),
-							/* @__PURE__ */ jsx(AddToCartButton, {
-								sku: selectedSku,
-								name,
-								quantity
-							})
-						] }),
-						!selectedSku && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: `${buttonClass} w-full`,
-							disabled: true,
-							"aria-describedby": !complete ? `${fieldId}-variant-guidance` : void 0,
-							children: "Add to cart"
-						})
-					]
-				})
+				/* @__PURE__ */ jsx(ProductDetailsTitle, {}),
+				/* @__PURE__ */ jsx(ProductDetailsPrice, { className: "mt-6" }),
+				/* @__PURE__ */ jsx(ProductDetailsDescription, { className: "my-8" }),
+				/* @__PURE__ */ jsx(ProductDetailsPurchase, { className: "border-t border-neutral-200 pt-8" })
 			]
 		})]
 	})] });
 }
+function ProductDetailsBackLink({ className }) {
+	useProductDetailsInternal("ProductDetailsBackLink");
+	const { config } = useCommerce();
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx(Link, {
+			className: "inline-flex min-h-11 items-center text-sm text-inherit underline underline-offset-4 focus-visible:outline focus-visible:outline-2",
+			to: config.catalogPath,
+			children: "← Back to shop"
+		})
+	});
+}
+/** Main image with thumbnails; the selected SKU's images replace the product's when present. */
+function ProductDetailsGallery({ className }) {
+	const { images, imageIndex, setImageIndex, name } = useProductDetailsInternal("ProductDetailsGallery");
+	return /* @__PURE__ */ jsxs("div", {
+		className: partClass(className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "aspect-square overflow-hidden rounded-lg",
+			children: /* @__PURE__ */ jsx(ProductImage, {
+				url: images[imageIndex],
+				name
+			}, images[imageIndex])
+		}), images.length > 1 && /* @__PURE__ */ jsx("div", {
+			className: "mt-4 flex gap-3 overflow-x-auto",
+			children: images.map((url, index) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `h-20 w-20 shrink-0 overflow-hidden rounded-lg border-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${imageIndex === index ? "border-neutral-900" : "border-transparent"}`,
+				"aria-label": `View image ${index + 1}`,
+				"aria-pressed": imageIndex === index,
+				onClick: () => setImageIndex(index),
+				children: /* @__PURE__ */ jsx(ProductImage, {
+					url,
+					name: ""
+				})
+			}, url))
+		})]
+	});
+}
+/** The product name as the page's H1. */
+function ProductDetailsTitle({ className }) {
+	const { name } = useProductDetailsInternal("ProductDetailsTitle");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("h1", {
+			className: "break-words text-4xl font-semibold leading-tight sm:text-5xl",
+			children: name
+		})
+	});
+}
+/** The verified SKU's price and compare-at price, or the product's starting price. */
+function ProductDetailsPrice({ className }) {
+	const { price, product } = useProductDetailsInternal("ProductDetailsPrice");
+	const { config } = useCommerce();
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsxs("div", {
+			"aria-live": "polite",
+			className: "flex flex-wrap items-baseline gap-x-3 gap-y-1 text-2xl font-medium",
+			"data-testid": "product-price",
+			children: [price?.value?.value != null ? money(price.value.value, price.value.currencyCode ?? config.currencyCode) : product.priceRange?.min != null ? `From ${money(product.priceRange.min, config.currencyCode)}` : "Price unavailable", price?.compareAtValue?.value != null && price.value?.value != null && price.compareAtValue.value > price.value.value && /* @__PURE__ */ jsx("del", {
+				className: "text-lg font-normal",
+				children: money(price.compareAtValue.value, price.compareAtValue.currencyCode ?? config.currencyCode)
+			})]
+		})
+	});
+}
+/** The verified SKU's description, or the product's. */
+function ProductDetailsDescription({ className }) {
+	const { selectedSku, product } = useProductDetailsInternal("ProductDetailsDescription");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "whitespace-pre-line text-base leading-7",
+			children: selectedSku?.description ?? product.description
+		})
+	});
+}
 
 //#endregion
-export { AddToCartButton, ApiError, CartButton, CartDrawer, Catalog, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductDetails, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCommerce };
+export { AddToCartButton, ApiError, CartButton, CartDrawer, Catalog, CatalogHeader, CatalogPagination, CatalogProducts, CatalogRoot, CatalogSummary, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductCardAction, ProductCardDescription, ProductCardImage, ProductCardPrice, ProductCardRoot, ProductCardTitle, ProductDetails, ProductDetailsAddToCart, ProductDetailsAvailability, ProductDetailsBackLink, ProductDetailsDescription, ProductDetailsGallery, ProductDetailsOption, ProductDetailsOptions, ProductDetailsPrice, ProductDetailsPurchase, ProductDetailsPurchaseStatus, ProductDetailsQuantity, ProductDetailsRoot, ProductDetailsTitle, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCommerce, useProductCard, useProductDetails, useProductDetailsOption };