@tokenoftrust/storefront-runner 4.2.2 → 4.2.4

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

@@ -122,7 +122,7 @@ const collapsible = variant === "light-collapsible";
             <div class="mt-4 flex items-center gap-3">
               {social.map((s) => (
                 <a
-                  href={s.href}
+                  href={withBase(basePath, s.href)}
                   aria-label={s.label}
                   rel="noopener noreferrer"
                   class="text-muted transition-colors hover:text-primary"

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

@@ -90,6 +90,7 @@ const {
 
 const { basePath } = Astro.locals;
 const homeHref = withBase(basePath, brandHref ?? "/");
+const searchFormAction = searchAction ? withBase(basePath, searchAction) : undefined;
 const showLogo = !!logo && /^(https?:|\/)/.test(logo.src);
 const dark = variant === "dark";
 const minimal = layout === "minimal";
@@ -205,11 +206,11 @@ const currentPath = Astro.url.pathname;
 
       <!-- Search (live typeahead island) -->
       {
-        !minimal && !compact && searchAction && (
+        !minimal && !compact && searchFormAction && (
           <div class="hidden flex-1 md:flex">
             <SearchTypeahead
               client:idle
-              action={searchAction}
+              action={searchFormAction}
               placeholder={searchPlaceholder}
               label={searchLabel}
             />
@@ -220,9 +221,9 @@ const currentPath = Astro.url.pathname;
       <!-- Actions: saved items + marketing CTAs + auth + account + cart (link only) + mobile menu -->
       <div class:list={["flex items-center gap-1", compact ? "col-start-3 justify-self-end" : "ml-auto"]}>
         {
-          compact && searchAction && (
+          compact && searchFormAction && (
             <a
-              href={withBase(basePath, searchAction)}
+              href={searchFormAction}
               aria-label={searchLabel ?? "Search"}
               class="hidden h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent-ink md:grid"
             >
@@ -281,7 +282,7 @@ const currentPath = Astro.url.pathname;
         {
           authLink && (
             <a data-mobile-menu-action
-              href={authLink.href}
+              href={withBase(basePath, authLink.href)}
               class="inline-flex shrink-0 items-center rounded-full border border-current px-4 py-2 font-display text-sm font-medium transition-opacity hover:opacity-80"
             >
               {authLink.label}
@@ -338,11 +339,11 @@ const currentPath = Astro.url.pathname;
   </div>
 
   {
-    compact && searchAction && (
+    compact && searchFormAction && (
       <div class="border-b border-border bg-surface px-4 py-2 md:hidden" data-header-phone-search>
         <SearchTypeahead
           client:idle
-          action={searchAction}
+          action={searchFormAction}
           placeholder={searchPlaceholder}
           label={searchLabel}
         />
@@ -387,8 +388,8 @@ const currentPath = Astro.url.pathname;
   compact && (
     <nav class:list={["fixed inset-x-0 bottom-0 z-50 grid h-[62px] border-t border-border bg-surface shadow-[0_-3px_14px_color-mix(in_srgb,var(--color-text)_10%,transparent)] md:hidden", cartHref ? "grid-cols-4" : "grid-cols-3"]} aria-label="Quick links">
       <a href={homeHref} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Home</a>
-      <a href={withBase(basePath, searchAction ?? "/search")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Search</a>
-      <a href={accountHref ? withBase(basePath, accountHref) : (authLink?.href ?? "/auth/login")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Account</a>
+      <a href={searchFormAction ?? withBase(basePath, "/search")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Search</a>
+      <a href={withBase(basePath, accountHref ?? authLink?.href ?? "/auth/login")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Account</a>
       {cartHref && <a href={withBase(basePath, cartHref)} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Cart</a>}
     </nav>
   )

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

@@ -64,7 +64,7 @@ const linkStamp = (l: ChromeLink, index: number) =>
           <span class="flex items-center gap-3">
             {social.map((s) => (
               <a
-                href={s.href}
+                href={withBase(basePath, s.href)}
                 aria-label={s.label}
                 rel="noopener noreferrer"
                 class="transition-colors hover:text-primary"

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

@@ -29,7 +29,8 @@ import { organizationLd, websiteLd } from "@/lib/content/shared/jsonld";
 import { composeStructuredData, structuredDataProfile, type StructuredDataPage } from "@/lib/content/seo/structuredData";
 import { canonicalUrl } from "@/lib/content/seo/urlForm";
 import { documentTitle } from "@/lib/content/seo/documentTitle";
-import { nonceInlineTags, prefixApiFormActions, CHROME_BODY_MARKER } from "@/lib/content/shared/rawMarketingHtml";
+import { nonceInlineTags, prefixSharedChrome, CHROME_BODY_MARKER } from "@/lib/content/shared/rawMarketingHtml";
+import { withBase } from "@/lib/publication/shared/basePath";
 import { CHROME_BEHAVIOR_JS, CHROME_HEAD_JS, sanitizeSharedChromeFragment } from "@/lib/content/shared/rawChrome";
 import { ASYNC_CSS_SWAP_JS } from "@/lib/content/shared/asyncCss";
 import { reportTrackingChainHealth } from "@/lib/measurement/tracking/interactionHealth";
@@ -196,17 +197,19 @@ if (chromeHtml && chromeHtml.includes(CHROME_BODY_MARKER)) {
   const bodyEnd = chromeHtml.lastIndexOf("</body>");
   sharedChrome = {
     header: nonceInlineTags(
-      prefixApiFormActions(
+      prefixSharedChrome(
         sanitizeSharedChromeFragment(chromeHtml.slice(bodyOpen, marker)),
+        basePath,
         apiBasePath,
       ),
       cspNonce,
     ),
     footer: nonceInlineTags(
-      prefixApiFormActions(
+      prefixSharedChrome(
         sanitizeSharedChromeFragment(
           chromeHtml.slice(marker + CHROME_BODY_MARKER.length, bodyEnd >= 0 ? bodyEnd : undefined),
         ),
+        basePath,
         apiBasePath,
       ),
       cspNonce,
@@ -394,7 +397,9 @@ const footerWidgets = await renderWidgetSlot(
             layout={resolvedHeaderVariant}
             announcement={chrome.header.announcement?.messages[0]}
             searchAction={
-              features.productSearch ? (chrome.header.search?.action ?? "/search") : undefined
+              features.productSearch
+                ? withBase(basePath, chrome.header.search?.action ?? "/search")
+                : undefined
             }
             searchPlaceholder={chrome.header.search?.placeholder}
             searchLabel={chrome.header.search?.label}

package/apps/storefront/src/lib/checkout/shared/lazyCheckoutLoader.ts

@@ -90,12 +90,17 @@ export function lazyCheckoutLoaderJs(options: LazyCheckoutLoaderOptions): string
     try { return new URL(url, document.baseURI).origin === cartOrigin; } catch (e) { return false; }
   }
   // Foxy copies the Referer onto cart_cancel_and_continue_link and ignores a
-  // continue parameter. The document policy stays strict-origin. A cart script
-  // snapshots the Referer while its src is assigned, so that assignment uses the
-  // store-home URL and restores the page before the turn ends. A cart navigation
-  // sends the full document URL through the element's referrerPolicy. That URL
-  // already includes the store origin and tenant path, and the history entry
-  // stays the page that opened the cart.
+  // continue parameter. The document policy is strict-origin-when-cross-origin,
+  // so a cross-origin request drops the tenant path. A cart script snapshots the
+  // Referer while its src is assigned: that assignment uses the store-home URL
+  // (origin plus cookie path) and restores the page before the turn ends. A cart
+  // navigation uses that same URL, then puts the shopper's URL back when the page
+  // hides or is restored from the back-forward cache, so Back returns to the page
+  // that opened the cart. A form has no referrerPolicy, so a cart submit also sets
+  // a referrer meta for that navigation and puts the document policy back after it.
+  var pendingReturn = null;
+  var referrerMeta = null;
+  var documentReferrerPolicy = "strict-origin-when-cross-origin";
   function storeHome() {
     return location.origin + cookiePath;
   }
@@ -107,6 +112,41 @@ export function lazyCheckoutLoaderJs(options: LazyCheckoutLoaderOptions): string
   function restoreHref(current) {
     if (location.href !== current) window.history.replaceState(window.history.state, "", current);
   }
+  function revealForNavigation() {
+    var current = location.href;
+    if (current === storeHome()) return;
+    pendingReturn = current;
+    revealStoreHome();
+  }
+  function restorePendingReturn() {
+    if (!pendingReturn) return;
+    var back = pendingReturn;
+    restoreHref(back);
+    if (location.href === back) pendingReturn = null;
+  }
+  function loosenReferrer() {
+    if (!referrerMeta) {
+      referrerMeta = document.createElement("meta");
+      referrerMeta.setAttribute("name", "referrer");
+      (document.head || document.documentElement).appendChild(referrerMeta);
+    }
+    referrerMeta.setAttribute("content", referrerPolicy);
+  }
+  function tightenReferrer() {
+    if (!referrerMeta) return;
+    referrerMeta.setAttribute("content", documentReferrerPolicy);
+  }
+  function endCartNavigation() {
+    restorePendingReturn();
+    tightenReferrer();
+  }
+  document.addEventListener("visibilitychange", function () {
+    if (document.visibilityState === "hidden") endCartNavigation();
+  });
+  window.addEventListener("pagehide", endCartNavigation);
+  window.addEventListener("pageshow", function (event) {
+    if (event.persisted) endCartNavigation();
+  });
   var origCreate = document.createElement;
   document.createElement = function (name) {
     var el = origCreate.apply(document, arguments);
@@ -254,6 +294,7 @@ export function lazyCheckoutLoaderJs(options: LazyCheckoutLoaderOptions): string
     anchor.referrerPolicy = referrerPolicy;
     if (state === 'ready') {
       stampAnchor(anchor);
+      if (!event.defaultPrevented) revealForNavigation();
       return;
     }
     if (event.defaultPrevented) return;
@@ -314,6 +355,11 @@ export function lazyCheckoutLoaderJs(options: LazyCheckoutLoaderOptions): string
       if (!cartForm || state === 'ready') {
         if (!event.defaultPrevented && state === 'ready') {
           form.referrerPolicy = referrerPolicy;
+          if (cartForm) {
+            form.setAttribute("referrerpolicy", referrerPolicy);
+            loosenReferrer();
+            revealForNavigation();
+          }
         }
         return;
       }

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

@@ -3,11 +3,13 @@
  *
  * A marketing tenant can ship a self-contained document (`content/<tenant>/home.html`
  * or `content/<tenant>/pages-html/<slug>.html`) that we serve VERBATIM, bypassing the
- * block Layout. Two transforms are applied at serve time:
+ * block Layout. Three transforms are applied at serve time:
  *   1. nonce-stamp the document's inline <style>/<script> so a strict CSP admits them;
  *   2. under path-prefix tenant routing (locals.basePath set), prefix same-origin
- *      root-absolute anchor hrefs with the base path so navigation stays in-tenant —
- *      the raw doc bypasses the Layout's client base-path fixer, so we do it here.
+ *      root-absolute anchor hrefs and page form actions with the base path so
+ *      navigation stays in-tenant — the raw doc bypasses the Layout's client
+ *      base-path fixer, so we do it here;
+ *   3. prefix `/api` form actions with apiBasePath, never a preview pin.
  *
  * Single home for both routes (`index.astro`, `[...slug].astro`).
  *
@@ -24,7 +26,7 @@ import {
 } from "@tot/public-runtime";
 import { reportTrackingChainHealth } from "../../measurement/tracking/interactionHealth.js";
 import { ASYNC_CSS_SWAP_JS } from "./asyncCss.js";
-import { ROOT_SERVED_HREF_NAMESPACES } from "../../publication/shared/basePath.js";
+import { ROOT_SERVED_HREF_NAMESPACES, withBase } from "../../publication/shared/basePath.js";
 
 export { rawHtmlPolicy } from "@tot/public-runtime";
 
@@ -205,6 +207,44 @@ export function prefixApiFormActions(html: string, apiBasePath: string): string
   return html.replace(API_FORM_ACTION_RE, (_match, attr: string) => `${attr}="${apiBasePath}/api/`);
 }
 
+/** True when a form target is an `/api` route. Those use {@link prefixApiFormActions}. */
+function isApiFormTarget(href: string): boolean {
+  if (!href.startsWith("/")) return false;
+  const path = href.slice(1).split(/[?#]/, 1)[0] ?? "";
+  return path === "api" || path.startsWith("api/");
+}
+
+const PAGE_FORM_ACTION_RE = /\b(action|formaction)=("([^"]*)"|'([^']*)')/g;
+
+/**
+ * Prefix same-origin page form targets (`action`/`formaction`) with `basePath`
+ * via {@link withBase}. A preview pin's header search (`/search`) stays inside
+ * that pin. `/api` targets are left for {@link prefixApiFormActions}. No-op
+ * when `basePath` is empty.
+ */
+export function prefixPageFormActions(html: string, basePath: string): string {
+  if (!basePath) return html;
+  return html.replace(PAGE_FORM_ACTION_RE, (full, attr: string, _quoted: string, dq: string | undefined, sq: string | undefined) => {
+    const href = dq ?? sq ?? "";
+    if (isApiFormTarget(href)) return full;
+    const next = withBase(basePath, href);
+    if (next === href) return full;
+    const quote = dq !== undefined ? '"' : "'";
+    return `${attr}=${quote}${next}${quote}`;
+  });
+}
+
+/**
+ * Serve-time prefix for chrome HTML on both mounts (raw documents and Layout's
+ * shared-chrome splice). Anchors go through {@link prefixTenantLinks}. Page
+ * form actions go through {@link prefixPageFormActions} (`withBase`). `/api`
+ * form actions go through {@link prefixApiFormActions} and `apiBasePath`, never
+ * a preview pin.
+ */
+export function prefixSharedChrome(html: string, basePath: string, apiBasePath: string): string {
+  return prefixApiFormActions(prefixPageFormActions(prefixTenantLinks(html, basePath), basePath), apiBasePath);
+}
+
 /** Raw pages with a robots `noindex` directive remain routable but stay out of discovery. */
 export function isIndexableHtml(html: string): boolean {
   for (const match of html.matchAll(/<meta\b([^>]*)>/gi)) {
@@ -397,10 +437,7 @@ export function rawHtmlResponse(
   composed = injectBodyEnd(composed, interactionTrackingScript(opts.nonce));
   composed = injectBodyEnd(composed, asyncCssSwapScript(opts.nonce));
   composed = resolveCanonicalHref(composed, opts.canonicalUrl);
-  const doc = prefixApiFormActions(
-    prefixTenantLinks(composed, opts.basePath),
-    opts.apiBasePath ?? "",
-  );
+  const doc = prefixSharedChrome(composed, opts.basePath, opts.apiBasePath ?? "");
   return new Response(doc, {
     headers: { "content-type": "text/html; charset=utf-8" },
   });

package/package.json

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