@blamejs/blamejs-shop 0.1.37 → 0.2.0

package/lib/storefront.js

@@ -548,12 +548,12 @@ var HOME_HERO =
   "  </div>\n" +
   "  <div class=\"hero__inner\">\n" +
   "    <div class=\"hero__copy\">\n" +
-  "      <p class=\"eyebrow eyebrow--on-dark\"><span class=\"dot dot--accent\" aria-hidden=\"true\"></span> Open-source ecommerce framework · v" + require("../package.json").version + "</p>\n" +
-  "      <h1 class=\"hero__title\">Run a shop that owes <span class=\"accent\">nothing</span> to the dependency graph.</h1>\n" +
-  "      <p class=\"hero__lede\">Server-rendered HTML. Post-quantum crypto on by default. Zero npm runtime dependencies. Every primitive is composed from a single vendored framework — no transitive supply chain to audit.</p>\n" +
+  "      <p class=\"eyebrow eyebrow--on-dark\">~/blamejs.shop — secure commerce · v" + require("../package.json").version + "</p>\n" +
+  "      <h1 class=\"hero__title\">Sell anything.<br>Trust <span class=\"glitch glitch--live\" data-text=\"nothing.\">nothing.</span><span class=\"term-cursor\" aria-hidden=\"true\"></span></h1>\n" +
+  "      <p class=\"hero__lede\">An open-source, server-rendered ecommerce framework with post-quantum cryptography baked into every session, cart, and checkout. No client-side validation theater. No npm runtime dependencies. Just hardened HTML.</p>\n" +
   "      <div class=\"hero__cta\">\n" +
-  "        <a href=\"#catalog\" class=\"btn-primary\">Browse the shop <span aria-hidden=\"true\">→</span></a>\n" +
-  "        <a href=\"https://github.com/blamejs/blamejs.shop\" class=\"btn-ghost btn-ghost--on-dark\" rel=\"noopener\">View on GitHub</a>\n" +
+  "        <a href=\"#catalog\" class=\"btn-primary\">$ npx create-shop</a>\n" +
+  "        <a href=\"https://github.com/blamejs/blamejs.shop\" class=\"btn-ghost btn-ghost--on-dark\" rel=\"noopener\">Read the threat model</a>\n" +
   "      </div>\n" +
   "      <dl class=\"hero__stats\">\n" +
   "        <div><dt>Products live</dt><dd>{{product_count}}</dd></div>\n" +
@@ -865,8 +865,8 @@ var FACET_GROUP_HEAD =
 
 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" +
+  "  <a class=\"facet-option__link{{selected_class}}\" href=\"{{href}}\" rel=\"nofollow\"{{aria_current}}>\n" +
+  "    <span class=\"facet-option__box\" aria-hidden=\"true\">{{box}}</span>{{selected_cue}}\n" +
   "    <span class=\"facet-option__label\">{{label}}</span>\n" +
   "    <span class=\"facet-option__count\">{{count}}</span>\n" +
   "  </a>\n" +
@@ -921,11 +921,13 @@ function _renderSearchFacets(facets, filters, q) {
       optionsHtml += _render(FACET_OPTION, {
         href:           _searchUrl(q, _toggleFilter(filters, facet.key, opt.value)),
         selected_class: opt.selected ? " is-selected" : "",
-        aria_pressed:   "RAW_ARIA",
+        aria_current:   "RAW_ARIA",
         box:            opt.selected ? "✓" : "",
+        selected_cue:   "RAW_CUE",
         label:          opt.label,
         count:          String(opt.count),
-      }).replace("RAW_ARIA", opt.selected ? " aria-pressed=\"true\"" : " aria-pressed=\"false\"");
+      }).replace("RAW_ARIA", opt.selected ? " aria-current=\"true\"" : "")
+        .replace("RAW_CUE", opt.selected ? "<span class=\"sr-only\">Selected: </span>" : "");
       rendered += 1;
     }
     if (rendered === 0) continue;
@@ -1102,6 +1104,91 @@ var VARIANT_ROW =
   "  </td>\n" +
   "</tr>\n";
 
+// PDP buy-box. A single cart-add form posting `variant_id` + `qty` to
+// /cart/lines (unchanged endpoint + field names). Multi-variant
+// selection is server-rendered radio chips sharing `name="variant_id"`
+// — the checked radio is what POSTs, so variant choice works with zero
+// client JS. The lead price renders large + mono + violet; each chip
+// carries its own price so a shopper sees per-variant pricing before
+// they pick. Above twelve variants the chip wall gets unwieldy, so the
+// existing compact variant table (VARIANT_ROW) is the fallback — it
+// keeps a per-row add form, so the same endpoint contract holds.
+// `variants` is the pre-formatted array [{ id, sku, title, price }]
+// the renderers already build; `escAttr` is the path's HTML escaper.
+// Mirrored byte-for-byte by worker/render/product.js#_buildBuyBox.
+var BUYBOX_CHIP_LIMIT = 12;
+
+function _buildBuyBox(variants, escAttr) {
+  if (!variants || variants.length === 0) {
+    return "<div class=\"pdp__variants\">\n" +
+           "        <h2 class=\"pdp__variants-title\">Choose a variant</h2>\n" +
+           "        <div class=\"table-scroll\">\n" +
+           "          <table class=\"variant-table\">\n" +
+           "            <thead><tr><th>Variant</th><th>SKU</th><th>Price</th><th class=\"variant-table__action-h\">Action</th></tr></thead>\n" +
+           "            <tbody><tr><td colspan=\"4\" class=\"empty\">No variants available.</td></tr></tbody>\n" +
+           "          </table>\n" +
+           "        </div>\n" +
+           "      </div>";
+  }
+
+  var trustLine =
+    "<div class=\"pdp__meta\">\n" +
+    "        <span class=\"pdp__badge\"><span class=\"shield\" aria-hidden=\"true\"><span class=\"shield__glyph\">&gt;_</span></span> Post-quantum secured checkout · ML-KEM-1024 key agreement · ML-DSA-65 receipt signature.</span>\n" +
+    "      </div>";
+
+  // Many variants → keep the compact table (still a per-row add form).
+  if (variants.length > BUYBOX_CHIP_LIMIT) {
+    var rows = variants.map(function (v) {
+      return _render(VARIANT_ROW, { title: v.title, sku: v.sku, price: v.price, variant_id: v.id });
+    }).join("");
+    return "<div class=\"pdp__variants\">\n" +
+           "        <h2 class=\"pdp__variants-title\">Choose a variant</h2>\n" +
+           "        <div class=\"table-scroll\">\n" +
+           "          <table class=\"variant-table\">\n" +
+           "            <thead><tr><th>Variant</th><th>SKU</th><th>Price</th><th class=\"variant-table__action-h\">Action</th></tr></thead>\n" +
+           "            <tbody>" + rows + "</tbody>\n" +
+           "          </table>\n" +
+           "        </div>\n" +
+           "      </div>\n" +
+           "      " + trustLine;
+  }
+
+  var lead = variants[0];
+  var single = variants.length === 1;
+  var chips = "";
+  if (!single) {
+    for (var i = 0; i < variants.length; i += 1) {
+      var v = variants[i];
+      chips +=
+        "<label class=\"pdp__badge\">" +
+          "<input type=\"radio\" name=\"variant_id\" value=\"" + escAttr(v.id) + "\"" + (i === 0 ? " checked" : "") + ">" +
+          " <span class=\"variant-row__title\">" + escAttr(v.title) + "</span>" +
+          " <span class=\"variant-row__sku\"><code>" + escAttr(v.sku) + "</code></span>" +
+          " <span class=\"variant-row__price price\">" + escAttr(v.price) + "</span>" +
+        "</label>";
+    }
+  }
+
+  var variantBlock = single
+    ? "<p class=\"variant-row__sku\"><code>" + escAttr(lead.sku) + "</code></p>" +
+      "<input type=\"hidden\" name=\"variant_id\" value=\"" + escAttr(lead.id) + "\">"
+    : "<fieldset class=\"pdp__variants\">\n" +
+      "          <legend class=\"pdp__variants-title\">Choose a variant</legend>\n" +
+      "          <div class=\"pdp__meta\">" + chips + "</div>\n" +
+      "        </fieldset>";
+
+  return "<div class=\"pdp__buybox\">\n" +
+         "        <p class=\"featured-product__price\">" + escAttr(lead.price) + "</p>\n" +
+         "        <form method=\"post\" action=\"/cart/lines\">\n" +
+         "          " + variantBlock + "\n" +
+         "          <label class=\"pdp__variants-title\" for=\"buybox-qty\">Quantity</label>\n" +
+         "          <input id=\"buybox-qty\" type=\"number\" name=\"qty\" value=\"1\" min=\"1\" max=\"99\" class=\"variant-row__qty\" aria-label=\"Quantity\">\n" +
+         "          <button type=\"submit\" class=\"btn-primary cart-page__checkout\">$ add to cart</button>\n" +
+         "        </form>\n" +
+         "      </div>\n" +
+         "      " + trustLine;
+}
+
 var PRODUCT_PAGE =
   "<section class=\"pdp\">\n" +
   "  <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n" +
@@ -1118,18 +1205,10 @@ var PRODUCT_PAGE =
   "      <p class=\"pdp__description\">{{description}}</p>\n" +
   "      <div class=\"pdp__meta\">\n" +
   "        <span class=\"pdp__badge pdp__badge--ok\"><span class=\"dot dot--live\" aria-hidden=\"true\"></span> In stock</span>\n" +
-  "        <span class=\"pdp__badge\">Ships from origin</span>\n" +
+  "        <span class=\"pdp__badge\">Ships in 1–2 business days</span>\n" +
   "        <span class=\"pdp__badge\">Stripe-secured checkout</span>\n" +
   "      </div>\n" +
-  "      <div class=\"pdp__variants\">\n" +
-  "        <h2 class=\"pdp__variants-title\">Choose a variant</h2>\n" +
-  "        <div class=\"table-scroll\">\n" +
-  "          <table class=\"variant-table\">\n" +
-  "            <thead><tr><th>Variant</th><th>SKU</th><th>Price</th><th class=\"variant-table__action-h\">Action</th></tr></thead>\n" +
-  "            <tbody>{{variant_rows}}</tbody>\n" +
-  "          </table>\n" +
-  "        </div>\n" +
-  "      </div>\n" +
+  "      RAW_BUYBOX_PLACEHOLDER\n" +
   "      RAW_QTYBREAK_PLACEHOLDER\n" +
   "      RAW_WISHLIST_PLACEHOLDER\n" +
   "      RAW_COMPARE_PLACEHOLDER\n" +
@@ -1635,7 +1714,19 @@ function renderWishlist(opts) {
   }
   var inner = rowsHtml
     ? "<ul class=\"wishlist-list\">" + rowsHtml + "</ul>"
-    : "<p class=\"wishlist-empty\">You haven't saved anything yet. Browse the shop and tap <strong>Save to wishlist</strong> on products you want to keep an eye on.</p>";
+    : "<div class=\"account-empty\">" +
+        "<p class=\"account-empty__icon\" aria-hidden=\"true\">♡</p>" +
+        "<p class=\"account-empty__lede\">You haven't saved anything yet. Browse the shop and tap <strong>Save to wishlist</strong> on products you want to keep an eye on.</p>" +
+        "<a class=\"btn-secondary\" href=\"/\">Browse the shop →</a>" +
+      "</div>";
+  // Success confirmation after a wishlist toggle, surfaced via
+  // role="status". Driven by the ?ok=<kind> redirect marker; unknown
+  // keys render nothing so a forged query can't inject copy.
+  var WISHLIST_OK = { added: "Saved to your wishlist.", removed: "Removed from your wishlist." };
+  var okMsg = WISHLIST_OK[opts.notice];
+  var notice = okMsg
+    ? "<p class=\"form-notice form-notice--ok\" role=\"status\">" + esc(okMsg) + "</p>"
+    : "";
   var body =
     "<section class=\"account-wishlist\">" +
       "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
@@ -1643,6 +1734,7 @@ function renderWishlist(opts) {
         "<li aria-current=\"page\">Saved items</li>" +
       "</ol></nav>" +
       "<h1 class=\"account-wishlist__title\">Saved items</h1>" +
+      notice +
       inner +
     "</section>";
   return _wrap({
@@ -1871,7 +1963,19 @@ function renderSaved(opts) {
   }
   var inner = rowsHtml
     ? "<ul class=\"saved-list\">" + rowsHtml + "</ul>"
-    : "<p class=\"saved-empty\">Nothing saved for later. Use <strong>Save for later</strong> on a cart item to move it here without losing it.</p>";
+    : "<div class=\"account-empty\">" +
+        "<p class=\"account-empty__icon\" aria-hidden=\"true\">🔖</p>" +
+        "<p class=\"account-empty__lede\">Nothing saved for later. Use <strong>Save for later</strong> on a cart item to move it here without losing it.</p>" +
+        "<a class=\"btn-secondary\" href=\"/cart\">View your cart →</a>" +
+      "</div>";
+  // Success confirmation after a saved-list mutation (currently the
+  // Remove action), surfaced via role="status". Unknown ?ok=<kind> keys
+  // render nothing so a forged query can't inject copy.
+  var SAVED_OK = { removed: "Removed from your saved items.", moved: "Moved to your cart." };
+  var savedMsg = SAVED_OK[opts.notice];
+  var notice = savedMsg
+    ? "<p class=\"form-notice form-notice--ok\" role=\"status\">" + esc(savedMsg) + "</p>"
+    : "";
   var body =
     "<section class=\"account-saved\">" +
       "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
@@ -1879,6 +1983,7 @@ function renderSaved(opts) {
         "<li aria-current=\"page\">Saved for later</li>" +
       "</ol></nav>" +
       "<h1 class=\"account-saved__title\">Saved for later</h1>" +
+      notice +
       inner +
     "</section>";
   return _wrap({
@@ -1958,16 +2063,32 @@ function renderAddresses(opts) {
           "<a class=\"btn-ghost btn-ghost--sm\" href=\"/account/addresses/" + esc(a.id) + "/edit\">Edit</a>" +
           (Number(a.is_default_shipping) === 1 ? "" : "<form method=\"post\" action=\"/account/addresses/" + esc(a.id) + "/default-shipping\"><button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Set default shipping</button></form>") +
           (Number(a.is_default_billing) === 1 ? "" : "<form method=\"post\" action=\"/account/addresses/" + esc(a.id) + "/default-billing\"><button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Set default billing</button></form>") +
-          "<form method=\"post\" action=\"/account/addresses/" + esc(a.id) + "/archive\"><button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Remove</button></form>" +
+          "<a class=\"btn-ghost btn-ghost--sm\" href=\"/account/addresses/" + esc(a.id) + "/remove\">Remove</a>" +
         "</div>" +
       "</li>";
   }
   var listHtml = rowsHtml
     ? "<ul class=\"address-list\">" + rowsHtml + "</ul>"
-    : "<p class=\"address-empty\">No saved addresses yet. Add one below to speed up checkout.</p>";
+    : "<div class=\"account-empty\">" +
+        "<p class=\"account-empty__icon\" aria-hidden=\"true\">🏠</p>" +
+        "<p class=\"account-empty__lede\">No saved addresses yet. Add one below to speed up checkout.</p>" +
+      "</div>";
   var notice = opts.notice
     ? "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
     : "";
+  // Success confirmation after an address mutation (add / edit / remove /
+  // set-default), surfaced at the top of the list via role="status" so a
+  // screen reader announces it without stealing focus. Driven by the
+  // ?ok=<kind> redirect the POST handlers set on success. A remove also
+  // threads ?undo=<id> so the notice can offer a one-click un-archive.
+  var undoForm = opts.undo_id
+    ? " <form class=\"form-notice__undo\" method=\"post\" action=\"/account/addresses/" + esc(String(opts.undo_id)) + "/unarchive\">" +
+        "<button type=\"submit\" class=\"btn-link\">Undo</button>" +
+      "</form>"
+    : "";
+  var success = opts.success
+    ? "<div class=\"form-notice form-notice--ok\" role=\"status\"><span>" + esc(String(opts.success)) + "</span>" + undoForm + "</div>"
+    : "";
   var editing = opts.edit || null;
   var formHeading = editing ? "Edit address" : "Add an address";
   var formAction  = editing ? ("/account/addresses/" + editing.id) : "/account/addresses";
@@ -1978,6 +2099,7 @@ function renderAddresses(opts) {
         "<li aria-current=\"page\">Addresses</li>" +
       "</ol></nav>" +
       "<h1 class=\"account-addresses__title\">Addresses</h1>" +
+      success +
       listHtml +
       "<h2 class=\"account-addresses__form-title\">" + esc(formHeading) + "</h2>" +
       notice +
@@ -1992,6 +2114,45 @@ function renderAddresses(opts) {
   });
 }
 
+// Server-rendered confirmation step for removing a saved address. CSP
+// forbids an inline confirm() dialog, so the destructive action is gated
+// by a second page: a POST form that actually archives, plus a Cancel
+// link back to the list. JS-off-native — no client script involved.
+function renderAddressRemoveConfirm(opts) {
+  var esc = b.template.escapeHtml;
+  var a = opts.address || {};
+  var lines = [a.recipient_name, a.company, a.street_line1, a.street_line2,
+    [a.city, a.region, a.postal_code].filter(Boolean).join(", "), a.country, a.phone]
+    .filter(function (x) { return x != null && String(x).length; })
+    .map(function (x) { return "<span>" + esc(String(x)) + "</span>"; }).join("");
+  var body =
+    "<section class=\"account-confirm\">" +
+      "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
+        "<li><a href=\"/account\">Account</a></li>" +
+        "<li><a href=\"/account/addresses\">Addresses</a></li>" +
+        "<li aria-current=\"page\">Remove address</li>" +
+      "</ol></nav>" +
+      "<h1 class=\"account-confirm__title\">Remove this address?</h1>" +
+      (a.label ? "<p class=\"address-card__label\">" + esc(a.label) + "</p>" : "") +
+      "<address class=\"address-card__body\">" + lines + "</address>" +
+      "<p class=\"account-confirm__lede\">This removes the address from your address book. " +
+        "You can add it again later.</p>" +
+      "<div class=\"account-confirm__actions\">" +
+        "<form method=\"post\" action=\"/account/addresses/" + esc(a.id) + "/archive\">" +
+          "<button type=\"submit\" class=\"btn-primary\">Remove address</button>" +
+        "</form>" +
+        "<a class=\"btn-ghost\" href=\"/account/addresses\">Cancel</a>" +
+      "</div>" +
+    "</section>";
+  return _wrap({
+    title:      "Remove address",
+    shop_name:  opts.shop_name || "blamejs.shop",
+    cart_count: opts.cart_count == null ? 0 : opts.cart_count,
+    theme_css:  opts.theme_css,
+    body:       body,
+  });
+}
+
 // Storefront collection index — operator-curated + smart product lists.
 function renderCollectionList(opts) {
   var esc = b.template.escapeHtml;
@@ -2302,7 +2463,21 @@ function renderReturns(opts) {
   }
   var inner = rowsHtml
     ? "<ul class=\"return-list\">" + rowsHtml + "</ul>"
-    : "<p class=\"return-empty\">No returns yet. Start one from an order in your account.</p>";
+    : "<div class=\"account-empty\">" +
+        "<p class=\"account-empty__icon\" aria-hidden=\"true\">↩</p>" +
+        "<p class=\"account-empty__lede\">No returns yet. Start one from an order in your account.</p>" +
+        "<a class=\"btn-secondary\" href=\"/account/orders\">View your orders →</a>" +
+      "</div>";
+  // Success confirmation after submitting a return request. The RMA code
+  // round-trips on the ?ok=<code> redirect so the notice can echo it back
+  // — the operator-readable handle the customer references in support.
+  // Validate the shape (RMA-YYMMDD-AAAAA) so a forged query can't inject
+  // arbitrary copy into the status message.
+  var notice = "";
+  if (opts.rma_code && /^RMA-\d{6}-[ABCDEFGHJKLMNPQRSTUVWXYZ23456789]{5}$/.test(String(opts.rma_code))) {
+    notice = "<p class=\"form-notice form-notice--ok\" role=\"status\">Return request received — RMA " +
+      esc(String(opts.rma_code)) + ". We'll email you when it's reviewed.</p>";
+  }
   var body =
     "<section class=\"account-returns\">" +
       "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
@@ -2310,6 +2485,7 @@ function renderReturns(opts) {
         "<li aria-current=\"page\">Returns</li>" +
       "</ol></nav>" +
       "<h1 class=\"account-returns__title\">Returns</h1>" +
+      notice +
       inner +
     "</section>";
   return _wrap({
@@ -2692,13 +2868,12 @@ function renderAccountSubscriptions(opts) {
     }
     var cancelControl = "";
     if (canCancel && _subscriptionIsCancelable(s)) {
+      // The cancel decision (and its "immediate vs. at period end"
+      // consequence) is confirmed on a dedicated page — CSP forbids an
+      // inline confirm() dialog, so the destructive step is a second
+      // server-rendered screen rather than a one-click POST.
       cancelControl =
-        "<form class=\"subscription-card__cancel\" method=\"post\" action=\"/account/subscriptions/" + esc(s.id) + "/cancel\">" +
-          "<label class=\"subscription-card__when\">" +
-            "<input type=\"checkbox\" name=\"immediate\" value=\"1\"> Cancel immediately (skip the rest of the period)" +
-          "</label>" +
-          "<button type=\"submit\" class=\"btn-ghost btn-ghost--sm\">Cancel subscription</button>" +
-        "</form>";
+        "<a class=\"btn-ghost btn-ghost--sm subscription-card__cancel-link\" href=\"/account/subscriptions/" + esc(s.id) + "/cancel\">Cancel subscription</a>";
     }
     rowsHtml +=
       "<li class=\"subscription-card\">" +
@@ -2715,7 +2890,11 @@ function renderAccountSubscriptions(opts) {
     : "<p class=\"subscription-note\">Cancellation isn't available on this store yet. Contact support to make changes.</p>";
   var inner = rowsHtml
     ? note + "<ul class=\"subscription-list\">" + rowsHtml + "</ul>"
-    : "<p class=\"subscription-empty\">You have no active subscriptions.</p>";
+    : "<div class=\"account-empty\">" +
+        "<p class=\"account-empty__icon\" aria-hidden=\"true\">↻</p>" +
+        "<p class=\"account-empty__lede\">You have no active subscriptions.</p>" +
+        "<a class=\"btn-secondary\" href=\"/\">Browse the shop →</a>" +
+      "</div>";
   var body =
     "<section class=\"account-subscriptions\">" +
       "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
@@ -2735,6 +2914,79 @@ function renderAccountSubscriptions(opts) {
   });
 }
 
+// Server-rendered confirmation step for canceling a subscription. CSP
+// forbids an inline confirm() dialog, so the destructive choice is gated
+// by this page: it spells out the period-end date and, for the
+// "cancel immediately" path, the days of access forfeited. Two POST
+// forms (at-period-end / immediate) plus a Cancel link back to the list.
+// JS-off-native.
+function renderSubscriptionCancelConfirm(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 periodEndMs = Number(s.current_period_end) || 0;
+  var periodEnd = periodEndMs ? new Date(periodEndMs).toISOString().slice(0, 10) : "";
+  // Days of paid access forfeited if canceled immediately rather than at
+  // period end — computed from now to the period boundary, floored at 0.
+  var forfeitDays = 0;
+  if (periodEndMs) {
+    forfeitDays = Math.max(0, Math.ceil((periodEndMs - Date.now()) / b.constants.TIME.days(1)));
+  }
+  var periodLine = periodEnd
+    ? "<p class=\"account-confirm__lede\">Your current period is paid through " +
+        "<time datetime=\"" + esc(periodEnd) + "\">" + esc(periodEnd) + "</time>.</p>"
+    : "";
+  var atPeriodEndForm =
+    "<form method=\"post\" action=\"/account/subscriptions/" + esc(s.id) + "/cancel\">" +
+      "<p class=\"account-confirm__option\">Cancel at period end" +
+        (periodEnd ? " — keep access until <time datetime=\"" + esc(periodEnd) + "\">" + esc(periodEnd) + "</time>, then it won't renew." : ", so it won't renew.") +
+      "</p>" +
+      "<button type=\"submit\" class=\"btn-primary\">Cancel at period end</button>" +
+    "</form>";
+  var immediateForm =
+    "<form method=\"post\" action=\"/account/subscriptions/" + esc(s.id) + "/cancel\">" +
+      "<input type=\"hidden\" name=\"immediate\" value=\"1\">" +
+      "<p class=\"account-confirm__option\">Cancel immediately" +
+        (forfeitDays > 0
+          ? " — access ends now and you forfeit the remaining " + forfeitDays + " day" + (forfeitDays === 1 ? "" : "s") + " of this period."
+          : " — access ends now.") +
+      "</p>" +
+      "<button type=\"submit\" class=\"btn-ghost\">Cancel immediately</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\">Cancel</li>" +
+      "</ol></nav>" +
+      "<h1 class=\"account-confirm__title\">Cancel " + esc(planSummary) + "?</h1>" +
+      periodLine +
+      "<div class=\"account-confirm__actions\">" +
+        atPeriodEndForm +
+        immediateForm +
+        "<a class=\"btn-ghost\" href=\"/account/subscriptions\">Keep my subscription</a>" +
+      "</div>" +
+    "</section>";
+  return _wrap({
+    title:      "Cancel 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
@@ -2819,10 +3071,7 @@ function renderProduct(opts) {
       asset_css_main: opts.theme.assetUrl("css/main.css"),
     });
   }
-  var rows = rendered.map(function (v) {
-    return _render(VARIANT_ROW, { title: v.title, sku: v.sku, price: v.price, variant_id: v.id });
-  }).join("");
-  if (!rows) rows = "<tr><td colspan=\"4\" class=\"empty\">No variants available.</td></tr>";
+  var buyboxHtml = _buildBuyBox(rendered, b.template.escapeHtml);
   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);
@@ -2833,10 +3082,9 @@ function renderProduct(opts) {
   var body = _render(PRODUCT_PAGE, {
     title:        opts.product.title,
     description:  description,
-    variant_rows: "RAW_ROWS_PLACEHOLDER",
   })
     .replace("RAW_GALLERY_PLACEHOLDER", galleryHtml)
-    .replace("RAW_ROWS_PLACEHOLDER", rows)
+    .replace("RAW_BUYBOX_PLACEHOLDER", buyboxHtml)
     .replace("RAW_QTYBREAK_PLACEHOLDER", qtyBreaksHtml)
     .replace("RAW_WISHLIST_PLACEHOLDER", wishlistHtml)
     .replace("RAW_COMPARE_PLACEHOLDER", compareHtml)
@@ -5801,6 +6049,20 @@ function mount(router, deps) {
       if (!orderId) return _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme }));
       var o = await deps.order.get(orderId);
       if (!o) return _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme }));
+      // Ownership gate against IDOR: an order's confirmation page exposes
+      // the customer's name, address, and line items by UUID alone. An order
+      // that BELONGS to a customer (customer_id set) is viewable only by that
+      // signed-in customer — anyone else (a different customer OR an
+      // unauthenticated request) 404s rather than leaking it. A guest order
+      // carries no customer_id and remains reachable via its unguessable URL
+      // (the capability-URL model), so BOTH the just-placed-as-guest path AND
+      // the signed-in-shopper-with-an-anonymous-cart path (checkout.confirm
+      // derives the order from a cart that has no customer_id) still render
+      // their own confirmation here.
+      var orderAuth = _currentCustomerEnv(req);
+      if (o.customer_id && (!orderAuth || o.customer_id !== orderAuth.customer_id)) {
+        return _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme }));
+      }
       // Same variant_id → {product, hero_media} lookup pattern as the
       // cart route, applied to the order's frozen line items so the
       // post-checkout page shows what the customer bought visually.
@@ -6557,22 +6819,26 @@ function mount(router, deps) {
           return res.end ? res.end() : res.send("");
         }
         var productId = (req.body || {}).product_id;
+        var removed = false;
         try {
           var already = await deps.wishlist.isWishlisted({ customer_id: auth.customer_id, product_id: productId });
-          if (already) await deps.wishlist.remove({ customer_id: auth.customer_id, product_id: productId });
+          if (already) { await deps.wishlist.remove({ customer_id: auth.customer_id, product_id: productId }); removed = true; }
           else         await deps.wishlist.add({ customer_id: auth.customer_id, product_id: productId });
         } catch (e) {
           res.status(e instanceof TypeError ? 400 : 500);
           return res.end ? res.end((e && e.message) || "Error") : res.send((e && e.message) || "Error");
         }
+        var okKind = removed ? "removed" : "added";
         var rt = (req.body || {}).return_to;
         var dest;
         if (typeof rt === "string" && /^\/[^/]/.test(rt)) {
-          dest = rt;
+          // Only thread the success marker when returning to the wishlist
+          // page (the PDP heart toggle is its own visible cue).
+          dest = rt.indexOf("/account/wishlist") === 0 ? "/account/wishlist?ok=" + okKind : rt;
         } else {
           var product = null;
           try { product = await deps.catalog.products.get(productId); } catch (_e) { product = null; }
-          dest = product ? ("/products/" + encodeURIComponent(product.slug)) : "/account/wishlist";
+          dest = product ? ("/products/" + encodeURIComponent(product.slug)) : ("/account/wishlist?ok=" + okKind);
         }
         res.status(303); res.setHeader && res.setHeader("location", dest);
         return res.end ? res.end() : res.send("");
@@ -6603,8 +6869,10 @@ function mount(router, deps) {
           items.push({ product: product, hero_media: media.length ? media[0] : null });
         }
         var cartCount = await _cartCountForReq(req);
+        var wlUrl = req.url ? new URL(req.url, "http://localhost") : null;
         _send(res, 200, renderWishlist({
           items:        items,
+          notice:       wlUrl ? wlUrl.searchParams.get("ok") : null,
           shop_name:    shopName,
           cart_count:   cartCount,
           asset_prefix: deps.asset_prefix || "/assets/",
@@ -6675,8 +6943,10 @@ function mount(router, deps) {
           items.push({ save: row, product: product, hero_media: media.length ? media[0] : null });
         }
         var cartCount = await _cartCountForReq(req);
+        var savedUrl = req.url ? new URL(req.url, "http://localhost") : null;
         _send(res, 200, renderSaved({
           items:        items,
+          notice:       savedUrl ? savedUrl.searchParams.get("ok") : null,
           shop_name:    shopName,
           cart_count:   cartCount,
           asset_prefix: deps.asset_prefix || "/assets/",
@@ -6734,7 +7004,7 @@ function mount(router, deps) {
           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", "/account/saved");
+        res.status(303); res.setHeader && res.setHeader("location", "/account/saved?ok=removed");
         return res.end ? res.end() : res.send("");
       });
     }
@@ -6774,13 +7044,33 @@ function mount(router, deps) {
         }
         return addr;
       }
+      // Map the ?ok=<kind> redirect marker the POST handlers set on
+      // success to the human confirmation copy rendered (role="status")
+      // at the top of the list. Unknown markers degrade to no notice.
+      function _addrSuccessCopy(kind) {
+        if (kind === "added")    return "Address saved.";
+        if (kind === "updated")  return "Address updated.";
+        if (kind === "removed")  return "Address removed.";
+        if (kind === "restored") return "Address restored.";
+        if (kind === "default-shipping") return "Default shipping address updated.";
+        if (kind === "default-billing")  return "Default billing address updated.";
+        return null;
+      }
       async function _renderAddrPage(req, res, auth, editAddr, notice, code) {
         var rows = await deps.addresses.listForCustomer(auth.customer_id, { limit: 50 });
         var cartCount = await _cartCountForReq(req);
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var okKind = url ? url.searchParams.get("ok") : null;
+        var success = _addrSuccessCopy(okKind);
+        // An Undo control is only offered for a just-removed row, and only
+        // when the ?undo=<id> marker round-trips a real owned address id.
+        var undoId = (okKind === "removed" && url) ? url.searchParams.get("undo") : null;
         _send(res, code || 200, renderAddresses({
           addresses:  rows,
           edit:       editAddr || null,
           notice:     notice || null,
+          success:    success,
+          undo_id:    undoId || null,
           shop_name:  shopName,
           cart_count: cartCount,
         }));
@@ -6824,7 +7114,7 @@ function mount(router, deps) {
           if (e instanceof TypeError) return _renderAddrPage(req, res, auth, null, (e && e.message) || "Please check the address.", 400);
           throw e;
         }
-        res.status(303); res.setHeader && res.setHeader("location", "/account/addresses");
+        res.status(303); res.setHeader && res.setHeader("location", "/account/addresses?ok=added");
         return res.end ? res.end() : res.send("");
       });
 
@@ -6840,11 +7130,11 @@ function mount(router, deps) {
           }
           throw e;
         }
-        res.status(303); res.setHeader && res.setHeader("location", "/account/addresses");
+        res.status(303); res.setHeader && res.setHeader("location", "/account/addresses?ok=updated");
         return res.end ? res.end() : res.send("");
       });
 
-      function _addrAction(verb, fn) {
+      function _addrAction(verb, okKind, fn) {
         router.post("/account/addresses/:id/" + verb, async function (req, res) {
           var auth = _addrAuth(req, res); if (!auth) return;
           var addr = await _ownedAddress(req, res, auth); if (!addr) return;
@@ -6853,13 +7143,64 @@ function mount(router, deps) {
             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", "/account/addresses");
+          res.status(303); res.setHeader && res.setHeader("location", "/account/addresses?ok=" + okKind);
           return res.end ? res.end() : res.send("");
         });
       }
-      _addrAction("default-shipping", function (id) { return deps.addresses.setDefaultShipping(id); });
-      _addrAction("default-billing",  function (id) { return deps.addresses.setDefaultBilling(id); });
-      _addrAction("archive",          function (id) { return deps.addresses.archive(id); });
+      _addrAction("default-shipping", "default-shipping", function (id) { return deps.addresses.setDefaultShipping(id); });
+      _addrAction("default-billing",  "default-billing",  function (id) { return deps.addresses.setDefaultBilling(id); });
+
+      // Remove is destructive and CSP forbids a confirm() dialog, so it
+      // routes through a server-rendered confirm page first; the POST that
+      // actually archives lives behind that page. The list then surfaces a
+      // success notice with an Undo (unarchive) control.
+      router.get("/account/addresses/:id/remove", async function (req, res) {
+        var auth = _addrAuth(req, res); if (!auth) return;
+        var addr = await _ownedAddress(req, res, auth); if (!addr) return;
+        var cartCount = await _cartCountForReq(req);
+        _send(res, 200, renderAddressRemoveConfirm({
+          address:    addr,
+          shop_name:  shopName,
+          cart_count: cartCount,
+        }));
+      });
+
+      router.post("/account/addresses/:id/archive", async function (req, res) {
+        var auth = _addrAuth(req, res); if (!auth) return;
+        var addr = await _ownedAddress(req, res, auth); if (!addr) return;
+        try { await deps.addresses.archive(addr.id); }
+        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", "/account/addresses?ok=removed&undo=" + encodeURIComponent(addr.id));
+        return res.end ? res.end() : res.send("");
+      });
+
+      // Undo path for a just-removed address. Unlike the by-id routes
+      // above, this one resolves the row WITH archived rows included (the
+      // address is archived by definition here) but still enforces
+      // customer ownership before un-archiving.
+      router.post("/account/addresses/:id/unarchive", async function (req, res) {
+        var auth = _addrAuth(req, res); if (!auth) return;
+        var addr;
+        try { addr = await deps.addresses.get(req.params && req.params.id); }
+        catch (e) {
+          if (e instanceof TypeError) { _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme })); return; }
+          throw e;
+        }
+        if (!addr || addr.customer_id !== auth.customer_id) {
+          return _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme }));
+        }
+        try { await deps.addresses.unarchive(addr.id); }
+        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", "/account/addresses?ok=restored");
+        return res.end ? res.end() : res.send("");
+      });
     }
 
     // Subscription self-management — the signed-in customer views their
@@ -6950,6 +7291,31 @@ function mount(router, deps) {
       // Cancel mounts only when payment is wired (cancel composes Stripe).
       // Without payment the list above stays read-only with a note.
       if (deps.payment) {
+        // Confirmation step (GET) ahead of the destructive POST. Renders
+        // the period-end date + the days-forfeited consequence of an
+        // immediate cancel. A subscription that isn't cancelable
+        // (already canceled / winding down) redirects back to the list.
+        router.get("/account/subscriptions/:id/cancel", async function (req, res) {
+          var auth = _subsAuth(req, res); if (!auth) return;
+          var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
+          if (!_subscriptionIsCancelable(sub)) {
+            res.status(303); res.setHeader && res.setHeader("location", "/account/subscriptions");
+            return res.end ? res.end() : res.send("");
+          }
+          // Join the plan for the confirm-page summary (best-effort — a
+          // missing plan degrades the heading to a generic phrase).
+          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, renderSubscriptionCancelConfirm({
+            subscription: sub,
+            shop_name:    shopName,
+            cart_count:   cartCount,
+          }));
+        });
+
         router.post("/account/subscriptions/:id/cancel", async function (req, res) {
           var auth = _subsAuth(req, res); if (!auth) return;
           var sub = await _ownedSubscription(req, res, auth); if (!sub) return;
@@ -7016,7 +7382,13 @@ function mount(router, deps) {
         var auth = _returnsAuth(req, res); if (!auth) return;
         var page = await deps.returns.listForCustomer(auth.customer_id, { limit: 50 });
         var cartCount = await _cartCountForReq(req);
-        _send(res, 200, renderReturns({ rmas: page.rows, shop_name: shopName, cart_count: cartCount }));
+        var retUrl = req.url ? new URL(req.url, "http://localhost") : null;
+        _send(res, 200, renderReturns({
+          rmas:       page.rows,
+          rma_code:   retUrl ? retUrl.searchParams.get("ok") : null,
+          shop_name:  shopName,
+          cart_count: cartCount,
+        }));
       });
 
       router.get("/account/orders/:order_id/return", async function (req, res) {
@@ -7049,8 +7421,9 @@ function mount(router, deps) {
             shop_name: shopName, cart_count: cartCount,
           }));
         }
+        var requested;
         try {
-          await deps.returns.request({
+          requested = await deps.returns.request({
             order_id:       order.id,
             customer_id:    auth.customer_id,
             reason:         body.reason,
@@ -7066,7 +7439,11 @@ function mount(router, deps) {
           }
           throw e;
         }
-        res.status(303); res.setHeader && res.setHeader("location", "/account/returns");
+        // Round-trip the RMA code on the redirect so the list page can
+        // confirm the request and echo the operator-readable handle.
+        var rmaCode = requested && requested.rma_code ? requested.rma_code : "";
+        res.status(303);
+        res.setHeader && res.setHeader("location", "/account/returns?ok=" + encodeURIComponent(rmaCode));
         return res.end ? res.end() : res.send("");
       });
     }