@blamejs/blamejs-shop 0.2.19 → 0.2.21

package/CHANGELOG.md

@@ -8,6 +8,10 @@ upgrading across more than a few patches at a time.
 
 ## v0.2.x
 
+- v0.2.21 (2026-05-29) — **Related products ("You may also like") on the product page.** Product pages now show a related-products rail. The picks are the other products in the product's primary collection, ordered deterministically and capped at four, rendered with the same product-card markup the home and search grids use — identical on the edge and origin paths. The rail is hidden when a product has no related items. This surfaces existing catalog relationships to shoppers without any new data or configuration. **Added:** *Related-products rail on the PDP* — A "You may also like" section on each product page lists other active products from the same primary collection (deterministic order, up to four), using the standard product-card markup byte-identically across the edge and origin renders. Hidden when there are no related products.
+
+- v0.2.20 (2026-05-29) — **Manage a subscription yourself — pause, skip, change, or reactivate.** The subscriptions account screen previously only let a customer cancel. It now exposes the full self-service set: pause and resume, skip the next shipment, change the quantity, change the delivery frequency, and reactivate a recently-cancelled subscription within its grace window. Each action is state-gated (only the controls that apply to a subscription's current state are shown), confirm-aware where it changes billing, and reports back with a status notice. No more cancelling just to make a change. **Added:** *Subscription self-management* — `/account/subscriptions` gains Pause / Resume, Skip next shipment, Change quantity, Change frequency, and Reactivate (within the grace window) alongside Cancel. Controls are shown only when valid for the subscription's state; quantity and frequency are validated server-side; pause and cancel go through a confirmation step.
+
 - v0.2.19 (2026-05-29) — **Search results render the same product cards as the rest of the store.** A product with no image showed an outdated, text-only card on the search-results page when that page was served from the edge, while the home and category grids (and the origin-rendered search page) used the current placeholder-illustration card. The edge search page now emits the same card markup as every other grid, so a no-image product looks identical wherever it appears. A render-level parity check now pins the search page's markup byte-for-byte across the edge and origin paths so this kind of drift is caught automatically. **Fixed:** *Consistent no-image product card on search* — The edge-rendered search results page used a stale text-only card for products without a hero image; it now renders the placeholder-illustration card used across the rest of the storefront, byte-identical to the origin render.
 
 - v0.2.18 (2026-05-29) — **Admin: a clear "payments aren't live" warning, and void a gift card.** Two admin-console fixes. The landing page now warns that payments aren't live whenever Stripe isn't configured — independently of the setup wizard — so an operator who finishes the identity wizard isn't misled into thinking customers can check out when they still can't. And gift cards can now be voided from the console: the card detail screen gets a confirm-gated Void action for active cards, composing the existing void capability. **Added:** *Gift-card void* — The gift-card detail screen shows a confirm-gated "Void card" action for active cards. Voiding goes through a confirmation step and is content-negotiated like the rest of the console (a bearer-token client gets the voided card as JSON; already-redeemed cards are refused). **Changed:** *Payment-readiness banner on the admin landing* — The admin landing shows a "Payments aren't live yet — customers can't check out. See Integrations" banner whenever Stripe isn't enabled, gated on live payment readiness rather than on whether the setup wizard was marked complete. The existing not-set-up identity banner is unchanged; both can appear together.

package/lib/asset-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.19",
+  "version": "0.2.21",
   "assets": {
     "css/admin.css": {
       "integrity": "sha384-1SIn6oAf1DjECbRfKENZasdKHJiywGdXR58wn0hsFGcdVHzUmvfgMkEz5ANIAZJ3",

package/lib/storefront.js

@@ -725,6 +725,22 @@ function _buildProductCard(p) {
   });
 }
 
+// PDP "You may also like" rail. `related` is the pre-decorated card
+// list [{ slug, title, price, image_url, image_alt }] the PDP renderer
+// builds from the same-collection picks. Reuses the catalog grid +
+// product-card markup so it inherits the storefront's card styling.
+// Returns "" when there's nothing to show so the PDP renders no empty
+// rail. Mirrored byte-for-byte by worker/render/product.js#_buildRelatedProducts.
+function _buildRelatedProducts(related) {
+  related = related || [];
+  if (related.length === 0) return "";
+  var cards = related.map(function (p) { return _buildProductCard(p); }).join("");
+  return "<section class=\"catalog-section pdp-recommendations\" aria-labelledby=\"pdp-related-title\">" +
+           "<header class=\"section-head\"><h2 id=\"pdp-related-title\" class=\"section-head__title\">You may also like</h2></header>" +
+           "<div class=\"grid\">" + cards + "</div>" +
+         "</section>";
+}
+
 var HOME_HERO =
   "<section class=\"hero hero--dark\">\n" +
   "  <div class=\"hero__bg\" aria-hidden=\"true\">\n" +
@@ -1535,7 +1551,8 @@ var PRODUCT_PAGE =
   "  RAW_BUNDLES_PLACEHOLDER\n" +
   "  RAW_REVIEWS_PLACEHOLDER\n" +
   "  RAW_QA_PLACEHOLDER\n" +
-  "</section>\n";
+  "</section>\n" +
+  "RAW_RELATED_PLACEHOLDER";
 
 // PDP gallery markup — composed once per render call from the
 // product's media rows. When media is present, the first row drives
@@ -3156,16 +3173,83 @@ function _subscriptionIsCancelable(sub) {
   return CANCELABLE_SUB_STATUSES.indexOf(sub.status) !== -1 && Number(sub.cancel_at_period_end) !== 1;
 }
 
+// Local control-state, derived the same way subscriptionControls derives
+// it — `cancelled_at` set ⇒ cancelled, else `paused_at` set ⇒ paused,
+// else active. This is the lifecycle the self-manage controls act on; it
+// rides alongside Stripe's `status` (the billing mirror), which the
+// controls primitive never writes.
+function _subscriptionControlState(sub) {
+  if (sub.cancelled_at != null) return "cancelled";
+  if (sub.paused_at != null)    return "paused";
+  return "active";
+}
+
+// The 90-day reactivation grace mirrors subscriptionControls.REACTIVATE_
+// GRACE_MS. A cancelled row is reactivatable from the storefront while
+// the cancellation is inside that window; past it, the primitive refuses
+// and the customer must re-subscribe.
+var REACTIVATE_GRACE_MS = b.constants.TIME.days(90);
+function _subscriptionIsReactivatable(sub) {
+  return sub.cancelled_at != null && (Date.now() - Number(sub.cancelled_at)) <= REACTIVATE_GRACE_MS;
+}
+
+// The cadence-change <select> options — mirrors subscriptionControls.
+// FREQUENCIES. Pre-selects the row's current frequency when set.
+var SUB_FREQUENCIES = ["weekly", "biweekly", "monthly", "quarterly", "semiannual", "annual"];
+function _frequencyOptions(current) {
+  var esc = b.template.escapeHtml;
+  var out = "";
+  for (var i = 0; i < SUB_FREQUENCIES.length; i += 1) {
+    var f = SUB_FREQUENCIES[i];
+    out += "<option value=\"" + f + "\"" + (f === current ? " selected" : "") + ">" + esc(f) + "</option>";
+  }
+  return out;
+}
+
+// Map the ?ok=<kind> self-manage redirect marker to confirmation copy
+// rendered (role="status") at the top of the list. Unknown markers
+// degrade to no notice so a forged query can't inject copy. The legacy
+// ?canceled=1 marker keeps its own message (set by the route).
+var SUBSCRIPTION_OK = {
+  paused:    "Your subscription is paused.",
+  resumed:   "Your subscription has resumed.",
+  skipped:   "Your next shipment has been skipped.",
+  quantity:  "Quantity updated.",
+  frequency: "Delivery frequency updated.",
+  reactivated: "Your subscription has been reactivated.",
+};
+function _subscriptionOkCopy(kind) {
+  return Object.prototype.hasOwnProperty.call(SUBSCRIPTION_OK, kind) ? SUBSCRIPTION_OK[kind] : null;
+}
+
+// Self-manage failures round-trip a fixed ?error=<code> so the list can
+// echo a human message without reflecting an attacker-controlled string.
+// Unknown codes → no notice.
+var SUBSCRIPTION_ERR = {
+  quantity:    "Enter a quantity of 1 or more.",
+  frequency:   "Choose a valid delivery frequency.",
+  state:       "That change isn't available for this subscription right now.",
+  grace:       "This subscription was cancelled too long ago to reactivate. Start a new one instead.",
+};
+function _subscriptionErrorCopy(code) {
+  if (code == null) return null;
+  return Object.prototype.hasOwnProperty.call(SUBSCRIPTION_ERR, code) ? SUBSCRIPTION_ERR[code] : null;
+}
+
 // Customer-facing subscription list. `opts.subscriptions` is an array of
 // subscription rows, each optionally carrying a resolved `plan` (joined
 // by the route). `opts.can_cancel` is false when the deploy has no
 // payment handle wired — the list renders read-only with a note, since
-// cancel composes Stripe. Empty state points at the catalog (creation is
-// a separate Stripe-subscription-checkout surface, not built here).
+// cancel composes Stripe. `opts.self_manage` adds the pause / resume /
+// skip / change-quantity / change-frequency / reactivate controls (wired
+// only when the subscriptionControls primitive is available). Empty state
+// points at the catalog (creation is a separate Stripe-subscription-
+// checkout surface, not built here).
 function renderAccountSubscriptions(opts) {
   var esc = b.template.escapeHtml;
   var subs = opts.subscriptions || [];
   var canCancel = opts.can_cancel !== false;
+  var selfManage = opts.self_manage === true;
   var rowsHtml = "";
   for (var i = 0; i < subs.length; i += 1) {
     var s = subs[i];
@@ -3196,6 +3280,20 @@ function renderAccountSubscriptions(opts) {
     } else if (periodEnd) {
       renewalNote = "Renews <time datetime=\"" + esc(periodEnd) + "\">" + esc(periodEnd) + "</time>";
     }
+    var controlState = _subscriptionControlState(s);
+    // Local-state meta line (paused / cancelled) so the customer sees the
+    // self-managed cadence state distinct from the Stripe billing pill.
+    var stateNote = "";
+    if (selfManage && controlState === "paused") {
+      if (s.paused_until != null) {
+        var pUntil = new Date(Number(s.paused_until)).toISOString().slice(0, 10);
+        stateNote = "Paused until <time datetime=\"" + esc(pUntil) + "\">" + esc(pUntil) + "</time>";
+      } else {
+        stateNote = "Paused";
+      }
+    } else if (selfManage && controlState === "cancelled") {
+      stateNote = "Cancelled";
+    }
     var cancelControl = "";
     if (canCancel && _subscriptionIsCancelable(s)) {
       // The cancel decision (and its "immediate vs. at period end"
@@ -3205,6 +3303,52 @@ function renderAccountSubscriptions(opts) {
       cancelControl =
         "<a class=\"btn-ghost btn-ghost--sm subscription-card__cancel-link\" href=\"/account/subscriptions/" + esc(s.id) + "/cancel\">Cancel subscription</a>";
     }
+    // Self-manage controls — state-gated, mirroring the primitive's FSM
+    // (active ⇒ pause / skip / change-qty / change-freq; paused ⇒ resume;
+    // cancelled-within-grace ⇒ reactivate). Pause is confirm-gated like
+    // cancel (a second server-rendered screen, no inline confirm()); the
+    // reversible controls post directly. Quantity / frequency take input
+    // validated server-side.
+    var manageControls = "";
+    if (selfManage) {
+      var actId = esc(s.id);
+      var ctrls = "";
+      if (controlState === "active") {
+        ctrls +=
+          "<a class=\"btn-ghost btn-ghost--sm\" href=\"/account/subscriptions/" + actId + "/pause\">Pause</a>";
+        ctrls +=
+          "<form class=\"subscription-card__control\" method=\"post\" action=\"/account/subscriptions/" + actId + "/skip\">" +
+            "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Skip next shipment</button>" +
+          "</form>";
+        ctrls +=
+          "<form class=\"subscription-card__control subscription-card__control--qty\" method=\"post\" action=\"/account/subscriptions/" + actId + "/quantity\">" +
+            "<label class=\"form-field form-field--inline\">" +
+              "<span class=\"form-field__label\">Quantity</span>" +
+              "<input type=\"number\" name=\"quantity\" min=\"1\" step=\"1\" value=\"" + esc(String(s.quantity == null ? 1 : s.quantity)) + "\" required>" +
+            "</label>" +
+            "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Update quantity</button>" +
+          "</form>";
+        ctrls +=
+          "<form class=\"subscription-card__control subscription-card__control--freq\" method=\"post\" action=\"/account/subscriptions/" + actId + "/frequency\">" +
+            "<label class=\"form-field form-field--inline\">" +
+              "<span class=\"form-field__label\">Frequency</span>" +
+              "<select name=\"frequency\" required>" + _frequencyOptions(s.frequency || null) + "</select>" +
+            "</label>" +
+            "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Update frequency</button>" +
+          "</form>";
+      } else if (controlState === "paused") {
+        ctrls +=
+          "<form class=\"subscription-card__control\" method=\"post\" action=\"/account/subscriptions/" + actId + "/resume\">" +
+            "<button type=\"submit\" class=\"btn-primary btn-primary--sm\">Resume</button>" +
+          "</form>";
+      } else if (controlState === "cancelled" && _subscriptionIsReactivatable(s)) {
+        ctrls +=
+          "<form class=\"subscription-card__control\" method=\"post\" action=\"/account/subscriptions/" + actId + "/reactivate\">" +
+            "<button type=\"submit\" class=\"btn-primary btn-primary--sm\">Reactivate</button>" +
+          "</form>";
+      }
+      if (ctrls) manageControls = "<div class=\"subscription-card__manage\">" + ctrls + "</div>";
+    }
     rowsHtml +=
       "<li class=\"subscription-card\">" +
         "<div class=\"subscription-card__head\">" +
@@ -3212,6 +3356,8 @@ function renderAccountSubscriptions(opts) {
           _subscriptionStatusBadge(s.status) +
         "</div>" +
         (renewalNote ? "<p class=\"subscription-card__meta\">" + renewalNote + "</p>" : "") +
+        (stateNote ? "<p class=\"subscription-card__state\">" + stateNote + "</p>" : "") +
+        manageControls +
         cancelControl +
       "</li>";
   }
@@ -3225,6 +3371,15 @@ function renderAccountSubscriptions(opts) {
         "<p class=\"account-empty__lede\">You have no active subscriptions.</p>" +
         "<a class=\"btn-secondary\" href=\"/\">Browse the shop →</a>" +
       "</div>";
+  // The notice is either the success copy from a self-manage ?ok=<kind>
+  // round-trip (role="status") or an error string the POST handler passes
+  // back (role="alert"). The legacy cancel notice arrives as opts.notice.
+  var noticeHtml = "";
+  if (opts.error) {
+    noticeHtml = "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.error)) + "</p>";
+  } else if (opts.notice) {
+    noticeHtml = "<p class=\"form-notice form-notice--ok\" role=\"status\">" + esc(String(opts.notice)) + "</p>";
+  }
   var body =
     "<section class=\"account-subscriptions\">" +
       "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
@@ -3232,7 +3387,7 @@ function renderAccountSubscriptions(opts) {
         "<li aria-current=\"page\">Subscriptions</li>" +
       "</ol></nav>" +
       "<h1 class=\"account-subscriptions__title\">Subscriptions</h1>" +
-      (opts.notice ? "<p class=\"form-notice\" role=\"status\">" + esc(String(opts.notice)) + "</p>" : "") +
+      noticeHtml +
       inner +
     "</section>";
   return _wrap({
@@ -3317,6 +3472,52 @@ function renderSubscriptionCancelConfirm(opts) {
   });
 }
 
+// Server-rendered confirmation step for pausing a subscription. Pause is
+// a reversible-but-deliberate state change, so it gets the same confirm-
+// GET → POST gate the cancel flow uses (CSP forbids an inline confirm()).
+// The form posts straight back to /pause; a "Keep it active" link returns
+// to the list. JS-off-native.
+function renderSubscriptionPauseConfirm(opts) {
+  var esc = b.template.escapeHtml;
+  var s = opts.subscription || {};
+  var plan = s.plan || null;
+  var planSummary = "this subscription";
+  if (plan) {
+    var ccy = String(plan.currency || "usd").toUpperCase();
+    var every = Number(plan.interval_count) > 1
+      ? "every " + Number(plan.interval_count) + " " + String(plan.interval) + "s"
+      : "per " + String(plan.interval);
+    var priceStr = "";
+    try { priceStr = pricing.format(Number(plan.amount_minor), ccy) + " "; } catch (_e) { priceStr = ""; }
+    planSummary = priceStr + every;
+  }
+  var pauseForm =
+    "<form method=\"post\" action=\"/account/subscriptions/" + esc(s.id) + "/pause\">" +
+      "<p class=\"account-confirm__option\">Pausing holds your deliveries until you resume. No shipments go out and you won't be billed for the paused period; resume any time to pick back up.</p>" +
+      "<button type=\"submit\" class=\"btn-primary\">Pause subscription</button>" +
+    "</form>";
+  var body =
+    "<section class=\"account-confirm\">" +
+      "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
+        "<li><a href=\"/account\">Account</a></li>" +
+        "<li><a href=\"/account/subscriptions\">Subscriptions</a></li>" +
+        "<li aria-current=\"page\">Pause</li>" +
+      "</ol></nav>" +
+      "<h1 class=\"account-confirm__title\">Pause " + esc(planSummary) + "?</h1>" +
+      "<div class=\"account-confirm__actions\">" +
+        pauseForm +
+        "<a class=\"btn-ghost\" href=\"/account/subscriptions\">Keep it active</a>" +
+      "</div>" +
+    "</section>";
+  return _wrap({
+    title:      "Pause subscription",
+    shop_name:  opts.shop_name || "blamejs.shop",
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    body:       body,
+  });
+}
+
 // Product-level "Save to wishlist" control + social-proof count.
 // Byte-compatible with the edge renderer (`worker/render/product.js`)
 // so both paths emit identical markup. Action-only label — the toggle
@@ -3381,6 +3582,27 @@ function renderProduct(opts) {
     var vTitle = v.title || (Object.keys(v.options || {}).map(function (k) { return v.options[k]; }).join(" / ") || "Default");
     return { id: v.id, sku: v.sku, title: vTitle, price: priceStr };
   });
+  // "You may also like" rail — same-collection picks the route decorated
+  // with each card's hero media + first-variant price (minor units). The
+  // price string is formatted here with the page's own `fmt` so it tracks
+  // the active currency context exactly as the buy-box prices do. Mirrors
+  // the edge renderer (`worker/render/product.js`) so the section is
+  // byte-identical across substrates. Built once, shared by the theme
+  // branch's raw slot and the inline-template branch's placeholder.
+  var relatedAssetPrefix = opts.asset_prefix || "/assets/";
+  var relatedCards = (opts.related || []).map(function (r) {
+    var priceStr = Number.isInteger(r.price_minor)
+      ? fmt(r.price_minor, r.price_currency || "USD")
+      : "—";
+    return {
+      slug:      r.slug,
+      title:     r.title,
+      price:     priceStr,
+      image_url: r.hero_r2_key ? (relatedAssetPrefix + r.hero_r2_key) : null,
+      image_alt: r.hero_r2_key ? (r.hero_alt_text || r.title) : null,
+    };
+  });
+  var relatedHtml = _buildRelatedProducts(relatedCards);
   if (opts.theme) {
     return opts.theme.render("product", {
       title:          opts.product.title,
@@ -3398,6 +3620,10 @@ function renderProduct(opts) {
       qty_breaks_html: _buildQtyBreaks(opts.qty_breaks),
       wishlist_html:  _buildWishlist(opts.product.id, opts.wishlist_count),
       compare_html:   _buildCompare(opts.product.id),
+      // Pre-rendered "You may also like" rail for the theme's
+      // `{{{ related_html }}}` raw slot. Empty string when the product
+      // has no same-collection siblings to show.
+      related_html:   relatedHtml,
       asset_css_main: opts.theme.assetUrl("css/main.css"),
     });
   }
@@ -3430,7 +3656,8 @@ function renderProduct(opts) {
     .replace("RAW_COMPARE_PLACEHOLDER", compareHtml)
     .replace("RAW_BUNDLES_PLACEHOLDER", bundlesHtml)
     .replace("RAW_REVIEWS_PLACEHOLDER", reviewsHtml)
-    .replace("RAW_QA_PLACEHOLDER", qaHtml);
+    .replace("RAW_QA_PLACEHOLDER", qaHtml)
+    .replace("RAW_RELATED_PLACEHOLDER", relatedHtml);
   // Product-specific OpenGraph + Twitter Card values so shares
   // unfurl as "Operator Tee — blamejs.shop" with the SVG hero, not
   // the default shop-level description + brand logo.
@@ -5968,6 +6195,66 @@ function mount(router, deps) {
     };
   }
 
+  // "You may also like" picks for a PDP. Deterministic same-collection
+  // query so the edge (worker/data/catalog.js#listRelatedProducts) and
+  // the container produce the SAME ordered list and the rail renders
+  // byte-identically wherever the PDP is served: the source product's
+  // primary collection (lowest membership position), then the other
+  // active members of that collection ordered by membership position
+  // then product id, self excluded, capped at `limit`. The signal-based
+  // recommendations engine (co-purchase + RANDOM filler) is intentionally
+  // NOT used here — its order isn't reproducible at the edge, which has
+  // no engine handle and can't replay RANDOM(). Each pick is decorated
+  // with its first variant's current USD price (minor units) + first
+  // media row; the renderer formats the price string with the page's own
+  // currency formatter so the rail tracks the active display currency.
+  // Best-effort: a read failure (tables not migrated) returns [] so the
+  // PDP renders without the rail rather than 500-ing.
+  async function _relatedProductsFor(productId, limit) {
+    var query = function (sql, params) { return b.externalDb.query(sql, params); };
+    try {
+      var primary = (await query(
+        "SELECT collection_slug FROM collection_members WHERE product_id = ?1 " +
+        "ORDER BY position ASC, id ASC LIMIT 1",
+        [productId],
+      )).rows[0];
+      if (!primary) return [];
+      var siblingRows = (await query(
+        "SELECT cm.product_id AS pid FROM collection_members cm " +
+        "JOIN products p ON p.id = cm.product_id " +
+        "WHERE cm.collection_slug = ?1 AND cm.product_id != ?2 AND p.status = 'active' " +
+        "ORDER BY cm.position ASC, cm.product_id ASC LIMIT ?3",
+        [primary.collection_slug, productId, limit],
+      )).rows;
+      var out = [];
+      for (var i = 0; i < siblingRows.length; i += 1) {
+        var pid = siblingRows[i].pid;
+        var prod = await deps.catalog.products.get(pid);
+        if (!prod || prod.status !== "active") continue;
+        var priceMinor = null;
+        var priceCurrency = "USD";
+        var variants = await deps.catalog.variants.listForProduct(pid);
+        if (variants.length) {
+          var pr = await deps.catalog.prices.current(variants[0].id, "USD");
+          if (pr) { priceMinor = pr.amount_minor; priceCurrency = pr.currency; }
+        }
+        var media = await deps.catalog.media.listForProduct(pid);
+        var hero = media.length ? media[0] : null;
+        out.push({
+          slug:          prod.slug,
+          title:         prod.title,
+          hero_r2_key:   hero ? hero.r2_key : null,
+          hero_alt_text: hero ? (hero.alt_text || prod.title) : null,
+          price_minor:   priceMinor,
+          price_currency: priceCurrency,
+        });
+      }
+      return out;
+    } catch (_e) {
+      return [];
+    }
+  }
+
   // Resolve the cart for this request — read session_id from the
   // sealed cookie, create one (and the cart) if absent. Returns
   // the cart row OR null when the cart was just created (caller can
@@ -6476,6 +6763,10 @@ function mount(router, deps) {
     var qtyBreaks = firstVariant && firstPrice
       ? await _resolveQtyBreaks(firstVariant.sku, firstPrice.amount_minor, firstPrice.currency, ccyFmt)
       : [];
+    // "You may also like" — same-collection picks (deterministic order,
+    // mirrored at the edge). Best-effort inside the helper; an empty list
+    // hides the rail.
+    var related = await _relatedProductsFor(product.id, 4);
     var html = renderProduct(Object.assign({
       product:        product,
       variants:       variants,
@@ -6490,6 +6781,7 @@ function mount(router, deps) {
       bundle_offers:  bundleOffers,
       qty_breaks:     qtyBreaks,
       wishlist_count: wishlistCount,
+      related:        related,
       shop_name:      shopName,
       cart_count:     cartCount,
       theme:          theme,
@@ -8637,6 +8929,13 @@ function mount(router, deps) {
     // flow) is a separate surface; this is the management view.
     if (subscriptions) {
       var subsCanCancel = !!deps.payment;
+      // Lifecycle controls (pause / resume / skip / change-qty / change-
+      // freq / reactivate) mount only when the subscriptionControls
+      // primitive is wired. Independent of Stripe — the controls write
+      // local columns on the subscription row, not the upstream billing
+      // state — so they're available even on a deploy with no payment
+      // handle. The list above stays a read-only view when this is absent.
+      var subControls = deps.subscriptionControls || null;
 
       function _subsAuth(req, res) {
         var auth;
@@ -8702,15 +9001,159 @@ function mount(router, deps) {
         var cartCount = await _cartCountForReq(req);
         var url = req.url ? new URL(req.url, "http://localhost") : null;
         var canceled = !!(url && url.searchParams.get("canceled"));
+        // Success copy comes from either the legacy ?canceled=1 marker or
+        // a self-manage ?ok=<kind> round-trip; an ?error message a control
+        // POST bounces back surfaces as an alert. Unknown ?ok keys → no
+        // notice (a forged query can't inject copy).
+        var okKind = url ? url.searchParams.get("ok") : null;
+        var notice = canceled
+          ? "Your subscription has been canceled."
+          : _subscriptionOkCopy(okKind);
+        var errKind = url ? url.searchParams.get("error") : null;
         _send(res, 200, renderAccountSubscriptions({
           subscriptions: rows,
           can_cancel:    subsCanCancel,
-          notice:        canceled ? "Your subscription has been canceled." : null,
+          self_manage:   !!subControls,
+          notice:        notice,
+          error:         _subscriptionErrorCopy(errKind),
           shop_name:     shopName,
           cart_count:    cartCount,
         }));
       });
 
+      // Self-manage lifecycle — pause / resume / skip / change-quantity /
+      // change-frequency / reactivate. Each route owns its subscription
+      // via the same ownership check the cancel flow uses (a forged/foreign
+      // id 404s before any write), then composes the matching control
+      // method with a `customer` actor. State-machine refusals from the
+      // primitive (e.g. pause a cancelled sub) and shape errors bounce back
+      // to the list with a fixed ?error code rather than 500-ing. Wired
+      // independently of Stripe (the controls write local columns).
+      if (subControls) {
+        var SELF_ACTOR = { actor_type: "customer", actor_id: null };
+
+        // Translate a control-method rejection into the list redirect.
+        // Validation TypeErrors and FSM/grace refusals (which carry a
+        // `code`) map to a fixed ?error; anything else rethrows (a real
+        // 500, e.g. an unmigrated table on a misconfigured deploy).
+        function _controlError(e) {
+          if (e && e.code === "SUBSCRIPTION_REACTIVATE_GRACE_EXPIRED") return "grace";
+          if (e && e.code === "SUBSCRIPTION_STATE_REFUSED")            return "state";
+          if (e && e.code === "SUBSCRIPTION_NOT_FOUND")                return "state";
+          if (e instanceof TypeError)                                   return "state";
+          return null;
+        }
+        function _redirect(res, suffix) {
+          res.status(303);
+          res.setHeader && res.setHeader("location", "/account/subscriptions" + suffix);
+          return res.end ? res.end() : res.send("");
+        }
+
+        // Pause is confirm-gated (GET → POST), mirroring cancel — a
+        // deliberate, reversible hold. The confirm page only renders for a
+        // currently-active subscription; a paused/cancelled row bounces
+        // back to the list.
+        router.get("/account/subscriptions/:id/pause", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          if (_subscriptionControlState(sub) !== "active") return _redirect(res, "");
+          if (sub.plan_id != null) {
+            try { sub.plan = await subscriptions.plans.get(sub.plan_id); }
+            catch (_e) { sub.plan = null; }
+          }
+          var cartCount = await _cartCountForReq(req);
+          _send(res, 200, renderSubscriptionPauseConfirm({
+            subscription: sub,
+            shop_name:    shopName,
+            cart_count:   cartCount,
+          }));
+        });
+
+        router.post("/account/subscriptions/:id/pause", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          try {
+            await subControls.pause({ subscription_id: sub.id, reason: "customer self-service pause", actor: SELF_ACTOR });
+          } catch (e) {
+            var code = _controlError(e); if (code == null) throw e;
+            return _redirect(res, "?error=" + code);
+          }
+          return _redirect(res, "?ok=paused");
+        });
+
+        router.post("/account/subscriptions/:id/resume", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          try {
+            await subControls.resume({ subscription_id: sub.id, reason: "customer self-service resume", actor: SELF_ACTOR });
+          } catch (e) {
+            var code = _controlError(e); if (code == null) throw e;
+            return _redirect(res, "?error=" + code);
+          }
+          return _redirect(res, "?ok=resumed");
+        });
+
+        router.post("/account/subscriptions/:id/skip", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          try {
+            await subControls.skipNext({ subscription_id: sub.id, count: 1, reason: "customer self-service skip", actor: SELF_ACTOR });
+          } catch (e) {
+            var code = _controlError(e); if (code == null) throw e;
+            return _redirect(res, "?error=" + code);
+          }
+          return _redirect(res, "?ok=skipped");
+        });
+
+        router.post("/account/subscriptions/:id/quantity", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          // Backend validates: a non-positive / non-integer / missing value
+          // is a client error → bounce with the quantity error code rather
+          // than handing garbage to the primitive (which would throw a
+          // TypeError mapped to a generic "state" message).
+          var qty = parseInt(String((req.body || {}).quantity), 10);
+          if (!Number.isInteger(qty) || qty <= 0) return _redirect(res, "?error=quantity");
+          try {
+            await subControls.changeQuantity({ subscription_id: sub.id, new_quantity: qty, reason: "customer self-service quantity change", actor: SELF_ACTOR });
+          } catch (e) {
+            if (e instanceof TypeError) return _redirect(res, "?error=quantity");
+            var code = _controlError(e); if (code == null) throw e;
+            return _redirect(res, "?error=" + code);
+          }
+          return _redirect(res, "?ok=quantity");
+        });
+
+        router.post("/account/subscriptions/:id/frequency", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          // Backend validates: reject anything outside the allowed cadence
+          // enum before composing the primitive.
+          var freq = String((req.body || {}).frequency || "");
+          if (SUB_FREQUENCIES.indexOf(freq) === -1) return _redirect(res, "?error=frequency");
+          try {
+            await subControls.changeFrequency({ subscription_id: sub.id, new_frequency: freq, reason: "customer self-service frequency change", actor: SELF_ACTOR });
+          } catch (e) {
+            if (e instanceof TypeError) return _redirect(res, "?error=frequency");
+            var code = _controlError(e); if (code == null) throw e;
+            return _redirect(res, "?error=" + code);
+          }
+          return _redirect(res, "?ok=frequency");
+        });
+
+        router.post("/account/subscriptions/:id/reactivate", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          try {
+            await subControls.reactivate({ subscription_id: sub.id, reason: "customer self-service reactivate", actor: SELF_ACTOR });
+          } catch (e) {
+            var code = _controlError(e); if (code == null) throw e;
+            return _redirect(res, "?error=" + code);
+          }
+          return _redirect(res, "?ok=reactivated");
+        });
+      }
+
       // Cancel mounts only when payment is wired (cancel composes Stripe).
       // Without payment the list above stays read-only with a note.
       if (deps.payment) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blamejs/blamejs-shop",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "description": "Open-source framework built on blamejs. Vendored stack, zero npm runtime deps, PQC-first crypto, security-on by default.",
   "main": "lib/index.js",
   "scripts": {