@tokenoftrust/storefront-runner 2.0.14 → 2.0.15

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

@@ -339,6 +339,11 @@ a.article-card__tag:hover { text-decoration: underline; }
 .footer-warning p { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); font-size: .82rem; }
 .footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--color-primary-contrast) 16%, transparent); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
 .footer-bottom p, .footer-bottom a { color: color-mix(in srgb, var(--color-primary-contrast) 60%, transparent); font-size: .82rem; }
+/* The Legal link row (a "Legal"-titled footer column, moved here — see
+   lib/chrome/footerLegal.ts). Wraps under the copyright at narrow widths
+   rather than overflowing the bar. */
+.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; }
 
 /* --- Reveal-on-scroll (raw-chrome markup uses .reveal/.in) ---------------- */
 .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }

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

@@ -27,7 +27,10 @@ interface Props {
   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`. */
+  /** Bottom-bar policy links (e.g. Privacy Policy, Terms), shown alongside `legal`.
+   * The links of a `Legal`-titled footer column, which the caller MOVES out of
+   * `columns` (lib/chrome/footerLegal.ts) — passing them in both places would
+   * render each one twice. */
   bottomLinks?: ChromeLink[];
   class?: string;
 }

package/apps/storefront/src/layouts/Layout.astro

@@ -25,6 +25,7 @@ import { organizationLd, websiteLd } from "@/lib/jsonld";
 import { nonceInlineTags, CHROME_BODY_MARKER } from "@/lib/rawMarketingHtml";
 import { reportTrackingChainHealth } from "@/lib/tracking/interactionHealth";
 import { resolveHeaderVariant, resolveFooterVariant } from "@/lib/chrome/variant";
+import { splitFooterLegal } from "@/lib/chrome/footerLegal";
 import type { HeaderVariant, FooterVariant } from "@/lib/chrome/model";
 import { renderIntegrationPhases, INTERACTION_TRACKING_BOOT_JS } from "@tot/public-runtime";
 import { readViewerSession } from "@/lib/auth/route";
@@ -208,11 +209,12 @@ const headerLogo = brandLogoValid ?? themeHeaderLogo;
 const headerWordmark = brand?.label ?? tenant.displayName;
 const headerBrandHref = brand?.href;
 
-// Footer bottom bar: a "Legal"-titled column's links win; otherwise every
-// column's links flatten into the policy-link row (mirrors the retired
-// nav/Footer.astro exactly).
-const legalCol = chrome.footer.columns.find((c) => /legal/i.test(c.title));
-const bottomLinks = legalCol ? legalCol.links : chrome.footer.columns.flatMap((c) => c.links);
+// Footer bottom bar: a "Legal"-titled column MOVES out of the grid and its
+// links render beside the copyright — one shared split with the raw renderer
+// (lib/chrome/footerLegal.ts), so neither surface can duplicate them.
+const { gridColumns: footerColumns, legalLinks: bottomLinks } = splitFooterLegal(
+  chrome.footer.columns,
+);
 const legalBase = chrome.footer.bottom?.copyright ?? `© ${new Date().getFullYear()} ${tenant.displayName}`;
 const legalLine = `${legalBase}${chrome.footer.bottom?.note ? ` · ${chrome.footer.bottom.note}` : ""}`;
 
@@ -386,7 +388,7 @@ const footerWidgets = await renderWidgetSlot(
             contact: chrome.footer.brand?.text ? [chrome.footer.brand.text] : undefined,
           }}
           variant={resolvedFooterVariant}
-          columns={chrome.footer.columns}
+          columns={footerColumns}
           newsletter={features.newsletter ? { title: "Newsletter", placeholder: "you@example.com" } : undefined}
           social={chrome.footer.social}
           legal={legalLine}

package/apps/storefront/src/lib/chrome/footerLegal.ts

@@ -0,0 +1,52 @@
+/**
+ * The footer's Legal split — ONE source of truth for both renderers (the
+ * raw-string footer in lib/rawChrome.ts and the component footer in
+ * components/chrome/SiteFooter.astro), so a tenant's `Legal` column can never
+ * land in the grid on one surface and in the bottom bar on the other.
+ *
+ * Contract, title-based (no extra schema field): a footer column titled
+ * `Legal` — case-insensitive, surrounding whitespace ignored — is not a grid
+ * column. Its links render in the bottom bar beside the copyright, inside a
+ * single `<nav aria-label="Legal">`.
+ *
+ * The column is MOVED, never copied: it leaves `.footer-grid` entirely, so
+ * each legal link appears exactly once in the DOM. Each link keeps its own
+ * governed identity (`data-tot-el`) and action (`data-tot-action`); only the
+ * placement changes, to `footer-bottom`, which is what that placement means.
+ *
+ * A tenant with no `Legal` column gets a text-only bottom bar — the other
+ * columns stay in the grid rather than being flattened into a second copy of
+ * themselves under the copyright.
+ */
+import type { ChromeLink, FooterColumn } from "./model.js";
+
+/** The bottom-bar nav's accessible name. Exactly one is emitted per footer. */
+export const LEGAL_NAV_LABEL = "Legal";
+
+/** The title-based contract: `Legal`, case- and surrounding-whitespace-insensitive. */
+export function isLegalColumnTitle(title: string): boolean {
+  return title.trim().toLowerCase() === LEGAL_NAV_LABEL.toLowerCase();
+}
+
+export interface FooterLegalSplit {
+  /** The columns that stay in `.footer-grid`, in authored order. */
+  gridColumns: FooterColumn[];
+  /** The extracted bottom-bar links, in authored order. Empty when no Legal column. */
+  legalLinks: ChromeLink[];
+}
+
+/**
+ * Partition footer columns into what the grid renders and what the bottom bar
+ * renders. Every `Legal`-titled column is extracted (a config with two is a
+ * tenant mistake, not a reason to emit a second nav) and its links concatenated
+ * in authored order.
+ */
+export function splitFooterLegal(columns: readonly FooterColumn[]): FooterLegalSplit {
+  const gridColumns: FooterColumn[] = [];
+  const legalLinks: ChromeLink[] = [];
+  for (const column of columns) {
+    if (isLegalColumnTitle(column.title)) legalLinks.push(...column.links);
+    else gridColumns.push(column);
+  }
+  return { gridColumns, legalLinks };
+}

package/apps/storefront/src/lib/chrome/trackingPlacements.ts

@@ -24,9 +24,10 @@ export const CHROME_PLACEMENT = {
   /** Footer link columns. */
   footer: "footer",
   /**
-   * Footer bottom legal/policy link row — component surface only. The raw
-   * renderer's `ChromeFooter.bottom` carries text only (no links); its footer
-   * columns cover the same links under `footer` above.
+   * Footer bottom legal/policy link row, on either surface — the links of a
+   * `Legal`-titled footer column, which both renderers move out of the grid and
+   * into the bottom bar (lib/chrome/footerLegal.ts). `ChromeFooter.bottom`
+   * itself carries text only.
    */
   footerBottom: "footer-bottom",
   /** The mobile nav drawer (MobileNav island) and its no-JS accordion fallback. */

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

@@ -28,6 +28,7 @@ import { CHROME_BODY_MARKER, CHROME_HEAD_MARKER } from "./rawMarketingHtml.js";
 import { isCurrentNavHref } from "./chrome/navCurrent.js";
 import { ctaIdentityAttr } from "./chrome/ctaIdentity.js";
 import { CHROME_PLACEMENT } from "./chrome/trackingPlacements.js";
+import { LEGAL_NAV_LABEL, splitFooterLegal } from "./chrome/footerLegal.js";
 import { trackingAttributesHtml } from "@tot/public-runtime";
 import type {
   ChromeAgeGate,
@@ -391,7 +392,11 @@ function renderFooter(footer: ChromeFooter): string {
           return `      <div class="footer-brand">${logo}${text}${news}</div>\n`;
         })()
       : "";
-  const columns = footer.columns
+  // A `Legal`-titled column moves to the bottom bar (lib/chrome/footerLegal.ts)
+  // — 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
     .map((c, colIndex) => {
       const links = c.links
         .map((l, i) => {
@@ -425,11 +430,28 @@ function renderFooter(footer: ChromeFooter): string {
   const warning = footer.warning
     ? `\n    <div class="footer-warning"><p><strong>WARNING:</strong> ${esc(footer.warning)}</p></div>`
     : "";
-  const bottom = footer.bottom
-    ? `\n    <div class="footer-bottom">${footer.bottom.copyright ? `<p>${esc(footer.bottom.copyright)}</p>` : ""}${
+  const legalNav = legalLinks.length
+    ? `<nav aria-label="${LEGAL_NAV_LABEL}"><ul>${legalLinks
+        .map((l, i) => {
+          const stamp = trackingAttributesHtml({
+            el: l.id,
+            action: l.action,
+            tracking: l.tracking,
+            placement: CHROME_PLACEMENT.footerBottom,
+            scope: "footer-bottom",
+            index: i,
+          });
+          return `<li><a href="${esc(l.href)}"${relFor(l)}${stamp}>${esc(l.label)}</a></li>`;
+        })
+        .join("")}</ul></nav>`
+    : "";
+  const bottomText = footer.bottom
+    ? `${footer.bottom.copyright ? `<p>${esc(footer.bottom.copyright)}</p>` : ""}${
         footer.bottom.note ? `<p>${esc(footer.bottom.note)}</p>` : ""
-      }</div>`
+      }`
     : "";
+  const bottom =
+    bottomText || legalNav ? `\n    <div class="footer-bottom">${bottomText}${legalNav}</div>` : "";
   return (
     `<footer class="site-footer">\n` +
     `  <div class="container">\n` +

package/package.json

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