Add live stock counter (X/25 remaining + sold-out)

Worker:
- New GET /stock endpoint returns remaining count per edition from a
  STOCK KV namespace (EDITION_SIZE - sold), with GET CORS.
- Checkout writes a machine-readable metadata.skus list (key:qty).
- Webhook decrements KV per purchased edition after the order email.
- wrangler.toml gains the STOCK KV binding (id to be filled after
  `wrangler kv namespace create STOCK`); README documents setup.

Frontend:
- scripts/stock.js fetches /stock once and hands counts to listeners,
  failing silent if the endpoint is unreachable (no badges, no breakage).
- Shop cards show "X / 25 left" (red when <=5) and flip to "Sold out"
  with a disabled Acquire button + dimmed art at zero.
- Product pages show "X of 25 remaining" and disable Acquire when sold out.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

Author: claude

index.html

@@ -160,6 +160,7 @@ <h2>Join the drop list<span class="star">*</span></h2>
 <!-- data first, then components -->
 <script src="data/editions.js"></script>
 <script src="scripts/config.js"></script>
+<script src="scripts/stock.js"></script>
 <script src="scripts/shop.js"></script>
 <script src="scripts/plotter.js"></script>
 <script src="scripts/newsletter.js"></script>

product.html

@@ -71,6 +71,7 @@ <h1 class="pd-name" id="pdName"></h1>
           <span class="pd-ed tiny" id="pdEd"></span>
           <span class="pd-price" id="pdPrice"></span>
         </div>
+        <div class="pd-stock tiny" id="pdStock" hidden></div>
 
         <p class="pd-lore" id="pdLore"></p>
 
@@ -120,6 +121,7 @@ <h3>Shipping &amp; returns</h3>
 <!-- data first, then components -->
 <script src="data/editions.js"></script>
 <script src="scripts/config.js"></script>
+<script src="scripts/stock.js"></script>
 <script src="scripts/product.js"></script>
 <script src="scripts/cart.js"></script>
 </body>

scripts/product.js

@@ -72,10 +72,29 @@
   $("pdInk").textContent = INKS[color].name + " ink";
 
   // ---- acquire ----
-  $("pdAcquire").addEventListener("click", function () {
+  var acqBtn = $("pdAcquire");
+  acqBtn.addEventListener("click", function () {
+    if (acqBtn.disabled) return;
     if (window.PlotflowCart) window.PlotflowCart.add(key, color);
   });
 
+  // ---- live stock (remaining count / sold-out) ----
+  if (window.PlotflowStock) {
+    window.PlotflowStock.ready(function (counts) {
+      if (!counts || typeof counts[key] !== "number") return;
+      var left = counts[key], size = window.PlotflowStock.size, badge = $("pdStock");
+      if (left <= 0) {
+        if (badge) { badge.textContent = "Sold out — this edition has closed"; badge.classList.add("low"); badge.hidden = false; }
+        acqBtn.textContent = "Sold out";
+        acqBtn.disabled = true;
+      } else if (badge) {
+        badge.textContent = left + " of " + size + " remaining";
+        if (left <= 5) badge.classList.add("low");
+        badge.hidden = false;
+      }
+    });
+  }
+
   // ---- live-plot preview (self-contained progressive stroker) ----
   var plot = makePreview(suit, INKS[color].hex);
 

scripts/shop.js

@@ -16,6 +16,7 @@
     var s = SUITS[key]; if (!s) return;
     var card = document.createElement('article');
     card.className = 'card';
+    card.dataset.key = key;
     var no = '№ PF-0' + (10 + i);
     var href = 'product.html?id=' + encodeURIComponent(key);
     card.innerHTML =
@@ -30,7 +31,7 @@
         '<div class="foot"><span class="tiny">' + s.code + '</span><span class="tiny">マシンドロー</span></div>' +
         '<button class="plotbtn" data-plot="' + key + '">▶︎ Plot</button>' +
       '</a>' +
-      '<div class="buy"><div><div class="ed">' + s.edition + '</div><div class="t">' + s.code + ' ' + s.name + '</div></div>' +
+      '<div class="buy"><div><div class="ed">' + s.edition + '</div><div class="t">' + s.code + ' ' + s.name + '</div><div class="stock tiny" data-stock hidden></div></div>' +
         '<div style="display:flex;align-items:center"><span class="pr">' + s.price + '</span><button class="acq" data-acq="' + key + '" data-color="black">Acquire</button></div></div>';
     grid.appendChild(card);
 
@@ -48,6 +49,30 @@
     } catch (e) { /* getBBox unavailable — keep full-canvas viewBox */ }
   });
 
+  // Fill in live remaining-count badges once stock loads (fails silent).
+  if (window.PlotflowStock) {
+    window.PlotflowStock.ready(function (counts) {
+      if (!counts) return;
+      var SIZE = window.PlotflowStock.size;
+      ORDER.forEach(function (key) {
+        var card = grid.querySelector('.card[data-key="' + key + '"]');
+        if (!card || typeof counts[key] !== 'number') return;
+        var left = counts[key];
+        var badge = card.querySelector('[data-stock]');
+        var acq = card.querySelector('.acq');
+        if (left <= 0) {
+          card.classList.add('sold-out');
+          if (badge) { badge.textContent = 'Sold out'; badge.hidden = false; }
+          if (acq) { acq.textContent = 'Sold out'; acq.disabled = true; }
+        } else if (badge) {
+          badge.textContent = left + ' / ' + SIZE + ' left';
+          if (left <= 5) badge.classList.add('low');
+          badge.hidden = false;
+        }
+      });
+    });
+  }
+
   grid.addEventListener('click', function (e) {
     var b = e.target.closest('[data-plot]');
     if (!b) return;

scripts/stock.js

@@ -0,0 +1,43 @@
+/* ============================================================
+   PLOTFLOW · Live stock
+   Fetches remaining-count-per-edition from the checkout Worker's
+   /stock endpoint and hands it to whoever's listening (shop grid,
+   product page). Editions are limited runs; this shows how many of
+   each are left so a sell-out reads as scarcity, not a dead link.
+
+   Fails silent: if the endpoint is unreachable or not yet deployed,
+   no badges render and the site behaves exactly as before.
+   Depends on: scripts/config.js (PLOTFLOW_CONFIG.checkoutEndpoint)
+   ============================================================ */
+(function () {
+  var CFG = window.PLOTFLOW_CONFIG || {};
+  var base = (CFG.checkoutEndpoint || "").replace(/\/+$/, "");
+  var SIZE = 25; // pieces per numbered edition
+
+  var data = null;     // { zaku: 22, ... } remaining counts, or null on failure
+  var done = false;
+  var waiting = [];
+
+  function flush() {
+    var list = waiting; waiting = [];
+    list.forEach(function (cb) { try { cb(data); } catch (e) {} });
+  }
+
+  if (base) {
+    fetch(base + "/stock", { method: "GET" })
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (d) { data = d && typeof d === "object" ? d : null; done = true; flush(); })
+      .catch(function () { data = null; done = true; flush(); });
+  } else {
+    done = true;
+  }
+
+  window.PlotflowStock = {
+    size: SIZE,
+    // cb receives the counts object (or null if unavailable), once.
+    ready: function (cb) {
+      if (typeof cb !== "function") return;
+      if (done) cb(data); else waiting.push(cb);
+    }
+  };
+})();

styles/styles.css

@@ -142,6 +142,11 @@ select{appearance:none;background:rgba(245,244,239,.06);color:var(--white);borde
 .card .buy .pr{font-weight:800}
 .card .buy .acq{font-weight:800;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:8px 11px;margin-left:10px}
 .card .buy .acq:hover{background:var(--red);border-color:var(--red);color:var(--white)}
+.card .buy .stock{margin-top:5px;color:var(--dim);letter-spacing:.1em}
+.card .buy .stock.low{color:var(--red)}
+.card .buy .acq:disabled{color:var(--dim);border-color:var(--line);background:transparent;cursor:not-allowed}
+.card.sold-out .art,.card.sold-out .jp,.card.sold-out .name{opacity:.4}
+.card.sold-out .plotbtn{display:none}
 
 /* PROCESS */
 .proc{background:var(--con2);padding:8px 0 60px;position:relative}
@@ -243,7 +248,11 @@ footer .grain{opacity:.3}
 .pd-edrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
 .pd-ed{color:var(--dim);letter-spacing:.1em}
 .pd-price{font-weight:900;font-size:1.6rem}
+.pd-stock{margin:-8px 0 18px;color:var(--dim);letter-spacing:.12em}
+.pd-stock.low{color:var(--red)}
 .pd-lore{color:var(--mute);font-weight:500;font-size:14px;line-height:1.7;margin-bottom:24px}
+.pd-acquire:disabled{background:transparent;color:var(--dim);border-color:var(--line);cursor:not-allowed}
+.pd-acquire:disabled:hover{background:transparent;color:var(--dim);border-color:var(--line)}
 
 .pd-field{margin-bottom:20px}
 .pd-field-label{display:block;color:var(--dim);letter-spacing:.14em;margin-bottom:10px}

worker/README.md

@@ -48,6 +48,30 @@ Wrangler prints a URL like `https://plotflow-checkout.<subdomain>.workers.dev`.
 Put that URL in `scripts/config.js` → `checkoutEndpoint`, commit, and push.
 (Send me the URL and I'll wire it up.)
 
+### 6. Live stock counter (KV)
+
+Each edition is a limited run of 25. The Worker tracks how many have sold in a
+**KV namespace** and exposes the remaining count at `GET /stock`
+(`{ "zaku": 22, ... }`). The webhook decrements it on each completed order; the
+shop grid and product pages show "X / 25 left" and flip to "Sold out" at zero.
+
+Create the namespace once and paste its id into `wrangler.toml`:
+```bash
+cd worker
+wrangler kv namespace create STOCK      # older wrangler: wrangler kv:namespace create STOCK
+# copy the printed id into the [[kv_namespaces]] block (replace REPLACE_WITH_KV_NAMESPACE_ID)
+wrangler deploy
+```
+
+Notes:
+- Until the namespace exists and is bound, `/stock` returns full counts (25) and
+  the frontend simply shows no badges — nothing breaks.
+- The sold tally is keyed `sold_<edition>`. To correct a count manually:
+  `wrangler kv key put --binding=STOCK sold_zaku 3`
+- This also requires the Stripe **webhook** to be configured (Stripe Dashboard →
+  Developers → Webhooks → add `…workers.dev/webhook`, event
+  `checkout.session.completed`, then `wrangler secret put STRIPE_WEBHOOK_SECRET`).
+
 ## Testing
 With test-mode keys, use Stripe's test card `4242 4242 4242 4242`, any future
 expiry, any CVC/ZIP. A successful payment redirects to `/success.html`; the
@@ -59,7 +83,6 @@ and redeploy. No price changes needed — `CATALOG` is the same in both modes.
 
 ## Config (top of `src/index.js`)
 - `CATALOG` — edition name + price in cents. Keys must match `data/editions.js`.
-- `SHIPPING` — flat fee added on top (currently $9). Set `cents: 0` for free.
+- `SHIPPING_OPTIONS` — selectable rates at checkout (free U.S., flat $20 intl).
+- `EDITION_SIZE` — pieces per numbered edition (25); drives the `/stock` count.
 - `ALLOWED_ORIGINS`, `SHIP_COUNTRIES`, `SUCCESS_URL`, `CANCEL_URL`.
-- For numbered-edition inventory limits or order fulfillment hooks, add a
-  Stripe webhook later.

worker/src/index.js

@@ -49,6 +49,10 @@ const SHIP_COUNTRIES = ["US", "CA", "GB", "AU", "DE", "FR", "JP"];
 const NOTIFY_EMAIL = "devin@plotflow.io";
 const FROM_EMAIL   = "orders@plotflow.io";
 
+// Every edition is limited to 25 numbered pieces. Remaining = SIZE - sold,
+// where `sold` lives in the STOCK KV namespace (incremented by the webhook).
+const EDITION_SIZE = 25;
+
 export default {
   async fetch(request, env) {
     const url = new URL(request.url);
@@ -58,6 +62,15 @@ export default {
       return handleWebhook(request, env);
     }
 
+    // ---- stock endpoint (remaining count per edition) ----
+    if (url.pathname === "/stock") {
+      const sOrigin = request.headers.get("Origin") || "";
+      const sCors = corsHeaders(sOrigin, "GET, OPTIONS");
+      if (request.method === "OPTIONS") return new Response(null, { status: 204, headers: sCors });
+      if (request.method === "GET") return handleStock(env, sCors);
+      return json({ error: "Method not allowed" }, 405, sCors);
+    }
+
     // ---- checkout endpoint ----
     const origin = request.headers.get("Origin") || "";
     const cors = corsHeaders(origin);
@@ -74,6 +87,7 @@ export default {
     form.set("mode", "payment");
 
     const orderSummary = [];
+    const skus = [];
     let n = 0;
     for (const it of items) {
       const key = String((it && it.key) || "");
@@ -88,6 +102,7 @@ export default {
       form.set(`line_items[${n}][price_data][product_data][name]`, lineName);
       form.set(`line_items[${n}][quantity]`, String(qty));
       orderSummary.push(`${qty}× ${lineName}`);
+      skus.push(`${key}:${qty}`);
       n++;
     }
     if (!n) return json({ error: "Cart is empty" }, 400, cors);
@@ -106,6 +121,8 @@ export default {
     });
 
     form.set("metadata[editions]", orderSummary.join(", "));
+    // Machine-readable list so the webhook can decrement stock by edition key.
+    form.set("metadata[skus]", skus.join(","));
 
     const resp = await fetch("https://api.stripe.com/v1/checkout/sessions", {
       method: "POST",
@@ -222,11 +239,42 @@ async function handleWebhook(request, env) {
         })
       });
     }
+
+    // Decrement remaining stock per purchased edition. metadata.skus looks
+    // like "zaku:1,dom:2". Pen color does not affect stock (same edition run).
+    if (env.STOCK && meta.skus) {
+      for (const part of String(meta.skus).split(",")) {
+        const [key, qtyStr] = part.split(":");
+        const qty = parseInt(qtyStr, 10) || 0;
+        if (CATALOG[key] && qty > 0) await bumpStock(env, key, qty);
+      }
+    }
   }
 
   return new Response("ok", { status: 200 });
 }
 
+// ---- Stock (KV-backed) ----
+
+// Returns remaining count per edition: SIZE minus the recorded sold tally.
+async function handleStock(env, cors) {
+  const out = {};
+  for (const key of Object.keys(CATALOG)) {
+    let sold = 0;
+    if (env.STOCK) sold = parseInt(await env.STOCK.get("sold_" + key), 10) || 0;
+    out[key] = Math.max(0, EDITION_SIZE - sold);
+  }
+  return json(out, 200, cors);
+}
+
+// Increment the sold tally for an edition. KV is eventually consistent and this
+// read-modify-write is not atomic, but at edition-of-25 volumes the race window
+// is negligible; the worst case is a slightly stale public count.
+async function bumpStock(env, key, qty) {
+  const cur = parseInt(await env.STOCK.get("sold_" + key), 10) || 0;
+  await env.STOCK.put("sold_" + key, String(cur + qty));
+}
+
 // ---- Stripe signature verification (HMAC-SHA256) ----
 
 async function verifyStripeSignature(payload, header, secret) {
@@ -254,11 +302,11 @@ async function verifyStripeSignature(payload, header, secret) {
 
 function esc(s) { return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"); }
 
-function corsHeaders(origin) {
+function corsHeaders(origin, methods) {
   const allow = ALLOWED_ORIGINS.indexOf(origin) !== -1 ? origin : ALLOWED_ORIGINS[0];
   return {
     "Access-Control-Allow-Origin": allow,
-    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Methods": methods || "POST, OPTIONS",
     "Access-Control-Allow-Headers": "Content-Type",
     "Vary": "Origin"
   };

worker/wrangler.toml

@@ -4,3 +4,10 @@ compatibility_date = "2024-11-01"
 
 # STRIPE_SECRET_KEY is NOT stored here. Set it as an encrypted secret:
 #   wrangler secret put STRIPE_SECRET_KEY
+
+# Stock counter store. Create the namespace once, then paste its id below:
+#   wrangler kv namespace create STOCK
+# (older wrangler: `wrangler kv:namespace create STOCK`)
+[[kv_namespaces]]
+binding = "STOCK"
+id = "REPLACE_WITH_KV_NAMESPACE_ID"