@blamejs/blamejs-shop 0.3.14 → 0.3.15

package/CHANGELOG.md

@@ -8,6 +8,8 @@ upgrading across more than a few patches at a time.
 
 ## v0.3.x
 
+- v0.3.15 (2026-05-30) — **Product image galleries are interactive — click a thumbnail to view that image full size.** A product page's image gallery now lets a shopper switch between the product's images: clicking a thumbnail swaps the main image, with no JavaScript required. Previously the thumbnail strip was decorative — the additional images were unreachable, a single-image product showed empty placeholder slots, and only the first four images were shown. Now the main image stacks the product's images and the thumbnails are real, keyboard-accessible controls that select which one is shown; a product with one image shows just that image (no empty slots), and the four-image cap is raised to twelve so far more images are reachable. The picker is pure HTML and CSS, so it works without scripting and degrades cleanly. **Fixed:** *The product image gallery actually switches images now* — Thumbnails on the product page are now interactive: selecting one shows that image as the main image, using a no-JavaScript radio/label control. The empty placeholder slots a single-image product used to show are gone, the four-image cap is raised to twelve so far more images are reachable, and the strip is keyboard-navigable with accessible labels. The edge and container renderers emit identical markup.
+
 - v0.3.14 (2026-05-30) — **Drop the inert Document-Policy header that only produced browser warnings.** Container-rendered pages were sending a Document-Policy response header whose feature tokens (document-write, unsized-media, oversized-images) are no longer recognized by current browsers — so it enforced nothing while making the browser log a warning for each token on every page. The header is now omitted; every other security header (Content-Security-Policy, Permissions-Policy, HSTS, X-Frame-Options, the COOP/CORP set, and the rest) is unchanged. The edge and container paths now agree — neither sends Document-Policy — closing a header-parity gap. **Fixed:** *No more Document-Policy console warnings* — The Document-Policy header is no longer emitted on container-rendered pages. Its tokens were rejected by current browsers (the policy applied nothing and logged a warning per token on every page), so the header is dropped rather than shipped inert; the full set of other security headers is retained unchanged. Edge and container responses are now consistent.
 
 - v0.3.13 (2026-05-30) — **Updated runtime hardens the storage and audit layers; admin error pages no longer show raw database text.** The vendored blamejs runtime is updated to v0.14.7, which tightens the data and audit layers the shop is built on: database queries are checked against each table's declared columns (a reference to an undeclared column fails closed), the database encryption key is bound to its deployment so a copied key can't be unsealed elsewhere, raw SQL fragments refuse embedded string literals so values bind through placeholders, audit-chain purges can require two authorizers, and breach-notification deadlines raise a running clock. Separately, when an admin form action fails the console now shows a short generic message with the correct status instead of rendering a raw database or parser string into its error banner. No operator action is required. **Changed:** *Vendored runtime updated to v0.14.7 (storage + audit hardening)* — The underlying runtime now checks every database query against the table's declared columns and fails closed on an undeclared reference, binds the database encryption key to its data directory and key path so a relocated key won't unseal, refuses embedded string literals in raw SQL fragments, supports two-authorizer dual control on audit-chain purges, can compute sealed-column lookup hashes as a keyed MAC, and ships a running clock for breach-notification deadlines. The shop inherits these protections; no configuration change is needed. **Fixed:** *Console error banners show a safe message, not internal text* — Every admin HTML form handler now routes a thrown error through one shared classifier: a duplicate key becomes a 409 "That value is already in use.", a missing referenced record a generic not-found, malformed input a generic "Invalid input.", and an unexpected failure a generic message whose detail is recorded server-side rather than shown. Operator-facing validation messages are unchanged. This closes the path where a create form could render a raw database constraint string into its error banner, matching the API behavior the bearer path already had.

package/lib/asset-manifest.json

@@ -1,13 +1,13 @@
 {
-  "version": "0.3.14",
+  "version": "0.3.15",
   "assets": {
     "css/admin.css": {
       "integrity": "sha384-1SIn6oAf1DjECbRfKENZasdKHJiywGdXR58wn0hsFGcdVHzUmvfgMkEz5ANIAZJ3",
       "fingerprinted": "css/admin.72c808274ebcefd9.css"
     },
     "css/main.css": {
-      "integrity": "sha384-Ed0bwnHFBjIXGUR0F9xxiF4xNMDhWConBkMVtwphkMK8mnTPbotcw9hqgnPUwjcO",
-      "fingerprinted": "css/main.a3e517665e9a8f78.css"
+      "integrity": "sha384-kbtcIsmD7X/DDsTJIYQ49JexBKXkz/GU1aQ8430XEyHHW/hcOPMWqbgZ7wRqvsbT",
+      "fingerprinted": "css/main.37860144b12a94fe.css"
     },
     "js/announcement.js": {
       "integrity": "sha384-z4zcEMn+tScoVnYRE4nEf8N/oyvpxdpaxTNrT4QO/jURChid4+qjAvWkzatCaAPq",

package/lib/storefront.js

@@ -1709,42 +1709,57 @@ var PRODUCT_PAGE =
   "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
-// the main figure (with `alt_text` for a11y) and up to three more
-// rows feed the thumbnail strip below it. When media is absent the
-// gallery falls back to the existing letter-mark placeholder so a
+// product's media rows. A no-JS, CSS-`:checked` picker: every media row
+// is rendered both as a hidden radio + a stacked main `<img>` (only the
+// `:checked` radio's image is visible) and as a `<label for>` thumbnail
+// (clicking/keyboard-activating it checks the radio → CSS swaps the
+// visible image). The first image is selected on load. A single-image
+// product renders just that image with no thumbnail strip; when media is
+// absent the gallery falls back to the letter-mark placeholder so a
 // freshly-seeded product never renders an empty square.
+//
+// Byte-identical to the edge renderer (`worker/render/product.js
+// #_buildPdpGallery`) — keep the two in sync on every change.
 function _buildPdpGallery(product, media, assetPrefix) {
   var prefix = assetPrefix || "/assets/";
   function _escAttr(s) { return b.template.escapeHtml(s); }
   if (!media || media.length === 0) {
     return "<figure class=\"pdp__media pdp__media--placeholder\" aria-hidden=\"true\">" +
              "<svg class=\"media-ph__svg\" viewBox=\"0 0 240 240\" aria-hidden=\"true\"><rect width=\"240\" height=\"240\" fill=\"none\"/><g stroke=\"currentColor\" stroke-opacity=\"0.10\" stroke-width=\"1\"><path d=\"M0 40 H240 M0 80 H240 M0 120 H240 M0 160 H240 M0 200 H240 M40 0 V240 M80 0 V240 M120 0 V240 M160 0 V240 M200 0 V240\"/></g><g fill=\"none\" stroke=\"#AD38DB\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M120 64 L162 80 L162 122 C162 152 144 168 120 178 C96 168 78 152 78 122 L78 80 Z\" stroke=\"#732A8D\" stroke-width=\"2.4\"/><path d=\"M120 92 L146 105 L146 134 L120 147 L94 134 L94 105 Z\"/><path d=\"M94 105 L120 118 L146 105 M120 118 V147\" stroke=\"#732A8D\" stroke-width=\"2.4\"/><path d=\"M107 101 L112 105 L107 109\" stroke=\"currentColor\" stroke-width=\"2.4\"/><path d=\"M116 110 H128\" stroke=\"currentColor\" stroke-width=\"2.4\"/></g><text x=\"120\" y=\"208\" text-anchor=\"middle\" font-family=\"ui-monospace,Menlo,Consolas,monospace\" font-size=\"12\" letter-spacing=\"2\" fill=\"#6b6b78\">no image yet</text></svg>" +
-           "</figure>" +
-           "<ul class=\"pdp__thumbs\" aria-hidden=\"true\">" +
-             "<li class=\"is-active\"></li><li></li><li></li><li></li>" +
-           "</ul>";
+           "</figure>";
   }
   var hero = media[0];
-  var heroUrl = prefix + hero.r2_key;
   var heroAlt = hero.alt_text || product.title || "Product image";
-  var heroImg = "<figure class=\"pdp__media pdp__media--image\">" +
-                  "<img src=\"" + _escAttr(heroUrl) + "\" alt=\"" + _escAttr(heroAlt) + "\" loading=\"eager\">" +
-                "</figure>";
-  // Thumbnail strip — up to four slots, the active one is the hero.
-  // Real thumbnails come from additional media rows; missing slots
-  // render as dashed placeholders so the strip's grid doesn't
-  // collapse on a single-image product.
-  var thumbs = ["<li class=\"is-active\">" +
-                  "<img src=\"" + _escAttr(heroUrl) + "\" alt=\"\">" +
-                "</li>"];
-  for (var i = 1; i < Math.min(media.length, 4); i += 1) {
-    var t = media[i];
-    var tUrl = prefix + t.r2_key;
-    thumbs.push("<li><img src=\"" + _escAttr(tUrl) + "\" alt=\"\"></li>");
-  }
-  while (thumbs.length < 4) thumbs.push("<li></li>");
-  return heroImg + "<ul class=\"pdp__thumbs\" aria-hidden=\"true\">" + thumbs.join("") + "</ul>";
+  // The CSS picker (main.css) maps :checked radios through nth-of-type(12),
+  // so render at most that many — a thumbnail that checked a radio with no
+  // matching visibility rule would blank the gallery. Twelve covers any
+  // realistic product; keep this in lockstep with the rule count in main.css.
+  var shown = media.length < 12 ? media.length : 12;
+  var radios = "";
+  var imgs = "";
+  var thumbs = "";
+  for (var i = 0; i < shown; i += 1) {
+    var m = media[i];
+    var url = prefix + m.r2_key;
+    var id = "pdp-img-" + i;
+    var checked = i === 0 ? " checked" : "";
+    var alt = i === 0 ? heroAlt : (m.alt_text || product.title || "Product image");
+    var loading = i === 0 ? "eager" : "lazy";
+    radios += "<input class=\"pdp__radio\" type=\"radio\" name=\"pdp-img\" id=\"" + _escAttr(id) + "\"" + checked + ">";
+    imgs += "<img class=\"pdp__img\" src=\"" + _escAttr(url) + "\" alt=\"" + _escAttr(alt) + "\" loading=\"" + loading + "\">";
+    thumbs += "<li>" +
+                "<label class=\"pdp__thumb\" for=\"" + _escAttr(id) + "\">" +
+                  "<img src=\"" + _escAttr(url) + "\" alt=\"\">" +
+                  "<span class=\"sr-only\">Show image " + (i + 1) + "</span>" +
+                "</label>" +
+              "</li>";
+  }
+  // Radios are siblings of the figure + thumbnail list (not nested), so a
+  // checked radio can reach both the stacked images and the matching
+  // thumbnail through the general-sibling combinator in CSS.
+  var figure = "<figure class=\"pdp__media pdp__media--image pdp__media--gallery\">" + imgs + "</figure>";
+  if (shown === 1) return radios + figure;
+  return radios + figure + "<ul class=\"pdp__thumbs\">" + thumbs + "</ul>";
 }
 
 // Accessible star glyph row — the precise figure rides in a visually-

package/package.json

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