@godaddy/gd-commerce-storefront 0.9.0 → 0.11.0

package/dist/index.js

@@ -4,6 +4,190 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Link, useParams, useSearchParams } from "react-router";
 
+//#region src/messages.ts
+const englishText = {
+	connectPrompt: "Connect a store to show products.",
+	connecting: "Connecting to the store…",
+	retryConnection: "Retry connection",
+	connectionSlow: "The store is taking too long to connect.",
+	invalidConfiguration: "The store returned invalid configuration.",
+	requestFailed: "Commerce request failed. Please retry.",
+	requestFailedStatus: "Commerce request failed ({status}). Please retry.",
+	requestTimeout: "Commerce information took too long to load. Please retry.",
+	unknownError: "Something went wrong. Please retry.",
+	storageUnavailable: "Your browser cannot save the cart. Keep this page open while shopping.",
+	invalidAddItem: "Select a product variant and a positive quantity.",
+	addReturnedNoCart: "Commerce did not return a cart with items. Refresh before retrying.",
+	itemNotInCart: "This item is no longer in the cart.",
+	invalidQuantity: "Quantity must be a positive whole number.",
+	updateReturnedNoCart: "Commerce did not return the updated cart. Refresh before retrying.",
+	discountMissing: "Add an item and enter a promotion code.",
+	discountReturnedNoCart: "Commerce did not return the updated cart.",
+	checkoutDisabled: "Checkout has not been enabled for this store.",
+	checkoutEmpty: "Add an item before checking out.",
+	checkoutNoUrl: "Commerce did not return a checkout URL.",
+	checkoutInvalidUrl: "Commerce returned an invalid checkout URL.",
+	itemAdded: "{name} added to your cart.",
+	sampleItemAdded: "{name} added to your sample cart.",
+	itemRemoved: "Item removed from cart.",
+	quantityUpdated: "Cart quantity updated.",
+	discountsUpdated: "Promotion codes updated.",
+	sampleQuantityUpdated: "Sample cart quantity updated.",
+	sampleItemRemoved: "Sample item removed from cart.",
+	cartButtonLabel: {
+		one: "Cart, {count} item",
+		other: "Cart, {count} items"
+	},
+	addToCart: "Add to cart",
+	addToCartWithPrice: "Add to cart · {price}",
+	addToCartWithPriceName: "Add to cart, {price}",
+	adding: "Adding…",
+	outOfStock: "Out of stock",
+	addReasonUnbound: "Connect a store to add items to the cart.",
+	addReasonError: "The store could not be reached.",
+	addReasonNoSku: "This item cannot be added to the cart.",
+	loadingCart: "Loading your cart…",
+	quantityNotWhole: "Enter a whole number of 1 or more.",
+	quantityOverStock: "Only {count} available.",
+	cartTitle: "Your cart",
+	sampleCartTitle: "Sample cart",
+	cartDescription: "Review your items before checkout.",
+	sampleCartDescription: "Example products and prices in {currency}. Nothing can be purchased.",
+	closeCart: "Close cart",
+	refreshCart: "Refresh cart",
+	priceUnavailable: "Price unavailable",
+	decreaseQuantity: "Decrease quantity of {name}",
+	increaseQuantity: "Increase quantity of {name}",
+	quantityPrefix: "Quantity: ",
+	remove: "Remove",
+	itemOption: "{attribute}: {values}",
+	cartEmpty: "Your cart is empty",
+	cartEmptyHint: "Add something you love and it will show up here.",
+	sampleCartEmptyHint: "Add a sample product to try the cart.",
+	browseProducts: "Browse products",
+	subtotal: "Subtotal",
+	sampleSubtotal: "Sample subtotal",
+	checkoutAdjustments: "Shipping, taxes & discounts",
+	checkoutAdjustmentsValue: "Calculated at checkout",
+	sampleCheckoutNote: "Example total in {currency}. Checkout is not set up yet.",
+	checkoutUnavailable: "Checkout is not available yet.",
+	checkout: "Proceed to checkout",
+	openingCheckout: "Opening checkout…",
+	continueShopping: "Continue shopping",
+	catalogTitle: "Shop all products",
+	catalogDescription: "Explore the collection and find your favorites.",
+	sampleCatalogSummary: "Sample products · Example prices in {currency}",
+	loadingProducts: "Loading products…",
+	productsUnavailable: "Products unavailable",
+	productCount: {
+		one: "Showing {count} product",
+		other: "Showing {count} products"
+	},
+	retryProducts: "Retry products",
+	noProducts: "No products available.",
+	productPages: "Product pages",
+	firstPage: "First page",
+	nextPage: "Next page",
+	sampleProductName: "Product {number}",
+	relatedTitle: "You may also like",
+	imageUnavailable: "{name}: image unavailable",
+	noImage: "No image available",
+	sale: "Sale",
+	wasPrice: "Was",
+	swatchSummary: {
+		one: "{count} {attribute} option: {values}",
+		other: "{count} {attribute} options: {values}"
+	},
+	chooseOptions: "Choose options",
+	viewProduct: "View product",
+	addSampleToCart: "Add {name} to sample cart",
+	sampleItemName: "({name}, sample)",
+	loadingProduct: "Loading product…",
+	productUnavailable: "Product unavailable",
+	retryProduct: "Retry product",
+	productNotFound: "Product not found",
+	backToShop: "Back to shop",
+	viewImage: "View image {number}",
+	priceFrom: "From {price}",
+	selectAllOptions: "Select all options to add this item to your cart.",
+	checkingVariant: "Checking this variant…",
+	variantCheckFailed: "Availability for this selection could not be checked.",
+	combinationUnavailable: "This combination is unavailable. Choose different options.",
+	notPurchasable: "This product is not currently available to purchase.",
+	selectAttribute: "Select {attribute}",
+	selectAttributeError: "Select {attribute}.",
+	selectOption: "Select an option",
+	skuOptionLabel: "Option",
+	soldOutOption: "{label} (sold out)",
+	soldOutChoice: "{label}, sold out",
+	retryAvailability: "Retry availability",
+	availableToOrder: "Available to order",
+	variantOutOfStock: "This variant is out of stock",
+	availableCount: "{count} available",
+	quantity: "Quantity"
+};
+/** The package's English text, the default for every key a site does not set. */
+const enUS = {
+	locale: "en-US",
+	errorCodes: {},
+	...englishText
+};
+/** `key` from `messages`, with its plural form chosen by `values.count` and its placeholders filled in. */
+function formatMessage(messages, key, values = {}) {
+	return (pickText(messages[key], values.count, messages.locale) ?? pickText(enUS[key], values.count, enUS.locale) ?? key).replace(/\{(\w+)\}/g, (placeholder, name) => {
+		const value = values[name];
+		if (value === void 0) return placeholder;
+		return typeof value === "number" ? numberFormat(messages.locale).format(value) : value;
+	});
+}
+function pickText(message, count, locale) {
+	if (typeof message === "string") return message;
+	if (typeof message !== "object" || message === null) return void 0;
+	const forms = message;
+	const form = typeof count === "number" ? pluralRules(locale).select(count) : void 0;
+	const chosen = form && forms[form];
+	if (typeof chosen === "string" && chosen) return chosen;
+	return typeof forms.other === "string" ? forms.other : void 0;
+}
+/** Whether the text is English, the language of the server's own error messages. */
+const isEnglish = (messages) => /^en(?:-|$)/i.test(messages.locale);
+/** An error whose text is a package message, so it shows in the provider's language. */
+var StorefrontError = class extends Error {
+	constructor(key, values = {}, options) {
+		super(formatMessage(enUS, key, values), options);
+		this.key = key;
+		this.values = values;
+		this.name = "StorefrontError";
+	}
+};
+const pluralRulesCache = /* @__PURE__ */ new Map();
+const numberFormatCache = /* @__PURE__ */ new Map();
+function pluralRules(locale) {
+	let rules = pluralRulesCache.get(locale);
+	if (!rules) {
+		rules = new Intl.PluralRules(safeLocale(locale));
+		pluralRulesCache.set(locale, rules);
+	}
+	return rules;
+}
+function numberFormat(locale) {
+	let format = numberFormatCache.get(locale);
+	if (!format) {
+		format = new Intl.NumberFormat(safeLocale(locale));
+		numberFormatCache.set(locale, format);
+	}
+	return format;
+}
+/** `locale`, or `en-US` when it is not a valid tag, so a typo in a message file cannot break rendering. */
+function safeLocale(locale) {
+	try {
+		return Intl.getCanonicalLocales(locale)[0] ?? "en-US";
+	} catch {
+		return "en-US";
+	}
+}
+
+//#endregion
 //#region src/api.ts
 var CartIdStorage = class {
 	currentId = null;
@@ -24,9 +208,15 @@ var CartIdStorage = class {
 	}
 };
 var ApiError = class extends Error {
-	constructor(message$1, status, options) {
-		super(message$1, options);
+	/** The failure response's `code`, such as `not_found`, when the server sent one. */
+	code;
+	/** Package text to show in place of `message`, for failures the package describes itself. */
+	text;
+	constructor(message, status, options) {
+		super(message, options);
 		this.status = status;
+		this.code = options?.code;
+		this.text = options?.text;
 	}
 };
 const checkedFetch = async (input, init) => {
@@ -37,10 +227,23 @@ const checkedFetch = async (input, init) => {
 			try {
 				return JSON.parse(data);
 			} catch (cause) {
-				throw new ApiError(`Commerce request failed (${response.status}). Please retry.`, response.status, { cause });
+				const text = {
+					key: "requestFailedStatus",
+					values: { status: response.status }
+				};
+				throw new ApiError(formatMessage(enUS, text.key, text.values), response.status, {
+					cause,
+					text
+				});
 			}
 		})();
-		throw new ApiError(typeof parsed === "object" && parsed !== null && "error" in parsed && typeof parsed.error === "string" ? parsed.error : "Commerce request failed. Please retry.", response.status);
+		const body = typeof parsed === "object" && parsed !== null ? { ...parsed } : {};
+		const code = typeof body.code === "string" ? body.code : void 0;
+		if (typeof body.error === "string") throw new ApiError(body.error, response.status, { code });
+		throw new ApiError(formatMessage(enUS, "requestFailed"), response.status, {
+			code,
+			text: { key: "requestFailed" }
+		});
 	}
 	return response;
 };
@@ -57,22 +260,65 @@ async function request(path, init) {
 			cache: "no-store"
 		})).json();
 	} catch (cause) {
-		if (timeout?.aborted && !init?.signal?.aborted) throw new ApiError("Commerce information took too long to load. Please retry.", 408, { cause });
+		if (timeout?.aborted && !init?.signal?.aborted) throw new ApiError(formatMessage(enUS, "requestTimeout"), 408, {
+			cause,
+			text: { key: "requestTimeout" }
+		});
 		throw cause;
 	}
 }
+const currencyFormats = /* @__PURE__ */ new Map();
+/** A page uses a few pairs; the limit bounds a long-running server rendering many locales and currencies. */
+const maxCurrencyFormats = 64;
+function currencyFormat(currency, locale) {
+	const key = `${locale}|${currency}`;
+	let cached = currencyFormats.get(key);
+	if (!cached) {
+		const format = new Intl.NumberFormat(locale, {
+			style: "currency",
+			currency
+		});
+		cached = {
+			format,
+			scale: 10 ** (format.resolvedOptions().maximumFractionDigits ?? 2)
+		};
+		if (currencyFormats.size >= maxCurrencyFormats) currencyFormats.delete(currencyFormats.keys().next().value ?? "");
+		currencyFormats.set(key, cached);
+	}
+	return cached;
+}
 /** Formats minor units, such as cents, as currency. Inside the provider, prefer `useMoney`, which follows its `locale`. */
 function money(value, currency, locale = "en-US") {
-	const formatter = new Intl.NumberFormat(locale, {
-		style: "currency",
-		currency
-	});
-	const digits = formatter.resolvedOptions().maximumFractionDigits ?? 2;
-	return formatter.format(value / 10 ** digits);
+	const { format, scale } = currencyFormat(currency, locale);
+	return format.format(value / scale);
 }
-function message(error) {
-	return error instanceof Error ? error.message : "Something went wrong. Please retry.";
+/** Formats a range of minor units the way `locale` writes ranges, such as `$20.00 – $25.00` or `20,00–25,00 €`. */
+function moneyRange(min, max, currency, locale = "en-US") {
+	const { format, scale } = currencyFormat(currency, locale);
+	if (min === max) return format.format(min / scale);
+	try {
+		if (typeof format.formatRange === "function") return format.formatRange(min / scale, max / scale);
+	} catch {}
+	return `${format.format(min / scale)} – ${format.format(max / scale)}`;
 }
+/**
+* The text to show for a failure, in the language of `messages`. Server messages are English, so other languages
+* show the text for the response's `code`, or a generic message.
+*/
+function describeError(error, messages) {
+	const codes = messages.errorCodes;
+	const coded = error instanceof ApiError && error.code && codes && Object.hasOwn(codes, error.code) ? codes[error.code] : void 0;
+	if (typeof coded === "string" && coded) return coded;
+	const text = error instanceof StorefrontError || error instanceof ApiError ? textOf(error) : void 0;
+	if (text) return formatMessage(messages, text.key, text.values);
+	if (error instanceof ApiError) return isEnglish(messages) ? error.message : formatMessage(messages, "requestFailed");
+	if (error instanceof Error && isEnglish(messages)) return error.message;
+	return formatMessage(messages, "unknownError");
+}
+const textOf = (error) => error instanceof StorefrontError ? {
+	key: error.key,
+	values: error.values
+} : error.text;
 
 //#endregion
 //#region src/cart-model.ts
@@ -85,9 +331,10 @@ async function addToCart(cartId, item, fetchFn = globalThis.fetch) {
 		body: JSON.stringify(body)
 	})).json();
 }
-function getCartSummaryTotals(order) {
+/** The cart's totals in minor units. `currencyCode` is the cart's, or `fallbackCurrency`, such as the store's. */
+function getCartSummaryTotals(order, fallbackCurrency = "USD") {
 	const lineItems = order?.lineItems ?? [];
-	const currencyCode = order?.totals?.total?.currencyCode || "USD";
+	const currencyCode = order?.totals?.total?.currencyCode || fallbackCurrency;
 	return {
 		itemCount: lineItems.reduce((sum, item) => sum + (item.quantity || 0), 0),
 		currencyCode,
@@ -101,54 +348,130 @@ function getCartSummaryTotals(order) {
 
 //#endregion
 //#region src/sample-cart.tsx
-const sampleProducts = Array.from({ length: 6 }, (_, index) => ({
+/** The six packaged samples, "Product 1" to "Product 6", without images. */
+const builtInSamples = Array.from({ length: 6 }, (_, index) => ({
 	key: `sample-${index + 1}`,
 	name: `Product ${index + 1}`,
 	price: (index + 1) * 1e3
 }));
-const noQuantities = {};
+const builtInNumbers = new Map(builtInSamples.map((sample, index) => [sample.key, index + 1]));
+const builtInNumber = (sample) => builtInNumbers.get(sample.key);
+const isBuiltInSample = (sample) => builtInNumber(sample) !== void 0;
+/** Sample prices are examples, in this currency whatever the store's. */
+const sampleCurrency = "USD";
+/** A sample's name. Packaged samples are named in the provider's language, such as "Product 1". */
+const sampleName = (text, sample) => {
+	const number = builtInNumber(sample);
+	return number === void 0 ? sample.name : text("sampleProductName", { number });
+};
+const validPrice = (price) => Number.isSafeInteger(price) && price >= 0;
+/** The first reason host samples could not be shown or added consistently, or `null` when they can. */
+function sampleProblem(samples) {
+	if (!samples.length) return "CatalogRoot sampleProducts needs at least one product, or `true`.";
+	const keys = /* @__PURE__ */ new Set();
+	for (const [index, sample] of samples.entries()) {
+		if (typeof sample !== "object" || sample === null) return `CatalogRoot sampleProducts: entry ${index} is ${String(sample)}, not a sample.`;
+		if (typeof sample.key !== "string" || !sample.key || keys.has(sample.key)) return `CatalogRoot sampleProducts need unique, non-empty string keys, not "${String(sample.key)}".`;
+		if (builtInNumbers.has(sample.key)) return `CatalogRoot sampleProducts: "${sample.key}" is a packaged sample's key. Use another key.`;
+		keys.add(sample.key);
+		if (typeof sample.name !== "string" || !sample.name.trim()) return `CatalogRoot sampleProducts: "${sample.key}" needs a non-empty name.`;
+		for (const field of ["description", "imageUrl"]) if (sample[field] !== void 0 && typeof sample[field] !== "string") return `CatalogRoot sampleProducts: "${sample.key}" has a ${field} that is not a string.`;
+		for (const field of ["price", "compareAtPrice"]) {
+			const value = sample[field];
+			if ((field === "price" || value !== void 0) && !validPrice(value)) return `CatalogRoot sampleProducts: "${sample.key}" has an invalid ${field}, ${String(value)}. A price must be a whole number of minor units, 0 or more.`;
+		}
+	}
+	return null;
+}
+const sameSample = (a, b) => {
+	if (a === b) return true;
+	if (typeof a !== "object" || !a || typeof b !== "object" || !b) return false;
+	const fields = Object.keys(a);
+	return fields.length === Object.keys(b).length && fields.every((field) => Object.is(a[field], b[field]));
+};
+/** Whether two sample lists have the same samples with the same field values, so an inline list can be reused. */
+const sameSamples = (a, b) => a === b || a.length === b.length && a.every((sample, index) => sameSample(sample, b[index]));
+const noLines = [];
 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, emit, children }) {
+function SampleCartProvider({ enabled, messages, onAdd, announce, emit, children }) {
+	const text = useCallback((key, values) => formatMessage(messages, key, values), [messages]);
 	const session = useMemo(() => ({ enabled }), [enabled]);
 	const active = useRef(session);
 	active.current = session;
 	const [state, setState] = useState({
 		session,
-		quantities: {}
+		lines: noLines
 	});
 	useEffect(() => {
 		active.current = session;
 		setState({
 			session,
-			quantities: {}
+			lines: noLines
 		});
 		return () => {
 			active.current = null;
 		};
 	}, [session]);
-	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;
+	const lines = state.session === session && enabled ? state.lines : noLines;
+	const items = useMemo(() => [...lines].sort((a, b) => (builtInNumber(a.sample) ?? Number.POSITIVE_INFINITY) - (builtInNumber(b.sample) ?? Number.POSITIVE_INFINITY)).map(({ sample, quantity }) => ({
+		key: sample.key,
+		name: sampleName(text, sample),
+		price: sample.price,
+		quantity,
+		sample
+	})), [lines, text]);
+	const refresh = useCallback((samples) => {
+		const byKey = new Map(samples.map((sample) => [sample.key, sample]));
+		setState((previous) => {
+			if (previous.session !== session) return previous;
+			let changed = false;
+			const next = previous.lines.map((line) => {
+				const current = byKey.get(line.sample.key);
+				if (!current || current === line.sample) return line;
+				changed = true;
+				return {
+					...line,
+					sample: current
+				};
+			});
+			return changed ? {
+				session,
+				lines: next
+			} : previous;
+		});
+	}, [session]);
+	function update(key, quantity, added) {
+		if (!enabled || active.current !== session) return false;
+		if (!added && !lines.some((line) => line.sample.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;
+			const current = previous.session === session ? previous.lines : noLines;
+			const line = current.find((candidate) => candidate.sample.key === key);
+			const next = quantity ?? (line?.quantity ?? 0) + 1;
 			if (next > 999) return previous;
+			const kept = current.filter((candidate) => candidate !== line);
+			if (next === 0) return {
+				session,
+				lines: kept
+			};
+			if (!line && added) return {
+				session,
+				lines: [...current, {
+					sample: added,
+					quantity: next
+				}]
+			};
 			return {
 				session,
-				quantities: {
-					...current,
-					[key]: next
-				}
+				lines: current.map((candidate) => candidate === line ? {
+					...candidate,
+					quantity: next
+				} : candidate)
 			};
 		});
 		return true;
@@ -156,16 +479,16 @@ function SampleCartProvider({ enabled, onAdd, announce, emit, children }) {
 	return /* @__PURE__ */ jsx(SampleCartContext.Provider, {
 		value: {
 			items,
-			add: (key) => {
-				const product = sampleProducts.find((product$1) => product$1.key === key);
-				if (!product || !update(key)) return false;
-				onAdd(product.name);
+			refresh,
+			add: (sample) => {
+				if (!update(sample.key, void 0, sample)) return false;
+				onAdd(sampleName(text, sample));
 				return true;
 			},
 			changeQuantity: async (key, quantity) => {
 				const updated = quantity >= 1 && update(key, quantity);
 				if (updated) {
-					announce("Sample cart quantity updated.");
+					announce("sampleQuantityUpdated");
 					emit({
 						type: "quantity-changed",
 						itemId: key,
@@ -178,7 +501,7 @@ function SampleCartProvider({ enabled, onAdd, announce, emit, children }) {
 			remove: async (key) => {
 				const updated = update(key, 0);
 				if (updated) {
-					announce("Sample item removed from cart.");
+					announce("sampleItemRemoved");
 					emit({
 						type: "item-removed",
 						itemId: key,
@@ -211,12 +534,50 @@ function useMoney() {
 	const { currencyCode } = config;
 	return useCallback((value, currency = currencyCode) => money(value, currency, locale), [locale, currencyCode]);
 }
+/** `useMoney` for a range, such as `$20.00 – $25.00`, written the way the provider's `locale` writes ranges. */
+function useMoneyRange() {
+	const { locale, config } = useCommerce();
+	const { currencyCode } = config;
+	return useCallback((min, max, currency = currencyCode) => moneyRange(min, max, currency, locale), [locale, currencyCode]);
+}
+/**
+* The provider's text for `key`, with `{placeholders}` filled from `values`, the way the package's own parts read
+* it. For custom parts that should match the package's language. English outside a provider.
+*/
+function useMessage() {
+	const messages = useContext(CommerceContext)?.messages ?? enUS;
+	return useCallback((key, values) => formatMessage(messages, key, values), [messages]);
+}
 const CONNECTING_FAILURE_GRACE_MS = 6e4;
 /** Polls every five seconds for five minutes after the page loads, then every minute, and stops at thirty. */
 const FAST_POLL_FOR_MS = 5 * 6e4;
 const STOP_POLLING_AT_MS = 30 * 6e4;
 /** A failed retry keeps showing connecting this long so the click visibly does something. */
 const RETRY_FEEDBACK_MS = 1e3;
+/**
+* `messages` while its contents are unchanged, so an inline object, including inline `errorCodes` or plural forms,
+* does not change every render. The kept value is state, so a render React discards cannot leave it behind.
+*/
+function useStableMessages(value) {
+	const [stable, setStable] = useState(value);
+	if (stable === value || sameMessages(stable, value)) return stable;
+	setStable(() => value);
+	return value;
+}
+/** Equal keys and values, comparing plain-object values, such as `errorCodes` and plural forms, one level deeper. */
+function sameMessages(a, b, deeper = true) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const left = a;
+	const right = b;
+	const keys = Object.keys(left);
+	return keys.length === Object.keys(right).length && keys.every((key) => Object.hasOwn(right, key) && (Object.is(left[key], right[key]) || deeper && isPlainObject(left[key]) && isPlainObject(right[key]) && sameMessages(left[key], right[key], false)));
+}
+function isPlainObject(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
 /** `locale` as a canonical tag, or `en-US` when it is not a valid one, so one bad prop cannot break every price. */
 function resolveLocale(locale) {
 	if (!locale) return "en-US";
@@ -243,18 +604,28 @@ function callHost(callback) {
 async function loadConfig(signal) {
 	const config = await request("/config", { signal });
 	if (config?.state === "unbound" || config?.state === "connecting") {
-		if ("cartScope" in config || "currencyCode" in config) throw new Error("The store returned invalid configuration.");
+		if ("cartScope" in config || "currencyCode" in config) throw new StorefrontError("invalidConfiguration");
 		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.");
+	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 StorefrontError("invalidConfiguration");
 	return {
 		state: "ready",
 		cartScope: config.cartScope,
 		currencyCode: config.currencyCode
 	};
 }
-function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, getSwatch, locale, onItemAdded, onEvent }) {
+function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, getSwatch, locale, messages, onItemAdded, onEvent }) {
 	const resolvedLocale = useMemo(() => resolveLocale(locale), [locale]);
+	const stableMessages = useStableMessages(messages);
+	const resolvedMessages = useMemo(() => ({
+		...enUS,
+		...stableMessages,
+		locale: stableMessages?.locale || enUS.locale,
+		errorCodes: {
+			...enUS.errorCodes,
+			...stableMessages?.errorCodes
+		}
+	}), [stableMessages]);
 	const [pollingSince, setPollingSince] = useState(Date.now);
 	const [pollingStopped, setPollingStopped] = useState(false);
 	const [retrying, setRetrying] = useState(false);
@@ -300,7 +671,7 @@ function CommerceProvider({ children, catalogPath = "/shop", productPath = "/pro
 			checkoutSuccessPath
 		},
 		connection,
-		connectionError: connection !== "error" ? null : stalled ? "The store is taking too long to connect." : message(config.error),
+		connectionError: connection !== "error" ? null : stalled ? formatMessage(resolvedMessages, "connectionSlow") : describeError(config.error, resolvedMessages),
 		retryConnection: () => {
 			const started = Date.now();
 			setPollingSince(started);
@@ -317,12 +688,14 @@ function CommerceProvider({ children, catalogPath = "/shop", productPath = "/pro
 		theme,
 		getSwatch,
 		locale: resolvedLocale,
+		messages: resolvedMessages,
 		onItemAdded,
 		onEvent,
 		children
 	});
 }
-function BoundCommerceProvider({ config, children, connection, connectionError, retryConnection, theme, getSwatch, locale, onItemAdded, onEvent }) {
+function BoundCommerceProvider({ config, children, connection, connectionError, retryConnection, theme, getSwatch, locale, messages, onItemAdded, onEvent }) {
+	const text = (key, values) => formatMessage(messages, key, values);
 	const storageKey = `godaddy:commerce-storefront:cart:${config.cartScope}`;
 	const cartIdStorage = useMemo(() => new CartIdStorage(storageKey), [storageKey]);
 	const ready = connection === "ready";
@@ -338,8 +711,10 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	const [open, setOpen] = useState(false);
 	const [pending, setPending] = useState(false);
 	const [hydrating, setHydrating] = useState(true);
-	const [error, setError] = useState(null);
-	const [storageWarning, setStorageWarning] = useState(null);
+	const [failure, setError] = useState(null);
+	const [storageUnavailable, setStorageUnavailable] = useState(false);
+	const error = failure && describeError(failure.cause, messages);
+	const storageWarning = storageUnavailable ? text("storageUnavailable") : null;
 	const [announcement, setAnnouncement] = useState("");
 	const id = useRef(null);
 	const currentCart = useRef(null);
@@ -399,7 +774,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		try {
 			return cartIdStorage.read();
 		} catch {
-			setStorageWarning("Your browser cannot save the cart. Keep this page open while shopping.");
+			setStorageUnavailable(true);
 			return id.current;
 		}
 	}
@@ -410,9 +785,9 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		setCart(next);
 		try {
 			cartIdStorage.write(id.current);
-			setStorageWarning(null);
+			setStorageUnavailable(false);
 		} catch {
-			setStorageWarning("Your browser cannot save the cart. Keep this page open while shopping.");
+			setStorageUnavailable(true);
 		}
 	}
 	async function hydrate() {
@@ -446,12 +821,14 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 				return isActive();
 			} catch (cause) {
 				if (isActive()) {
-					const text = message(cause);
-					setError(text);
+					const shown = describeError(cause, messages);
+					setError({ cause });
+					const code = cause instanceof ApiError ? cause.code : void 0;
 					emit({
 						type: "error",
 						operation: kind,
-						message: text
+						message: shown,
+						...code ? { code } : {}
 					});
 				}
 				return false;
@@ -476,7 +853,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		setCart(null);
 		setOpen(false);
 		setError(null);
-		setStorageWarning(null);
+		setStorageUnavailable(false);
 		setAnnouncement("");
 		setPending(false);
 		setHydrating(ready);
@@ -498,7 +875,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	function addItem(item) {
 		rememberOpener();
 		return run("add", async () => {
-			if (!item.skuId || !item.name || !Number.isInteger(item.quantity) || item.quantity < 1) throw new Error("Select a product variant and a positive quantity.");
+			if (!item.skuId || !item.name || !Number.isInteger(item.quantity) || item.quantity < 1) throw new StorefrontError("invalidAddItem");
 			await hydrate();
 			if (!isActive()) return;
 			const fetchCart = (input, init) => {
@@ -514,10 +891,10 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 				name: item.name,
 				quantity: item.quantity
 			}, fetchCart);
-			if (!result.cart?.id || !result.cart.lineItems?.length) throw new Error("Commerce did not return a cart with items. Refresh before retrying.");
+			if (!result.cart?.id || !result.cart.lineItems?.length) throw new StorefrontError("addReturnedNoCart");
 			if (!isActive()) return;
 			commit(result.cart);
-			setAnnouncement(`${item.name} added to your cart.`);
+			setAnnouncement(text("itemAdded", { name: item.name }));
 			openDrawer();
 			emit({
 				type: "item-added",
@@ -532,16 +909,16 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		return run(method === "DELETE" ? "remove" : "change-quantity", async () => {
 			await hydrate();
 			if (!isActive()) return;
-			if (!id.current || !currentCart.current?.lineItems?.some((item) => item.id === itemId)) throw new Error("This item is no longer in the cart.");
-			if (quantity !== void 0 && (!Number.isInteger(quantity) || quantity < 1)) throw new Error("Quantity must be a positive whole number.");
+			if (!id.current || !currentCart.current?.lineItems?.some((item) => item.id === itemId)) throw new StorefrontError("itemNotInCart");
+			if (quantity !== void 0 && (!Number.isInteger(quantity) || quantity < 1)) throw new StorefrontError("invalidQuantity");
 			const result = await boundRequest(`/cart/${encodeURIComponent(id.current)}/items/${encodeURIComponent(itemId)}`, {
 				method,
 				...quantity !== void 0 ? { body: JSON.stringify({ quantity }) } : {}
 			});
-			if (!result.cart?.id) throw new Error("Commerce did not return the updated cart. Refresh before retrying.");
+			if (!result.cart?.id) throw new StorefrontError("updateReturnedNoCart");
 			if (!isActive()) return;
 			commit(result.cart);
-			setAnnouncement(method === "DELETE" ? "Item removed from cart." : "Cart quantity updated.");
+			setAnnouncement(text(method === "DELETE" ? "itemRemoved" : "quantityUpdated"));
 			emit(method === "DELETE" ? {
 				type: "item-removed",
 				itemId,
@@ -558,16 +935,16 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		return run("discount", async () => {
 			await hydrate();
 			if (!isActive()) return;
-			if (!id.current || !code.trim()) throw new Error("Add an item and enter a promotion code.");
+			if (!id.current || !code.trim()) throw new StorefrontError("discountMissing");
 			const codes = [...new Set([...currentCart.current?.discounts?.flatMap((discount) => discount.code ? [discount.code] : []) ?? [], code.trim()])];
 			const result = await boundRequest(`/cart/${encodeURIComponent(id.current)}/discounts`, {
 				method: "POST",
 				body: JSON.stringify({ discountCodes: codes })
 			});
-			if (!result.cart?.id) throw new Error("Commerce did not return the updated cart.");
+			if (!result.cart?.id) throw new StorefrontError("discountReturnedNoCart");
 			if (!isActive()) return;
 			commit(result.cart);
-			setAnnouncement("Promotion codes updated.");
+			setAnnouncement(text("discountsUpdated"));
 			emit({
 				type: "discount-applied",
 				code: code.trim()
@@ -576,10 +953,10 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	}
 	function checkout() {
 		return run("checkout", async () => {
-			if (!config.checkoutSuccessPath) throw new Error("Checkout has not been enabled for this store.");
+			if (!config.checkoutSuccessPath) throw new StorefrontError("checkoutDisabled");
 			await hydrate();
 			if (!isActive()) return;
-			if (!id.current || !currentCart.current?.lineItems?.length) throw new Error("Add an item before checking out.");
+			if (!id.current || !currentCart.current?.lineItems?.length) throw new StorefrontError("checkoutEmpty");
 			const origin = window.location.origin;
 			const successUrl = new URL(config.checkoutSuccessPath, origin);
 			successUrl.searchParams.set("orderId", id.current);
@@ -592,9 +969,9 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 				})
 			});
 			if (!isActive()) return;
-			if (typeof session$1.url !== "string" || !session$1.url.trim()) throw new Error("Commerce did not return a checkout URL.");
+			if (typeof session$1.url !== "string" || !session$1.url.trim()) throw new StorefrontError("checkoutNoUrl");
 			const url = new URL(session$1.url, origin);
-			if (url.protocol !== "https:") throw new Error("Commerce returned an invalid checkout URL.");
+			if (url.protocol !== "https:") throw new StorefrontError("checkoutInvalidUrl");
 			emit({
 				type: "checkout-started",
 				cartId: id.current
@@ -611,6 +988,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			theme,
 			getSwatch,
 			locale,
+			messages,
 			cart,
 			open,
 			setOpen: (next) => {
@@ -637,10 +1015,11 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			value: registerDrawer,
 			children: /* @__PURE__ */ jsx(SampleCartProvider, {
 				enabled: connection === "unbound",
-				announce: setAnnouncement,
+				messages,
+				announce: (key) => setAnnouncement(text(key)),
 				emit,
 				onAdd: (name) => {
-					setAnnouncement(`${name} added to your sample cart.`);
+					setAnnouncement(text("sampleItemAdded", { name }));
 					openDrawer();
 					emit({
 						type: "item-added",
@@ -668,21 +1047,22 @@ function useCart() {
 	const { cart, config, connection, hydrating } = useCommerce();
 	const sample = useSampleCart();
 	const isSample = connection === "unbound";
-	const sampleItems$1 = sample.items;
+	const sampleItems = sample.items;
 	return useMemo(() => {
 		if (isSample) return {
-			items: sampleItems$1.map((item) => ({
+			items: sampleItems.map((item) => ({
 				id: item.key,
 				name: item.name,
 				quantity: item.quantity,
-				imageUrl: null,
+				imageUrl: item.sample.imageUrl || null,
 				options: [],
 				subtotal: item.price * item.quantity,
-				currency: "USD"
+				currency: sampleCurrency,
+				sample: item.sample
 			})),
-			itemCount: sampleItems$1.reduce((total, item) => total + item.quantity, 0),
-			subtotal: sampleItems$1.reduce((sum, item) => sum + item.price * item.quantity, 0),
-			currency: "USD",
+			itemCount: sampleItems.reduce((total, item) => total + item.quantity, 0),
+			subtotal: sampleItems.reduce((sum, item) => sum + item.price * item.quantity, 0),
+			currency: sampleCurrency,
 			isSample,
 			loading: false
 		};
@@ -700,7 +1080,8 @@ function useCart() {
 					values: option.values ?? []
 				})),
 				subtotal: typeof item.totals?.subTotal?.value === "number" ? item.totals.subTotal.value : null,
-				currency: item.totals?.subTotal?.currencyCode ?? currency
+				currency: item.totals?.subTotal?.currencyCode ?? currency,
+				sample: null
 			})),
 			itemCount: lines.reduce((total, item) => total + (item.quantity ?? 0), 0),
 			subtotal: typeof subtotal === "number" ? subtotal : null,
@@ -713,7 +1094,7 @@ function useCart() {
 		config.currencyCode,
 		hydrating,
 		isSample,
-		sampleItems$1
+		sampleItems
 	]);
 }
 
@@ -907,15 +1288,16 @@ function StorefrontSurface({ children, className = "" }) {
 }
 function CommerceStatus() {
 	const { connection, connectionError, retryConnection } = useCommerce();
+	const text = useMessage();
 	if (connection === "ready") return null;
 	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "unbound" ? /* @__PURE__ */ jsx("p", {
 		role: "status",
 		className: "text-sm text-commerce-muted",
-		children: "Connect a store to show products."
+		children: text("connectPrompt")
 	}) : connection === "loading" || connection === "connecting" ? /* @__PURE__ */ jsx("p", {
 		role: "status",
 		className: "text-sm text-commerce-muted",
-		children: "Connecting to the store…"
+		children: text("connecting")
 	}) : /* @__PURE__ */ jsxs("div", {
 		role: "alert",
 		className: errorNoticeClass,
@@ -923,7 +1305,7 @@ function CommerceStatus() {
 			type: "button",
 			className: errorActionClass,
 			onClick: retryConnection,
-			children: "Retry connection"
+			children: text("retryConnection")
 		})]
 	}) });
 }
@@ -937,6 +1319,7 @@ function CommerceStatus() {
 function CartButton({ children } = {}) {
 	const { setOpen, open, connection } = useCommerce();
 	const { itemCount } = useCart();
+	const text = useMessage();
 	const [bump, setBump] = useState(0);
 	const previous = useRef(itemCount);
 	useEffect(() => {
@@ -952,7 +1335,7 @@ function CartButton({ children } = {}) {
 			disabled: connection !== "ready" && connection !== "unbound",
 			"aria-haspopup": "dialog",
 			"aria-expanded": open,
-			"aria-label": custom === null ? `Cart, ${itemCount} ${itemCount === 1 ? "item" : "items"}` : void 0,
+			"aria-label": custom === null ? text("cartButtonLabel", { count: itemCount }) : void 0,
 			"data-commerce-part": "cart-button",
 			onClick: () => setOpen(true),
 			children: custom ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BagIcon, {}), itemCount > 0 && /* @__PURE__ */ jsx("span", {
@@ -982,8 +1365,11 @@ function BagIcon() {
 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.`;
+	if (!Number.isInteger(quantity) || quantity < 1) return { key: "quantityNotWhole" };
+	if (available !== null && available > 0 && quantity > available) return {
+		key: "quantityOverStock",
+		values: { count: available }
+	};
 	return null;
 }
 function AddToCartButton(props) {
@@ -998,16 +1384,21 @@ function AddToCartButton(props) {
 */
 function AddToCart({ sku, name, quantity = 1, children, className, block = false, label, labelName }) {
 	const { addItem, pending, hydrating, error, open, connection } = useCommerce();
+	const text = useMessage();
 	const [adding, setAdding] = useState(false);
 	const reasonId = useId();
 	const available = getAvailableInventoryQuantity(sku);
 	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);
+	if (connection === "unbound") reason = text("addReasonUnbound");
+	else if (connection === "error") reason = text("addReasonError");
+	else if (connection !== "ready") reason = text("connecting");
+	else if (!sku.id) reason = text("addReasonNoSku");
+	else if (!soldOut && hydrating) reason = text("loadingCart");
+	else if (!soldOut) {
+		const problem = quantityProblem(quantity, available);
+		reason = problem && text(problem.key, problem.values);
+	}
 	const disabled = adding || soldOut || reason !== null;
 	const ownLabel = !!labelName && !soldOut && !adding && renderLabel(children, {
 		busy: false,
@@ -1042,7 +1433,7 @@ function AddToCart({ sku, name, quantity = 1, children, className, block = false
 				children: renderLabel(children, {
 					busy: adding,
 					soldOut
-				}, soldOut ? "Out of stock" : adding ? "Adding…" : label ?? "Add to cart")
+				}, soldOut ? text("outOfStock") : adding ? text("adding") : label ?? text("addToCart"))
 			}),
 			reason && /* @__PURE__ */ jsx("span", {
 				id: reasonId,
@@ -1158,11 +1549,12 @@ function CartDrawerRoot({ children, className }) {
 function CartTitle({ className, children }) {
 	const { isSample, itemCount } = useCartInternal("CartTitle");
 	const Heading = useContext(CartDrawerContext) ? Dialog.Title : "h2";
+	const text = useMessage();
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-title", className),
 		children: /* @__PURE__ */ jsx(Heading, {
 			className: "text-lg font-semibold tracking-tight",
-			children: renderLabel(children, { isSample }, /* @__PURE__ */ jsxs(Fragment$1, { children: [isSample ? "Sample cart" : "Your cart", itemCount > 0 && /* @__PURE__ */ jsxs("span", {
+			children: renderLabel(children, { isSample }, /* @__PURE__ */ jsxs(Fragment$1, { children: [text(isSample ? "sampleCartTitle" : "cartTitle"), itemCount > 0 && /* @__PURE__ */ jsxs("span", {
 				className: "font-normal text-commerce-muted",
 				children: [
 					" (",
@@ -1179,7 +1571,8 @@ function CartDescription({ className, children }) {
 	const drawer = useContext(CartDrawerContext);
 	const register = drawer?.register;
 	useEffect(() => register?.("description"), [register]);
-	const text = renderLabel(children, { isSample }, isSample ? "Example products and prices in USD. Nothing can be purchased." : "Review your items before checkout.");
+	const message = useMessage();
+	const text = renderLabel(children, { isSample }, isSample ? message("sampleCartDescription", { currency: sampleCurrency }) : message("cartDescription"));
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-description", className),
 		children: drawer ? /* @__PURE__ */ jsx(Dialog.Description, {
@@ -1194,12 +1587,13 @@ function CartDescription({ className, children }) {
 /** The drawer's close button. Renders nothing outside the drawer. */
 function CartClose({ className }) {
 	useCartInternal("CartClose");
+	const text = useMessage();
 	if (!useContext(CartDrawerContext)) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-close", className),
 		children: /* @__PURE__ */ jsx(Dialog.Close, {
 			className: "inline-flex min-h-11 min-w-11 items-center justify-center rounded-full text-commerce-muted transition-colors hover:bg-commerce-tint hover:text-inherit focus-visible:outline focus-visible:outline-2 focus-visible:outline-current",
-			"aria-label": "Close cart",
+			"aria-label": text("closeCart"),
 			children: /* @__PURE__ */ jsx("svg", {
 				"aria-hidden": "true",
 				viewBox: "0 0 20 20",
@@ -1218,6 +1612,7 @@ function CartClose({ className }) {
 /** 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");
+	const text = useMessage();
 	if (!storageWarning && !error) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-notices", className),
@@ -1237,7 +1632,7 @@ function CartNotices({ className }) {
 					"aria-disabled": locked,
 					"aria-busy": action === "refresh",
 					onClick: () => run("refresh", refresh),
-					children: "Refresh cart"
+					children: text("refreshCart")
 				})]
 			})]
 		})
@@ -1251,7 +1646,11 @@ function useCartItemInternal(part) {
 	if (!item) throw new Error(`${part} must be rendered inside <CartItemRoot>.`);
 	return item;
 }
-/** Read the line from inside `CartItemRoot`, for custom item parts. */
+/**
+* Read the line from inside `CartItemRoot`, for custom item parts. Pass the type of the site's samples, such as
+* `useCartItem<MySample>()`, to read their own fields from `sample`. The type is not checked: when the cart can hold
+* samples from more than one catalog, read the site's own fields as possibly missing.
+*/
 function useCartItem() {
 	return useCartItemInternal("useCartItem");
 }
@@ -1261,6 +1660,7 @@ function useCartItem() {
 */
 function CartItems({ className, children }) {
 	const { items, hydrating } = useCartInternal("CartItems");
+	const text = useMessage();
 	const template = hasChildren(children) ? children : packagedItem;
 	const registry = usePartRegistry();
 	const { has } = registry;
@@ -1273,7 +1673,7 @@ function CartItems({ className, children }) {
 		children: [hydrating && /* @__PURE__ */ jsx("p", {
 			role: "status",
 			className: "py-4 text-sm text-commerce-muted",
-			children: "Loading your cart…"
+			children: text("loadingCart")
 		}), /* @__PURE__ */ jsx("div", {
 			role: "list",
 			...partProps("cart-items", className),
@@ -1306,13 +1706,15 @@ function CartItemRoot({ children, className }) {
 /** The line's product image. Renders nothing without one. */
 function CartItemImage({ className }) {
 	const { imageUrl } = useCartItemInternal("CartItemImage");
-	if (!imageUrl) return null;
+	const [failedUrl, setFailedUrl] = useState(null);
+	if (!imageUrl || imageUrl === failedUrl) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-item-image", className),
 		children: /* @__PURE__ */ jsx("img", {
 			src: imageUrl,
 			alt: "",
-			className: "h-20 w-20 bg-commerce-tint object-cover"
+			className: "h-20 w-20 bg-commerce-tint object-cover",
+			onError: () => setFailedUrl(imageUrl)
 		})
 	});
 }
@@ -1330,17 +1732,16 @@ function CartItemName({ className }) {
 /** The selected options on one line, such as "Color: Blue · Size: M". Renders nothing without options. */
 function CartItemOptions({ className }) {
 	const { options } = useCartItemInternal("CartItemOptions");
+	const text = useMessage();
 	if (!options.length) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-item-options", className),
 		children: /* @__PURE__ */ jsx("p", {
 			className: "text-sm text-commerce-muted",
-			children: options.map((option, index) => /* @__PURE__ */ jsxs("span", { children: [
-				index > 0 && " · ",
-				option.attribute,
-				": ",
-				option.values.join(", ")
-			] }, `${option.attribute}:${option.values.join(",")}`))
+			children: options.map((option, index) => /* @__PURE__ */ jsxs("span", { children: [index > 0 && " · ", text("itemOption", {
+				attribute: option.attribute,
+				values: option.values.join(", ")
+			})] }, `${option.attribute}:${option.values.join(",")}`))
 		})
 	});
 }
@@ -1348,11 +1749,12 @@ function CartItemOptions({ className }) {
 function CartItemPrice({ className }) {
 	const { subtotal, currency } = useCartItemInternal("CartItemPrice");
 	const money$1 = useMoney();
+	const text = useMessage();
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-item-price", className),
 		children: /* @__PURE__ */ jsx("p", {
 			className: "text-sm leading-6 tabular-nums",
-			children: subtotal === null ? "Price unavailable" : money$1(subtotal, currency)
+			children: subtotal === null ? text("priceUnavailable") : money$1(subtotal, currency)
 		})
 	});
 }
@@ -1375,6 +1777,7 @@ function StepperIcon$1({ plus }) {
 function CartItemQuantity({ className }) {
 	const { id, name, quantity } = useCartItemInternal("CartItemQuantity");
 	const { action, locked, run, changeQuantity } = useCartInternal("CartItemQuantity");
+	const text = useMessage();
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-item-quantity", className),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -1383,7 +1786,7 @@ function CartItemQuantity({ className }) {
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: stepperButtonClass$1,
-					"aria-label": `Decrease quantity of ${name}`,
+					"aria-label": text("decreaseQuantity", { name }),
 					"data-commerce-control": "decrease",
 					disabled: action === `decrease:${id}` || !id || quantity <= 1,
 					"aria-disabled": locked || !id || quantity <= 1,
@@ -1395,13 +1798,13 @@ function CartItemQuantity({ className }) {
 					className: "min-w-8 text-center text-sm tabular-nums",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "sr-only",
-						children: "Quantity: "
+						children: text("quantityPrefix")
 					}), quantity]
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: stepperButtonClass$1,
-					"aria-label": `Increase quantity of ${name}`,
+					"aria-label": text("increaseQuantity", { name }),
 					"data-commerce-control": "increase",
 					disabled: action === `increase:${id}` || !id,
 					"aria-disabled": locked || !id,
@@ -1417,6 +1820,7 @@ function CartItemQuantity({ className }) {
 function CartItemRemove({ className, children }) {
 	const { id, name } = useCartItemInternal("CartItemRemove");
 	const { action, locked, run, removeItem } = useCartInternal("CartItemRemove");
+	const text = useMessage();
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-item-remove", className),
 		children: /* @__PURE__ */ jsxs("button", {
@@ -1426,7 +1830,7 @@ function CartItemRemove({ className, children }) {
 			"aria-disabled": locked || !id,
 			"aria-busy": action === `remove:${id}`,
 			onClick: () => run(`remove:${id}`, () => removeItem(id)),
-			children: [renderLabel(children, { busy: action === `remove:${id}` }, "Remove"), /* @__PURE__ */ jsxs("span", {
+			children: [renderLabel(children, { busy: action === `remove:${id}` }, text("remove")), /* @__PURE__ */ jsxs("span", {
 				className: "sr-only",
 				children: [" ", name]
 			})]
@@ -1452,6 +1856,7 @@ const packagedItem = /* @__PURE__ */ jsxs(CartItemRoot, {
 /** 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");
+	const text = useMessage();
 	if (hydrating || items.length) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-empty", className),
@@ -1474,17 +1879,17 @@ function CartEmpty({ className, children }) {
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "text-base font-semibold",
-				children: "Your cart is empty"
+				children: text("cartEmpty")
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "mt-1 text-sm text-commerce-muted",
-				children: isSample ? "Add a sample product to try the cart." : "Add something you love and it will show up here."
+				children: text(isSample ? "sampleCartEmptyHint" : "cartEmptyHint")
 			}),
 			/* @__PURE__ */ jsx(Link, {
 				className: `${secondaryButtonClass} mt-6`,
 				to: catalogPath,
 				onClick: close,
-				children: "Browse products"
+				children: text("browseProducts")
 			})
 		] })
 	});
@@ -1502,12 +1907,13 @@ function CartSummary({ className, children }) {
 function CartSubtotal({ className }) {
 	const { items, subtotal, currency, isSample } = useCartInternal("CartSubtotal");
 	const money$1 = useMoney();
+	const text = useMessage();
 	if (!items.length || subtotal === null) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-subtotal", className),
 		children: /* @__PURE__ */ jsx("dl", { children: /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-between gap-4 font-semibold",
-			children: [/* @__PURE__ */ jsx("dt", { children: isSample ? "Sample subtotal" : "Subtotal" }), /* @__PURE__ */ jsx("dd", {
+			children: [/* @__PURE__ */ jsx("dt", { children: text(isSample ? "sampleSubtotal" : "subtotal") }), /* @__PURE__ */ jsx("dd", {
 				className: "tabular-nums",
 				children: money$1(subtotal, currency)
 			})]
@@ -1520,12 +1926,13 @@ function CartSubtotal({ className }) {
 */
 function CartCheckoutNote({ className }) {
 	const { items, isSample } = useCartInternal("CartCheckoutNote");
+	const text = useMessage();
 	if (isSample || !items.length) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-checkout-note", "commerce-cart-checkout-adjustments-note", className),
 		children: /* @__PURE__ */ jsxs("dl", {
 			className: "flex justify-between gap-4 text-sm text-commerce-muted",
-			children: [/* @__PURE__ */ jsx("dt", { children: "Shipping, taxes & discounts" }), /* @__PURE__ */ jsx("dd", { children: "Calculated at checkout" })]
+			children: [/* @__PURE__ */ jsx("dt", { children: text("checkoutAdjustments") }), /* @__PURE__ */ jsx("dd", { children: text("checkoutAdjustmentsValue") })]
 		})
 	});
 }
@@ -1535,15 +1942,16 @@ function CartCheckoutNote({ className }) {
 */
 function CartCheckout({ className, children }) {
 	const { items, isSample, checkoutEnabled, checkoutReady, hydrating, action, locked, run, checkout } = useCartInternal("CartCheckout");
+	const text = useMessage();
 	if (!items.length) return null;
 	let content;
 	if (isSample) content = /* @__PURE__ */ jsx("p", {
 		className: "text-sm text-commerce-muted",
-		children: "Example total in USD. Checkout is not set up yet."
+		children: text("sampleCheckoutNote", { currency: sampleCurrency })
 	});
 	else if (!checkoutEnabled) content = /* @__PURE__ */ jsx("p", {
 		className: "text-sm text-commerce-muted",
-		children: "Checkout is not available yet."
+		children: text("checkoutUnavailable")
 	});
 	else content = /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -1552,7 +1960,7 @@ function CartCheckout({ className, children }) {
 		"aria-disabled": locked || !checkoutReady,
 		"aria-busy": action === "checkout",
 		onClick: () => run("checkout", checkout),
-		children: renderLabel(children, { busy: action === "checkout" }, action === "checkout" ? "Opening checkout…" : "Proceed to checkout")
+		children: renderLabel(children, { busy: action === "checkout" }, text(action === "checkout" ? "openingCheckout" : "checkout"))
 	});
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-checkout", className),
@@ -1566,8 +1974,9 @@ function CartCheckout({ className, children }) {
 function CartContinueShopping({ className, children }) {
 	const { items, isSample, catalogPath } = useCartInternal("CartContinueShopping");
 	const inDrawer = !!useContext(CartDrawerContext);
+	const text = useMessage();
 	if (!items.length) return null;
-	const label = renderLabel(children, { isSample }, "Continue shopping");
+	const label = renderLabel(children, { isSample }, text("continueShopping"));
 	const linkClass = "inline-flex min-h-11 w-full items-center justify-center rounded-lg px-5 py-2 text-sm font-medium transition-colors hover:bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current";
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-continue-shopping", className),
@@ -1626,6 +2035,7 @@ function CartDrawer() {
 */
 function ProductImage({ url, name, className = "" }) {
 	const [failedUrl, setFailedUrl] = useState(null);
+	const text = useMessage();
 	return url && url !== failedUrl ? /* @__PURE__ */ jsx("img", {
 		src: url,
 		alt: name,
@@ -1635,20 +2045,20 @@ function ProductImage({ url, name, className = "" }) {
 	}) : /* @__PURE__ */ jsx("div", {
 		className: `flex h-full min-h-44 items-center justify-center bg-commerce-tint p-6 text-center text-sm text-commerce-muted ${className}`,
 		role: "img",
-		"aria-label": `${name}: image unavailable`,
-		children: "No image available"
+		"aria-label": text("imageUnavailable", { name }),
+		children: text("noImage")
 	});
 }
 /** 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) {
+const titleLink = "title";
+function cardValue(item, productPath, links, sampleNameText) {
 	if (item.source === "sample") return {
 		...links,
 		source: "sample",
 		sample: item.sample,
 		product: null,
-		name: item.sample.name,
+		name: sampleNameText,
 		href: null,
 		isSample: true
 	};
@@ -1667,16 +2077,24 @@ function useProductCardInternal(part) {
 	if (!context) throw new Error(`${part} must be rendered inside <ProductCardRoot>.`);
 	return context;
 }
-/** Read the card's product, name, and link from inside `ProductCardRoot`. */
+/**
+* Read the card's product or sample, name, and link from inside `ProductCardRoot`. Pass the type of the site's
+* samples, such as `useProductCard<MySample>()`, to read their own fields from `sample`. The type is not checked:
+* on a page that also shows the packaged samples, read the site's own fields as possibly missing.
+*/
 function useProductCard() {
-	const { product, name, href, isSample } = useProductCardInternal("useProductCard");
+	const card = useProductCardInternal("useProductCard");
+	const { product, name, href, isSample } = card;
+	const sample = card.source === "sample" ? card.sample : null;
 	return useMemo(() => ({
 		product,
+		sample,
 		name,
 		href,
 		isSample
 	}), [
 		product,
+		sample,
 		name,
 		href,
 		isSample
@@ -1686,6 +2104,7 @@ function useProductCard() {
 function ProductCardRoot({ children, product, className }) {
 	const catalogItem = useContext(CatalogItemContext);
 	const { config } = useCommerce();
+	const text = useMessage();
 	const [imageLinked, setImageLinked] = useState(false);
 	const { register, has } = usePartRegistry(useCallback((registered) => setImageLinked(!registered(titleLink)), []));
 	useEffect(() => {
@@ -1696,16 +2115,18 @@ function ProductCardRoot({ children, product, className }) {
 			source: "live",
 			product
 		} : null);
+		const sampleText = item?.source === "sample" ? sampleName(text, item.sample) : "";
 		return item && cardValue(item, config.productPath, {
 			imageLinked,
 			register
-		});
+		}, sampleText);
 	}, [
 		catalogItem,
 		product,
 		config.productPath,
 		imageLinked,
-		register
+		register,
+		text
 	]);
 	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>.");
@@ -1722,8 +2143,9 @@ function ProductCardRoot({ children, product, className }) {
 	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.
+* The product's first image, linked to its page. A sample shows its `imageUrl`, unlinked, or the packaged samples'
+* placeholder. With a `ProductCardTitle` in the card, the title is the one link keyboard and screen reader users get,
+* and a sample's image is hidden from screen readers so its name is not read twice; without one, the image is exposed.
 */
 function ProductCardImage({ className }) {
 	const card = useProductCardInternal("ProductCardImage");
@@ -1733,23 +2155,30 @@ function ProductCardImage({ className }) {
 			to: card.href,
 			tabIndex: card.imageLinked ? void 0 : -1,
 			"aria-hidden": card.imageLinked ? void 0 : "true",
-			className: "block aspect-square overflow-hidden bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
+			className: "block aspect-(--commerce-card-image-aspect,1/1) overflow-hidden bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
 			children: /* @__PURE__ */ jsx(ProductImage, {
 				url: getPrimaryImageUrl(card.product),
 				name: card.name,
 				className: "motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out motion-safe:group-hover:scale-[1.03]"
 			})
-		}) : /* @__PURE__ */ jsx("div", {
+		}) : isBuiltInSample(card.sample) ? /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "flex aspect-square items-center justify-center bg-commerce-tint",
+			className: "flex aspect-(--commerce-card-image-aspect,1/1) items-center justify-center bg-commerce-tint",
 			children: /* @__PURE__ */ jsx("div", { className: "h-16 w-16 rounded-full border border-commerce-line" })
+		}) : /* @__PURE__ */ jsx("div", {
+			"aria-hidden": card.imageLinked ? void 0 : "true",
+			className: "aspect-(--commerce-card-image-aspect,1/1) overflow-hidden bg-commerce-tint",
+			children: /* @__PURE__ */ jsx(ProductImage, {
+				url: card.sample.imageUrl,
+				name: card.name
+			})
 		})
 	});
 }
 /** 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]);
+	useEffect(() => register(titleLink), [register]);
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-card-title", className),
 		children: /* @__PURE__ */ jsx("h2", {
@@ -1762,47 +2191,55 @@ function ProductCardTitle({ className }) {
 		})
 	});
 }
-/** Up to three lines of the product description. Renders nothing without one. */
+/** Up to two lines of the product or sample description. Renders nothing without one. */
 function ProductCardDescription({ className }) {
-	const { product } = useProductCardInternal("ProductCardDescription");
-	if (!product?.description) return null;
+	const card = useProductCardInternal("ProductCardDescription");
+	const description = card.source === "sample" ? card.sample.description : card.product.description;
+	if (!description) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-card-description", className),
 		children: /* @__PURE__ */ jsx("p", {
 			className: "line-clamp-2 text-sm leading-6 text-commerce-muted",
-			children: product.description
+			children: description
 		})
 	});
 }
-const formatRange = (range, money$1) => {
+const formatRange = (range, money$1, moneyRange$1) => {
 	const min = range?.min;
 	const max = range?.max;
 	if (typeof min !== "number") return null;
-	return `${money$1(min)}${typeof max === "number" && max !== min ? ` – ${money$1(max)}` : ""}`;
+	return typeof max === "number" && max !== min ? moneyRange$1(min, max) : money$1(min);
 };
 /**
 * "Sale" when some SKU's compare-at price is above that SKU's price. Without SKU prices, as in the catalog list, only
-* when the lowest compare-at price is above the highest price. Renders nothing otherwise, or for samples.
+* when the lowest compare-at price is above the highest price. For a sample, when its `compareAtPrice` is above its
+* price. Renders nothing otherwise.
 */
 function ProductCardBadge({ className }) {
-	const { product } = useProductCardInternal("ProductCardBadge");
-	if (!isProductOnSale(product)) return null;
+	const card = useProductCardInternal("ProductCardBadge");
+	const text = useMessage();
+	if (card.source === "sample" ? sampleCompareAt(card.sample) === null : !isProductOnSale(card.product)) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-card-badge", className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: saleBadgeClass,
-			children: "Sale"
+			children: text("sale")
 		})
 	});
 }
+const sampleCompareAt = (sample) => sample.compareAtPrice !== void 0 && sample.compareAtPrice > sample.price ? sample.compareAtPrice : null;
 /** The product's price, or its price range when variants differ. A single price on sale shows its compare-at price. */
 function ProductCardPrice({ className }) {
 	const card = useProductCardInternal("ProductCardPrice");
 	const money$1 = useMoney();
-	const text = card.source === "sample" ? money$1(card.sample.price, "USD") : formatRange(card.product.priceRange, money$1) ?? "Price unavailable";
+	const moneyRange$1 = useMoneyRange();
+	const message = useMessage();
+	const text = card.source === "sample" ? money$1(card.sample.price, sampleCurrency) : formatRange(card.product.priceRange, money$1, moneyRange$1) ?? message("priceUnavailable");
 	const range = card.source === "live" ? card.product.priceRange : null;
-	const starting = card.source === "live" && range?.min === range?.max ? getStartingCompareAt(card.product) : null;
-	const compareAt = starting === null ? null : money$1(starting);
+	let starting = null;
+	if (card.source === "sample") starting = sampleCompareAt(card.sample);
+	else if (range?.min === range?.max) starting = getStartingCompareAt(card.product);
+	const compareAt = starting === null ? null : money$1(starting, card.source === "sample" ? sampleCurrency : void 0);
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-card-price", className),
 		children: /* @__PURE__ */ jsxs("p", {
@@ -1812,7 +2249,7 @@ function ProductCardPrice({ className }) {
 				children: text
 			}), compareAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				className: "sr-only",
-				children: "Was"
+				children: message("wasPrice")
 			}), /* @__PURE__ */ jsx("del", {
 				className: "text-commerce-muted",
 				children: compareAt
@@ -1827,6 +2264,7 @@ function ProductCardPrice({ className }) {
 function ProductCardSwatches({ className }) {
 	const { product } = useProductCardInternal("ProductCardSwatches");
 	const { getSwatch } = useCommerce();
+	const text = useMessage();
 	if (!getSwatch || !product) return null;
 	for (const attribute of getProductAttributes(product)) {
 		const swatches = attribute.values.map((value) => ({
@@ -1844,16 +2282,13 @@ function ProductCardSwatches({ className }) {
 			children: /* @__PURE__ */ jsxs("p", {
 				className: "flex items-center gap-1.5 text-xs text-commerce-muted",
 				children: [
-					/* @__PURE__ */ jsxs("span", {
+					/* @__PURE__ */ jsx("span", {
 						className: "sr-only",
-						children: [
-							swatches.length,
-							" ",
-							inSentence(attribute.label),
-							" options:",
-							" ",
-							swatches.map((swatch) => swatch.label).join(", ")
-						]
+						children: text("swatchSummary", {
+							count: swatches.length,
+							attribute: inSentence(attribute.label),
+							values: swatches.map((swatch) => swatch.label).join(", ")
+						})
 					}),
 					shown.map((swatch) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
@@ -1892,6 +2327,7 @@ function ProductCardAction({ className, children }) {
 function LiveAction({ product, name, href, label }) {
 	const selectedSku = getSingleMatchedSku(product);
 	const hasVariants = getProductAttributes(product).length > 0;
+	const text = useMessage();
 	if (!hasVariants && selectedSku) return /* @__PURE__ */ jsx(AddToCart, {
 		sku: selectedSku,
 		name,
@@ -1910,11 +2346,13 @@ function LiveAction({ product, name, href, label }) {
 			action,
 			busy: false,
 			soldOut: false
-		}, hasVariants ? "Choose options" : "View product")
+		}, text(hasVariants ? "chooseOptions" : "viewProduct"))
 	});
 }
 function SampleAction({ sample, label }) {
 	const { add } = useSampleCart();
+	const text = useMessage();
+	const name = sampleName(text, sample);
 	const custom = renderLabel(label, {
 		action: "add",
 		busy: false,
@@ -1923,20 +2361,16 @@ function SampleAction({ sample, label }) {
 	return custom === null ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		className: `${secondaryButtonClass} w-full`,
-		"aria-label": `Add ${sample.name} to sample cart`,
-		onClick: () => add(sample.key),
-		children: "Add to cart"
+		"aria-label": text("addSampleToCart", { name }),
+		onClick: () => add(sample),
+		children: text("addToCart")
 	}) : /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: `${secondaryButtonClass} w-full`,
-		onClick: () => add(sample.key),
+		onClick: () => add(sample),
 		children: [custom, /* @__PURE__ */ jsxs("span", {
 			className: "sr-only",
-			children: [
-				" (",
-				sample.name,
-				", sample)"
-			]
+			children: [" ", text("sampleItemName", { name })]
 		})]
 	});
 }
@@ -1984,14 +2418,39 @@ function useRootParams(urlState) {
 //#region src/catalog.tsx
 const CatalogContext = createContext(null);
 const CatalogEmptyContext = createContext(null);
-const sampleCatalog = { source: "sample" };
+const builtInCatalog = {
+	source: "sample",
+	samples: builtInSamples
+};
 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, pageSize = 6, urlState = true }) {
+/** Read how many products the catalog shows, and whether they are samples, for a custom summary. */
+function useCatalog() {
+	const catalog = useCatalogInternal("useCatalog");
+	let count;
+	let status = "ready";
+	if (catalog.source === "sample") count = catalog.samples.length;
+	else {
+		count = catalog.nodes.length;
+		if (catalog.products.isPending) status = "loading";
+		else if (catalog.products.isError) status = "error";
+	}
+	const isSample = catalog.source === "sample";
+	return useMemo(() => ({
+		count,
+		isSample,
+		status
+	}), [
+		count,
+		isSample,
+		status
+	]);
+}
+/** Loads one cursor page of products, or the samples, and provides them to catalog parts. */
+function CatalogRoot({ children, className, sampleProducts = false, pageSize = 6, urlState = true }) {
 	const { connection } = useCommerce();
 	const [custom, setCustom] = useState(false);
 	const { register, has } = usePartRegistry(useCallback((registered) => setCustom(registered("empty")), []));
@@ -2003,6 +2462,25 @@ function CatalogRoot({ children, className, sampleProducts: sampleProducts$1 = f
 		custom
 	}), [register, custom]);
 	if (!Number.isSafeInteger(pageSize) || pageSize < 1) throw new Error(`CatalogRoot pageSize must be a whole number of 1 or more, not ${pageSize}.`);
+	const hostSamples = useStableSamples(Array.isArray(sampleProducts) ? sampleProducts : null);
+	const problem = useMemo(() => hostSamples && sampleProblem(hostSamples), [hostSamples]);
+	if (problem && connection === "unbound") throw new Error(problem);
+	useEffect(() => {
+		if (problem && process.env.NODE_ENV !== "production") console.error(`[gd-commerce-storefront] ${problem}`);
+	}, [problem]);
+	const { refresh } = useSampleCart();
+	useEffect(() => {
+		if (hostSamples && !problem && connection === "unbound") refresh(hostSamples);
+	}, [
+		hostSamples,
+		problem,
+		connection,
+		refresh
+	]);
+	const sampleCatalog = useMemo(() => hostSamples ? {
+		source: "sample",
+		samples: hostSamples
+	} : builtInCatalog, [hostSamples]);
 	let content;
 	if (connection === "ready") content = /* @__PURE__ */ jsx(CatalogLoader, {
 		className,
@@ -2010,7 +2488,7 @@ function CatalogRoot({ children, className, sampleProducts: sampleProducts$1 = f
 		urlState,
 		children
 	});
-	else if (connection === "unbound" && sampleProducts$1) content = /* @__PURE__ */ jsx(CatalogContext.Provider, {
+	else if (connection === "unbound" && sampleProducts) content = /* @__PURE__ */ jsx(CatalogContext.Provider, {
 		value: sampleCatalog,
 		children: /* @__PURE__ */ jsx("section", {
 			...partProps("catalog-root", className),
@@ -2027,6 +2505,13 @@ function CatalogRoot({ children, className, sampleProducts: sampleProducts$1 = f
 		children: content
 	}) });
 }
+/** The previous list while the samples and their fields are unchanged, so an inline list does not rebuild the cards. */
+function useStableSamples(samples) {
+	const [stable, setStable] = useState(samples);
+	const same = stable === samples || !!stable && !!samples && sameSamples(stable, samples);
+	if (!same) setStable(samples);
+	return same ? stable : samples;
+}
 function CatalogLoader({ children, className, pageSize, urlState }) {
 	const { config } = useCommerce();
 	const [params, setParams] = useRootParams(urlState);
@@ -2075,46 +2560,47 @@ function CatalogLoader({ children, className, pageSize, urlState }) {
 	});
 }
 /** 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 }) {
+function CatalogHeader({ title, description, className }) {
 	useCatalogInternal("CatalogHeader");
+	const text = useMessage();
 	return /* @__PURE__ */ jsxs("header", {
 		...partProps("catalog-header", className),
-		children: [/* @__PURE__ */ jsx("h1", {
+		children: [title !== null && /* @__PURE__ */ jsx("h1", {
 			className: "max-w-3xl text-balance text-3xl font-semibold leading-tight tracking-tight",
-			children: title
-		}), /* @__PURE__ */ jsx("p", {
+			children: title === void 0 ? text("catalogTitle") : title
+		}), description !== null && /* @__PURE__ */ jsx("p", {
 			className: "mt-1 max-w-xl text-base leading-7 text-commerce-muted",
-			children: description
+			children: description === void 0 ? text("catalogDescription") : description
 		})]
 	});
 }
 /** Announces loading, failure, or how many products the page shows. */
 function CatalogSummary({ className }) {
-	const catalog = useCatalogInternal("CatalogSummary");
+	const { key, values } = summary(useCatalogInternal("CatalogSummary"));
+	const text = useMessage();
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("catalog-summary", className),
 		children: /* @__PURE__ */ jsx("p", {
 			className: "text-sm text-commerce-muted",
 			role: "status",
-			children: summary(catalog)
+			children: text(key, values)
 		})
 	});
 }
 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"}`;
+	if (catalog.source === "sample") return {
+		key: "sampleCatalogSummary",
+		values: { currency: sampleCurrency }
+	};
+	if (catalog.products.isPending) return { key: "loadingProducts" };
+	if (catalog.products.isError) return { key: "productsUnavailable" };
+	return {
+		key: "productCount",
+		values: { count: catalog.nodes.length }
+	};
 }
 /** Two columns on phones, then as many 240px columns as fit. Shared with `RelatedProducts`. */
 const catalogGridClass = "grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-[repeat(auto-fill,minmax(240px,1fr))] lg:gap-y-12";
-const sampleItems = sampleProducts.map((sample) => ({
-	key: sample.key,
-	item: {
-		source: "sample",
-		sample
-	}
-}));
 const packagedCard$1 = /* @__PURE__ */ jsx(ProductCardRoot, {
 	className: packagedCardClass,
 	children: /* @__PURE__ */ jsx(PackagedCardParts, {})
@@ -2128,28 +2614,37 @@ function CatalogProducts({ className, children }) {
 	const customEmpty = useContext(CatalogEmptyContext)?.custom ?? false;
 	const card = hasChildren(children) ? children : packagedCard$1;
 	const nodes = catalog.source === "live" ? catalog.nodes : null;
+	const samples = catalog.source === "sample" ? catalog.samples : null;
 	const items = useMemo(() => nodes ? nodes.map((product) => ({
 		key: product.id ?? "",
 		item: {
 			source: "live",
 			product
 		}
-	})) : sampleItems, [nodes]);
+	})) : (samples ?? []).map((sample) => ({
+		key: sample.key,
+		item: {
+			source: "sample",
+			sample
+		}
+	})), [nodes, samples]);
 	const products = catalog.source === "live" ? catalog.products : null;
+	const { messages } = useCommerce();
+	const text = useMessage();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		products?.isError && /* @__PURE__ */ jsxs("div", {
 			role: "alert",
 			className: errorNoticeClass,
-			children: [/* @__PURE__ */ jsx("p", { children: message(products.error) }), /* @__PURE__ */ jsx("button", {
+			children: [/* @__PURE__ */ jsx("p", { children: describeError(products.error, messages) }), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: errorActionClass,
 				onClick: () => void products.refetch(),
-				children: "Retry products"
+				children: text("retryProducts")
 			})]
 		}),
 		products?.isSuccess && !items.length && !customEmpty && /* @__PURE__ */ jsx("p", {
 			className: "py-16 text-center text-commerce-muted",
-			children: "No products available."
+			children: text("noProducts")
 		}),
 		/* @__PURE__ */ jsx("div", {
 			...partProps("catalog-products", className),
@@ -2161,7 +2656,7 @@ function CatalogProducts({ className, children }) {
 				"aria-hidden": "true",
 				className: "motion-safe:animate-pulse",
 				children: [
-					/* @__PURE__ */ jsx("div", { className: "aspect-square bg-commerce-tint-strong" }),
+					/* @__PURE__ */ jsx("div", { className: "aspect-(--commerce-card-image-aspect,1/1) bg-commerce-tint-strong" }),
 					/* @__PURE__ */ jsxs("div", {
 						className: "space-y-2 pt-3",
 						children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-2/3 rounded bg-commerce-tint-strong" }), /* @__PURE__ */ jsx("div", { className: "h-4 w-1/4 rounded bg-commerce-tint-strong" })]
@@ -2183,10 +2678,11 @@ function CatalogEmpty({ className, children }) {
 	const catalog = useCatalogInternal("CatalogEmpty");
 	const register = useContext(CatalogEmptyContext)?.register;
 	useEffect(() => register?.("empty"), [register]);
+	const text = useMessage();
 	if (catalog.source === "sample" || !catalog.products.isSuccess || catalog.nodes.length) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("catalog-empty", className),
-		children: hasChildren(children) ? children : /* @__PURE__ */ jsx("p", { children: "No products available." })
+		children: hasChildren(children) ? children : /* @__PURE__ */ jsx("p", { children: text("noProducts") })
 	});
 }
 /**
@@ -2194,13 +2690,14 @@ function CatalogEmpty({ className, children }) {
 */
 function CatalogPagination({ className }) {
 	const catalog = useCatalogInternal("CatalogPagination");
+	const text = useMessage();
 	if (catalog.source === "sample") return null;
 	const { after, goToPage } = catalog;
 	const pageInfo = catalog.products.data?.skuGroups?.pageInfo;
 	const hasNext = !!(pageInfo?.hasNextPage && pageInfo.endCursor);
 	if (!after && !hasNext) return null;
 	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "Product pages",
+		"aria-label": text("productPages"),
 		...partProps("catalog-pagination", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-center gap-3",
@@ -2208,20 +2705,20 @@ function CatalogPagination({ className }) {
 				type: "button",
 				className: secondaryButtonClass,
 				onClick: () => goToPage(),
-				children: "First page"
+				children: text("firstPage")
 			}), hasNext && pageInfo?.endCursor && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: secondaryButtonClass,
 				onClick: () => goToPage(pageInfo.endCursor ?? void 0),
-				children: "Next page"
+				children: text("nextPage")
 			})]
 		})
 	});
 }
 /** The packaged catalog. Compose `CatalogRoot` and the catalog parts for a custom layout. */
-function Catalog({ title, description, showHeader = true, sampleProducts: sampleProducts$1, pageSize }) {
+function Catalog({ title, description, showHeader = true, sampleProducts, pageSize }) {
 	return /* @__PURE__ */ jsxs(CatalogRoot, {
-		sampleProducts: sampleProducts$1,
+		sampleProducts,
 		pageSize,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -2325,7 +2822,8 @@ function ProductDetailsRoot({ productId: productIdProp, className,...props }) {
 	}) });
 }
 function ProductDetailsLoader({ productId, className, children, urlState = true, loading, notFound, error }) {
-	const { config, getSwatch } = useCommerce();
+	const { config, getSwatch, messages } = useCommerce();
+	const text = useMessage();
 	const [params, setParams] = useRootParams(urlState);
 	const [quantity, setQuantity] = useState(1);
 	const [imageIndex, setImageIndex] = useState(0);
@@ -2403,7 +2901,7 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 		children: hasChildren(loading) ? loading : /* @__PURE__ */ jsx("p", {
 			role: "status",
 			className: "text-sm text-commerce-muted",
-			children: "Loading product…"
+			children: text("loadingProduct")
 		})
 	});
 	if (product.isError && !productNotFound) {
@@ -2412,22 +2910,22 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 			role: "alert",
 			...partProps("product-details-root", className),
 			children: renderLabel(error, {
-				message: message(product.error),
+				message: describeError(product.error, messages),
 				retry
 			}, /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("h1", {
 					className: "text-2xl font-semibold tracking-tight",
-					children: "Product unavailable"
+					children: text("productUnavailable")
 				}),
 				/* @__PURE__ */ jsx("p", {
 					className: `my-4 ${errorNoticeClass}`,
-					children: message(product.error)
+					children: describeError(product.error, messages)
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: buttonClass,
 					onClick: retry,
-					children: "Retry product"
+					children: text("retryProduct")
 				})
 			] }))
 		});
@@ -2436,11 +2934,11 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 		...partProps("product-details-root", className),
 		children: hasChildren(notFound) ? notFound : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h1", {
 			className: "text-2xl font-semibold tracking-tight",
-			children: "Product not found"
+			children: text("productNotFound")
 		}), /* @__PURE__ */ jsx(Link, {
 			className: `${buttonClass} mt-6`,
 			to: config.catalogPath,
-			children: "Back to shop"
+			children: text("backToShop")
 		})] })
 	});
 	const value = {
@@ -2539,11 +3037,11 @@ function getSoldOutValues(group, attributes, selections) {
 //#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."
+	incomplete: "selectAllOptions",
+	checking: "checkingVariant",
+	"variant-error": "variantCheckFailed",
+	unavailable: "combinationUnavailable",
+	"not-purchasable": "notPurchasable"
 };
 /** Above this many values, buttons wrap into a wall, so the option is a select. */
 const maxChoiceButtons = 8;
@@ -2608,14 +3106,11 @@ const swatchClass = "relative block h-9 w-9 overflow-hidden rounded-full border
 function ChoiceGroup({ label, selected, choices, missing, onSelect }) {
 	const name = useId();
 	const errorId = useId();
-	const error = missing && /* @__PURE__ */ jsxs("p", {
+	const text = useMessage();
+	const error = missing && /* @__PURE__ */ jsx("p", {
 		id: errorId,
 		className: "mt-2 inline-block rounded bg-red-50 px-2 py-1 text-sm text-red-800",
-		children: [
-			"Select ",
-			inSentence(label),
-			"."
-		]
+		children: text("selectAttributeError", { attribute: inSentence(label) })
 	});
 	if (choices.length > maxChoiceButtons) return /* @__PURE__ */ jsxs("fieldset", { children: [
 		/* @__PURE__ */ jsx("legend", {
@@ -2628,12 +3123,12 @@ function ChoiceGroup({ label, selected, choices, missing, onSelect }) {
 			"aria-describedby": missing ? errorId : void 0,
 			value: selected,
 			onChange: (event) => onSelect(event.target.value),
-			children: [/* @__PURE__ */ jsxs("option", {
+			children: [/* @__PURE__ */ jsx("option", {
 				value: "",
-				children: ["Select ", inSentence(label)]
+				children: text("selectAttribute", { attribute: inSentence(label) })
 			}), choices.map((choice) => /* @__PURE__ */ jsx("option", {
 				value: choice.value,
-				children: choice.soldOut ? `${choice.label} (sold out)` : choice.label
+				children: choice.soldOut ? text("soldOutOption", { label: choice.label }) : choice.label
 			}, choice.value))]
 		}),
 		error
@@ -2654,7 +3149,7 @@ function ChoiceGroup({ label, selected, choices, missing, onSelect }) {
 				className: `flex flex-wrap ${swatches ? "gap-3" : "gap-2"}`,
 				children: choices.map((choice) => /* @__PURE__ */ jsxs("label", {
 					className: "group relative cursor-pointer",
-					title: swatches ? `${choice.label}${choice.soldOut ? ", sold out" : ""}` : void 0,
+					title: swatches ? choice.soldOut ? text("soldOutChoice", { label: choice.label }) : choice.label : void 0,
 					children: [/* @__PURE__ */ jsx("input", {
 						type: "radio",
 						className: "peer absolute inset-0 z-10 m-0 cursor-pointer opacity-0",
@@ -2662,7 +3157,7 @@ function ChoiceGroup({ label, selected, choices, missing, onSelect }) {
 						value: choice.value,
 						checked: choice.value === selected,
 						"aria-invalid": missing || void 0,
-						"aria-label": choice.soldOut ? `${choice.label}, sold out` : void 0,
+						"aria-label": choice.soldOut ? text("soldOutChoice", { label: choice.label }) : void 0,
 						"data-commerce-control": "choice",
 						onChange: () => onSelect(choice.value)
 					}), swatches ? /* @__PURE__ */ jsxs("span", {
@@ -2688,12 +3183,13 @@ function ChoiceGroup({ label, selected, choices, missing, onSelect }) {
 function SkuOption() {
 	const { skuOptions, explicitSkuId, selectSku, showMissing } = useProductDetailsInternal("ProductDetailsOptions");
 	useSkuOptionRegistration();
+	const text = useMessage();
 	const missing = showMissing && !explicitSkuId;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-details-sku-option"),
 		"data-commerce-missing": missing || void 0,
 		children: /* @__PURE__ */ jsx(ChoiceGroup, {
-			label: "Option",
+			label: text("skuOptionLabel"),
 			selected: explicitSkuId,
 			missing,
 			onSelect: selectSku,
@@ -2737,6 +3233,8 @@ function ProductDetailsOption({ attribute, className }) {
 */
 function ProductDetailsPurchaseStatus({ className }) {
 	const { status, variantError, retryVariant } = useProductDetailsInternal("ProductDetailsPurchaseStatus");
+	const { messages } = useCommerce();
+	const text = useMessage();
 	let content;
 	switch (status) {
 		case "ready":
@@ -2745,11 +3243,11 @@ function ProductDetailsPurchaseStatus({ className }) {
 			content = /* @__PURE__ */ jsxs("div", {
 				role: "alert",
 				className: errorNoticeClass,
-				children: [/* @__PURE__ */ jsx("p", { children: message(variantError) }), /* @__PURE__ */ jsx("button", {
+				children: [/* @__PURE__ */ jsx("p", { children: describeError(variantError, messages) }), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: errorActionClass,
 					onClick: retryVariant,
-					children: "Retry availability"
+					children: text("retryAvailability")
 				})]
 			});
 			break;
@@ -2757,20 +3255,20 @@ function ProductDetailsPurchaseStatus({ className }) {
 			content = /* @__PURE__ */ jsx("p", {
 				role: "status",
 				className: errorNoticeClass,
-				children: disabledReasons[status]
+				children: text(disabledReasons[status])
 			});
 			break;
 		case "not-purchasable":
 			content = /* @__PURE__ */ jsx("p", {
 				className: "text-sm text-commerce-muted",
-				children: disabledReasons[status]
+				children: text(disabledReasons[status])
 			});
 			break;
 		case "checking":
 			content = /* @__PURE__ */ jsx("p", {
 				role: "status",
 				className: "text-sm text-commerce-muted",
-				children: disabledReasons[status]
+				children: text(disabledReasons[status])
 			});
 			break;
 	}
@@ -2782,13 +3280,14 @@ function ProductDetailsPurchaseStatus({ className }) {
 /** Stock for the verified SKU. Renders nothing until a SKU is verified. */
 function ProductDetailsAvailability({ className }) {
 	const { selectedSku, availableQuantity } = useProductDetailsInternal("ProductDetailsAvailability");
+	const text = useMessage();
 	if (!selectedSku) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-details-availability", className),
 		children: /* @__PURE__ */ jsx("p", {
 			className: "text-sm text-commerce-muted",
 			"aria-live": "polite",
-			children: availableQuantity === null ? "Available to order" : isSoldOut(availableQuantity) ? "This variant is out of stock" : `${availableQuantity} available`
+			children: availableQuantity === null ? text("availableToOrder") : isSoldOut(availableQuantity) ? text("variantOutOfStock") : text("availableCount", { count: availableQuantity })
 		})
 	});
 }
@@ -2815,9 +3314,11 @@ function ProductDetailsQuantity({ className }) {
 	const { selectedSku, availableQuantity, quantity, setQuantity, name } = useProductDetailsInternal("ProductDetailsQuantity");
 	const id = useId();
 	const problemId = useId();
+	const text = useMessage();
 	const soldOut = !!selectedSku && isSoldOut(availableQuantity);
 	const max = selectedSku && availableQuantity !== null && availableQuantity > 0 ? availableQuantity : null;
-	const problem = soldOut ? null : quantityProblem(quantity, max);
+	const issue = soldOut ? null : quantityProblem(quantity, max);
+	const problem = issue && text(issue.key, issue.values);
 	const current = Number.isInteger(quantity) ? quantity : 1;
 	return /* @__PURE__ */ jsxs("div", {
 		...partProps("product-details-quantity", className),
@@ -2825,7 +3326,7 @@ function ProductDetailsQuantity({ className }) {
 			/* @__PURE__ */ jsx("label", {
 				htmlFor: id,
 				className: "sr-only",
-				children: "Quantity"
+				children: text("quantity")
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "inline-flex items-center rounded-lg border border-commerce-edge",
@@ -2833,7 +3334,7 @@ function ProductDetailsQuantity({ className }) {
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: stepperButtonClass,
-						"aria-label": `Decrease quantity of ${name}`,
+						"aria-label": text("decreaseQuantity", { name }),
 						"data-commerce-control": "decrease",
 						disabled: soldOut || current <= 1,
 						onClick: () => setQuantity(current - 1),
@@ -2855,7 +3356,7 @@ function ProductDetailsQuantity({ className }) {
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: stepperButtonClass,
-						"aria-label": `Increase quantity of ${name}`,
+						"aria-label": text("increaseQuantity", { name }),
 						"data-commerce-control": "increase",
 						disabled: soldOut || max !== null && current >= max,
 						onClick: () => setQuantity(current + 1),
@@ -2880,6 +3381,7 @@ function ProductDetailsAddToCart({ className, children }) {
 	const { selectedSku, name, quantity, status, price, attributes, selections, requestMissing } = useProductDetailsInternal("ProductDetailsAddToCart");
 	const { config } = useCommerce();
 	const money$1 = useMoney();
+	const text = useMessage();
 	const reasonId = useId();
 	if (selectedSku) {
 		const unit = price?.value?.value;
@@ -2892,8 +3394,8 @@ function ProductDetailsAddToCart({ className, children }) {
 				quantity,
 				className: buttonClass,
 				block: true,
-				label: total && `Add to cart · ${total}`,
-				labelName: total ? `Add to cart, ${total}` : void 0,
+				label: total && text("addToCartWithPrice", { price: total }),
+				labelName: total ? text("addToCartWithPriceName", { price: total }) : void 0,
 				children
 			})
 		});
@@ -2910,7 +3412,7 @@ function ProductDetailsAddToCart({ className, children }) {
 				children: renderLabel(children, {
 					busy: false,
 					soldOut: false
-				}, next ? `Select ${inSentence(next)}` : "Select an option")
+				}, next ? text("selectAttribute", { attribute: inSentence(next) }) : text("selectOption"))
 			})
 		});
 	}
@@ -2925,11 +3427,11 @@ function ProductDetailsAddToCart({ className, children }) {
 			children: renderLabel(children, {
 				busy: false,
 				soldOut: false
-			}, "Add to cart")
+			}, text("addToCart"))
 		}), /* @__PURE__ */ jsx("span", {
 			id: reasonId,
 			hidden: true,
-			children: status === "ready" ? "" : disabledReasons[status]
+			children: status === "ready" ? "" : text(disabledReasons[status])
 		})]
 	});
 }
@@ -2958,6 +3460,7 @@ function ProductDetails() {
 function ProductDetailsBackLink({ className, children }) {
 	useProductDetailsInternal("ProductDetailsBackLink");
 	const { config } = useCommerce();
+	const text = useMessage();
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-details-back-link", className),
 		children: /* @__PURE__ */ jsx(Link, {
@@ -2975,13 +3478,14 @@ function ProductDetailsBackLink({ className, children }) {
 					strokeLinecap: "round",
 					strokeLinejoin: "round"
 				})
-			}), "Back to shop"] }))
+			}), text("backToShop")] }))
 		})
 	});
 }
 /** 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");
+	const text = useMessage();
 	return /* @__PURE__ */ jsxs("div", {
 		...partProps("product-details-gallery", className),
 		children: [/* @__PURE__ */ jsx("div", {
@@ -2995,7 +3499,7 @@ function ProductDetailsGallery({ className }) {
 			children: images.map((url, index) => /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: `h-20 w-20 shrink-0 overflow-hidden bg-commerce-tint outline-offset-2 transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-current ${imageIndex === index ? "outline outline-2 outline-current" : "opacity-60 hover:opacity-100"}`,
-				"aria-label": `View image ${index + 1}`,
+				"aria-label": text("viewImage", { number: index + 1 }),
 				"aria-pressed": imageIndex === index,
 				"data-commerce-control": "thumbnail",
 				onClick: () => setImageIndex(index),
@@ -3013,12 +3517,13 @@ function ProductDetailsGallery({ className }) {
 */
 function ProductDetailsBadge({ className }) {
 	const { price, product } = useProductDetailsInternal("ProductDetailsBadge");
+	const text = useMessage();
 	if (!(price ? isOnSale(price.value?.value, price.compareAtValue?.value) : isProductOnSale(product))) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-details-badge", className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: saleBadgeClass,
-			children: "Sale"
+			children: text("sale")
 		})
 	});
 }
@@ -3041,6 +3546,7 @@ function ProductDetailsPrice({ className }) {
 	const { price, product } = useProductDetailsInternal("ProductDetailsPrice");
 	const { config } = useCommerce();
 	const money$1 = useMoney();
+	const text = useMessage();
 	let compareAt = null;
 	if (price?.compareAtValue?.value != null && isOnSale(price.value?.value, price.compareAtValue.value)) compareAt = money$1(price.compareAtValue.value, price.compareAtValue.currencyCode ?? config.currencyCode);
 	else if (!price) {
@@ -3053,9 +3559,9 @@ function ProductDetailsPrice({ className }) {
 			"aria-live": "polite",
 			className: "flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xl font-medium tabular-nums",
 			"data-testid": "product-price",
-			children: [price?.value?.value != null ? money$1(price.value.value, price.value.currencyCode ?? config.currencyCode) : product.priceRange?.min != null ? `From ${money$1(product.priceRange.min)}` : "Price unavailable", compareAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			children: [price?.value?.value != null ? money$1(price.value.value, price.value.currencyCode ?? config.currencyCode) : product.priceRange?.min != null ? text("priceFrom", { price: money$1(product.priceRange.min) }) : text("priceUnavailable"), compareAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				className: "sr-only",
-				children: "Was"
+				children: text("wasPrice")
 			}), /* @__PURE__ */ jsx("del", {
 				className: "text-base font-normal text-commerce-muted",
 				children: compareAt
@@ -3087,10 +3593,11 @@ const packagedCard = /* @__PURE__ */ jsx(ProductCardRoot, {
 * the products are the catalog's first ones. Renders nothing until they load, when none are left, if the request
 * fails, or while no store is connected.
 */
-function RelatedProducts({ productId: productIdProp, title = "You may also like", limit = 4, className, children }) {
+function RelatedProducts({ productId: productIdProp, title, limit = 4, className, children }) {
 	const { productId: routeProductId = "" } = useParams();
 	const productId = productIdProp ?? routeProductId;
 	const { config, connection } = useCommerce();
+	const text = useMessage();
 	const headingId = useId();
 	const first = limit + 1;
 	const products = useQuery({
@@ -3117,12 +3624,12 @@ function RelatedProducts({ productId: productIdProp, title = "You may also like"
 	if (connection !== "ready" || !related.length) return null;
 	const card = hasChildren(children) ? children : packagedCard;
 	return /* @__PURE__ */ jsx(StorefrontSurface, { children: /* @__PURE__ */ jsxs("section", {
-		"aria-labelledby": headingId,
+		"aria-labelledby": title === null ? void 0 : headingId,
 		...partProps("related-products", className),
-		children: [/* @__PURE__ */ jsx("h2", {
+		children: [title !== null && /* @__PURE__ */ jsx("h2", {
 			id: headingId,
 			className: "mb-6 text-xl font-semibold tracking-tight",
-			children: title
+			children: title === void 0 ? text("relatedTitle") : title
 		}), /* @__PURE__ */ jsx("div", {
 			className: catalogGridClass,
 			children: related.map((product) => /* @__PURE__ */ jsx(CatalogItemContext.Provider, {
@@ -3137,4 +3644,4 @@ function RelatedProducts({ productId: productIdProp, title = "You may also like"
 }
 
 //#endregion
-export { AddToCartButton, ApiError, CartButton, CartCheckout, CartCheckoutNote, CartClose, CartContinueShopping, CartDescription, CartDrawer, CartDrawerRoot, CartEmpty, CartItemImage, CartItemName, CartItemOptions, CartItemPrice, CartItemQuantity, CartItemRemove, CartItemRoot, CartItems, CartNotices, CartRoot, CartSubtotal, CartSummary, CartTitle, Catalog, CatalogEmpty, CatalogHeader, CatalogPagination, CatalogProducts, CatalogRoot, CatalogSummary, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductCardAction, ProductCardBadge, ProductCardDescription, ProductCardImage, ProductCardPrice, ProductCardRoot, ProductCardSwatches, ProductCardTitle, ProductDetails, ProductDetailsAddToCart, ProductDetailsAvailability, ProductDetailsBackLink, ProductDetailsBadge, ProductDetailsDescription, ProductDetailsGallery, ProductDetailsOption, ProductDetailsOptions, ProductDetailsPrice, ProductDetailsPurchase, ProductDetailsPurchaseStatus, ProductDetailsQuantity, ProductDetailsRoot, ProductDetailsTitle, ProductImage, RelatedProducts, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCart, useCartItem, useCommerce, useMoney, useProductCard, useProductDetails, useProductDetailsOption };
+export { AddToCartButton, ApiError, CartButton, CartCheckout, CartCheckoutNote, CartClose, CartContinueShopping, CartDescription, CartDrawer, CartDrawerRoot, CartEmpty, CartItemImage, CartItemName, CartItemOptions, CartItemPrice, CartItemQuantity, CartItemRemove, CartItemRoot, CartItems, CartNotices, CartRoot, CartSubtotal, CartSummary, CartTitle, Catalog, CatalogEmpty, CatalogHeader, CatalogPagination, CatalogProducts, CatalogRoot, CatalogSummary, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductCardAction, ProductCardBadge, ProductCardDescription, ProductCardImage, ProductCardPrice, ProductCardRoot, ProductCardSwatches, ProductCardTitle, ProductDetails, ProductDetailsAddToCart, ProductDetailsAvailability, ProductDetailsBackLink, ProductDetailsBadge, ProductDetailsDescription, ProductDetailsGallery, ProductDetailsOption, ProductDetailsOptions, ProductDetailsPrice, ProductDetailsPurchase, ProductDetailsPurchaseStatus, ProductDetailsQuantity, ProductDetailsRoot, ProductDetailsTitle, ProductImage, RelatedProducts, enUS, formatMessage, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, moneyRange, useCart, useCartItem, useCatalog, useCommerce, useMessage, useMoney, useMoneyRange, useProductCard, useProductDetails, useProductDetailsOption };