@tokenoftrust/storefront-runner 0.1.0

package/apps/storefront/src/components/nav/Header.astro

@@ -0,0 +1,190 @@
+---
+/**
+ * <Header> — sticky site header: optional announcement bar, wordmark logo,
+ * desktop nav with CSS-only mega-menus (focus-within / group-hover, no JS),
+ * search typeahead island, and a mobile hamburger that mounts the MobileNav
+ * island. Theme-agnostic (CSS-var-backed utilities only).
+ */
+import type { SiteChrome } from "@/lib/storyblok/content-model";
+import SearchTypeahead from "@/components/islands/SearchTypeahead.tsx";
+import MobileNav from "@/components/islands/MobileNav.tsx";
+import { mergeTheme } from "@/themes/schema";
+import { referenceTheme } from "@/themes/reference";
+import { withBase } from "@/lib/basePath";
+import { readViewerSession } from "@/lib/auth/route";
+
+interface Props {
+  chrome: SiteChrome;
+}
+
+const { chrome } = Astro.props;
+const { tenant, basePath, features } = Astro.locals;
+
+// Simple, always-visible auth entry point: "Dashboard" when a session exists,
+// "Sign in" otherwise. Without this there's no discoverable path from the
+// storefront into sign-in / the vendor dashboard (#8425). On login-gated hosts
+// the middleware already resolved the viewer (locals.viewer); reuse it and only
+// read the session KV on open hosts where the gate never ran.
+const viewer = Astro.locals.viewer ?? (await readViewerSession(Astro));
+// Signed-out "Sign in" carries the current path as `next`, so after the email-code
+// round-trip the visitor lands back where they were (e.g. the gated tenant page
+// they were trying to reach) instead of the site root.
+const nextParam = encodeURIComponent(Astro.url.pathname + Astro.url.search);
+const authHref = viewer ? "/dashboard" : `/auth/login?next=${nextParam}`;
+const authLabel = viewer ? "Dashboard" : "Sign in";
+
+// Marketing tenants swap the commerce search/saved controls for conversion CTAs.
+const headerCtas = chrome.headerCtas ?? [];
+const ctaClass = (variant?: string) =>
+  variant === "secondary" || variant === "ghost"
+    ? "inline-flex items-center rounded-full border border-current px-4 py-2 font-display text-sm font-medium transition-opacity hover:opacity-80"
+    : "inline-flex items-center rounded-full bg-accent px-4 py-2 font-display text-sm font-medium text-[var(--color-primary-contrast)] transition-transform hover:-translate-y-0.5";
+
+// Nav handed to the (client-rendered) MobileNav island with hrefs pre-prefixed,
+// so it doesn't depend on the runtime base path inside the island.
+const mobileNav = chrome.nav.map((item) => ({
+  ...item,
+  href: withBase(basePath, item.href),
+  children: item.children?.map((child) => ({
+    ...child,
+    href: withBase(basePath, child.href),
+  })),
+}));
+
+// Per-vendor header treatment from the theme file: a "dark" header renders the
+// bar in the primary color carrying the light logo (e.g. Giant Vapes' navy +
+// white logo); otherwise a light bar with the wordmark.
+const brand = mergeTheme(referenceTheme, tenant.theme_tokens).brand;
+const dark = brand.headerVariant === "dark";
+const logo = dark ? brand.logoLight : brand.logoDark;
+const showLogo = dark && !!logo && /^(https?:|\/)/.test(logo);
+---
+
+<header class="sticky top-0 z-40">
+  {
+    chrome.announcement && (
+      <div class="bg-primary text-primary-contrast">
+        <p class="container-prose py-1.5 text-center font-mono text-[0.72rem] tracking-[0.08em]">
+          {chrome.announcement}
+        </p>
+      </div>
+    )
+  }
+
+  <div
+    class:list={[
+      "border-b backdrop-blur",
+      dark ? "border-[color-mix(in_srgb,var(--color-primary-contrast)_18%,var(--color-primary))] bg-primary text-primary-contrast" : "border-border bg-surface/95 text-text",
+    ]}
+  >
+    <div class="container-prose flex h-16 items-center justify-between gap-4">
+      <!-- Logo / wordmark -->
+      <a
+        href={withBase(basePath, "/")}
+        class="flex shrink-0 items-center transition-opacity hover:opacity-80"
+        aria-label={tenant.displayName}
+      >
+        {showLogo ? (
+          <img src={logo} alt={tenant.displayName} class="h-10 w-auto max-w-[160px] object-contain" width="160" height="64" />
+        ) : (
+          <span class="font-display text-lg font-bold tracking-tight">{tenant.displayName}</span>
+        )}
+      </a>
+
+      <!-- Desktop nav -->
+      <nav aria-label="Primary" class="hidden md:block">
+        <ul class="flex items-center gap-7">
+          {
+            chrome.nav.map((item) =>
+              item.children && item.children.length > 0 ? (
+                <li class="group relative">
+                  <a
+                    href={withBase(basePath, item.href)}
+                    class="inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent group-focus-within:text-accent"
+                    aria-haspopup="true"
+                  >
+                    {item.label}
+                    <span aria-hidden="true" class="text-[0.7em] opacity-60">
+                      ▾
+                    </span>
+                  </a>
+                  <div class="invisible absolute left-0 top-full z-50 min-w-56 translate-y-1 opacity-0 transition-all duration-150 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100">
+                    <ul class="mt-1 grid gap-0.5 rounded-md border border-border bg-surface p-3 shadow-md">
+                      {item.children.map((child) => (
+                        <li>
+                          <a
+                            href={withBase(basePath, child.href)}
+                            class="block rounded-sm px-3 py-1.5 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
+                          >
+                            {child.label}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </li>
+              ) : (
+                <li>
+                  <a
+                    href={withBase(basePath, item.href)}
+                    class="py-2 text-sm transition-colors hover:text-accent"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ),
+            )
+          }
+        </ul>
+      </nav>
+
+      <!-- Right cluster: search + saved (commerce) or CTAs (marketing) + mobile menu -->
+      <div class="flex flex-1 items-center justify-end gap-2 md:max-w-sm">
+        {features.productSearch && <SearchTypeahead client:idle />}
+        {
+          features.savedItems && (
+            <a
+              href={withBase(basePath, "/saved")}
+              class="relative grid h-9 w-9 shrink-0 place-items-center rounded-full transition-colors hover:text-accent"
+              aria-label="Saved items"
+            >
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
+                <path d="M12 21s-7.5-4.6-10-9.2C.4 8.6 2 5 5.5 5 8 5 9.4 6.6 12 9c2.6-2.4 4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.4 12 21 12 21z" />
+              </svg>
+              <span
+                data-wishlist-count
+                hidden
+                class="absolute -right-0.5 -top-0.5 grid h-4 min-w-4 place-items-center rounded-full bg-[var(--color-sale)] px-1 font-mono text-[0.6rem] font-medium text-[var(--color-primary-contrast)]"
+              />
+            </a>
+          )
+        }
+        {
+          headerCtas.length > 0 && (
+            <div class="hidden items-center gap-2 sm:flex">
+              {headerCtas.map((cta) => (
+                <a href={withBase(basePath, cta.href)} class={ctaClass(cta.variant)}>
+                  {cta.label}
+                </a>
+              ))}
+            </div>
+          )
+        }
+        <!-- Auth entry point: Sign in / Dashboard (#8425) -->
+        <a
+          href={authHref}
+          class="inline-flex shrink-0 items-center rounded-full border border-current px-4 py-2 font-display text-sm font-medium transition-opacity hover:opacity-80"
+        >
+          {authLabel}
+        </a>
+        <div class="md:hidden">
+          <MobileNav
+            client:idle
+            nav={mobileNav}
+            announcement={chrome.announcement}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</header>

package/apps/storefront/src/components/plp/ActiveFilters.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * Active-filter chips (Shopify-style). Shows what's applied as removable pills
+ * above the grid — each chip is a link that drops exactly one filter, so it's
+ * URL-addressable and back-button safe like the rest of faceting (src/lib/url.ts).
+ */
+import type { ListProductsQuery } from "@tot/public-runtime";
+import { toggleFacet, buildQueryString } from "@/lib/url";
+
+interface Props {
+  query: ListProductsQuery;
+  basePath: string;
+}
+const { query, basePath } = Astro.props;
+
+type Chip = { label: string; href: string };
+const chips: Chip[] = [];
+
+// Option + tag facet values (toggling an active value removes it).
+for (const [name, values] of Object.entries(query.filters ?? {})) {
+  for (const v of values) {
+    chips.push({
+      label: name === "tags" ? `#${v}` : `${name}: ${v}`,
+      href: basePath + toggleFacet(query, name, v),
+    });
+  }
+}
+
+// Price range.
+if (query.priceMin != null || query.priceMax != null) {
+  const lo = query.priceMin != null ? `$${query.priceMin}` : "$0";
+  const hi = query.priceMax != null ? `$${query.priceMax}` : "any";
+  const { priceMin, priceMax, ...rest } = query;
+  chips.push({ label: `${lo}–${hi}`, href: basePath + buildQueryString(rest) });
+}
+
+// Availability (the meaningful filter is "in-stock"; "all" is the default).
+if (query.availability === "in-stock") {
+  const { availability, ...rest } = query;
+  chips.push({ label: "In stock", href: basePath + buildQueryString(rest) });
+}
+
+const clearHref =
+  basePath +
+  buildQueryString({ sort: query.sort, pageSize: query.pageSize });
+---
+
+{
+  chips.length > 0 && (
+    <div class="mb-5 flex flex-wrap items-center gap-2" data-active-filters>
+      <span class="sr-only">Active filters:</span>
+      {chips.map((chip) => (
+        <a
+          href={chip.href}
+          rel="nofollow"
+          class="group inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-1 pl-3 pr-2 text-xs transition-colors hover:border-[var(--color-accent-ink)] hover:text-[var(--color-accent-ink)]"
+        >
+          <span>{chip.label}</span>
+          <span
+            aria-hidden="true"
+            class="grid h-4 w-4 place-items-center rounded-full text-[var(--color-muted)] transition-colors group-hover:bg-[var(--color-accent-ink)] group-hover:text-[var(--color-primary-contrast)]"
+          >
+            ×
+          </span>
+          <span class="sr-only">Remove filter</span>
+        </a>
+      ))}
+      {chips.length > 1 && (
+        <a
+          href={clearHref}
+          rel="nofollow"
+          class="ml-1 text-xs text-[var(--color-muted)] underline underline-offset-2 hover:text-[var(--color-accent-ink)]"
+        >
+          Clear all
+        </a>
+      )}
+    </div>
+  )
+}

package/apps/storefront/src/components/plp/FacetSidebar.astro

@@ -0,0 +1,146 @@
+---
+/**
+ * Faceted filtering UI (brief §5). URL-ADDRESSABLE and back-button safe: every
+ * facet is a real link that toggles a querystring param (no JS required for
+ * filtering). The optional mobile drawer toggle is the only island.
+ *
+ * Encoding handled by src/lib/url.ts (opt.<Name>=<value>, tag=, price, avail).
+ */
+import type { Facet, ListProductsQuery } from "@tot/public-runtime";
+import { toggleFacet, buildQueryString } from "@/lib/url";
+
+interface Props {
+  facets: Facet[];
+  query: ListProductsQuery;
+  basePath: string; // e.g. /collections/bestsellers
+}
+const { facets, query, basePath } = Astro.props;
+
+const selected = (name: string, value: string) =>
+  (query.filters?.[name] ?? []).includes(value);
+
+// Order facets: option facets first, then tags, availability last.
+const ordered = [...facets].sort((a, b) => {
+  const rank = (n: string) => (n === "availability" ? 2 : n === "tags" ? 1 : 0);
+  return rank(a.name) - rank(b.name);
+});
+
+const hasActiveFilters =
+  !!query.filters && Object.keys(query.filters).length > 0;
+
+const clearHref =
+  basePath +
+  buildQueryString({ sort: query.sort, q: query.q, pageSize: query.pageSize });
+---
+
+<aside aria-label="Filters" class="text-sm">
+  <div class="mb-4 flex items-center justify-between">
+    <h2 class="eyebrow !text-[var(--color-text)]">Filter</h2>
+    {hasActiveFilters && (
+      <a href={clearHref} class="text-xs text-[var(--color-muted)] underline underline-offset-2 hover:text-[var(--color-accent-ink)]">
+        Clear all
+      </a>
+    )}
+  </div>
+
+  <div class="space-y-7">
+    {
+      ordered.map((facet) => (
+        <fieldset>
+          <legend class="mb-2.5 font-display text-[0.95rem] font-medium">
+            {facet.name === "tags"
+              ? "Tags"
+              : facet.name === "availability"
+              ? "Availability"
+              : facet.name}
+          </legend>
+          <ul class="space-y-1.5">
+            {facet.values.map((fv) => {
+              const isSel = selected(facet.name, fv.value);
+              const href =
+                basePath + toggleFacet(query, facet.name, fv.value);
+              return (
+                <li>
+                  <a
+                    href={href}
+                    rel="nofollow"
+                    aria-pressed={isSel}
+                    class:list={[
+                      "flex items-center justify-between gap-3 rounded-[var(--radius-sm)] px-2 py-1 transition-colors",
+                      isSel
+                        ? "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]"
+                        : "hover:bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]",
+                    ]}
+                  >
+                    <span class="flex items-center gap-2">
+                      <span
+                        aria-hidden="true"
+                        class:list={[
+                          "grid h-3.5 w-3.5 place-items-center rounded-[2px] border",
+                          isSel
+                            ? "border-[var(--color-primary-contrast)] bg-[var(--color-primary-contrast)] text-[var(--color-primary)]"
+                            : "border-[var(--color-border)]",
+                        ]}
+                      >
+                        {isSel ? "✓" : ""}
+                      </span>
+                      {fv.value === "all" ? "All items" : fv.value}
+                    </span>
+                    <span class:list={["text-xs", isSel ? "opacity-80" : "text-[var(--color-muted)]"]}>
+                      {fv.count}
+                    </span>
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </fieldset>
+      ))
+    }
+
+    {/* Price range — GET form, preserves other params via hidden inputs. */}
+    <form method="get" action={basePath} class="border-t border-[var(--color-border)] pt-5">
+      <fieldset>
+        <legend class="mb-2.5 font-display text-[0.95rem] font-medium">Price</legend>
+        {query.sort && <input type="hidden" name="sort" value={query.sort} />}
+        {query.availability && query.availability !== "all" && (
+          <input type="hidden" name="availability" value={query.availability} />
+        )}
+        {Object.entries(query.filters ?? {}).flatMap(([name, values]) =>
+          values.map((v) => (
+            <input type="hidden" name={name === "tags" ? "tag" : `opt.${name}`} value={v} />
+          )),
+        )}
+        <div class="flex items-center gap-2">
+          <label class="sr-only" for="priceMin">Minimum price</label>
+          <input
+            id="priceMin"
+            type="number"
+            name="priceMin"
+            min="0"
+            placeholder="Min"
+            value={query.priceMin ?? ""}
+            class="w-20 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1"
+          />
+          <span aria-hidden="true" class="text-[var(--color-muted)]">–</span>
+          <label class="sr-only" for="priceMax">Maximum price</label>
+          <input
+            id="priceMax"
+            type="number"
+            name="priceMax"
+            min="0"
+            placeholder="Max"
+            value={query.priceMax ?? ""}
+            class="w-20 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1"
+          />
+          <button
+            type="submit"
+            class="rounded-[var(--radius-sm)] bg-[var(--color-primary)] px-3 py-1 text-xs font-medium text-[var(--color-primary-contrast)]"
+          >
+            Go
+          </button>
+        </div>
+      </fieldset>
+    </form>
+  </div>
+</aside>

package/apps/storefront/src/components/plp/Pagination.astro

@@ -0,0 +1,99 @@
+---
+/**
+ * Numbered pagination (SEO-friendly, brief §5 default) + a "Load more" link.
+ * Both are plain anchors carrying the full query, so they're crawlable and
+ * back-button safe. "Load more" simply links to the next page; with JS it could
+ * be progressively enhanced to append, but the no-JS path stays correct.
+ */
+import type { ListProductsQuery } from "@tot/public-runtime";
+import { buildQueryString } from "@/lib/url";
+
+interface Props {
+  query: ListProductsQuery;
+  basePath: string;
+  page: number;
+  pageSize: number;
+  total: number;
+}
+const { query, basePath, page, pageSize, total } = Astro.props;
+const pageCount = Math.max(1, Math.ceil(total / pageSize));
+if (pageCount <= 1) {
+  // nothing to render
+}
+
+const href = (p: number) => basePath + buildQueryString(query, { page: p });
+
+// Compact page-number window.
+const windowSize = 5;
+let start = Math.max(1, page - Math.floor(windowSize / 2));
+let end = Math.min(pageCount, start + windowSize - 1);
+start = Math.max(1, end - windowSize + 1);
+const pages = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+const hasNext = page < pageCount;
+---
+
+{pageCount > 1 && (
+  <nav aria-label="Pagination" class="mt-12 flex flex-col items-center gap-6">
+    {hasNext && (
+      <a
+        href={href(page + 1)}
+        rel="next"
+        class="rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-8 py-3 font-display text-sm font-medium transition-colors hover:border-[var(--color-accent)] hover:text-[var(--color-accent-ink)]"
+      >
+        Load more
+      </a>
+    )}
+
+    <ul class="flex items-center gap-1">
+      <li>
+        <a
+          href={href(Math.max(1, page - 1))}
+          rel="prev"
+          aria-label="Previous page"
+          aria-disabled={page === 1}
+          class:list={[
+            "grid h-9 w-9 place-items-center rounded-[var(--radius-sm)]",
+            page === 1 ? "pointer-events-none text-[var(--color-muted)] opacity-40" : "hover:bg-[var(--color-surface)]",
+          ]}
+        >‹</a>
+      </li>
+      {start > 1 && (
+        <>
+          <li><a href={href(1)} class="grid h-9 w-9 place-items-center rounded-[var(--radius-sm)] hover:bg-[var(--color-surface)]">1</a></li>
+          {start > 2 && <li aria-hidden="true" class="px-1 text-[var(--color-muted)]">…</li>}
+        </>
+      )}
+      {pages.map((p) => (
+        <li>
+          <a
+            href={href(p)}
+            aria-current={p === page ? "page" : undefined}
+            class:list={[
+              "grid h-9 w-9 place-items-center rounded-[var(--radius-sm)] font-display text-sm",
+              p === page
+                ? "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]"
+                : "hover:bg-[var(--color-surface)]",
+            ]}
+          >{p}</a>
+        </li>
+      ))}
+      {end < pageCount && (
+        <>
+          {end < pageCount - 1 && <li aria-hidden="true" class="px-1 text-[var(--color-muted)]">…</li>}
+          <li><a href={href(pageCount)} class="grid h-9 w-9 place-items-center rounded-[var(--radius-sm)] hover:bg-[var(--color-surface)]">{pageCount}</a></li>
+        </>
+      )}
+      <li>
+        <a
+          href={href(Math.min(pageCount, page + 1))}
+          aria-label="Next page"
+          aria-disabled={!hasNext}
+          class:list={[
+            "grid h-9 w-9 place-items-center rounded-[var(--radius-sm)]",
+            !hasNext ? "pointer-events-none text-[var(--color-muted)] opacity-40" : "hover:bg-[var(--color-surface)]",
+          ]}
+        >›</a>
+      </li>
+    </ul>
+  </nav>
+)}

package/apps/storefront/src/components/plp/SortSelect.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * Sort control. A plain <form> select that auto-submits on change — works without
+ * a framework, stays URL-addressable. The current query's other params ride
+ * along as hidden inputs so sort doesn't drop active filters.
+ *
+ * Auto-submit is wired by a nonce'd `is:inline` <script> rather than an inline
+ * `onchange=` handler, so a strict, ENFORCED CSP allows it without 'unsafe-inline'
+ * / 'unsafe-hashes' (Epic S2). The <noscript> Apply button covers the no-JS case.
+ */
+import type { ListProductsQuery } from "@tot/public-runtime";
+
+interface Props {
+  query: ListProductsQuery;
+  basePath: string;
+}
+const { query, basePath } = Astro.props;
+
+const OPTIONS: { value: NonNullable<ListProductsQuery["sort"]>; label: string }[] = [
+  { value: "featured", label: "Featured" },
+  { value: "newest", label: "Newest" },
+  { value: "price-asc", label: "Price: Low to High" },
+  { value: "price-desc", label: "Price: High to Low" },
+  { value: "title-asc", label: "Alphabetical (A–Z)" },
+];
+const current = query.sort ?? "featured";
+---
+
+<form method="get" action={basePath} class="flex items-center gap-2 text-sm">
+  {/* Preserve filters/price/availability/q across a sort change. */}
+  {query.q && <input type="hidden" name="q" value={query.q} />}
+  {query.availability && query.availability !== "all" && (
+    <input type="hidden" name="availability" value={query.availability} />
+  )}
+  {query.priceMin != null && <input type="hidden" name="priceMin" value={query.priceMin} />}
+  {query.priceMax != null && <input type="hidden" name="priceMax" value={query.priceMax} />}
+  {Object.entries(query.filters ?? {}).flatMap(([name, values]) =>
+    values.map((v) => (
+      <input type="hidden" name={name === "tags" ? "tag" : `opt.${name}`} value={v} />
+    )),
+  )}
+
+  <label for="sort" class="text-[var(--color-muted)]">Sort</label>
+  <select
+    id="sort"
+    name="sort"
+    data-sort-autosubmit
+    class="rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 font-display"
+  >
+    {OPTIONS.map((o) => (
+      <option value={o.value} selected={o.value === current}>{o.label}</option>
+    ))}
+  </select>
+  <noscript><button type="submit" class="underline">Apply</button></noscript>
+</form>
+
+<script is:inline nonce={Astro.locals.cspNonce}>
+  // Progressive enhancement: submit the form when the sort changes. Nonce'd
+  // inline (the platform pattern for app-authored inline JS) so a strict,
+  // ENFORCED CSP allows it without 'unsafe-inline'.
+  for (const el of document.querySelectorAll("select[data-sort-autosubmit]")) {
+    el.addEventListener("change", () => el.form && el.form.submit());
+  }
+</script>

package/apps/storefront/src/config/devTenants.ts

@@ -0,0 +1,16 @@
+/**
+ * Dev-only tenant-registry seam for the localhost sign-in bypass.
+ *
+ * `lib/auth/devAuth` can't import the concrete static tenant map directly
+ * (tenancy-resolver-fence — the registry stays behind the `config` boundary so a
+ * single-tenant extraction stays a drop-in). This exposes exactly the one thing
+ * that bypass needs: the resources a local dev session is granted membership on.
+ * In a single-tenant extraction this collapses to that one tenant with no change
+ * to devAuth. Same shape of config seam as {@link ./previewTenantLookup}.
+ */
+import { staticTenants } from "@/config/tenants";
+
+/** Every registered tenant's resource id (appDomain, falling back to tenant_id). */
+export function devTenantResources(): string[] {
+  return staticTenants.map((t) => t.appDomain ?? t.tenant_id);
+}