@godaddy/gd-commerce-storefront 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Link, useParams, useSearchParams } from "react-router";
+import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as Dialog from "@radix-ui/react-dialog";
+import { Link, useParams, useSearchParams } from "react-router";
 
 //#region src/api.ts
 var CartIdStorage = class {
@@ -98,57 +98,6 @@ function getCartSummaryTotals(order) {
 	};
 }
 
-//#endregion
-//#region src/catalog-model.ts
-function getSingleMatchedSku(skuGroup) {
-	const connection = skuGroup?.skus;
-	if (connection?.pageInfo?.hasNextPage || (connection?.totalCount ?? 0) > 1) return null;
-	const edges = connection?.edges ?? [];
-	const sku = edges.length === 1 ? edges[0]?.node : null;
-	return sku?.id ? sku : null;
-}
-function getLabeledSkuOptions(skuGroup) {
-	if (getProductAttributes(skuGroup).length > 0) return [];
-	const connection = skuGroup?.skus;
-	const edges = connection?.edges ?? [];
-	if (edges.length < 2 || connection?.pageInfo?.hasNextPage || (connection?.totalCount ?? edges.length) !== edges.length) return [];
-	const skus = edges.flatMap((edge) => edge?.node?.id && (edge.node.label?.trim() || edge.node.name?.trim()) ? [edge.node] : []);
-	const labels = new Set(skus.map((sku) => (sku.label?.trim() || sku.name?.trim() || "").toLowerCase()));
-	const ids = new Set(skus.map((sku) => sku.id));
-	return skus.length === edges.length && labels.size === skus.length && ids.size === skus.length ? skus : [];
-}
-function getAvailableInventoryQuantity(item) {
-	const edges = item?.inventoryCounts?.edges;
-	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) => 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;
-}
-function getProductAttributes(skuGroup) {
-	return skuGroup?.attributes?.edges?.map((edge) => {
-		const attributeNode = edge?.node;
-		const values = attributeNode?.values?.edges?.map((valueEdge) => {
-			const valueNode = valueEdge?.node;
-			return {
-				id: valueNode?.id || "",
-				name: valueNode?.name || "",
-				label: valueNode?.label || valueNode?.name || ""
-			};
-		}) ?? [];
-		return {
-			id: attributeNode?.id || "",
-			name: attributeNode?.name || "",
-			label: attributeNode?.label || attributeNode?.name || "",
-			values
-		};
-	}) ?? [];
-}
-
 //#endregion
 //#region src/sample-cart.tsx
 const sampleProducts = Array.from({ length: 6 }, (_, index) => ({
@@ -156,6 +105,7 @@ const sampleProducts = Array.from({ length: 6 }, (_, index) => ({
 	name: `Product ${index + 1}`,
 	price: (index + 1) * 1e3
 }));
+const noQuantities = {};
 const SampleCartContext = createContext(null);
 function useSampleCart() {
 	const value = useContext(SampleCartContext);
@@ -180,7 +130,11 @@ function SampleCartProvider({ enabled, onAdd, announce, children }) {
 			active.current = null;
 		};
 	}, [session]);
-	const quantities = state.session === session && enabled ? state.quantities : {};
+	const quantities = state.session === session && enabled ? state.quantities : noQuantities;
+	const items = useMemo(() => sampleProducts.flatMap((product) => quantities[product.key] ? [{
+		...product,
+		quantity: quantities[product.key]
+	}] : []), [quantities]);
 	function update(key, quantity) {
 		if (!enabled || active.current !== session || !sampleProducts.some((product) => product.key === key)) return false;
 		if (quantity !== void 0 && (!Number.isSafeInteger(quantity) || quantity < 0 || quantity > 999)) return false;
@@ -200,10 +154,7 @@ function SampleCartProvider({ enabled, onAdd, announce, children }) {
 	}
 	return /* @__PURE__ */ jsx(SampleCartContext.Provider, {
 		value: {
-			items: sampleProducts.flatMap((product) => quantities[product.key] ? [{
-				...product,
-				quantity: quantities[product.key]
-			}] : []),
+			items,
 			add: (key) => {
 				const product = sampleProducts.find((product$1) => product$1.key === key);
 				if (!product || !update(key)) return false;
@@ -228,6 +179,8 @@ function SampleCartProvider({ enabled, onAdd, announce, children }) {
 //#endregion
 //#region src/commerce-provider.tsx
 const CommerceContext = createContext(null);
+/** Lets a mounted cart drawer register itself, so adds open it only when one exists. Not public. */
+const CartDrawerRegistry = createContext(null);
 function useCommerce() {
 	const context = useContext(CommerceContext);
 	if (!context) throw new Error("Mount CommerceProvider once around the header and page outlet, inside the router.");
@@ -247,7 +200,7 @@ async function loadConfig(signal) {
 		currencyCode: config.currencyCode
 	};
 }
-function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {} }) {
+function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, onItemAdded }) {
 	const config = useQuery({
 		retry: false,
 		queryKey: ["commerce", "configuration"],
@@ -276,10 +229,11 @@ function CommerceProvider({ children, catalogPath = "/shop", productPath = "/pro
 			config.refetch();
 		},
 		theme,
+		onItemAdded,
 		children
 	});
 }
-function BoundCommerceProvider({ config, children, connection, connectionError, retryConnection, theme }) {
+function BoundCommerceProvider({ config, children, connection, connectionError, retryConnection, theme, onItemAdded }) {
 	const storageKey = `godaddy:commerce-storefront:cart:${config.cartScope}`;
 	const cartIdStorage = useMemo(() => new CartIdStorage(storageKey), [storageKey]);
 	const ready = connection === "ready";
@@ -303,6 +257,23 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	const queue = useRef(Promise.resolve(true));
 	const alive = useRef(true);
 	const opener = useRef(null);
+	const added = useRef(onItemAdded);
+	added.current = onItemAdded;
+	const drawers = useRef(0);
+	const registerDrawer = useCallback(() => {
+		drawers.current += 1;
+		if (process.env.NODE_ENV !== "production" && drawers.current === 2) console.warn("[gd-commerce-storefront] More than one cart drawer is mounted, so every add opens all of them. CommerceStorefront already mounts CartDrawer; use CommerceProvider to mount your own CartDrawerRoot.");
+		return () => {
+			drawers.current -= 1;
+			if (drawers.current === 0) setOpen(false);
+		};
+	}, []);
+	/** Opens the drawer for an add, if one is mounted. */
+	function openDrawer() {
+		if (drawers.current === 0) return;
+		rememberOpener();
+		setOpen(true);
+	}
 	function rememberOpener() {
 		opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 	}
@@ -432,7 +403,12 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			if (!isActive()) return;
 			commit(result.cart);
 			setAnnouncement(`${item.name} added to your cart.`);
-			setOpen(true);
+			openDrawer();
+			added.current?.({
+				name: item.name,
+				quantity: item.quantity,
+				isSample: false
+			});
 		});
 	}
 	function mutateItem(itemId, method, quantity) {
@@ -501,6 +477,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			cart,
 			open,
 			setOpen: (next) => {
+				if (next && drawers.current === 0) return;
 				if (next) rememberOpener();
 				setOpen(next);
 			},
@@ -519,15 +496,22 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			refresh,
 			checkout
 		},
-		children: [/* @__PURE__ */ jsx(SampleCartProvider, {
-			enabled: connection === "unbound",
-			announce: setAnnouncement,
-			onAdd: (name) => {
-				rememberOpener();
-				setAnnouncement(`${name} added to your sample cart.`);
-				setOpen(true);
-			},
-			children
+		children: [/* @__PURE__ */ jsx(CartDrawerRegistry.Provider, {
+			value: registerDrawer,
+			children: /* @__PURE__ */ jsx(SampleCartProvider, {
+				enabled: connection === "unbound",
+				announce: setAnnouncement,
+				onAdd: (name) => {
+					setAnnouncement(`${name} added to your sample cart.`);
+					openDrawer();
+					added.current?.({
+						name,
+						quantity: 1,
+						isSample: true
+					});
+				},
+				children
+			})
 		}), /* @__PURE__ */ jsx("span", {
 			className: "commerce-sr-only",
 			role: "status",
@@ -537,6 +521,117 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	});
 }
 
+//#endregion
+//#region src/cart-state.ts
+/** Read the cart from anywhere inside `CommerceProvider`, for example to build a custom cart button. */
+function useCart() {
+	const { cart, config, connection, hydrating } = useCommerce();
+	const sample = useSampleCart();
+	const isSample = connection === "unbound";
+	const sampleItems$1 = sample.items;
+	return useMemo(() => {
+		if (isSample) return {
+			items: sampleItems$1.map((item) => ({
+				id: item.key,
+				name: item.name,
+				quantity: item.quantity,
+				imageUrl: null,
+				options: [],
+				subtotal: item.price * item.quantity,
+				currency: "USD"
+			})),
+			itemCount: sampleItems$1.reduce((total, item) => total + item.quantity, 0),
+			subtotal: sampleItems$1.reduce((sum, item) => sum + item.price * item.quantity, 0),
+			currency: "USD",
+			isSample,
+			loading: false
+		};
+		const currency = cart?.totals?.total?.currencyCode ?? config.currencyCode;
+		const lines = cart?.lineItems ?? [];
+		const subtotal = cart?.totals?.subTotal?.value;
+		return {
+			items: lines.map((item) => ({
+				id: item.id ?? "",
+				name: item.name ?? "",
+				quantity: item.quantity ?? 0,
+				imageUrl: item.details?.productAssetUrl || null,
+				options: (item.details?.selectedOptions ?? []).map((option) => ({
+					attribute: option.attribute ?? "",
+					values: option.values ?? []
+				})),
+				subtotal: typeof item.totals?.subTotal?.value === "number" ? item.totals.subTotal.value : null,
+				currency: item.totals?.subTotal?.currencyCode ?? currency
+			})),
+			itemCount: lines.reduce((total, item) => total + (item.quantity ?? 0), 0),
+			subtotal: typeof subtotal === "number" ? subtotal : null,
+			currency: cart?.totals?.subTotal?.currencyCode ?? currency,
+			isSample,
+			loading: hydrating
+		};
+	}, [
+		cart,
+		config.currencyCode,
+		hydrating,
+		isSample,
+		sampleItems$1
+	]);
+}
+
+//#endregion
+//#region src/catalog-model.ts
+function getSingleMatchedSku(skuGroup) {
+	const connection = skuGroup?.skus;
+	if (connection?.pageInfo?.hasNextPage || (connection?.totalCount ?? 0) > 1) return null;
+	const edges = connection?.edges ?? [];
+	const sku = edges.length === 1 ? edges[0]?.node : null;
+	return sku?.id ? sku : null;
+}
+function getLabeledSkuOptions(skuGroup) {
+	if (getProductAttributes(skuGroup).length > 0) return [];
+	const connection = skuGroup?.skus;
+	const edges = connection?.edges ?? [];
+	if (edges.length < 2 || connection?.pageInfo?.hasNextPage || (connection?.totalCount ?? edges.length) !== edges.length) return [];
+	const skus = edges.flatMap((edge) => edge?.node?.id && (edge.node.label?.trim() || edge.node.name?.trim()) ? [edge.node] : []);
+	const labels = new Set(skus.map((sku) => (sku.label?.trim() || sku.name?.trim() || "").toLowerCase()));
+	const ids = new Set(skus.map((sku) => sku.id));
+	return skus.length === edges.length && labels.size === skus.length && ids.size === skus.length ? skus : [];
+}
+function getAvailableInventoryQuantity(item) {
+	const edges = item?.inventoryCounts?.edges;
+	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) => 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;
+}
+function getProductAttributes(skuGroup) {
+	return skuGroup?.attributes?.edges?.map((edge) => {
+		const attributeNode = edge?.node;
+		const values = attributeNode?.values?.edges?.map((valueEdge) => {
+			const valueNode = valueEdge?.node;
+			return {
+				id: valueNode?.id || "",
+				name: valueNode?.name || "",
+				label: valueNode?.label || valueNode?.name || ""
+			};
+		}) ?? [];
+		return {
+			id: attributeNode?.id || "",
+			name: attributeNode?.name || "",
+			label: attributeNode?.label || attributeNode?.name || "",
+			values
+		};
+	}) ?? [];
+}
+/** The product's display name: its label, then its name. */
+function getProductName(skuGroup) {
+	return skuGroup.label ?? skuGroup.name ?? "Product";
+}
+
 //#endregion
 //#region src/storefront-surface.tsx
 function StorefrontSurface({ children, className = "" }) {
@@ -572,9 +667,8 @@ function CommerceStatus() {
 const buttonClass = "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-commerce-accent px-5 py-2 text-sm font-semibold text-commerce-on-accent hover:bg-commerce-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-700 disabled:hover:bg-neutral-200";
 const inputClass = "min-h-11 rounded-lg border border-neutral-400 bg-white px-3 py-2 text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900";
 function CartButton() {
-	const { cart, setOpen, open, connection } = useCommerce();
-	const sample = useSampleCart();
-	const count = connection === "unbound" ? sample.items.reduce((total, item) => total + item.quantity, 0) : cart?.lineItems?.reduce((total, item) => total + (item.quantity ?? 0), 0) ?? 0;
+	const { setOpen, open, connection } = useCommerce();
+	const { itemCount } = useCart();
 	return /* @__PURE__ */ jsx(StorefrontSurface, {
 		className: "commerce-inline",
 		children: /* @__PURE__ */ jsxs("button", {
@@ -586,16 +680,32 @@ function CartButton() {
 			onClick: () => setOpen(true),
 			children: ["Cart ", /* @__PURE__ */ jsx("span", {
 				className: "rounded-full bg-white px-2 py-0.5 text-xs text-neutral-900",
-				children: count
+				children: itemCount
 			})]
 		})
 	});
 }
+/** Whether tracked stock is used up. Oversold SKUs report a negative count. */
+const isSoldOut = (available) => available !== null && available <= 0;
+/** Why `quantity` cannot be added, or `null` when it can. `available` is `null` when stock is not tracked. */
+function quantityProblem(quantity, available) {
+	if (!Number.isInteger(quantity) || quantity < 1) return "Enter a whole number of 1 or more.";
+	if (available !== null && available > 0 && quantity > available) return `Only ${available} available.`;
+	return null;
+}
 function AddToCartButton({ sku, name, quantity = 1 }) {
 	const { addItem, pending, hydrating, error, open, connection } = useCommerce();
 	const [adding, setAdding] = useState(false);
+	const reasonId = useId();
 	const available = getAvailableInventoryQuantity(sku);
-	const disabled = connection !== "ready" || !sku.id || adding || hydrating || available === 0 || !Number.isInteger(quantity) || quantity < 1 || available !== null && quantity > available;
+	const soldOut = isSoldOut(available);
+	let reason = null;
+	if (connection === "unbound") reason = "Connect a store to add items to the cart.";
+	else if (connection === "error") reason = "The store could not be reached.";
+	else if (connection !== "ready") reason = "Connecting to the store…";
+	else if (!sku.id) reason = "This item cannot be added to the cart.";
+	else if (!soldOut) reason = hydrating ? "Loading your cart…" : quantityProblem(quantity, available);
+	const disabled = adding || soldOut || reason !== null;
 	async function handleAdd() {
 		if (disabled || pending || !sku.id) return;
 		setAdding(true);
@@ -611,394 +721,907 @@ function AddToCartButton({ sku, name, quantity = 1 }) {
 	}
 	return /* @__PURE__ */ jsxs(StorefrontSurface, {
 		className: "commerce-inline",
-		children: [/* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: `${buttonClass} w-full`,
-			disabled,
-			"aria-disabled": disabled || pending,
-			"aria-busy": adding,
-			onClick: () => void handleAdd(),
-			children: available === 0 ? "Out of stock" : adding ? "Adding…" : "Add to cart"
-		}), error && !open && /* @__PURE__ */ jsx("p", {
-			role: "alert",
-			className: "mt-3 bg-white text-sm text-red-700",
-			children: error
-		})]
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `${buttonClass} w-full`,
+				disabled,
+				"aria-disabled": disabled || pending,
+				"aria-busy": adding,
+				"aria-describedby": reason ? reasonId : void 0,
+				onClick: () => void handleAdd(),
+				children: soldOut ? "Out of stock" : adding ? "Adding…" : "Add to cart"
+			}),
+			reason && /* @__PURE__ */ jsx("span", {
+				id: reasonId,
+				hidden: true,
+				children: reason
+			}),
+			error && !open && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-3 bg-white text-sm text-red-700",
+				children: error
+			})
+		]
 	});
 }
-function CartDrawer() {
-	const { config, connection, cart, open, setOpen, restoreFocus, pending, hydrating, error, storageWarning, changeQuantity: changeLiveQuantity, removeItem: removeLiveItem, refresh, checkout } = useCommerce();
+
+//#endregion
+//#region src/part.ts
+/** Whether `children` renders anything, so `{custom && <Part />}` with `custom` false falls back to the default. */
+const hasChildren = (children) => Children.toArray(children).some((child) => child !== "");
+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/cart-parts.tsx
+const CartContext = createContext(null);
+const CartDrawerContext = createContext(null);
+function useCartInternal(part) {
+	const context = useContext(CartContext);
+	if (!context) throw new Error(`${part} must be rendered inside <CartRoot> or <CartDrawerRoot>.`);
+	return context;
+}
+function CartProvider({ children }) {
+	const commerce = useCommerce();
 	const sample = useSampleCart();
+	const state = useCart();
+	const [action, setAction] = useState(null);
+	const locked = commerce.pending || commerce.hydrating || action !== null;
+	const value = {
+		...state,
+		hydrating: commerce.hydrating,
+		error: commerce.error,
+		storageWarning: commerce.storageWarning,
+		catalogPath: commerce.config.catalogPath,
+		checkoutEnabled: !!commerce.config.checkoutSuccessPath,
+		checkoutReady: commerce.cart?.totals?.total?.value != null,
+		action,
+		locked,
+		run: (next, operation) => {
+			if (locked) return;
+			setAction(next);
+			operation().finally(() => setAction(null));
+		},
+		changeQuantity: state.isSample ? sample.changeQuantity : commerce.changeQuantity,
+		removeItem: state.isSample ? sample.remove : commerce.removeItem,
+		refresh: commerce.refresh,
+		checkout: commerce.checkout,
+		close: () => commerce.setOpen(false)
+	};
+	return /* @__PURE__ */ jsx(CartContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Provides the cart to cart parts on a page, such as a `/cart` route. While no store is connected it shows the sample
+* cart. Use `CartDrawerRoot` for the drawer.
+*/
+function CartRoot({ children, className }) {
+	const { connection } = useCommerce();
 	const isSample = connection === "unbound";
-	const changeQuantity = isSample ? sample.changeQuantity : changeLiveQuantity;
-	const removeItem = isSample ? sample.remove : removeLiveItem;
-	const [drawerAction, setDrawerAction] = useState(null);
-	const checkingOut = drawerAction === "checkout";
-	const locked = pending || hydrating || drawerAction !== null;
-	const items = isSample ? sample.items.map((item) => ({
-		id: item.key,
-		name: item.name,
-		quantity: item.quantity,
-		image: void 0,
-		options: void 0,
-		subtotal: item.price * item.quantity,
-		currency: "USD"
-	})) : (cart?.lineItems ?? []).map((item) => ({
-		id: item.id,
-		name: item.name,
-		quantity: item.quantity,
-		image: item.details?.productAssetUrl,
-		options: item.details?.selectedOptions,
-		subtotal: item.totals?.subTotal?.value,
-		currency: item.totals?.subTotal?.currencyCode
-	}));
-	const summary = 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;
-	async function handleAction(action, operation) {
-		if (locked) return;
-		setDrawerAction(action);
-		try {
-			await operation();
-		} finally {
-			setDrawerAction(null);
-		}
-	}
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" || isSample ? /* @__PURE__ */ jsx(CartProvider, { children: /* @__PURE__ */ jsx("section", {
+		className: partClass(className),
+		"data-commerce-source": isSample ? "sample" : void 0,
+		children
+	}) }) : /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx(CommerceStatus, {})
+	}) });
+}
+/**
+* The cart dialog. Opens when an item is added or a `CartButton` is pressed, and returns focus when it closes.
+* The panel sits at the right edge at full height; `mr-auto` on it moves it to the left. Mount one per provider,
+* in place of `CartDrawer`.
+*/
+function CartDrawerRoot({ children, className }) {
+	const { open, setOpen, restoreFocus, connection } = useCommerce();
+	const registerDrawer = useContext(CartDrawerRegistry);
+	useEffect(() => registerDrawer?.(), [registerDrawer]);
+	const [described, setDescribed] = useState(false);
+	const { register, has } = usePartRegistry(useCallback((registered) => setDescribed(registered("description")), []));
+	useEffect(() => {
+		setDescribed(has("description"));
+	}, [has]);
+	const drawer = useMemo(() => ({ register }), [register]);
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange: setOpen,
-		children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(StorefrontSurface, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-neutral-950/40" }), /* @__PURE__ */ jsxs(Dialog.Content, {
-			"data-commerce-source": isSample ? "sample" : void 0,
-			className: "fixed inset-y-0 right-0 z-50 flex w-full max-w-lg flex-col bg-white text-neutral-900 shadow-xl",
-			onCloseAutoFocus: (event) => {
-				event.preventDefault();
-				restoreFocus();
-			},
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-start justify-between border-b border-neutral-200 p-6",
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Dialog.Title, {
-						className: "text-2xl font-semibold",
-						children: isSample ? "Sample cart" : "Your cart"
-					}), /* @__PURE__ */ jsx(Dialog.Description, {
-						className: "mt-1 text-sm text-neutral-600",
-						children: isSample ? "Example products and prices in USD. Nothing can be purchased." : "Review your items before checkout."
-					})] }), /* @__PURE__ */ jsx(Dialog.Close, {
-						className: "min-h-11 min-w-11 rounded-lg border border-neutral-400 bg-white px-3 text-neutral-900 focus-visible:outline focus-visible:outline-2",
-						"aria-label": "Close cart",
-						children: "✕"
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex-1 overflow-y-auto p-6",
-					children: [
-						storageWarning && /* @__PURE__ */ jsx("p", {
-							role: "status",
-							className: "mb-4 text-sm text-amber-800",
-							children: storageWarning
-						}),
-						error && /* @__PURE__ */ jsxs("div", {
-							role: "alert",
-							className: "mb-4 rounded-lg bg-red-50 p-4 text-red-800",
-							children: [/* @__PURE__ */ jsx("p", { children: error }), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "mt-2 min-h-11 bg-red-50 text-red-800 underline disabled:cursor-not-allowed",
-								disabled: drawerAction === "refresh",
-								"aria-disabled": locked,
-								"aria-busy": drawerAction === "refresh",
-								onClick: () => void handleAction("refresh", refresh),
-								children: "Refresh cart"
-							})]
-						}),
-						hydrating && /* @__PURE__ */ jsx("p", {
-							role: "status",
-							children: "Loading your cart…"
-						}),
-						!hydrating && !items.length && /* @__PURE__ */ jsxs("div", {
-							className: "py-16 text-center",
-							children: [
-								/* @__PURE__ */ jsx("p", {
-									className: "text-xl font-medium",
-									children: "Your cart is empty"
-								}),
-								/* @__PURE__ */ jsx("p", {
-									className: "mt-2 text-neutral-600",
-									children: isSample ? "Add a sample product to try the cart." : "Find something you love in the shop."
-								}),
-								/* @__PURE__ */ jsx(Link, {
-									className: `${buttonClass} mt-6`,
-									to: config.catalogPath,
-									onClick: () => setOpen(false),
-									children: "Browse products"
-								})
-							]
-						}),
-						/* @__PURE__ */ jsx("ul", {
-							className: "divide-y divide-neutral-200",
-							children: items.map((item) => /* @__PURE__ */ jsxs("li", {
-								className: "py-5 first:pt-0",
-								"data-testid": "cart-item",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "flex gap-4",
-									children: [item.image && /* @__PURE__ */ jsx("img", {
-										src: item.image,
-										alt: "",
-										className: "h-20 w-20 rounded-lg bg-neutral-100 object-cover"
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "min-w-0 flex-1",
-										children: [
-											/* @__PURE__ */ jsx("h3", {
-												className: "font-semibold",
-												children: item.name
-											}),
-											item.options?.map((option) => /* @__PURE__ */ jsxs("p", {
-												className: "text-sm text-neutral-600",
-												children: [
-													option.attribute,
-													": ",
-													option.values?.join(", ")
-												]
-											}, `${option.attribute}:${option.values?.join(",")}`)),
-											/* @__PURE__ */ jsx("p", {
-												className: "mt-1 text-sm",
-												children: typeof item.subtotal === "number" ? money(item.subtotal, item.currency ?? currency) : "Price unavailable"
-											})
-										]
-									})]
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "mt-4 flex items-center justify-between gap-2",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex items-center rounded-lg border border-neutral-300",
-										children: [
-											/* @__PURE__ */ jsx("button", {
-												type: "button",
-												className: "min-h-11 min-w-11 rounded-lg bg-white text-neutral-900 focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
-												"aria-label": `Decrease quantity of ${item.name}`,
-												disabled: drawerAction === `decrease:${item.id}` || !item.id || (item.quantity ?? 0) <= 1,
-												"aria-disabled": locked || !item.id || (item.quantity ?? 0) <= 1,
-												"aria-busy": drawerAction === `decrease:${item.id}`,
-												onClick: () => void handleAction(`decrease:${item.id}`, () => changeQuantity(item.id ?? "", (item.quantity ?? 1) - 1)),
-												children: "−"
-											}),
-											/* @__PURE__ */ jsxs("span", {
-												className: "min-w-8 text-center",
-												children: [/* @__PURE__ */ jsx("span", {
-													className: "sr-only",
-													children: "Quantity: "
-												}), item.quantity]
-											}),
-											/* @__PURE__ */ jsx("button", {
-												type: "button",
-												className: "min-h-11 min-w-11 rounded-lg bg-white text-neutral-900 focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
-												"aria-label": `Increase quantity of ${item.name}`,
-												disabled: drawerAction === `increase:${item.id}` || !item.id,
-												"aria-disabled": locked || !item.id,
-												"aria-busy": drawerAction === `increase:${item.id}`,
-												onClick: () => void handleAction(`increase:${item.id}`, () => changeQuantity(item.id ?? "", (item.quantity ?? 1) + 1)),
-												children: "+"
-											})
-										]
-									}), /* @__PURE__ */ jsx("button", {
-										type: "button",
-										className: "min-h-11 bg-white px-2 text-sm text-neutral-900 underline focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:text-neutral-600",
-										"aria-label": `Remove ${item.name}`,
-										disabled: drawerAction === `remove:${item.id}` || !item.id,
-										"aria-disabled": locked || !item.id,
-										"aria-busy": drawerAction === `remove:${item.id}`,
-										onClick: () => void handleAction(`remove:${item.id}`, () => removeItem(item.id ?? "")),
-										children: "Remove"
-									})]
-								})]
-							}, item.id))
-						})
-					]
-				}),
-				items.length > 0 && /* @__PURE__ */ jsxs("div", {
-					className: "border-t border-neutral-200 p-6",
-					children: [
-						/* @__PURE__ */ jsx("dl", {
-							className: "space-y-2 text-sm",
-							children: (isSample || typeof cart?.totals?.subTotal?.value === "number") && /* @__PURE__ */ jsxs("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ jsx("dt", { children: isSample ? "Sample subtotal" : "Subtotal" }), /* @__PURE__ */ jsx("dd", { children: money(subtotal, isSample ? "USD" : cart?.totals?.subTotal?.currencyCode ?? currency) })]
-							})
-						}),
-						!isSample && /* @__PURE__ */ jsx("p", {
-							className: "commerce-cart-checkout-adjustments-note mt-3 text-sm text-neutral-600",
-							children: "Shipping, taxes, and discounts are calculated at checkout."
-						}),
-						isSample ? /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-neutral-600",
-							children: "Example total in USD. Checkout is not set up yet."
-						}) : config.checkoutSuccessPath ? /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: `${buttonClass} w-full`,
-							disabled: checkingOut || hydrating || cart?.totals?.total?.value == null,
-							"aria-disabled": locked || cart?.totals?.total?.value == null,
-							"aria-busy": checkingOut,
-							onClick: () => void handleAction("checkout", checkout),
-							children: checkingOut ? "Opening checkout…" : "Proceed to Checkout"
-						}) : /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-neutral-600",
-							children: "Checkout is not available yet."
-						})
-					]
+		children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(StorefrontSurface, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-neutral-950/40" }), /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none fixed inset-0 z-50 flex justify-end",
+			children: /* @__PURE__ */ jsx(Dialog.Content, {
+				"data-commerce-source": connection === "unbound" ? "sample" : void 0,
+				...described ? {} : { "aria-describedby": void 0 },
+				className: partClass("pointer-events-auto", className),
+				onCloseAutoFocus: (event) => {
+					event.preventDefault();
+					restoreFocus();
+				},
+				children: /* @__PURE__ */ jsx(CartDrawerContext.Provider, {
+					value: drawer,
+					children: /* @__PURE__ */ jsx(CartProvider, { children })
 				})
-			]
+			})
 		})] }) })
 	});
 }
-
-//#endregion
-//#region src/catalog.tsx
-function ProductImage({ url, name, className = "" }) {
-	const [failed, setFailed] = useState(false);
-	return url && !failed ? /* @__PURE__ */ jsx("img", {
-		src: url,
-		alt: name,
-		loading: "lazy",
-		className: `h-full w-full object-cover ${className}`,
-		onError: () => setFailed(true)
-	}) : /* @__PURE__ */ jsx("div", {
-		className: `flex h-full min-h-44 items-center justify-center p-6 text-center ${className}`,
-		role: "img",
-		"aria-label": `${name}: image unavailable`,
-		children: "No image available"
+/** "Your cart", or "Sample cart" before a store is connected, as an H2. In the drawer it names the dialog. */
+function CartTitle({ className }) {
+	const { isSample } = useCartInternal("CartTitle");
+	const Heading = useContext(CartDrawerContext) ? Dialog.Title : "h2";
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx(Heading, {
+			className: "text-2xl font-semibold",
+			children: isSample ? "Sample cart" : "Your cart"
+		})
 	});
 }
-function ProductCard({ product }) {
-	return /* @__PURE__ */ jsx(StorefrontSurface, { children: /* @__PURE__ */ jsx(ProductCardContent, { product }) });
-}
-function ProductCardContent({ product }) {
-	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",
-			children: /* @__PURE__ */ jsx(ProductImage, {
-				url: getPrimaryImageUrl(product),
-				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"
-							})
-						})]
-					})
-				})
-			]
-		})]
+/** One line about the cart. In the drawer it describes the dialog. */
+function CartDescription({ className }) {
+	const { isSample } = useCartInternal("CartDescription");
+	const drawer = useContext(CartDrawerContext);
+	const register = drawer?.register;
+	useEffect(() => register?.("description"), [register]);
+	const text = isSample ? "Example products and prices in USD. Nothing can be purchased." : "Review your items before checkout.";
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: drawer ? /* @__PURE__ */ jsx(Dialog.Description, {
+			className: "text-sm text-neutral-600",
+			children: text
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-neutral-600",
+			children: text
+		})
 	});
 }
-function Catalog(props) {
-	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, {}) });
-}
-function CatalogContent({ title = "Shop all products", description = "Explore the collection and find your favorites.", showHeader = true }) {
-	const { config } = useCommerce();
-	const [params, setParams] = useSearchParams();
-	const after = params.get("after") ?? "";
-	const urlParams = new URLSearchParams({ first: "6" });
-	if (after) urlParams.set("after", after);
-	const products = useQuery({
-		retry: false,
-		queryKey: [
-			"commerce",
-			config.cartScope,
-			"products",
-			after
-		],
-		queryFn: ({ signal }) => request(`/products?${urlParams}`, {
-			signal,
-			headers: { "X-Commerce-Scope": config.cartScope }
+/** The drawer's close button. Renders nothing outside the drawer. */
+function CartClose({ className }) {
+	useCartInternal("CartClose");
+	if (!useContext(CartDrawerContext)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx(Dialog.Close, {
+			className: "min-h-11 min-w-11 rounded-lg border border-neutral-400 bg-white px-3 text-neutral-900 focus-visible:outline focus-visible:outline-2",
+			"aria-label": "Close cart",
+			children: "✕"
 		})
 	});
-	function goToPage(cursor) {
-		const next = new URLSearchParams(params);
-		if (cursor) next.set("after", cursor);
-		else next.delete("after");
-		setParams(next);
-	}
-	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
+}
+/** A storage warning, and a cart error with a refresh button. Renders nothing when there are neither. */
+function CartNotices({ className }) {
+	const { storageWarning, error, action, locked, run, refresh } = useCartInternal("CartNotices");
+	if (!storageWarning && !error) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [storageWarning && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "text-sm text-amber-800",
+				children: storageWarning
+			}), error && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "rounded-lg bg-red-50 p-4 text-red-800",
+				children: [/* @__PURE__ */ jsx("p", { children: error }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "mt-2 min-h-11 bg-red-50 text-red-800 underline disabled:cursor-not-allowed",
+					disabled: action === "refresh",
+					"aria-disabled": locked,
+					"aria-busy": action === "refresh",
+					onClick: () => run("refresh", refresh),
+					children: "Refresh cart"
+				})]
 			})]
-		}),
-		/* @__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"}`
+		})
+	});
+}
+const CartItemsContext = createContext(null);
+const CartItemsRegistry = createContext(null);
+const CartItemContext = createContext(null);
+function useCartItemInternal(part) {
+	const item = useContext(CartItemContext);
+	if (!item) throw new Error(`${part} must be rendered inside <CartItemRoot>.`);
+	return item;
+}
+/** Read the line from inside `CartItemRoot`, for custom item parts. */
+function useCartItem() {
+	return useCartItemInternal("useCartItem");
+}
+/**
+* The cart lines as a list. `className` goes on the list element whose children are the items. While the saved cart
+* loads, a status message renders just before it.
+*/
+function CartItems({ className, children }) {
+	const { items, hydrating } = useCartInternal("CartItems");
+	const template = hasChildren(children) ? children : packagedItem;
+	const registry = usePartRegistry();
+	const { has } = registry;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || items.length === 0 || has("item")) return;
+		console.warn("[gd-commerce-storefront] The <CartItems> template renders no <CartItemRoot>, so the cart list has no items. Wrap each line in <CartItemRoot>.");
+	}, [items.length, has]);
+	return /* @__PURE__ */ jsxs(CartItemsRegistry.Provider, {
+		value: registry.register,
+		children: [hydrating && /* @__PURE__ */ jsx("p", {
+			role: "status",
+			children: "Loading your cart…"
+		}), /* @__PURE__ */ jsx("div", {
+			role: "list",
+			className: partClass(className),
+			children: items.map((item, index) => /* @__PURE__ */ jsx(CartItemsContext.Provider, {
+				value: item,
+				children: template
+			}, item.id || `line-${index}`))
+		})]
+	});
+}
+/** One cart line. Render it as the child of `CartItems`, which renders it once for every line. */
+function CartItemRoot({ children, className }) {
+	const item = useContext(CartItemsContext);
+	const register = useContext(CartItemsRegistry);
+	useEffect(() => register?.("item"), [register]);
+	if (!item) throw new Error("CartItemRoot must be rendered inside <CartItems>.");
+	return /* @__PURE__ */ jsx(CartItemContext.Provider, {
+		value: item,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "listitem",
+			className: partClass(className),
+			"data-testid": "cart-item",
+			children: /* @__PURE__ */ jsx(CartItemsContext.Provider, {
+				value: null,
+				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",
+		})
+	});
+}
+/** The line's product image. Renders nothing without one. */
+function CartItemImage({ className }) {
+	const { imageUrl } = useCartItemInternal("CartItemImage");
+	if (!imageUrl) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("img", {
+			src: imageUrl,
+			alt: "",
+			className: "h-20 w-20 rounded-lg bg-neutral-100 object-cover"
+		})
+	});
+}
+/** The product name as an H3. */
+function CartItemName({ className }) {
+	const { name } = useCartItemInternal("CartItemName");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("h3", {
+			className: "font-semibold",
+			children: name
+		})
+	});
+}
+/** The selected options, one per line, such as "Color: Blue". Renders nothing without options. */
+function CartItemOptions({ className }) {
+	const { options } = useCartItemInternal("CartItemOptions");
+	if (!options.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: options.map((option) => /* @__PURE__ */ jsxs("p", {
+			className: "text-sm text-neutral-600",
 			children: [
-				0,
-				1,
-				2
-			].map((item) => /* @__PURE__ */ jsxs("div", {
-				className: "overflow-hidden rounded-lg border border-neutral-200 motion-safe:animate-pulse",
-				children: [/* @__PURE__ */ jsx("div", { className: "aspect-square bg-neutral-100" }), /* @__PURE__ */ jsxs("div", {
-					className: "space-y-4 p-6",
-					children: [
-						/* @__PURE__ */ jsx("div", { className: "h-6 w-2/3 rounded bg-neutral-100" }),
-						/* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-neutral-100" }),
-						/* @__PURE__ */ jsx("div", { className: "h-11 rounded bg-neutral-100" })
-					]
-				})]
-			}, item))
-		}),
-		products.isError && /* @__PURE__ */ jsxs("div", {
+				option.attribute,
+				": ",
+				option.values.join(", ")
+			]
+		}, `${option.attribute}:${option.values.join(",")}`))
+	});
+}
+/** The line total. */
+function CartItemPrice({ className }) {
+	const { subtotal, currency } = useCartItemInternal("CartItemPrice");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: subtotal === null ? "Price unavailable" : money(subtotal, currency)
+		})
+	});
+}
+const stepperButtonClass = "min-h-11 min-w-11 rounded-lg bg-white text-neutral-900 focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600";
+/** Decrease and increase buttons around the line's quantity. */
+function CartItemQuantity({ className }) {
+	const { id, name, quantity } = useCartItemInternal("CartItemQuantity");
+	const { action, locked, run, changeQuantity } = useCartInternal("CartItemQuantity");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center rounded-lg border border-neutral-300",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: stepperButtonClass,
+					"aria-label": `Decrease quantity of ${name}`,
+					disabled: action === `decrease:${id}` || !id || quantity <= 1,
+					"aria-disabled": locked || !id || quantity <= 1,
+					"aria-busy": action === `decrease:${id}`,
+					onClick: () => run(`decrease:${id}`, () => changeQuantity(id, quantity - 1)),
+					children: "−"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-8 text-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Quantity: "
+					}), quantity]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: stepperButtonClass,
+					"aria-label": `Increase quantity of ${name}`,
+					disabled: action === `increase:${id}` || !id,
+					"aria-disabled": locked || !id,
+					"aria-busy": action === `increase:${id}`,
+					onClick: () => run(`increase:${id}`, () => changeQuantity(id, quantity + 1)),
+					children: "+"
+				})
+			]
+		})
+	});
+}
+/** Removes the line. */
+function CartItemRemove({ className }) {
+	const { id, name } = useCartItemInternal("CartItemRemove");
+	const { action, locked, run, removeItem } = useCartInternal("CartItemRemove");
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "min-h-11 bg-white px-2 text-sm text-neutral-900 underline focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:text-neutral-600",
+			"aria-label": `Remove ${name}`,
+			disabled: action === `remove:${id}` || !id,
+			"aria-disabled": locked || !id,
+			"aria-busy": action === `remove:${id}`,
+			onClick: () => run(`remove:${id}`, () => removeItem(id)),
+			children: "Remove"
+		})
+	});
+}
+const packagedItem = /* @__PURE__ */ jsxs(CartItemRoot, {
+	className: "py-5 first:pt-0",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex gap-4",
+		children: [/* @__PURE__ */ jsx(CartItemImage, {}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx(CartItemName, {}),
+				/* @__PURE__ */ jsx(CartItemOptions, {}),
+				/* @__PURE__ */ jsx(CartItemPrice, { className: "mt-1" })
+			]
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "mt-4 flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx(CartItemQuantity, {}), /* @__PURE__ */ jsx(CartItemRemove, {})]
+	})]
+});
+/** Renders only when the cart is empty: a message and a link to the catalog, or its children. */
+function CartEmpty({ className, children }) {
+	const { items, hydrating, isSample, catalogPath, close } = useCartInternal("CartEmpty");
+	if (hydrating || items.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: hasChildren(children) ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xl font-medium",
+				children: "Your cart is empty"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-neutral-600",
+				children: isSample ? "Add a sample product to try the cart." : "Find something you love in the shop."
+			}),
+			/* @__PURE__ */ jsx(Link, {
+				className: `${buttonClass} mt-6`,
+				to: catalogPath,
+				onClick: close,
+				children: "Browse products"
+			})
+		] })
+	});
+}
+/** A container for the subtotal and checkout. Renders only when the cart has items. */
+function CartSummary({ className, children }) {
+	const { items } = useCartInternal("CartSummary");
+	if (!items.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children
+	});
+}
+/** The subtotal, labeled "Sample subtotal" for samples. Renders nothing until the server prices the cart. */
+function CartSubtotal({ className }) {
+	const { items, subtotal, currency, isSample } = useCartInternal("CartSubtotal");
+	if (!items.length || subtotal === null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx("dl", {
+			className: "space-y-2 text-sm",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between",
+				children: [/* @__PURE__ */ jsx("dt", { children: isSample ? "Sample subtotal" : "Subtotal" }), /* @__PURE__ */ jsx("dd", { children: money(subtotal, currency) })]
+			})
+		})
+	});
+}
+/**
+* "Shipping, taxes, and discounts are calculated at checkout." Has the stable
+* `commerce-cart-checkout-adjustments-note` class. Renders nothing for samples or an empty cart.
+*/
+function CartCheckoutNote({ className }) {
+	const { items, isSample } = useCartInternal("CartCheckoutNote");
+	if (isSample || !items.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass("commerce-cart-checkout-adjustments-note", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-neutral-600",
+			children: "Shipping, taxes, and discounts are calculated at checkout."
+		})
+	});
+}
+/**
+* The checkout button when `checkoutSuccessPath` is set; otherwise a message that checkout is unavailable.
+* Samples never check out. Renders nothing for an empty cart.
+*/
+function CartCheckout({ className }) {
+	const { items, isSample, checkoutEnabled, checkoutReady, hydrating, action, locked, run, checkout } = useCartInternal("CartCheckout");
+	if (!items.length) return null;
+	let content;
+	if (isSample) content = /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-neutral-600",
+		children: "Example total in USD. Checkout is not set up yet."
+	});
+	else if (!checkoutEnabled) content = /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-neutral-600",
+		children: "Checkout is not available yet."
+	});
+	else content = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `${buttonClass} w-full`,
+		disabled: action === "checkout" || hydrating || !checkoutReady,
+		"aria-disabled": locked || !checkoutReady,
+		"aria-busy": action === "checkout",
+		onClick: () => run("checkout", checkout),
+		children: action === "checkout" ? "Opening checkout…" : "Proceed to Checkout"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: content
+	});
+}
+/** The packaged cart drawer. Compose `CartDrawerRoot` and the cart parts for a custom drawer. */
+function CartDrawer() {
+	return /* @__PURE__ */ jsxs(CartDrawerRoot, {
+		className: "flex w-full max-w-lg flex-col bg-white text-neutral-900 shadow-xl",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between border-b border-neutral-200 p-6",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CartTitle, {}), /* @__PURE__ */ jsx(CartDescription, { className: "mt-1" })] }), /* @__PURE__ */ jsx(CartClose, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 overflow-y-auto p-6",
+				children: [
+					/* @__PURE__ */ jsx(CartNotices, { className: "mb-4" }),
+					/* @__PURE__ */ jsx(CartItems, { className: "divide-y divide-neutral-200" }),
+					/* @__PURE__ */ jsx(CartEmpty, { className: "py-16 text-center" })
+				]
+			}),
+			/* @__PURE__ */ jsxs(CartSummary, {
+				className: "border-t border-neutral-200 p-6",
+				children: [
+					/* @__PURE__ */ jsx(CartSubtotal, {}),
+					/* @__PURE__ */ jsx(CartCheckoutNote, { className: "mt-3" }),
+					/* @__PURE__ */ jsx(CartCheckout, {})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/product-card.tsx
+function ProductImage({ url, name, className = "" }) {
+	const [failed, setFailed] = useState(false);
+	return url && !failed ? /* @__PURE__ */ jsx("img", {
+		src: url,
+		alt: name,
+		loading: "lazy",
+		className: `h-full w-full object-cover ${className}`,
+		onError: () => setFailed(true)
+	}) : /* @__PURE__ */ jsx("div", {
+		className: `flex h-full min-h-44 items-center justify-center p-6 text-center ${className}`,
+		role: "img",
+		"aria-label": `${name}: image unavailable`,
+		children: "No image available"
+	});
+}
+/** 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
+	]);
+}
+/** 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 [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(card.product),
+				name: card.name,
+				className: "motion-safe:transition-transform motion-safe:duration-200 motion-safe:group-hover:scale-105"
+			})
+		}) : /* @__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, {})
+	});
+}
+
+//#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();
+	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 CatalogLoader({ children, className }) {
+	const { config } = useCommerce();
+	const [params, setParams] = useSearchParams();
+	const after = params.get("after") ?? "";
+	const urlParams = new URLSearchParams({ first: "6" });
+	if (after) urlParams.set("after", after);
+	const products = useQuery({
+		retry: false,
+		queryKey: [
+			"commerce",
+			config.cartScope,
+			"products",
+			after
+		],
+		queryFn: ({ signal }) => request(`/products?${urlParams}`, {
+			signal,
+			headers: { "X-Commerce-Scope": config.cartScope }
+		})
+	});
+	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 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. While loading, that
+* element holds placeholder cards. The error with its retry and the empty message render just before it.
+*/
+function CatalogProducts({ className, children }) {
+	const catalog = useCatalogInternal("CatalogProducts");
+	const card = hasChildren(children) ? 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?.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", {
@@ -1008,17 +1631,45 @@ 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: products?.isPending ? [
+				0,
+				1,
+				2
+			].map((placeholder) => /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "overflow-hidden rounded-lg border border-neutral-200 motion-safe:animate-pulse",
+				children: [/* @__PURE__ */ jsx("div", { className: "aspect-square bg-neutral-100" }), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-4 p-6",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "h-6 w-2/3 rounded bg-neutral-100" }),
+						/* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-neutral-100" }),
+						/* @__PURE__ */ jsx("div", { className: "h-11 rounded bg-neutral-100" })
+					]
+				})]
+			}, placeholder)) : 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,
@@ -1031,60 +1682,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" })
 		]
 	});
 }
@@ -1101,9 +1713,6 @@ function CommerceStorefront({ children,...props }) {
 
 //#endregion
 //#region src/product-details-context.tsx
-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);
 const ProductDetailsContext = createContext(null);
 function useProductDetailsInternal(part) {
 	const context = useContext(ProductDetailsContext);
@@ -1162,7 +1771,10 @@ function ProductDetailsRoot({ children, className }) {
 		productId,
 		className,
 		children
-	}, productId) : /* @__PURE__ */ jsx(CommerceStatus, {}) });
+	}, productId) : /* @__PURE__ */ jsx("div", {
+		className: partClass(className),
+		children: /* @__PURE__ */ jsx(CommerceStatus, {})
+	}) });
 }
 function ProductDetailsLoader({ productId, className, children }) {
 	const { config } = useCommerce();
@@ -1221,29 +1833,24 @@ function ProductDetailsLoader({ productId, className, children }) {
 		setQuantity(1);
 		setImageIndex(0);
 	};
-	const registered = useRef(/* @__PURE__ */ new Map());
-	const register = useCallback((control) => {
-		const counts = registered.current;
-		counts.set(control, (counts.get(control) ?? 0) + 1);
-		return () => {
-			const count = (counts.get(control) ?? 1) - 1;
-			if (count > 0) counts.set(control, count);
-			else counts.delete(control);
-		};
-	}, []);
+	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 && !registered.current.has(control));
+		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]);
-	if (product.isPending) return /* @__PURE__ */ jsx("p", {
-		role: "status",
-		children: "Loading product…"
+	}, [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",
@@ -1261,17 +1868,20 @@ function ProductDetailsLoader({ productId, className, children }) {
 			})
 		]
 	});
-	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"
-	})] });
+	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: group.label ?? group.name ?? "Product",
+		name: getProductName(group),
 		selectedSku,
 		quantity,
 		availableQuantity: getAvailableInventoryQuantity(selectedSku),
@@ -1313,16 +1923,16 @@ const disabledReasons = {
 	unavailable: "This combination is unavailable. Choose different options.",
 	"not-purchasable": "This product is not currently available to purchase."
 };
-const flush = "mb-0";
 /** The packaged purchase area: options, status, availability, quantity, and add to cart. */
 function ProductDetailsPurchase({ className }) {
-	useProductDetailsInternal("ProductDetailsPurchase");
+	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(PurchaseStatusMessage, { textClassName: flush }),
-			/* @__PURE__ */ jsx(ProductDetailsAvailability, { className: flush }),
+			/* @__PURE__ */ jsx(ProductDetailsPurchaseStatus, { className: belowOptions }),
+			/* @__PURE__ */ jsx(ProductDetailsAvailability, { className: belowOptions }),
 			/* @__PURE__ */ jsx(ProductDetailsQuantity, {}),
 			/* @__PURE__ */ jsx(ProductDetailsAddToCart, {})
 		]
@@ -1339,32 +1949,53 @@ function ProductDetailsOptions({ className }) {
 }
 function OptionControls() {
 	const { attributes, skuOptions } = useProductDetailsInternal("ProductDetailsOptions");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [attributes.map((attribute) => /* @__PURE__ */ jsx(ProductDetailsOption, {
-		attribute: attribute.name,
-		className: flush
-	}, attribute.id || attribute.name)), skuOptions.length > 0 && /* @__PURE__ */ jsx(SkuOption, {})] });
+	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", { children: [/* @__PURE__ */ jsx("label", {
-		htmlFor: id,
-		className: "mb-2 block font-medium",
-		children: "Option"
-	}), /* @__PURE__ */ jsxs("select", {
-		id,
-		className: `${inputClass} w-full`,
-		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))]
-	})] });
+	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 }) {
@@ -1375,8 +2006,7 @@ function ProductDetailsOption({ attribute, className }) {
 		children: /* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", {
 			className: "mb-2 font-medium",
 			children: option.label
-		}), /* @__PURE__ */ jsxs("select", {
-			className: `${inputClass} w-full`,
+		}), /* @__PURE__ */ jsxs(Select, {
 			"aria-label": option.label,
 			value: option.selected ?? "",
 			onChange: (event) => option.select(event.target.value || null),
@@ -1392,45 +2022,48 @@ function ProductDetailsOption({ attribute, className }) {
 }
 /** The single message explaining why the selection is not yet purchasable. Renders nothing when ready. */
 function ProductDetailsPurchaseStatus({ className }) {
-	return /* @__PURE__ */ jsx(PurchaseStatusMessage, { className });
-}
-function PurchaseStatusMessage({ className, textClassName }) {
 	const { status, variantError, retryVariant } = useProductDetailsInternal("ProductDetailsPurchaseStatus");
-	const part = (children, partClassName) => /* @__PURE__ */ jsx("div", {
-		className: partClass(partClassName, className),
-		children
-	});
+	let content;
 	switch (status) {
 		case "ready": return null;
-		case "variant-error": return part(/* @__PURE__ */ jsxs("div", {
-			role: "alert",
-			className: "text-red-700",
-			children: [/* @__PURE__ */ jsx("p", { children: message(variantError) }), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "min-h-11 bg-white text-red-700 underline",
-				onClick: retryVariant,
-				children: "Retry availability"
-			})]
-		}));
-		case "unavailable": return part(/* @__PURE__ */ jsx("p", {
-			role: "status",
-			className: "text-sm text-red-700",
-			children: disabledReasons[status]
-		}), textClassName);
-		case "not-purchasable": return part(/* @__PURE__ */ jsx("p", {
-			className: "text-sm",
-			children: disabledReasons[status]
-		}), textClassName);
-		case "checking": return part(/* @__PURE__ */ jsx("p", {
-			role: "status",
-			children: disabledReasons[status]
-		}), textClassName);
-		case "incomplete": return part(/* @__PURE__ */ jsx("p", {
-			role: "status",
-			className: "text-sm",
-			children: disabledReasons[status]
-		}), textClassName);
+		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: "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 }) {
@@ -1441,31 +2074,43 @@ function ProductDetailsAvailability({ 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`
+			children: availableQuantity === null ? "Available to order" : isSoldOut(availableQuantity) ? "This variant is out of stock" : `${availableQuantity} available`
 		})
 	});
 }
-/** Quantity for the verified SKU. Renders nothing until a SKU is verified. */
+/** Quantity for the verified SKU, with a message when it cannot be added. Renders nothing until a SKU is verified. */
 function ProductDetailsQuantity({ className }) {
 	const { selectedSku, availableQuantity, quantity, setQuantity } = useProductDetailsInternal("ProductDetailsQuantity");
 	const id = useId();
+	const problemId = useId();
 	if (!selectedSku) return null;
+	const problem = isSoldOut(availableQuantity) ? null : quantityProblem(quantity, availableQuantity);
 	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)
-		})]
+		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,
+				"aria-invalid": problem ? true : void 0,
+				"aria-describedby": problem ? problemId : void 0,
+				onChange: (event) => setQuantity(event.target.valueAsNumber)
+			}),
+			problem && /* @__PURE__ */ jsx("p", {
+				id: problemId,
+				className: "mt-2 text-sm text-red-700",
+				children: problem
+			})
+		]
 	});
 }
 /** Adds the verified SKU and quantity. While disabled, its accessible description says why. */
@@ -1563,14 +2208,17 @@ function ProductDetailsTitle({ className }) {
 function ProductDetailsPrice({ className }) {
 	const { price, product } = useProductDetailsInternal("ProductDetailsPrice");
 	const { config } = useCommerce();
-	return /* @__PURE__ */ jsxs("div", {
-		"aria-live": "polite",
-		className: partClass("flex flex-wrap items-baseline gap-x-3 gap-y-1 text-2xl font-medium", className),
-		"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)
-		})]
+	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. */
@@ -1586,4 +2234,4 @@ function ProductDetailsDescription({ className }) {
 }
 
 //#endregion
-export { AddToCartButton, ApiError, CartButton, CartDrawer, Catalog, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductDetails, ProductDetailsAddToCart, ProductDetailsAvailability, ProductDetailsBackLink, ProductDetailsDescription, ProductDetailsGallery, ProductDetailsOption, ProductDetailsOptions, ProductDetailsPrice, ProductDetailsPurchase, ProductDetailsPurchaseStatus, ProductDetailsQuantity, ProductDetailsRoot, ProductDetailsTitle, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCommerce, useProductDetails, useProductDetailsOption };
+export { AddToCartButton, ApiError, CartButton, CartCheckout, CartCheckoutNote, CartClose, CartDescription, CartDrawer, CartDrawerRoot, CartEmpty, CartItemImage, CartItemName, CartItemOptions, CartItemPrice, CartItemQuantity, CartItemRemove, CartItemRoot, CartItems, CartNotices, CartRoot, CartSubtotal, CartSummary, CartTitle, 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, useCart, useCartItem, useCommerce, useProductCard, useProductDetails, useProductDetailsOption };