@tokenoftrust/storefront-runner 6.1.4 → 6.1.5

package/apps/storefront/public/shared/commerce-chrome.css

@@ -421,6 +421,11 @@ a.article-card__tag:hover { text-decoration: underline; }
 .footer-bottom nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
 .footer-bottom nav a:hover { color: var(--color-primary-contrast); text-decoration: underline; }
 
+.site-footer[data-variant="minimal"] { padding-block: clamp(1.5rem, 3vw, 2rem); }
+.site-footer[data-variant="minimal"] .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
+.site-footer[data-variant="minimal"] .footer-disclaimer,
+.site-footer[data-variant="minimal"] .footer-warning { margin-top: 0; margin-bottom: 1.5rem; }
+
 /* Source-parity light footer. Native details provide real zero-JS disclosure
    semantics on mobile; desktop CSS presents the same content as open columns. */
 .site-footer[data-variant="light-collapsible"] {

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

@@ -73,10 +73,12 @@ const bottomLinkStamp = (l: ChromeLink, index: number) =>
   });
 const newsletterAgeAttestation = resolveNewsletterAgeAttestation(newsletter?.ageAttestation);
 const collapsible = variant === "light-collapsible";
+const minimal = variant === "minimal";
 ---
 
 <footer class:list={["border-t border-border bg-surface text-text", collapsible && "footer-collapsible pb-[62px] md:pb-0", className]} data-variant={variant}>
-  <div class="container-prose py-12">
+  <div class:list={["container-prose", minimal ? "py-6 md:py-8" : "py-12"]}>
+    {!minimal && (
     <div class="grid gap-10 md:grid-cols-[1.4fr_repeat(3,1fr)]">
       <!-- Brand -->
       <div>
@@ -176,10 +178,11 @@ const collapsible = variant === "light-collapsible";
         })
       }
     </div>
+    )}
 
     <!-- Newsletter -->
     {
-      newsletter && (
+      !minimal && 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>}
@@ -225,7 +228,7 @@ const collapsible = variant === "light-collapsible";
 
     <!-- Payment badges -->
     {
-      payments.length > 0 && (
+      !minimal && 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">
@@ -239,7 +242,7 @@ const collapsible = variant === "light-collapsible";
     <!-- Merchant legal copy (verbatim) -->
     {
       disclaimer?.trim() && (
-        <p class="mt-8 border-t border-border pt-6 text-xs text-muted" data-footer-disclaimer>
+        <p class:list={["text-xs text-muted", !minimal && "mt-8 border-t border-border pt-6"]} data-footer-disclaimer>
           {disclaimer.trim().split(/\r?\n/).map((line, i) => (
             <>
               {i > 0 && <br />}
@@ -253,14 +256,14 @@ const collapsible = variant === "light-collapsible";
     <!-- Compliance / trust line -->
     {
       compliance && (
-        <p class="mt-8 border-t border-border pt-6 text-xs text-muted">{compliance}</p>
+        <p class:list={["text-xs text-muted", minimal ? disclaimer?.trim() && "mt-4" : "mt-8 border-t border-border pt-6"]}>{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">
+        <div class:list={["flex flex-col gap-3 text-xs text-muted sm:flex-row sm:items-center sm:justify-between", (!minimal || disclaimer?.trim() || compliance) && "mt-4 border-t border-border pt-4"]}>
           {legal && <p class="font-mono text-[0.68rem] uppercase tracking-[0.08em]">{legal}</p>}
           {
             bottomLinks.length > 0 && (

package/apps/storefront/src/lib/content/chrome/examples/tokenoftrust.chrome-assignments.example.json

@@ -1,6 +1,6 @@
 {
   "assignments": {
     "/contact/contact-sales": { "headerVariant": "minimal" },
-    "/contact/contact-sales/thank-you": { "headerVariant": "minimal" }
+    "/contact/contact-sales/thank-you": { "headerVariant": "minimal", "footerVariant": "minimal" }
   }
 }

package/apps/storefront/src/lib/content/shared/rawChrome.ts

@@ -49,11 +49,12 @@ import type {
   ChromeNavItem,
   ChromeSearch,
   ChromeUtilityNav,
+  FooterVariant,
   HeaderVariant,
   SocialLink,
 } from "../chrome/model.js";
 import { isSafeAgeGateHref, resolveAgeGateCopy, resolveChromeAssignment } from "../chrome/model.js";
-import { resolveHeaderVariant } from "../chrome/variant.js";
+import { resolveFooterVariant, resolveHeaderVariant } from "../chrome/variant.js";
 
 /** HTML-escape text/attribute content. Covers the five significant characters. */
 function esc(value: string): string {
@@ -534,11 +535,12 @@ function renderFooterNewsletter(n: NonNullable<ChromeFooter["newsletter"]>): str
   );
 }
 
-function renderFooter(footer: ChromeFooter): string {
-  const collapsible = footer.variant === "light-collapsible";
+function renderFooter(footer: ChromeFooter, variant: FooterVariant): string {
+  const minimal = variant === "minimal";
+  const collapsible = variant === "light-collapsible";
   const brand = footer.brand;
   const brandBlock =
-    brand || footer.newsletter
+    !minimal && (brand || footer.newsletter)
       ? (() => {
           const logo = brand?.logo && /^(https?:|\/)/.test(brand.logo.src)
             ? `<img src="${esc(brand.logo.src)}" alt="${esc(brand.logo.alt)}"${
@@ -556,7 +558,7 @@ function renderFooter(footer: ChromeFooter): string {
   // — scope indices count RENDERED grid columns, so they describe where a link
   // actually is rather than where it sat in the authored array.
   const { gridColumns, legalLinks } = splitFooterLegal(footer.columns);
-  const columns = gridColumns
+  const columns = (minimal ? [] : gridColumns)
     .map((c, colIndex) => {
       const links = c.links
         .map((l, i) => {
@@ -576,15 +578,15 @@ function renderFooter(footer: ChromeFooter): string {
         : `      <div class="footer-col">\n        <p class="footer-col-title">${esc(c.title)}</p>\n        <ul>${links}</ul>\n      </div>`;
     })
     .join("\n");
-  const trust = footer.trustMarks?.length
+  const trust = !minimal && footer.trustMarks?.length
     ? `\n    <div class="trust-marks" aria-label="Store commitments">${footer.trustMarks
         .map((t) => `<span><svg viewBox="0 0 24 24">${t.icon}</svg>${esc(t.label)}</span>`)
         .join("")}</div>`
     : "";
-  const social = footer.social?.length
+  const social = !minimal && footer.social?.length
     ? `\n    <div class="footer-social">${renderSocial(footer.social)}</div>`
     : "";
-  const payments = footer.payments?.length
+  const payments = !minimal && footer.payments?.length
     ? `\n    <div class="pay-badges" aria-label="Accepted payments">${footer.payments
         .map((p) => `<span>${esc(p)}</span>`)
         .join("")}</div>`
@@ -620,9 +622,9 @@ function renderFooter(footer: ChromeFooter): string {
   const bottom =
     bottomText || legalNav ? `\n    <div class="footer-bottom">${bottomText}${legalNav}</div>` : "";
   return (
-    `<footer class="site-footer" data-variant="${esc(footer.variant)}">\n` +
+    `<footer class="site-footer" data-variant="${esc(variant)}">\n` +
     `  <div class="container">\n` +
-    `    <div class="footer-grid">\n${brandBlock}${columns}\n    </div>` +
+    (minimal ? "" : `    <div class="footer-grid">\n${brandBlock}${columns}\n    </div>`) +
     `${trust}${social}${payments}${disclaimer}${warning}${bottom}\n` +
     `  </div>\n` +
     `</footer>`
@@ -962,10 +964,8 @@ function faviconMime(href: string): string {
  * `aria-current="page"` on the primary-nav link that exactly matches it.
  *
  * `assignments`, when given, is the tenant's page-assignment manifest: the
- * entry matching `currentPath` overrides `chrome.header.variant` for THIS page
- * only. Resolution happens once, here, through the same fail-closed
- * resolveHeaderVariant the Layout.astro prop path uses, and the resolved value
- * is what reaches the markup.
+ * entry matching `currentPath` overrides the header/footer variants for this page
+ * through the same fail-closed resolvers the Layout.astro prop path uses.
  */
 export function renderRawChrome(
   chrome: ChromeConfig,
@@ -987,10 +987,12 @@ export function renderRawChrome(
     .filter(Boolean)
     .join("\n");
 
+  const assignment = resolveChromeAssignment(assignments, currentPath);
   const headerVariant = resolveHeaderVariant(
-    resolveChromeAssignment(assignments, currentPath)?.headerVariant,
+    assignment?.headerVariant,
     chrome.header.variant,
   );
+  const footerVariant = resolveFooterVariant(assignment?.footerVariant, chrome.footer.variant);
 
   const skipHref = esc(chrome.skipLink?.href ?? "#main");
   const skipLabel = esc(chrome.skipLink?.label ?? "Skip to main content");
@@ -1006,7 +1008,7 @@ export function renderRawChrome(
     chrome.complianceStrip
       ? `<div class="compliance-strip"><div class="container"><p>${esc(chrome.complianceStrip)}</p></div></div>`
       : "",
-    renderFooter(chrome.footer),
+    renderFooter(chrome.footer, footerVariant),
   ].filter(Boolean);
 
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "6.1.4",
+  "version": "6.1.5",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",

package/packages/public-runtime/src/chrome.ts

@@ -289,7 +289,7 @@ export const HEADER_VARIANTS = ["primary", "minimal", "compact-centered"] as con
 export type HeaderVariant = (typeof HEADER_VARIANTS)[number];
 
 /** Footer content shapes. The string union keeps presentation explicit and validated. */
-export const FOOTER_VARIANTS = ["default", "light-collapsible"] as const;
+export const FOOTER_VARIANTS = ["default", "light-collapsible", "minimal"] as const;
 export type FooterVariant = (typeof FOOTER_VARIANTS)[number];
 
 export function isHeaderVariant(v: unknown): v is HeaderVariant {

package/scripts/tenant/validate.mjs

@@ -203,7 +203,7 @@ function validateRawHtmlBody(html) {
 // packages/public-runtime/tests/chrome-config-shape-parity.test.ts. Kept in
 // step with packages/cli/src/validate.mjs's identical copy.
 const CHROME_HEADER_VARIANTS = new Set(["primary", "minimal", "compact-centered"]);
-const CHROME_FOOTER_VARIANTS = new Set(["default", "light-collapsible"]);
+const CHROME_FOOTER_VARIANTS = new Set(["default", "light-collapsible", "minimal"]);
 /**
  * The declarative-interaction-tracking rule, mirrored: every actionable item —
  * an object carrying both `id` and `href` — declares EXACTLY ONE of a non-empty