@tokenoftrust/storefront-runner 0.1.0

package/apps/storefront/src/components/Seo.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * <Seo> — per-page title/meta, Open Graph, Twitter card, canonical, JSON-LD.
+ * (brief §8). Tenant-aware: OG image + site name come from the resolved tenant.
+ */
+interface JsonLd {
+  [key: string]: unknown;
+}
+
+interface Props {
+  title: string;
+  description?: string;
+  /** Path-only canonical, e.g. /products/foo. Joined to tenant canonical base. */
+  path: string;
+  ogType?: "website" | "product" | "article";
+  ogImage?: string;
+  noindex?: boolean;
+  /** One or more JSON-LD graphs (Product, BreadcrumbList, Organization…). */
+  jsonLd?: JsonLd | JsonLd[];
+}
+
+const {
+  title,
+  description,
+  path,
+  ogType = "website",
+  ogImage,
+  noindex = false,
+  jsonLd,
+} = Astro.props;
+
+const { tenant, canonicalBase } = Astro.locals;
+const canonical = new URL(path, canonicalBase + "/").toString();
+// Don't double-append the brand: merchant SEO titles (title_tag) often already
+// end with the store name.
+const fullTitle = title.includes(tenant.displayName)
+  ? title
+  : `${title} — ${tenant.displayName}`;
+const image = ogImage
+  ? new URL(ogImage, canonicalBase + "/").toString()
+  : new URL(tenant.theme_tokens?.brand?.ogImage ?? "/brand/northwind-og.svg", canonicalBase + "/").toString();
+
+const graphs = jsonLd ? (Array.isArray(jsonLd) ? jsonLd : [jsonLd]) : [];
+---
+
+<title>{fullTitle}</title>
+{description && <meta name="description" content={description} />}
+<link rel="canonical" href={canonical} />
+{noindex && <meta name="robots" content="noindex,nofollow" />}
+
+<meta property="og:type" content={ogType} />
+<meta property="og:site_name" content={tenant.displayName} />
+<meta property="og:title" content={fullTitle} />
+{description && <meta property="og:description" content={description} />}
+<meta property="og:url" content={canonical} />
+<meta property="og:image" content={image} />
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content={fullTitle} />
+{description && <meta name="twitter:description" content={description} />}
+<meta name="twitter:image" content={image} />
+
+{
+  graphs.map((g) => (
+    <script
+      type="application/ld+json"
+      set:html={JSON.stringify(g)}
+    />
+  ))
+}

package/apps/storefront/src/components/WidgetFrame.astro

@@ -0,0 +1,34 @@
+---
+/**
+ * <WidgetFrame> — renders a tenant-registered widget (isolation:"sandbox") in a
+ * sandboxed iframe. The sandbox token list (`allow-scripts`, no
+ * `allow-same-origin`) puts the widget in an opaque origin, so it cannot read the
+ * page's cookies/DOM or its own storage, even though the bundle is served from our
+ * own origin. The widget bundle is hash-pinned in CSP and placed into a
+ * platform-defined slot.
+ */
+import { widgetFrameAttrs, type ScriptStrategy } from "@tot/public-runtime";
+
+interface Props {
+  /** Same-origin URL that loads the tenant's widget bundle. */
+  src: string;
+  /** Accessible title for the iframe (required for a11y). */
+  title: string;
+  strategy?: ScriptStrategy;
+  /** Optional fixed height; widgets may also self-size via postMessage later. */
+  height?: string;
+}
+
+const { src, title, strategy = "on-idle", height = "auto" } = Astro.props;
+const attrs = widgetFrameAttrs(strategy);
+---
+
+<iframe
+  src={src}
+  title={title}
+  sandbox={attrs.sandbox}
+  loading={attrs.loading}
+  referrerpolicy={attrs.referrerpolicy}
+  class="tot-widget-frame"
+  style={`border:0;width:100%;height:${height};`}
+></iframe>

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,116 @@
+---
+/**
+ * <NavDropdown> — one primary-nav item. Renders as:
+ *   - a plain link (no children/columns),
+ *   - a single-column dropdown (`children`), or
+ *   - a multi-column mega panel (`columns`).
+ * With an optional caret, a "NEW"-style badge, and a highlighted `flag` variant.
+ *
+ * CSS-only reveal (group-hover + group-focus-within) — no JS, keyboard-accessible.
+ * Tenant-agnostic; theme-token skinned.
+ */
+import type { ChromeNavItem, ChromeLink } from "@/lib/chrome/model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  item: ChromeNavItem;
+}
+
+const { item } = 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);
+---
+
+{
+  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,181 @@
+---
+/**
+ * <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. */
+  legal?: string;
+  class?: string;
+}
+
+const {
+  columns,
+  brand,
+  newsletter,
+  payments = [],
+  social = [],
+  compliance,
+  legal,
+  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 -->
+    {
+      legal && (
+        <p class="mt-4 font-mono text-[0.68rem] uppercase tracking-[0.08em] text-muted">{legal}</p>
+      )
+    }
+  </div>
+</footer>