@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,125 @@
+/**
+ * On-publish auto-refresh for the SHARED preview (reviewer/owner "it updates
+ * itself" experience). NOT the developer's local `tot dev` HMR loop — this is the
+ * shared `test`-env preview that others review.
+ *
+ * A tiny live-reload client is injected (by src/middleware) into `test`-env HTML
+ * pages ONLY — never `live`. It polls `GET /__preview/version?tenant=<id>` (the
+ * per-tenant edge cache-version integer, which bumps on every reconcile/publish;
+ * see lib/edgeCache.ts + api/preview/reconcile.ts) and reloads the page when the
+ * version changes. Poll-based v1; an SSE / Durable-Object PUSH is the later
+ * upgrade (TODO below) that removes the ~1s poll latency.
+ *
+ * CSP: the injected <script> carries the per-request nonce (same one the strict
+ * CSP header allows), so it is CSP-clean with no `unsafe-inline` and no inline
+ * event handlers.
+ */
+
+const DEFAULT_POLL_MS = 1000;
+
+/** Escape a value for safe embedding inside an inline <script> as JSON. */
+function jsonForScript(value: unknown): string {
+  // JSON.stringify covers quoting; escaping `<` defends against a `</script>`
+  // (or `<!--`) breakout even though tenant ids / base paths never contain it.
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
+/**
+ * The live-reload client body (no <script> wrapper). Kept dependency-free and
+ * tiny so it is cheap to inline on every preview page.
+ */
+export function buildPreviewReloadScript(opts: {
+  tenantId: string;
+  basePath: string;
+  pollMs?: number;
+}): string {
+  const tenant = jsonForScript(opts.tenantId);
+  const base = jsonForScript(opts.basePath ?? "");
+  const pollMs = Math.max(250, Math.floor(opts.pollMs ?? DEFAULT_POLL_MS));
+  // The version endpoint is fetched UNDER basePath so the same tenant-routing the
+  // page used resolves it (path-routed previews carry a /<domain> prefix).
+  return `(() => {
+  const TENANT = ${tenant}, BASE = ${base}, POLL_MS = ${pollMs};
+  const url = BASE + "/__preview/version?tenant=" + encodeURIComponent(TENANT);
+  let known = null;
+  const tick = async () => {
+    try {
+      const res = await fetch(url, { headers: { accept: "application/json" }, cache: "no-store" });
+      if (res.ok) {
+        const v = (await res.json()).version;
+        if (known === null) { known = v; }
+        // TODO(theme-hot-swap): when the change is theme-only, swap the CSS custom
+        // properties in place (no reload). Needs the reconcile to report a
+        // theme-only delta; gated behind this same version signal until then.
+        else if (v !== known) { location.reload(); return; }
+      }
+    } catch (_e) { /* transient — keep polling */ }
+    setTimeout(tick, POLL_MS);
+  };
+  // TODO(push): replace this poll with an SSE / Durable-Object stream so the
+  // reload is instant instead of within POLL_MS of a publish.
+  setTimeout(tick, POLL_MS);
+})();`;
+}
+
+/** True when a response is HTML we can inject into. */
+export function isHtmlResponse(response: Response): boolean {
+  if (response.status !== 200) return false;
+  return (response.headers.get("content-type") ?? "").includes("text/html");
+}
+
+/**
+ * Inject the live-reload <script> into an HTML string, before </body> (or
+ * appended when there is no </body>). Pure + unit-testable.
+ */
+export function injectPreviewReloadHtml(
+  html: string,
+  opts: { tenantId: string; basePath: string; nonce: string; pollMs?: number },
+): string {
+  const script = `<script nonce="${opts.nonce}">${buildPreviewReloadScript(opts)}</script>`;
+  if (/<\/body>/i.test(html)) {
+    return html.replace(/<\/body>/i, `${script}</body>`);
+  }
+  return html + script;
+}
+
+/**
+ * Wrap a Response, returning a new one with the reload client injected. No-op
+ * (returns the original) for non-HTML responses. The caller must have already
+ * decided this is a `test`-env response — this helper does not check the env.
+ */
+export async function injectPreviewReload(
+  response: Response,
+  opts: { tenantId: string; basePath: string; nonce: string; pollMs?: number },
+): Promise<Response> {
+  if (!isHtmlResponse(response)) return response;
+  const html = await response.text();
+  const injected = injectPreviewReloadHtml(html, opts);
+  // Preserve status + headers; the body length changed but we don't set a manual
+  // Content-Length anywhere (Workers/Astro stream), so no header fix-up needed.
+  return new Response(injected, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: response.headers,
+  });
+}
+
+/**
+ * Env-gated entrypoint the middleware calls: inject the reload client ONLY for
+ * the SHARED preview (`test`) — NEVER `live`. Returns the response unchanged for
+ * `live` (or any non-HTML response). This is the single guardrail seam, so the
+ * "present in test, absent in live" contract is unit-testable here.
+ */
+export async function maybeInjectPreviewReload(
+  response: Response,
+  opts: {
+    env: "live" | "test";
+    tenantId: string;
+    basePath: string;
+    nonce: string;
+    pollMs?: number;
+  },
+): Promise<Response> {
+  if (opts.env !== "test") return response;
+  return injectPreviewReload(response, opts);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Fixed price-bucket boundaries for the PLP price-range facet. Bucketed by a
+ * product's "from" price (price_range.min — the same figure ProductCard shows
+ * and price-asc/desc sorts by), so a product falls into exactly one bucket
+ * (no double-counting across buckets). Shared by both listProducts engines
+ * (lib/tot/query.ts, lib/d1/catalog.ts) and the FacetSidebar so bucket
+ * boundaries + labels never drift between them.
+ */
+export interface PriceBucket {
+  key: string;
+  min: number;
+  max?: number;
+  label: string;
+}
+
+export const PRICE_BUCKETS: PriceBucket[] = [
+  { key: "0-25", min: 0, max: 25, label: "Under $25" },
+  { key: "25-50", min: 25, max: 50, label: "$25 – $50" },
+  { key: "50-100", min: 50, max: 100, label: "$50 – $100" },
+  { key: "100-200", min: 100, max: 200, label: "$100 – $200" },
+  { key: "200-plus", min: 200, label: "$200 & up" },
+];
+
+export function bucketForPrice(price: number): PriceBucket {
+  return (
+    PRICE_BUCKETS.find((b) => price >= b.min && (b.max == null || price < b.max)) ??
+    PRICE_BUCKETS[PRICE_BUCKETS.length - 1]!
+  );
+}
+
+export function bucketByKey(key: string): PriceBucket | undefined {
+  return PRICE_BUCKETS.find((b) => b.key === key);
+}

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

@@ -0,0 +1,505 @@
+/**
+ * Canonical RAW chrome renderer (unit F3).
+ *
+ * ONE platform-shipped chrome wrapper, driven entirely by a tenant's `chrome.json`
+ * (typed `TenantChrome`, lib/chrome/model.ts) — CONTENT ONLY. It replaces the three
+ * divergent, hand-authored `content/<tenant>/chrome.html` documents with a single
+ * generator, so chrome lives in ONE place and a tenant supplies only data. The
+ * output is a full wrapper document carrying the splice markers the rawMarketingHtml
+ * pipeline understands (`<!--PAGE_HEAD-->` / `<!--PAGE_BODY-->`), so body-only page
+ * fragments get wrapped exactly as before (see lib/rawMarketingHtml.ts,
+ * wrapFragmentInChrome). Per decisions:
+ *   - raw-chrome-single-stylesheet: the wrapper LINKS the platform stylesheet
+ *     (/shared/commerce-chrome.css, unit F2) and emits NO inline chrome CSS — every
+ *     color/space/type comes from theme tokens the tenant's linked *-theme.css sets.
+ *   - materialization-compat: this is a deterministic server-side string; the spliced
+ *     document is a stable, self-contained artifact SEOMaterialize can capture (the
+ *     behavior JS is progressive enhancement over already-rendered markup).
+ *
+ * The markup mirrors, class-for-class, the semantic markup the F2 stylesheet styles
+ * (`.site-header`, `.header-row`, `.primary-nav`, `.mega`, `.site-footer`, …) — the
+ * SAME DOM the retired tenant chrome.html files carried, now generated from config.
+ *
+ * SECURITY: renders first-party tenant marketing config. Values are HTML-escaped so a
+ * stray quote/angle-bracket can't break out of an attribute or element; this is
+ * defense-in-depth, not a sanitizer for untrusted input.
+ */
+import { CHROME_BODY_MARKER, CHROME_HEAD_MARKER } from "./rawMarketingHtml.js";
+import type {
+  ChromeAgeGate,
+  ChromeAnnouncement,
+  ChromeBrand,
+  ChromeFooter,
+  ChromeLink,
+  ChromeNavItem,
+  ChromeUtilityNav,
+  SocialLink,
+  TenantChrome,
+} from "./chrome/model.js";
+
+/** HTML-escape text/attribute content. Covers the five significant characters. */
+function esc(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+/** Escape a value destined for a SINGLE-quoted attribute (e.g. data-messages JSON). */
+function escSingle(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/'/g, "&#39;");
+}
+
+/** Render text preserving author line breaks as <br>. */
+function withBreaks(text: string): string {
+  return esc(text).replace(/\r?\n/g, "<br>");
+}
+
+/** A rel="noopener" attribute for external/off-site links. */
+function relFor(link: ChromeLink): string {
+  return link.external ? ' rel="noopener noreferrer"' : "";
+}
+
+// Header action icons — identical across the three source tenants; the theme tokens
+// (via the shared stylesheet) color them. viewBox 0 0 24 24, no fill/stroke attrs so
+// the sheet owns presentation.
+const ICON_SEARCH =
+  '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>';
+const ICON_ACCOUNT =
+  '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7"/></svg>';
+const ICON_CART =
+  '<svg viewBox="0 0 24 24"><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>';
+
+/** Inline spans for a styled text wordmark (brand / age-gate mark). */
+function renderWordmark(parts: { text: string; className?: string }[]): string {
+  return parts
+    .map((p) => `<span${p.className ? ` class="${esc(p.className)}"` : ""}>${esc(p.text)}</span>`)
+    .join("");
+}
+
+/** Brand identity: image logo when a valid src is present, else a text wordmark. */
+function renderBrand(brand: ChromeBrand, opts: { footer?: boolean } = {}): string {
+  const href = esc(brand.href ?? "/");
+  const attrs = [
+    'class="brand"',
+    `href="${href}"`,
+    `aria-label="${esc(brand.label)}"`,
+    !opts.footer && brand.placeholder ? 'data-placeholder="brand-wordmark"' : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const logo = brand.logo;
+  const validLogo = logo && /^(https?:|\/)/.test(logo.src);
+  const inner = validLogo
+    ? `<img src="${esc(logo.src)}" alt="${esc(logo.alt)}"${
+        logo.width ? ` width="${logo.width}"` : ""
+      }${logo.height ? ` height="${logo.height}"` : ""}>`
+    : brand.wordmark?.length
+      ? renderWordmark(brand.wordmark)
+      : esc(brand.label);
+  return `<a ${attrs}>${inner}</a>`;
+}
+
+/** A single social icon link (single-path `iconPath`, or a text fallback). */
+function renderSocial(social: SocialLink[]): string {
+  return social
+    .map((s) => {
+      const inner = s.iconPath
+        ? `<svg viewBox="0 0 24 24"><path d="${esc(s.iconPath)}"/></svg>`
+        : esc(s.label);
+      return `<a href="${esc(s.href)}" aria-label="${esc(s.label)}" rel="noopener">${inner}</a>`;
+    })
+    .join("");
+}
+
+function renderAnnouncement(a: ChromeAnnouncement): string {
+  const messages = a.messages.filter((m) => m.trim().length > 0);
+  if (messages.length === 0) return "";
+  const label = esc(a.label ?? messages[0]!);
+
+  if (a.variant === "marquee") {
+    // Repeat the message stream to fill the track so the loop reads seamless.
+    const spans: string[] = [];
+    for (let i = 0; i < 8; i++) spans.push(`<span>${esc(messages[i % messages.length]!)}</span>`);
+    return (
+      `<div class="announce-marquee" aria-label="${label}">\n` +
+      `  <div class="announce-marquee__track" aria-hidden="true">${spans.join("")}</div>\n` +
+      `</div>`
+    );
+  }
+
+  if (a.variant === "bar") {
+    const data = escSingle(JSON.stringify(messages));
+    const closeBtn = a.dismissible
+      ? `<button type="button" class="announce-bar__close" id="announceClose" aria-label="Dismiss announcement">&times;</button>`
+      : "";
+    const storeKey = a.storageKey ? ` data-storage-key="${esc(a.storageKey)}"` : "";
+    const rotate = a.rotateMs && messages.length > 1 ? ` data-rotate-ms="${Math.round(a.rotateMs)}"` : "";
+    return (
+      `<div class="announce-bar" id="announceBar" role="region" aria-label="Store announcements"${storeKey}>\n` +
+      `  <div class="container">\n` +
+      `    <p class="announce-bar__msg" id="announceMsg" aria-live="polite" data-messages='${data}'${rotate}>${esc(messages[0]!)}</p>\n` +
+      `    ${closeBtn}\n` +
+      `  </div>\n` +
+      `</div>`
+    );
+  }
+
+  // "solid"
+  return `<div class="announce"><div class="container"><p>${esc(messages[0]!)}</p></div></div>`;
+}
+
+function renderUtilityNav(u: ChromeUtilityNav): string {
+  const links = (u.links ?? [])
+    .map((l) => `<li><a href="${esc(l.href)}"${relFor(l)}>${esc(l.label)}</a></li>`)
+    .join("");
+  const locale = (u.locale ?? []).map((s) => `<span class="sel">${esc(s)}</span>`).join("");
+  const social = u.social?.length ? `<span class="social">${renderSocial(u.social)}</span>` : "";
+  const cue = u.memberCue
+    ? `<a class="member-cue" href="${esc(u.memberCue.href)}">${esc(u.memberCue.label)}</a>`
+    : "";
+  const right = `${locale}${social}${cue}`;
+  return (
+    `<div class="utility-nav">\n` +
+    `  <div class="container">\n` +
+    `    <ul>${links}</ul>\n` +
+    (right ? `    <div class="utility-nav__right">${right}</div>\n` : "") +
+    `  </div>\n` +
+    `</div>`
+  );
+}
+
+/** A primary-nav item — flat link, or a mega panel when it has columns/children. */
+function renderNavItem(item: ChromeNavItem): string {
+  const columns = item.columns?.length
+    ? item.columns
+    : item.children?.length
+      ? [{ links: item.children }]
+      : [];
+  const hasPanel = columns.length > 0;
+  const linkClass = item.flag ? ' class="is-flag"' : "";
+  const badge = item.badge ? `<span class="new-badge">${esc(item.badge)}</span>` : "";
+  const caret = hasPanel ? `<span class="caret" aria-hidden="true">▾</span>` : "";
+  const haspopup = hasPanel ? ' aria-haspopup="true"' : "";
+  const link = `<a${linkClass} href="${esc(item.href)}"${haspopup}>${esc(item.label)}${badge}${caret}</a>`;
+  if (!hasPanel) return `<li class="nav-item">${link}</li>`;
+
+  const wide = columns.length > 1 ? " mega--wide" : "";
+  const cols = columns
+    .map((c) => {
+      const heading = c.title ? `<h4>${esc(c.title)}</h4>` : "";
+      const links = c.links.map((l) => `<a href="${esc(l.href)}"${relFor(l)}>${esc(l.label)}</a>`).join("");
+      return `<div class="mega__col">${heading}${links}</div>`;
+    })
+    .join("");
+  const mega = `<div class="mega${wide}"><div class="mega__cols">${cols}</div></div>`;
+  return `<li class="nav-item">${link}${mega}</li>`;
+}
+
+function renderHeader(chrome: TenantChrome): string {
+  const search = chrome.search
+    ? `<form class="header-search" action="${esc(chrome.search.action ?? "/search")}" method="get" role="search">\n` +
+      `      <label class="sr-only" for="hdr-q">${esc(chrome.search.label ?? "Search")}</label>\n` +
+      `      <input id="hdr-q" type="search" name="q" placeholder="${esc(chrome.search.placeholder ?? "Search")}" autocomplete="off">\n` +
+      `      <button type="submit" aria-label="Search">${ICON_SEARCH}</button>\n` +
+      `    </form>`
+    : "";
+  const memberCue = chrome.memberCue
+    ? `<a class="member-cue" href="${esc(chrome.memberCue.href)}" aria-label="${esc(chrome.memberCue.label)}">${esc(chrome.memberCue.label)}</a>`
+    : "";
+  const account = chrome.accountHref
+    ? `<a href="${esc(chrome.accountHref)}" aria-label="Account">${ICON_ACCOUNT}</a>`
+    : "";
+  const cart = chrome.cartHref
+    ? `<a class="cart" href="${esc(chrome.cartHref)}" aria-label="Cart">${ICON_CART}<span class="count">0</span></a>`
+    : "";
+  const hamburger =
+    `<button class="hamburger" id="hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="primaryNav"><span></span><span></span><span></span></button>`;
+  const navItems = chrome.nav.map(renderNavItem).join("\n          ");
+  return (
+    `<header class="site-header">\n` +
+    `  <div class="container header-row">\n` +
+    `    ${renderBrand(chrome.brand)}\n` +
+    (search ? `    ${search}\n` : "") +
+    `    <div class="header-actions">${memberCue}${account}${cart}${hamburger}</div>\n` +
+    `  </div>\n` +
+    `  <nav class="primary-nav-bar" aria-label="Primary">\n` +
+    `    <div class="container">\n` +
+    `      <nav class="primary-nav" id="primaryNav">\n` +
+    `        <ul>\n          ${navItems}\n        </ul>\n` +
+    `      </nav>\n` +
+    `    </div>\n` +
+    `  </nav>\n` +
+    `</header>`
+  );
+}
+
+/**
+ * Age-gate config, embedded as JSON (unit C1). The CHROME_BEHAVIOR_JS mechanism
+ * reads this and builds the dialog itself inside a closed shadow root — the same
+ * tamper-resistance pattern components/islands/IsolatedAgeGate.tsx uses for
+ * component pages (see its header comment). `<` is escaped so an authored value
+ * can't close the tag early.
+ */
+function renderAgeGate(g: ChromeAgeGate): string {
+  const json = JSON.stringify(g).replace(/</g, "\\u003c");
+  return `<script type="application/json" id="tot-age-gate-config">${json}</script>`;
+}
+
+function renderFooterNewsletter(n: NonNullable<ChromeFooter["newsletter"]>): string {
+  const attest = n.ageAttestation
+    ? `\n          <label class="footer-attest"><input type="checkbox" name="age_attestation" value="21plus" required> I confirm I am 21 years of age or older and agree to receive marketing emails.</label>`
+    : "";
+  const title = n.title ? `<h4>${esc(n.title)}</h4>` : "";
+  const body = n.body ? `<p>${esc(n.body)}</p>` : "";
+  return (
+    `${title}${body}` +
+    `<form class="footer-news" action="${esc(n.action ?? "/api/newsletter")}" method="post">\n` +
+    `          <input type="hidden" name="source" value="${esc(n.source ?? "footer")}">\n` +
+    `          <label class="sr-only" for="foot-email">Email</label>\n` +
+    `          <div class="footer-news__row">\n` +
+    `            <input id="foot-email" type="email" name="email" placeholder="${esc(n.placeholder ?? "Email address")}" required>\n` +
+    `            <button type="submit">Subscribe</button>\n` +
+    `          </div>${attest}\n` +
+    `        </form>`
+  );
+}
+
+function renderFooter(footer: ChromeFooter): string {
+  const brand = footer.brand;
+  const brandBlock =
+    brand || footer.newsletter
+      ? (() => {
+          const logo = brand?.logo && /^(https?:|\/)/.test(brand.logo.src)
+            ? `<img src="${esc(brand.logo.src)}" alt="${esc(brand.logo.alt)}"${
+                brand.logo.width ? ` width="${brand.logo.width}"` : ""
+              }${brand.logo.height ? ` height="${brand.logo.height}"` : ""}>`
+            : brand?.wordmark?.length
+              ? `<span class="brand">${renderWordmark(brand.wordmark)}</span>`
+              : "";
+          const text = brand?.text ? `<p>${withBreaks(brand.text)}</p>` : "";
+          const news = footer.newsletter ? renderFooterNewsletter(footer.newsletter) : "";
+          return `      <div class="footer-brand">${logo}${text}${news}</div>\n`;
+        })()
+      : "";
+  const columns = footer.columns
+    .map((c) => {
+      const links = c.links
+        .map((l) => `<li><a href="${esc(l.href)}"${relFor(l)}>${esc(l.label)}</a></li>`)
+        .join("");
+      return `      <div class="footer-col">\n        <h4>${esc(c.title)}</h4>\n        <ul>${links}</ul>\n      </div>`;
+    })
+    .join("\n");
+  const trust = 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
+    ? `\n    <div class="footer-social">${renderSocial(footer.social)}</div>`
+    : "";
+  const payments = footer.payments?.length
+    ? `\n    <div class="pay-badges" aria-label="Accepted payments">${footer.payments
+        .map((p) => `<span>${esc(p)}</span>`)
+        .join("")}</div>`
+    : "";
+  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>` : ""}${
+        footer.bottom.note ? `<p>${esc(footer.bottom.note)}</p>` : ""
+      }</div>`
+    : "";
+  return (
+    `<footer class="site-footer">\n` +
+    `  <div class="container">\n` +
+    `    <div class="footer-grid">\n${brandBlock}${columns}\n    </div>` +
+    `${trust}${social}${payments}${warning}${bottom}\n` +
+    `  </div>\n` +
+    `</footer>`
+  );
+}
+
+/**
+ * The ONE shared, nonce-safe chrome behavior script. Inlined into the wrapper (the
+ * rawMarketingHtml pipeline stamps it with the page nonce, so a strict CSP admits it)
+ * — a single canonical source, never copy-pasted per tenant. Each block is guarded on
+ * the presence of its elements, so a wrapper that omits the announce bar / age gate
+ * runs the remaining behavior harmlessly. Progressive enhancement: the markup already
+ * works without it (nav is visible, gate defaults open only when JS enables it).
+ */
+export const CHROME_BEHAVIOR_JS = `(function () {
+  // Mobile nav drawer
+  var burger = document.getElementById('hamburger');
+  var nav = document.getElementById('primaryNav');
+  if (burger && nav) burger.addEventListener('click', function () {
+    var open = nav.classList.toggle('open');
+    burger.setAttribute('aria-expanded', open ? 'true' : 'false');
+  });
+
+  // Announcement bar: dismiss (remembered) + rotate messages
+  var bar = document.getElementById('announceBar');
+  if (bar) {
+    var key = bar.getAttribute('data-storage-key') || 'tot_announce_dismissed';
+    var closeBtn = document.getElementById('announceClose');
+    var msg = document.getElementById('announceMsg');
+    try { if (localStorage.getItem(key) === '1') bar.hidden = true; } catch (e) {}
+    if (closeBtn) closeBtn.addEventListener('click', function () {
+      bar.hidden = true;
+      try { localStorage.setItem(key, '1'); } catch (e) {}
+    });
+    if (msg && !bar.hidden) {
+      var rotateMs = parseInt(msg.getAttribute('data-rotate-ms') || '0', 10);
+      var list; try { list = JSON.parse(msg.getAttribute('data-messages') || '[]'); } catch (e) { list = []; }
+      if (rotateMs > 0 && list.length > 1) {
+        var i = 0;
+        setInterval(function () { i = (i + 1) % list.length; msg.textContent = list[i]; }, rotateMs);
+      }
+    }
+  }
+
+  // 21+ age gate — shadow-isolated (unit C1). Only the host <div> lives in light
+  // DOM (data-tot-compliance, the same marker components/islands/IsolatedAgeGate.tsx
+  // uses); its contents sit behind a closed shadow root, so tenant CSS/JS can't
+  // select, restyle, or hide the dialog. A MutationObserver re-asserts the host the
+  // same way that component does. Config comes from the JSON payload rawChrome.ts
+  // renders (ChromeAgeGate, unchanged shape) so authoring stays the same.
+  var gateConfigEl = document.getElementById('tot-age-gate-config');
+  if (gateConfigEl && !document.querySelector('[data-tot-compliance]')) {
+    var gcfg; try { gcfg = JSON.parse(gateConfigEl.textContent || 'null'); } catch (e) { gcfg = null; }
+    if (gcfg) {
+      var gescape = function (s) {
+        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      };
+      var gkey = gcfg.storageKey || 'tot:age-affirmed';
+
+      var host = document.createElement('div');
+      host.setAttribute('data-tot-compliance', '');
+      var shadow = host.attachShadow({ mode: 'closed' });
+      document.querySelectorAll('link[rel="stylesheet"]').forEach(function (l) {
+        shadow.appendChild(l.cloneNode(true));
+      });
+      var mount = document.createElement('div');
+      shadow.appendChild(mount);
+
+      var gmark = gcfg.mark && gcfg.mark.length
+        ? '<p class="age-gate__mark">' + gcfg.mark.map(function (p) {
+            return '<span' + (p.className ? ' class="' + gescape(p.className) + '"' : '') + '>' + gescape(p.text) + '</span>';
+          }).join('') + '</p>'
+        : '';
+      var gtitle = gescape(gcfg.title || ('Are you ' + gcfg.minAge + ' or older?'));
+      var glede = gcfg.lede ? '<p class="age-gate__lede" id="ageGateBody">' + gescape(gcfg.lede) + '</p>' : '';
+      var gfine = gcfg.fineText ? '<p class="age-gate__fine">' + gescape(gcfg.fineText) + '</p>' : '';
+      var gdeny = gescape(gcfg.denyText || ('You must be ' + gcfg.minAge + ' or older to enter this site.'));
+      var gdescribedby = gcfg.lede ? ' aria-describedby="ageGateBody"' : '';
+
+      mount.innerHTML =
+        '<div class="age-gate" id="ageGate" role="dialog" aria-modal="true" aria-labelledby="ageGateTitle"' + gdescribedby + '>' +
+        '<div class="age-gate__panel">' + gmark +
+        '<h2 id="ageGateTitle">' + gtitle + '</h2>' + glede +
+        '<div class="age-gate__actions">' +
+        '<button type="button" class="btn btn-primary age-gate__enter" id="ageYes">' + gescape(gcfg.yesLabel || ('Yes, I am ' + gcfg.minAge + '+')) + '</button>' +
+        '<button type="button" class="btn btn-outline age-gate__enter" id="ageNo">' + gescape(gcfg.noLabel || ('No, I am under ' + gcfg.minAge)) + '</button>' +
+        '</div>' +
+        '<p class="age-gate__deny" id="ageDeny">' + gdeny + '</p>' + gfine +
+        '</div></div>';
+
+      var gate = mount.querySelector('#ageGate');
+      var gok = false;
+      try { gok = localStorage.getItem(gkey) === 'yes'; } catch (e) {}
+      if (!gok) {
+        gate.classList.add('is-open');
+        document.documentElement.style.overflow = 'hidden';
+      }
+      var gyes = mount.querySelector('#ageYes');
+      var gno = mount.querySelector('#ageNo');
+      if (gyes) gyes.addEventListener('click', function () {
+        try { localStorage.setItem(gkey, 'yes'); } catch (e) {}
+        gate.classList.remove('is-open');
+        document.documentElement.style.overflow = '';
+      });
+      if (gno) gno.addEventListener('click', function () { gate.classList.add('is-denied'); });
+
+      document.body.appendChild(host);
+
+      var gensure = function () {
+        if (!host.isConnected) document.body.appendChild(host);
+        if (host.style.display === 'none') host.style.display = '';
+        if (host.style.visibility === 'hidden') host.style.visibility = '';
+        if (host.hasAttribute('hidden')) host.removeAttribute('hidden');
+      };
+      var gobserver = new MutationObserver(gensure);
+      gobserver.observe(document.body, { childList: true });
+      gobserver.observe(host, { attributes: true, attributeFilter: ['style', 'class', 'hidden'] });
+    }
+  }
+})();`;
+
+/** The platform-shipped chrome stylesheet every rendered wrapper links (unit F2). */
+export const SHARED_CHROME_STYLESHEET = "/shared/commerce-chrome.css";
+
+/**
+ * Render the canonical chrome wrapper document for a tenant, from its config.
+ *
+ * The returned string is a full `<!doctype html>` document containing the two splice
+ * markers (`<!--PAGE_HEAD-->`, `<!--PAGE_BODY-->`); pass it to rawHtmlResponse as the
+ * `chromeWrapper` so a body-only fragment is spliced in and the whole thing is
+ * nonce-stamped + base-path-prefixed. Optional sections (age gate, announcement,
+ * utility nav, member cue, footer extras) render only when their config is present.
+ */
+export function renderRawChrome(chrome: TenantChrome): string {
+  const lang = esc(chrome.lang ?? "en");
+  const head = chrome.head ?? {};
+  const headLinks = [
+    head.themeColor ? `<meta name="theme-color" content="${esc(head.themeColor)}">` : "",
+    head.favicon ? `<link rel="icon" type="image/png" href="${esc(head.favicon)}">` : "",
+    ...(head.themeStylesheets ?? []).map((h) => `<link rel="stylesheet" href="${esc(h)}">`),
+    `<link rel="stylesheet" href="${SHARED_CHROME_STYLESHEET}">`,
+  ]
+    .filter(Boolean)
+    .join("\n");
+
+  const skipHref = esc(chrome.skipLink?.href ?? "#main");
+  const skipLabel = esc(chrome.skipLink?.label ?? "Skip to main content");
+
+  const sections = [
+    chrome.warningBar ? `<div class="topbar-warning"><p>${esc(chrome.warningBar)}</p></div>` : "",
+    chrome.announcement ? renderAnnouncement(chrome.announcement) : "",
+    chrome.utilityNav ? renderUtilityNav(chrome.utilityNav) : "",
+    renderHeader(chrome),
+  ].filter(Boolean);
+
+  const trailing = [
+    chrome.complianceStrip
+      ? `<div class="compliance-strip"><div class="container"><p>${esc(chrome.complianceStrip)}</p></div></div>`
+      : "",
+    renderFooter(chrome.footer),
+  ].filter(Boolean);
+
+  return (
+    `<!DOCTYPE html>\n` +
+    `<html lang="${lang}">\n` +
+    `<head>\n` +
+    `<meta charset="UTF-8">\n` +
+    `<meta name="viewport" content="width=device-width, initial-scale=1.0">\n` +
+    `${headLinks}\n` +
+    `${CHROME_HEAD_MARKER}\n` +
+    `</head>\n` +
+    `<body>\n` +
+    `<a class="skip-link" href="${skipHref}">${skipLabel}</a>\n\n` +
+    `${sections.join("\n\n")}\n\n` +
+    `${CHROME_BODY_MARKER}\n\n` +
+    `${trailing.join("\n\n")}\n\n` +
+    (chrome.ageGate ? `${renderAgeGate(chrome.ageGate)}\n` : "") +
+    `<script>${CHROME_BEHAVIOR_JS}</script>\n` +
+    `</body>\n` +
+    `</html>\n`
+  );
+}