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

@tokenoftrust/storefront-runner 1.3.2

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 (310) hide show

package/apps/storefront/src/pages/dashboard/[appDomain]/team.astro ADDED Viewed

@@ -0,0 +1,154 @@
+---
+/**
+ * /dashboard/<appDomain>/team — a vendor's developer team + invite-by-email
+ * (#8425 Stage 0).
+ *
+ * Guarded by the signed-in session (membership for this appDomain). The page is a
+ * thin client over two session-authed endpoints:
+ *   GET  /api/grants/team-members?tenant=<appDomain>  → current developer invites
+ *   POST /api/grants/team-invite   {tenant, email}    → invite a developer
+ * Both re-check membership server-side; the appDomain here is carried from the
+ * guarded route, and every call is authorized by the `tot_session` cookie.
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { membershipFor } from "@/lib/dashboard/tenantSelection";
+const cspNonce = Astro.locals.cspNonce;
+const appDomain = decodeURIComponent(Astro.params.appDomain ?? "");
+const session = await readViewerSession(Astro);
+if (!session) {
+  return Astro.redirect(
+    `/auth/login?next=${encodeURIComponent(`/dashboard/${appDomain}/team`)}`,
+    302,
+  );
+}
+// Member OR ToT-staff admitted via an explicit vendor selection (distinct path).
+const membership = membershipFor(session.tenants, appDomain, {
+  selection: session.staffSelection,
+  nowSeconds: Math.floor(Date.now() / 1000),
+});
+if (!membership) {
+  return Astro.redirect("/dashboard", 302);
+}
+// #8453 (`staff-can-invite-governed`, REVERSING the earlier members-only block):
+// a ToT-staff viewer admitted via an explicit vendor selection may now invite too —
+// the write endpoint mints a signed broker assertion from their session email and
+// tot20 verifies it to permit the invite. So the form shows for member OR staff
+// (everyone admitted to this page). `isRealMember` is kept only to tailor the copy.
+const isRealMember = !!membershipFor(session.tenants, appDomain);
+const backHref = `/dashboard/${encodeURIComponent(appDomain)}`;
+---
+<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>Team — {appDomain}</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; padding: 2.5rem 1.25rem; background: #f5f4f0; color: #1c1c1c; }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      main { max-width: 44rem; margin-inline: auto; }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f66; margin: 0 0 .5rem; }
+      h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
+      h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: #777; margin: 2rem 0 .6rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      .card { background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1.25rem; }
+      @media (prefers-color-scheme: dark) { .card { background: #1e1e28; border-color: #33333f; } }
+      label { display: block; font-weight: 600; font-size: .82rem; margin: 0 0 .4rem; }
+      label[for=role], label[for=note] { margin-top: .9rem; }
+      input[type=email], select, textarea { width: 100%; padding: .7rem .8rem; font-size: 1rem; border-radius: 9px;
+        border: 1px solid #cfccc4; background: #fff; color: inherit; font-family: inherit; }
+      select { margin-bottom: .2rem; }
+      textarea { min-height: 4.5rem; resize: vertical; line-height: 1.4; }
+      @media (prefers-color-scheme: dark) { input[type=email], select, textarea { background: #14141a; border-color: #40404d; } }
+      button { margin-top: 1rem; padding: .7rem 1.1rem; border: 0; border-radius: 9px; background: #1a1a1a;
+        color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; }
+      @media (prefers-color-scheme: dark) { button { background: #ececf1; color: #14141a; } }
+      button:disabled { opacity: .5; cursor: default; }
+      .rowbtn { margin: 0; padding: .3rem .6rem; font-size: .78rem; background: transparent; color: inherit;
+        border: 1px solid #cfccc4; border-radius: 7px; font-weight: 600; }
+      @media (prefers-color-scheme: dark) { .rowbtn { border-color: #40404d; } }
+      .rowbtn:hover:not(:disabled) { border-color: #b7d0ff; }
+      td.act { text-align: right; white-space: nowrap; }
+      table { width: 100%; border-collapse: collapse; }
+      th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid #e6e4de; font-size: .9rem; }
+      @media (prefers-color-scheme: dark) { th, td { border-color: #33333f; } }
+      th { font: 600 .7rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; color: #999; }
+      .msg { margin-top: 1rem; font-size: .9rem; border-radius: 9px; padding: .6rem .8rem; display: none; }
+      .msg.ok { display: block; background: #eaf7ee; border: 1px solid #bfe4c9; color: #1b6b34; }
+      .msg.err { display: block; background: #fdecec; border: 1px solid #f5c2c2; color: #9a1c1c; }
+      @media (prefers-color-scheme: dark) {
+        .msg.ok { background: #16311f; border-color: #2f6b41; color: #a7e0ba; }
+        .msg.err { background: #3a1f22; border-color: #6b2f34; color: #f6b9b9; }
+      }
+      .muted { color: #9a9a9a; font-size: .85rem; }
+      .who { margin-top: 2rem; font-size: .82rem; color: #8a8a8a; }
+      .who a, a.back { color: inherit; }
+      .linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; margin: 0; }
+      .logout { display: inline; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class="eyebrow"><a class="back" href={backHref}>← {appDomain}</a></p>
+      <h1>Team</h1>
+      <p class="sub">Developers with access to <strong>{appDomain}</strong>.{isRealMember
+        ? " Invite by email — they'll get a branded sign-in link and become eligible on this vendor."
+        : " Viewing as Token of Trust staff — invite by email to grant a developer access."}</p>
+      <h2>Invite a developer</h2>
+      <div class="card">
+        <label for="email">Developer email</label>
+        <input id="email" type="email" placeholder="dev@agency.com" autocomplete="off" />
+        {!isRealMember && (
+          <>
+            {/* #8453: ToT staff may grant any role; a plain member is developer-only
+                (no selector — tot20 ignores a member's role and pins to developer).
+                Values are tot20's role vocabulary: developer | appAdmin | appOwner. */}
+            <label for="role">Role</label>
+            <select id="role">
+              <option value="developer" selected>Developer</option>
+              <option value="appAdmin">Admin</option>
+              <option value="appOwner">Owner</option>
+            </select>
+          </>
+        )}
+        <label for="note">Note to the developer (optional)</label>
+        <textarea id="note" rows="3" maxlength="1000"
+          placeholder="Add a personal message — they'll see it in the invite email."></textarea>
+        <button id="inviteBtn" type="button">Send invite</button>
+        <div id="msg" class="msg"></div>
+      </div>
+      <h2>Current developers</h2>
+      <div class="card">
+        <table>
+          <thead><tr><th>Developer</th><th>Roles</th><th></th></tr></thead>
+          <tbody id="members" data-tenant={appDomain}><tr><td colspan="3" class="muted">Loading…</td></tr></tbody>
+        </table>
+      </div>
+      <p class="who">Signed in as {session.email} ·
+        <a href="/dashboard">Switch vendor</a> ·
+        <form class="logout" method="post" action="/api/auth/logout"><button type="submit" class="linkbtn">Sign out</button></form></p>
+    </main>
+    <!--
+      Client behavior is a STATIC same-origin file (public/js/dashboard-team.js),
+      referenced via src so the strict CSP allows it through `script-src 'self'` — no
+      nonce, no per-build content-hash. An inline <script> here is blocked: Astro's
+      `is:inline` drops the templated nonce, and a processed inline script would need
+      its hash pinned in cspStaticHashes on every edit. `is:inline` keeps Astro from
+      trying to bundle the external-src tag; `defer` runs it after the DOM parses.
+    -->
+    <script src="/js/dashboard-team.js" is:inline defer></script>
+  </body>
+</html>

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

@@ -0,0 +1,160 @@
+---
+/**
+ * /dashboard — the vendor console entry (#8425 Stage 0).
+ *
+ * Federated: the viewer signed in via ToT (email OTP → offline-verified id_token →
+ * `tot_session`). This page holds NO identity of its own — it reads the session's
+ * tenant memberships and routes per the L3 contract
+ * (docs/architecture/identity-and-authorization.md):
+ *   0 memberships → "nothing to manage"; 1 → straight into that vendor; ≥2 → picker.
+ *
+ * STAGE-0: tot20's id_token currently carries only the one resource signed against,
+ * so this resolves to a single vendor in practice; the picker activates unchanged
+ * once tot20 populates all memberships (flagged to the workstream lead).
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { selectTenant } from "@/lib/dashboard/tenantSelection";
+import { isStaffSession } from "@/lib/dashboard/staffAdmission";
+const cspNonce = Astro.locals.cspNonce;
+const session = await readViewerSession(Astro);
+if (!session) {
+  return Astro.redirect("/auth/login?next=%2Fdashboard", 302);
+}
+// ToT-STAFF viewers reach ANY vendor by explicit SEARCH-and-enter (a distinct
+// path from tenants[] membership). When staff, we always render the hub (their
+// memberships, if any, PLUS a vendor search) and skip the single-membership
+// auto-redirect so they can still search for a vendor they don't belong to.
+const isStaff = isStaffSession(session);
+const selection = selectTenant(session.tenants);
+if (!isStaff && selection.mode === "single") {
+  return Astro.redirect(`/dashboard/${encodeURIComponent(selection.tenant.resource)}`, 302);
+}
+const vendors =
+  selection.mode === "picker"
+    ? selection.tenants
+    : selection.mode === "single"
+      ? [selection.tenant]
+      : [];
+---
+<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>Your stores — 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; padding: 2.5rem 1.25rem; background: #f5f4f0; color: #1c1c1c; }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      main { max-width: 40rem; margin-inline: auto; }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f66; margin: 0 0 .5rem; }
+      h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1.75rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
+      a.vendor { display: flex; align-items: center; justify-content: space-between; text-decoration: none;
+        background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1rem 1.25rem; color: inherit; }
+      @media (prefers-color-scheme: dark) { a.vendor { background: #1e1e28; border-color: #33333f; } }
+      a.vendor:hover { border-color: #b7d0ff; }
+      .name { font-weight: 600; }
+      .role { font: 600 .68rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em;
+        color: #4a6; border: 1px solid currentColor; border-radius: 999px; padding: .2rem .55rem; }
+      .who { margin-top: 2rem; font-size: .82rem; color: #8a8a8a; }
+      .who a { color: inherit; }
+      .linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
+      .logout { display: inline; }
+      .empty { background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1.5rem; }
+      @media (prefers-color-scheme: dark) { .empty { background: #1e1e28; border-color: #33333f; } }
+      /* Staff vendor search */
+      .staff { margin-top: 2.25rem; }
+      h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: #777; margin: 0 0 .3rem; }
+      .staff .hint { color: #8a8a8a; font-size: .85rem; margin: 0 0 .7rem; }
+      .staff .hint code { font: .8em ui-monospace, monospace; background: #ece9e1; color: #4a4a4a;
+        padding: .1em .35em; border-radius: 5px; }
+      @media (prefers-color-scheme: dark) { .staff .hint code { background: #2a2a33; color: #cfcfda; } }
+      .search { position: relative; }
+      #vendorSearch { width: 100%; padding: .75rem .85rem; font-size: 1rem; border-radius: 10px;
+        border: 1px solid #cfccc4; background: #fff; color: inherit; }
+      @media (prefers-color-scheme: dark) { #vendorSearch { background: #14141a; border-color: #40404d; } }
+      #vendorResults { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
+      #vendorResults button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
+        text-align: left; background: #fff; border: 1px solid #e6e4de; border-radius: 10px; padding: .8rem 1rem;
+        color: inherit; font: inherit; cursor: pointer; }
+      @media (prefers-color-scheme: dark) { #vendorResults button { background: #1e1e28; border-color: #33333f; } }
+      #vendorResults button:hover, #vendorResults button:focus-visible { border-color: #b7d0ff; }
+      #vendorResults button:disabled { opacity: .5; cursor: default; }
+      #vendorResults .dn { font-weight: 600; }
+      #vendorResults .ad { font: 600 .68rem/1 ui-monospace, monospace; color: #8a8a8a; }
+      #vendorSearchMsg { margin-top: .6rem; font-size: .88rem; color: #8a8a8a; min-height: 1.1em; }
+      #vendorSearchMsg.err { color: #9a1c1c; }
+      @media (prefers-color-scheme: dark) { #vendorSearchMsg.err { color: #f6b9b9; } }
+      .badge { display: inline-block; font: 600 .6rem/1 ui-monospace, monospace; letter-spacing: .08em;
+        text-transform: uppercase; color: #8a7f66; border: 1px solid currentColor; border-radius: 999px;
+        padding: .18rem .5rem; margin-left: .5rem; vertical-align: middle; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class="eyebrow">Token of Trust</p>
+      <h1>Your stores{isStaff && <span class="badge">ToT staff</span>}</h1>
+      {vendors.length ? (
+        <>
+          <p class="sub">Choose a store to manage its team and preview.</p>
+          <ul>
+            {vendors.map((v) => (
+              <li>
+                <a class="vendor" href={`/dashboard/${encodeURIComponent(v.resource)}`}>
+                  <span class="name">{v.resource}</span>
+                  <span class="role">{v.role}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        !isStaff && (
+          <div class="empty">
+            <p style="margin:0">You're signed in as <strong>{session.email}</strong>, but
+              you don't have access to any store yet. Ask a store's merchant to invite you.</p>
+          </div>
+        )
+      )}
+      {isStaff && (
+        <section class="staff">
+          <h2>Find a store</h2>
+          <p class="hint">As Token of Trust staff you can enter any store's console. Search by
+            domain, then select one to enter — every admission is logged.</p>
+          <p class="hint">Tip: <code>^</code> matches the start, <code>$</code> the end — e.g.
+            <code>^acme.com$</code> for an exact match, <code>acme$</code> to end with “acme”.</p>
+          <div class="search">
+            <input id="vendorSearch" type="text" placeholder="acme.com"
+              autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
+              aria-label="Search stores by domain" />
+            <ul id="vendorResults"></ul>
+            <p id="vendorSearchMsg" aria-live="polite"></p>
+          </div>
+        </section>
+      )}
+      <p class="who">Signed in as {session.email} ·
+        <form class="logout" method="post" action="/api/auth/logout"><button type="submit" class="linkbtn">Sign out</button></form></p>
+    </main>
+    <!--
+      Staff vendor-search behavior is a STATIC same-origin file
+      (public/js/dashboard-vendor-search.js), referenced via src so the strict CSP
+      allows it through `script-src 'self'` — no nonce, no per-build content-hash
+      (see public/js/dashboard-team.js for the proven pattern). The file no-ops when
+      #vendorSearch is absent (non-staff), so it's safe to always include.
+    -->
+    <script src="/js/dashboard-vendor-search.js" is:inline defer></script>
+  </body>
+</html>

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

@@ -0,0 +1,290 @@
+---
+/**
+ * Homepage — composed from Storyblok blocks (local fallback in Phase 1).
+ * Editorial composition comes from the ContentProvider; product/collection data
+ * is resolved from the ToTClient. All async data resolution happens HERE in the
+ * frontmatter (Astro templates can't host multi-statement async arrows), then
+ * the template renders simple typed view-models.
+ */
+import Layout from "@/layouts/Layout.astro";
+import Section from "@/components/Section.astro";
+import Hero from "@/components/home/Hero.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import CollectionCard from "@/components/CollectionCard.astro";
+import Img from "@/components/Img.astro";
+import MarketingBlocks from "@/components/marketing/MarketingBlocks.astro";
+import { withBase } from "@/lib/basePath";
+import { rawHtmlResponse } from "@/lib/rawMarketingHtml";
+import type { CatalogCollection, CatalogProduct } from "@tot/public-runtime";
+import {
+  isMarketingBlock,
+  type HeroBlock,
+  type EditorialBlock,
+  type NewsletterBlock,
+  type PromoTilesBlock,
+  type MarketingBlock,
+} from "@/lib/storyblok/content-model";
+const { tenant, tot, content, basePath, features } = Astro.locals;
+const marketing = !features.catalog;
+// Raw-HTML home (vendor-injected): serve the tenant's own self-contained
+// document VERBATIM, bypassing the block Layout entirely. Its inline
+// <style>/<script> get this request's CSP nonce so the strict policy still
+// allows them. This route stays fully inside Astro — middleware already applied
+// tenant resolution + canonical host, and on the way out applies security
+// headers, the CSP, and (in prod) the edge page cache. SEO title/meta/canonical/
+// OpenGraph/JSON-LD come from the document's own <head>. The homepage `/` is in
+// the marketing sitemap (sitemap.xml.ts).
+//
+// Served regardless of siteType: a tenant that ships home.html gets its raw
+// marketing home whether or not commerce is on. This is the HYBRID tenant —
+// pixel-perfect marketing chrome at `/` surrounding a live commerce core at
+// /collections + /products/* (see playbook/site-migration/commerce-handoff.md §1
+// and product-boundaries.md). Commerce tenants with no home.html fall through to
+// the block-composed home below, unchanged. Mirrors the raw-subpage path in
+// [...slug].astro (getPageHtml is already siteType-agnostic).
+{
+  const rawHtml = await content.getHomeHtml();
+  if (rawHtml) {
+    // Shared chrome: if the tenant ships a chrome.html wrapper AND this home is a
+    // body-only fragment, rawHtmlResponse splices it in; a full document serves
+    // verbatim (backward-compatible).
+    const chromeWrapper = await content.getChromeHtml();
+    return rawHtmlResponse(rawHtml, { nonce: Astro.locals.cspNonce, basePath, chromeWrapper });
+  }
+}
+const home = await content.getHome();
+// Marketing tenants (no catalog) compose the homepage from marketing blocks and
+// skip ALL product/collection resolution below.
+const marketingBlocks: MarketingBlock[] = marketing
+  ? home.blocks.filter(isMarketingBlock)
+  : [];
+const collections = marketing ? [] : await tot.listCollections();
+// --- Resolve each block into a typed, render-ready view-model -----------------
+type Resolved =
+  | { kind: "hero"; block: HeroBlock; product: CatalogProduct | null }
+  | { kind: "promo_tiles"; title?: string; tiles: PromoTilesBlock["tiles"] }
+  | { kind: "collections"; title?: string; cols: CatalogCollection[] }
+  | { kind: "products"; title?: string; products: CatalogProduct[] }
+  | { kind: "editorial"; block: EditorialBlock }
+  | { kind: "newsletter"; block: NewsletterBlock };
+async function resolveProducts(
+  source: "featured" | "newest",
+  handles: string[] | undefined,
+  limit: number,
+): Promise<CatalogProduct[]> {
+  if (handles?.length) {
+    const all = await Promise.all(handles.map((h) => tot.getProductByHandle(h)));
+    return all
+      .filter((p): p is CatalogProduct => !!p && p.status === "active")
+      .slice(0, limit);
+  }
+  if (source === "newest") {
+    const { products } = await tot.listProducts({ sort: "newest", pageSize: limit });
+    return products;
+  }
+  return tot.getFeatured(limit);
+}
+const resolved: Resolved[] = [];
+for (const block of marketing ? [] : home.blocks) {
+  switch (block.component) {
+    case "hero": {
+      let product: CatalogProduct | null = null;
+      if (block.featureCollection) {
+        const col = collections.find((c) => c.handle === block.featureCollection);
+        const firstHandle = col?.product_handles[0];
+        if (firstHandle) product = await tot.getProductByHandle(firstHandle);
+      }
+      resolved.push({ kind: "hero", block, product });
+      break;
+    }
+    case "promo_tiles": {
+      if (block.tiles?.length) {
+        resolved.push({ kind: "promo_tiles", title: block.title, tiles: block.tiles });
+      }
+      break;
+    }
+    case "featured_collections": {
+      const handles = block.handles?.length
+        ? block.handles
+        : collections.map((c) => c.handle);
+      const cols = handles
+        .map((h) => collections.find((c) => c.handle === h))
+        .filter((c): c is CatalogCollection => !!c);
+      resolved.push({ kind: "collections", title: block.title, cols });
+      break;
+    }
+    case "featured_products": {
+      const products = await resolveProducts(
+        block.source,
+        block.handles,
+        block.limit ?? 4,
+      );
+      resolved.push({ kind: "products", title: block.title, products });
+      break;
+    }
+    case "editorial":
+      resolved.push({ kind: "editorial", block });
+      break;
+    case "newsletter":
+      resolved.push({ kind: "newsletter", block });
+      break;
+  }
+}
+---
+<Layout
+  title={home.seoTitle ?? tenant.displayName}
+  description={home.seoDescription}
+  path="/"
+  ogType="website"
+  fullBleed={marketing}
+>
+  {marketing && <MarketingBlocks blocks={marketingBlocks} basePath={basePath} />}
+  {
+    !marketing && resolved.map((r) => {
+      if (r.kind === "hero") {
+        return <Hero block={r.block} featureProduct={r.product} />;
+      }
+      if (r.kind === "promo_tiles") {
+        return (
+          <Section title={r.title} eyebrow="Featured" tone="bg">
+            <div
+              class:list={[
+                "grid gap-5",
+                r.tiles.length >= 3 ? "sm:grid-cols-3" : "sm:grid-cols-2",
+              ]}
+            >
+              {r.tiles.map((t) => (
+                <a
+                  href={withBase(basePath, t.href)}
+                  class="group relative block aspect-[16/9] overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)]"
+                >
+                  {t.image && (
+                    <img
+                      src={t.image}
+                      alt={t.label}
+                      loading="lazy"
+                      class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                  )}
+                  <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4 font-display text-lg font-semibold text-white">
+                    {t.label}
+                  </span>
+                </a>
+              ))}
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "collections") {
+        return (
+          <Section title={r.title} eyebrow="Collections" tone="bg">
+            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+              {r.cols.map((c) => (
+                <CollectionCard collection={c} productCount={c.product_handles.length} />
+              ))}
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "products") {
+        return (
+          <Section title={r.title} eyebrow="Shop" tone="surface">
+            <div class="grid grid-cols-2 gap-5 lg:grid-cols-4">
+              {r.products.map((p, i) => (
+                <ProductCard product={p} position={i} list={r.title} />
+              ))}
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "editorial") {
+        const b = r.block;
+        const right = b.align !== "left";
+        return (
+          <Section tone="bg">
+            <div
+              class:list={[
+                "grid items-center gap-10 md:grid-cols-2",
+                right ? "" : "md:[&>*:first-child]:order-2",
+              ]}
+            >
+              <div data-reveal>
+                {b.eyebrow && <p class="eyebrow eyebrow--tick mb-4">{b.eyebrow}</p>}
+                <h2 class="display-md">
+                  {b.title}
+                </h2>
+                <div class="rte mt-5 text-[var(--color-muted)]" set:html={b.body_html} />
+                {b.ctaLabel && b.ctaHref && (
+                  <a
+                    href={withBase(basePath, b.ctaHref)}
+                    class="link-accent mt-7 inline-block pb-0.5 font-display text-sm font-medium"
+                  >
+                    {b.ctaLabel} →
+                  </a>
+                )}
+              </div>
+              <div data-reveal>
+                <div class="overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-md)]">
+                  <Img
+                    seed={b.imageSeed ?? b.title}
+                    label={b.title}
+                    alt=""
+                    width={1000}
+                    height={750}
+                    sizes="(min-width:768px) 48vw, 100vw"
+                    class="h-full w-full object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "newsletter") {
+        const b = r.block;
+        return (
+          <Section tone="surface" id="newsletter">
+            <div class="mx-auto max-w-xl text-center" data-reveal>
+              <h2 class="display-md">
+                {b.title}
+              </h2>
+              {b.body && <p class="mt-3 text-[var(--color-muted)]">{b.body}</p>}
+              <form
+                action={withBase(basePath, "/api/newsletter")}
+                method="post"
+                class="mx-auto mt-7 flex max-w-md flex-col gap-3 sm:flex-row"
+              >
+                <input type="hidden" name="source" value="home" />
+                <label class="sr-only" for="home-news-email">Email address</label>
+                <input
+                  id="home-news-email"
+                  type="email"
+                  name="email"
+                  required
+                  placeholder={b.placeholder ?? "you@example.com"}
+                  class="flex-1 rounded-full border border-[var(--color-border)] bg-[var(--color-bg)] px-5 py-3 text-[var(--color-text)] placeholder:text-[var(--color-muted)]"
+                />
+                <button
+                  type="submit"
+                  class="rounded-full bg-[var(--color-primary)] px-6 py-3 font-display text-sm font-medium text-[var(--color-primary-contrast)] transition-transform hover:-translate-y-0.5"
+                >
+                  {b.ctaLabel ?? "Subscribe"}
+                </button>
+              </form>
+            </div>
+          </Section>
+        );
+      }
+      return null;
+    })
+  }
+</Layout>