@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,234 @@
+---
+/**
+ * <SiteHeader> — logo/wordmark + search island + account/auth + cart-count
+ * affordance, with the primary <MegaMenu> nav below and a mobile drawer (the
+ * <MobileNav> island). Tenant-agnostic; theme-token skinned. This is the
+ * CANONICAL site header (unit I4) — the former `components/nav/Header.astro`
+ * app-Layout implementation is retired; every feature it had (search typeahead,
+ * mobile drawer with focus-trap/scroll-lock, the session-aware auth entry point,
+ * the saved-items/wishlist cue, marketing header CTAs, a dark header variant)
+ * lives here now, as explicit props — the caller (Layout.astro) resolves
+ * session/feature/theme state and passes it down; this component stays pure.
+ *
+ * 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.
+ */
+import type { ChromeNavItem, ChromeLogo, ChromeCta } from "@/lib/chrome/model";
+import MegaMenu from "@/components/chrome/MegaMenu.astro";
+import SearchTypeahead from "@/components/islands/SearchTypeahead.tsx";
+import MobileNav from "@/components/islands/MobileNav.tsx";
+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. Mounts the live SearchTypeahead island. */
+  searchAction?: string;
+  /** Announcement text surfaced inside the mobile drawer (the desktop banner is a Layout-level sibling, e.g. <AnnouncementBar>). */
+  announcement?: string;
+  /** Generic account-icon link (no session awareness). Prefer `authLink` for a real session-aware entry point — passing both renders two affordances. */
+  accountHref?: string;
+  /** Session-aware auth entry point ("Sign in" / "Dashboard"), resolved by the caller. */
+  authLink?: { label: string; href: string };
+  /** Saved-items (wishlist) affordance. Renders a heart icon with a `[data-wishlist-count]` badge a page-level script hydrates. Omit to hide. */
+  savedItemsHref?: string;
+  /** Marketing conversion CTAs (non-commerce tenants), shown alongside search/saved. */
+  headerCtas?: ChromeCta[];
+  /** Cart link target (FoxyCart, Phase 2). Omit to hide the cart affordance. */
+  cartHref?: string;
+  cartCount?: number;
+  /** A brand-fixed "dark" header bar (e.g. a navy bar with a light logo) vs. the default light bar. */
+  variant?: "light" | "dark";
+  sticky?: boolean;
+  class?: string;
+}
+
+const {
+  logo,
+  wordmark,
+  nav = [],
+  searchAction,
+  announcement,
+  accountHref,
+  authLink,
+  savedItemsHref,
+  headerCtas = [],
+  cartHref,
+  cartCount = 0,
+  variant = "light",
+  sticky = true,
+  class: className,
+} = Astro.props;
+
+const { basePath } = Astro.locals;
+const homeHref = withBase(basePath, "/");
+const showLogo = !!logo && /^(https?:|\/)/.test(logo.src);
+const dark = variant === "dark";
+
+const ctaClass = (v?: string) =>
+  v === "secondary" || v === "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. MobileNav's
+// item shape is flat (label/href/children) — a mega item's columns are
+// flattened into one children list (no group headers) since no real content
+// source produces `columns` today; NavDropdown's accordion mode is the richer
+// zero-JS alternative if per-column grouping is ever needed on mobile.
+const mobileNav = nav.map((item) => ({
+  label: item.label,
+  href: withBase(basePath, item.href),
+  children: (item.children ?? item.columns?.flatMap((c) => c.links))?.map((child) => ({
+    label: child.label,
+    href: withBase(basePath, child.href),
+  })),
+}));
+---
+
+<header class:list={[sticky && "sticky top-0 z-40", className]}>
+  <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 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 (live typeahead island) -->
+      {
+        searchAction && (
+          <div class="hidden flex-1 md:flex">
+            <SearchTypeahead client:idle action={searchAction} />
+          </div>
+        )
+      }
+
+      <!-- Actions: saved items + marketing CTAs + auth + account + cart (link only) + mobile menu -->
+      <div class="ml-auto flex items-center gap-1">
+        {
+          savedItemsHref && (
+            <a
+              href={withBase(basePath, savedItemsHref)}
+              aria-label="Saved items"
+              class="relative grid h-9 w-9 shrink-0 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="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>
+          )
+        }
+        {
+          authLink && (
+            <a
+              href={authLink.href}
+              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"
+            >
+              {authLink.label}
+            </a>
+          )
+        }
+        {
+          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: the MobileNav island (focus-trap, scroll-lock, Escape-to-close) -->
+        {
+          nav.length > 0 && (
+            <div class="md:hidden">
+              <MobileNav client:idle nav={mobileNav} announcement={announcement} />
+            </div>
+          )
+        }
+      </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/ArticleCard.astro

@@ -0,0 +1,242 @@
+---
+/**
+ * <ArticleCard> — one blog/article card: featured image + category tag +
+ * title + excerpt + meta (author · date · read-time). Tenant-agnostic — the
+ * `article` is content, theme tokens are the skin. Replaces per-tenant
+ * hand-authored article tiles with one shared widget.
+ *
+ * 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 `.article-grid` / `.article-card` / `.tag-cloud`
+ * block of public/shared/commerce-chrome.css, for tenants that ship hand-authored
+ * HTML through the rawMarketingHtml splice pipeline. Keep the two visually equal.
+ *
+ * Presentational only: renders whatever article metadata a tenant supplies (from
+ * imported/source-copied blog data) and NEVER fabricates authors, dates, or
+ * excerpts — omit a field and its row simply doesn't render.
+ */
+import Img from "@/components/Img.astro";
+import { withBase } from "@/lib/basePath";
+
+export interface ArticleImage {
+  src: string;
+  alt?: string;
+  /** True when src is a rehosted asset (enables responsive srcset). */
+  rehosted?: boolean;
+  width?: number;
+  height?: number;
+}
+
+export interface Article {
+  /** Headline — the card link label. */
+  title: string;
+  /** Article URL. Base-prefixed here. */
+  href: string;
+  /** Short teaser/dek. Omit to render title-only. */
+  excerpt?: string;
+  /** Featured image. Omit to render the token-tinted placeholder band. */
+  image?: ArticleImage;
+  /** Category/tag label shown as an eyebrow chip. */
+  tag?: string;
+  /** Optional link for the tag chip (e.g. /blog/tag/<slug>). */
+  tagHref?: string;
+  /** Byline. */
+  author?: string;
+  /** Human-readable publish date, e.g. "May 12, 2026". */
+  date?: string;
+  /** Machine date for <time datetime> (ISO). */
+  dateTime?: string;
+  /** Estimated read time in minutes. */
+  readMinutes?: number;
+}
+
+interface Props {
+  article: Article;
+  /** Heading level for the title (default 3). */
+  as?: "h2" | "h3" | "h4";
+  class?: string;
+}
+
+const { article, as: Title = "h3", class: className } = Astro.props;
+const basePath = Astro.locals.basePath ?? "";
+
+const href = withBase(basePath, article.href);
+const img = article.image;
+const hasMeta = !!(article.author || article.date || article.readMinutes);
+---
+
+<article class:list={["article-card", className]} data-reveal>
+  <div class="article-card__media">
+    {
+      img ? (
+        <Img
+          src={img.src}
+          rehosted={img.rehosted}
+          seed={article.href}
+          label={article.title}
+          alt={img.alt ?? ""}
+          width={img.width ?? 640}
+          height={img.height ?? 400}
+          sizes="(min-width: 900px) 360px, (min-width: 600px) 45vw, 92vw"
+        />
+      ) : (
+        <span class="article-card__ph" />
+      )
+    }
+  </div>
+  <div class="article-card__body">
+    {
+      article.tag &&
+        (article.tagHref ? (
+          <a class="article-card__tag" href={withBase(basePath, article.tagHref)}>
+            {article.tag}
+          </a>
+        ) : (
+          <span class="article-card__tag">{article.tag}</span>
+        ))
+    }
+    <Title class="article-card__title">
+      <a href={href}>{article.title}</a>
+    </Title>
+    {article.excerpt && <p class="article-card__excerpt">{article.excerpt}</p>}
+    {
+      hasMeta && (
+        <p class="article-card__meta">
+          {article.author && <span class="article-card__author">{article.author}</span>}
+          {article.date && (
+            <time datetime={article.dateTime ?? undefined}>{article.date}</time>
+          )}
+          {article.readMinutes && <span>{article.readMinutes} min read</span>}
+        </p>
+      )
+    }
+  </div>
+</article>
+
+<style>
+  /* Mirrors the raw-chrome `.article-card` block in
+     public/shared/commerce-chrome.css — same token vocabulary, same look. */
+  .article-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    transition:
+      transform 0.14s ease,
+      box-shadow 0.14s ease,
+      border-color 0.14s ease;
+  }
+  .article-card:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--color-surface-2);
+  }
+  .article-card__media {
+    display: block;
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
+    background: var(--color-surface-2);
+  }
+  .article-card__media :global(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+  .article-card:hover .article-card__media :global(img) {
+    transform: scale(1.04);
+  }
+  .article-card__ph {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      135deg,
+      var(--color-surface-2),
+      color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2))
+    );
+  }
+  .article-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: clamp(16px, 2vw, 22px);
+  }
+  .article-card__tag {
+    align-self: flex-start;
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--color-primary);
+  }
+  a.article-card__tag:hover {
+    text-decoration: underline;
+  }
+  .article-card__title {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
+    line-height: 1.25;
+    color: var(--color-text);
+  }
+  .article-card__title a {
+    color: inherit;
+  }
+  /* Whole-card click target: the title link overlays the card. */
+  .article-card__title a::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  .article-card {
+    position: relative;
+  }
+  .article-card__title a:hover {
+    color: var(--color-primary);
+  }
+  .article-card__excerpt {
+    font-size: 0.92rem;
+    line-height: 1.5;
+    color: var(--color-muted);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .article-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem 0.75rem;
+    margin-top: 0.15rem;
+    font-size: 0.78rem;
+    color: var(--color-muted);
+  }
+  /* Interpuncts between meta items. */
+  .article-card__meta > * + *::before {
+    content: "·";
+    margin-right: 0.75rem;
+    color: var(--color-border);
+  }
+  .article-card__author {
+    font-weight: 600;
+    color: var(--color-text);
+  }
+  /* The tag chip sits above the overlay title link so it stays clickable. */
+  a.article-card__tag {
+    position: relative;
+    z-index: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .article-card,
+    .article-card__media :global(img) {
+      transition: none;
+    }
+  }
+</style>