@tokenoftrust/storefront-runner 0.1.0

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

@@ -0,0 +1,181 @@
+---
+/**
+ * <SiteHeader> — logo/wordmark + search input + account + cart-count affordance,
+ * with the primary <MegaMenu> nav below and a zero-JS mobile disclosure.
+ *
+ * COMMERCE BOUNDARY: the cart is a LINK only (cart/checkout is FoxyCart, Phase 2)
+ * — no cart state, no add-to-cart. The count is a static affordance the FoxyCart
+ * layer hydrates later. Search is a plain GET form (progressive; the typeahead
+ * island can enhance it elsewhere). Tenant-agnostic; theme-token skinned.
+ */
+import type { ChromeNavItem, ChromeLogo } from "@/lib/chrome/model";
+import MegaMenu from "@/components/chrome/MegaMenu.astro";
+import NavDropdown from "@/components/chrome/NavDropdown.astro";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  logo?: ChromeLogo;
+  /** Fallback wordmark text when no logo image. */
+  wordmark?: string;
+  nav?: ChromeNavItem[];
+  /** Search form action (GET). Omit to hide search. */
+  searchAction?: string;
+  accountHref?: string;
+  /** Cart link target (FoxyCart, Phase 2). Omit to hide the cart affordance. */
+  cartHref?: string;
+  cartCount?: number;
+  sticky?: boolean;
+  class?: string;
+}
+
+const {
+  logo,
+  wordmark,
+  nav = [],
+  searchAction,
+  accountHref,
+  cartHref,
+  cartCount = 0,
+  sticky = true,
+  class: className,
+} = Astro.props;
+
+const { basePath } = Astro.locals;
+const homeHref = withBase(basePath, "/");
+const showLogo = !!logo && /^(https?:|\/)/.test(logo.src);
+---
+
+<header class:list={[sticky && "sticky top-0 z-40", className]}>
+  <div class="border-b border-border bg-surface/95 text-text backdrop-blur">
+    <div class="container-prose flex h-16 items-center gap-4">
+      <!-- Logo / wordmark -->
+      <a
+        href={homeHref}
+        class="flex shrink-0 items-center transition-opacity hover:opacity-80"
+        aria-label={logo?.alt ?? wordmark ?? "Home"}
+      >
+        {
+          showLogo ? (
+            <img
+              src={logo!.src}
+              alt={logo!.alt}
+              width={logo!.width ?? 160}
+              height={logo!.height ?? 48}
+              class="h-9 w-auto max-w-[180px] object-contain"
+            />
+          ) : (
+            <span class="font-display text-lg font-bold tracking-tight">
+              {wordmark ?? logo?.alt ?? "Home"}
+            </span>
+          )
+        }
+      </a>
+
+      <!-- Search (progressive GET form) -->
+      {
+        searchAction && (
+          <form
+            action={withBase(basePath, searchAction)}
+            method="get"
+            role="search"
+            class="hidden flex-1 items-center md:flex"
+          >
+            <label class="sr-only" for="chrome-q">Search</label>
+            <div class="relative w-full max-w-md">
+              <input
+                id="chrome-q"
+                type="search"
+                name="q"
+                placeholder="Search for anything"
+                autocomplete="off"
+                class="w-full rounded-full border border-border bg-bg px-4 py-2 pr-10 text-sm text-text placeholder:text-muted focus-visible:border-accent"
+              />
+              <button
+                type="submit"
+                aria-label="Search"
+                class="absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full text-muted transition-colors hover:text-primary"
+              >
+                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                  <circle cx="11" cy="11" r="7" />
+                  <path d="M21 21l-4.3-4.3" />
+                </svg>
+              </button>
+            </div>
+          </form>
+        )
+      }
+
+      <!-- Actions: account + cart (link only) + mobile menu -->
+      <div class="ml-auto flex items-center gap-1">
+        {
+          accountHref && (
+            <a
+              href={withBase(basePath, accountHref)}
+              aria-label="Account"
+              class="grid h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent"
+            >
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
+                <circle cx="12" cy="8" r="4" />
+                <path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7" />
+              </svg>
+            </a>
+          )
+        }
+        {
+          cartHref && (
+            <a
+              href={withBase(basePath, cartHref)}
+              aria-label="Cart"
+              class="relative grid h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent"
+            >
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
+                <path d="M6 6h15l-1.5 9h-12z" />
+                <circle cx="9" cy="20" r="1.4" />
+                <circle cx="18" cy="20" r="1.4" />
+                <path d="M6 6L5 3H2" />
+              </svg>
+              <span
+                data-cart-count
+                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-white"
+              >
+                {cartCount}
+              </span>
+            </a>
+          )
+        }
+
+        <!-- Mobile menu: native <details>, zero JS -->
+        {
+          nav.length > 0 && (
+            <details class="relative md:hidden">
+              <summary
+                class="grid h-9 w-9 cursor-pointer list-none place-items-center rounded-full text-text transition-colors hover:text-accent [&::-webkit-details-marker]:hidden"
+                aria-label="Menu"
+              >
+                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                  <path d="M4 7h16M4 12h16M4 17h16" />
+                </svg>
+              </summary>
+              <div class="absolute right-0 top-full z-50 mt-1 w-64 rounded-md border border-border bg-surface p-3 shadow-md">
+                <ul class="grid gap-0.5">
+                  {nav.map((item) => <NavDropdown item={item} />)}
+                </ul>
+              </div>
+            </details>
+          )
+        }
+      </div>
+    </div>
+  </div>
+
+  <!-- Primary nav bar -->
+  {
+    nav.length > 0 && (
+      <div class="border-b border-border bg-surface">
+        <div class="container-prose">
+          <MegaMenu items={nav} />
+        </div>
+      </div>
+    )
+  }
+</header>

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

@@ -0,0 +1,79 @@
+---
+/**
+ * <UtilityNav> — the thin secondary bar above the header: minor links (News,
+ * About, Contact…), a locale/currency indicator, and social icons. Tenant-
+ * agnostic; theme-token skinned. Hidden on small screens (it's a desktop
+ * convenience — the mobile menu carries these links).
+ */
+import type { ChromeLink, SocialLink } from "@/lib/chrome/model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  links?: ChromeLink[];
+  locale?: string;
+  currency?: string;
+  social?: SocialLink[];
+  class?: string;
+}
+
+const { links = [], locale, currency, social = [], class: className } = Astro.props;
+const { basePath } = Astro.locals;
+const hrefOf = (l: ChromeLink) => (l.external ? l.href : withBase(basePath, l.href));
+---
+
+<div
+  class:list={[
+    "hidden border-b border-border bg-surface text-muted md:block",
+    className,
+  ]}
+>
+  <div class="container-prose flex h-9 items-center justify-between gap-4 text-[0.72rem]">
+    <ul class="flex items-center gap-5">
+      {
+        links.map((l) => (
+          <li>
+            <a
+              href={hrefOf(l)}
+              class="transition-colors hover:text-primary"
+              {...(l.external ? { rel: "noopener noreferrer" } : {})}
+            >
+              {l.label}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+
+    <div class="flex items-center gap-4">
+      {locale && <span class="font-mono uppercase tracking-[0.08em]">{locale}</span>}
+      {currency && <span class="font-mono">{currency}</span>}
+      {
+        social.length > 0 && (
+          <span class="flex items-center gap-3">
+            {social.map((s) => (
+              <a
+                href={s.href}
+                aria-label={s.label}
+                rel="noopener noreferrer"
+                class="transition-colors hover:text-primary"
+              >
+                {s.iconPath ? (
+                  <svg
+                    class="h-4 w-4"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path d={s.iconPath} />
+                  </svg>
+                ) : (
+                  <span>{s.label}</span>
+                )}
+              </a>
+            ))}
+          </span>
+        )
+      }
+    </div>
+  </div>
+</div>

package/apps/storefront/src/components/commerce/FoxyLoader.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * <FoxyLoader> — injects FoxyCart's loader.js (Track A).
+ *
+ * Foxy's loader turns our add-to-cart forms/links into the sidecart + hosted
+ * checkout ("Powered by FoxyCart"). It's loaded from the store's CDN path and
+ * must sit near the end of <body>. Rendered only when the tenant has a store
+ * (locals.commerce); marketing tenants ship nothing.
+ *
+ * Note: Foxy's loader is a mutable, versioned CDN artifact and does NOT support
+ * Subresource Integrity — pinning a hash would break it on Foxy's next release.
+ * It's constrained instead by the per-tenant CSP allowlist (cdn.foxycart.com +
+ * the store origin) set in middleware. It is loaded as a plain cross-origin
+ * script (NO `crossorigin` attribute) — cdn.foxycart.com serves it without CORS
+ * headers, so `crossorigin="anonymous"` would make the browser block it.
+ */
+const { commerce } = Astro.locals;
+---
+{
+  commerce && (
+    <script src={commerce.loaderSrc} async defer></script>
+  )
+}

package/apps/storefront/src/components/commerce/PriceDisplay.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * <PriceDisplay> — atom. Renders a product price with:
+ *   - struck compare-at price when on sale,
+ *   - a "From $X.XX" prefix when the product's variants span a price range,
+ *   - an optional sale-percent badge.
+ *
+ * Tenant-agnostic: colours come from theme tokens (`text-sale`, `text-muted`).
+ * Pass a `product` (it derives everything) OR the primitives directly, so the
+ * atom is usable outside a CatalogProduct context (cart line, PDP, fixtures).
+ */
+import type { CatalogProduct } from "@tot/public-runtime";
+import { formatPrice, discountPercent } from "@/lib/format";
+import { fromPrice, isOnSale } from "@/lib/tot/query";
+import Badge from "@/components/Badge.astro";
+
+interface Props {
+  /** Derive amount/compareAt/from/currency from a product. */
+  product?: CatalogProduct;
+  /** Explicit amount (overrides product). */
+  amount?: number;
+  /** Struck original price; only shown when > amount. */
+  compareAt?: number | null;
+  /** Prefix with "From " (variants span a range). */
+  from?: boolean;
+  currency?: string;
+  locale?: string;
+  /** Show the "-N%" sale badge next to the price. */
+  showBadge?: boolean;
+  /** Type scale. */
+  size?: "sm" | "md" | "lg";
+  class?: string;
+}
+
+const {
+  product,
+  amount: amountProp,
+  compareAt: compareAtProp,
+  from: fromProp,
+  currency: currencyProp,
+  locale = "en-US",
+  showBadge = false,
+  size = "md",
+  class: className,
+} = Astro.props;
+
+// Derive from the product when one is supplied; explicit props win.
+const derivedAmount = product ? fromPrice(product) : 0;
+const amount = amountProp ?? derivedAmount;
+const currency = currencyProp ?? product?.price_range.currency ?? "USD";
+
+const productHasRange = !!product && product.price_range.min !== product.price_range.max;
+const from = fromProp ?? productHasRange;
+
+// Highest compare-at across variants (only meaningful while on sale).
+const derivedCompareAt =
+  product && isOnSale(product)
+    ? Math.max(
+        ...product.variants
+          .filter((v) => v.compare_at_price != null)
+          .map((v) => v.compare_at_price!),
+      )
+    : null;
+const compareAt = compareAtProp ?? derivedCompareAt;
+
+const onSale = compareAt != null && compareAt > amount;
+const percent = onSale ? discountPercent(amount, compareAt) : null;
+
+const amountClass =
+  size === "lg" ? "text-lg" : size === "sm" ? "text-[0.8rem]" : "text-sm";
+---
+
+<p class:list={["flex items-baseline gap-2", className]}>
+  <span
+    class:list={[
+      "font-display font-medium tabular-nums",
+      amountClass,
+      onSale && "text-sale",
+    ]}
+  >
+    {from && <span class="text-muted">From </span>}{formatPrice(amount, currency, locale)}
+  </span>
+  {
+    onSale && compareAt != null && (
+      <span class="text-xs text-muted line-through tabular-nums">
+        {formatPrice(compareAt, currency, locale)}
+      </span>
+    )
+  }
+  {showBadge && percent != null && <Badge variant="sale" label={`-${percent}%`} />}
+</p>

package/apps/storefront/src/components/commerce/ProductCarousel.astro

@@ -0,0 +1,197 @@
+---
+/**
+ * <ProductCarousel> — a horizontal-scroll row of <ProductCard>s bound to a
+ * SectionSource, with optional CSS-only tabs (each tab is its own SectionSource).
+ * Tenant-agnostic: the source(s) decide the products, theme tokens decide the
+ * skin. Presets (BestSellers / NewArrivals / OnSale) are just this component with
+ * a `SECTION_PRESETS.*` source — there are no bespoke preset components.
+ *
+ * Tabs are pure CSS (radio + adjacent-sibling reveal, labels pulled to the top
+ * row with flex `order`) — zero JS, so it works identically under the app Layout
+ * and in the standalone style guide.
+ *
+ * Data: pass `products` (already-resolved / fixtures) OR a `source` this resolves
+ * through `Astro.locals.tot`; or `tabs` for the multi-source tabbed variant.
+ */
+import type { CatalogProduct } from "@tot/public-runtime";
+import Section from "@/components/Section.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import {
+  resolveSectionSource,
+  DEFAULT_SECTION_LIMIT,
+  type SectionSource,
+} from "@/lib/sections";
+
+interface Tab {
+  label: string;
+  source?: SectionSource;
+  /** Pre-resolved products for this tab (skips resolution). */
+  products?: CatalogProduct[];
+}
+
+interface Props {
+  source?: SectionSource;
+  /** Pre-resolved products (skips resolution). Wins over `source`. */
+  products?: CatalogProduct[];
+  /** Tabbed variant: each tab its own SectionSource. Wins over source/products. */
+  tabs?: Tab[];
+  limit?: number;
+  title?: string;
+  eyebrow?: string;
+  /** Visible-cards density at the lg breakpoint. */
+  columns?: 2 | 3 | 4 | 5;
+  /** `compact` tightens the gap. */
+  variant?: "default" | "compact";
+  tone?: "bg" | "surface";
+  class?: string;
+}
+
+const {
+  source,
+  products: provided,
+  tabs,
+  limit = DEFAULT_SECTION_LIMIT,
+  title,
+  eyebrow,
+  columns = 4,
+  variant = "default",
+  tone = "bg",
+  class: className,
+} = Astro.props;
+
+const tot = Astro.locals.tot;
+
+async function resolveTab(t: Tab): Promise<CatalogProduct[]> {
+  if (t.products) return t.products;
+  return t.source ? resolveSectionSource(t.source, tot, limit) : [];
+}
+
+// Normalize everything to a list of panels so the template is uniform.
+type Panel = { label: string; products: CatalogProduct[] };
+let panels: Panel[];
+if (tabs && tabs.length > 0) {
+  panels = await Promise.all(
+    tabs.map(async (t) => ({ label: t.label, products: await resolveTab(t) })),
+  );
+} else {
+  const products =
+    provided ?? (source ? await resolveSectionSource(source, tot, limit) : []);
+  panels = [{ label: title ?? "", products }];
+}
+
+const showTabs = panels.length > 1;
+
+// Unique-per-instance id so multiple carousels on one page don't share radios.
+const uid = "carousel-" + Math.random().toString(36).slice(2, 9);
+
+// lg card min-width by density (mobile/sm are fixed for a natural peek).
+const lgWidth: Record<NonNullable<Props["columns"]>, string> = {
+  2: "lg:min-w-[48%]",
+  3: "lg:min-w-[31%]",
+  4: "lg:min-w-[23%]",
+  5: "lg:min-w-[18.4%]",
+};
+const gap = variant === "compact" ? "gap-3" : "gap-5";
+---
+
+<Section title={title} eyebrow={eyebrow} tone={tone} class={className}>
+  <div class="tot-carousel">
+    {
+      panels.map((panel, i) => (
+        <Fragment>
+          {showTabs && (
+            <>
+              <input
+                class="tot-carousel__radio"
+                type="radio"
+                name={uid}
+                id={`${uid}-t${i}`}
+                checked={i === 0}
+                aria-label={panel.label}
+              />
+              <label class="tot-carousel__tab" for={`${uid}-t${i}`}>
+                {panel.label}
+              </label>
+            </>
+          )}
+          <div class="tot-carousel__panel">
+            {panel.products.length > 0 ? (
+              <ul
+                class:list={[
+                  "flex snap-x snap-mandatory overflow-x-auto scroll-smooth pb-2",
+                  gap,
+                  "[scrollbar-width:thin]",
+                ]}
+              >
+                {panel.products.map((p, idx) => (
+                  <li
+                    class:list={[
+                      "min-w-[72%] shrink-0 snap-start sm:min-w-[42%] md:min-w-[31%]",
+                      lgWidth[columns],
+                    ]}
+                  >
+                    <ProductCard product={p} position={idx} list={panel.label} />
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p class="py-8 text-center text-sm text-muted">No products to show.</p>
+            )}
+          </div>
+        </Fragment>
+      ))
+    }
+  </div>
+</Section>
+
+<style>
+  /* CSS-only tabs: radios hidden; labels pulled to a top row via flex order; the
+     checked radio's adjacent panel is the only one shown. No JS, CSP-clean. */
+  .tot-carousel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+  .tot-carousel__radio {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .tot-carousel__tab {
+    order: -1;
+    margin: 0 0.5rem 1.25rem 0;
+    padding: 0.35rem 0.9rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--color-muted);
+    cursor: pointer;
+    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+  }
+  .tot-carousel__tab:hover {
+    color: var(--color-text);
+  }
+  .tot-carousel__radio:focus-visible + .tot-carousel__tab {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+  .tot-carousel__radio:checked + .tot-carousel__tab {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-primary-contrast);
+  }
+  .tot-carousel__panel {
+    display: none;
+    width: 100%;
+  }
+  /* Single-panel (untabbed) carousels have no radio sibling — show always. */
+  .tot-carousel__panel:first-child,
+  .tot-carousel__radio:checked + .tot-carousel__tab + .tot-carousel__panel {
+    display: block;
+  }
+</style>

package/apps/storefront/src/components/commerce/ProductGrid.astro

@@ -0,0 +1,75 @@
+---
+/**
+ * <ProductGrid> — a paginated-look grid of <ProductCard>s bound to a
+ * SectionSource. Thin sibling of <ProductCarousel> (same card, non-scrolling
+ * layout). Tenant-agnostic: the source decides the products, theme tokens decide
+ * the skin, `columns` tunes density.
+ *
+ * Data: pass `products` directly (e.g. fixtures / already-resolved) OR a `source`
+ * that this component resolves through `Astro.locals.tot`.
+ */
+import type { CatalogProduct } from "@tot/public-runtime";
+import Section from "@/components/Section.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import EmptyState from "@/components/EmptyState.astro";
+import {
+  resolveSectionSource,
+  DEFAULT_SECTION_LIMIT,
+  type SectionSource,
+} from "@/lib/sections";
+
+interface Props {
+  source?: SectionSource;
+  /** Pre-resolved products (skips resolution). Wins over `source`. */
+  products?: CatalogProduct[];
+  limit?: number;
+  title?: string;
+  eyebrow?: string;
+  /** Grid columns at the lg breakpoint (2 on mobile). */
+  columns?: 2 | 3 | 4 | 5;
+  tone?: "bg" | "surface";
+  /** Hide the whole section when there are no products (default true). */
+  hideWhenEmpty?: boolean;
+  class?: string;
+}
+
+const {
+  source,
+  products: provided,
+  limit = DEFAULT_SECTION_LIMIT,
+  title,
+  eyebrow,
+  columns = 4,
+  tone = "bg",
+  hideWhenEmpty = true,
+  class: className,
+} = Astro.props;
+
+const products =
+  provided ??
+  (source ? await resolveSectionSource(source, Astro.locals.tot, limit) : []);
+
+const colClass: Record<NonNullable<Props["columns"]>, string> = {
+  2: "grid-cols-2",
+  3: "grid-cols-2 md:grid-cols-3",
+  4: "grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
+};
+const hidden = hideWhenEmpty && products.length === 0;
+---
+
+{
+  !hidden && (
+    <Section title={title} eyebrow={eyebrow} tone={tone} class={className}>
+      {products.length > 0 ? (
+        <div class:list={["grid gap-5", colClass[columns]]}>
+          {products.map((p, i) => (
+            <ProductCard product={p} position={i} list={title} />
+          ))}
+        </div>
+      ) : (
+        <EmptyState title="Nothing here yet" body="Check back soon." />
+      )}
+    </Section>
+  )
+}