@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,175 @@
+---
+/**
+ * <BrandGrid> — a "Shop by Brands" logo wall: a grid of brand tiles linking to
+ * brand collections, each rendered as a rehosted logo image OR a text-wordmark
+ * fallback when no logo is available. Tenant-agnostic — the `brands` array is
+ * content, theme tokens are the skin. Replaces per-tenant hand-authored blocks
+ * (image-logo walls and text-wordmark tiles alike) with one shared component.
+ *
+ * Two delivery paths, one look: this component styles itself from the token
+ * contract via a scoped <style> (so it renders under the app Layout AND in the
+ * standalone style guide, neither of which links the raw sheet). The class-only
+ * raw-chrome parity lives in the `.brand-grid` / `.brand-tile` block of
+ * public/shared/commerce-chrome.css, for tenants that ship hand-authored HTML
+ * through the rawMarketingHtml splice pipeline. Keep the two visually equivalent.
+ */
+import Section from "@/components/Section.astro";
+import Img from "@/components/Img.astro";
+import { withBase } from "@/lib/basePath";
+
+export interface Brand {
+  /** Brand name — the link label, image alt, and text-fallback wordmark. */
+  label: string;
+  /** Collection (or brand) URL, e.g. /collections/<handle>. Base-prefixed here. */
+  href: string;
+  /** Rehosted logo image URL. Omit to render the text wordmark fallback. */
+  logoSrc?: string;
+  /** True when logoSrc is a rehosted asset (enables responsive srcset). */
+  logoRehosted?: boolean;
+  logoWidth?: number;
+  logoHeight?: number;
+}
+
+interface Props {
+  brands: Brand[];
+  title?: string;
+  eyebrow?: string;
+  tone?: "bg" | "surface";
+  /** Optional "View all brands" call-to-action below the grid. */
+  viewAllHref?: string;
+  viewAllLabel?: string;
+  class?: string;
+}
+
+const {
+  brands,
+  title,
+  eyebrow,
+  tone = "bg",
+  viewAllHref,
+  viewAllLabel = "View all brands",
+  class: className,
+} = Astro.props;
+
+const basePath = Astro.locals.basePath ?? "";
+---
+
+<Section title={title} eyebrow={eyebrow} tone={tone} class={className}>
+  <ul class="brand-grid" role="list">
+    {
+      brands.map((brand) => (
+        <li>
+          <a
+            class="brand-tile"
+            href={withBase(basePath, brand.href)}
+            aria-label={brand.label}
+            data-reveal
+          >
+            {brand.logoSrc ? (
+              <Img
+                src={brand.logoSrc}
+                rehosted={brand.logoRehosted}
+                seed={brand.href}
+                label={brand.label}
+                alt={brand.label}
+                width={brand.logoWidth ?? 200}
+                height={brand.logoHeight ?? 100}
+                sizes="(min-width: 640px) 160px, 44vw"
+              />
+            ) : (
+              <span class="brand-tile__text">{brand.label}</span>
+            )}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+  {
+    viewAllHref && (
+      <p class="brand-grid__more">
+        <a class="brand-grid__cta" href={withBase(basePath, viewAllHref)}>
+          {viewAllLabel}
+        </a>
+      </p>
+    )
+  }
+</Section>
+
+<style>
+  /* Mirrors the raw-chrome `.brand-grid` / `.brand-tile` block in
+     public/shared/commerce-chrome.css — same token vocabulary, same look. */
+  .brand-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: clamp(10px, 1.4vw, 16px);
+  }
+  .brand-tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 92px;
+    padding: 18px 16px;
+    text-align: center;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: 0.95rem;
+    letter-spacing: 0.01em;
+    color: var(--color-text);
+    transition:
+      transform 0.14s ease,
+      box-shadow 0.14s ease,
+      border-color 0.14s ease,
+      color 0.14s ease;
+  }
+  .brand-tile:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+  .brand-tile :global(img) {
+    max-height: 46px;
+    max-width: 100%;
+    width: auto;
+    object-fit: contain;
+  }
+  .brand-grid__more {
+    margin-top: clamp(1.25rem, 3vw, 1.75rem);
+    text-align: center;
+  }
+  /* Ghost-button parity with the raw sheet's .btn-ghost, token-only. */
+  .brand-grid__cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: 0.95rem;
+    padding: 0.8em 1.6em;
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    color: var(--color-primary);
+    transition:
+      border-color 0.15s ease,
+      transform 0.12s ease;
+  }
+  .brand-grid__cta:hover {
+    border-color: var(--color-primary);
+    transform: translateY(-1px);
+  }
+  @media (max-width: 560px) {
+    .brand-grid {
+      grid-template-columns: repeat(auto-fill, minmax(44%, 1fr));
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .brand-tile,
+    .brand-grid__cta {
+      transition: none;
+    }
+  }
+</style>

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/FoxySidecartStyles.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * <FoxySidecartStyles> — brands Foxy's v2.0 sidecart to the tenant's theme.
+ *
+ * Foxy's loader.js injects the sidecart into OUR page DOM (root `#fc`, light DOM
+ * — no iframe, no shadow root), so it inherits the theme's CSS custom properties
+ * (`--color-primary`, `--font-*`, …) and can be restyled with plain CSS. We emit
+ * a small nonce'd <style> that maps the sidecart's own selectors to those tokens,
+ * so a merchant's cart matches their brand out of the box.
+ *
+ * Two layers: this brand BASELINE, then the tenant's optional `sidecartCss`
+ * override (commerce.foxy.sidecartCss) appended verbatim for bespoke tweaks.
+ *
+ * `!important` is deliberate: Foxy's own responsive_styles.css loads from its CDN
+ * AFTER this <head> <style>, so equal-specificity rules would lose the cascade.
+ * Everything is scoped under `#fc` so nothing leaks to the storefront itself.
+ *
+ * Rendered only for commerce tenants with a store (Astro.locals.commerce); the
+ * hosted checkout PAGE is a separate origin and is themed in the Foxy admin — out
+ * of scope here.
+ */
+const { commerce, cspNonce } = Astro.locals;
+
+// Selectors verified against the live tot-preview sidecart DOM:
+//   #fc                             — sidecart root (in-page)
+//   #fc-cart.fc-container           — cart body
+//   .fc-action--checkout--button    — the primary "Proceed to Checkout" CTA
+//   a.fc-btn-action.fc-sidecart-button — the fixed Keep-Shopping/Checkout nav
+const baseline = `
+#fc, #fc input, #fc button, #fc select, #fc textarea {
+  font-family: var(--font-body), system-ui, -apple-system, sans-serif;
+}
+#fc h1, #fc h2, #fc h3, #fc .fc-cart-title, #fc [class*="__title"] {
+  font-family: var(--font-display), var(--font-body), sans-serif !important;
+}
+#fc #fc-cart { color: var(--color-text); }
+#fc a { color: var(--color-primary); }
+/* Primary checkout CTA(s) → brand primary. */
+#fc .fc-action--checkout--button,
+#fc a.fc-action--checkout--button,
+#fc .fc-btn-action.fc-sidecart-button--checkout {
+  background: var(--color-primary) !important;
+  border-color: var(--color-primary) !important;
+  color: var(--color-primary-contrast) !important;
+  border-radius: var(--radius-md) !important;
+}
+#fc .fc-action--checkout--button:hover,
+#fc a.fc-action--checkout--button:hover {
+  filter: brightness(1.08);
+}
+/* Quantity / minor actions keep an outline in brand color. */
+#fc .fc-btn-action.fc-sidecart-button {
+  border-radius: var(--radius-md) !important;
+}
+`.trim();
+
+const css = commerce?.sidecartCss
+  ? `${baseline}\n\n/* --- tenant override --- */\n${commerce.sidecartCss}`
+  : baseline;
+---
+{commerce && <style set:html={css} nonce={cspNonce}></style>}

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>
+  )
+}

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

@@ -0,0 +1,58 @@
+---
+/**
+ * <RatingStars> — atom. A 0–5 star rating with fractional fill (a single clipped
+ * overlay, no half-star glyph juggling) and an accessible label. Tenant-agnostic:
+ * filled stars use `--color-accent`, the empty track uses `--color-border`.
+ *
+ * Presentation only — it renders whatever aggregate you pass. No review data is
+ * invented here (claims-ledger discipline: source ratings before shipping them).
+ */
+interface Props {
+  /** 0–5. */
+  rating: number;
+  /** Optional review count shown after the stars. */
+  count?: number;
+  max?: number;
+  size?: "sm" | "md";
+  /** Show the numeric "(N)" count. */
+  showCount?: boolean;
+  class?: string;
+}
+
+const {
+  rating,
+  count,
+  max = 5,
+  size = "sm",
+  showCount = true,
+  class: className,
+} = Astro.props;
+
+const clamped = Math.max(0, Math.min(max, rating));
+const pct = (clamped / max) * 100;
+const dim = size === "md" ? "text-base" : "text-xs";
+const stars = "★".repeat(max);
+const label =
+  count != null
+    ? `Rated ${clamped} out of ${max} — ${count} review${count === 1 ? "" : "s"}`
+    : `Rated ${clamped} out of ${max}`;
+---
+
+<span class:list={["inline-flex items-center gap-1.5", className]} aria-label={label}>
+  <span class:list={["relative inline-block leading-none tracking-[0.08em]", dim]} aria-hidden="true">
+    <span class="text-[var(--color-border)]">{stars}</span>
+    <span
+      class="absolute inset-0 overflow-hidden whitespace-nowrap text-[var(--color-accent)]"
+      style={`width:${pct}%`}
+    >
+      {stars}
+    </span>
+  </span>
+  {
+    showCount && count != null && (
+      <span class="font-mono text-[0.62rem] text-muted" aria-hidden="true">
+        ({count})
+      </span>
+    )
+  }
+</span>