@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/auth/AuthBadge.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * AuthBadge — a small "signed in as … — <role>" pill shown on login-gated hosts.
+ *
+ * Renders only when `Astro.locals.viewer` is set (i.e. the login gate resolved a
+ * valid session). Surfaces the viewer's email + effective capability (with the
+ * full role list on hover) and a sign-out control — the "report back what role(s)
+ * they're logged in with" affordance. Absent on open/password-gated hosts.
+ */
+const viewer = Astro.locals.viewer;
+
+const CAP_LABEL: Record<string, string> = {
+  owner: "Owner",
+  admin: "Admin",
+  member: "Member",
+  developer: "Developer",
+  inviter: "Inviter",
+  staff: "ToT Staff",
+};
+const label = viewer ? (CAP_LABEL[viewer.capability] ?? viewer.capability) : "";
+---
+
+{viewer && (
+  <div
+    data-auth-badge
+    title={`Signed in as ${viewer.email} — role(s): ${viewer.roles.join(", ") || "none"}`}
+    class="fixed bottom-3 left-3 z-50 flex items-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-1.5 text-xs shadow-sm"
+  >
+    <span aria-hidden="true">🔓</span>
+    <span class="text-[var(--color-muted)]">Signed in as</span>
+    <span class="font-semibold">{viewer.email}</span>
+    <span class="rounded-full bg-[var(--color-primary)] px-2 py-0.5 font-semibold text-[var(--color-primary-contrast)]">
+      {label}
+    </span>
+    <form method="post" action="/api/auth/logout" class="contents">
+      <button
+        type="submit"
+        class="text-[var(--color-muted)] underline underline-offset-2 hover:text-[var(--color-primary)]"
+      >
+        Sign out
+      </button>
+    </form>
+  </div>
+)}

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

@@ -0,0 +1,108 @@
+---
+/**
+ * <AnnouncementBar> — the top promo strip. Two variants:
+ *   - "static"  : centered single line.
+ *   - "marquee" : a continuously scrolling track (duplicated for a seamless loop).
+ *
+ * Reduced-motion safe: `prefers-reduced-motion: reduce` freezes the marquee and
+ * shows the message statically (no infinite animation). Tenant-agnostic — colours
+ * come from theme tokens; `tone` picks which token pair.
+ */
+interface Props {
+  text: string;
+  variant?: "static" | "marquee";
+  /** How many times to repeat the phrase in the marquee track. */
+  repeat?: number;
+  tone?: "primary" | "sale" | "accent";
+  /** Accessible label for the region (marquee hides the visual copies). */
+  label?: string;
+  class?: string;
+}
+
+const {
+  text,
+  variant = "static",
+  repeat = 6,
+  tone = "primary",
+  label,
+  class: className,
+} = Astro.props;
+
+const toneClass: Record<NonNullable<Props["tone"]>, string> = {
+  primary: "bg-primary text-primary-contrast",
+  sale: "bg-[var(--color-sale)] text-white",
+  accent: "bg-accent text-white",
+};
+const copies = Array.from({ length: Math.max(2, repeat) });
+---
+
+<div
+  class:list={["tot-announce", toneClass[tone], className]}
+  role="region"
+  aria-label={label ?? text}
+>
+  {
+    variant === "marquee" ? (
+      <div class="tot-announce__viewport">
+        <div class="tot-announce__track" aria-hidden="true">
+          {copies.map(() => (
+            <span class="tot-announce__item">{text}</span>
+          ))}
+        </div>
+        {/* Static fallback shown only when motion is reduced. */}
+        <p class="tot-announce__static">{text}</p>
+      </div>
+    ) : (
+      <p class="tot-announce__line">{text}</p>
+    )
+  }
+</div>
+
+<style>
+  .tot-announce {
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+  }
+  .tot-announce__line {
+    text-align: center;
+    padding: 0.375rem 1rem;
+  }
+  .tot-announce__viewport {
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 0.375rem 0;
+  }
+  .tot-announce__track {
+    display: inline-flex;
+    gap: 3rem;
+    padding-left: 3rem;
+    will-change: transform;
+    animation: tot-marquee 22s linear infinite;
+  }
+  .tot-announce__item {
+    display: inline-block;
+  }
+  .tot-announce__static {
+    display: none;
+    text-align: center;
+  }
+  @keyframes tot-marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      /* Track is duplicated content; -50% loops seamlessly. */
+      transform: translateX(-50%);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tot-announce__track {
+      display: none;
+    }
+    .tot-announce__static {
+      display: block;
+      padding: 0 1rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,26 @@
+---
+/**
+ * <MegaMenu> — the primary navigation bar: a horizontal list of nav items, each
+ * rendered by <NavDropdown> (plain link, single-column dropdown, or multi-column
+ * mega panel). Tenant-agnostic; theme-token skinned; CSS-only reveal.
+ *
+ * Used by <SiteHeader> for the desktop nav, and registerable standalone in the
+ * style guide.
+ */
+import type { ChromeNavItem } from "@/lib/chrome/model";
+import NavDropdown from "@/components/chrome/NavDropdown.astro";
+
+interface Props {
+  items: ChromeNavItem[];
+  ariaLabel?: string;
+  class?: string;
+}
+
+const { items, ariaLabel = "Primary", class: className } = Astro.props;
+---
+
+<nav aria-label={ariaLabel} class:list={["hidden md:block", className]}>
+  <ul class="flex items-center gap-6">
+    {items.map((item) => <NavDropdown item={item} />)}
+  </ul>
+</nav>

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

@@ -0,0 +1,201 @@
+---
+/**
+ * <NavDropdown> — one primary-nav item, in one of two delivery modes:
+ *
+ *   mode="bar" (default) — desktop horizontal item. Renders as a plain link,
+ *     a single-column dropdown (`children`), or a multi-column mega panel
+ *     (`columns`), revealed on hover/focus via CSS-only group state (no JS,
+ *     keyboard-accessible: focusing the trigger opens the panel).
+ *
+ *   mode="accordion" — mobile/stacked item. The same item, but its dropdown or
+ *     mega panel becomes an inline, collapsible disclosure built on a native
+ *     <details>/<summary> (zero-JS, keyboard- and touch-operable). Mega
+ *     `columns` stack as titled groups. Used inside <SiteHeader>'s mobile menu.
+ *
+ * With an optional caret, a "NEW"-style badge, and a highlighted `flag` variant.
+ * Tenant-agnostic; theme-token skinned.
+ */
+import type { ChromeNavItem, ChromeLink } from "@/lib/chrome/model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  item: ChromeNavItem;
+  /**
+   * "bar" = desktop horizontal item with an absolute hover/focus panel (default);
+   * "accordion" = mobile stacked item using a native <details> disclosure.
+   */
+  mode?: "bar" | "accordion";
+}
+
+const { item, mode = "bar" } = Astro.props;
+const { basePath } = Astro.locals;
+
+const itemHref = withBase(basePath, item.href);
+const hrefOf = (l: ChromeLink) => (l.external ? l.href : withBase(basePath, l.href));
+const hasMenu =
+  (item.columns && item.columns.length > 0) ||
+  (item.children && item.children.length > 0);
+const isMega = !!(item.columns && item.columns.length > 0);
+// Normalize columns/children into titled groups for the accordion body so the
+// same markup renders a mega panel (multiple titled columns) or a single-column
+// dropdown (one untitled group).
+const groups = isMega
+  ? item.columns!.map((c) => ({ title: c.title, links: c.links }))
+  : item.children
+    ? [{ title: undefined as string | undefined, links: item.children }]
+    : [];
+---
+
+{
+  mode === "accordion" ? (
+    hasMenu ? (
+      <li>
+        <details class="group border-b border-border last:border-b-0">
+          <summary class="flex cursor-pointer list-none items-center justify-between gap-2 py-2.5 text-sm font-medium text-text [&::-webkit-details-marker]:hidden">
+            <span class:list={["inline-flex items-center gap-1.5", item.flag && "text-accent"]}>
+              {item.label}
+              {item.badge && (
+                <span class="rounded-full bg-[var(--color-sale)] px-1.5 py-0.5 font-mono text-[0.55rem] uppercase leading-none tracking-[0.08em] text-white">
+                  {item.badge}
+                </span>
+              )}
+            </span>
+            <span aria-hidden="true" class="shrink-0 text-[0.7em] text-muted transition-transform duration-150 group-open:rotate-180">
+              ▾
+            </span>
+          </summary>
+          <div class="pb-2 pl-1">
+            {groups.map((col) => (
+              <div class="mb-2 last:mb-0">
+                {col.title && (
+                  <p class="px-2 pb-1 pt-1 font-mono text-[0.6rem] uppercase tracking-[0.12em] text-muted">
+                    {col.title}
+                  </p>
+                )}
+                <ul class="grid gap-0.5">
+                  {col.links.map((child) => (
+                    <li>
+                      <a
+                        href={hrefOf(child)}
+                        class="flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
+                        {...(child.external ? { rel: "noopener noreferrer" } : {})}
+                      >
+                        {child.label}
+                        {child.badge && (
+                          <span class="rounded-full bg-primary px-1 py-0.5 font-mono text-[0.5rem] uppercase leading-none text-primary-contrast">
+                            {child.badge}
+                          </span>
+                        )}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </details>
+      </li>
+    ) : (
+      <li>
+        <a
+          href={itemHref}
+          class:list={[
+            "flex items-center gap-1.5 border-b border-border py-2.5 text-sm font-medium text-text transition-colors last:border-b-0 hover:text-accent",
+            item.flag && "text-accent",
+          ]}
+        >
+          {item.label}
+          {item.badge && (
+            <span class="rounded-full bg-[var(--color-sale)] px-1.5 py-0.5 font-mono text-[0.55rem] uppercase leading-none tracking-[0.08em] text-white">
+              {item.badge}
+            </span>
+          )}
+        </a>
+      </li>
+    )
+  ) : hasMenu ? (
+    <li class="group relative">
+      <a
+        href={itemHref}
+        class:list={[
+          "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent group-focus-within:text-accent",
+          item.flag && "font-semibold text-accent",
+        ]}
+        aria-haspopup="true"
+      >
+        {item.label}
+        {item.badge && (
+          <span class="ml-1 rounded-full bg-[var(--color-sale)] px-1.5 py-0.5 font-mono text-[0.55rem] uppercase tracking-[0.08em] leading-none text-white">
+            {item.badge}
+          </span>
+        )}
+        <span aria-hidden="true" class="text-[0.7em] opacity-60">▾</span>
+      </a>
+
+      <div class="invisible absolute left-0 top-full z-50 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">
+        {isMega ? (
+          <div class="mt-1 grid gap-6 rounded-md border border-border bg-surface p-5 shadow-md sm:grid-cols-2 lg:grid-cols-3">
+            {item.columns!.map((col) => (
+              <div class="min-w-44">
+                {col.title && (
+                  <p class="mb-2 font-mono text-[0.62rem] uppercase tracking-[0.12em] text-muted">
+                    {col.title}
+                  </p>
+                )}
+                <ul class="grid gap-0.5">
+                  {col.links.map((child) => (
+                    <li>
+                      <a
+                        href={hrefOf(child)}
+                        class="flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
+                        {...(child.external ? { rel: "noopener noreferrer" } : {})}
+                      >
+                        {child.label}
+                        {child.badge && (
+                          <span class="rounded-full bg-primary px-1 py-0.5 font-mono text-[0.5rem] uppercase leading-none text-primary-contrast">
+                            {child.badge}
+                          </span>
+                        )}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <ul class="mt-1 grid min-w-56 gap-0.5 rounded-md border border-border bg-surface p-3 shadow-md">
+            {item.children!.map((child) => (
+              <li>
+                <a
+                  href={hrefOf(child)}
+                  class="block rounded-sm px-3 py-1.5 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
+                  {...(child.external ? { rel: "noopener noreferrer" } : {})}
+                >
+                  {child.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </li>
+  ) : (
+    <li>
+      <a
+        href={itemHref}
+        class:list={[
+          "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent",
+          item.flag && "font-semibold text-accent",
+        ]}
+      >
+        {item.label}
+        {item.badge && (
+          <span class="ml-1 rounded-full bg-[var(--color-sale)] px-1.5 py-0.5 font-mono text-[0.55rem] uppercase tracking-[0.08em] leading-none text-white">
+            {item.badge}
+          </span>
+        )}
+      </a>
+    </li>
+  )
+}

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

@@ -0,0 +1,201 @@
+---
+/**
+ * <SiteFooter> — brand block + link columns + newsletter signup + a payment-badge
+ * row + a trust/compliance line + legal bottom bar. Tenant-agnostic; theme-token
+ * skinned. Payment badges are text chips (no external images — CSP-clean).
+ *
+ * The newsletter is a plain POST form (progressive); it does not embed any cart
+ * or checkout logic (commerce boundary).
+ */
+import type { ChromeLink, FooterColumn, FooterNewsletter, SocialLink, ChromeLogo } from "@/lib/chrome/model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  columns: FooterColumn[];
+  brand?: { logo?: ChromeLogo; wordmark?: string; contact?: string[] };
+  newsletter?: FooterNewsletter;
+  /** Payment method labels rendered as chips (e.g. "Visa", "PayPal"). */
+  payments?: string[];
+  social?: SocialLink[];
+  /** Trust / compliance line (plain text, e.g. an age/nicotine notice). */
+  compliance?: string;
+  /** Legal bottom-bar line (e.g. a composed "© 2026 Acme · some legal note" string). */
+  legal?: string;
+  /** Bottom-bar policy links (e.g. Privacy Policy, Terms), shown alongside `legal`. */
+  bottomLinks?: ChromeLink[];
+  class?: string;
+}
+
+const {
+  columns,
+  brand,
+  newsletter,
+  payments = [],
+  social = [],
+  compliance,
+  legal,
+  bottomLinks = [],
+  class: className,
+} = Astro.props;
+
+const { basePath } = Astro.locals;
+const hrefOf = (l: ChromeLink) => (l.external ? l.href : withBase(basePath, l.href));
+const showLogo = !!brand?.logo && /^(https?:|\/)/.test(brand.logo.src);
+---
+
+<footer class:list={["border-t border-border bg-surface text-text", className]}>
+  <div class="container-prose py-12">
+    <div class="grid gap-10 md:grid-cols-[1.4fr_repeat(3,1fr)]">
+      <!-- Brand -->
+      <div>
+        {
+          showLogo ? (
+            <img
+              src={brand!.logo!.src}
+              alt={brand!.logo!.alt}
+              width={brand!.logo!.width ?? 160}
+              height={brand!.logo!.height ?? 48}
+              class="h-9 w-auto max-w-[180px] object-contain"
+            />
+          ) : (
+            brand?.wordmark && (
+              <span class="font-display text-lg font-bold tracking-tight">{brand.wordmark}</span>
+            )
+          )
+        }
+        {
+          brand?.contact && brand.contact.length > 0 && (
+            <p class="mt-3 text-sm text-muted">
+              {brand.contact.map((line, i) => (
+                <>
+                  {i > 0 && <br />}
+                  {line}
+                </>
+              ))}
+            </p>
+          )
+        }
+        {
+          social.length > 0 && (
+            <div class="mt-4 flex items-center gap-3">
+              {social.map((s) => (
+                <a
+                  href={s.href}
+                  aria-label={s.label}
+                  rel="noopener noreferrer"
+                  class="text-muted transition-colors hover:text-primary"
+                >
+                  {s.iconPath ? (
+                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                      <path d={s.iconPath} />
+                    </svg>
+                  ) : (
+                    <span class="text-sm">{s.label}</span>
+                  )}
+                </a>
+              ))}
+            </div>
+          )
+        }
+      </div>
+
+      <!-- Link columns -->
+      {
+        columns.map((col) => (
+          <div>
+            <h3 class="font-display text-sm font-semibold">{col.title}</h3>
+            <ul class="mt-3 grid gap-2">
+              {col.links.map((l) => (
+                <li>
+                  <a
+                    href={hrefOf(l)}
+                    class="text-sm text-muted transition-colors hover:text-primary"
+                    {...(l.external ? { rel: "noopener noreferrer" } : {})}
+                  >
+                    {l.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))
+      }
+    </div>
+
+    <!-- Newsletter -->
+    {
+      newsletter && (
+        <div class="mt-10 border-t border-border pt-8">
+          {newsletter.title && <h3 class="font-display text-base font-semibold">{newsletter.title}</h3>}
+          {newsletter.body && <p class="mt-1 text-sm text-muted">{newsletter.body}</p>}
+          <form
+            action={withBase(basePath, newsletter.action ?? "/api/newsletter")}
+            method="post"
+            class="mt-4 flex max-w-md flex-col gap-3 sm:flex-row"
+          >
+            <input type="hidden" name="source" value={newsletter.source ?? "footer"} />
+            <label class="sr-only" for="chrome-news-email">Email address</label>
+            <input
+              id="chrome-news-email"
+              type="email"
+              name="email"
+              required
+              placeholder={newsletter.placeholder ?? "you@example.com"}
+              class="flex-1 rounded-full border border-border bg-bg px-4 py-2.5 text-sm text-text placeholder:text-muted"
+            />
+            <button
+              type="submit"
+              class="rounded-full bg-primary px-5 py-2.5 font-display text-sm font-medium text-primary-contrast transition-transform hover:-translate-y-0.5"
+            >
+              Subscribe
+            </button>
+          </form>
+        </div>
+      )
+    }
+
+    <!-- Payment badges -->
+    {
+      payments.length > 0 && (
+        <div class="mt-8 flex flex-wrap items-center gap-2" aria-label="Accepted payment methods">
+          {payments.map((p) => (
+            <span class="rounded border border-border px-2 py-1 font-mono text-[0.62rem] uppercase tracking-[0.08em] text-muted">
+              {p}
+            </span>
+          ))}
+        </div>
+      )
+    }
+
+    <!-- Compliance / trust line -->
+    {
+      compliance && (
+        <p class="mt-8 border-t border-border pt-6 text-xs text-muted">{compliance}</p>
+      )
+    }
+
+    <!-- Legal bottom bar: text line + optional policy links -->
+    {
+      (legal || bottomLinks.length > 0) && (
+        <div class="mt-4 flex flex-col gap-3 border-t border-border pt-4 text-xs text-muted sm:flex-row sm:items-center sm:justify-between">
+          {legal && <p class="font-mono text-[0.68rem] uppercase tracking-[0.08em]">{legal}</p>}
+          {
+            bottomLinks.length > 0 && (
+              <nav aria-label="Legal">
+                <ul class="flex flex-wrap gap-x-5 gap-y-1">
+                  {bottomLinks.map((l) => (
+                    <li>
+                      <a href={hrefOf(l)} class="transition-colors hover:text-primary">
+                        {l.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            )
+          }
+        </div>
+      )
+    }
+  </div>
+</footer>