npm - @tokenoftrust/storefront-runner - Versions diffs - 1.3.4-rc.4 → 1.4.0 - Mend

@tokenoftrust/storefront-runner 1.3.4-rc.4 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

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

@@ -5,6 +5,9 @@
  * Every page renders inside this.
  */
 import "@/styles/global.css";
+// Self-hosted web fonts (audit finding 6) — replaces the render-blocking
+// fonts.googleapis.com stylesheet. Bundled by Vite, served same-origin.
+import "@/styles/fonts.css";
 import Seo from "@/components/Seo.astro";
 import AnnouncementBar from "@/components/chrome/AnnouncementBar.astro";
 import SiteHeader from "@/components/chrome/SiteHeader.astro";
@@ -17,10 +20,13 @@ import ShippingRestrictionNotice from "@/components/compliance/ShippingRestricti
 import IsolatedAgeGate from "@/components/islands/IsolatedAgeGate.tsx";
 import AuthBadge from "@/components/auth/AuthBadge.astro";
 import { referenceTheme } from "@/themes/reference";
-import { mergeTheme, themeFontHref } from "@/themes/schema";
+import { mergeTheme } from "@/themes/schema";
 import { organizationLd, websiteLd } from "@/lib/jsonld";
 import { nonceInlineTags, CHROME_BODY_MARKER } from "@/lib/rawMarketingHtml";
 import { readViewerSession } from "@/lib/auth/route";
+import AppWidgetFrame from "@/components/apps/AppWidgetFrame.astro";
+import { getRegistryService } from "@/lib/apps/adminService.js";
+import { renderWidgetSlot } from "@/lib/apps/widgets/renderSlot.js";
 interface Props {
   title: string;
@@ -49,7 +55,6 @@ const allJsonLd = [
 ];
 const theme = mergeTheme(referenceTheme, tenant.theme_tokens);
-const fontHref = themeFontHref(theme);
 const chrome = await Astro.locals.content.getChrome();
@@ -92,12 +97,22 @@ const compliance = tenant.compliance;
 // open hosts where the gate never ran. Signed-out "Sign in" carries the current
 // path as `next`, so after the email-code round-trip the visitor lands back
 // where they were instead of the site root.
-const viewer = Astro.locals.viewer ?? (await readViewerSession(Astro));
-const nextParam = encodeURIComponent(Astro.url.pathname + Astro.url.search);
-const authLink = {
-  label: viewer ? "Dashboard" : "Sign in",
-  href: viewer ? "/dashboard" : `/auth/login?next=${nextParam}`,
-};
+//
+// Marketing tenants (siteType:"marketing" → features.catalog === false) have no
+// shopper/vendor account surface to link to: /auth/login + /dashboard are also
+// excluded outright from the static-publish route set (routeClassifier's
+// auth/+dashboard/ prefixes), so a marketing-only site can never resolve either
+// URL. Skip the affordance rather than render a dangling link — mirrors the
+// same commerce/marketing split index.astro already keys off `!features.catalog`.
+let authLink: { label: string; href: string } | undefined;
+if (features.catalog) {
+  const viewer = Astro.locals.viewer ?? (await readViewerSession(Astro));
+  const nextParam = encodeURIComponent(Astro.url.pathname + Astro.url.search);
+  authLink = {
+    label: viewer ? "Dashboard" : "Sign in",
+    href: viewer ? "/dashboard" : `/auth/login?next=${nextParam}`,
+  };
+}
 // Per-vendor header treatment from the theme file: a "dark" header renders the
 // bar in the primary color carrying the light logo (e.g. Giant Vapes' navy +
@@ -121,6 +136,23 @@ const legalLine = `© ${new Date().getFullYear()} ${tenant.displayName}${
 const analyticsToken = import.meta.env.PUBLIC_CF_ANALYTICS_TOKEN;
 const analyticsEnabled =
   analyticsToken && !/REPLACE|PLACEHOLDER/i.test(analyticsToken);
+// Private-app widgets (D5) — global.footer slot. Resolved once here so it
+// renders for BOTH footer paths below (the tenant-owned chrome.html splice
+// and the generic <Footer>) instead of being owned by either. No dark-mode
+// preference infra exists yet — "light" is the only theme hint until it does.
+const footerWidgets = await renderWidgetSlot(
+  {
+    registry: await getRegistryService(),
+    tenantId: tenant.tenant_id,
+    customizationEnv: Astro.locals.customizationEnv,
+    slot: "global.footer",
+    route: path,
+    locale: tenant.locale,
+    theme: "light",
+  },
+  Astro.locals.activeWidgetPlacements,
+);
 ---
 <!doctype html>
@@ -130,27 +162,20 @@ const analyticsEnabled =
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href={theme.brand.favicon} />
-    {/* Per-tenant theme tokens injected at the edge (brief §7). */}
-    <style set:html={themeStyle} nonce={cspNonce}></style>
+    {/* Per-tenant theme tokens injected at the edge (brief §7). The id is the
+        dev-loop hot-patch target: tenant-hot-reload.mjs recomputes this same
+        `:root{...}` block on a theme.json save and the script below swaps its
+        textContent in place — no full reload. Inert in production (no listener
+        attaches there). */}
+    <style id="tot-theme-vars" set:html={themeStyle} nonce={cspNonce}></style>
     {/* Shared chrome's own stylesheet(s) — the tenant theme (/tenants/...) plus
         either the tenant's own mkt.css or the platform /shared/commerce-chrome.css
         — so the ported chrome renders in-brand on Layout (commerce) pages too. */}
     {sharedChrome?.css.map((href) => <link rel="stylesheet" href={href} />)}
-    {
-      fontHref && (
-        <>
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link
-            rel="preconnect"
-            href="https://fonts.gstatic.com"
-            crossorigin
-          />
-          <link rel="stylesheet" href={fontHref} />
-        </>
-      )
-    }
+    {/* Web fonts are self-hosted (audit finding 6) via `@/styles/fonts.css`,
+        imported above — no third-party font stylesheet / preconnects. */}
     <Seo
       title={title}
@@ -230,6 +255,20 @@ const analyticsEnabled =
       </>
     )}
+    {/* Private-app widgets (D5, global.footer) — sandboxed per install; one
+        resolution above covers both footer paths. */}
+    {footerWidgets.map((w) => (
+      <div class="container-prose py-6">
+        <AppWidgetFrame
+          endpoint={w.endpoint}
+          launchToken={w.launchToken}
+          appOrigin={w.appOrigin}
+          installId={w.installId}
+          title={w.title ?? "App widget"}
+        />
+      </div>
+    ))}
     {capabilities.ageVerification.enabled && compliance?.minAge && (
       <IsolatedAgeGate client:load minAge={compliance.minAge} brand={tenant.displayName} />
     )}
@@ -342,6 +381,31 @@ const analyticsEnabled =
       </script>
     )}
+    {/* Dev-loop theme hot-patch (D1): tenant-hot-reload.mjs broadcasts a
+        `tot:theme-vars` HMR custom event on every theme.json save instead of
+        forcing a full reload; swap the CSS var block in place so edits repaint
+        instantly with no lost scroll position. import.meta.hot is undefined in
+        production builds, so this is a no-op there. */}
+    {import.meta.env.DEV && (
+      <script>
+        if (import.meta.hot) {
+          import.meta.hot.on("tot:theme-vars", (data: { css?: string }) => {
+            const el = document.getElementById("tot-theme-vars");
+            if (el && typeof data?.css === "string") el.textContent = data.css;
+          });
+        }
+      </script>
+    )}
+    {/* Private-app widget postMessage bridge (D5) — mounted unconditionally
+        (cheap no-op with zero tracked iframes); scans for
+        `[data-tot-widget-origin]` frames itself, so it doesn't need to know
+        which slots rendered above. */}
+    <script>
+      import { mountWidgetPostMessageBridge } from "@tot/public-runtime";
+      mountWidgetPostMessageBridge();
+    </script>
     {/* Scroll-reveal + analytics pageview hook. ~0.5KB, no framework. */}
     <script>
       // Reveal-on-scroll (respects reduced motion via CSS).
@@ -366,5 +430,15 @@ const analyticsEnabled =
         els.forEach((el) => el.classList.add("is-in"));
       }
     </script>
+    {/* Field Web Vitals (F14 RUM) — measures LCP/INP/CLS for real visitors and
+        beacons per-route samples to the RUM sink. ~1KB, no framework; no-ops
+        where PerformanceObserver is absent. This is the per-route-template
+        signal F16's `core-web-vitals` monitor consumes (the CF Web Analytics
+        beacon above only gives aggregate field CWV). */}
+    <script>
+      import { startWebVitals } from "@/lib/analytics/webVitals";
+      startWebVitals();
+    </script>
   </body>
 </html>

package/apps/storefront/src/lib/analytics/budgets.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "$comment": "F14 performance budgets manifest — the checked-in, tool-neutral source of truth for the storefront go-live framework's perf gate. Consumed by (1) the lab budget-assertion harness (perf/assert-budgets.ts), (2) the Lighthouse budgets exporter (toLighthouseBudgets), and (3) the field RUM regression-alert contract (rumAlert.ts). Edit HERE — everything else derives from it. Shape + validation: src/lib/analytics/perfBudgets.ts (parsePerfBudgets).",
+  "version": 1,
+  "webVitals": {
+    "$comment": "Core Web Vitals thresholds, evaluated at the 75th percentile (p75) of the field distribution — the same percentile Google's CrUX / the RUM alert contract use.",
+    "lcpMs": 2500,
+    "inpMs": 200,
+    "cls": 0.1
+  },
+  "resourceBudgets": {
+    "$comment": "Per-page transfer budgets in kibibytes (KiB), compressed-over-the-wire. Defaults; a route may tighten or (rarely) loosen them via its own resourceBudgets.",
+    "jsKib": 180,
+    "cssKib": 90,
+    "imageKib": 900,
+    "totalKib": 1300
+  },
+  "thirdPartyScriptAllowlist": [
+    "static.cloudflareinsights.com",
+    "cdn.foxycart.com"
+  ],
+  "routes": [
+    {
+      "id": "home",
+      "label": "Home",
+      "samplePath": "/",
+      "match": ["="]
+    },
+    {
+      "id": "plp",
+      "label": "Product listing",
+      "samplePath": "/collections/all",
+      "match": ["/collections"]
+    },
+    {
+      "id": "pdp",
+      "label": "Product detail",
+      "samplePath": "/products/",
+      "match": ["/products/"],
+      "resourceBudgets": {
+        "$comment": "PDP carries the largest hero + gallery imagery.",
+        "imageKib": 1100,
+        "totalKib": 1500
+      }
+    },
+    {
+      "id": "search",
+      "label": "Search results",
+      "samplePath": "/search?q=cap",
+      "match": ["/search"]
+    },
+    {
+      "id": "account",
+      "label": "Account / dashboard",
+      "samplePath": "/dashboard",
+      "match": ["/dashboard", "/account", "/saved"]
+    },
+    {
+      "id": "checkout",
+      "label": "Checkout entry",
+      "samplePath": "/cart",
+      "match": ["/cart", "/checkout"],
+      "resourceBudgets": {
+        "$comment": "The managed-checkout loader (cdn.foxycart.com) ships its own JS bundle; give this route headroom the on-site pages do not need.",
+        "jsKib": 320,
+        "totalKib": 1600
+      }
+    }
+  ]
+}

package/apps/storefront/src/lib/analytics/lighthouseReport.ts ADDED Viewed

@@ -0,0 +1,109 @@
+/**
+ * F14 — Lighthouse result → budget measurement (the lab hook, pure half).
+ *
+ * The budget gate (`perfBudgets.ts`) evaluates a tool-neutral `RouteMeasurement`.
+ * This module is the one adapter that turns a Lighthouse result object (LHR JSON,
+ * as `lighthouse --output=json` / LHCI emit) into that shape, so a live
+ * Lighthouse run in preview validation feeds the SAME gate the unit tests do.
+ *
+ * Kept pure (LHR in → measurement out, no fs/network) so `lighthouseReport.test.ts`
+ * can prove the extraction against a fixture LHR without running Lighthouse; the
+ * thin CLI (`perf/assert-budgets.ts`) does the fs + Lighthouse invocation.
+ *
+ * We read only the stable, documented LHR fields:
+ *  - `audits['largest-contentful-paint'].numericValue`  (ms)      → webVitals.lcpMs
+ *  - `audits['cumulative-layout-shift'].numericValue`   (unitless)→ webVitals.cls
+ *  - `audits['resource-summary'].details.items[]`       (bytes)   → resource KiB
+ *  - `audits['network-requests'].details.items[]`       (url)     → third-party origins
+ * INP is intentionally absent — it has no lab value; it is enforced from field
+ * RUM (`rumAlert.ts`), matching `toLighthouseBudgets`' note.
+ *
+ * Third-party origins are taken from `network-requests` (real request URLs →
+ * hostnames), NOT `third-party-summary` — the latter reports entity DISPLAY
+ * names ("Google Fonts"), which would never match the manifest's hostname
+ * allowlist. We keep hostnames that loaded a Script and are cross-origin to the
+ * page, so the gate's allowlist check compares like-for-like.
+ */
+import type { RouteId, RouteMeasurement } from "./perfBudgets.js";
+/** The (loose) slice of a Lighthouse result we read. */
+export interface LighthouseResult {
+  audits?: Record<
+    string,
+    {
+      numericValue?: number;
+      details?: {
+        items?: Array<Record<string, unknown>>;
+      };
+    }
+  >;
+  finalUrl?: string;
+  requestedUrl?: string;
+}
+const hostnameOf = (url: string | undefined): string | undefined => {
+  if (!url) return undefined;
+  try {
+    return new URL(url).hostname.toLowerCase();
+  } catch {
+    return undefined;
+  }
+};
+const BYTES_PER_KIB = 1024;
+const toKib = (bytes: unknown): number | undefined =>
+  typeof bytes === "number" && Number.isFinite(bytes)
+    ? Math.round((bytes / BYTES_PER_KIB) * 10) / 10
+    : undefined;
+/** Map a Lighthouse `resource-summary` resourceType onto our budget keys. */
+const RESOURCE_TYPE_KEY: Record<string, "jsKib" | "cssKib" | "imageKib" | "totalKib"> = {
+  script: "jsKib",
+  stylesheet: "cssKib",
+  image: "imageKib",
+  total: "totalKib",
+};
+/**
+ * Extract a `RouteMeasurement` for `routeId` from a Lighthouse result. Missing
+ * audits simply yield missing dimensions — the gate only checks what was
+ * measured — so a partial/failed audit under-reports rather than crashing.
+ */
+export function lhrToMeasurement(lhr: LighthouseResult, routeId: RouteId): RouteMeasurement {
+  const audits = lhr.audits ?? {};
+  const resources: NonNullable<RouteMeasurement["resources"]> = {};
+  const summaryItems = audits["resource-summary"]?.details?.items ?? [];
+  for (const item of summaryItems) {
+    const type = typeof item["resourceType"] === "string" ? (item["resourceType"] as string) : "";
+    const key = RESOURCE_TYPE_KEY[type];
+    const kib = toKib(item["transferSize"]);
+    if (key && kib !== undefined) resources[key] = kib;
+  }
+  const webVitals: NonNullable<RouteMeasurement["webVitals"]> = {};
+  const lcp = audits["largest-contentful-paint"]?.numericValue;
+  if (typeof lcp === "number") webVitals.lcpMs = Math.round(lcp);
+  const cls = audits["cumulative-layout-shift"]?.numericValue;
+  if (typeof cls === "number") webVitals.cls = Math.round(cls * 1e4) / 1e4;
+  // Third-party SCRIPT hostnames, cross-origin to the page, from real requests.
+  const pageHost = hostnameOf(lhr.finalUrl ?? lhr.requestedUrl);
+  const netItems = audits["network-requests"]?.details?.items ?? [];
+  const thirdPartyOrigins: string[] = [];
+  for (const item of netItems) {
+    const type = typeof item["resourceType"] === "string" ? (item["resourceType"] as string) : "";
+    if (type.toLowerCase() !== "script") continue;
+    const host = hostnameOf(typeof item["url"] === "string" ? (item["url"] as string) : undefined);
+    if (!host || host === pageHost) continue;
+    if (!thirdPartyOrigins.includes(host)) thirdPartyOrigins.push(host);
+  }
+  return {
+    routeId,
+    ...(lhr.finalUrl || lhr.requestedUrl ? { url: lhr.finalUrl ?? lhr.requestedUrl } : {}),
+    ...(Object.keys(resources).length ? { resources } : {}),
+    ...(Object.keys(webVitals).length ? { webVitals } : {}),
+    ...(thirdPartyOrigins.length ? { thirdPartyOrigins } : {}),
+  };
+}