@blamejs/blamejs-shop 0.0.46 → 0.0.48

package/CHANGELOG.md

@@ -8,6 +8,10 @@ upgrading across more than a few patches at a time.
 
 ## v0.0.x
 
+- v0.0.48 (2026-05-22) — **Home page — featured-product callout between the primitives marquee and the collections grid.** The home page rhythm went marquee → 6-tile collections grid → framework band, so a single product never got more than the four-tile catalog card's surface area to introduce itself. This release inserts a split callout (square hero image on the left, copy column with `Featured` eyebrow + title + description + accent-coloured price + `View product →` CTA on the right) between the marquee and the collections grid. The render picks the first product with attached media; operators wrapping `renderHome` can override the selection via `opts.featured`. **Added:** *`.featured-product` section* — Sits between the primitives marquee and the collections grid. Two-column grid at desktop (square hero + copy column), stacks to image-above-copy at <64rem with a 16/10 image aspect ratio. Title is a `clamp(1.75rem, 3vw, 2.5rem)` headline; price renders in the display font at `--text-2xl` with the accent colour + tabular-nums. Image is wrapped in an anchor to the PDP and has a hover-scale of `1.03` driven through the existing `--duration-slow` ease curve. The card itself has a hairline border on `var(--paper)` so it reads as a content tile, not a hero band — keeps the dark hero above and the framework band below as the page's main rhythm changes. · *`storefront.renderHome({ ..., featured? })` selection override* — When `opts.featured` is supplied the renderer uses it verbatim (shape: `{ title, description, price, slug, image_url, image_alt }`). When absent, the renderer scans the active-products list for the first row with `image_url` and uses that as the featured pick. Products without media are skipped; when no product has media the callout renders as an empty string and the page rhythm falls back to marquee → collections directly. **Changed:** *Product data shape — `description` carried through* — The renderHome `products.map(...)` projection now includes `description` (from the catalog products row) so the featured callout's lede can pull product-specific copy. Existing callers that didn't pass a description continue to render — the callout falls back to a stock 'Server-rendered, PQC-secured, shipped from origin' line.
+
+- v0.0.47 (2026-05-22) — **Account dashboard — 4-stat row + recent-orders table with per-order product thumbnails.** The dashboard surfaced a bare three-column orders table (order id, status, total). This release adds a 4-stat row above the body (orders / lifetime spend / member since / passkeys) and a new 'Items' column on the orders table that renders the first four product thumbnails per order with a `+N` overflow chip when there are more. Visitors land on a richer surface that summarises their relationship with the shop instead of just listing opaque order ids. **Added:** *Stats row — orders, lifetime spend, member since, passkeys* — Four-up grid above the orders table. `Orders` is the count of returned orders (capped at 10 by the listForCustomer page; future patch could surface the true count via a `count()` shape on the order primitive). `Lifetime spend` sums `grand_total_minor` across orders in the dominant currency (falls back to '—' if multiple currencies appear, since silently mis-summing them is worse than declining to compute). `Member since` reads `customer.created_at` when present, otherwise the earliest order's `created_at` — both as an ISO date. `Passkeys` calls `deps.customers.listPasskeys(customer.id)` (drop-silent on `TypeError` if the primitive build doesn't expose the listing surface yet). · *`Items` column — per-order product thumbnails* — Per-order, the route walks `order.lines`, collapses to unique variant ids, and resolves each through cached `catalog.variants.get` → `catalog.products.get` + `catalog.media.listForProduct`. The variant cache is held across orders so a customer with multiple orders containing the same SKU only hits the catalog once. The table cell surfaces the first four thumbs (`.account-order__thumb`, 2.5rem rounded tiles); orders with more than four show a `+N` overflow chip. Status renders as the same `.pdp__badge`-style pill the order page uses — green-bordered `--ok` variant for `completed` / `shipped` / `delivered`. **Changed:** *`storefront.renderAccount({ customer, orders, order_product_lookup?, passkey_count?, asset_prefix? })`* — New optional opts. `order_product_lookup` is `{ order_id: [{ product, hero_media }, ...] }` — the route bundles it in. `passkey_count` is the integer count of enrolled passkeys (0 when the customers primitive can't enumerate them on this build). `asset_prefix` defaults to `/assets/` for image URL composition. All three are optional — calling with just `customer` + `orders` continues to render cleanly, the stat row just shows `0` / `—` for the missing fields.
+
 - v0.0.46 (2026-05-22) — **Order confirmation page — line items render thumbnails + product titles (same pattern as the cart).** The post-checkout `/orders/:order_id` page used the read-only `CART_LINE` template that emitted just SKU + qty + unit + total. The order confirmation now reuses the same product-cell treatment v0.0.45 shipped on the live cart — small thumbnail (from `catalog.media.listForProduct`) + product title + SKU chip in a slug-linked anchor — so the page a customer lands on after a successful purchase shows what they bought visually, not just a column of opaque SKU codes. **Changed:** *`CART_LINE` (read-only, used by the order page) — same product cell as the editable cart line* — Markup mirrors `CART_LINE_EDITABLE` minus the qty / update / remove forms. First cell is `<a class="cart-line__product-link" href="/products/<slug>">` wrapping the thumbnail + title + SKU chip; remaining cells (qty / unit / total) are unchanged. Reuses the existing `.cart-line__thumb` + `.cart-line__product-*` CSS — no new theme rules. · *`storefront.renderOrder({ ..., product_lookup })` accepts the variant→product map* — Mirrors `renderCart`'s contract. The route handler bundles a `{ variant_id: { product, hero_media } }` cache built per-unique-variant; lines whose variant is missing fall through to SKU-as-title + the placeholder tile. The order page table header is now 'Product' instead of 'SKU'. · *`GET /orders/:order_id` walks the order's frozen lines once* — After loading the order, the route walks `o.lines` and for each unique `variant_id` pulls `catalog.variants.get` → `catalog.products.get` + `catalog.media.listForProduct`. The cache prevents a multi-quantity-same-variant order from hitting the catalog more than once per variant. The lookup is passed to `renderOrder` so the line rendering matches the cart's pattern byte-for-byte.
 
 - v0.0.45 (2026-05-22) — **Cart line items — thumbnail + product title + slug-linked anchor alongside the SKU chip.** Cart rows previously rendered only the SKU code, qty, unit, and total — the visitor had to remember what they actually added. Each line now leads with a 3.5rem rounded thumbnail (from the product's first `catalog.media` row), the product title in a bold inline label, and the SKU as a small monospace chip below. The whole product cell is an anchor back to the PDP so a visitor can re-enter the product page directly from the cart. Lines whose variant is missing media render the placeholder tile (dashed-border + the diagonal-stripe pattern the catalog empty-state uses). **Changed:** *`CART_LINE_EDITABLE` template — product cell replaces SKU-only cell* — First cell is now `<a class="cart-line__product-link" href="/products/<slug>">` wrapping a thumbnail + a `<span class="cart-line__product-meta">` that stacks the product title (bold) and SKU chip (monospace, on a `--bg-2` background). Hover on the link tints both the title and the link affordance to the accent color. The qty / unit / total / action cells are unchanged. · *`storefront.renderCart({ ..., product_lookup })` accepts a variant→product lookup* — Routes pass a `{ variant_id: { product, hero_media } }` map; lines render with the matching product's title + slug-linked URL + hero-media thumbnail. Lines without a lookup match (variant deleted, media not attached yet) fall through to a SKU-as-title display with the placeholder tile. The cart-table column header is now 'Product' instead of 'SKU'. · *`GET /cart` builds the product lookup* — After listing the cart's lines, the route walks each unique `variant_id` (cached by id so a cart with the same variant twice only hits the catalog once), pulls `catalog.variants.get` → `catalog.products.get` + `catalog.media.listForProduct`, and bundles the result for the renderer.

package/lib/storefront.js

@@ -318,6 +318,8 @@ var HOME_HERO =
   "  </div>\n" +
   "</section>\n" +
   "\n" +
+  "RAW_FEATURED_CALLOUT\n" +
+  "\n" +
   "<section class=\"collections\" aria-labelledby=\"collections-title\">\n" +
   "  <header class=\"section-head\">\n" +
   "    <p class=\"eyebrow\">Featured collections</p>\n" +
@@ -453,7 +455,14 @@ function renderHome(opts) {
     // products render the text-only PRODUCT_CARD fallback below.
     var imageUrl = p.hero_media ? assetPrefix + p.hero_media.r2_key : null;
     var imageAlt = p.hero_media ? (p.hero_media.alt_text || p.title) : null;
-    return { title: p.title, price: priceStr, slug: p.slug, image_url: imageUrl, image_alt: imageAlt };
+    return {
+      title:       p.title,
+      description: p.description || "",
+      price:       priceStr,
+      slug:        p.slug,
+      image_url:   imageUrl,
+      image_alt:   imageAlt,
+    };
   });
   if (opts.theme) {
     return opts.theme.render("home", {
@@ -473,7 +482,46 @@ function renderHome(opts) {
   // actual catalog size, not a stale hardcoded number. Falls back
   // to a typographic em-dash when the catalog hasn't been seeded.
   var heroProductCount = products.length === 0 ? "—" : String(products.length);
-  var hero = _render(HOME_HERO, { product_count: heroProductCount });
+
+  // Featured-product callout — pick the first product that has
+  // attached media. Surfaces a single product in a wider treatment
+  // than the dense 6-tile collections grid below. Operators that
+  // want a different selection rule (top-seller, newest, manually
+  // pinned) wrap renderHome and override `opts.featured`.
+  function _esc(s) {
+    return String(s == null ? "" : s)
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  var featuredProduct = null;
+  if (opts.featured) {
+    featuredProduct = opts.featured;
+  } else {
+    for (var fi = 0; fi < products.length; fi += 1) {
+      if (products[fi].image_url) { featuredProduct = products[fi]; break; }
+    }
+  }
+  var featuredHtml = "";
+  if (featuredProduct) {
+    var fpDesc = featuredProduct.description || "Server-rendered, PQC-secured, shipped from origin. Composed on the vendored blamejs framework.";
+    featuredHtml =
+      "<section class=\"featured-product\" aria-labelledby=\"featured-title\">\n" +
+      "  <div class=\"featured-product__inner\">\n" +
+      "    <a class=\"featured-product__media\" href=\"/products/" + _esc(featuredProduct.slug) + "\">\n" +
+      "      <img src=\"" + _esc(featuredProduct.image_url) + "\" alt=\"" + _esc(featuredProduct.image_alt || featuredProduct.title) + "\" loading=\"lazy\">\n" +
+      "    </a>\n" +
+      "    <div class=\"featured-product__copy\">\n" +
+      "      <p class=\"eyebrow\">Featured</p>\n" +
+      "      <h2 id=\"featured-title\" class=\"featured-product__title\">" + _esc(featuredProduct.title) + "</h2>\n" +
+      "      <p class=\"featured-product__lede\">" + _esc(fpDesc) + "</p>\n" +
+      "      <p class=\"featured-product__price\">" + _esc(featuredProduct.price) + "</p>\n" +
+      "      <a class=\"btn-primary\" href=\"/products/" + _esc(featuredProduct.slug) + "\">View product <span aria-hidden=\"true\">→</span></a>\n" +
+      "    </div>\n" +
+      "  </div>\n" +
+      "</section>";
+  }
+
+  var hero = _render(HOME_HERO, { product_count: heroProductCount })
+    .replace("RAW_FEATURED_CALLOUT", featuredHtml);
   // The hero + value band + catalog section give the home page a
   // designed surface even when no products are loaded yet —
   // visitors land on the storefront shell, not a tech demo.
@@ -1447,15 +1495,21 @@ var ACCOUNT_DASH_PAGE =
   "    <div>\n" +
   "      <p class=\"eyebrow\">Account</p>\n" +
   "      <h1 class=\"section-head__title\">Hi, {{display_name}}</h1>\n" +
-  "      <p class=\"section-head__lede\">Your recent orders + account controls.</p>\n" +
+  "      <p class=\"section-head__lede\">Your orders + account controls. Every order ships from origin with a Stripe-secured receipt.</p>\n" +
   "    </div>\n" +
   "    <form method=\"post\" action=\"/account/logout\"><button type=\"submit\" class=\"btn-ghost\">Sign out</button></form>\n" +
   "  </header>\n" +
+  "  <dl class=\"account-dash__stats\">\n" +
+  "    <div><dt>Orders</dt><dd>{{order_count}}</dd></div>\n" +
+  "    <div><dt>Lifetime spend</dt><dd>{{lifetime_spend}}</dd></div>\n" +
+  "    <div><dt>Member since</dt><dd>{{member_since}}</dd></div>\n" +
+  "    <div><dt>Passkeys</dt><dd>{{passkey_count}}</dd></div>\n" +
+  "  </dl>\n" +
   "  <div class=\"account-dash__body\">\n" +
   "    <h2 class=\"pdp__variants-title\">Recent orders</h2>\n" +
   "    <div class=\"table-scroll\">\n" +
-  "      <table>\n" +
-  "        <thead><tr><th>Order</th><th>Status</th><th>Total</th></tr></thead>\n" +
+  "      <table class=\"account-orders-table\">\n" +
+  "        <thead><tr><th>Order</th><th>Items</th><th>Status</th><th>Total</th></tr></thead>\n" +
   "        <tbody>{{order_rows}}</tbody>\n" +
   "      </table>\n" +
   "    </div>\n" +
@@ -1463,22 +1517,82 @@ var ACCOUNT_DASH_PAGE =
   "</section>\n";
 
 var ACCOUNT_DASH_ORDER_ROW =
-  "<tr><td><a href=\"/orders/{{order_id}}\">{{order_id_short}}</a></td><td>{{status}}</td><td class=\"price\">{{total}}</td></tr>\n";
+  "<tr>\n" +
+  "  <td><a href=\"/orders/{{order_id}}\" class=\"account-order__id\"><code>{{order_id_short}}</code></a></td>\n" +
+  "  <td class=\"account-order__items\">RAW_ACCOUNT_ORDER_THUMBS</td>\n" +
+  "  <td><span class=\"pdp__badge {{status_class}}\">{{status}}</span></td>\n" +
+  "  <td class=\"price\">{{total}}</td>\n" +
+  "</tr>\n";
 
 function renderAccount(opts) {
   if (!opts || !opts.customer) throw new TypeError("storefront.renderAccount: opts.customer required");
-  var rows = (opts.orders || []).map(function (o) {
+  var orders = opts.orders || [];
+  var assetPrefix = opts.asset_prefix || "/assets/";
+  var orderLookup = opts.order_product_lookup || {};   // { order_id: [{ product, hero_media }, ...] }
+  var passkeyCount = opts.passkey_count == null ? 0 : opts.passkey_count;
+
+  // Lifetime spend = sum of grand_total_minor across orders, in
+  // the dominant currency (defaults to USD; mixed-currency
+  // customers are rare in the demo but worth handling — we
+  // fallback to "—" when currencies disagree so the stat doesn't
+  // silently misrepresent the total).
+  var currencies = new Set(orders.map(function (o) { return o.currency || "USD"; }));
+  var lifetimeStr = "—";
+  if (currencies.size <= 1) {
+    var total = orders.reduce(function (acc, o) { return acc + (o.grand_total_minor || 0); }, 0);
+    var ccy   = orders.length ? (orders[0].currency || "USD") : "USD";
+    lifetimeStr = pricing.format(total, ccy);
+  }
+
+  // Member-since — earliest known order date, or "—" if none.
+  // The customer row may carry a `created_at` epoch ms; if so
+  // prefer that (it's authoritative).
+  var memberSince = "—";
+  if (opts.customer.created_at) {
+    memberSince = new Date(opts.customer.created_at).toISOString().slice(0, 10);
+  } else if (orders.length) {
+    var earliest = orders.reduce(function (acc, o) {
+      var t = o.created_at || Infinity;
+      return t < acc ? t : acc;
+    }, Infinity);
+    if (isFinite(earliest)) memberSince = new Date(earliest).toISOString().slice(0, 10);
+  }
+
+  function _statusClass(s) {
+    if (s === "completed" || s === "shipped" || s === "delivered") return "pdp__badge--ok";
+    return "";
+  }
+  function _escAttr(s) {
+    return String(s == null ? "" : s)
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+
+  var rows = orders.map(function (o) {
+    var products = orderLookup[o.id] || [];
+    var thumbs = products.slice(0, 4).map(function (entry) {
+      if (entry && entry.hero_media) {
+        return "<span class=\"account-order__thumb\"><img src=\"" + _escAttr(assetPrefix + entry.hero_media.r2_key) + "\" alt=\"" + _escAttr(entry.hero_media.alt_text || (entry.product && entry.product.title) || "") + "\" loading=\"lazy\"></span>";
+      }
+      return "<span class=\"account-order__thumb account-order__thumb--empty\" aria-hidden=\"true\"></span>";
+    }).join("");
+    if (!thumbs) thumbs = "<span class=\"account-order__thumb account-order__thumb--empty\" aria-hidden=\"true\"></span>";
+    var moreCount = products.length > 4 ? "<span class=\"account-order__more\">+" + (products.length - 4) + "</span>" : "";
     return _render(ACCOUNT_DASH_ORDER_ROW, {
       order_id:       o.id,
       order_id_short: o.id.slice(0, 8),
       status:         o.status,
+      status_class:   _statusClass(o.status),
       total:          pricing.format(o.grand_total_minor, o.currency),
-    });
+    }).replace("RAW_ACCOUNT_ORDER_THUMBS", thumbs + moreCount);
   }).join("");
-  if (!rows) rows = "<tr><td colspan=\"3\" class=\"empty\">No orders yet.</td></tr>";
+  if (!rows) rows = "<tr><td colspan=\"4\" class=\"empty\">No orders yet. Browse the shop and your first order shows up here.</td></tr>";
   var body = _render(ACCOUNT_DASH_PAGE, {
-    display_name: opts.customer.display_name,
-    order_rows:   "RAW_ORDER_ROWS",
+    display_name:    opts.customer.display_name,
+    order_count:     String(orders.length),
+    lifetime_spend:  lifetimeStr,
+    member_since:    memberSince,
+    passkey_count:   String(passkeyCount),
+    order_rows:      "RAW_ORDER_ROWS",
   }).replace("RAW_ORDER_ROWS", rows);
   return _wrap({
     title:      "Account",
@@ -2125,9 +2239,52 @@ function mount(router, deps) {
         var page = await deps.order.listForCustomer(customer.id, { limit: 10 });
         orders = page.rows;
       }
+      // Per-order product thumbnails. For each order, walk its
+      // frozen lines, collapse to unique variant ids, then resolve
+      // each through cached `catalog.variants.get` →
+      // `catalog.products.get` + `catalog.media.listForProduct`.
+      // The per-order list is capped at the first four entries the
+      // renderer surfaces (with a "+N" overflow chip when there are
+      // more) so a multi-line order doesn't blow up the table row.
+      var orderProductLookup = {};
+      var variantCache = {};
+      for (var oi = 0; oi < orders.length; oi += 1) {
+        var ord = orders[oi];
+        var entries = [];
+        var seen = {};
+        for (var li = 0; li < (ord.lines || []).length; li += 1) {
+          var vId = ord.lines[li].variant_id;
+          if (seen[vId]) continue;
+          seen[vId] = true;
+          if (!variantCache[vId]) {
+            var v = await deps.catalog.variants.get(vId);
+            if (!v) { variantCache[vId] = null; continue; }
+            var prod  = await deps.catalog.products.get(v.product_id);
+            var media = await deps.catalog.media.listForProduct(v.product_id);
+            variantCache[vId] = {
+              product:    prod,
+              hero_media: media.length ? media[0] : null,
+            };
+          }
+          if (variantCache[vId]) entries.push(variantCache[vId]);
+        }
+        orderProductLookup[ord.id] = entries;
+      }
+      // Passkey count — how many devices the customer has enrolled.
+      var passkeyCount = 0;
+      try {
+        var pks = await deps.customers.listPasskeys(customer.id);
+        passkeyCount = Array.isArray(pks) ? pks.length : 0;
+      } catch (_e) { /* drop-silent — primitive may not expose listPasskeys on every build */ }
+
       var cartCount = await _cartCountForReq(req);
       _send(res, 200, renderAccount({
-        customer: customer, orders: orders, shop_name: shopName, cart_count: cartCount,
+        customer:              customer,
+        orders:                orders,
+        order_product_lookup:  orderProductLookup,
+        passkey_count:         passkeyCount,
+        shop_name:             shopName,
+        cart_count:            cartCount,
       }));
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blamejs/blamejs-shop",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "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": {