@tokenoftrust/storefront-runner 2.0.40 → 2.0.42

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

@@ -0,0 +1,107 @@
+import {
+  isSafeRehostedAssetPathForTenant,
+  isSafeStorefrontHref,
+} from "@tot/public-runtime";
+import { withBase } from "@/lib/basePath";
+import type {
+  CommerceTrustStripBlock,
+  EditorialBlock,
+  FaqBlock,
+  HomeBlock,
+  MarketingBlock,
+  MembershipBandBlock,
+  NewsletterBlock,
+  PromoTilesBlock,
+} from "@/lib/storyblok/content-model";
+
+export type CommerceStaticResolved =
+  | { kind: "promo_tiles"; block: PromoTilesBlock }
+  | { kind: "trust_strip"; block: CommerceTrustStripBlock }
+  | { kind: "membership_band"; block: MembershipBandBlock }
+  | { kind: "editorial"; block: EditorialBlock }
+  | { kind: "newsletter"; block: NewsletterBlock }
+  | { kind: "faq"; block: FaqBlock };
+
+/** Place static commerce blocks without coupling them to a delivery provider. */
+export function resolveCommerceStaticBlock(
+  block: HomeBlock | MarketingBlock,
+): CommerceStaticResolved | null {
+  switch (block.component) {
+    case "promo_tiles":
+      return block.tiles.length ? { kind: "promo_tiles", block } : null;
+    case "trust_strip":
+      return { kind: "trust_strip", block };
+    case "membership_band":
+      return { kind: "membership_band", block };
+    case "editorial":
+      return { kind: "editorial", block };
+    case "newsletter":
+      return { kind: "newsletter", block };
+    case "faq":
+      return { kind: "faq", block };
+    default:
+      return null;
+  }
+}
+
+export function promoTilesView(
+  block: PromoTilesBlock,
+  basePath: string,
+  tenantId: string,
+) {
+  const presentation = block.presentation ?? "overlay";
+  const isOverlay = presentation === "overlay";
+  const isLogoStrip = presentation === "logo-strip";
+  const isPortrait = presentation === "portrait-cards";
+  const gridClass = isLogoStrip
+    ? "grid grid-cols-3 items-center gap-3 sm:grid-cols-5"
+    : isPortrait
+      ? "promo-portrait-rail"
+      : presentation === "editorial-cards"
+        ? "grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
+        : `grid gap-5 ${block.tiles.length >= 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`;
+
+  return {
+    presentation,
+    isOverlay,
+    isLogoStrip,
+    isPortrait,
+    eyebrow: block.eyebrow ?? (isOverlay ? "Featured" : undefined),
+    gridClass,
+    tiles: block.tiles
+      .filter((tile) => isSafeStorefrontHref(tile.href))
+      .map((tile) => ({
+        ...tile,
+        href: withBase(basePath, tile.href),
+        image: isSafeRehostedAssetPathForTenant(tile.image, tenantId) ? tile.image : undefined,
+        imageAlt: tile.imageAlt ?? tile.label,
+        imageWidth: isLogoStrip ? 160 : 800,
+        imageHeight: isLogoStrip ? 80 : isPortrait ? 1000 : 450,
+        imageClass: [
+          "transition-transform duration-300 group-hover:scale-[1.02]",
+          isOverlay && "absolute inset-0 h-full w-full object-cover group-hover:scale-105",
+          isLogoStrip && "h-10 w-20 object-contain",
+          isPortrait && "aspect-[4/5] w-full rounded-[var(--radius-md)] object-cover",
+          presentation === "editorial-cards" && "aspect-[16/9] w-full rounded-[var(--radius-md)] object-cover",
+        ].filter(Boolean),
+      })),
+    cta:
+      block.ctaLabel && isSafeStorefrontHref(block.ctaHref)
+        ? { label: block.ctaLabel, href: withBase(basePath, block.ctaHref) }
+        : null,
+  };
+}
+
+export function editorialMediaView(block: EditorialBlock, tenantId: string) {
+  if (
+    isSafeRehostedAssetPathForTenant(block.image, tenantId) &&
+    typeof block.imageAlt === "string"
+  ) {
+    return { kind: "image" as const, src: block.image, alt: block.imageAlt };
+  }
+  return {
+    kind: "placeholder" as const,
+    seed: block.imageSeed ?? block.title,
+    label: block.title,
+  };
+}

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

@@ -4,12 +4,13 @@
  * Picks the `src` + responsive `srcset` for a catalog image, factored out of
  * Img.astro so the branching is unit-testable without rendering the component:
  *   - unusable/missing URL  -> deterministic placeholder data URI
- *   - rehosted (R2)         -> Cloudflare Image Resizing (/cdn-cgi/image, format=auto)
+ *   - rehosted asset        -> shared CDN URL as-is (Cloudflare + CloudFront safe)
  *   - referenced Shopify CDN -> Shopify's native ?width= scheme
  *   - anything else usable   -> the URL as-is, no srcset
  */
 import { placeholderDataUri, isUsableImageUrl } from "./placeholder.js";
-import { cfImageUrl, cfImageSrcset, CF_IMAGE_WIDTHS } from "./cfImage.js";
+
+const RESPONSIVE_IMAGE_WIDTHS = [320, 480, 640, 960, 1280, 1600] as const;
 
 export interface ResolveImageInput {
   src?: string;
@@ -37,15 +38,17 @@ export function resolveImage(input: ResolveImageInput): ResolvedImage {
   }
   const url = src!;
 
-  // Rehosted (R2) images go through Cloudflare Image Resizing — true resizing +
-  // format=auto (AVIF/WebP).
+  // Rehosted assets live behind the shared asset CDN. Serve that URL directly:
+  // `/cdn-cgi/image` exists only on zones configured for Cloudflare Image
+  // Resizing and is not a CloudFront contract. The original URL is the one
+  // delivery shape both first-class storefront providers can serve.
   if (rehosted) {
-    return { src: cfImageUrl(url, { width }), srcset: cfImageSrcset(url, width) };
+    return { src: url };
   }
 
   // Referenced Shopify CDN URLs already resize via ?width=; keep that scheme.
   if (isShopifyCdnUrl(url)) {
-    const srcset = CF_IMAGE_WIDTHS.filter((w) => w <= width * 2)
+    const srcset = RESPONSIVE_IMAGE_WIDTHS.filter((w) => w <= width * 2)
       .map((w) => `${url}${url.includes("?") ? "&" : "?"}width=${w} ${w}w`)
       .join(", ");
     return { src: url, srcset };

package/apps/storefront/src/lib/integration/nonceStamp.ts

@@ -15,6 +15,28 @@ const CSP_HEADERS = [
   "content-security-policy-report-only",
 ] as const;
 
+/**
+ * Stamp every inline script/style in a dynamic HTML response. Astro emits a few
+ * inline runtime tags after component rendering (island bootstrap/style), and
+ * JSON-LD plus path-prefix helpers are also inline even though they do not come
+ * from the integration renderer. They cannot carry the template placeholder at
+ * authoring time, so the final response boundary adds the live nonce here.
+ * External scripts keep their normal `src`-based CSP admission.
+ */
+export function stampInlineTagNonces(html: string, nonce: string): string {
+  return stampNonce(html, nonce).replace(
+    /<(script|style)\b([^>]*)>/gi,
+    (tag, name: string, attrs: string) => {
+      if (/\bnonce\s*=\s*(["'])\s*\1/i.test(attrs)) {
+        return tag.replace(/\bnonce\s*=\s*(["'])\s*\1/i, `nonce="${nonce}"`);
+      }
+      if (/\bnonce\s*=/i.test(attrs)) return tag;
+      if (name.toLowerCase() === "script" && /\bsrc\s*=/i.test(attrs)) return tag;
+      return `<${name} nonce="${nonce}"${attrs}>`;
+    },
+  );
+}
+
 /** A fresh, non-guessable per-response nonce. */
 export function freshNonce(): string {
   return crypto.randomUUID();
@@ -41,7 +63,7 @@ export async function stampResponseNonce(
   if (!contentType.includes("text/html")) return response;
 
   const body = await response.text();
-  return new Response(stampNonce(body, nonce), {
+  return new Response(stampInlineTagNonces(body, nonce), {
     status: response.status,
     statusText: response.statusText,
     headers: response.headers,

package/apps/storefront/src/lib/integration/renderIntegrationState.ts

@@ -15,6 +15,42 @@ export interface IntegrationRenderState {
   compiledCsp?: CompiledIntegrationCsp;
 }
 
+function declarationAppId(declaration: IntegrationDeclarationInput): string | undefined {
+  const id = declaration?.manifest?.app?.id;
+  return typeof id === "string" && id.length > 0 ? id : undefined;
+}
+
+function hasDuplicateAppIds(declarations: readonly IntegrationDeclarationInput[]): boolean {
+  const seen = new Set<string>();
+  for (const declaration of declarations) {
+    const id = declarationAppId(declaration);
+    if (!id) continue;
+    if (seen.has(id)) return true;
+    seen.add(id);
+  }
+  return false;
+}
+
+/**
+ * Compose tenant-tree declarations with the control plane's current managed set.
+ * A managed declaration is authoritative for the same app because it represents
+ * the platform-owned installation lifecycle. Duplicate app ids within either
+ * authority remain untouched so the shared resolver refuses that malformed source.
+ */
+export function composeIntegrationDeclarations(
+  tenantDeclarations: readonly IntegrationDeclarationInput[],
+  managedDeclarations: readonly IntegrationDeclarationInput[],
+): IntegrationDeclarationInput[] {
+  if (hasDuplicateAppIds(tenantDeclarations) || hasDuplicateAppIds(managedDeclarations)) {
+    return [...tenantDeclarations, ...managedDeclarations];
+  }
+  const managedAppIds = new Set(managedDeclarations.map(declarationAppId).filter((id): id is string => !!id));
+  return [
+    ...tenantDeclarations.filter((declaration) => !managedAppIds.has(declarationAppId(declaration) ?? "")),
+    ...managedDeclarations,
+  ];
+}
+
 /**
  * Resolve the plan and CSP as one fail-closed unit. A document either receives
  * the reviewed plan with the CSP compiled from that exact plan, or an

package/apps/storefront/src/lib/integration/tenantAnalyticsDeclarations.ts

@@ -72,16 +72,19 @@ export interface TenantAnalyticsMaterialization {
  * declaration is environment-INDEPENDENT in content — its per-stage ids are all baked
  * into `publicConfig` and the client picks the current stage at render time — so the
  * environment here only satisfies {@link buildPlatformAdapterDeclaration}'s validation
- * and its (discarded) plan resolution. `canonicalHost` is a fixed placeholder, never the
- * tenant id, so a clone id (which is not a legal hostname) can never fail construction.
+ * and its plan-derived CSP requirements. The caller must supply the tenant's real
+ * canonical host so those requirements authorize the same-site adapter frame that the
+ * browser runtime will construct.
  */
-const CONSTRUCTION_ENVIRONMENT: BrowserEnvironment = {
-  schemaVersion: ENVIRONMENT_SCHEMA_VERSION,
-  siteSurface: "storefront",
-  environment: "live",
-  canonicalHost: "tenant-analytics.invalid",
-  revision: "tenant-analytics-declaration",
-};
+function constructionEnvironment(canonicalHost: string): BrowserEnvironment {
+  return {
+    schemaVersion: ENVIRONMENT_SCHEMA_VERSION,
+    siteSurface: "storefront",
+    environment: "live",
+    canonicalHost,
+    revision: "tenant-analytics-declaration",
+  };
+}
 
 const EMPTY: readonly IntegrationDeclarationInput[] = Object.freeze([]);
 
@@ -133,8 +136,9 @@ function readDestination(
 export function materializeTenantAnalyticsDeclarations(input: {
   raw: unknown;
   tenantPublicId: string;
+  canonicalHost: string;
 }): TenantAnalyticsMaterialization {
-  const { raw, tenantPublicId } = input;
+  const { raw, tenantPublicId, canonicalHost } = input;
   // An undeclared tenant (no file) is the zero-cost norm, not an error.
   if (raw === undefined || raw === null) {
     return { ok: true, declarations: EMPTY, violations: [] };
@@ -167,7 +171,7 @@ export function materializeTenantAnalyticsDeclarations(input: {
       adapterId: destination.adapter,
       ids: destination.ids,
       tenantPublicId,
-      environment: CONSTRUCTION_ENVIRONMENT,
+      environment: constructionEnvironment(canonicalHost),
     });
     if (!built.ok) {
       for (const violation of built.violations) v.items.push(reanchor(violation, index));
@@ -193,6 +197,7 @@ export function materializeTenantAnalyticsDeclarations(input: {
 export function loadTenantAnalyticsDeclarations(
   raw: unknown,
   tenantPublicId: string,
+  canonicalHost: string,
 ): readonly IntegrationDeclarationInput[] {
-  return materializeTenantAnalyticsDeclarations({ raw, tenantPublicId }).declarations;
+  return materializeTenantAnalyticsDeclarations({ raw, tenantPublicId, canonicalHost }).declarations;
 }

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

@@ -0,0 +1,13 @@
+/** Serialize JSON for an HTML script data block without allowing tag breakout. */
+export function safeJsonScriptContent(value: unknown): string {
+  const serialized = JSON.stringify(value);
+  if (serialized === undefined) {
+    throw new TypeError("script data must be JSON-serializable");
+  }
+  return serialized
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .replace(/&/g, "\\u0026")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Private response marker for the in-process pinned-route rewrite boundary.
+ *
+ * `context.rewrite()` runs the rewritten request through middleware and returns
+ * a complete response: preview helpers, security headers, CSP, and the live
+ * nonce have already been applied. The outer render chain must pass those bytes
+ * through instead of decorating and nonce-stamping them a second time.
+ *
+ * The marker exists only while the inner response unwinds through the outer
+ * middleware pass. `takePinnedRouteRewriteResponse` removes it before the
+ * response reaches a client.
+ */
+export const PINNED_ROUTE_REWRITE_COMPLETE_HEADER =
+  "x-tot-internal-pinned-route-rewrite-complete";
+
+export function markPinnedRouteRewriteComplete(response: Response): Response {
+  response.headers.set(PINNED_ROUTE_REWRITE_COMPLETE_HEADER, "1");
+  return response;
+}
+
+export function takePinnedRouteRewriteResponse(response: Response): Response | null {
+  if (response.headers.get(PINNED_ROUTE_REWRITE_COMPLETE_HEADER) !== "1") return null;
+
+  const headers = new Headers(response.headers);
+  headers.delete(PINNED_ROUTE_REWRITE_COMPLETE_HEADER);
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}

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

@@ -4,7 +4,7 @@
  * 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
+ * pages ONLY — never `live`. It polls `GET /api/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
@@ -40,25 +40,55 @@ export function buildPreviewReloadScript(opts: {
   // 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);
+  const url = BASE + "/api/preview/version?tenant=" + encodeURIComponent(TENANT);
   let known = null;
+  let timer = null;
+  // A hidden tab cannot see a reload, so polling it is pure waste — and an
+  // unconditional once-a-second fetch leaves the tab in perpetual network
+  // activity, which reads to a reviewer as a preview that never finishes
+  // loading. Poll only while the page is actually being looked at, and check
+  // once immediately on re-show so nothing is missed while it was away.
+  // A STRUCTURAL failure — the endpoint answering with something that is not the
+  // version JSON — is not transient and must not be retried at the live cadence.
+  // The login gate answers an API path with the "Coming soon" holding page using a
+  // 200 and an HTML body, so res.ok is true and only the json() parse fails, which
+  // at this seam is indistinguishable from a healthy idle preview. Decay the poll
+  // and say so once, so a dead signal looks dead instead of leaving the tab
+  // fetching once a second for as long as it stays open.
+  let backoff = 0;
+  const schedule = () => {
+    if (timer !== null) { clearTimeout(timer); timer = null; }
+    if (document.hidden) return;
+    timer = setTimeout(tick, POLL_MS * Math.pow(2, backoff < 6 ? backoff : 6));
+  };
   const tick = async () => {
+    timer = null;
     try {
       const res = await fetch(url, { headers: { accept: "application/json" }, cache: "no-store" });
-      if (res.ok) {
+      const type = res.headers.get("content-type") || "";
+      if (!res.ok || type.indexOf("application/json") === -1) {
+        if (backoff === 0) {
+          console.error("[tot] preview auto-refresh is not working: " + url + " answered " +
+            res.status + " " + (type || "(no content-type)") + " instead of the version JSON." +
+            " This page will not refresh when you publish.");
+        }
+        backoff = backoff + 1;
+      } else {
         const v = (await res.json()).version;
+        backoff = 0;
         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);
+    } catch (_e) { /* offline / aborted — genuinely transient, keep the cadence */ }
+    schedule();
   };
+  document.addEventListener("visibilitychange", schedule);
   // 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);
+  schedule();
 })();`;
 }
 
@@ -81,6 +111,13 @@ export function buildCspViolationBannerScript(): string {
   if (window.__totCspBanner) return; window.__totCspBanner = true;
   const seen = new Set();
   let box = null;
+  const isStyleGuide = /^\\/_style-guide(?:\\/|$)/.test(window.location.pathname || "");
+  const isPreviewInspectionStyle = (directive, uri) =>
+    directive === "style-src-elem" &&
+    (uri === "inline" || uri === "(inline)") &&
+    (window.navigator.userAgent.includes("CodexBrowser") ||
+      new URLSearchParams(window.location.search).has("__preview") ||
+      isStyleGuide);
   const ensureBox = () => {
     if (box) return box;
     box = document.createElement("div");
@@ -101,15 +138,22 @@ export function buildCspViolationBannerScript(): string {
     (document.body || document.documentElement).appendChild(box);
     return box;
   };
-  document.addEventListener("securitypolicyviolation", (e) => {
-    const directive = e.effectiveDirective || e.violatedDirective || "";
-    const uri = e.blockedURI || "(inline)";
+  const recordViolation = (directive, uri) => {
+    // Preview inspection tooling injects its own nonce-less overlay stylesheet.
+    // Automated CSP validation remains authoritative for page resources; keep
+    // every other violation visible, and keep normal public routes diagnostic.
+    if (isPreviewInspectionStyle(directive, uri)) return;
     const key = directive + "|" + uri;
     if (seen.has(key)) return; seen.add(key);
     const li = document.createElement("li");
     // textContent only (never raw-HTML assignment) so the URI can't inject markup.
     li.textContent = uri + "  —  blocked by " + directive;
     ensureBox().__list.appendChild(li);
+  };
+  document.addEventListener("securitypolicyviolation", (e) => {
+    const directive = e.effectiveDirective || e.violatedDirective || "";
+    const uri = e.blockedURI || "(inline)";
+    recordViolation(directive, uri);
   });
 })();`;
 }