@tokenoftrust/storefront-runner 2.0.40 → 2.0.42

package/apps/storefront/src/components/islands/AgeGate.tsx

@@ -7,30 +7,60 @@
  * reimplement verification here. Affirmation is remembered in localStorage.
  */
 import { useEffect, useRef, useState } from "preact/hooks";
+import type { ChromeAgeGate } from "@/lib/chrome/model";
+import { deriveAgeGateStorageKey, resolveAgeGateCopy } from "@/lib/chrome/model";
 
-interface Props {
+export interface Props {
   minAge: number;
   brand: string;
+  tenantId: string;
+  presentation?: ChromeAgeGate;
+  /** Platform wrapper hook; tenants cannot supply or override this. */
+  onBlockingChange?: (blocking: boolean) => void;
 }
 
-const KEY = "tot:age-affirmed";
+export function resolveAgeGateRuntime({
+  minAge,
+  brand,
+  tenantId,
+  presentation,
+}: Props) {
+  return {
+    minAge,
+    storageKey: deriveAgeGateStorageKey(tenantId, minAge),
+    compact: presentation?.variant === "compact-modal",
+    title: resolveAgeGateCopy(presentation?.title, minAge) ?? `Are you ${minAge} or older?`,
+    lede:
+      resolveAgeGateCopy(presentation?.lede, minAge) ??
+      `${brand} sells age-restricted products. You must be ${minAge}+ to enter. By continuing you confirm your age — we verify it for real at checkout.`,
+    yesLabel:
+      resolveAgeGateCopy(presentation?.yesLabel, minAge) ?? `Yes, I'm ${minAge} or older`,
+    noLabel: resolveAgeGateCopy(presentation?.noLabel, minAge) ?? "No",
+    denyText:
+      resolveAgeGateCopy(presentation?.denyText, minAge) ??
+      `You must be ${minAge} or older to view this store. Please close this tab.`,
+    fineText: resolveAgeGateCopy(presentation?.fineText, minAge),
+  };
+}
 
-export default function AgeGate({ minAge, brand }: Props) {
+export default function AgeGate({ minAge, brand, tenantId, presentation, onBlockingChange }: Props) {
   const [state, setState] = useState<"hidden" | "ask" | "denied">("hidden");
   const yesRef = useRef<HTMLButtonElement>(null);
+  const retryRef = useRef<HTMLButtonElement>(null);
+  const { storageKey, compact, title, lede, yesLabel, noLabel, denyText, fineText } =
+    resolveAgeGateRuntime({ minAge, brand, tenantId, presentation });
 
   useEffect(() => {
     let affirmed = false;
     try {
-      affirmed = localStorage.getItem(KEY) === "yes";
+      affirmed = window.localStorage.getItem(storageKey) === "yes";
     } catch {
       /* storage disabled — show the gate */
     }
     if (!affirmed) {
       setState("ask");
-      document.documentElement.style.overflow = "hidden";
     }
-  }, []);
+  }, [storageKey]);
 
   useEffect(() => {
     // preventScroll: the gate is a fixed overlay, but its host <div> is appended
@@ -38,12 +68,15 @@ export default function AgeGate({ minAge, brand }: Props) {
     // underlying page down to that host — leaving the page at the bottom once the
     // gate is dismissed. preventScroll keeps the a11y focus without the jump.
     if (state === "ask") yesRef.current?.focus({ preventScroll: true });
-    if (state === "hidden") document.documentElement.style.overflow = "";
-  }, [state]);
+    if (state === "denied") retryRef.current?.focus({ preventScroll: true });
+    onBlockingChange?.(state !== "hidden");
+  }, [state, onBlockingChange]);
+
+  useEffect(() => () => onBlockingChange?.(false), [onBlockingChange]);
 
   const affirm = () => {
     try {
-      localStorage.setItem(KEY, "yes");
+      window.localStorage.setItem(storageKey, "yes");
     } catch {
       /* ignore */
     }
@@ -52,52 +85,128 @@ export default function AgeGate({ minAge, brand }: Props) {
 
   if (state === "hidden") return null;
 
+  // This component lives in a closed shadow root. Its presentation must not
+  // depend on a stylesheet crossing that boundary: a dynamically-created
+  // <style> would be refused by the page's strict style-src, while style
+  // attributes are intentionally admitted by style-src-attr. Keep the modal
+  // self-contained, token-driven, and responsive without opening either the
+  // shadow root or the CSP.
+  const overlayStyle = {
+    boxSizing: "border-box",
+    position: "fixed" as const,
+    inset: "0",
+    display: "flex",
+    alignItems: compact ? "flex-start" : "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+    padding: compact ? "min(24px, 4vw)" : "20px",
+    background: compact ? "rgba(0, 0, 0, 0.5)" : "color-mix(in srgb, var(--color-text, #111) 75%, transparent)",
+    backdropFilter: compact ? undefined : "blur(4px)",
+    color: "var(--color-text, #171717)",
+    fontFamily: "var(--font-body, system-ui, sans-serif)",
+    pointerEvents: "auto",
+  };
+  const panelStyle = {
+    boxSizing: "border-box",
+    width: compact ? "min(600px, calc(100vw - 32px))" : "min(480px, calc(100vw - 40px))",
+    minHeight: compact ? "min(382px, calc(100vh - 48px))" : undefined,
+    maxHeight: compact ? "calc(100vh - 48px)" : undefined,
+    overflowY: compact ? "auto" : undefined,
+    padding: compact ? "32px" : "28px",
+    borderRadius: compact ? "5px" : "var(--radius-lg, 12px)",
+    background: "var(--color-surface, #fff)",
+    boxShadow: compact ? "0 20px 60px rgba(0, 0, 0, 0.35)" : "var(--shadow-lg, 0 24px 60px -20px rgba(0, 0, 0, .22))",
+    textAlign: "center" as const,
+  };
+  const buttonBase = {
+    boxSizing: "border-box",
+    minHeight: compact ? "48px" : undefined,
+    padding: "12px 24px",
+    borderRadius: compact ? "3px" : "var(--radius-md, 6px)",
+    fontFamily: "var(--font-display, system-ui, sans-serif)",
+    fontSize: "14px",
+    fontWeight: 600,
+    lineHeight: 1.2,
+    cursor: "pointer",
+  };
+
   return (
     <div
-      class="fixed inset-0 z-[100] grid place-items-center bg-[color-mix(in_srgb,var(--color-text)_75%,transparent)] p-5 backdrop-blur-sm"
+      style={overlayStyle}
       role="dialog"
       aria-modal="true"
       aria-labelledby="agegate-title"
+      aria-describedby="agegate-description"
+      onKeyDown={(event) => {
+        if (event.key !== "Tab") return;
+        const controls = Array.from(
+          event.currentTarget.querySelectorAll<HTMLButtonElement>("button:not([disabled])"),
+        );
+        if (controls.length === 0) return;
+        const first = controls[0]!;
+        const last = controls[controls.length - 1]!;
+        if (event.shiftKey && event.target === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && event.target === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }}
     >
-      <div class="w-[min(30rem,100%)] rounded-[var(--radius-lg)] bg-[var(--color-surface)] p-7 text-center shadow-[var(--shadow-lg)]">
+      <div style={panelStyle}>
         {state === "ask" ? (
           <>
-            <p class="eyebrow eyebrow--tick mx-auto mb-4 w-fit">Age verification</p>
-            <h2 id="agegate-title" class="display-md">
-              Are you {minAge} or older?
+            {presentation?.mark?.length ? (
+              <p style={{ display: "flex", justifyContent: "center", margin: "0 0 16px", fontFamily: "var(--font-display, system-ui, sans-serif)", fontSize: "18px", fontWeight: 700, letterSpacing: ".04em" }}>
+                {presentation.mark.map((part) => (
+                  <span class={part.className}>{part.text}</span>
+                ))}
+              </p>
+            ) : (
+              <p style={{ margin: "0 0 16px", fontFamily: "var(--font-display, system-ui, sans-serif)", fontSize: "12px", fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--color-muted, #616161)" }}>Age verification</p>
+            )}
+            <h2 id="agegate-title" style={{ margin: 0, fontFamily: "var(--font-display, system-ui, sans-serif)", fontSize: "clamp(24px, 4vw, 32px)", fontWeight: 600, lineHeight: 1.1, letterSpacing: "-.02em" }}>
+              {title}
             </h2>
-            <p class="mx-auto mt-3 max-w-sm text-[var(--color-muted)]">
-              {brand} sells age-restricted products. You must be {minAge}+ to enter.
-              By continuing you confirm your age — we verify it for real at checkout.
+            <p id="agegate-description" style={{ maxWidth: "32rem", margin: "12px auto 0", color: "var(--color-muted, #616161)", fontSize: "16px", lineHeight: 1.55 }}>
+              {lede}
             </p>
-            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
+            <div style={{ display: "flex", flexDirection: compact ? "column" : "row", flexWrap: "wrap", justifyContent: "center", gap: "12px", marginTop: "24px" }}>
               <button
                 ref={yesRef}
                 type="button"
                 onClick={affirm}
-                class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3 font-display text-sm font-semibold text-[var(--color-primary-contrast)]"
+                style={{ ...buttonBase, width: compact ? "100%" : undefined, border: 0, background: "var(--color-primary, #111)", color: "var(--color-primary-contrast, #fff)" }}
               >
-                Yes, I'm {minAge} or older
+                {yesLabel}
               </button>
               <button
                 type="button"
                 onClick={() => setState("denied")}
-                class="rounded-[var(--radius-md)] border border-[var(--color-border)] px-6 py-3 font-display text-sm font-medium text-[var(--color-text)] hover:border-[var(--color-text)]"
+                style={{ ...buttonBase, width: compact ? "100%" : undefined, border: "1px solid var(--color-border, #d0d0d0)", background: "transparent", color: "var(--color-text, #171717)", fontWeight: 500 }}
               >
-                No
+                {noLabel}
               </button>
             </div>
+            {fineText && (
+              <p style={{ maxWidth: "32rem", margin: "20px auto 0", color: "var(--color-muted, #616161)", fontSize: "12px", lineHeight: 1.45 }}>
+                {fineText}
+              </p>
+            )}
           </>
         ) : (
           <>
-            <h2 id="agegate-title" class="display-md">Come back when you're {minAge}</h2>
-            <p class="mx-auto mt-3 max-w-sm text-[var(--color-muted)]">
-              You must be {minAge} or older to view this store. Please close this tab.
+            <h2 id="agegate-title" style={{ margin: 0, fontFamily: "var(--font-display, system-ui, sans-serif)", fontSize: "clamp(24px, 4vw, 32px)", fontWeight: 600, lineHeight: 1.1 }}>Come back when you're {minAge}</h2>
+            <p id="agegate-description" style={{ maxWidth: "24rem", margin: "12px auto 0", color: "var(--color-muted, #616161)", fontSize: "16px", lineHeight: 1.55 }}>
+              {denyText}
             </p>
             <button
+              ref={retryRef}
               type="button"
               onClick={() => setState("ask")}
-              class="link-accent mt-6 inline-block font-display text-sm font-medium"
+              style={{ display: "inline-block", marginTop: "24px", border: 0, background: "transparent", color: "var(--color-accent-ink, var(--color-primary, #111))", fontFamily: "var(--font-display, system-ui, sans-serif)", fontSize: "14px", fontWeight: 500, textDecoration: "underline", cursor: "pointer" }}
             >
               I entered my age incorrectly
             </button>

package/apps/storefront/src/components/islands/ImageGallery.tsx

@@ -17,7 +17,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"
 import type { CatalogImage } from "@tot/public-runtime";
 import { placeholderDataUri, isUsableImageUrl } from "@/lib/placeholder";
 import { resolveImage } from "@/lib/imageAttrs";
-import { cfImageUrl } from "@/lib/cfImage";
 
 interface Props {
   images: CatalogImage[];
@@ -34,9 +33,8 @@ const isShopifyCdnUrl = (url: string): boolean =>
 
 /**
  * Main-image src + responsive srcset. Delegates to the SHARED `resolveImage`
- * decision (same as <Img> on the PLP) so rehosted (R2) images go through
- * Cloudflare Image Resizing — `?width=` is a no-op on the R2 bucket, so the old
- * per-island srcset silently served full-size bytes at every breakpoint.
+ * decision (same as <Img> on the PLP) so rehosted images use the same
+ * provider-neutral shared-CDN URL on Cloudflare and CloudFront.
  */
 function mainImage(img: CatalogImage, title: string): { src: string; srcset?: string } {
   return resolveImage({
@@ -50,10 +48,9 @@ function mainImage(img: CatalogImage, title: string): { src: string; srcset?: st
 }
 
 /**
- * Thumbnail src — a single small (160px, 2x of the 80px strip) request, so a
- * thumbnail never downloads a full-size photo. Rehosted images resize via
- * Cloudflare Image Resizing; referenced Shopify images via their native
- * `?width=`; dead fixture URLs draw a deterministic placeholder.
+ * Thumbnail src. Referenced Shopify images use their native `?width=` contract;
+ * rehosted images use the provider-neutral shared-CDN original; dead fixture
+ * URLs draw a deterministic placeholder.
  */
 const THUMB_WIDTH = 160;
 function thumbSrc(img: CatalogImage, title: string): string {
@@ -65,7 +62,7 @@ function thumbSrc(img: CatalogImage, title: string): string {
       label: title,
     });
   }
-  if (img.rehosted) return cfImageUrl(img.url, { width: THUMB_WIDTH });
+  if (img.rehosted) return img.url;
   if (isShopifyCdnUrl(img.url)) {
     return `${img.url}${img.url.includes("?") ? "&" : "?"}width=${THUMB_WIDTH}`;
   }

package/apps/storefront/src/components/islands/IsolatedAgeGate.tsx

@@ -3,8 +3,9 @@
  * root** so no tenant CSS or JavaScript can select, restyle, or hide it.
  *
  * Why a wrapper instead of rendering <AgeGate> directly: a closed shadow root
- * also blocks the platform's own global stylesheet, so we clone the document's
- * stylesheets into the shadow root (Tailwind utilities + fonts). Theme tokens
+ * also blocks the platform's own global stylesheet, so we clone only the
+ * platform-generated/shared stylesheets into the shadow root (utilities + fonts).
+ * Tenant stylesheet links are excluded. Theme tokens
  * are CSS custom properties on :root, which *do* inherit across the shadow
  * boundary, so the gate keeps the tenant's colors.
  *
@@ -16,58 +17,205 @@
  */
 import { render } from "preact";
 import { useEffect } from "preact/hooks";
+import type { ChromeAgeGate } from "@/lib/chrome/model";
 import AgeGate from "./AgeGate";
 
-interface Props {
+export interface Props {
   minAge: number;
   brand: string;
+  tenantId: string;
+  presentation?: ChromeAgeGate;
+}
+
+interface BackgroundIsolation {
+  release(): void;
+  refresh(): void;
+}
+
+/**
+ * Width the classic scrollbar occupies right now; 0 where the scrollbar is an overlay.
+ *
+ * Locking scroll with `overflow: hidden` REMOVES that scrollbar, which widens the viewport and
+ * reflows the whole document — every block re-measures, text re-wraps, and content jumps.
+ * Measured on a regulated tenant it cost CLS 0.82-0.90 on every page long enough to scroll,
+ * while pages that never scrolled were untouched — which is the tell. That dragged Lighthouse
+ * performance from ~99 to ~74 with every timing metric still green. Core Web Vitals are
+ * field-measured and feed ranking, so it is a real cost on a revenue-bearing surface, and the
+ * gate is mandatory for these tenants: they cannot opt out of paying it.
+ */
+function scrollbarGutterWidth(): number {
+  const width = window.innerWidth - document.documentElement.clientWidth;
+  return Number.isFinite(width) && width > 0 ? width : 0;
+}
+
+/** Make the storefront behind the gate non-interactive without disturbing prior inert state. */
+export function isolateAgeGateBackground(host: HTMLElement): BackgroundIsolation {
+  const isolated = new Set<HTMLElement>();
+  const previousOverflow = document.documentElement.style.overflow;
+  const previousPaddingRight = document.documentElement.style.paddingRight;
+  let active = true;
+
+  const refresh = () => {
+    if (!active) return;
+    // Reserve the scrollbar's width BEFORE hiding it, so the viewport keeps its dimensions and
+    // nothing behind the gate moves. Measure first: once overflow is hidden the gutter reads 0.
+    const gutter = scrollbarGutterWidth();
+    if (gutter > 0 && !document.documentElement.style.paddingRight) {
+      document.documentElement.style.paddingRight = `${gutter}px`;
+    }
+    document.documentElement.style.overflow = "hidden";
+    for (const sibling of Array.from(document.body.children)) {
+      if (!(sibling instanceof HTMLElement) || sibling === host || sibling.hasAttribute("inert")) continue;
+      sibling.setAttribute("inert", "");
+      isolated.add(sibling);
+    }
+  };
+  const release = () => {
+    if (!active) return;
+    active = false;
+    for (const sibling of isolated) sibling.removeAttribute("inert");
+    isolated.clear();
+    document.documentElement.style.overflow = previousOverflow;
+    document.documentElement.style.paddingRight = previousPaddingRight;
+  };
+
+  refresh();
+  return { release, refresh };
 }
 
 const HOST_MARKER = "data-tot-compliance";
+let mountedHost: HTMLElement | null = null;
+const HOST_STYLE_FLOOR = {
+  all: "initial",
+  display: "block",
+  position: "fixed",
+  inset: "0",
+  "z-index": "2147483647",
+  visibility: "visible",
+  opacity: "1",
+  "pointer-events": "none",
+} as const;
+
+/** Inline-important floor: tenant selectors cannot hide or cover the compliance host. */
+export function hardenComplianceHost(host: HTMLElement): void {
+  for (const [property, value] of Object.entries(HOST_STYLE_FLOOR)) {
+    if (
+      host.style.getPropertyValue(property) !== value ||
+      host.style.getPropertyPriority(property) !== "important"
+    ) {
+      host.style.setProperty(property, value, "important");
+    }
+  }
+}
+
+export function isPlatformStylesheetHref(
+  href: string,
+  pageOrigin = "https://storefront.invalid/",
+  resolutionBase = pageOrigin,
+): boolean {
+  try {
+    const origin = new URL(pageOrigin).origin;
+    const url = new URL(href, resolutionBase);
+    return (
+      url.origin === origin &&
+      (url.pathname.startsWith("/_astro/") || url.pathname.startsWith("/shared/"))
+    );
+  } catch {
+    return false;
+  }
+}
+
+export function mountIsolatedAgeGate({ minAge, brand, tenantId, presentation }: Props) {
+  if (mountedHost?.isConnected) return () => {};
+
+  const host = document.createElement("div");
+  host.setAttribute(HOST_MARKER, "");
+  hardenComplianceHost(host);
+  const shadow = host.attachShadow({ mode: "closed" });
+  mountedHost = host;
+  let backgroundIsolation: BackgroundIsolation | null = null;
+
+  // Bring platform styles into the shadow root via allowlisted external
+  // stylesheet paths only (Tailwind utilities; build externalizes all CSS).
+  // Island CSS is inserted in <head> after client:load begins, so observe that
+  // trusted source as well as copying the links already present. Tenant
+  // /tenants/** stylesheets never cross this boundary. We do NOT clone inline
+  // theme styles: their nonce is response-specific, while inherited custom
+  // properties already carry the theme tokens across the boundary.
+  const copiedStylesheets = new Set<string>();
+  const copyPlatformStylesheet = (link: HTMLLinkElement) => {
+    const href = link.getAttribute("href") ?? "";
+    if (!isPlatformStylesheetHref(href, location.origin, document.baseURI)) return;
+    const resolvedHref = new URL(href, document.baseURI).href;
+    if (copiedStylesheets.has(resolvedHref)) return;
+    copiedStylesheets.add(resolvedHref);
+    shadow.appendChild(link.cloneNode(true));
+  };
+  document.head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]').forEach(copyPlatformStylesheet);
+  const stylesheetObserver = new MutationObserver((records) => {
+    for (const record of records) {
+      record.addedNodes.forEach((node) => {
+        if (node instanceof HTMLLinkElement && node.rel === "stylesheet") {
+          copyPlatformStylesheet(node);
+        }
+      });
+    }
+  });
+  stylesheetObserver.observe(document.head, { childList: true });
+
+  const mount = document.createElement("div");
+  shadow.appendChild(mount);
+  render(
+    <AgeGate
+      minAge={minAge}
+      brand={brand}
+      tenantId={tenantId}
+      presentation={presentation}
+      onBlockingChange={(blocking) => {
+        if (blocking) {
+          backgroundIsolation ??= isolateAgeGateBackground(host);
+          backgroundIsolation.refresh();
+        } else {
+          backgroundIsolation?.release();
+          backgroundIsolation = null;
+        }
+      }}
+    />,
+    mount,
+  );
+  document.body.appendChild(host);
+
+  // Re-assert: restore the host if tenant code detaches or hides it.
+  const ensure = () => {
+    if (!host.isConnected || document.body.lastElementChild !== host) {
+      document.body.appendChild(host);
+    }
+    if (host.hasAttribute("hidden")) host.removeAttribute("hidden");
+    hardenComplianceHost(host);
+    backgroundIsolation?.refresh();
+  };
+  const observer = new MutationObserver(ensure);
+  observer.observe(document.body, { childList: true });
+  observer.observe(host, {
+    attributes: true,
+    attributeFilter: ["style", "class", "hidden"],
+  });
+
+  return () => {
+    observer.disconnect();
+    stylesheetObserver.disconnect();
+    backgroundIsolation?.release();
+    render(null, mount);
+    host.remove();
+    if (mountedHost === host) mountedHost = null;
+  };
+}
 
-export default function IsolatedAgeGate({ minAge, brand }: Props) {
-  useEffect(() => {
-    // Guard against an accidental double-mount (e.g. HMR).
-    if (document.querySelector(`[${HOST_MARKER}]`)) return;
-
-    const host = document.createElement("div");
-    host.setAttribute(HOST_MARKER, "");
-    const shadow = host.attachShadow({ mode: "closed" });
-
-    // Bring platform styles into the shadow root via the external stylesheet
-    // <link>s only (Tailwind utilities; build externalizes all CSS). We do NOT
-    // clone the inline theme <style>: cloning strips its CSP nonce, and it's
-    // unneeded — CSS custom properties (the theme tokens on :root) inherit
-    // across the shadow boundary, so the gate keeps the tenant's colors anyway.
-    document
-      .querySelectorAll('link[rel="stylesheet"]')
-      .forEach((link) => shadow.appendChild(link.cloneNode(true)));
-
-    const mount = document.createElement("div");
-    shadow.appendChild(mount);
-    render(<AgeGate minAge={minAge} brand={brand} />, mount);
-    document.body.appendChild(host);
-
-    // Re-assert: restore the host if tenant code detaches or hides it.
-    const ensure = () => {
-      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");
-    };
-    const observer = new MutationObserver(ensure);
-    observer.observe(document.body, { childList: true });
-    observer.observe(host, {
-      attributes: true,
-      attributeFilter: ["style", "class", "hidden"],
-    });
-
-    return () => {
-      observer.disconnect();
-      render(null, mount);
-      host.remove();
-    };
-  }, [minAge, brand]);
+export default function IsolatedAgeGate(props: Props) {
+  useEffect(
+    () => mountIsolatedAgeGate(props),
+    [props.minAge, props.brand, props.tenantId, props.presentation],
+  );
 
   return null;
 }

package/apps/storefront/src/components/islands/SearchTypeahead.tsx

@@ -18,6 +18,8 @@ import { withClientBase } from "@/lib/basePath";
 
 interface Props {
   action?: string;
+  placeholder?: string;
+  label?: string;
 }
 
 const MAX_RESULTS = 6;
@@ -35,7 +37,11 @@ function thumbFor(doc: TypeaheadDoc): string {
   });
 }
 
-export default function SearchTypeahead({ action = "/search" }: Props) {
+export default function SearchTypeahead({
+  action = "/search",
+  placeholder = "Search products",
+  label,
+}: Props) {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<TypeaheadDoc[]>([]);
   const [open, setOpen] = useState(false);
@@ -145,7 +151,7 @@ export default function SearchTypeahead({ action = "/search" }: Props) {
     <form
       ref={rootRef}
       role="search"
-      aria-label="Site search"
+      aria-label={label ?? "Search"}
       action={action}
       method="get"
       onSubmit={(e) => {
@@ -176,14 +182,14 @@ export default function SearchTypeahead({ action = "/search" }: Props) {
           value={query}
           autocomplete="off"
           spellcheck={false}
-          aria-label="Search products"
+          aria-label={label ?? "Search"}
           // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
           role="combobox"
           aria-expanded={open}
           aria-controls={LISTBOX_ID}
           aria-autocomplete="list"
           aria-activedescendant={activeId}
-          placeholder="Search products"
+          placeholder={placeholder}
           onInput={(e) => setQuery((e.target as HTMLInputElement).value)}
           onFocus={() => {
             if (results.length > 0) setOpen(true);

package/apps/storefront/src/components/marketing/Faq.astro

@@ -6,6 +6,7 @@
  */
 import Section from "@/components/Section.astro";
 import type { FaqBlock } from "@/lib/storyblok/content-model";
+import { safeJsonScriptContent } from "@/lib/jsonScript";
 interface Props {
   block: FaqBlock;
 }
@@ -20,12 +21,18 @@ const faqLd = {
     acceptedAnswer: { "@type": "Answer", text: it.a },
   })),
 };
+const faqJsonLd = safeJsonScriptContent(faqLd);
 ---
 <Section eyebrow={block.eyebrow} title={block.title} tone="surface">
+  {block.lede && (
+    <p class="mb-8 max-w-[42rem] text-[var(--color-muted)]" data-reveal>{block.lede}</p>
+  )}
   <div class="mx-auto max-w-[46rem] divide-y divide-[var(--color-border)]" data-reveal>
     {block.items.map((it) => (
       <details class="group py-4">
-        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-display text-base font-semibold text-[var(--color-text)]">
+        {/* `py-2.5 -my-2.5` takes the disclosure row to the 44px tap minimum
+            and gives the space straight back, so the rows keep their rhythm. */}
+        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-2.5 -my-2.5 font-display text-base font-semibold text-[var(--color-text)]">
           {it.q}
           <span aria-hidden="true" class="shrink-0 text-[var(--color-accent)] transition-transform group-open:rotate-45">+</span>
         </summary>
@@ -34,4 +41,4 @@ const faqLd = {
     ))}
   </div>
 </Section>
-<script type="application/ld+json" set:html={JSON.stringify(faqLd)} is:inline />
+<script type="application/ld+json" set:html={faqJsonLd} is:inline />

package/apps/storefront/src/config/devTenantSeed.ts

@@ -70,7 +70,7 @@ export function synthesizeDevTenant(
   const appDomain = hints.appDomain ?? id;
   // The tenant's OWN tree analytics.json → the render plane's declaration seam,
   // fail-closed (a missing/invalid file yields no declarations, never a throw).
-  const integrations = loadTenantAnalyticsDeclarations(hints.analyticsRaw, id);
+  const integrations = loadTenantAnalyticsDeclarations(hints.analyticsRaw, id, appDomain);
   const base: TenantConfig = {
     tenant_id: id,
     appDomain,

package/apps/storefront/src/config/kvTenantResolver.ts

@@ -16,6 +16,7 @@
  * keeps working before KV is seeded and during a gradual cutover from static.
  */
 import type { TenantConfig, TenantResolver } from "@tot/public-runtime";
+import { withPlatformPolicy } from "@/config/tenants";
 
 const DOMAIN_PREFIX = "domain:";
 const TENANT_PREFIX = "tenant:";
@@ -35,11 +36,16 @@ export class KvTenantResolver implements TenantResolver {
     private readonly fallback?: TenantResolver,
   ) {}
 
+  // Platform policy is composed over every KV-sourced record (ADR 0035). A record
+  // written before a platform field existed does not carry it, so without this the
+  // declaration is inert for exactly the established tenants — and a record could
+  // otherwise set policy that is not a tenant's to set. The static fallback needs
+  // no composition: it IS the declaration.
   private async readTenant(id: string): Promise<TenantConfig | null> {
     const raw = await this.kv.get(TENANT_PREFIX + id, { cacheTtl: CACHE_TTL });
     if (!raw) return null;
     try {
-      return JSON.parse(raw) as TenantConfig;
+      return withPlatformPolicy(JSON.parse(raw) as TenantConfig);
     } catch {
       return null;
     }