@blamejs/blamejs-shop 0.1.31 → 0.1.33

package/lib/storefront.js

@@ -205,21 +205,31 @@ var LAYOUT =
 // each render call to override; absent that, every storefront page
 // references the shipped default theme — so a fresh install renders
 // styled out of the box without any wiring.
-// Asset integrity + version manifest — sha384 digests + the release
-// version, baked at build time (scripts/generate-asset-manifest.js) and
-// committed. Read here instead of hashing the files at render time so the
-// integrity attribute and the cache-buster are present in every runtime,
-// including the container image and the edge Worker, neither of which
-// ships the theme asset files to hash live. See lib/asset-manifest.json.
+// Asset integrity + fingerprint + version manifest — sha384 digests and
+// content-fingerprinted paths, baked at build time
+// (scripts/generate-asset-manifest.js) and committed. Read here instead of
+// hashing the files at render time so the integrity attribute and the
+// fingerprinted URL are present in every runtime, including the container
+// image and the edge Worker, neither of which ships the theme asset files
+// to hash live. See lib/asset-manifest.json.
 var _assetManifest = require("./asset-manifest.json");
 
-// The default theme stylesheet ships from R2 at this path. The
-// `?v=` query is a build-time cache-buster — operator uploads to R2
-// rewrite the bytes at the same path, and without the version
-// param browsers happily serve the previous cached CSS for the
-// five-minute default TTL. The manifest version bumps each release,
-// forcing every active session to re-fetch.
-var DEFAULT_THEME_CSS_URL = "/assets/themes/default/css/main.css?v=" + _assetManifest.version;
+// Content-fingerprinted asset URL — `/assets/themes/default/<fingerprinted>`,
+// where the fingerprint embeds a hash of the asset bytes (`main.<hash>.css`).
+// The hash IS the cache-buster, so no `?v=` query is appended: each URL maps
+// one-to-one onto a byte-content. This makes the Worker/R2 deploy order
+// irrelevant — a not-yet-synced asset 404s instead of poisoning SRI, and
+// pages already in flight keep loading the old fingerprinted object that
+// still exists in R2. An asset missing from the manifest (a custom operator
+// theme whose bytes aren't ours to hash) falls back to its plain path.
+function _assetUrl(relUnderThemeAssets) {
+  var entry = _assetManifest.assets[relUnderThemeAssets];
+  var fp    = (entry && entry.fingerprinted) || relUnderThemeAssets;
+  return "/assets/themes/default/" + fp;
+}
+
+// The default theme stylesheet ships from R2 at its fingerprinted path.
+var DEFAULT_THEME_CSS_URL = _assetUrl("css/main.css");
 
 // Footer copyright year — resolved once at module load. It's a near-static
 // value (changes once a year); a `new Date()` allocation on every page
@@ -227,12 +237,11 @@ var DEFAULT_THEME_CSS_URL = "/assets/themes/default/css/main.css?v=" + _assetMan
 // that a year-boundary staleness window doesn't matter for a copyright line.
 var _COPYRIGHT_YEAR = String(new Date().getUTCFullYear());
 
-// Client "island" scripts are served as external assets (same `?v=` cache-
-// bust as the CSS), never inline — the storefront's strict `script-src
-// 'self'` CSP blocks inline <script>, so an inline island silently fails
-// in production. `'self'` allows these /assets/ files; the R2 asset sync
+// Client "island" scripts are served as external assets (fingerprinted, same
+// as the CSS), never inline — the storefront's strict `script-src 'self'`
+// CSP blocks inline <script>, so an inline island silently fails in
+// production. `'self'` allows these /assets/ files; the R2 asset sync
 // (npm run sync-assets) uploads them alongside the stylesheets.
-var _ASSET_JS_VERSION = _assetManifest.version;
 
 // Subresource Integrity for the static assets — the browser refuses to
 // run/apply a resource whose served bytes don't match (defense against an
@@ -242,11 +251,12 @@ var _ASSET_JS_VERSION = _assetManifest.version;
 // whose bytes aren't ours to hash) yields no attribute. Same-origin, so
 // no `crossorigin` is required for the check to run.
 function _assetSri(relUnderThemeAssets) {
-  return _assetManifest.assets[relUnderThemeAssets] || null;
+  var entry = _assetManifest.assets[relUnderThemeAssets];
+  return (entry && entry.integrity) || null;
 }
 function _islandScript(name) {
   var sri = _assetSri("js/" + name);
-  return "<script src=\"/assets/themes/default/js/" + name + "?v=" + _ASSET_JS_VERSION + "\"" +
+  return "<script src=\"" + _assetUrl("js/" + name) + "\"" +
     (sri ? " integrity=\"" + sri + "\"" : "") + " defer></script>";
 }
 
@@ -646,13 +656,171 @@ var SEARCH_EMPTY =
   "    <p class=\"search-empty__icon\" aria-hidden=\"true\">⌕</p>\n" +
   "    <h2>{{heading}}</h2>\n" +
   "    <p>{{copy}}</p>\n" +
+  "    {{clear_link}}\n" +
   "    <a href=\"/\" class=\"btn-ghost\">Browse the full catalog</a>\n" +
   "  </div>\n" +
   "</section>\n";
 
+var SEARCH_CORRECTION =
+  "<p class=\"search-correction\">Showing results for <strong>{{correction}}</strong>.</p>\n";
+
+var FACET_GROUP_HEAD =
+  "<fieldset class=\"facet-group\">\n" +
+  "  <legend class=\"facet-group__title\">{{label}}</legend>\n" +
+  "  <ul class=\"facet-group__options\">\n";
+
+var FACET_OPTION =
+  "<li class=\"facet-option\">\n" +
+  "  <a class=\"facet-option__link{{selected_class}}\" href=\"{{href}}\" rel=\"nofollow\"{{aria_pressed}}>\n" +
+  "    <span class=\"facet-option__box\" aria-hidden=\"true\">{{box}}</span>\n" +
+  "    <span class=\"facet-option__label\">{{label}}</span>\n" +
+  "    <span class=\"facet-option__count\">{{count}}</span>\n" +
+  "  </a>\n" +
+  "</li>\n";
+
+var FACET_CHIP =
+  "<a class=\"facet-chip\" href=\"{{href}}\" rel=\"nofollow\">\n" +
+  "  <span class=\"facet-chip__label\">{{label}}</span>\n" +
+  "  <span class=\"facet-chip__x\" aria-hidden=\"true\">×</span>\n" +
+  "  <span class=\"skip-link\">Remove filter</span>\n" +
+  "</a>\n";
+
+// Build a `/search?...` URL from a query + applied-filters map. Mirrors
+// the edge renderer's `_searchUrl` so the container and worker emit
+// byte-identical filter links. `URLSearchParams` percent-encodes every
+// value; the strict `_render` HTML-escapes it again when it lands in an
+// `href` attribute.
+function _searchUrl(q, filters) {
+  var sp = new URLSearchParams();
+  if (typeof q === "string" && q.length) sp.set("q", q);
+  var keys = Object.keys(filters).sort();
+  for (var i = 0; i < keys.length; i += 1) {
+    var vals = (filters[keys[i]] || []).slice().sort();
+    for (var j = 0; j < vals.length; j += 1) sp.append(keys[i], vals[j]);
+  }
+  var qs = sp.toString();
+  return qs.length ? "/search?" + qs : "/search";
+}
+
+function _toggleFilter(filters, key, value) {
+  var next = {};
+  var keys = Object.keys(filters);
+  for (var i = 0; i < keys.length; i += 1) next[keys[i]] = filters[keys[i]].slice();
+  var cur = next[key] || [];
+  var at = cur.indexOf(value);
+  if (at === -1) cur = cur.concat([value]);
+  else cur = cur.slice(0, at).concat(cur.slice(at + 1));
+  if (cur.length) next[key] = cur;
+  else delete next[key];
+  return next;
+}
+
+function _renderSearchFacets(facets, filters, q) {
+  var groups = [];
+  for (var f = 0; f < facets.length; f += 1) {
+    var facet = facets[f];
+    var optionsHtml = "";
+    var rendered = 0;
+    for (var o = 0; o < facet.options.length; o += 1) {
+      var opt = facet.options[o];
+      if (opt.count === 0 && !opt.selected) continue;
+      optionsHtml += _render(FACET_OPTION, {
+        href:           _searchUrl(q, _toggleFilter(filters, facet.key, opt.value)),
+        selected_class: opt.selected ? " is-selected" : "",
+        aria_pressed:   "RAW_ARIA",
+        box:            opt.selected ? "✓" : "",
+        label:          opt.label,
+        count:          String(opt.count),
+      }).replace("RAW_ARIA", opt.selected ? " aria-pressed=\"true\"" : " aria-pressed=\"false\"");
+      rendered += 1;
+    }
+    if (rendered === 0) continue;
+    groups.push(_render(FACET_GROUP_HEAD, { label: facet.label }) + optionsHtml + "  </ul>\n</fieldset>\n");
+  }
+  if (!groups.length) return "";
+  return "<aside class=\"search-facets\" aria-label=\"Filter results\">\n" +
+    "<h2 class=\"search-facets__title\">Filter</h2>\n" +
+    groups.join("") +
+    "</aside>\n";
+}
+
+function _renderSearchChips(facets, filters, q) {
+  var labelFor = {};
+  for (var f = 0; f < facets.length; f += 1) {
+    var byVal = {};
+    for (var o = 0; o < facets[f].options.length; o += 1) byVal[facets[f].options[o].value] = facets[f].options[o].label;
+    labelFor[facets[f].key] = { group: facets[f].label, values: byVal };
+  }
+  var chips = "";
+  var any = false;
+  var keys = Object.keys(filters).sort();
+  for (var k = 0; k < keys.length; k += 1) {
+    var meta = labelFor[keys[k]];
+    var vals = filters[keys[k]] || [];
+    for (var v = 0; v < vals.length; v += 1) {
+      var valLabel = meta && meta.values[vals[v]] != null ? meta.values[vals[v]] : vals[v];
+      var groupLabel = meta ? meta.group : keys[k];
+      chips += _render(FACET_CHIP, {
+        href:  _searchUrl(q, _toggleFilter(filters, keys[k], vals[v])),
+        label: groupLabel + ": " + valLabel,
+      });
+      any = true;
+    }
+  }
+  if (!any) return "";
+  var clearAll = _render(
+    "<a class=\"facet-chip facet-chip--clear\" href=\"{{href}}\" rel=\"nofollow\">Clear all filters</a>\n",
+    { href: _searchUrl(q, {}) }
+  );
+  return "<div class=\"search-active-filters\" aria-label=\"Active filters\">\n" + chips + clearAll + "</div>\n";
+}
+
+// Hard caps mirroring `lib/search-facets.js`'s applied-filter
+// validators so a hostile / stale URL can't blow the in-memory facet
+// walk. Garbage values and unknown facet keys are dropped (not
+// refused): a shopper landing on a link with a removed-facet param
+// still gets a clean results page rather than a 500.
+var SEARCH_MAX_FACET_KEYS   = 32;
+var SEARCH_MAX_FACET_VALUES = 64;
+var SEARCH_MAX_VALUE_LEN    = 256;
+var SEARCH_CONTROL_BYTE_RE  = /[\x00-\x1f\x7f]/;
+
+// Parse `?key=value` repeats off a parsed URL into the
+// `{ facetKey: [value, ...] }` shape the searchFacets primitive
+// consumes, keeping only keys that match a loaded facet definition and
+// values that survive the length / control-byte guards. `facetDefs` is
+// the `listFacets()` result.
+function _parseSearchFilters(url, facetDefs) {
+  var out = {};
+  if (!url || !url.searchParams) return out;
+  var known = {};
+  for (var i = 0; i < facetDefs.length; i += 1) known[facetDefs[i].key] = true;
+  var keyCount = 0;
+  url.searchParams.forEach(function (rawVal, rawKey) {
+    if (rawKey === "q") return;
+    if (!Object.prototype.hasOwnProperty.call(known, rawKey)) return;
+    if (typeof rawVal !== "string") return;
+    if (!rawVal.length || rawVal.length > SEARCH_MAX_VALUE_LEN) return;
+    if (SEARCH_CONTROL_BYTE_RE.test(rawVal)) return;
+    if (!Object.prototype.hasOwnProperty.call(out, rawKey)) {
+      if (keyCount >= SEARCH_MAX_FACET_KEYS) return;
+      out[rawKey] = [];
+      keyCount += 1;
+    }
+    var arr = out[rawKey];
+    if (arr.length >= SEARCH_MAX_FACET_VALUES) return;
+    if (arr.indexOf(rawVal) !== -1) return;
+    arr.push(rawVal);
+  });
+  return out;
+}
+
 function renderSearch(opts) {
   if (!opts || typeof opts.q !== "string") throw new TypeError("storefront.renderSearch: opts.q (string) required");
   var products = Array.isArray(opts.products) ? opts.products : [];
+  var facets   = Array.isArray(opts.facets) ? opts.facets : [];
+  var filters  = (opts.filters && typeof opts.filters === "object") ? opts.filters : {};
+  var hasFilters = Object.keys(filters).length > 0;
   var qTrim = opts.q.trim();
   var title, summary, emptyHeading, emptyCopy;
   if (qTrim.length === 0) {
@@ -669,10 +837,24 @@ function renderSearch(opts) {
     title   = "“" + qTrim + "”";
     summary = "Showing " + products.length + " match" + (products.length === 1 ? "" : "es") + " for your query.";
   }
+
+  var correctionHtml = "";
+  if (qTrim.length > 0 && typeof opts.corrected_query === "string" &&
+      opts.corrected_query.length > 0 && opts.corrected_query !== qTrim) {
+    correctionHtml = _render(SEARCH_CORRECTION, { correction: opts.corrected_query });
+  }
+
+  var facetsHtml = (qTrim.length > 0) ? _renderSearchFacets(facets, filters, opts.q) : "";
+  var chipsHtml  = (qTrim.length > 0) ? _renderSearchChips(facets, filters, opts.q) : "";
+
   var header = _render(SEARCH_HEADER, { title: title, summary: summary });
-  var body;
+  var resultsInner;
   if (products.length === 0) {
-    body = header + _render(SEARCH_EMPTY, { heading: emptyHeading, copy: emptyCopy });
+    var clearLink = hasFilters
+      ? _render("<a href=\"{{href}}\" class=\"btn-ghost\">Clear filters</a>", { href: _searchUrl(opts.q, {}) })
+      : "";
+    resultsInner = _render(SEARCH_EMPTY, { heading: emptyHeading, copy: emptyCopy, clear_link: "RAW_CLEAR" })
+      .replace("RAW_CLEAR", clearLink);
   } else {
     var assetPrefix = opts.asset_prefix || "/assets/";
     var cards = products.map(function (p) {
@@ -683,7 +865,15 @@ function renderSearch(opts) {
       var imageAlt = p.hero_media ? (p.hero_media.alt_text || p.title) : null;
       return _buildProductCard({ title: p.title, price: priceStr, slug: p.slug, image_url: imageUrl, image_alt: imageAlt });
     }).join("\n");
-    body = header + "<section class=\"search-grid\"><div class=\"grid\">" + cards + "</div></section>";
+    resultsInner = "<section class=\"search-grid\"><div class=\"grid\">" + cards + "</div></section>";
+  }
+  var body;
+  if (facetsHtml.length > 0) {
+    body = header + correctionHtml + chipsHtml +
+      "<div class=\"search-layout\">" + facetsHtml +
+      "<div class=\"search-layout__results\">" + resultsInner + "</div></div>";
+  } else {
+    body = header + correctionHtml + chipsHtml + resultsInner;
   }
   return _wrap({
     title:      "Search",
@@ -745,10 +935,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";
@@ -890,6 +1082,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" +
@@ -2321,6 +2616,8 @@ 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"),
@@ -2333,6 +2630,8 @@ 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, {
@@ -2342,8 +2641,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
@@ -3610,6 +3911,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
@@ -3639,6 +4138,68 @@ function mount(router, deps) {
     _send(res, 200, html);
   });
 
+  // Decorate one product row with the display columns the search
+  // cards need (first variant's price, first media) AND the facet
+  // fields the searchFacets primitive computes against: `collection`
+  // (array of collection slugs the product belongs to), `price_minor`
+  // (the starting price), and `in_stock` (any variant with available
+  // stock). Composes the wired catalog / collections primitives; a
+  // collection facet only populates when `deps.collections` is present.
+  async function _decorateForSearch(p) {
+    var variants = await deps.catalog.variants.listForProduct(p.id);
+    var startingPrice = null;
+    var inStock = false;
+    for (var vi = 0; vi < variants.length; vi += 1) {
+      if (vi === 0) {
+        var price = await deps.catalog.prices.current(variants[0].id, "USD");
+        if (price) startingPrice = price;
+      }
+      var inv = await deps.catalog.inventory.get(variants[vi].sku);
+      if (inv && (Number(inv.stock_on_hand) - Number(inv.stock_held)) > 0) inStock = true;
+    }
+    var media = await deps.catalog.media.listForProduct(p.id);
+    var heroMedia = media.length ? media[0] : null;
+    var collectionSlugs = [];
+    if (deps.collections && typeof deps.collections.collectionsForProduct === "function") {
+      var cols = await deps.collections.collectionsForProduct(p.id);
+      for (var ci = 0; ci < cols.length; ci += 1) {
+        if (cols[ci] && cols[ci].slug) collectionSlugs.push(cols[ci].slug);
+      }
+    }
+    return Object.assign({}, p, {
+      starting_price_minor:    startingPrice ? startingPrice.amount_minor : null,
+      starting_price_currency: startingPrice ? startingPrice.currency      : "USD",
+      hero_media:              heroMedia,
+      collection:              collectionSlugs,
+      price_minor:             startingPrice ? startingPrice.amount_minor : null,
+      in_stock:                inStock,
+    });
+  }
+
+  // Pull the facetable universe for a set of search terms: every
+  // active product matching ANY term (canonical query + synonym
+  // expansions) on title / description, decorated once. The
+  // searchFacets primitive consumes this through a `catalog.list`
+  // adapter and walks the rows in-memory for counts; the route reuses
+  // the same rows for the narrowed result grid (one decoration pass,
+  // no double round trip).
+  async function _facetableUniverse(terms) {
+    var byId = {};
+    var rows = [];
+    for (var ti = 0; ti < terms.length; ti += 1) {
+      var term = typeof terms[ti] === "string" ? terms[ti].trim() : "";
+      if (!term.length) continue;
+      var page = await deps.catalog.products.search({ q: term, status: "active", limit: 100 });
+      for (var i = 0; i < page.rows.length; i += 1) {
+        var p = page.rows[i];
+        if (byId[p.id]) continue;
+        byId[p.id] = true;
+        rows.push(await _decorateForSearch(p));
+      }
+    }
+    return rows;
+  }
+
   router.get("/search", async function (req, res) {
     var url = req.url ? new URL(req.url, "http://localhost") : null;
     var qRaw = url && url.searchParams.get("q");
@@ -3647,26 +4208,53 @@ function mount(router, deps) {
     // primitive — defends against a 10 MiB `?q=...` mass that would
     // otherwise round-trip through the LIKE escape function.
     if (q.length > 200) q = q.slice(0, 200);
-    var products = [];
+
+    var products    = [];
+    var facetGroups = [];
+    var filters     = {};
+    var correctedQ  = "";
+
     if (q.trim().length > 0) {
-      var page = await deps.catalog.products.search({ q: q, status: "active", limit: 24 });
-      for (var i = 0; i < page.rows.length; i += 1) {
-        var p = page.rows[i];
-        var variants = await deps.catalog.variants.listForProduct(p.id);
-        var startingPrice = null;
-        if (variants.length) {
-          var price = await deps.catalog.prices.current(variants[0].id, "USD");
-          if (price) startingPrice = price;
-        }
-        var media = await deps.catalog.media.listForProduct(p.id);
-        var heroMedia = media.length ? media[0] : null;
-        products.push(Object.assign({}, p, {
-          starting_price_minor:    startingPrice ? startingPrice.amount_minor : null,
-          starting_price_currency: startingPrice ? startingPrice.currency      : "USD",
-          hero_media:              heroMedia,
-        }));
+      // Synonym + typo rewrite expands the typed query into the
+      // canonical term plus operator-curated expansions BEFORE the
+      // product query runs. Without the dep, the raw query is the
+      // only term.
+      var terms = [];
+      if (deps.searchSynonyms) {
+        var rewrite = await deps.searchSynonyms.rewrite(q);
+        correctedQ = rewrite.canonical;
+        if (rewrite.canonical.length) terms.push(rewrite.canonical);
+        for (var e = 0; e < rewrite.expansions.length; e += 1) terms.push(rewrite.expansions[e]);
+      }
+      if (!terms.length) terms.push(q.trim());
+
+      if (deps.searchFacets) {
+        // The universe is decorated once; the searchFacets catalog
+        // adapter and the narrowed result grid share it. The facet
+        // instance is created per-request bound to this request's
+        // universe so concurrent searches never share a catalog
+        // snapshot. `deps.searchFacets(catalog)` is the factory wired
+        // in server.js (the searchFacets primitive's `create`, with
+        // the DB query handle pre-bound).
+        var universe = await _facetableUniverse(terms);
+        var facetCatalog = {
+          // The primitive narrows in-memory and drops the focal facet
+          // per option, so the adapter ignores applied_filters and
+          // returns the full matched universe every call.
+          list: function () { return Promise.resolve({ rows: universe }); },
+        };
+        var sfInstance = deps.searchFacets(facetCatalog);
+        var facetDefs = await sfInstance.listFacets({});
+        filters = _parseSearchFilters(url, facetDefs);
+        facetGroups = await sfInstance.getFacets({ query: q, applied_filters: filters });
+        var preview = await sfInstance.previewQuery({ query: q, filters: filters, sample: 24 });
+        products = preview.sample;
+      } else {
+        // No facet dep — flat search over the expanded terms.
+        products = (await _facetableUniverse(terms)).slice(0, 24);
       }
     }
+
     var sid = _readSidCookie(req);
     var cartCount = 0;
     if (sid) {
@@ -3677,10 +4265,13 @@ function mount(router, deps) {
       }
     }
     _send(res, 200, renderSearch({
-      q:          q,
-      products:   products,
-      shop_name:  shopName,
-      cart_count: cartCount,
+      q:               q,
+      products:        products,
+      facets:          facetGroups,
+      filters:         filters,
+      corrected_query: correctedQ,
+      shop_name:       shopName,
+      cart_count:      cartCount,
     }));
   });
 
@@ -3768,6 +4359,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,
@@ -3778,6 +4382,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,
@@ -4111,7 +4717,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.
@@ -6142,6 +6754,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.