@godaddy/gd-commerce-storefront 0.1.3 → 0.3.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 { 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;
@@ -148,6 +149,82 @@ function getProductAttributes(skuGroup) {
 	}) ?? [];
 }
 
+//#endregion
+//#region src/sample-cart.tsx
+const sampleProducts = Array.from({ length: 6 }, (_, index) => ({
+	key: `sample-${index + 1}`,
+	name: `Product ${index + 1}`,
+	price: (index + 1) * 1e3
+}));
+const SampleCartContext = createContext(null);
+function useSampleCart() {
+	const value = useContext(SampleCartContext);
+	if (!value) throw new Error("Mount CommerceProvider around sample products.");
+	return value;
+}
+function SampleCartProvider({ enabled, onAdd, announce, children }) {
+	const session = useMemo(() => ({ enabled }), [enabled]);
+	const active = useRef(session);
+	active.current = session;
+	const [state, setState] = useState({
+		session,
+		quantities: {}
+	});
+	useEffect(() => {
+		active.current = session;
+		setState({
+			session,
+			quantities: {}
+		});
+		return () => {
+			active.current = null;
+		};
+	}, [session]);
+	const quantities = state.session === session && enabled ? state.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;
+		setState((previous) => {
+			const current = previous.session === session ? previous.quantities : {};
+			const next = quantity ?? (current[key] ?? 0) + 1;
+			if (next > 999) return previous;
+			return {
+				session,
+				quantities: {
+					...current,
+					[key]: next
+				}
+			};
+		});
+		return true;
+	}
+	return /* @__PURE__ */ jsx(SampleCartContext.Provider, {
+		value: {
+			items: sampleProducts.flatMap((product) => quantities[product.key] ? [{
+				...product,
+				quantity: quantities[product.key]
+			}] : []),
+			add: (key) => {
+				const product = sampleProducts.find((product$1) => product$1.key === key);
+				if (!product || !update(key)) return false;
+				onAdd(product.name);
+				return true;
+			},
+			changeQuantity: async (key, quantity) => {
+				const updated = quantity >= 1 && update(key, quantity);
+				if (updated) announce("Sample cart quantity updated.");
+				return updated;
+			},
+			remove: async (key) => {
+				const updated = update(key, 0);
+				if (updated) announce("Sample item removed from cart.");
+				return updated;
+			}
+		},
+		children
+	});
+}
+
 //#endregion
 //#region src/commerce-provider.tsx
 const CommerceContext = createContext(null);
@@ -156,10 +233,19 @@ function useCommerce() {
 	if (!context) throw new Error("Mount CommerceProvider once around the header and page outlet, inside the router.");
 	return context;
 }
+const CONNECTING_FAILURE_GRACE_MS = 6e4;
 async function loadConfig(signal) {
 	const config = await request("/config", { signal });
-	if (!config || typeof config.cartScope !== "string" || !config.cartScope.trim() || typeof config.currencyCode !== "string" || !/^[A-Z]{3}$/.test(config.currencyCode)) throw new Error("The store returned invalid configuration.");
-	return config;
+	if (config?.state === "unbound" || config?.state === "connecting") {
+		if ("cartScope" in config || "currencyCode" in config) throw new Error("The store returned invalid configuration.");
+		return { state: config.state };
+	}
+	if (!config || config.state !== void 0 && config.state !== "ready" || typeof config.cartScope !== "string" || !config.cartScope.trim() || typeof config.currencyCode !== "string" || !/^[A-Z]{3}$/.test(config.currencyCode)) throw new Error("The store returned invalid configuration.");
+	return {
+		state: "ready",
+		cartScope: config.cartScope,
+		currencyCode: config.currencyCode
+	};
 }
 function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {} }) {
 	const config = useQuery({
@@ -167,19 +253,25 @@ function CommerceProvider({ children, catalogPath = "/shop", productPath = "/pro
 		queryKey: ["commerce", "configuration"],
 		queryFn: ({ signal }) => loadConfig(signal),
 		staleTime: 3e4,
-		refetchOnWindowFocus: true
+		refetchOnMount: "always",
+		refetchOnWindowFocus: "always",
+		refetchInterval: (query) => query.state.data?.state === "unbound" || query.state.data?.state === "connecting" ? 5e3 : false,
+		refetchIntervalInBackground: false
 	});
+	const holdConnecting = config.isError && config.data?.state === "connecting" && config.errorUpdatedAt - config.dataUpdatedAt < CONNECTING_FAILURE_GRACE_MS;
+	let connection = config.data?.state ?? "loading";
+	if (config.isError) connection = holdConnecting ? "connecting" : "error";
 	return /* @__PURE__ */ jsx(BoundCommerceProvider, {
 		config: {
 			cartScope: "",
 			currencyCode: "USD",
-			...config.data,
+			...config.data?.state === "ready" ? config.data : {},
 			catalogPath,
 			productPath,
 			checkoutSuccessPath
 		},
-		connection: config.isError ? "error" : config.data ? "ready" : "loading",
-		connectionError: config.isError ? message(config.error) : null,
+		connection,
+		connectionError: connection === "error" ? message(config.error) : null,
 		retryConnection: () => {
 			config.refetch();
 		},
@@ -193,8 +285,8 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	const ready = connection === "ready";
 	const session = useMemo(() => ({
 		cartIdStorage,
-		ready
-	}), [cartIdStorage, ready]);
+		connection
+	}), [cartIdStorage, connection]);
 	const currentSession = useRef(session);
 	currentSession.current = session;
 	const readyRef = useRef(ready);
@@ -299,6 +391,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		setOpen(false);
 		setError(null);
 		setStorageWarning(null);
+		setAnnouncement("");
 		setPending(false);
 		setHydrating(ready);
 		if (ready) refresh();
@@ -315,7 +408,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			window.removeEventListener("storage", onStorage);
 			window.removeEventListener("focus", onFocus);
 		};
-	}, [cartIdStorage, ready]);
+	}, [cartIdStorage, connection]);
 	function addItem(item) {
 		rememberOpener();
 		return run(async () => {
@@ -426,7 +519,16 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			refresh,
 			checkout
 		},
-		children: [children, /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(SampleCartProvider, {
+			enabled: connection === "unbound",
+			announce: setAnnouncement,
+			onAdd: (name) => {
+				rememberOpener();
+				setAnnouncement(`${name} added to your sample cart.`);
+				setOpen(true);
+			},
+			children
+		}), /* @__PURE__ */ jsx("span", {
 			className: "commerce-sr-only",
 			role: "status",
 			"aria-live": "polite",
@@ -448,7 +550,10 @@ function StorefrontSurface({ children, className = "" }) {
 function CommerceStatus() {
 	const { connection, connectionError, retryConnection } = useCommerce();
 	if (connection === "ready") return null;
-	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "loading" ? /* @__PURE__ */ jsx("p", {
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "unbound" ? /* @__PURE__ */ jsx("p", {
+		role: "status",
+		children: "Connect a store to show products."
+	}) : connection === "loading" || connection === "connecting" ? /* @__PURE__ */ jsx("p", {
 		role: "status",
 		children: "Connecting to the store…"
 	}) : /* @__PURE__ */ jsxs("div", {
@@ -468,13 +573,14 @@ const buttonClass = "inline-flex min-h-11 items-center justify-center gap-2 roun
 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 count = cart?.lineItems?.reduce((total, item) => total + (item.quantity ?? 0), 0) ?? 0;
+	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;
 	return /* @__PURE__ */ jsx(StorefrontSurface, {
 		className: "commerce-inline",
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: buttonClass,
-			disabled: connection !== "ready",
+			disabled: connection !== "ready" && connection !== "unbound",
 			"aria-haspopup": "dialog",
 			"aria-expanded": open,
 			onClick: () => setOpen(true),
@@ -521,13 +627,34 @@ function AddToCartButton({ sku, name, quantity = 1 }) {
 	});
 }
 function CartDrawer() {
-	const { config, cart, open, setOpen, restoreFocus, pending, hydrating, error, storageWarning, changeQuantity, removeItem, refresh, checkout } = useCommerce();
+	const { config, connection, cart, open, setOpen, restoreFocus, pending, hydrating, error, storageWarning, changeQuantity: changeLiveQuantity, removeItem: removeLiveItem, refresh, checkout } = useCommerce();
+	const sample = useSampleCart();
+	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 = cart?.lineItems ?? [];
+	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 = cart?.totals?.total?.currencyCode ?? config.currencyCode;
+	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);
@@ -541,6 +668,7 @@ function CartDrawer() {
 		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();
@@ -551,10 +679,10 @@ function CartDrawer() {
 					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: "Your cart"
+						children: isSample ? "Sample cart" : "Your cart"
 					}), /* @__PURE__ */ jsx(Dialog.Description, {
 						className: "mt-1 text-sm text-neutral-600",
-						children: "Review your items before checkout."
+						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",
@@ -595,7 +723,7 @@ function CartDrawer() {
 								}),
 								/* @__PURE__ */ jsx("p", {
 									className: "mt-2 text-neutral-600",
-									children: "Find something you love in the shop."
+									children: isSample ? "Add a sample product to try the cart." : "Find something you love in the shop."
 								}),
 								/* @__PURE__ */ jsx(Link, {
 									className: `${buttonClass} mt-6`,
@@ -612,8 +740,8 @@ function CartDrawer() {
 								"data-testid": "cart-item",
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "flex gap-4",
-									children: [item.details?.productAssetUrl && /* @__PURE__ */ jsx("img", {
-										src: item.details.productAssetUrl,
+									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", {
@@ -623,7 +751,7 @@ function CartDrawer() {
 												className: "font-semibold",
 												children: item.name
 											}),
-											item.details?.selectedOptions?.map((option) => /* @__PURE__ */ jsxs("p", {
+											item.options?.map((option) => /* @__PURE__ */ jsxs("p", {
 												className: "text-sm text-neutral-600",
 												children: [
 													option.attribute,
@@ -633,7 +761,7 @@ function CartDrawer() {
 											}, `${option.attribute}:${option.values?.join(",")}`)),
 											/* @__PURE__ */ jsx("p", {
 												className: "mt-1 text-sm",
-												children: typeof item.totals?.subTotal?.value === "number" ? money(item.totals.subTotal.value, item.totals.subTotal.currencyCode ?? currency) : "Price unavailable"
+												children: typeof item.subtotal === "number" ? money(item.subtotal, item.currency ?? currency) : "Price unavailable"
 											})
 										]
 									})]
@@ -690,16 +818,19 @@ function CartDrawer() {
 					children: [
 						/* @__PURE__ */ jsx("dl", {
 							className: "space-y-2 text-sm",
-							children: typeof cart?.totals?.subTotal?.value === "number" && /* @__PURE__ */ jsxs("div", {
+							children: (isSample || typeof cart?.totals?.subTotal?.value === "number") && /* @__PURE__ */ jsxs("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ jsx("dt", { children: "Subtotal" }), /* @__PURE__ */ jsx("dd", { children: money(summary.subtotal, cart.totals.subTotal.currencyCode ?? currency) })]
+								children: [/* @__PURE__ */ jsx("dt", { children: isSample ? "Sample subtotal" : "Subtotal" }), /* @__PURE__ */ jsx("dd", { children: money(subtotal, isSample ? "USD" : cart?.totals?.subTotal?.currencyCode ?? currency) })]
 							})
 						}),
-						/* @__PURE__ */ jsx("p", {
+						!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."
 						}),
-						config.checkoutSuccessPath ? /* @__PURE__ */ jsx("button", {
+						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,
@@ -800,7 +931,7 @@ function ProductCardContent({ product }) {
 }
 function Catalog(props) {
 	const { connection } = useCommerce();
-	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" ? /* @__PURE__ */ jsx(CatalogContent, { ...props }) : /* @__PURE__ */ jsx(CommerceStatus, {}) });
+	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();
@@ -902,6 +1033,61 @@ function CatalogContent({ title = "Shop all products", description = "Explore th
 		})
 	] });
 }
+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",
+		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"
+			}),
+			/* @__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))
+			})
+		]
+	});
+}
 
 //#endregion
 //#region src/commerce-storefront.tsx
@@ -914,15 +1100,72 @@ function CommerceStorefront({ children,...props }) {
 }
 
 //#endregion
-//#region src/product-details.tsx
-function ProductDetails() {
+//#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);
+	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(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);
@@ -945,10 +1188,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,
@@ -967,20 +1210,34 @@ 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);
 	};
+	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 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));
+		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…"
@@ -1012,167 +1269,321 @@ function ProductDetailsContent({ productId }) {
 		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", {
-					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))
+	const value = {
+		product: group,
+		name: group.label ?? group.name ?? "Product",
+		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."
+};
+const flush = "mb-0";
+/** The packaged purchase area: options, status, availability, quantity, and add to cart. */
+function ProductDetailsPurchase({ className }) {
+	useProductDetailsInternal("ProductDetailsPurchase");
+	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(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,
+		className: flush
+	}, attribute.id || attribute.name)), skuOptions.length > 0 && /* @__PURE__ */ jsx(SkuOption, {})] });
+}
+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))]
+	})] });
+}
+/** 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", {
+			className: `${inputClass} w-full`,
+			"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 }) {
+	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
+	});
+	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"
 			})]
-		}), /* @__PURE__ */ jsxs("div", {
+		}));
+		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);
+	}
+}
+/** 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__ */ 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)
+		})]
+	});
+}
+/** 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, 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 };