@tribe-nest/forge 3.9.0 → 3.14.0

package/src/ui/styled/EventTickets.tsx

@@ -500,6 +500,11 @@ function PaymentStep({
             </button>
           </div>
         )}
+        {/* Above the tax row, because tax is charged ON the fee: the order total
+            the tax quote priced already contained it. By this step the number is
+            the SERVER's own — what it wrote to the order — so the itemisation
+            adds up to the amount that will actually be charged. */}
+        <BookingFeeLine c={c} fmt={fmt} />
         {taxSummary?.mode === "exclusive" && (
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
             <span style={{ fontSize: 14, opacity: 0.75 }}>Tax</span>
@@ -536,6 +541,55 @@ function FieldError({ children }: { children: ReactNode }) {
   return <p style={{ color: "#ef4444", fontSize: 13, marginTop: 4 }}>{children}</p>;
 }
 
+/**
+ * The artist's booking fee, itemised ABOVE the total (1.4 disclosure).
+ *
+ * This is the line that did not exist. The fee was added to `total_amount` on
+ * the server and named on no surface, so a buyer choosing £50 of tickets was
+ * shown "Total £50" and charged £52.75 — and even after a discount, where
+ * `Subtotal` and `Discount` were both drawn, the total did not reconcile with
+ * them and nothing explained why. A mandatory charge disclosed only on the
+ * receipt is what the FTC's junk-fee rule, the CMA's guidance and the EU
+ * price-indication rules exist to prevent.
+ *
+ * Renders NOTHING when the fee is zero. The payload always arrives (so callers
+ * can rely on its shape), which means "this artist charges no fee" comes down as
+ * a zero — and a "+£0.00 booking fee" row would invent a charge that does not
+ * exist and hint that one might appear later. There is nothing to disclose when
+ * nothing is charged.
+ *
+ * The `Subtotal` row is conditional because `DiscountSummaryLines` above already
+ * draws one whenever a discount applied; without a discount it draws nothing, and
+ * a fee sitting on its own between a heading and a total has nothing to be a fee
+ * ON.
+ */
+function BookingFeeLine({ c, fmt }: { c: Checkout; fmt: (n: number) => string }) {
+  const theme = useForgeTheme();
+  if (!(c.bookingFeeAmount > 0)) return null;
+  const discountDrewSubtotal = c.coupon.discountAmount > 0;
+
+  return (
+    <div
+      data-testid="booking-fee-summary"
+      style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 8 }}
+    >
+      {!discountDrewSubtotal && (
+        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+          <span style={{ opacity: 0.75 }}>Subtotal</span>
+          <span style={{ opacity: 0.75 }}>{fmt(c.subTotal)}</span>
+        </div>
+      )}
+      <div
+        data-testid="booking-fee-line"
+        style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}
+      >
+        <span style={{ color: theme.colors.text, opacity: 0.75 }}>Booking fee</span>
+        <span style={{ color: theme.colors.text, opacity: 0.75 }}>{fmt(c.bookingFeeAmount)}</span>
+      </div>
+    </div>
+  );
+}
+
 // ── Shared bits ───────────────────────────────────────────────────────────────
 function ActionBar({
   c,
@@ -572,6 +626,10 @@ function ActionBar({
           appliedCoupons={c.coupon.appliedCoupons}
           fmt={fmt}
         />
+        {/* `Total` below is the figure the buyer reads as final while they are
+            still choosing quantities — so the fee has to be named HERE, not
+            three screens later. */}
+        <BookingFeeLine c={c} fmt={fmt} />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ fontWeight: 600 }}>Total</span>
           <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>

package/src/ui/styled/ProductBrowseNav.tsx

@@ -0,0 +1,212 @@
+import { useState } from "react";
+import {
+  useProductCategories,
+  useProductCollections,
+  type IPublicProductCategory,
+} from "../../data/queries/useProducts";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface ProductBrowseNavProps {
+  /** The currently browsed category, so the nav can mark it. */
+  activeCategoryId?: string;
+  activeCollectionId?: string;
+  /**
+   * Where a category leads. Router-agnostic on purpose: Forge has no router,
+   * so the host decides the path.
+   */
+  hrefForCategory?: (category: IPublicProductCategory) => string;
+  hrefForCollection?: (collection: { id: string; slug: string; title: string }) => string;
+  onSelectCategory?: (category: IPublicProductCategory) => void;
+  onSelectCollection?: (collection: { id: string; slug: string; title: string }) => void;
+  /** Hide collections and show only the category tree, or vice versa. */
+  show?: "all" | "categories" | "collections";
+  /** Show only collections the creator marked as featured. */
+  featuredCollectionsOnly?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Storefront navigation over the creator's OWN taxonomy.
+ *
+ * Two things it deliberately does not do:
+ *
+ * - **It does not show product types.** Music / Merch / Digital / Service is
+ *   what a product IS; this is how the creator chose to shelve their catalogue.
+ *   Mixing them into one list is the conflation the taxonomy split undid.
+ * - **It does not hide empty branches by counting children.** The counts are
+ *   descendant-inclusive server-side, so a parent with products only in its
+ *   grandchildren still reads as non-empty — which is correct, because browsing
+ *   it returns those products.
+ */
+export function ProductBrowseNav({
+  activeCategoryId,
+  activeCollectionId,
+  hrefForCategory,
+  hrefForCollection,
+  onSelectCategory,
+  onSelectCollection,
+  show = "all",
+  featuredCollectionsOnly = false,
+  className,
+  style,
+}: ProductBrowseNavProps) {
+  const t = useThemeTokens();
+  const categoriesQuery = useProductCategories();
+  const collectionsQuery = useProductCollections();
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const showCategories = show === "all" || show === "categories";
+  const showCollections = show === "all" || show === "collections";
+
+  if (categoriesQuery.isLoading || collectionsQuery.isLoading) return <Loading />;
+
+  const categories = categoriesQuery.data ?? [];
+  const collections = (collectionsQuery.data ?? []).filter((c) =>
+    featuredCollectionsOnly ? c.isFeatured : true,
+  );
+
+  // A creator who has authored no taxonomy gets no nav at all rather than an
+  // empty heading — the storefront should look unchanged until they use it.
+  if (!categories.length && !collections.length) return null;
+
+  const toggle = (id: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  const renderCategory = (category: IPublicProductCategory, depth: number): React.ReactNode => {
+    const children = category.children ?? [];
+    const isActive = category.id === activeCategoryId;
+    // A branch containing the active category opens so the reader can see
+    // where they are, without needing to remember the path.
+    const containsActive = (node: IPublicProductCategory): boolean =>
+      node.id === activeCategoryId || (node.children ?? []).some(containsActive);
+    const isOpen = expanded.has(category.id) || containsActive(category);
+
+    const label = (
+      <>
+        <span>{category.title}</span>
+        <span style={{ color: t.muted, fontSize: 12, marginLeft: 8 }}>{category.productCount}</span>
+      </>
+    );
+
+    const linkStyle: React.CSSProperties = {
+      display: "inline-flex",
+      alignItems: "baseline",
+      color: isActive ? t.primary : t.text,
+      fontWeight: isActive ? 600 : 400,
+      textDecoration: "none",
+      background: "none",
+      border: "none",
+      padding: 0,
+      cursor: "pointer",
+      font: "inherit",
+      textAlign: "left",
+    };
+
+    const href = hrefForCategory?.(category);
+
+    return (
+      <li key={category.id} style={{ paddingLeft: depth * 14, listStyle: "none", marginBottom: 6 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          {children.length > 0 && (
+            <button
+              type="button"
+              onClick={() => toggle(category.id)}
+              aria-expanded={isOpen}
+              aria-label={isOpen ? `Collapse ${category.title}` : `Expand ${category.title}`}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: t.muted,
+                padding: 0,
+                lineHeight: 1,
+                width: 12,
+              }}
+            >
+              {isOpen ? "−" : "+"}
+            </button>
+          )}
+          {children.length === 0 && <span style={{ width: 12 }} />}
+
+          {href ? (
+            <a href={href} style={linkStyle} aria-current={isActive ? "page" : undefined}>
+              {label}
+            </a>
+          ) : (
+            <button type="button" style={linkStyle} onClick={() => onSelectCategory?.(category)}>
+              {label}
+            </button>
+          )}
+        </div>
+
+        {isOpen && children.length > 0 && (
+          <ul style={{ margin: "6px 0 0", padding: 0 }}>
+            {children.map((child) => renderCategory(child, depth + 1))}
+          </ul>
+        )}
+      </li>
+    );
+  };
+
+  const headingStyle: React.CSSProperties = {
+    color: t.muted,
+    fontSize: 12,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    margin: "0 0 10px",
+  };
+
+  return (
+    <nav className={className} style={{ display: "grid", gap: 24, ...style }} aria-label="Browse the store">
+      {showCategories && categories.length > 0 && (
+        <div>
+          <h2 style={headingStyle}>Categories</h2>
+          <ul style={{ margin: 0, padding: 0 }}>{categories.map((c) => renderCategory(c, 0))}</ul>
+        </div>
+      )}
+
+      {showCollections && collections.length > 0 && (
+        <div>
+          <h2 style={headingStyle}>Collections</h2>
+          <ul style={{ margin: 0, padding: 0 }}>
+            {collections.map((collection) => {
+              const isActive = collection.id === activeCollectionId;
+              const href = hrefForCollection?.(collection);
+              const linkStyle: React.CSSProperties = {
+                color: isActive ? t.primary : t.text,
+                fontWeight: isActive ? 600 : 400,
+                textDecoration: "none",
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                font: "inherit",
+              };
+              return (
+                <li key={collection.id} style={{ listStyle: "none", marginBottom: 6 }}>
+                  {href ? (
+                    <a href={href} style={linkStyle} aria-current={isActive ? "page" : undefined}>
+                      {collection.title}
+                    </a>
+                  ) : (
+                    <button type="button" style={linkStyle} onClick={() => onSelectCollection?.(collection)}>
+                      {collection.title}
+                    </button>
+                  )}
+                  <span style={{ color: t.muted, fontSize: 12, marginLeft: 8 }}>{collection.productCount}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </nav>
+  );
+}

package/src/ui/styled/ProductDetail.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Play, Pause, Music, Star } from "lucide-react";
-import { ProductCategory } from "../../types/models";
+import { ProductType } from "../../types/models";
 import type { IPublicProduct, IPublicProductTrack, IPublicProductVariant } from "../../types/models";
+import { useVariantSelection } from "../headless/useVariantSelection";
 import { useGetProduct } from "../../data/queries/useProducts";
 import { useCart } from "../../contexts/CartContext";
 import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
@@ -27,18 +28,34 @@ export interface ProductDetailProps {
   style?: React.CSSProperties;
   /** Server-fetched product used as initial data (SSR), avoids client loading spinner. */
   initialProduct?: IPublicProduct;
+  /**
+   * Make the product's categories/collections links. Router-agnostic, like
+   * `ProductGrid.hrefFor` — Forge has no router, so the host owns the path.
+   * Omit and they render as plain text.
+   */
+  hrefForCategory?: (category: { id: string; slug: string; title: string }) => string;
+  hrefForCollection?: (collection: { id: string; slug: string; title: string }) => string;
 }
 
 const a = (hex: string, al: number) => hex + Math.round(al * 255).toString(16).padStart(2, "0");
 
 /**
- * Drop-in product page. **Music** products (category `Music`) get an album/single
+ * Drop-in product page. **Music** products (productType `Music`) get an album/single
  * preview with per-track playback; everything else — including Digital products
  * (whose downloadable file is stored as a track) — gets the standard product
  * layout. Renders the description as sanitized-by-source HTML with responsive
  * media (no horizontal overflow from embedded video/images).
  */
-export function ProductDetail({ slug, formatAmount, checkoutPath = "/i/checkout", className, style, initialProduct }: ProductDetailProps) {
+export function ProductDetail({
+  slug,
+  formatAmount,
+  checkoutPath = "/i/checkout",
+  className,
+  style,
+  initialProduct,
+  hrefForCategory,
+  hrefForCollection,
+}: ProductDetailProps) {
   const t = useThemeTokens();
   const { data: product, isLoading } = useGetProduct(slug, { initialData: initialProduct });
   const fmt = useAmountFormatter(formatAmount);
@@ -46,14 +63,22 @@ export function ProductDetail({ slug, formatAmount, checkoutPath = "/i/checkout"
   if (isLoading) return <Loading fullPage />;
   if (!product) return <p style={{ color: t.text }}>Product not found.</p>;
 
-  // Classify on the product's category, NOT "has tracks" — a Digital product
+  // Classify on the product's TYPE, NOT "has tracks" — a Digital product
   // stores its download as a track too, so track-presence would misrender it as
   // music (audio player over a PDF, etc.).
-  const isMusic = product.category === ProductCategory.Music;
+  const isMusic = product.productType === ProductType.Music;
   return isMusic ? (
     <MusicDetail product={product} fmt={fmt} checkoutPath={checkoutPath} className={className} style={style} />
   ) : (
-    <StandardDetail product={product} fmt={fmt} checkoutPath={checkoutPath} className={className} style={style} />
+    <StandardDetail
+      product={product}
+      fmt={fmt}
+      checkoutPath={checkoutPath}
+      className={className}
+      style={style}
+      hrefForCategory={hrefForCategory}
+      hrefForCollection={hrefForCollection}
+    />
   );
 }
 
@@ -106,12 +131,16 @@ function StandardDetail({
   checkoutPath,
   className,
   style,
+  hrefForCategory,
+  hrefForCollection,
 }: {
   product: IPublicProduct;
   fmt: (n: number) => string;
   checkoutPath: string;
   className?: string;
   style?: React.CSSProperties;
+  hrefForCategory?: (category: { id: string; slug: string; title: string }) => string;
+  hrefForCollection?: (collection: { id: string; slug: string; title: string }) => string;
 }) {
   const t = useThemeTokens();
   // Inclusive stores caption the price as tax-inclusive (display only).
@@ -120,39 +149,13 @@ function StandardDetail({
   const { add } = useBuy(product, cover, checkoutPath);
   const { isCartOpen } = useCart();
 
-  const [selectedColor, setSelectedColor] = useState<string | null>(null);
-  const [selectedSize, setSelectedSize] = useState<string | null>(null);
   const [quantity, setQuantity] = useState(1);
   const [imageIndex, setImageIndex] = useState(0);
 
-  // Colors that exist across variants (each flagged if it has any in-stock size).
-  const availableColors = useMemo(() => {
-    const colors = Array.from(new Set(product.variants.map((v) => v.color)));
-    return colors
-      .map((color) => ({
-        name: color,
-        hasAvailableSize: product.variants.some((v) => v.color === color && v.availabilityStatus === "active"),
-      }))
-      .filter((c) => c.name);
-  }, [product.variants]);
-
-  // Sizes for the chosen color.
-  const availableSizes = useMemo(() => {
-    if (!selectedColor) return [];
-    return product.variants
-      .filter((v) => v.color === selectedColor)
-      .map((v) => ({ name: v.size, isAvailable: v.availabilityStatus === "active" }))
-      .filter((s) => s.name);
-  }, [selectedColor, product.variants]);
-
-  // Products without color/size options (digital, service, simple physical) just
-  // use the default variant; otherwise the buyer must pick color + size.
-  const hasOptions = availableColors.length > 0;
-  const selectedVariant = useMemo(() => {
-    if (!hasOptions) return product.variants?.find((v) => v.isDefault) ?? product.variants?.[0];
-    if (!selectedColor || !selectedSize) return undefined;
-    return product.variants.find((v) => v.color === selectedColor && v.size === selectedSize);
-  }, [hasOptions, selectedColor, selectedSize, product.variants]);
+  // Any number of axes, narrowed left to right. Was a hardcoded colour → size
+  // cascade, which had nowhere to put "Format" and read a column that holds a
+  // hex from one writer and a name from another.
+  const { axes, selection, select, selectedVariant, hasOptions } = useVariantSelection(product.variants);
 
   // Prefer the selected variant's own images; fall back to the product's.
   const images = useMemo(() => {
@@ -160,19 +163,6 @@ function StandardDetail({
     return vImgs.length > 0 ? vImgs : product.media?.filter((m) => m.type === "image") ?? [];
   }, [selectedVariant, product.media]);
 
-  // Auto-select the first available color, then its first available size.
-  useEffect(() => {
-    if (!selectedColor && availableColors.length > 0) {
-      const first = availableColors.find((c) => c.hasAvailableSize) ?? availableColors[0];
-      setSelectedColor(first.name);
-    }
-  }, [availableColors, selectedColor]);
-  useEffect(() => {
-    if (selectedColor && !selectedSize && availableSizes.length > 0) {
-      const first = availableSizes.find((s) => s.isAvailable) ?? availableSizes[0];
-      setSelectedSize(first.name);
-    }
-  }, [selectedColor, selectedSize, availableSizes]);
   useEffect(() => setImageIndex(0), [selectedVariant]);
 
   // Mobile: once the inline Add-to-cart scrolls out of view, surface a sticky
@@ -257,73 +247,67 @@ function StandardDetail({
             {selectedVariant?.payWhatYouWant && <span style={{ fontSize: 13, opacity: 0.7 }}> (Pay what you want)</span>}
           </p>
 
-          {/* Color */}
-          {availableColors.length > 0 && (
-            <div style={{ marginTop: 18 }}>
-              <p style={{ fontSize: 15, marginBottom: 8 }}>Color</p>
+          {/* Options — one block per axis the product actually uses. */}
+          {axes.map((axis) => (
+            <div key={axis.optionTypeId} style={{ marginTop: 18 }}>
+              <p style={{ fontSize: 15, marginBottom: 8 }}>{axis.axis}</p>
               <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center", minHeight: 40 }}>
-                {availableColors.map((c) => {
-                  const isHex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(c.name);
-                  const on = selectedColor === c.name;
-                  return (
+                {axis.values.map((v) => {
+                  const on = selection[axis.optionTypeId] === v.optionValueId;
+                  // A swatch only when the value genuinely carries a colour, or
+                  // when it reads as one. Everything else is a text chip —
+                  // guessing a colour for "Stems" would render a black circle
+                  // with no label.
+                  const hex = v.swatchHex ?? (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(v.value) ? v.value : null);
+                  return hex ? (
                     <button
-                      key={c.name}
+                      key={v.optionValueId}
                       type="button"
-                      title={c.name}
-                      disabled={!c.hasAvailableSize}
-                      onClick={() => {
-                        setSelectedColor(c.name);
-                        setSelectedSize(null);
-                      }}
+                      title={v.value}
+                      aria-label={`${axis.axis}: ${v.value}`}
+                      aria-pressed={on}
+                      disabled={!v.isAvailable}
+                      onClick={() => select(axis.optionTypeId, v.optionValueId)}
                       style={{
                         position: "relative",
                         width: on ? 34 : 30,
                         height: on ? 34 : 30,
                         borderRadius: "50%",
-                        cursor: c.hasAvailableSize ? "pointer" : "not-allowed",
-                        opacity: c.hasAvailableSize ? 1 : 0.5,
-                        background: isHex ? c.name : c.name.toLowerCase(),
+                        cursor: v.isAvailable ? "pointer" : "not-allowed",
+                        opacity: v.isAvailable ? 1 : 0.5,
+                        background: hex,
                         border: `2px solid ${on ? t.primary : a(t.text, 0.25)}`,
                         boxShadow: on ? "0 2px 8px -2px rgba(0,0,0,0.3)" : "none",
                         transition: "all .15s",
                       }}
                     />
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* Size */}
-          {selectedColor && availableSizes.length > 0 && (
-            <div style={{ marginTop: 18 }}>
-              <p style={{ fontSize: 15, marginBottom: 8 }}>Size</p>
-              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
-                {availableSizes.map((s) => {
-                  const on = selectedSize === s.name;
-                  return (
+                  ) : (
                     <button
-                      key={s.name}
+                      key={v.optionValueId}
                       type="button"
-                      disabled={!s.isAvailable}
-                      onClick={() => setSelectedSize(s.name)}
+                      aria-pressed={on}
+                      // Same accessible name as the swatch form, so one locator
+                      // — and one screen-reader announcement — covers both.
+                      aria-label={`${axis.axis}: ${v.value}`}
+                      disabled={!v.isAvailable}
+                      onClick={() => select(axis.optionTypeId, v.optionValueId)}
                       style={{
                         padding: "8px 16px",
                         borderRadius: t.cornerRadius,
-                        cursor: s.isAvailable ? "pointer" : "not-allowed",
+                        cursor: v.isAvailable ? "pointer" : "not-allowed",
                         fontWeight: 600,
-                        color: s.isAvailable ? t.text : a(t.text, 0.4),
-                        background: on ? a(t.primary, 0.1) : s.isAvailable ? "transparent" : a(t.text, 0.06),
+                        color: v.isAvailable ? t.text : a(t.text, 0.4),
+                        background: on ? a(t.primary, 0.1) : v.isAvailable ? "transparent" : a(t.text, 0.06),
                         border: `2px solid ${on ? t.primary : a(t.text, 0.2)}`,
                       }}
                     >
-                      {s.name}
+                      {v.value}
                     </button>
                   );
                 })}
               </div>
             </div>
-          )}
+          ))}
 
           {/* Quantity */}
           {selectedVariant && (
@@ -354,8 +338,44 @@ function StandardDetail({
           {selectedVariant && (
             <div style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${a(t.text, 0.15)}` }}>
               <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7, marginBottom: 6 }}>Product details</p>
-              <p style={{ fontSize: 14, opacity: 0.75 }}>Category: {product.category}</p>
+              {/* "Type", not "Category" — the two were the same thing until the
+                  taxonomy split, and the creator's real categories are below. */}
+              <p style={{ fontSize: 14, opacity: 0.75 }}>Type: {product.productType}</p>
               <p style={{ fontSize: 14, opacity: 0.75 }}>SKU: {selectedVariant.upcCode || "N/A"}</p>
+              {!!product.categories?.length && (
+                <p style={{ fontSize: 14, opacity: 0.75 }}>
+                  {product.categories.length === 1 ? "Category: " : "Categories: "}
+                  {product.categories.map((c, i) => (
+                    <span key={c.id}>
+                      {i > 0 && ", "}
+                      {hrefForCategory ? (
+                        <a href={hrefForCategory(c)} style={{ color: t.primary, textDecoration: "none" }}>
+                          {c.title}
+                        </a>
+                      ) : (
+                        c.title
+                      )}
+                    </span>
+                  ))}
+                </p>
+              )}
+              {!!product.collections?.length && (
+                <p style={{ fontSize: 14, opacity: 0.75 }}>
+                  {product.collections.length === 1 ? "Collection: " : "Collections: "}
+                  {product.collections.map((c, i) => (
+                    <span key={c.id}>
+                      {i > 0 && ", "}
+                      {hrefForCollection ? (
+                        <a href={hrefForCollection(c)} style={{ color: t.primary, textDecoration: "none" }}>
+                          {c.title}
+                        </a>
+                      ) : (
+                        c.title
+                      )}
+                    </span>
+                  ))}
+                </p>
+              )}
             </div>
           )}
 
@@ -437,7 +457,13 @@ function MusicDetail({
   const pricesIncludeTax = usePricesIncludeTax();
   const { pause, loadAndPlay, currentTrack, play, isPlaying } = useAudioPlayer();
 
-  const defaultVariant = product.variants.find((v) => v.isDefault) || product.variants[0];
+  // A release can be sold in several forms — MP3 and FLAC, vinyl and cassette —
+  // so this page can no longer assume one version. With no axes the hook returns
+  // exactly what this used to: the default variant.
+  const { axes, selection, select, selectedVariant } = useVariantSelection(product.variants);
+  const defaultVariant = selectedVariant ?? product.variants.find((v) => v.isDefault) ?? product.variants[0];
+  // The TRACKLIST is the release's contents and does not depend on which
+  // version is selected — every version of an album has the same songs.
   const tracks = defaultVariant?.tracks ?? [];
   const isSingle = tracks.length === 1;
   const firstTrack = tracks[0];
@@ -536,6 +562,39 @@ function MusicDetail({
               <div style={{ fontSize: 20, fontWeight: 700, color: t.primary }}>
                 <PriceDisplay amount={defaultVariant.price} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
               </div>
+
+              {/* One row per axis, only when the release actually has formats. */}
+              {axes.map((axis) => (
+                <div key={axis.optionTypeId} style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+                  <span style={{ fontSize: 13, opacity: 0.7, color: t.text }}>{axis.axis}</span>
+                  {axis.values.map((v) => {
+                    const on = selection[axis.optionTypeId] === v.optionValueId;
+                    return (
+                      <button
+                        key={v.optionValueId}
+                        type="button"
+                        aria-pressed={on}
+                        aria-label={`${axis.axis}: ${v.value}`}
+                        disabled={!v.isAvailable}
+                        onClick={() => select(axis.optionTypeId, v.optionValueId)}
+                        style={{
+                          padding: "6px 12px",
+                          fontSize: 13,
+                          borderRadius: t.cornerRadius,
+                          cursor: v.isAvailable ? "pointer" : "not-allowed",
+                          opacity: v.isAvailable ? 1 : 0.5,
+                          color: t.text,
+                          background: on ? a(t.primary, 0.1) : "transparent",
+                          border: `1px solid ${on ? t.primary : a(t.text, 0.25)}`,
+                        }}
+                      >
+                        {v.value}
+                      </button>
+                    );
+                  })}
+                </div>
+              ))}
+
               <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 4 }}>
                 <Button onClick={() => buyNow(defaultVariant, { canIncreaseQuantity: false })}>Buy now</Button>
                 <Button variant="outline" onClick={() => add(defaultVariant, { canIncreaseQuantity: false })}>