@tokenoftrust/storefront-runner 1.4.1 → 2.0.0

package/apps/storefront/src/components/admin/AdminSettingsTab.astro

@@ -6,7 +6,7 @@ import { withBase } from "@/lib/basePath";
 const { envelope } = Astro.props;
 const settings = getSettingsViewModel(envelope);
 
-// Checkout styling editor (U12). Renders the current CheckoutStyle and saves it
+// Checkout styling editor. Renders the current CheckoutStyle and saves it
 // through the versioned publish spine (POST /api/preview/checkout-style —
 // colocated with reconcile/promote in the control-plane publish cluster). The
 // endpoint is base-path-prefixed so it stays inside a path-routed tenant, and
@@ -607,7 +607,7 @@ function formatChangeSummary(change: string): string {
     }
   }
 
-  /* Checkout styling editor (U12) */
+  /* Checkout styling editor */
   .checkout-style-editor {
     display: grid;
     gap: 14px;

package/apps/storefront/src/components/admin/AdminSubscriptionsTab.astro

@@ -4,6 +4,7 @@
  * truth; lifecycle actions require a later subscription API and audit gates.
  */
 import { getSubscriptionsViewModel } from "@/lib/admin/services/mock";
+import { formatDate } from "@/lib/format";
 import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
 import type {
   SubscriptionAttentionRow,
@@ -64,9 +65,6 @@ function formatMoney(value: number): string {
   return `$${value.toFixed(2)}`;
 }
 
-function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" });
-}
 ---
 
 <section

package/apps/storefront/src/components/admin/orders/OrdersWorkspace.astro

@@ -38,13 +38,13 @@ interface Props {
 const { envelope } = Astro.props;
 const cspNonce = Astro.locals.cspNonce;
 
-// Real orders (U3): fetch this tenant's checkout orders via U2's client
+// Real orders: fetch this tenant's checkout orders via the checkout order client
 // and map to the view model. The per-tenant bearer is a server-side Worker secret;
 // absent (or any upstream error) → an empty-but-valid model so the tab still
-// renders (rich empty/error UX is U5). Live data is gated on the ToT-core orders
-// endpoint (see U1/U2) — until then this resolves empty on qa.
+// renders. Live data is gated on the ToT-core orders
+// endpoint — until then this resolves empty on qa.
 const orderBearer = await readEnv("FOXY_ORDER_API_KEY");
-// Server-backed filters + pagination (U5): the queue filter + cursor come from
+// Server-backed filters + pagination: the queue filter + cursor come from
 // the URL and are applied by the order API server-side; payment/search remain
 // client-side refinements on the returned page.
 const orderFilters = parseOrderFilters(Astro.url.searchParams);
@@ -444,7 +444,7 @@ const holdCount = vm.rows.filter((r) => r.shipState === "hold_review_required").
     const setLoading = () => root.setAttribute("data-orders-loading", "");
 
     // Queue filter + Refresh + pagination are SERVER-backed: they navigate so the
-    // order API re-applies the filter/cursor and returns a fresh page (U5). Any
+    // order API re-applies the filter/cursor and returns a fresh page. Any
     // filter change resets pagination to the first page (drops the cursor).
     const navTo = (mutate) => {
       const url = new URL(window.location.href);

package/apps/storefront/src/components/blog/BlogPaywall.astro

@@ -0,0 +1,87 @@
+---
+// Paywall card shown under the teaser of a gated post the viewer can't read in
+// full. Mirrors the "Coming soon" host gate (`src/lib/auth/gatePage.ts`):
+// badge + headline + one line of value + a single CTA — restyled with the site's
+// design tokens so it reads as native article chrome, and preceded by a fade that
+// dissolves the truncated body into the card.
+import type { BlogAccess } from "@/lib/blog/types.js";
+
+interface Props {
+  access: BlogAccess;
+  next: string;
+  signedIn: boolean;
+  loginHref: string;
+}
+
+const { next, signedIn, loginHref } = Astro.props;
+---
+
+<div class="paywall-fade" aria-hidden="true"></div>
+<aside class="paywall" data-next={next} role="note">
+  <span class="paywall-badge">Members only</span>
+  {signedIn ? (
+    <>
+      <h2>You're signed in</h2>
+      <p>Membership tiers for this story are coming soon.</p>
+      {/* Unreachable in v1 (authenticated ⇒ member) — coded per the B4.0 spike so
+          a future paid tier only has to point this CTA at a membership route. */}
+      <a class="paywall-cta" href={loginHref}>Become a member</a>
+    </>
+  ) : (
+    <>
+      <h2>This story is for members</h2>
+      <p>Sign in with Token of Trust to keep reading — it's free.</p>
+      <a class="paywall-cta" href={loginHref}>Sign in to keep reading</a>
+    </>
+  )}
+</aside>
+
+<style>
+  .paywall-fade {
+    height: 7rem;
+    margin-top: -7rem;
+    position: relative;
+    pointer-events: none;
+    background: linear-gradient(to bottom, transparent, var(--color-bg));
+  }
+  .paywall {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: .9rem;
+    max-width: 34rem;
+    margin: 0 auto;
+    padding: clamp(1.75rem, 4vw, 2.5rem);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-md);
+  }
+  .paywall-badge {
+    display: inline-block;
+    letter-spacing: .18em;
+    text-transform: uppercase;
+    font-size: .72rem;
+    font-weight: 700;
+    color: var(--color-muted);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: .35rem .8rem;
+  }
+  .paywall h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
+  .paywall p { margin: 0; max-width: 28rem; color: var(--color-muted); font-size: 1.02rem; line-height: 1.6; }
+  .paywall-cta {
+    margin-top: .4rem;
+    display: inline-block;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--color-primary-contrast);
+    background: var(--color-primary);
+    border-radius: var(--radius-md);
+    padding: .8rem 1.6rem;
+    transition: background .15s ease;
+  }
+  .paywall-cta:hover { background: var(--color-primary-hover); }
+</style>

package/apps/storefront/src/components/blog/PostAccessBadge.astro

@@ -0,0 +1,43 @@
+---
+// Visual-only lock badge for a gated post on listing card grids. Reads
+// `post.access` and renders nothing for public posts. No gating logic lives
+// here — entitlement is decided in the route via `viewerHasBlogAccess`; this
+// is purely a "this story is members-only" indicator on listings and archives.
+import type { BlogAccess } from "@/lib/blog/types.js";
+
+interface Props {
+  access?: BlogAccess;
+}
+
+const { access } = Astro.props;
+const gated = (access ?? "public") !== "public";
+---
+
+{gated && (
+  <p class="access-badge">
+    <svg class="lock" width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="4" y="11" width="16" height="9" rx="2"></rect>
+      <path d="M8 11V7a4 4 0 0 1 8 0v4"></path>
+    </svg>
+    Members
+  </p>
+)}
+
+<style>
+  .access-badge {
+    display: inline-flex;
+    gap: .3rem;
+    align-items: center;
+    align-self: flex-start;
+    margin: 0 0 .55rem;
+    padding: .2rem .55rem;
+    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
+    border-radius: var(--radius-full);
+    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
+    color: var(--color-accent-ink);
+    font: 700 .68rem/1 var(--font-mono);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+  }
+  .lock { flex: 0 0 auto; }
+</style>

package/apps/storefront/src/components/blog/PostGrid.astro

@@ -0,0 +1,57 @@
+---
+// Reader-facing card grid for a list of blog posts, shared by the collection's
+// category and tag index pages. `base` is the collection route base (e.g.
+// "/blog"); `basePath` is the tenant/preview path prefix from Astro.locals.
+import type { BlogPostSummary } from "@/lib/blog/types.js";
+import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
+
+interface Props {
+  posts: BlogPostSummary[];
+  basePath: string;
+  base: string;
+}
+
+const { posts, basePath, base } = Astro.props;
+const href = (path: string) => `${basePath}${path}` || "/";
+---
+
+<section class="post-grid" aria-label="Posts">
+  {posts.map((post, index) => (
+    <article class="post-card">
+      <a href={href(`${base}/${post.slug}/`)} aria-label={`Read ${post.title}`}>
+        {post.featuredImage ? (
+          <img
+            src={post.featuredImage.src}
+            alt={post.featuredImage.alt}
+            width={post.featuredImage.width}
+            height={post.featuredImage.height}
+            loading={index < 3 ? "eager" : "lazy"}
+            decoding="async"
+          />
+        ) : <div class="image-placeholder" aria-hidden="true"></div>}
+        <div class="post-card-copy">
+          <p class="post-meta"><time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</time>{post.tags[0] && <> · {post.tags[0]}</>}</p>
+          <PostAccessBadge access={post.access} />
+          <h2>{post.title}</h2>
+          <p>{post.excerpt}</p>
+          <span>Read article <span aria-hidden="true">→</span></span>
+        </div>
+      </a>
+    </article>
+  ))}
+</section>
+
+<style>
+  .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; align-items: start; }
+  .post-card { height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
+  .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
+  .post-card a { display: flex; height: 100%; flex-direction: column; }
+  .post-card img, .image-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, white), color-mix(in srgb, var(--color-accent) 24%, white)); }
+  .post-card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
+  .post-meta { margin: 0 0 .7rem; color: var(--color-muted); font: 600 .72rem/1.45 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
+  .post-card h2 { font-size: 1.18rem; line-height: 1.25; }
+  .post-card-copy > p:not(.post-meta) { display: -webkit-box; margin: .75rem 0 1rem; overflow: hidden; color: var(--color-muted); font-size: .92rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+  .post-card-copy > span { margin-top: auto; color: var(--color-accent-ink); font-weight: 700; font-size: .88rem; }
+  @media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  @media (max-width: 520px) { .post-grid { grid-template-columns: 1fr; } }
+</style>

package/apps/storefront/src/components/blog/ReactionBar.astro

@@ -0,0 +1,214 @@
+---
+/**
+ * E1.2 — reader reaction bar. Server-renders the post's current reaction tallies
+ * (from the E1.1 KV counters) and offers the fixed vocabulary as clickable
+ * buttons; a client script POSTs the chosen reaction to the public react endpoint
+ * and updates the displayed count optimistically, then reconciles against the
+ * authoritative tallies the endpoint returns. Anonymous, no identity, no
+ * moderation — an emoji tally, the first reader-sentiment signal (complements
+ * view counts). Tenant/collection-generic: mounts on any post route.
+ */
+import { getReactionCounts, REACTIONS, type Reaction } from "@/lib/blog/reactions.js";
+import { readKv } from "@/lib/env";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  /** Collection id the post lives in (e.g. "blog", "the-build"). */
+  collection: string;
+  /** Post slug. */
+  slug: string;
+}
+
+const { collection, slug } = Astro.props;
+const { tenant, basePath, cspNonce } = Astro.locals;
+
+const META: Record<Reaction, { emoji: string; label: string }> = {
+  like: { emoji: "👍", label: "Like" },
+  insightful: { emoji: "💡", label: "Insightful" },
+  celebrate: { emoji: "🎉", label: "Celebrate" },
+};
+
+const kv = await readKv("TENANT_CACHE");
+const counts = await getReactionCounts(kv, tenant.tenant_id, collection, slug);
+
+// The react endpoint is base-path-scoped like every other same-origin POST
+// (mirrors the newsletter form action); host-routed tenants get an empty prefix.
+const endpoint = withBase(
+  basePath,
+  `/api/blog/${encodeURIComponent(collection)}/${encodeURIComponent(slug)}/react`,
+);
+---
+
+<section class="reaction-bar" aria-label="React to this article" data-reaction-bar data-endpoint={endpoint}>
+  <span class="reaction-bar__prompt">React</span>
+  <div class="reaction-bar__buttons">
+    {
+      REACTIONS.map((reaction) => (
+        <button
+          type="button"
+          class="reaction-btn"
+          data-reaction={reaction}
+          aria-pressed="false"
+          aria-label={META[reaction].label}
+        >
+          <span class="reaction-btn__emoji" aria-hidden="true">
+            {META[reaction].emoji}
+          </span>
+          <span class="reaction-btn__label">{META[reaction].label}</span>
+          <span class="reaction-btn__count" data-reaction-count>
+            {counts[reaction]}
+          </span>
+        </button>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  .reaction-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1rem;
+    width: min(720px, 100%);
+    margin: clamp(2.5rem, 6vw, 4rem) auto 0;
+    padding-top: clamp(1.5rem, 4vw, 2.25rem);
+    border-top: 1px solid var(--color-border);
+  }
+  .reaction-bar__prompt {
+    color: var(--color-muted);
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .reaction-bar__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+  }
+  .reaction-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.5rem 0.85rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    color: var(--color-ink, inherit);
+    font: inherit;
+    font-size: 0.9rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
+  }
+  .reaction-btn:hover {
+    border-color: var(--color-accent);
+  }
+  .reaction-btn:active {
+    transform: translateY(1px);
+  }
+  .reaction-btn[aria-pressed="true"] {
+    border-color: var(--color-accent);
+    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
+  }
+  .reaction-btn__emoji {
+    font-size: 1.1rem;
+  }
+  .reaction-btn__label {
+    font-weight: 700;
+  }
+  .reaction-btn__count {
+    min-width: 1.25ch;
+    padding-left: 0.15rem;
+    color: var(--color-muted);
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+  }
+  .reaction-btn[aria-pressed="true"] .reaction-btn__count {
+    color: var(--color-accent-ink);
+  }
+</style>
+
+<script is:inline nonce={cspNonce}>
+  (() => {
+    // One article (and one reaction bar) per page.
+    const root = document.querySelector("[data-reaction-bar]");
+    if (!root) return;
+
+    const endpoint = root.dataset.endpoint;
+    if (!endpoint) return;
+
+    // Remember this browser's reactions so a reload shows the pressed state and
+    // the same reader can't trivially re-inflate a tally by re-clicking.
+    const storeKey = "blogreact:" + endpoint;
+    let reacted = {};
+    try {
+      reacted = JSON.parse(localStorage.getItem(storeKey) || "{}") || {};
+    } catch {
+      reacted = {};
+    }
+    const persist = () => {
+      try {
+        localStorage.setItem(storeKey, JSON.stringify(reacted));
+      } catch {
+        /* storage disabled — pressed state is best-effort */
+      }
+    };
+
+    const buttons = Array.from(root.querySelectorAll("[data-reaction]"));
+    const countEl = (btn) => btn.querySelector("[data-reaction-count]");
+    const readCount = (btn) => {
+      const n = parseInt((countEl(btn)?.textContent || "0").trim(), 10);
+      return Number.isFinite(n) && n >= 0 ? n : 0;
+    };
+    const setCount = (btn, n) => {
+      const el = countEl(btn);
+      if (el) el.textContent = String(n);
+    };
+
+    for (const btn of buttons) {
+      if (reacted[btn.dataset.reaction]) btn.setAttribute("aria-pressed", "true");
+    }
+
+    const applyServerCounts = (counts) => {
+      if (!counts || typeof counts !== "object") return;
+      for (const btn of buttons) {
+        const v = counts[btn.dataset.reaction];
+        if (typeof v === "number" && v >= 0) setCount(btn, v);
+      }
+    };
+
+    for (const btn of buttons) {
+      btn.addEventListener("click", async () => {
+        const reaction = btn.dataset.reaction;
+        if (!reaction || reacted[reaction]) return;
+
+        // Optimistic: bump immediately, mark pressed.
+        const before = readCount(btn);
+        setCount(btn, before + 1);
+        btn.setAttribute("aria-pressed", "true");
+        reacted[reaction] = true;
+        persist();
+
+        try {
+          const res = await fetch(endpoint, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ reaction }),
+          });
+          const data = await res.json().catch(() => null);
+          // The endpoint always returns the authoritative tallies (even on
+          // rate-limit / invalid) — reconcile the display to them.
+          if (data && data.counts) applyServerCounts(data.counts);
+        } catch {
+          // Network fault: revert the optimistic bump and pressed state.
+          setCount(btn, before);
+          btn.setAttribute("aria-pressed", "false");
+          delete reacted[reaction];
+          persist();
+        }
+      });
+    }
+  })();
+</script>

package/apps/storefront/src/components/chrome/NavDropdown.astro

@@ -17,6 +17,7 @@
  */
 import type { ChromeNavItem, ChromeLink } from "@/lib/chrome/model";
 import { withBase } from "@/lib/basePath";
+import { isCurrentNavHref } from "@/lib/chrome/navCurrent";
 
 interface Props {
   item: ChromeNavItem;
@@ -32,6 +33,11 @@ const { basePath } = Astro.locals;
 
 const itemHref = withBase(basePath, item.href);
 const hrefOf = (l: ChromeLink) => (l.external ? l.href : withBase(basePath, l.href));
+// Exact-path match only — a parent item's own href never gets aria-current
+// just because the visitor is on a page nested under it. See navCurrent.ts.
+const currentPath = Astro.url.pathname;
+const itemCurrent = isCurrentNavHref(currentPath, itemHref);
+const isChildCurrent = (l: ChromeLink) => isCurrentNavHref(currentPath, hrefOf(l), l.external);
 const hasMenu =
   (item.columns && item.columns.length > 0) ||
   (item.children && item.children.length > 0);
@@ -77,6 +83,7 @@ const groups = isMega
                     <li>
                       <a
                         href={hrefOf(child)}
+                        aria-current={isChildCurrent(child) ? "page" : undefined}
                         class="flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
                         {...(child.external ? { rel: "noopener noreferrer" } : { "data-astro-prefetch": true })}
                       >
@@ -100,6 +107,7 @@ const groups = isMega
         <a
           href={itemHref}
           data-astro-prefetch
+          aria-current={itemCurrent ? "page" : undefined}
           class:list={[
             "flex items-center gap-1.5 border-b border-border py-2.5 text-sm font-medium text-text transition-colors last:border-b-0 hover:text-accent",
             item.flag && "text-accent",
@@ -119,6 +127,7 @@ const groups = isMega
       <a
         href={itemHref}
         data-astro-prefetch
+        aria-current={itemCurrent ? "page" : undefined}
         class:list={[
           "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent group-focus-within:text-accent",
           item.flag && "font-semibold text-accent",
@@ -149,6 +158,7 @@ const groups = isMega
                     <li>
                       <a
                         href={hrefOf(child)}
+                        aria-current={isChildCurrent(child) ? "page" : undefined}
                         class="flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
                         {...(child.external ? { rel: "noopener noreferrer" } : { "data-astro-prefetch": true })}
                       >
@@ -171,6 +181,7 @@ const groups = isMega
               <li>
                 <a
                   href={hrefOf(child)}
+                  aria-current={isChildCurrent(child) ? "page" : undefined}
                   class="block rounded-sm px-3 py-1.5 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
                   {...(child.external ? { rel: "noopener noreferrer" } : { "data-astro-prefetch": true })}
                 >
@@ -187,6 +198,7 @@ const groups = isMega
       <a
         href={itemHref}
         data-astro-prefetch
+        aria-current={itemCurrent ? "page" : undefined}
         class:list={[
           "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent",
           item.flag && "font-semibold text-accent",

package/apps/storefront/src/components/chrome/SiteFooter.astro

@@ -7,12 +7,16 @@
  * The newsletter is a plain POST form (progressive); it does not embed any cart
  * or checkout logic (commerce boundary).
  */
-import type { ChromeLink, FooterColumn, FooterNewsletter, SocialLink, ChromeLogo } from "@/lib/chrome/model";
+import type { ChromeLink, FooterColumn, FooterNewsletter, SocialLink, ChromeLogo, FooterVariant } from "@/lib/chrome/model";
 import { withBase } from "@/lib/basePath";
 
 interface Props {
   columns: FooterColumn[];
   brand?: { logo?: ChromeLogo; wordmark?: string; contact?: string[] };
+  /** Content-shape variant (lib/chrome/model.ts FooterVariant). Defaults to
+   * "default" — the only member today; threaded through so a future variant
+   * is a drop-in without touching every caller. */
+  variant?: FooterVariant;
   newsletter?: FooterNewsletter;
   /** Payment method labels rendered as chips (e.g. "Visa", "PayPal"). */
   payments?: string[];
@@ -29,6 +33,7 @@ interface Props {
 const {
   columns,
   brand,
+  variant = "default",
   newsletter,
   payments = [],
   social = [],
@@ -43,7 +48,7 @@ const hrefOf = (l: ChromeLink) => (l.external ? l.href : withBase(basePath, l.hr
 const showLogo = !!brand?.logo && /^(https?:|\/)/.test(brand.logo.src);
 ---
 
-<footer class:list={["border-t border-border bg-surface text-text", className]}>
+<footer class:list={["border-t border-border bg-surface text-text", className]} data-variant={variant}>
   <div class="container-prose py-12">
     <div class="grid gap-10 md:grid-cols-[1.4fr_repeat(3,1fr)]">
       <!-- Brand -->