@cartbase/storefront 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Storefront SDK + UI component library for Cartbase stores: typed API client, checkout orchestration, cart drawer, product/catalog components, tracking. Source-shipped TypeScript — add it to transpilePackages.",
   "license": "MIT",
   "repository": {
@@ -51,6 +51,7 @@
     "./lib/sort-products": "./src/lib/sort-products.ts",
     "./lib/price": "./src/lib/price.tsx",
     "./lib/payment-constants": "./src/lib/payment-constants.ts",
+    "./lib/country-name": "./src/lib/country-name.ts",
     "./lib/store-api-error": "./src/lib/store-api-error.ts",
     "./lib/hooks/use-intersection": "./src/lib/hooks/use-intersection.ts",
     "./lib/hooks/use-toggle-state": "./src/lib/hooks/use-toggle-state.ts",
@@ -157,6 +158,8 @@
     "./products/product-actions": "./src/products/product-actions.tsx",
     "./products/mobile-actions": "./src/products/mobile-actions.tsx",
     "./products/product-tabs": "./src/products/product-tabs.tsx",
+    "./products/product-specs": "./src/products/product-specs.tsx",
+    "./products/product-promises": "./src/products/product-promises.tsx",
     "./products/product-info": "./src/products/product-info.tsx",
     "./products/product-preview": "./src/products/product-preview.tsx",
     "./products/related-products": "./src/products/related-products.tsx",

package/src/cart-drawer/labels.ts

@@ -99,7 +99,11 @@ export const defaultCartDrawerLabels: CartDrawerLabels = {
   addToCart: "Add",
 
   subtotal: "Subtotal",
-  taxAndShipping: "VAT included. Shipping calculated at checkout.",
+  // Neutral and true on every store: it states WHEN the numbers are worked
+  // out, not which tax regime applies. It read "VAT included. Shipping
+  // calculated at checkout." until 2026-09-13, and the first half is false
+  // wherever tax is added at checkout instead of sitting in the price.
+  taxAndShipping: "Taxes and shipping calculated at checkout.",
   shipping: "Shipping",
   free: "FREE",
   calculatedAtCheckout: "Calculated at checkout",

package/src/checkout/address-form.tsx

@@ -5,6 +5,7 @@ import type { ChangeEvent } from "react"
 import type { CartAddress } from "../api/carts"
 import type { CustomerAddress } from "../api/customers"
 import { CountryFlag } from "../common/country-flag"
+import { countryName } from "../lib/country-name"
 import { Field } from "../primitives/field"
 import { SelectField } from "../primitives/select-field"
 import { AddressSelect } from "./address-select"
@@ -105,20 +106,26 @@ export function CheckoutAddressForm({
 
         {!hideCountry && (
           countries.length === 1 ? (
-            // Single-country region — render a readonly field showing
-            // the localized country name. (Library-default rendering
-            // when `hideCountry` isn't passed.) The actual country_code
-            // remains in formData so submission still carries it.
+            // One country — a read-only field showing its name, with its
+            // flag, so a fixed country reads the same as a chosen one. The
+            // actual country_code stays in formData, so submission still
+            // carries it.
+            //
+            // The name has THREE sources and never falls through to blank
+            // (it did until 2026-09-13, which is how evoo showed an empty
+            // Country box): the store's own word for it, the catalogue's
+            // name, then the code resolved through the runtime.
             <Field
               label={labels.country}
               name="shipping_address.country_code_display"
               value={
-                labels.singleCountryName ??
-                countries[0]?.display_name ??
-                ""
+                labels.singleCountryName ||
+                countries[0]?.display_name ||
+                countryName(countries[0]?.iso_2)
               }
               onChange={() => {}}
               readOnly
+              leading={<CountryFlag code={countries[0]?.iso_2} />}
             />
           ) : (
             <SelectField

package/src/checkout/context.tsx

@@ -50,6 +50,22 @@ export function useOrderConfirmedPath(): string {
   return useContext(CheckoutContext).orderConfirmedPath
 }
 
+/**
+ * A NESTED PROVIDER INHERITS, it does not reset (fixed 2026-09-13).
+ *
+ * This used to merge over `defaultCheckoutLabels`, which are English, so a
+ * store that mounted a second provider purely to set `orderConfirmedPath`
+ * silently threw away its whole language. That is not a hypothetical: the
+ * reference storefront does exactly that on its checkout page, so every
+ * scaffolded store ran an English checkout no matter which locale it
+ * mounted, and the Bulgarian `singleCountryName` vanished with the rest,
+ * leaving an EMPTY country field. Alexander found it on evoo.
+ *
+ * Reading the enclosing value first makes both cases right: with no
+ * provider above, the context default IS the English baseline, so a single
+ * provider behaves exactly as before; with one above, only the keys this
+ * one names change.
+ */
 export function CheckoutProvider({
   labels: labelOverrides,
   orderConfirmedPath,
@@ -59,15 +75,16 @@ export function CheckoutProvider({
   orderConfirmedPath?: string
   children: ReactNode
 }) {
+  const inherited = useContext(CheckoutContext)
   const labels: CheckoutLabels = {
-    ...defaultCheckoutLabels,
+    ...inherited.labels,
     ...labelOverrides,
   }
   return (
     <CheckoutContext.Provider
       value={{
         labels,
-        orderConfirmedPath: orderConfirmedPath ?? DEFAULT_CONFIRMED_PATH,
+        orderConfirmedPath: orderConfirmedPath ?? inherited.orderConfirmedPath,
       }}
     >
       {children}

package/src/checkout/labels.ts

@@ -81,7 +81,13 @@ export type CheckoutLabels = {
   shippingCalc: string
   shippingFree: string
   tax: string
-  taxTooltip: string
+  /**
+   * What the tax is, in the store's words. OPTIONAL and undefined by
+   * default: a rate ("20% VAT") or a regime ("included in prices") is the
+   * store's fact, and the tooltip is simply absent when the store says
+   * nothing.
+   */
+  taxTooltip?: string
   total: string
   discount: string
   discountCode: string
@@ -306,8 +312,16 @@ export const defaultCheckoutLabels: CheckoutLabels = {
   shipping: "Shipping",
   shippingCalc: "Calculated at checkout",
   shippingFree: "Free",
-  tax: "VAT incl.",
-  taxTooltip: "20% VAT is included in prices",
+  // The row NAME, neutral on purpose: it sits beside a number, so it must
+  // say something, but "VAT incl." names one tax regime and asserts that
+  // prices include it. That is Bulgaria's answer, not Germany's, and not any
+  // US state's. A store that wants its own word sets it in its pack.
+  tax: "Tax",
+  // NO DEFAULT. The explanation used to read "20% VAT is included in
+  // prices", a rate and a regime the library cannot know, translated into
+  // three languages. A store writes it or the tooltip does not appear at
+  // all, which costs a shopper nothing.
+  taxTooltip: undefined,
   total: "Total",
   discount: "Discount",
   discountCode: "Discount code",

package/src/checkout/order-summary.tsx

@@ -431,24 +431,33 @@ export function OrderSummary({
           )}
 
           <div className="flex justify-between text-sm">
+            {/* The tax row's NAME always shows: it names the number beside
+                it. The explanation only shows if the store wrote one, because
+                what a tax is and whether it is included in the price is the
+                store's fact, not ours (2026-09-13: the default said "20% VAT
+                is included in prices", Bulgaria's rate, to every merchant). */}
             <span className="text-muted-foreground flex items-center gap-1 relative group">
               {labels.tax}
-              <svg
-                className="w-3.5 h-3.5 text-muted-foreground cursor-help"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <span className="absolute left-0 bottom-full mb-1.5 px-2.5 py-1.5 text-xs text-card bg-foreground rounded-md whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity">
-                {labels.taxTooltip}
-              </span>
+              {labels.taxTooltip && (
+                <>
+                  <svg
+                    className="w-3.5 h-3.5 text-muted-foreground cursor-help"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <span className="absolute left-0 bottom-full mb-1.5 px-2.5 py-1.5 text-xs text-card bg-foreground rounded-md whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity">
+                    {labels.taxTooltip}
+                  </span>
+                </>
+              )}
             </span>
             <Price
               amount={cart.tax_total ?? 0}

package/src/checkout/use-checkout-orchestration.ts

@@ -10,6 +10,7 @@ import {
 } from "react"
 
 import type { StorefrontClient } from "../api/http"
+import { countryName } from "../lib/country-name"
 import { listCountries, type StoreCountry } from "../api/regions"
 import {
   completeCart,
@@ -408,7 +409,10 @@ export function useCheckoutOrchestration({
         : storeCountries && storeCountries.length
           ? storeCountries
           : countryCode
-            ? [{ iso_2: countryCode, display_name: "" }]
+            ? // A fallback country still needs a NAME: this used to be an
+              // empty string, and the address form rendered a blank country
+              // field for it (evoo, 2026-09-13).
+              [{ iso_2: countryCode, display_name: countryName(countryCode) }]
             : [],
     [countries, storeCountries, countryCode]
   )
@@ -1132,9 +1136,11 @@ export function useCheckoutOrchestration({
         )
       })
     } else {
-      setPaymentError(
-        "Плащането не беше потвърдено. Моля, опитайте отново или изберете друг метод."
-      )
+      // The store's own words. This was a hardcoded BULGARIAN sentence until
+      // 2026-09-13: the 2026-09-13 morning sweep fixed the three error-copy
+      // modules and missed this one, because it sits in the 3DS-return
+      // effect rather than in a copy module. Same meaning, from the pack.
+      setPaymentError(checkoutLabels.paymentErrors.paymentNotAuthorized)
       logError?.("place_order_error", "redirect_not_succeeded", {
         via: "3ds_return",
         cartId: cart.id,

package/src/lib/country-name.ts

@@ -0,0 +1,59 @@
+/**
+ * The name of a country, from its ISO-3166 alpha-2 code.
+ *
+ * A code is a machine string: "bg" is how a cart address stores a country,
+ * never how a shopper reads it. The catalogue from
+ * `GET /api/store/countries` carries real names, so this is for the one case
+ * where a code arrives WITHOUT one: the checkout hook's fallback when the
+ * country list cannot be loaded. It used to hand the address form
+ * `{iso_2: "bg", display_name: ""}`, and the form rendered an EMPTY country
+ * field (found on evoo, 2026-09-13).
+ *
+ * `Intl.DisplayNames` is in the runtime, so this needs no bundled table and
+ * knows every country in every language the browser does.
+ *
+ * THE LOCALE IS EXPLICIT AND DEFAULTS TO ENGLISH ON PURPOSE. Letting Intl
+ * pick the runtime default would name the country in the SERVER's language
+ * during a server render and in the BROWSER's language after hydration,
+ * which is a hydration mismatch on any store whose visitors are not in the
+ * server's locale. Pass the store's own language to translate it:
+ *
+ *   const locale = useStorefrontLocale()
+ *   countryName("bg", locale.code)   // "България"
+ *
+ * Three behaviours verified against the runtime rather than assumed
+ * (2026-09-13): a LOWERCASE code returns itself unchanged, so the code is
+ * uppercased here; a malformed code throws `RangeError`, so it is shape
+ * checked and wrapped; and an unknown-but-well-formed code resolves to
+ * "Unknown Region" unless `fallback: "none"` is set, which is why it is set
+ * and why the uppercase code is the last resort.
+ */
+
+const cache = new Map<string, Intl.DisplayNames>()
+
+function namer(locale: string): Intl.DisplayNames | null {
+  const hit = cache.get(locale)
+  if (hit) return hit
+  try {
+    const made = new Intl.DisplayNames([locale], { type: "region", fallback: "none" })
+    cache.set(locale, made)
+    return made
+  } catch {
+    return null
+  }
+}
+
+export function countryName(
+  code: string | null | undefined,
+  locale: string = "en"
+): string {
+  const iso2 = code?.trim()
+  if (!iso2 || !/^[a-z]{2}$/i.test(iso2)) return ""
+
+  const upper = iso2.toUpperCase()
+  try {
+    return namer(locale)?.of(upper) || upper
+  } catch {
+    return upper
+  }
+}

package/src/locales/bg.ts

@@ -36,16 +36,8 @@ export const bg: StorefrontLocale = {
     countryOfOrigin: "Произход",
     type: "Тип",
     weight: "Тегло",
+    weightUnit: "г",
     dimensions: "Размери",
-    fastDelivery: "Бърза доставка",
-    fastDeliveryDescription:
-      "Вашата пратка ще пристигне в рамките на 3-5 работни дни до офис на куриер или до вашия адрес.",
-    simpleExchanges: "Лесна замяна",
-    simpleExchangesDescription:
-      "Размерът не е точен? Без проблем — ще заменим продукта с нов.",
-    easyReturns: "Лесно връщане",
-    easyReturnsDescription:
-      "Просто върнете продукта и ще ви възстановим парите. Без въпроси — ще направим всичко възможно връщането да бъде безпроблемно.",
     relatedProducts: "Подобни продукти",
     relatedProductsDescription:
       "Може да ви заинтересуват и тези продукти.",
@@ -160,8 +152,12 @@ export const bg: StorefrontLocale = {
     shipping: "Доставка",
     shippingCalc: "Ще бъде изчислена",
     shippingFree: "Безплатна",
+    // The WORD is the pack's (a Bulgarian store's prices include ДДС). The
+    // RATE is not: it is the store's fact and it changes by law. Declared
+    // and deliberately empty, so the tooltip does not appear until a store
+    // writes its own.
     tax: "Вкл. ДДС",
-    taxTooltip: "ДДС 20% е включен в цените",
+    taxTooltip: undefined,
     total: "Обща сума",
     discount: "Отстъпка",
     discountCode: "Код за отстъпка",

package/src/locales/es.ts

@@ -42,16 +42,8 @@ export const es: StorefrontLocale = {
     countryOfOrigin: "País de origen",
     type: "Tipo",
     weight: "Peso",
+    weightUnit: "g",
     dimensions: "Dimensiones",
-    fastDelivery: "Entrega rápida",
-    fastDeliveryDescription:
-      "Tu paquete llegará en 3-5 días laborables a tu punto de recogida o a la comodidad de tu casa.",
-    simpleExchanges: "Cambios sencillos",
-    simpleExchangesDescription:
-      "¿No te queda del todo bien? Sin problema, cambiamos tu producto por uno nuevo.",
-    easyReturns: "Devoluciones fáciles",
-    easyReturnsDescription:
-      "Solo tienes que devolver tu producto y te reembolsamos el dinero. Sin preguntas: haremos todo lo posible para que tu devolución sea sencilla.",
     relatedProducts: "Productos relacionados",
     relatedProductsDescription:
       "Quizá también te interesen estos productos.",
@@ -164,8 +156,12 @@ export const es: StorefrontLocale = {
     shipping: "Envío",
     shippingCalc: "Se calcula en el pago",
     shippingFree: "Gratis",
+    // The WORD is the pack's. The RATE is not, and this one was WRONG: it
+    // said 20%, which is Bulgaria's rate, while Spain's IVA is 21%. It came
+    // from translating the old English default instead of asking whose fact
+    // it was. Declared and deliberately empty.
     tax: "IVA incl.",
-    taxTooltip: "El IVA del 20% está incluido en los precios",
+    taxTooltip: undefined,
     total: "Total",
     discount: "Descuento",
     discountCode: "Código de descuento",

package/src/order/context.tsx

@@ -9,6 +9,13 @@ import { defaultOrderLabels, type OrderLabels } from "./labels"
 
 const OrderLabelsContext = createContext<OrderLabels>(defaultOrderLabels)
 
+/**
+ * A nested provider INHERITS the one above it rather than resetting to the
+ * English defaults (fixed 2026-09-13, the same defect that made evoo's
+ * checkout English: see `checkout/context.tsx`). With no provider above,
+ * the context default IS the English baseline, so a single provider behaves
+ * exactly as before.
+ */
 export function OrderLabelsProvider({
   labels,
   children,
@@ -16,9 +23,8 @@ export function OrderLabelsProvider({
   labels?: Partial<OrderLabels>
   children: ReactNode
 }) {
-  const merged = labels
-    ? { ...defaultOrderLabels, ...labels }
-    : defaultOrderLabels
+  const inherited = useContext(OrderLabelsContext)
+  const merged = labels ? { ...inherited, ...labels } : inherited
 
   return (
     <OrderLabelsContext.Provider value={merged}>

package/src/primitives/field.tsx

@@ -39,6 +39,13 @@ export type FieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
    * confusing it for an error.
    */
   pulse?: boolean
+  /**
+   * A mark shown inside the control, before the value: a flag, a currency
+   * symbol. Decorative and click-through. The value and the floating label
+   * make room for it. Same slot name and behaviour as `SelectField`, so a
+   * country reads the same whether it is chosen or fixed.
+   */
+  leading?: React.ReactNode
 }
 
 export const Field = React.forwardRef<HTMLInputElement, FieldProps>(
@@ -52,6 +59,7 @@ export const Field = React.forwardRef<HTMLInputElement, FieldProps>(
       onFocus,
       onBlur,
       pulse,
+      leading,
       ...props
     },
     ref
@@ -94,7 +102,8 @@ export const Field = React.forwardRef<HTMLInputElement, FieldProps>(
             onBlur?.(e)
           }}
           className={cn(
-            "w-full h-[44px] px-3 pt-[14px] pb-[2px] text-sm rounded-lg border",
+            "w-full h-[44px] pt-[14px] pb-[2px] text-sm rounded-lg border",
+            leading ? "pl-10 pr-3" : "px-3",
             "transition-colors duration-300 outline-none",
             "focus:border-primary focus:bg-primary/5",
             disabled
@@ -109,9 +118,15 @@ export const Field = React.forwardRef<HTMLInputElement, FieldProps>(
           )}
           {...props}
         />
+        {leading && (
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center">
+            {leading}
+          </span>
+        )}
         <span
           className={cn(
-            "absolute pointer-events-none left-3 top-[14px] text-sm leading-4 origin-top-left",
+            "absolute pointer-events-none top-[14px] text-sm leading-4 origin-top-left",
+            leading ? "left-10" : "left-3",
             "transition-transform transition-colors duration-300 ease-out",
             showPulse ? "text-sky-600" : "text-muted-foreground",
             isActive ? "-translate-y-2 scale-[0.77]" : "translate-y-0 scale-100"

package/src/products/context.tsx

@@ -11,6 +11,13 @@ import { defaultProductLabels, type ProductLabels } from "./labels"
 
 const ProductLabelsContext = createContext<ProductLabels>(defaultProductLabels)
 
+/**
+ * A nested provider INHERITS the one above it rather than resetting to the
+ * English defaults (fixed 2026-09-13, the same defect that made evoo's
+ * checkout English: see `checkout/context.tsx`). With no provider above,
+ * the context default IS the English baseline, so a single provider behaves
+ * exactly as before.
+ */
 export function ProductLabelsProvider({
   labels,
   children,
@@ -18,9 +25,8 @@ export function ProductLabelsProvider({
   labels?: Partial<ProductLabels>
   children: ReactNode
 }) {
-  const merged = labels
-    ? { ...defaultProductLabels, ...labels }
-    : defaultProductLabels
+  const inherited = useContext(ProductLabelsContext)
+  const merged = labels ? { ...inherited, ...labels } : inherited
 
   return (
     <ProductLabelsContext.Provider value={merged}>

package/src/products/index.ts

@@ -32,7 +32,9 @@ export {
   type AddToCartInput,
 } from "./product-actions"
 export { MobileActions, type MobileActionsProps } from "./mobile-actions"
-export { ProductTabs } from "./product-tabs"
+export { ProductTabs, type ProductSection } from "./product-tabs"
+export { ProductSpecs, hasProductSpecs } from "./product-specs"
+export { ProductPromises, type ProductPromise } from "./product-promises"
 export { ProductInfo, type ProductInfoProps } from "./product-info"
 export { ProductPreview, type ProductPreviewProps } from "./product-preview"
 export { RelatedProducts, type RelatedProductsProps } from "./related-products"

package/src/products/labels.ts

@@ -17,13 +17,19 @@ export type ProductLabels = {
   countryOfOrigin: string
   type: string
   weight: string
+  /**
+   * The unit the weight is shown in. The platform stores a bare number, so
+   * the library has to name a unit and "g" is its guess; a store selling in
+   * pounds or kilos says so here rather than editing a component.
+   */
+  weightUnit: string
   dimensions: string
-  fastDelivery: string
-  fastDeliveryDescription: string
-  simpleExchanges: string
-  simpleExchangesDescription: string
-  easyReturns: string
-  easyReturnsDescription: string
+  // NO DELIVERY, EXCHANGE OR RETURN COPY HERE (removed 2026-09-13). Those
+  // six keys carried the store's PROMISES ("Your package will arrive in 3-5
+  // business days", "we'll refund your money"), which the library cannot
+  // know and must never assert for a merchant. They are now the store's own
+  // content: `ProductPromise[]` passed to `ProductTabs`, and the section
+  // does not render when the store gives none.
   relatedProducts: string
   relatedProductsDescription: string
 }
@@ -41,16 +47,8 @@ export const defaultProductLabels: ProductLabels = {
   countryOfOrigin: "Country of origin",
   type: "Type",
   weight: "Weight",
+  weightUnit: "g",
   dimensions: "Dimensions",
-  fastDelivery: "Fast delivery",
-  fastDeliveryDescription:
-    "Your package will arrive in 3-5 business days at your pick up location or in the comfort of your home.",
-  simpleExchanges: "Simple exchanges",
-  simpleExchangesDescription:
-    "Is the fit not quite right? No worries - we'll exchange your product for a new one.",
-  easyReturns: "Easy returns",
-  easyReturnsDescription:
-    "Just return your product and we'll refund your money. No questions asked – we'll do our best to make sure your return is hassle-free.",
   relatedProducts: "Related products",
   relatedProductsDescription:
     "You might also want to check out these products.",

package/src/products/product-info.tsx

@@ -29,12 +29,43 @@ export function ProductInfo({ product }: ProductInfoProps) {
         >
           {product.title}
         </h2>
-        <p
-          className="text-sm text-muted-foreground whitespace-pre-line"
-          data-testid="product-description"
-        >
-          {product.description}
-        </p>
+        {product.description && (
+          <div
+            className={[
+              "text-sm text-muted-foreground",
+              // The editor's own structure, styled: paragraphs, lists,
+              // headings and links as the merchant wrote them.
+              "[&_p]:mb-3 [&_p:last-child]:mb-0",
+              "[&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-3",
+              "[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:mb-3",
+              "[&_li]:mb-1",
+              "[&_strong]:font-semibold [&_strong]:text-foreground",
+              "[&_b]:font-semibold [&_b]:text-foreground",
+              "[&_em]:italic",
+              "[&_h1]:text-base [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:mt-4 [&_h1]:mb-2",
+              "[&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:mt-4 [&_h2]:mb-2",
+              "[&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:mt-3 [&_h3]:mb-1",
+              "[&_a]:underline [&_a]:text-foreground",
+              "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:italic",
+              "[&_table]:w-full [&_table]:text-left [&_td]:py-1 [&_th]:py-1 [&_th]:font-semibold",
+              "[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg",
+            ].join(" ")}
+            data-testid="product-description"
+            // The description is RICH TEXT, written in the admin's editor
+            // and stored as HTML. It used to render as {product.description}
+            // inside a <p>, so a shopper read the tags instead of the words
+            // (Alexander, on evoo, 2026-09-13).
+            //
+            // Rendering it raw is the platform's documented contract, the
+            // same one `api/content` states for pages and blog posts: every
+            // write path sanitizes on the way IN
+            // (`sanitizeContentHtml`: scripts, styles, event handlers and
+            // javascript: URLs are stripped, never escaped in), so the
+            // stored value is safe to render and sanitizing again on every
+            // read would only cost time.
+            dangerouslySetInnerHTML={{ __html: product.description }}
+          />
+        )}
       </div>
     </div>
   )

package/src/products/product-promises.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { RefreshCw, Truck, Undo2 } from "lucide-react"
+
+/**
+ * ONE PROMISE THE STORE MAKES: a delivery time, an exchange, a return.
+ *
+ * A PROMISE IS NOT A LABEL. A label names a piece of the interface, so the
+ * library owns it and translates it. A promise states a fact about the
+ * merchant's business, which the library cannot know and must never assert
+ * for them. Until 2026-09-13 it did: this section shipped "Your package
+ * will arrive in 3-5 business days" and "we'll refund your money" as label
+ * DEFAULTS, translated into three languages, on behalf of every merchant on
+ * earth. Alexander found it on evoo's product page.
+ *
+ * So there is no default here and none is not an error: a store that says
+ * nothing shows nothing.
+ */
+export type ProductPromise = {
+  /** A built-in mark, or none. */
+  icon?: "delivery" | "exchange" | "return"
+  title: string
+  body?: string
+}
+
+const ICONS = {
+  delivery: Truck,
+  exchange: RefreshCw,
+  return: Undo2,
+} as const
+
+/**
+ * The store's promises, in the order the store gave them. Any number: three
+ * is a convention, not a shape. Returns nothing for an empty list.
+ */
+export function ProductPromises({ promises }: { promises: ProductPromise[] }) {
+  if (!promises.length) return null
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-1 gap-y-8">
+        {promises.map((promise, i) => {
+          const Icon = promise.icon ? ICONS[promise.icon] : null
+          return (
+            <div key={`${promise.title}-${i}`} className="flex items-start gap-x-2">
+              {Icon && (
+                <Icon className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+              )}
+              <div>
+                <span className="font-semibold text-foreground">{promise.title}</span>
+                {promise.body && (
+                  <p className="max-w-sm text-muted-foreground">{promise.body}</p>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/products/product-specs.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import type { StoreProduct } from "../api/products"
+import { useProductLabels } from "./context"
+
+/**
+ * The product's physical facts: material, origin, type, weight, dimensions.
+ *
+ * IT RENDERS ONLY WHAT THE PRODUCT HAS, and nothing at all when it has
+ * none. That is the whole point of this file (2026-09-13). It used to be a
+ * fixed two-column grid of all five fields with "-" in every empty one, so
+ * a store selling food showed a table reading Material "-", Origin "-",
+ * Weight "-", Dimensions "-". Alexander found it on evoo. The admin has had
+ * an empty-cell law since 2026-08 for exactly this reason: a fact the
+ * merchant never entered is not a fact worth a row.
+ *
+ * A store mounts it if it wants it. `ProductTabs` offers it as a section
+ * and skips the section when this returns nothing.
+ */
+export function ProductSpecs({ product }: { product: StoreProduct }) {
+  const labels = useProductLabels()
+
+  const rows: Array<{ label: string; value: string }> = []
+  const add = (label: string, value: string | null | undefined) => {
+    const v = typeof value === "string" ? value.trim() : value
+    if (v) rows.push({ label, value: String(v) })
+  }
+
+  add(labels.material, product.material)
+  add(labels.countryOfOrigin, product.origin_country)
+  add(labels.type, product.type?.value)
+  add(labels.weight, product.weight ? `${product.weight} ${labels.weightUnit}` : null)
+  add(
+    labels.dimensions,
+    product.length && product.width && product.height
+      ? `${product.length}L x ${product.width}W x ${product.height}H`
+      : null
+  )
+
+  if (rows.length === 0) return null
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+        {rows.map((row) => (
+          <div key={row.label}>
+            <span className="font-semibold text-foreground">{row.label}</span>
+            <p className="text-muted-foreground">{row.value}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** True when this product has at least one physical fact to show. */
+export function hasProductSpecs(product: StoreProduct): boolean {
+  return !!(
+    product.material?.trim() ||
+    product.origin_country?.trim() ||
+    product.type?.value?.trim() ||
+    product.weight ||
+    (product.length && product.width && product.height)
+  )
+}

package/src/products/product-tabs.tsx

@@ -1,169 +1,123 @@
-"use client"
-
-/**
- * PDP info/shipping accordion — ported from
- * `@1click/ui/src/products/product-tabs.tsx` (v2.3.1). Data seam:
- * `HttpTypes.StoreProduct` → Cartbase `StoreProduct` (same physical fields:
- * material, origin_country, type.value, weight, length/width/height).
- * Layout, morphing +/− trigger, and label wiring unchanged.
- */
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { Truck, RefreshCw, Undo2 } from "lucide-react"
-
-import type { StoreProduct } from "../api/products"
-import { useProductLabels } from "./context"
-
-type ProductTabsProps = {
-  product: StoreProduct
-}
-
-export function ProductTabs({ product }: ProductTabsProps) {
-  const labels = useProductLabels()
-
-  const tabs = [
-    {
-      label: labels.productInformation,
-      component: <ProductInfoTab product={product} />,
-    },
-    {
-      label: labels.shippingAndReturns,
-      component: <ShippingInfoTab />,
-    },
-  ]
-
-  return (
-    <div className="w-full">
-      <AccordionPrimitive.Root type="multiple">
-        {tabs.map((tab, i) => (
-          <AccordionPrimitive.Item
-            key={i}
-            value={tab.label}
-            className="border-t border-border py-3 last:border-b"
-          >
-            <AccordionPrimitive.Header className="px-1">
-              <div className="flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">{tab.label}</span>
-                <AccordionPrimitive.Trigger>
-                  <MorphingTrigger />
-                </AccordionPrimitive.Trigger>
-              </div>
-            </AccordionPrimitive.Header>
-            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-1">
-              <div className="w-full">{tab.component}</div>
-            </AccordionPrimitive.Content>
-          </AccordionPrimitive.Item>
-        ))}
-      </AccordionPrimitive.Root>
-    </div>
-  )
-}
-
-function ProductInfoTab({ product }: ProductTabsProps) {
-  const labels = useProductLabels()
-
-  return (
-    <div className="text-sm py-8">
-      <div className="grid grid-cols-2 gap-x-8">
-        <div className="flex flex-col gap-y-4">
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.material}
-            </span>
-            <p className="text-muted-foreground">
-              {product.material ? product.material : "-"}
-            </p>
-          </div>
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.countryOfOrigin}
-            </span>
-            <p className="text-muted-foreground">
-              {product.origin_country ? product.origin_country : "-"}
-            </p>
-          </div>
-          <div>
-            <span className="font-semibold text-foreground">{labels.type}</span>
-            <p className="text-muted-foreground">
-              {product.type ? product.type.value : "-"}
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-col gap-y-4">
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.weight}
-            </span>
-            <p className="text-muted-foreground">
-              {product.weight ? `${product.weight} g` : "-"}
-            </p>
-          </div>
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.dimensions}
-            </span>
-            <p className="text-muted-foreground">
-              {product.length && product.width && product.height
-                ? `${product.length}L x ${product.width}W x ${product.height}H`
-                : "-"}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ShippingInfoTab() {
-  const labels = useProductLabels()
-
-  return (
-    <div className="text-sm py-8">
-      <div className="grid grid-cols-1 gap-y-8">
-        <div className="flex items-start gap-x-2">
-          <Truck className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.fastDelivery}
-            </span>
-            <p className="max-w-sm text-muted-foreground">
-              {labels.fastDeliveryDescription}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-start gap-x-2">
-          <RefreshCw className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.simpleExchanges}
-            </span>
-            <p className="max-w-sm text-muted-foreground">
-              {labels.simpleExchangesDescription}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-start gap-x-2">
-          <Undo2 className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-          <div>
-            <span className="font-semibold text-foreground">
-              {labels.easyReturns}
-            </span>
-            <p className="max-w-sm text-muted-foreground">
-              {labels.easyReturnsDescription}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function MorphingTrigger() {
-  return (
-    <div className="text-muted-foreground hover:bg-muted rounded-lg relative p-1.5">
-      <div className="h-5 w-5">
-        <span className="bg-muted-foreground rounded-full absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90" />
-        <span className="bg-muted-foreground rounded-full absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90 group-data-[state=open]:left-1/2 group-data-[state=open]:right-1/2" />
-      </div>
-    </div>
-  )
-}
+"use client"
+
+/**
+ * The PDP accordion: ONE structure, and the sections are the store's.
+ *
+ * Rewritten 2026-09-13, on Alexander's reading of it: *"Why do we have the
+ * same component twice, one for product information and one for shipping
+ * and delivery? This is useless and redundant for a package that is for
+ * global use."* He is right, twice over.
+ *
+ * What was here: two bespoke tabs, always both, for one visual pattern. The
+ * first was a fixed grid of five physical fields with "-" in every empty
+ * one, so a store selling food rendered a table of dashes. The second
+ * asserted delivery, exchange and refund PROMISES out of label defaults,
+ * which the library cannot know for any merchant.
+ *
+ * What is here now: an accordion that renders the sections it is given, and
+ * NOTHING when it has none. The package still ships the two pieces stores
+ * usually want, `ProductSpecs` (only the facts the product has) and
+ * `ProductPromises` (only what the store says), both importable on their
+ * own, both skipped when they would be empty. Structure is ours; what a
+ * page says is the store's.
+ *
+ * Ported from `@1click/ui/src/products/product-tabs.tsx` (v2.3.1); the
+ * morphing +/− trigger is unchanged.
+ */
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import type { ReactNode } from "react"
+
+import type { StoreProduct } from "../api/products"
+import { useProductLabels } from "./context"
+import { ProductPromises, type ProductPromise } from "./product-promises"
+import { ProductSpecs, hasProductSpecs } from "./product-specs"
+
+export type ProductSection = {
+  title: string
+  content: ReactNode
+}
+
+type ProductTabsProps = {
+  product: StoreProduct
+  /**
+   * The store's delivery, exchange and return promises. No default: with
+   * none, the section does not exist, because an absent section is better
+   * than a promise the store never made.
+   */
+  promises?: ProductPromise[]
+  /**
+   * Drop the physical-facts section even when the product has facts. It is
+   * offered by default because most catalogues want it; it is already
+   * skipped when the product has nothing to put in it.
+   */
+  hideSpecs?: boolean
+  /** Anything else the store wants in the accordion, appended in order. */
+  sections?: ProductSection[]
+}
+
+export function ProductTabs({
+  product,
+  promises,
+  hideSpecs,
+  sections,
+}: ProductTabsProps) {
+  const labels = useProductLabels()
+
+  const items: ProductSection[] = []
+
+  if (!hideSpecs && hasProductSpecs(product)) {
+    items.push({
+      title: labels.productInformation,
+      content: <ProductSpecs product={product} />,
+    })
+  }
+  if (promises?.length) {
+    items.push({
+      title: labels.shippingAndReturns,
+      content: <ProductPromises promises={promises} />,
+    })
+  }
+  if (sections?.length) items.push(...sections)
+
+  // Nothing to say, nothing drawn: no stray borders, no empty accordion.
+  if (items.length === 0) return null
+
+  return (
+    <div className="w-full">
+      <AccordionPrimitive.Root type="multiple">
+        {items.map((item, i) => (
+          <AccordionPrimitive.Item
+            key={`${item.title}-${i}`}
+            value={`${item.title}-${i}`}
+            className="border-t border-border py-3 last:border-b"
+          >
+            <AccordionPrimitive.Header className="px-1">
+              <div className="flex w-full items-center justify-between">
+                <span className="text-muted-foreground text-sm">{item.title}</span>
+                <AccordionPrimitive.Trigger>
+                  <MorphingTrigger />
+                </AccordionPrimitive.Trigger>
+              </div>
+            </AccordionPrimitive.Header>
+            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-1">
+              <div className="w-full">{item.content}</div>
+            </AccordionPrimitive.Content>
+          </AccordionPrimitive.Item>
+        ))}
+      </AccordionPrimitive.Root>
+    </div>
+  )
+}
+
+function MorphingTrigger() {
+  return (
+    <div className="text-muted-foreground hover:bg-muted rounded-lg relative p-1.5">
+      <div className="h-5 w-5">
+        <span className="bg-muted-foreground rounded-full absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90" />
+        <span className="bg-muted-foreground rounded-full absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90 group-data-[state=open]:left-1/2 group-data-[state=open]:right-1/2" />
+      </div>
+    </div>
+  )
+}
+
+export { type ProductTabsProps, type ProductPromise }

package/src/products/product-template.tsx

@@ -19,7 +19,8 @@ import type { PricingContextQuery } from "../api/types"
 import type { StoreProduct, StoreProductVariant } from "../api/products"
 import { ImageGallery } from "./image-gallery"
 import { ProductActions, type AddToCartInput } from "./product-actions"
-import { ProductTabs } from "./product-tabs"
+import { ProductTabs, type ProductSection } from "./product-tabs"
+import type { ProductPromise } from "./product-promises"
 import { RelatedProducts } from "./related-products"
 import { ProductInfo } from "./product-info"
 import { ProductActionsWrapper } from "./product-actions-wrapper"
@@ -32,6 +33,16 @@ type ProductTemplateProps = {
   addToCart: (input: AddToCartInput) => Promise<void>
   onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
   openCart?: () => void
+  /**
+   * The store's delivery, exchange and return promises, shown in the
+   * accordion. No default: with none, that section does not exist, because
+   * the library cannot promise anything on a merchant's behalf.
+   */
+  promises?: ProductPromise[]
+  /** Drop the physical-facts section even for a product that has facts. */
+  hideSpecs?: boolean
+  /** Anything else the store wants in the accordion, appended in order. */
+  sections?: ProductSection[]
 }
 
 export function ProductTemplate({
@@ -41,6 +52,9 @@ export function ProductTemplate({
   addToCart,
   onAddToCart,
   openCart,
+  promises,
+  hideSpecs,
+  sections,
 }: ProductTemplateProps) {
   if (!product || !product.id) {
     return notFound()
@@ -56,7 +70,12 @@ export function ProductTemplate({
       >
         <div className="flex flex-col sm:sticky sm:top-48 sm:py-0 sm:max-w-[300px] w-full py-8 gap-y-6">
           <ProductInfo product={product} />
-          <ProductTabs product={product} />
+          <ProductTabs
+            product={product}
+            promises={promises}
+            hideSpecs={hideSpecs}
+            sections={sections}
+          />
         </div>
         <div className="block w-full relative">
           <ImageGallery images={images} />

package/src/products/thumbnail.tsx

@@ -52,7 +52,12 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
           alt="Thumbnail"
           className="absolute inset-0 object-cover object-center"
           draggable={false}
-          quality={50}
+          // NO `quality` here (removed 2026-09-13). It asked for 50 while
+          // the scaffolded `next.config` allows [75], so Next warned on
+          // EVERY product image of every scaffolded store, both halves
+          // shipping from us. Next's own default is 75, which the scaffold
+          // allows, and a store that wants a different number sets it in
+          // its own config rather than having the library pick for it.
           sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
           fill
         />

package/src/reviews-ui/labels.ts

@@ -178,9 +178,9 @@ export const defaultReviewsUiLabels: ReviewsUiLabels = {
   copied: "Copied",
   copyAria: "Copy the code",
   rewardNote:
-    "We also emailed you the code. Use it on your next order — it is valid for a single use.",
+    "We also emailed you the code. Use it on your next order. It is valid for a single use.",
   codeUnavailable:
-    "The photo was saved. Something went wrong generating your discount code — write to us at {email} and we will send it right away.",
+    "The photo was saved. Something went wrong generating your discount code. Write to us at {email} and we will send it right away.",
   viewProduct: "View product",
   toStore: "Back to the store",
   errUnsupported: "The file {name} is not a supported format.",