npm - @tokenoftrust/storefront-runner - Versions diffs - 0.1.0 - Mend

@tokenoftrust/storefront-runner 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/apps/storefront/src/pages/auth/magic.astro ADDED Viewed

@@ -0,0 +1,105 @@
+---
+/**
+ * /auth/magic — GET-safe landing for the magic-link sign-in.
+ *
+ * SECURITY INVARIANT: a GET of this page renders a "Confirm sign in" card and
+ * **consumes nothing** — the one-time token is only exchanged when the human clicks
+ * Confirm, which POSTs to /api/auth/magic-exchange. Inbox "safe-link" scanners fire
+ * GET on every URL; if this page auto-exchanged on GET, a scanner would silently burn
+ * the token before the user ever clicked. So: NEVER exchange on GET. The token rides
+ * in a hidden form field and leaves only via the POST.
+ */
+export const prerender = false;
+const cspNonce = Astro.locals.cspNonce;
+const url = new URL(Astro.request.url);
+const token = url.searchParams.get("token") ?? "";
+const email = (url.searchParams.get("email") ?? "").trim(); // display-only (never trusted)
+const errorCode = url.searchParams.get("error");
+const next = (() => {
+  const n = url.searchParams.get("next") ?? "/dashboard";
+  return n.startsWith("/") && !n.startsWith("//") ? n : "/dashboard";
+})();
+const ERROR_MESSAGES: Record<string, string> = {
+  invalid: "This sign-in link isn't valid or has already been used. Ask for a fresh invite.",
+  expired: "This sign-in link has expired. Ask for a fresh invite.",
+  used: "This sign-in link was already used. Ask for a fresh invite.",
+  missing: "This sign-in link is missing its token.",
+  unconfigured: "Sign-in isn't available right now. Please try again shortly.",
+  verify_failed: "We couldn't complete sign-in. Ask for a fresh invite and try again.",
+};
+// On GET with a token → confirm card. On GET with ?error → error card. No token, no
+// error → treat as a broken link.
+const errorMessage = errorCode
+  ? (ERROR_MESSAGES[errorCode] ?? "Something went wrong — ask for a fresh invite.")
+  : token
+    ? null
+    : ERROR_MESSAGES.missing;
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Confirm sign in — Regulated Storefront by Token of Trust©</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light dark; }
+      * { box-sizing: border-box; }
+      body {
+        font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        margin: 0; min-height: 100vh; display: grid; place-items: center;
+        padding: 2rem 1.25rem; background: #f5f4f0; color: #1c1c1c;
+      }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      .card {
+        width: 100%; max-width: 26rem; background: #fff; border: 1px solid #e6e4de;
+        border-radius: 14px; padding: 2rem 1.75rem; box-shadow: 0 6px 24px rgba(0,0,0,.06);
+      }
+      @media (prefers-color-scheme: dark) { .card { background: #1e1e28; border-color: #33333f; box-shadow: none; } }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em;
+        text-transform: uppercase; color: #8a7f66; margin: 0 0 .75rem; }
+      h1 { font-size: 1.4rem; letter-spacing: -.01em; margin: 0 0 .4rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1.5rem; font-size: .95rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      .who { font-weight: 600; }
+      button {
+        width: 100%; margin-top: .5rem; padding: .8rem 1rem; border: 0; border-radius: 9px;
+        background: #1a1a1a; color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer;
+      }
+      @media (prefers-color-scheme: dark) { button { background: #ececf1; color: #14141a; } }
+      button:hover { opacity: .92; }
+      .err { background: #fdecec; border: 1px solid #f5c2c2; color: #9a1c1c;
+        border-radius: 9px; padding: .7rem .85rem; font-size: .9rem; margin: 0 0 1rem; }
+      @media (prefers-color-scheme: dark) { .err { background: #3a1f22; border-color: #6b2f34; color: #f6b9b9; } }
+      .note { font-size: .78rem; color: #9a9a9a; margin: 1.1rem 0 0; text-align: center; }
+      a { color: inherit; }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <p class="eyebrow">Token of Trust© · Regulated Storefront</p>
+      {errorMessage ? (
+        <>
+          <h1>Sign-in link problem</h1>
+          <p class="err">{errorMessage}</p>
+          <p class="note"><a href="/auth/login">Sign in with a code instead →</a></p>
+        </>
+      ) : (
+        <>
+          <h1>Confirm sign in</h1>
+          <p class="sub">{email
+            ? <>Continue as <span class="who">{email}</span> to the Regulated Storefront dashboard.</>
+            : <>Continue to the Regulated Storefront dashboard.</>}</p>
+          <form method="post" action="/api/auth/magic-exchange">
+            <input type="hidden" name="token" value={token} />
+            <input type="hidden" name="next" value={next} />
+            <button type="submit">Confirm sign in</button>
+          </form>
+          <p class="note">This is a single-use link — confirming completes your sign-in.</p>
+        </>
+      )}
+    </main>
+  </body>
+</html>

package/apps/storefront/src/pages/capabilities.astro ADDED Viewed

@@ -0,0 +1,292 @@
+---
+/**
+ * Capabilities console (`/__capabilities`) — a read-only control surface for the
+ * three PR-gated switches (cart/checkout, age verification, excise tax) across
+ * the three environments (Local · Preview · Live).
+ *
+ * It is deliberately read-only: capabilities are config-as-code in the tenant
+ * repo's `.tot/config.json`, so the way you CHANGE a switch is a PR — a live
+ * toggle here would bypass the promote gate this whole design exists to enforce.
+ * The console reflects the real per-environment resolved state (each column reads
+ * the published capabilities artifact for its pointer) and makes the flow legible.
+ */
+import { readKv } from "@/lib/env";
+import {
+  readPublishedArtifact,
+  capabilitiesArtifactPath,
+  resolveCapabilities,
+} from "@tot/public-runtime";
+import type { CapabilityConfig, CapabilityKey } from "@tot/public-runtime";
+const { tenant, cspNonce } = Astro.locals;
+// Resolve each environment's capabilities from ITS pointer. Local = the
+// build-time / working-tree default (no publish); Preview = the `test` pointer
+// (PR head, via reconcile); Live = the `live` pointer (promoted). In plain dev
+// the KV store is empty, so all three read the static default — an honest "no PR
+// has diverged them yet" state.
+const kv = await readKv("TENANT_CACHE");
+const kvGet = kv ? (k: string) => kv.get(k) : async () => null;
+async function capsForPointer(env: "test" | "live"): Promise<CapabilityConfig> {
+  const raw = await readPublishedArtifact(
+    kvGet,
+    tenant.tenant_id,
+    env,
+    capabilitiesArtifactPath(tenant.tenant_id),
+  );
+  let override: Partial<CapabilityConfig> | null = null;
+  try {
+    override = raw ? (JSON.parse(raw) as Partial<CapabilityConfig>) : null;
+  } catch {
+    override = null;
+  }
+  return resolveCapabilities(tenant, override);
+}
+const local = resolveCapabilities(tenant, null);
+const preview = await capsForPointer("test");
+const live = await capsForPointer("live");
+// Which deployment am I looking at? (host-based, for the "you are here" marker.)
+const host = (Astro.request.headers.get("host") ?? "").toLowerCase();
+const hereKey = host.startsWith("localhost") || host.startsWith("127.0.0.1")
+  ? "local"
+  : host.startsWith("preview.")
+    ? "preview"
+    : "live";
+interface CapMeta {
+  key: CapabilityKey;
+  name: string;
+  sub: string;
+  track: string;
+}
+const CAPS: CapMeta[] = [
+  { key: "cartCheckout", name: "Cart & Checkout", sub: "FoxyCart · Track A", track: "commerce" },
+  { key: "ageVerification", name: "Age & ID Verification", sub: "Token of Trust · 21+", track: "compliance" },
+  { key: "exciseTax", name: "Excise Tax Collection", sub: "at checkout · Track B", track: "compliance" },
+];
+const ENVS = [
+  { key: "local", label: "Local", prov: "working tree", caps: local, gated: false },
+  { key: "preview", label: "Preview", prov: "PR head → test", caps: preview, gated: false },
+  { key: "live", label: "Live", prov: "promoted", caps: live, gated: true },
+] as const;
+const on = (c: CapabilityConfig, k: CapabilityKey) => c[k].enabled;
+// A cell "diverges" when its state differs from Live — the amber signal that a PR
+// has changed something not yet promoted.
+const diverges = (envCaps: CapabilityConfig, k: CapabilityKey) =>
+  on(envCaps, k) !== on(live, k);
+const anyDivergence = CAPS.some((c) =>
+  ENVS.some((e) => !e.gated && diverges(e.caps, c.key)),
+);
+---
+<!doctype html>
+<html lang="en" data-theme="console">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Capabilities · {tenant.displayName}</title>
+    <style nonce={cspNonce} set:html={`
+      :root {
+        --field: #0a2130; --field-2: #0d2839; --panel: #10344a;
+        --line: rgba(122,182,214,.16); --line-2: rgba(122,182,214,.34);
+        --ink: #e9f3f8; --dim: #85a6ba; --faint: #5c7d92;
+        --on: #4fe3b0; --on-bg: rgba(79,227,176,.10);
+        --off: #607e91; --pending: #ffc24d; --pending-bg: rgba(255,194,77,.10);
+        --gate: #ff8a72;
+        --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+        --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; }
+      body {
+        background:
+          radial-gradient(120% 80% at 88% -10%, #12405b 0%, transparent 55%),
+          linear-gradient(180deg, var(--field-2), var(--field));
+        color: var(--ink); font-family: var(--mono);
+        min-height: 100vh; padding: clamp(1.25rem, 4vw, 3rem);
+        -webkit-font-smoothing: antialiased;
+      }
+      .wrap { max-width: 1040px; margin: 0 auto; }
+      /* Header ------------------------------------------------------------ */
+      .head { display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: space-between; gap: 1rem 1.5rem;
+        padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-2); }
+      .eyebrow { font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
+        color: var(--dim); margin: 0 0 .55rem; }
+      .title { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em;
+        font-size: clamp(1.7rem, 4.5vw, 2.7rem); line-height: 1; margin: 0; }
+      .title span { color: var(--on); }
+      .source { text-align: right; font-size: .74rem; color: var(--dim); }
+      .source b { color: var(--ink); font-weight: 500; }
+      .chip { display: inline-block; margin-top: .35rem; padding: .3rem .6rem;
+        border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink);
+        background: rgba(122,182,214,.06); font-size: .74rem; }
+      /* Matrix ------------------------------------------------------------ */
+      .matrix { margin-top: 1.5rem; border: 1px solid var(--line-2);
+        border-radius: 6px; overflow: hidden; background: var(--field-2); }
+      .row { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(3, 1fr); }
+      .row + .row { border-top: 1px solid var(--line); }
+      .colhead { padding: .85rem 1rem; border-left: 1px solid var(--line);
+        background: rgba(122,182,214,.05); }
+      .colhead:first-child { border-left: 0; background: transparent; }
+      .env { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
+        color: var(--dim); display: flex; align-items: center; gap: .45rem; }
+      .env .lock { color: var(--gate); font-size: .8rem; }
+      .env .here { margin-left: auto; font-size: .58rem; letter-spacing: .12em;
+        color: var(--field); background: var(--on); border-radius: 2px;
+        padding: .1rem .3rem; }
+      .env .gate-note { color: var(--gate); }
+      .prov { font-size: .66rem; color: var(--faint); margin-top: .3rem; }
+      .cap { padding: 1rem; }
+      .cap .name { font-family: var(--sans); font-weight: 650; font-size: 1.02rem;
+        letter-spacing: -.01em; }
+      .cap .sub { color: var(--dim); font-size: .72rem; margin-top: .25rem; }
+      .cap .track { display: inline-block; margin-top: .55rem; font-size: .58rem;
+        letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
+        border: 1px solid var(--line-2); border-radius: 999px; padding: .12rem .5rem; }
+      .cell { padding: 1rem; border-left: 1px solid var(--line);
+        display: flex; flex-direction: column; gap: .5rem; }
+      .cell.here { background: rgba(79,227,176,.045); }
+      .cell.diverge { background: var(--pending-bg); }
+      .pill { display: inline-flex; align-items: center; gap: .5rem;
+        font-size: .8rem; letter-spacing: .02em; }
+      .dot { width: .62rem; height: .62rem; border-radius: 50%; flex: none; }
+      .on  .dot { background: var(--on); box-shadow: 0 0 0 4px var(--on-bg); }
+      .off .dot { background: transparent; border: 1.5px solid var(--off); }
+      .on  { color: var(--on); }
+      .off { color: var(--off); }
+      .flag { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
+        color: var(--pending); }
+      /* Flow strip -------------------------------------------------------- */
+      .flow { margin-top: 1.5rem; display: grid;
+        grid-template-columns: repeat(3, 1fr); gap: .75rem; }
+      .step { border: 1px solid var(--line); border-radius: 5px; padding: .9rem 1rem;
+        background: var(--field-2); position: relative; }
+      .step .n { font-size: .64rem; letter-spacing: .2em; color: var(--on);
+        text-transform: uppercase; }
+      .step .t { font-family: var(--sans); font-weight: 600; margin: .35rem 0 .3rem;
+        font-size: .96rem; }
+      .step .d { font-size: .74rem; color: var(--dim); line-height: 1.45; }
+      .step + .step::before { content: "→"; position: absolute; left: -.6rem;
+        top: 50%; transform: translateY(-50%); color: var(--faint); font-size: .8rem; }
+      .foot { margin-top: 1.4rem; font-size: .72rem; color: var(--faint);
+        line-height: 1.55; }
+      .foot b { color: var(--dim); font-weight: 500; }
+      .legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .7rem; }
+      .legend span { display: inline-flex; align-items: center; gap: .4rem; color: var(--dim); }
+      @media (max-width: 720px) {
+        .row { grid-template-columns: 1fr; }
+        .colhead, .cell { border-left: 0; border-top: 1px solid var(--line); }
+        .colhead:first-child { border-top: 0; }
+        .flow { grid-template-columns: 1fr; }
+        .step + .step::before { content: "↓"; left: 50%; top: -.65rem;
+          transform: translateX(-50%); }
+      }
+      @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
+    `}></style>
+  </head>
+  <body>
+    <div class="wrap">
+      <header class="head">
+        <div>
+          <p class="eyebrow">Tenant capabilities</p>
+          <h1 class="title">{tenant.displayName} <span>·</span> control</h1>
+        </div>
+        <div class="source">
+          source of truth<br />
+          <span class="chip">.tot/config.json → capabilities</span>
+        </div>
+      </header>
+      <div class="matrix" role="table" aria-label="Capabilities by environment">
+        <div class="row" role="row">
+          <div class="colhead" role="columnheader">
+            <div class="env">Capability</div>
+            <div class="prov">what it switches</div>
+          </div>
+          {ENVS.map((e) => (
+            <div class="colhead" role="columnheader">
+              <div class="env">
+                {e.label}
+                {e.gated && <span class="lock" title="promote-gated">🔒</span>}
+                {hereKey === e.key && <span class="here">you are here</span>}
+              </div>
+              <div class="prov">
+                {e.prov}{e.gated ? " · evidence-gated" : ""}
+              </div>
+            </div>
+          ))}
+        </div>
+        {CAPS.map((c) => (
+          <div class="row" role="row">
+            <div class="cap" role="rowheader">
+              <div class="name">{c.name}</div>
+              <div class="sub">{c.sub}</div>
+              <span class="track">{c.track}</span>
+            </div>
+            {ENVS.map((e) => {
+              const enabled = on(e.caps, c.key);
+              const div = !e.gated && diverges(e.caps, c.key);
+              return (
+                <div
+                  class:list={["cell", { here: hereKey === e.key, diverge: div }]}
+                  role="cell"
+                >
+                  <span class:list={["pill", enabled ? "on" : "off"]}>
+                    <span class="dot"></span>{enabled ? "Enabled" : "Disabled"}
+                  </span>
+                  {div && <span class="flag">⚠ pending promote</span>}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+      <div class="flow">
+        <div class="step">
+          <div class="n">01 · edit</div>
+          <div class="t">Change the switch</div>
+          <div class="d">Flip a capability in <b style="color:var(--ink)">.tot/config.json</b> in the tenant repo. Locally it takes effect on save (HMR).</div>
+        </div>
+        <div class="step">
+          <div class="n">02 · preview</div>
+          <div class="t">Open a PR</div>
+          <div class="d">The PR head reconciles to the <b style="color:var(--ink)">test</b> pointer — Preview shows the new state on its own URL, per PR.</div>
+        </div>
+        <div class="step">
+          <div class="n">03 · promote</div>
+          <div class="t">Merge to go live</div>
+          <div class="d">Accepting the PR promotes to the <b style="color:var(--ink)">live</b> pointer — the evidence/compliance gate hangs here.</div>
+        </div>
+      </div>
+      <p class="foot">
+        Each environment is pinned independently: Live keeps its promoted state until a PR is
+        accepted, so a shared-environment change is a PR by construction.
+        {anyDivergence
+          ? " Amber cells mark a capability that differs from Live — a change in flight, not yet promoted."
+          : " No capability currently diverges from Live."}
+        <span class="legend">
+          <span><span class="dot" style="background:var(--on);box-shadow:0 0 0 4px var(--on-bg)"></span> enabled</span>
+          <span><span class="dot" style="border:1.5px solid var(--off)"></span> disabled</span>
+          <span style="color:var(--pending)">⚠ pending promote</span>
+          <span style="color:var(--gate)">🔒 promote-gated</span>
+        </span>
+      </p>
+    </div>
+  </body>
+</html>

package/apps/storefront/src/pages/collections/[handle].astro ADDED Viewed

@@ -0,0 +1,154 @@
+---
+/**
+ * PLP / collection page (brief §5). Responsive grid, collection hero, sort,
+ * URL-addressable facets, numbered pagination + load-more. Product data from
+ * ToT (active-only); hero copy from the collection record (Storyblok could
+ * override later — documented seam).
+ */
+import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import EmptyState from "@/components/EmptyState.astro";
+import FacetSidebar from "@/components/plp/FacetSidebar.astro";
+import ActiveFilters from "@/components/plp/ActiveFilters.astro";
+import SortSelect from "@/components/plp/SortSelect.astro";
+import Pagination from "@/components/plp/Pagination.astro";
+import Img from "@/components/Img.astro";
+import { parseQuery } from "@/lib/url";
+import { breadcrumbLd, itemListLd } from "@/lib/jsonld";
+import { truncate } from "@/lib/format";
+import { withBase } from "@/lib/basePath";
+const { handle } = Astro.params;
+const { tenant, tot, canonicalBase } = Astro.locals;
+// Commerce-only route: marketing tenants have no catalog surface.
+if (!Astro.locals.features.catalog) return new Response(null, { status: 404 });
+if (!handle) return new Response(null, { status: 404 });
+const collection = await tot.getCollectionByHandle(handle);
+if (!collection) return new Response(null, { status: 404 });
+const url = new URL(Astro.request.url);
+const query = parseQuery(url);
+query.collection = handle;
+if (!query.pageSize) query.pageSize = 9;
+const { products, page, pageSize, total, facets } = await tot.listProducts(query);
+const basePath = `/collections/${handle}`;
+// Tenant-prefixed page path for facet/sort/pagination, which build links by
+// string-concatenating onto this base (so they stay inside a path-routed
+// tenant). `basePath` itself stays unprefixed for the SEO canonical `path`,
+// breadcrumbs, and EmptyState — those prefix on their own via withBase.
+const linkBase = withBase(Astro.locals.basePath, basePath);
+const crumbs = [
+  { label: tenant.displayName, href: "/" },
+  { label: collection.title, href: basePath },
+];
+const heroImg = collection.image;
+const desc = collection.description_text || collection.description_html?.replace(/<[^>]+>/g, "");
+---
+<Layout
+  title={collection.seo.title || collection.title}
+  description={collection.seo.description || (desc ? truncate(desc, 160) : `Shop ${collection.title} at ${tenant.displayName}.`)}
+  path={basePath}
+  jsonLd={[
+    breadcrumbLd(crumbs, canonicalBase),
+    itemListLd(products, canonicalBase, (page - 1) * pageSize),
+  ]}
+>
+  {/* Collection hero */}
+  <header class="bg-[var(--color-primary)] text-[var(--color-primary-contrast)]">
+    <div class="container-prose grid gap-6 py-[clamp(2.5rem,6vw,4.5rem)] md:grid-cols-[1fr_auto] md:items-end">
+      <div data-reveal>
+        <p class="eyebrow mb-3 !text-[color-mix(in_srgb,var(--color-primary-contrast)_70%,transparent)]">
+          Collection
+        </p>
+        <h1 class="display-xl">
+          {collection.title}
+        </h1>
+        {desc && (
+          <p class="mt-4 max-w-prose text-[1.05rem] text-[color-mix(in_srgb,var(--color-primary-contrast)_82%,transparent)]">
+            {truncate(desc, 220)}
+          </p>
+        )}
+      </div>
+      {heroImg && (
+        <div class="hidden w-48 overflow-hidden rounded-[var(--radius-md)] md:block" data-reveal>
+          <Img
+            src={heroImg.url}
+            rehosted={heroImg.rehosted}
+            seed={heroImg.id ?? collection.handle}
+            label={collection.title}
+            alt={heroImg.alt ?? collection.title}
+            width={heroImg.width ?? 400}
+            height={heroImg.height ?? 300}
+          />
+        </div>
+      )}
+    </div>
+  </header>
+  <div class="container-prose py-4">
+    <Breadcrumbs crumbs={crumbs} />
+  </div>
+  <div class="container-prose grid gap-10 pb-16 lg:grid-cols-[230px_1fr]">
+    {/* Facets — sticky on desktop; a <details> drawer on mobile. */}
+    <div class="lg:sticky lg:top-24 lg:self-start">
+      <details class="lg:hidden">
+        <summary class="cursor-pointer rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-2.5 font-display text-sm font-medium">
+          Filters & sort
+        </summary>
+        <div class="mt-4">
+          <FacetSidebar facets={facets} query={query} basePath={linkBase} />
+        </div>
+      </details>
+      <div class="hidden lg:block">
+        <FacetSidebar facets={facets} query={query} basePath={linkBase} />
+      </div>
+    </div>
+    <div>
+      <div class="mb-5 flex flex-wrap items-center justify-between gap-3 border-b border-[var(--color-border)] pb-4">
+        <p class="text-sm text-[var(--color-muted)]">
+          {total} {total === 1 ? "item" : "items"}
+        </p>
+        <SortSelect query={query} basePath={linkBase} />
+      </div>
+      <ActiveFilters query={query} basePath={linkBase} />
+      {products.length === 0 ? (
+        <EmptyState
+          title="Nothing matches — yet"
+          body="No pieces fit these filters. Loosen a filter or clear them to see the full collection."
+          ctaLabel="Clear filters"
+          ctaHref={basePath}
+        />
+      ) : (
+        <>
+          <div class="grid grid-cols-2 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+            {products.map((p, i) => (
+              <ProductCard
+                product={p}
+                position={(page - 1) * pageSize + i}
+                list={collection.handle}
+                priority={i < 3 && page === 1}
+              />
+            ))}
+          </div>
+          <Pagination
+            query={query}
+            basePath={linkBase}
+            page={page}
+            pageSize={pageSize}
+            total={total}
+          />
+        </>
+      )}
+    </div>
+  </div>
+</Layout>

package/apps/storefront/src/pages/collections/index.astro ADDED Viewed

@@ -0,0 +1,59 @@
+---
+/**
+ * /collections — the collections directory. Hero + grid of CollectionCards,
+ * one per collection (product counts from the collection record's handles).
+ */
+import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import CollectionCard from "@/components/CollectionCard.astro";
+import EmptyState from "@/components/EmptyState.astro";
+import { breadcrumbLd } from "@/lib/jsonld";
+const { tenant, tot, canonicalBase } = Astro.locals;
+// Commerce-only route: marketing tenants have no catalog surface.
+if (!Astro.locals.features.catalog) return new Response(null, { status: 404 });
+const collections = await tot.listCollections();
+const crumbs = [
+  { label: tenant.displayName, href: "/" },
+  { label: "Collections", href: "/collections" },
+];
+---
+<Layout
+  title="Collections"
+  description={`Browse every collection at ${tenant.displayName}.`}
+  path="/collections"
+  jsonLd={breadcrumbLd(crumbs, canonicalBase)}
+>
+  <div class="container-prose pt-6">
+    <Breadcrumbs crumbs={crumbs} />
+  </div>
+  <header class="container-prose pb-2 pt-8">
+    <p class="eyebrow eyebrow--tick mb-3">The range</p>
+    <h1 class="display-xl">
+      Collections
+    </h1>
+    <p class="mt-5 max-w-[60ch] text-[1.1rem] text-[var(--color-muted)]">
+      Small, considered groupings — each one a way into the catalog.
+    </p>
+  </header>
+  <div class="container-prose pb-[clamp(3rem,7vw,6rem)] pt-8">
+    {collections.length === 0 ? (
+      <EmptyState
+        title="Nothing here yet"
+        body="Collections are on their way. In the meantime, browse the full catalog."
+        ctaLabel="Back home"
+        ctaHref="/"
+      />
+    ) : (
+      <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        {collections.map((c) => (
+          <CollectionCard collection={c} productCount={c.product_handles.length} />
+        ))}
+      </div>
+    )}
+  </div>
+</Layout>