@blamejs/blamejs-shop 0.1.30 → 0.1.32

package/lib/storefront.js

@@ -165,6 +165,7 @@ var LAYOUT =
   "          <li><a href=\"/categories\">Categories</a></li>\n" +
   "          <li><a href=\"/?sort=new\">New arrivals</a></li>\n" +
   "          <li><a href=\"/?sort=sale\">On sale</a></li>\n" +
+  "          <li><a href=\"/compare\">Compare</a></li>\n" +
   "          <li><a href=\"/cart\">Cart</a></li>\n" +
   "        </ul>\n" +
   "      </div>\n" +
@@ -744,9 +745,12 @@ var PRODUCT_PAGE =
   "          </table>\n" +
   "        </div>\n" +
   "      </div>\n" +
+  "      RAW_QTYBREAK_PLACEHOLDER\n" +
   "      RAW_WISHLIST_PLACEHOLDER\n" +
+  "      RAW_COMPARE_PLACEHOLDER\n" +
   "    </div>\n" +
   "  </div>\n" +
+  "  RAW_BUNDLES_PLACEHOLDER\n" +
   "  RAW_REVIEWS_PLACEHOLDER\n" +
   "  RAW_QA_PLACEHOLDER\n" +
   "</section>\n";
@@ -888,6 +892,109 @@ function _buildReviews(summary, reviews, ctaHtml) {
          "</section>";
 }
 
+// Builds the PDP "Bundle & save" rail from the offers the route
+// resolved. Each offer carries its component list (with display
+// titles + per-member quantity), the sum-of-parts list price, the
+// bundle price, and the saving — every figure already formatted to a
+// currency string by the route (price math stays server-side; the
+// builder is pure string assembly so the container + edge renderers
+// emit byte-identical markup). An unavailable offer (a member is
+// archived / out of stock) renders disabled with a reason instead of
+// the add form, so a customer never hits a broken atomic add. Returns
+// "" when there are no offers so the PDP shows no empty rail. Mirrors
+// the edge renderer (`worker/render/product.js#_buildBundles`).
+function _buildBundles(offers) {
+  return _renderBundles(offers, b.template.escapeHtml);
+}
+
+// Shared pure-string assembler. `esc` is the caller's HTML-escaper
+// (b.template.escapeHtml in the container, escapeHtml at the edge) —
+// both produce the same output, so the markup is identical across
+// render paths.
+function _renderBundles(offers, esc) {
+  offers = offers || [];
+  if (offers.length === 0) return "";
+  var cards = "";
+  for (var i = 0; i < offers.length; i += 1) {
+    var o = offers[i];
+    var members = "";
+    for (var j = 0; j < o.components.length; j += 1) {
+      var c = o.components[j];
+      members +=
+        "<li class=\"bundle-card__member\">" +
+          "<span class=\"bundle-card__member-qty\">" + esc(String(c.quantity)) + "&times;</span> " +
+          "<span class=\"bundle-card__member-title\">" + esc(String(c.title)) + "</span> " +
+          "<code class=\"bundle-card__member-sku\">" + esc(String(c.sku)) + "</code>" +
+        "</li>";
+    }
+    var pricing =
+      "<div class=\"bundle-card__pricing\">" +
+        "<span class=\"bundle-card__list\">Buy separately " + esc(o.list_total_str) + "</span>" +
+        "<span class=\"bundle-card__price price\">Bundle price " + esc(o.amount_str) + "</span>" +
+        (o.discount_str ? "<span class=\"bundle-card__save\">You save " + esc(o.discount_str) + "</span>" : "") +
+      "</div>";
+    var action;
+    if (o.available) {
+      action =
+        "<form method=\"post\" action=\"/cart/bundle\" class=\"bundle-card__form\">" +
+          "<input type=\"hidden\" name=\"bundle_sku\" value=\"" + esc(o.bundle_sku) + "\">" +
+          "<button type=\"submit\" class=\"btn-primary btn-primary--sm\">Add bundle to cart</button>" +
+        "</form>";
+    } else {
+      action =
+        "<p class=\"bundle-card__unavailable\">" +
+          esc(o.unavailable_reason || "This bundle is currently unavailable.") +
+        "</p>";
+    }
+    cards +=
+      "<article class=\"bundle-card" + (o.available ? "" : " bundle-card--unavailable") + "\">" +
+        "<h3 class=\"bundle-card__title\">" + esc(String(o.title)) + "</h3>" +
+        "<ul class=\"bundle-card__members\">" + members + "</ul>" +
+        pricing +
+        action +
+      "</article>";
+  }
+  return "<section class=\"bundles\" aria-labelledby=\"bundles-title\">" +
+           "<h2 id=\"bundles-title\" class=\"bundles__heading\">Bundle &amp; save</h2>" +
+           "<div class=\"bundles__grid\">" + cards + "</div>" +
+         "</section>";
+}
+
+// Builds the PDP quantity-break table for the displayed variant. Each
+// row is a (range label, unit price) pair the route already resolved +
+// formatted (the unit price comes from the quantity-discount
+// primitive's tierBreakdown against the variant's list price — the math
+// is server-side; the builder only lays out strings). Returns "" when
+// the product has no active breaks so the PDP shows no empty table.
+// Mirrors the edge renderer (`worker/render/product.js#_buildQtyBreaks`).
+function _buildQtyBreaks(breaks) {
+  return _renderQtyBreaks(breaks, b.template.escapeHtml);
+}
+
+function _renderQtyBreaks(breaks, esc) {
+  breaks = breaks || [];
+  if (breaks.length === 0) return "";
+  var rows = "";
+  for (var i = 0; i < breaks.length; i += 1) {
+    var br = breaks[i];
+    rows +=
+      "<tr>" +
+        "<td class=\"qty-break__range\">" + esc(String(br.label)) + "</td>" +
+        "<td class=\"qty-break__unit price\">" + esc(String(br.unit_str)) + "</td>" +
+      "</tr>";
+  }
+  return "<div class=\"qty-breaks\">" +
+           "<h2 class=\"qty-breaks__title\">Buy more, save more</h2>" +
+           "<div class=\"table-scroll\">" +
+             "<table class=\"qty-break-table\">" +
+               "<thead><tr><th>Quantity</th><th>Price each</th></tr></thead>" +
+               "<tbody>" + rows + "</tbody>" +
+             "</table>" +
+           "</div>" +
+           "<p class=\"qty-breaks__note\">Discount applies automatically in your cart.</p>" +
+         "</div>";
+}
+
 var REVIEW_FORM_PAGE =
   "<section class=\"review-form-page\">\n" +
   "  <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n" +
@@ -1162,6 +1269,177 @@ function renderWishlist(opts) {
   });
 }
 
+// Compare page notice banner — surfaced after a toggle / a full-basket
+// refusal. The route passes a short message key; unknown keys render
+// nothing so a forged `?notice=` query can't inject arbitrary copy.
+var COMPARE_NOTICES = {
+  added:   "Added to your comparison.",
+  removed: "Removed from your comparison.",
+  full:    "Your comparison is full (4 products max). Remove one to add another.",
+  cleared: "Comparison cleared.",
+};
+function _compareNotice(key) {
+  var msg = COMPARE_NOTICES[key];
+  if (!msg) return "";
+  return "<p class=\"compare-page__notice\" role=\"status\">" + b.template.escapeHtml(msg) + "</p>";
+}
+
+// Side-by-side comparison table. `opts.columns` is the resolved per-
+// product column list in basket order:
+//   { product_id, product, hero_media, price, available }
+// where `product` is null for a product archived / deleted between the
+// add and this render (orphan-tolerant — the column renders "no longer
+// available" and a remove control, never crashes the table). `opts.rows`
+// is the attribute matrix from product-compare's `compareTable`:
+//   [ { attribute: { slug, label, format }, values_per_product: [...] } ]
+// each `values_per_product` entry positionally aligned with `columns`.
+// The currency/number/boolean formatting happens here (the display
+// layer), not in the primitive.
+function _compareCellValue(value, format) {
+  var esc = b.template.escapeHtml;
+  if (value == null) return "<span class=\"compare-cell--empty\" aria-hidden=\"true\">—</span><span class=\"sr-only\">Not specified</span>";
+  if (format === "currency") {
+    var minor = Number(value);
+    if (!Number.isFinite(minor)) return esc(String(value));
+    return esc(pricing.format(Math.round(minor), "USD"));
+  }
+  if (format === "boolean") {
+    return value ? "Yes" : "No";
+  }
+  return esc(String(value));
+}
+
+function renderCompare(opts) {
+  var esc = b.template.escapeHtml;
+  var columns = opts.columns || [];
+  var attrRows = opts.rows || [];
+  var prefix = opts.asset_prefix || "/assets/";
+  var notice = _compareNotice(opts.notice);
+
+  if (!columns.length) {
+    var empty =
+      "<section class=\"compare-page\">" +
+        "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
+          "<li><a href=\"/\">Shop</a></li>" +
+          "<li aria-current=\"page\">Compare</li>" +
+        "</ol></nav>" +
+        "<h1 class=\"compare-page__title\">Compare products</h1>" +
+        notice +
+        "<p class=\"compare-page__empty\">You haven't added anything to compare yet. Browse the shop and tap " +
+          "<strong>Add to compare</strong> on up to four products to line them up side by side.</p>" +
+        "<p><a class=\"btn-secondary\" href=\"/\">Browse the shop →</a></p>" +
+      "</section>";
+    return _wrap({
+      title:      "Compare products",
+      shop_name:  opts.shop_name || "blamejs.shop",
+      cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+      theme_css:  opts.theme_css,
+      body:       empty,
+    });
+  }
+
+  // Per-column header cell — image + title + remove form. A column whose
+  // product resolved out (archived / deleted) renders the gone-state
+  // header and still offers the remove control so the shopper can clear
+  // the dangling entry.
+  function _headerCell(col) {
+    var removeForm =
+      "<form class=\"compare-col__remove\" method=\"post\" action=\"/compare/toggle\">" +
+        "<input type=\"hidden\" name=\"product_id\" value=\"" + esc(col.product_id) + "\">" +
+        "<input type=\"hidden\" name=\"return_to\" value=\"/compare\">" +
+        "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Remove</button>" +
+      "</form>";
+    if (!col.product) {
+      return "<th scope=\"col\" class=\"compare-col compare-col--gone\">" +
+               "<span class=\"compare-col__title\">No longer available</span>" +
+               removeForm +
+             "</th>";
+    }
+    var slug = esc(col.product.slug);
+    var thumb = col.hero_media
+      ? "<img src=\"" + esc(prefix + col.hero_media.r2_key) + "\" alt=\"" + esc(col.hero_media.alt_text || col.product.title) + "\" loading=\"lazy\">"
+      : "<span class=\"compare-col__mark\" aria-hidden=\"true\">" + esc((col.product.title || "?").trim().charAt(0).toUpperCase() || "?") + "</span>";
+    return "<th scope=\"col\" class=\"compare-col\">" +
+             "<a class=\"compare-col__media\" href=\"/products/" + slug + "\">" + thumb + "</a>" +
+             "<a class=\"compare-col__title\" href=\"/products/" + slug + "\">" + esc(col.product.title) + "</a>" +
+             removeForm +
+           "</th>";
+  }
+
+  var headerCells = "";
+  for (var h = 0; h < columns.length; h += 1) headerCells += _headerCell(columns[h]);
+
+  // Fixed display rows resolved directly (richer than the attribute
+  // matrix): price + availability. Price for a gone column renders "—".
+  function _priceCell(col) {
+    if (!col.product) return "<td class=\"compare-cell compare-cell--gone\">—</td>";
+    return "<td class=\"compare-cell\">" + esc(col.price || "—") + "</td>";
+  }
+  function _availCell(col) {
+    if (!col.product) return "<td class=\"compare-cell compare-cell--gone\">—</td>";
+    return col.available
+      ? "<td class=\"compare-cell\"><span class=\"compare-cell__badge compare-cell__badge--ok\">In stock</span></td>"
+      : "<td class=\"compare-cell\"><span class=\"compare-cell__badge\">Out of stock</span></td>";
+  }
+  var priceRow = "<tr><th scope=\"row\" class=\"compare-row-label\">Price</th>";
+  var availRow = "<tr><th scope=\"row\" class=\"compare-row-label\">Availability</th>";
+  for (var c = 0; c < columns.length; c += 1) {
+    priceRow += _priceCell(columns[c]);
+    availRow += _availCell(columns[c]);
+  }
+  priceRow += "</tr>";
+  availRow += "</tr>";
+
+  // Attribute matrix rows from the primitive. The `price` attribute is
+  // already surfaced as the fixed Price row above, so skip its duplicate
+  // here; every other attribute renders one row, one cell per column.
+  var attrRowsHtml = "";
+  for (var r = 0; r < attrRows.length; r += 1) {
+    var ar = attrRows[r];
+    if (ar.attribute && ar.attribute.slug === "price") continue;
+    var label = (ar.attribute && ar.attribute.label) || "";
+    var fmt = ar.attribute && ar.attribute.format;
+    var cells = "";
+    var vals = ar.values_per_product || [];
+    for (var v = 0; v < columns.length; v += 1) {
+      cells += "<td class=\"compare-cell\">" + _compareCellValue(vals[v], fmt) + "</td>";
+    }
+    attrRowsHtml += "<tr><th scope=\"row\" class=\"compare-row-label\">" + esc(label) + "</th>" + cells + "</tr>";
+  }
+
+  var clearForm =
+    "<form class=\"compare-page__clear\" method=\"post\" action=\"/compare/clear\">" +
+      "<button type=\"submit\" class=\"btn-ghost\">Clear comparison</button>" +
+    "</form>";
+
+  var body =
+    "<section class=\"compare-page\">" +
+      "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
+        "<li><a href=\"/\">Shop</a></li>" +
+        "<li aria-current=\"page\">Compare</li>" +
+      "</ol></nav>" +
+      "<header class=\"compare-page__head\">" +
+        "<h1 class=\"compare-page__title\">Compare products (" + columns.length + ")</h1>" +
+        clearForm +
+      "</header>" +
+      notice +
+      "<div class=\"table-scroll\">" +
+        "<table class=\"compare-table\">" +
+          "<thead><tr><th scope=\"col\" class=\"compare-row-label\"><span class=\"sr-only\">Attribute</span></th>" + headerCells + "</tr></thead>" +
+          "<tbody>" + priceRow + availRow + attrRowsHtml + "</tbody>" +
+        "</table>" +
+      "</div>" +
+    "</section>";
+
+  return _wrap({
+    title:      "Compare products",
+    shop_name:  opts.shop_name || "blamejs.shop",
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    body:       body,
+  });
+}
+
 // Account "Saved for later" page. `opts.items` is a resolved list:
 // { save, product, hero_media } for live products, or { save,
 // product: null } when the variant/product behind a saved row was
@@ -2093,6 +2371,27 @@ function _buildWishlist(productId, count) {
          "</div>";
 }
 
+// Product-level "Add to compare" control. Byte-compatible with the
+// edge renderer (`worker/render/product.js`) so both paths emit
+// identical markup. Action-only label — the toggle route resolves
+// add/remove server-side against the sealed session, and a guest who
+// has never compared anything still sees the same neutral control the
+// edge cache serves. The link to the compare table sits beside the
+// toggle so a shopper mid-basket can jump straight to the side-by-side
+// view.
+function _buildCompare(productId) {
+  var esc = b.template.escapeHtml;
+  return "<div class=\"compare\">" +
+           "<form class=\"compare__form\" method=\"post\" action=\"/compare/toggle\">" +
+             "<input type=\"hidden\" name=\"product_id\" value=\"" + esc(productId) + "\">" +
+             "<button type=\"submit\" class=\"btn-secondary compare__btn\">" +
+               "<span class=\"compare__icon\" aria-hidden=\"true\">⇄</span> Add to compare" +
+             "</button>" +
+           "</form>" +
+           "<a class=\"compare__link card-link\" href=\"/compare\">View compare →</a>" +
+         "</div>";
+}
+
 // Schema.org JSON-LD block. JSON.stringify covers the standard escapes;
 // the `</` → `<\/` rewrite neutralises any literal `</script>` in a
 // value. Mirrors the edge renderer's `jsonLdScript`.
@@ -2127,7 +2426,10 @@ function renderProduct(opts) {
       // include the slot; a custom theme opts in by adding it.
       reviews_html:   _buildReviews(opts.review_summary, opts.reviews, opts.review_cta),
       qa_html:        _buildProductQa(opts.qa_questions, opts.qa_cta),
+      bundles_html:   _buildBundles(opts.bundle_offers),
+      qty_breaks_html: _buildQtyBreaks(opts.qty_breaks),
       wishlist_html:  _buildWishlist(opts.product.id, opts.wishlist_count),
+      compare_html:   _buildCompare(opts.product.id),
       asset_css_main: opts.theme.assetUrl("css/main.css"),
     });
   }
@@ -2138,7 +2440,10 @@ function renderProduct(opts) {
   var galleryHtml = _buildPdpGallery(opts.product, opts.media || [], opts.asset_prefix || "/assets/");
   var reviewsHtml = _buildReviews(opts.review_summary, opts.reviews, opts.review_cta);
   var qaHtml = _buildProductQa(opts.qa_questions, opts.qa_cta);
+  var bundlesHtml = _buildBundles(opts.bundle_offers);
+  var qtyBreaksHtml = _buildQtyBreaks(opts.qty_breaks);
   var wishlistHtml = _buildWishlist(opts.product.id, opts.wishlist_count);
+  var compareHtml = _buildCompare(opts.product.id);
   var body = _render(PRODUCT_PAGE, {
     title:        opts.product.title,
     description:  description,
@@ -2146,7 +2451,10 @@ function renderProduct(opts) {
   })
     .replace("RAW_GALLERY_PLACEHOLDER", galleryHtml)
     .replace("RAW_ROWS_PLACEHOLDER", rows)
+    .replace("RAW_QTYBREAK_PLACEHOLDER", qtyBreaksHtml)
     .replace("RAW_WISHLIST_PLACEHOLDER", wishlistHtml)
+    .replace("RAW_COMPARE_PLACEHOLDER", compareHtml)
+    .replace("RAW_BUNDLES_PLACEHOLDER", bundlesHtml)
     .replace("RAW_REVIEWS_PLACEHOLDER", reviewsHtml)
     .replace("RAW_QA_PLACEHOLDER", qaHtml);
   // Product-specific OpenGraph + Twitter Card values so shares
@@ -3413,6 +3721,204 @@ function mount(router, deps) {
     return { sid: sid, cart: created };
   }
 
+  // ---- bundle + quantity-discount pricing (server-authoritative) --------
+  //
+  // Every price below is recomputed from the catalog + the bundle /
+  // quantity-discount primitives on each render. The client never
+  // sends a price; the cart line's stored snapshot is the add-time
+  // catalog price, and the quantity-break adjustment is reapplied each
+  // time the cart renders (idempotent — the same line quantity always
+  // yields the same adjusted unit), so a stale or forged client value
+  // can't survive a round trip.
+
+  // A pricing.priceFor(sku) adapter over the catalog, for
+  // bundles.priceBundle. Returns the current price row in `currency`
+  // (or null when a member SKU has no price configured, which the
+  // caller treats as "bundle unavailable"). Memoized per call site so
+  // a bundle that repeats a SKU only hits the catalog once.
+  function _skuPricer(currency) {
+    var cache = Object.create(null);
+    return {
+      priceFor: async function (sku) {
+        if (cache[sku] !== undefined) return cache[sku];
+        var variant = await deps.catalog.variants.bySku(sku);
+        if (!variant) { cache[sku] = null; return null; }
+        var price = await deps.catalog.prices.current(variant.id, currency);
+        cache[sku] = price
+          ? { amount_minor: price.amount_minor, currency: price.currency }
+          : null;
+        return cache[sku];
+      },
+    };
+  }
+
+  // Is a SKU buyable right now — a real, in-stock catalog variant?
+  // A bundle with any unbuyable member is shown as unavailable so the
+  // atomic add never half-completes. Inventory is optional: a SKU with
+  // no inventory row is treated as available (the operator hasn't opted
+  // into stock tracking for it), matching the rest of the storefront's
+  // never-block-on-missing-inventory stance.
+  async function _skuBuyable(sku) {
+    var variant = await deps.catalog.variants.bySku(sku);
+    if (!variant) return null;
+    var inv = await deps.catalog.inventory.get(sku);
+    if (inv && (inv.stock_on_hand - inv.stock_held) <= 0) return false;
+    return variant;
+  }
+
+  // Resolve the "Bundle & save" offers for a product's variant SKUs.
+  // For each bundle a SKU belongs to: price it (sum-of-parts vs bundle
+  // price via the primitive's stored discount), check every member is
+  // buyable, and shape the display offer the renderer consumes. An
+  // unpriceable or unbuyable-member bundle is surfaced as unavailable
+  // (never hidden silently — the customer sees why). Dedupes bundles
+  // reachable via multiple variant SKUs. Drop-silent on a primitive
+  // error so a bundles read failure can't 500 the PDP — the rail just
+  // doesn't render (mirrors the reviews/Q&A degrade-to-empty stance).
+  async function _resolveBundleOffers(variantSkus, currency) {
+    if (!deps.bundles) return [];
+    var seen = Object.create(null);
+    var offers = [];
+    try {
+      for (var s = 0; s < variantSkus.length; s += 1) {
+        var bundleList = await deps.bundles.bundlesForComponent(variantSkus[s]);
+        for (var i = 0; i < bundleList.length; i += 1) {
+          var bundle = bundleList[i];
+          if (seen[bundle.bundle_sku]) continue;
+          seen[bundle.bundle_sku] = true;
+
+          // Decorate each member with a display title; flag unbuyable.
+          var componentsOut = [];
+          var allBuyable = true;
+          for (var j = 0; j < bundle.components.length; j += 1) {
+            var comp = bundle.components[j];
+            var buyable = await _skuBuyable(comp.sku);
+            if (!buyable) allBuyable = false;
+            var memberVariant = buyable || (await deps.catalog.variants.bySku(comp.sku));
+            var memberTitle = comp.sku;
+            if (memberVariant) {
+              var memberProduct = await deps.catalog.products.get(memberVariant.product_id);
+              memberTitle = (memberProduct && memberProduct.title) || memberVariant.title || comp.sku;
+            }
+            componentsOut.push({ sku: comp.sku, quantity: comp.quantity, title: memberTitle });
+          }
+
+          var priced = null;
+          try {
+            priced = await deps.bundles.priceBundle({ bundle_sku: bundle.bundle_sku, pricing: _skuPricer(currency) });
+          } catch (_e) {
+            // A missing member price / mixed currency makes the bundle
+            // unpriceable — surface it as unavailable rather than 500.
+            priced = null;
+          }
+
+          var available = allBuyable && priced != null;
+          var listMinor = priced ? priced.list_total_minor : 0;
+          var amountMinor = priced ? priced.amount_minor : 0;
+          var discountMinor = priced ? priced.discount_minor : 0;
+          var cur = (priced && priced.currency) || currency;
+          offers.push({
+            bundle_sku:         bundle.bundle_sku,
+            title:              bundle.title,
+            components:         componentsOut,
+            list_total_str:     pricing.format(listMinor, cur),
+            amount_str:         pricing.format(amountMinor, cur),
+            discount_str:       discountMinor > 0 ? pricing.format(discountMinor, cur) : null,
+            available:          available,
+            unavailable_reason: available
+              ? null
+              : (priced == null
+                  ? "Pricing for this bundle isn't available right now."
+                  : "One or more items in this bundle are out of stock."),
+          });
+        }
+      }
+    } catch (_e) {
+      // Bundles table not migrated / read failure — degrade to no rail.
+      return [];
+    }
+    return offers;
+  }
+
+  // Resolve the quantity-break table rows for a variant's SKU, against
+  // its list price. Composes the quantity-discount primitive's
+  // tierBreakdown with a sample unit = the variant's current price, so
+  // the displayed "price each" matches what the cart will charge at
+  // that quantity. Rows read as ascending ranges ("1–4", "5–9",
+  // "10+"). Returns [] when no active sku-scoped tier set exists.
+  // Drop-silent on a read failure so the PDP still renders.
+  async function _resolveQtyBreaks(sku, unitMinor, currency) {
+    if (!deps.quantityDiscounts || unitMinor == null) return [];
+    var breakdown;
+    try {
+      breakdown = await deps.quantityDiscounts.tierBreakdown({
+        scope:                   "sku",
+        scope_id:                sku,
+        sample_unit_price_minor: unitMinor,
+      });
+    } catch (_e) {
+      return [];
+    }
+    var rows = breakdown.rows || [];
+    if (rows.length === 0) return [];
+    // Order by min_quantity ascending; build the implicit range each
+    // tier covers (this tier's min up to the next tier's min minus 1,
+    // open-ended on the last). The base price (below the first tier)
+    // rides as the leading "1–(min-1)" row so the table shows the full
+    // ladder including the undiscounted band.
+    var sorted = rows.slice().sort(function (a, b2) { return a.min_quantity - b2.min_quantity; });
+    var out = [];
+    if (sorted[0].min_quantity > 1) {
+      out.push({
+        label:    "1–" + (sorted[0].min_quantity - 1),
+        unit_str: pricing.format(unitMinor, currency),
+      });
+    }
+    for (var i = 0; i < sorted.length; i += 1) {
+      var t = sorted[i];
+      var next = sorted[i + 1];
+      var label = next ? (t.min_quantity + "–" + (next.min_quantity - 1)) : (t.min_quantity + "+");
+      var unit = t.sample_discounted_unit_minor != null ? t.sample_discounted_unit_minor : unitMinor;
+      out.push({ label: label, unit_str: pricing.format(unit, currency) });
+    }
+    return out;
+  }
+
+  // Reprice cart lines for display + totals by reapplying the active
+  // quantity-break for each line's SKU at its current quantity. Returns
+  // a shallow copy of each line with `unit_amount_minor` overwritten by
+  // the discounted unit (the stored snapshot is never mutated — the
+  // adjustment is recomputed every render, so it stays correct as the
+  // quantity changes and as the operator edits tier schedules). When
+  // the quantity-discount primitive isn't wired, the lines pass through
+  // unchanged. Drop-silent per line so one unpriceable SKU can't break
+  // the cart total.
+  async function _repriceCartLines(lines) {
+    if (!deps.quantityDiscounts) return lines;
+    var out = [];
+    for (var i = 0; i < lines.length; i += 1) {
+      var l = lines[i];
+      var unit = l.unit_amount_minor;
+      try {
+        var variant = await deps.catalog.variants.get(l.variant_id);
+        var applied = await deps.quantityDiscounts.applyToLine({
+          line: {
+            sku:              l.sku,
+            quantity:         l.qty,
+            unit_price_minor: l.unit_amount_minor,
+            product_id:       variant ? variant.product_id : undefined,
+          },
+        });
+        unit = applied.discounted_unit_minor;
+      } catch (_e) {
+        // Unpriceable line (no tier / bad shape) keeps its snapshot.
+        unit = l.unit_amount_minor;
+      }
+      out.push(Object.assign({}, l, { unit_amount_minor: unit }));
+    }
+    return out;
+  }
+
   router.get("/", async function (_req, res) {
     var page = await deps.catalog.products.list({ status: "active", limit: 24 });
     // Best-effort "starting price" + "hero media" lookup. Each
@@ -3571,6 +4077,19 @@ function mount(router, deps) {
         catch (_e) { /* drop-silent — recently-viewed is supplementary to the buy path */ }
       }
     }
+    // Bundle offers + quantity-break table. Both compose the
+    // server-authoritative pricing primitives (the customer never sends
+    // a price); both degrade to empty on a missing-table / read failure
+    // so the buy path renders regardless. The quantity-break table is
+    // built against the first variant's list price — the band a shopper
+    // sees on the PDP matches what the cart charges at that quantity.
+    var variantSkus = variants.map(function (v) { return v.sku; });
+    var bundleOffers = await _resolveBundleOffers(variantSkus, "USD");
+    var firstVariant = variants[0] || null;
+    var firstPrice = firstVariant ? prices[firstVariant.id] : null;
+    var qtyBreaks = firstVariant && firstPrice
+      ? await _resolveQtyBreaks(firstVariant.sku, firstPrice.amount_minor, firstPrice.currency)
+      : [];
     var html = renderProduct({
       product:        product,
       variants:       variants,
@@ -3581,6 +4100,8 @@ function mount(router, deps) {
       review_cta:     reviewCta,
       qa_questions:   qaQuestions,
       qa_cta:         qaCta,
+      bundle_offers:  bundleOffers,
+      qty_breaks:     qtyBreaks,
       wishlist_count: wishlistCount,
       shop_name:      shopName,
       cart_count:     cartCount,
@@ -3589,6 +4110,224 @@ function mount(router, deps) {
     _send(res, 200, html);
   });
 
+  // Product compare — the guest-or-customer side-by-side basket. Mounts
+  // when the productCompare primitive is wired. The basket is keyed on
+  // the same `shop_sid` session cookie the cart uses (a routing key that
+  // grants zero authority — the primitive namespace-hashes it before it
+  // touches the database), so a shopper compares without authenticating;
+  // a logged-in shopper's customer_id rides alongside so the operator's
+  // account widget could resume the basket on another device. All three
+  // routes (toggle / clear / view) are writes-or-session-reads, so they
+  // live in the container — the edge forwards them (and any request
+  // carrying shop_sid skips the edge cache, so the view always reflects
+  // the live basket).
+  if (deps.productCompare) {
+    // Resolve the compare basket's session id. Reads the cart session
+    // cookie; when `mint` is true and none exists, allocates one + sets
+    // the cookie so the basket has a stable key across requests. A
+    // read-only path (the view) passes mint=false and returns null when
+    // there's no session — that renders the empty state without minting
+    // a cookie on a bare GET.
+    function _compareSid(req, res, mint) {
+      var sid = _readSidCookie(req);
+      if (sid) return sid;
+      if (!mint) return null;
+      sid = b.uuid.v7();
+      _setSidCookie(res, sid);
+      return sid;
+    }
+
+    function _compareRedirect(res, dest, notice) {
+      var sep = dest.indexOf("?") === -1 ? "?" : "&";
+      var to = notice ? (dest + sep + "notice=" + encodeURIComponent(notice)) : dest;
+      res.status(303);
+      res.setHeader && res.setHeader("location", to);
+      return res.end ? res.end() : res.send("");
+    }
+
+    // POST /compare/toggle — add the product if it isn't in the basket,
+    // remove it if it is. Idempotent (the primitive collapses a repeat
+    // add / a remove of an absent id). Redirects to `return_to` when it's
+    // a safe same-origin path (the compare page's per-column Remove uses
+    // it), otherwise back to the product PDP (the canonical slug is
+    // resolved from product_id, so a forged slug can't drive an open
+    // redirect). No auth required — guests compare too.
+    router.post("/compare/toggle", async function (req, res) {
+      var productId = (req.body || {}).product_id;
+      var sid = _compareSid(req, res, true);
+      var custEnv = _currentCustomerEnv(req);
+      var customerId = custEnv ? custEnv.customer_id : null;
+
+      // Resolve the safe redirect destination up front so a validation
+      // failure still lands the shopper somewhere sane.
+      var rt = (req.body || {}).return_to;
+      var dest = null;
+      if (typeof rt === "string" && /^\/[^/]/.test(rt)) dest = rt;
+
+      var notice;
+      try {
+        var list = await deps.productCompare.getCompareList({ session_id: sid });
+        var inBasket = list.product_ids.indexOf(productId) !== -1;
+        if (inBasket) {
+          await deps.productCompare.removeFromCompare({ session_id: sid, product_id: productId });
+          notice = "removed";
+        } else {
+          await deps.productCompare.addToCompare({ session_id: sid, product_id: productId, customer_id: customerId });
+          notice = "added";
+          // Best-effort impression telemetry — drop-silent, never block
+          // the toggle on the merchandising ledger write.
+          try {
+            await deps.productCompare.recordImpression({ session_id: sid, product_id: productId, source_kind: "product_page" });
+          } catch (_e) { /* drop-silent — impression telemetry is supplementary */ }
+        }
+      } catch (e) {
+        if (e && e.code === "COMPARE_FULL") {
+          // Cap reached — refuse the add with a notice rather than a
+          // crash. The basket is unchanged; the shopper removes one to
+          // make room.
+          if (!dest) {
+            var capProduct = null;
+            try { capProduct = await deps.catalog.products.get(productId); } catch (_e2) { capProduct = null; }
+            dest = capProduct ? ("/products/" + encodeURIComponent(capProduct.slug)) : "/compare";
+          }
+          return _compareRedirect(res, dest, "full");
+        }
+        // A malformed product id (or session id) is a client error.
+        res.status(e instanceof TypeError ? 400 : 500);
+        return res.end ? res.end((e && e.message) || "Error") : res.send((e && e.message) || "Error");
+      }
+
+      if (!dest) {
+        var product = null;
+        try { product = await deps.catalog.products.get(productId); } catch (_e) { product = null; }
+        dest = product ? ("/products/" + encodeURIComponent(product.slug)) : "/compare";
+      }
+      return _compareRedirect(res, dest, notice);
+    });
+
+    // POST /compare/clear — drop the whole basket. Idempotent (clearing
+    // an empty basket is a no-op). Always redirects back to the compare
+    // page so the shopper sees the emptied state.
+    router.post("/compare/clear", async function (req, res) {
+      var sid = _compareSid(req, res, false);
+      if (sid) {
+        try { await deps.productCompare.clearCompareList({ session_id: sid }); }
+        catch (e) {
+          if (!(e instanceof TypeError)) {
+            res.status(500);
+            return res.end ? res.end((e && e.message) || "Error") : res.send((e && e.message) || "Error");
+          }
+          // A malformed session cookie can't address a basket — treat
+          // the clear as a no-op rather than a 400 (the cookie grants
+          // zero authority; a stale/garbage value just means "no basket").
+        }
+      }
+      return _compareRedirect(res, "/compare", "cleared");
+    });
+
+    // GET /compare — the side-by-side comparison table for the session's
+    // basket. Empty basket → the friendly empty state. Each product id is
+    // resolved through the catalog; a product archived / deleted between
+    // the add and this render resolves out gracefully (the column renders
+    // "no longer available" with a remove control). The attribute matrix
+    // comes from the primitive's compareTable, fed a getProduct adapter
+    // enriched with the product's first variant + current price so the
+    // baked-in price/sku/weight attributes resolve against this catalog's
+    // schema.
+    router.get("/compare", async function (req, res) {
+      var sid = _compareSid(req, res, false);
+      var cartCount = await _cartCountForReq(req);
+      // Read the post-toggle notice key from the query string the same
+      // way the search route reads `?q=` — via the parsed URL, not
+      // `req.query` (which the router only populates when a route
+      // declares a query validator). renderCompare gates the key
+      // against a fixed allowlist, so a forged value renders nothing.
+      var compareUrl = req.url ? new URL(req.url, "http://localhost") : null;
+      var noticeKey = compareUrl ? compareUrl.searchParams.get("notice") : null;
+
+      if (!sid) {
+        return _send(res, 200, renderCompare({
+          columns: [], rows: [], shop_name: shopName, cart_count: cartCount,
+          asset_prefix: _cardAssetPrefix, notice: noticeKey,
+        }));
+      }
+
+      // Per-request product cache so the header-column decoration and the
+      // attribute-matrix adapter don't double-fetch the same product.
+      var enrichedCache = Object.create(null);
+      async function _enrich(pid) {
+        if (Object.prototype.hasOwnProperty.call(enrichedCache, pid)) return enrichedCache[pid];
+        var result = { product: null, variant: null, price: null, hero_media: null, available: false };
+        var product = null;
+        // get() throws a TypeError on a malformed id; a basket can only
+        // hold strict-UUID ids (the primitive sanitises on add), but stay
+        // defensive — a bad id resolves to the gone-state column.
+        try { product = await deps.catalog.products.get(pid); } catch (_e) { product = null; }
+        if (product && product.status === "active") {
+          result.product = product;
+          var variants = await deps.catalog.variants.listForProduct(pid);
+          if (variants.length) {
+            result.variant = variants[0];
+            var pr = await deps.catalog.prices.current(variants[0].id, "USD");
+            if (pr) result.price = pricing.format(pr.amount_minor, pr.currency);
+            // Availability — best-effort inventory read on the first
+            // variant. A product with no inventory row reads as available
+            // (operators who don't track stock still sell), an explicit
+            // zero-on-hand reads as out of stock.
+            try {
+              var inv = await deps.catalog.inventory.get(variants[0].sku);
+              result.available = !inv || (Number(inv.stock_on_hand) - Number(inv.stock_held)) > 0;
+            } catch (_e) { result.available = true; }
+          } else {
+            result.available = false;
+          }
+          var media = await deps.catalog.media.listForProduct(pid);
+          result.hero_media = media.length ? media[0] : null;
+        }
+        enrichedCache[pid] = result;
+        return result;
+      }
+
+      var list = await deps.productCompare.getCompareList({ session_id: sid });
+      var columns = [];
+      for (var i = 0; i < list.product_ids.length; i += 1) {
+        var pid = list.product_ids[i];
+        var e = await _enrich(pid);
+        columns.push({
+          product_id: pid,
+          product:    e.product,
+          hero_media: e.hero_media,
+          price:      e.price,
+          available:  e.available,
+        });
+      }
+
+      // Attribute matrix from the primitive. compareTable walks the
+      // basket's product ids through the `catalog` adapter wired into the
+      // primitive at create time (server.js) — that adapter enriches each
+      // product with a `variants` array (price as `price_minor`, `weight`
+      // from `weight_grams`) so the baked-in variant-sourced attributes
+      // resolve against this catalog's column shape. compareTable refuses
+      // (throws) when no catalog adapter was wired; a resolution failure
+      // degrades to no attribute rows — the fixed Price/Availability rows
+      // still render the side-by-side view.
+      var attrRows = [];
+      try {
+        var table = await deps.productCompare.compareTable({ session_id: sid });
+        attrRows = table.rows || [];
+      } catch (_e) { attrRows = []; }
+
+      _send(res, 200, renderCompare({
+        columns:      columns,
+        rows:         attrRows,
+        shop_name:    shopName,
+        cart_count:   cartCount,
+        asset_prefix: _cardAssetPrefix,
+        notice:       noticeKey,
+      }));
+    });
+  }
+
   // Collections — operator-curated + smart product lists. Public browse
   // pages; mounted when the collections primitive is wired.
   if (deps.collections) {
@@ -3696,7 +4435,13 @@ function mount(router, deps) {
         shop_name: shopName, theme: theme,
       }));
     }
-    var lines = await deps.cart.listLines(c.id);
+    var rawLines = await deps.cart.listLines(c.id);
+    // Reapply the active quantity-break for each line at its current
+    // quantity before totals — the unit price the customer sees on the
+    // line, the line total, and the cart subtotal all reflect the break.
+    // Recomputed every render (idempotent); the stored snapshot is never
+    // mutated, so changing a line's quantity re-prices it automatically.
+    var lines = await _repriceCartLines(rawLines);
     var totals = pricing.totals(c, lines, {});
     // Build the variant_id → { product, hero_media } lookup the
     // renderer uses to decorate each line with a thumbnail + title.
@@ -5727,6 +6472,141 @@ function mount(router, deps) {
     res.end ? res.end() : res.send("");
   });
 
+  // POST /cart/bundle — add every member of a bundle to the cart at the
+  // bundle price, atomically. Reads `bundle_sku` from the form body.
+  // The price is recomputed server-side from the catalog + the bundle
+  // primitive (the client sends only the SKU, never a price). The
+  // bundle discount is allocated across the member lines proportional
+  // to each member's list contribution, so the cart subtotal equals the
+  // bundle's quoted price; integer-cent remainder lands on the last
+  // line. Mounted only when the bundles primitive is wired.
+  if (deps.bundles) {
+    router.post("/cart/bundle", async function (req, res) {
+      var body = req.body || {};
+      var bundleSku = body.bundle_sku;
+      if (!bundleSku || typeof bundleSku !== "string") {
+        res.status(400);
+        return res.end ? res.end("Invalid request") : res.send("Invalid request");
+      }
+      var currency = "USD";
+      // Resolve + price the bundle. A malformed sku throws TypeError
+      // (→ 400); an unknown sku resolves to no bundle (→ 404).
+      var bundle, leaves, priced;
+      try {
+        bundle = await deps.bundles.getBundle(bundleSku);
+        if (!bundle) {
+          res.status(404);
+          return res.end ? res.end("Bundle not found") : res.send("Bundle not found");
+        }
+        leaves = await deps.bundles.expand({ bundle_sku: bundleSku, quantity: 1 });
+        priced = await deps.bundles.priceBundle({ bundle_sku: bundleSku, pricing: _skuPricer(currency) });
+      } catch (e) {
+        if (e instanceof TypeError) {
+          res.status(400);
+          return res.end ? res.end((e && e.message) || "Invalid bundle") : res.send((e && e.message) || "Invalid bundle");
+        }
+        res.status(500);
+        return res.end ? res.end("Error") : res.send("Error");
+      }
+
+      // Pre-flight: every leaf must resolve to a buyable variant + a
+      // current price. All-or-nothing — if any member is unavailable,
+      // add nothing and bounce back to the PDP with a notice (no
+      // half-filled cart). `leaf.quantity` is the per-bundle demand.
+      var members = [];
+      for (var i = 0; i < leaves.length; i += 1) {
+        var leaf = leaves[i];
+        var variant = await _skuBuyable(leaf.sku);
+        if (!variant) {
+          res.status(303);
+          res.setHeader && res.setHeader("location", "/cart?bundle=unavailable");
+          return res.end ? res.end() : res.send("");
+        }
+        var price = await deps.catalog.prices.current(variant.id, currency);
+        if (!price) {
+          res.status(303);
+          res.setHeader && res.setHeader("location", "/cart?bundle=unavailable");
+          return res.end ? res.end() : res.send("");
+        }
+        members.push({
+          variant_id:   variant.id,
+          qty:          leaf.quantity,
+          list_each:    price.amount_minor,
+          list_line:    price.amount_minor * leaf.quantity,
+        });
+      }
+
+      // Allocate the bundle total across members proportional to each
+      // member's list contribution, then express each share as an integer
+      // per-unit price. The cart stores one integer unit price per line and
+      // charges qty*unit, so flooring a share to a per-unit price loses up
+      // to (qty-1) cents on a multi-unit line. Those cents are added back
+      // below so the cart subtotal equals the bundle price exactly — never
+      // undercharging the advertised bundle.
+      var listTotal = priced.list_total_minor;
+      var bundleTotal = priced.amount_minor;
+      var allocated = 0;
+      for (var m = 0; m < members.length; m += 1) {
+        var mem = members[m];
+        var share = listTotal > 0
+          ? Math.floor((bundleTotal * mem.list_line) / listTotal)
+          : Math.floor(bundleTotal / members.length);
+        mem.alloc_line = share;
+        allocated += share;
+      }
+      // The proportional floor leaves a whole-cent remainder; park it on the
+      // last member's line so the per-line allocations sum to the bundle
+      // total exactly.
+      if (members.length > 0) members[members.length - 1].alloc_line += (bundleTotal - allocated);
+
+      // Convert each member's line allocation to a uniform integer per-unit
+      // price (floor) and tally the cents lost to that floor across all
+      // lines. A single-unit line (the usual bundle shape) absorbs the whole
+      // shortfall exactly; failing that, the cents are returned in qty-sized
+      // steps to the smallest-quantity lines, with any final sub-step residual
+      // rounded up onto the smallest line — so the realized subtotal is never
+      // below the quoted bundle price.
+      var lostCents = 0;
+      for (var u = 0; u < members.length; u += 1) {
+        var me = members[u];
+        me.unit = me.qty > 0 ? Math.floor(me.alloc_line / me.qty) : me.alloc_line;
+        lostCents += me.alloc_line - (me.unit * me.qty);
+      }
+      if (lostCents > 0 && members.length > 0) {
+        var byQty = members.slice().sort(function (a, b) { return a.qty - b.qty; });
+        var single = null;
+        for (var s = 0; s < byQty.length; s += 1) { if (byQty[s].qty === 1) { single = byQty[s]; break; } }
+        if (single) {
+          single.unit += lostCents;
+        } else {
+          for (var g = 0; g < byQty.length && lostCents > 0; g += 1) {
+            while (lostCents >= byQty[g].qty) { byQty[g].unit += 1; lostCents -= byQty[g].qty; }
+          }
+          if (lostCents > 0) { byQty[0].unit += 1; lostCents = 0; }
+        }
+      }
+
+      var resolved = await _getOrCreateCart(req, res, currency);
+      try {
+        for (var k = 0; k < members.length; k += 1) {
+          var mk = members[k];
+          await deps.cart.addLine(resolved.cart.id, {
+            variant_id:        mk.variant_id,
+            qty:               mk.qty,
+            unit_amount_minor: mk.unit,
+            unit_currency:     currency,
+          });
+        }
+      } catch (e) {
+        res.status(e instanceof TypeError ? 400 : 500);
+        return res.end ? res.end((e && e.message) || "Error") : res.send((e && e.message) || "Error");
+      }
+      res.status(303);
+      res.setHeader && res.setHeader("location", "/cart");
+      res.end ? res.end() : res.send("");
+    });
+  }
+
   // POST /cart/lines/:line_id/update — change qty on an existing
   // line. Form value `qty` is the new quantity (1..99). HTML forms
   // only support GET/POST so the verb is in the path.