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

package/apps/storefront/src/pages/style-guide/[tenant]/[theme].astro

@@ -8,7 +8,14 @@
  * (buttons, eyebrow, proof strip, footer, card) using the theme's real classes.
  * noindex, never in the sitemap, never production marketing publishing. It does
  * NOT reskin the live marketing pages — it only previews the theme in isolation.
+ *
+ * Left on-demand — NOT prerendered (audit finding "selective-prerender"). A dynamic
+ * [tenant]/[theme] route reading Astro.locals.cspNonce and depending on the middleware
+ * CSP + security headers; prerendering would need getStaticPaths AND lose those headers,
+ * for a dev/preview-only noindex surface with no production traffic (zero perf upside).
  */
+export const prerender = false;
+
 // Commerce + chrome component library preview. global.css brings the Tailwind
 // utilities + reference theme-token fallbacks so the (token-styled) components
 // render here without the app Layout. The `.sg-commerce` wrapper pins the
@@ -45,6 +52,13 @@ import ShippingRestrictionNotice from "@/components/compliance/ShippingRestricti
 import ExciseTaxNotice from "@/components/compliance/ExciseTaxNotice.astro";
 import TierCards from "@/components/membership/TierCards.astro";
 import TierComparisonTable from "@/components/membership/TierComparisonTable.astro";
+import ProseSections from "@/components/content/ProseSections.astro";
+import ProseToc from "@/components/content/ProseToc.astro";
+import Callout from "@/components/content/Callout.astro";
+import NeedsReviewCallout from "@/components/content/NeedsReviewCallout.astro";
+import TrustStrip from "@/components/content/TrustStrip.astro";
+import type { ProseSection } from "@/lib/content/prose";
+import type { TrustStripItem } from "@/lib/content/trustStrip";
 import HowItWorksSteps from "@/components/subscription/HowItWorksSteps.astro";
 import SavingsExplainer from "@/components/subscription/SavingsExplainer.astro";
 import ManageSubscriptionEntry from "@/components/subscription/ManageSubscriptionEntry.astro";
@@ -222,6 +236,73 @@ const sampleComparisonRows: ComparisonRow[] = [
   { label: "Cancel anytime", cells: [null, true, true] },
 ];
 
+// --- Sample structured content (F4) — the DATA a policy page is driven by,
+//     replacing a hand-authored HTML/CSS fragment. Exercises headings (TOC),
+//     rich-text links, lists, a definition glossary, tone callouts, a contact
+//     block, and a needs-review flag (reviewer-only). ---------------------------
+const sampleProseSections: ProseSection[] = [
+  { kind: "heading", text: "Overview" },
+  {
+    kind: "paragraph",
+    text: [
+      { kind: "text", text: "This page is rendered from " },
+      { kind: "text", text: "structured data", strong: true },
+      { kind: "text", text: ", not an HTML blob. See our " },
+      { kind: "link", text: "privacy policy", href: "/policies/privacy" },
+      { kind: "text", text: " and the " },
+      { kind: "link", text: "framework docs", href: "https://tokenoftrust.com" },
+      { kind: "text", text: " for details." },
+    ],
+  },
+  {
+    kind: "callout",
+    tone: "info",
+    title: "Good to know",
+    body: "Every color here comes from the theme tokens — reskin it by swapping tokens, not markup.",
+  },
+  { kind: "heading", text: "What we collect" },
+  {
+    kind: "list",
+    items: ["Contact details you provide", "Order history", "Age-verification status"],
+  },
+  {
+    kind: "definitions",
+    items: [
+      { term: "PII", description: "Personal information that identifies you." },
+      { term: "Age gate", description: "The 21+ affirmation shown before browsing." },
+    ],
+  },
+  {
+    kind: "callout",
+    tone: "legal",
+    body: "Sales are restricted to adults 21+ where lawful. Void where prohibited.",
+  },
+  { kind: "heading", text: "Contact us" },
+  {
+    kind: "contact",
+    heading: "Support",
+    email: "support@example.com",
+    phone: "+1 (555) 010-2030",
+    address: ["123 Market St", "Suite 200", "Denver, CO 80202"],
+  },
+  {
+    kind: "needs_review",
+    reason: "Refund window (14 vs 30 days) not yet confirmed with the merchant.",
+    severity: "blocker",
+    owner: "ops",
+  },
+];
+
+// Trust strip (F4, f09-guarded): mixes real claims + a real rating with
+// fabrication vectors that MUST be dropped — the guide proves real-or-absent.
+const sampleTrustStrip: TrustStripItem[] = [
+  { kind: "claim", label: "Ships from USA" },
+  { kind: "claim", label: "Lab-tested" },
+  { kind: "rating", average: 4.9, count: 369, label: "avg rating" },
+  { kind: "claim", label: "Based on 369 reviews" }, // fabricated → dropped by f09
+  { kind: "rating", average: 5, count: 0 }, // half-populated → dropped
+];
+
 // --- Sample subscription/Autopilot education content (preview-only) -----------
 const sampleSubscriptionSteps: SubscriptionStep[] = [
   { title: "Choose your products", description: "Pick anything in the catalog to add to your Autopilot." },
@@ -411,6 +492,14 @@ const REFERENCE_COMPONENT_VARS: Record<string, string> = {
   "--color-muted": "#5c6663", "--color-primary": "#1f3a34", "--color-primary-contrast": "#f4f1ea",
   "--color-accent": "#b5612f", "--color-border": "#dcd6c9", "--color-success": "#3f6b4f",
   "--color-sale": "#9e3b2e",
+  // F1 semantic + F6 quality-bar interaction tokens — reference (Northwind)
+  // values so the text/icon-token samples render concretely and re-skin when a
+  // descriptor overrides them via preview.componentVars.
+  "--color-warning": "#8a5717", "--color-error": "#a22014", "--color-info": "#2c5b73",
+  "--color-accent-ink": "#8a481f",
+  "--color-focus-ring": "#b5612f", "--color-disabled": "#e4dfd4",
+  "--color-disabled-contrast": "#8b938f", "--color-field-border": "#8f887a",
+  "--color-star": "#b5612f", "--tap-target": "44px",
   "--radius-sm": "3px", "--radius-md": "6px", "--radius-lg": "12px", "--radius-full": "999px",
   "--shadow-sm": "0 1px 2px rgba(28,38,36,.06)", "--shadow-md": "0 6px 24px -8px rgba(28,38,36,.14)",
   "--shadow-lg": "0 24px 60px -20px rgba(28,38,36,.22)", "--container-max": "1240px",
@@ -520,6 +609,31 @@ const componentVarsInline = Object.entries(componentVars)
       }
       .sg-commerce .sg-h { color: var(--color-primary); }
       .sg-commerce .sg-block { border-top-color: var(--color-border); }
+
+      /* Semantic text & icon token samples (v1.1 · unit F6). Each swatch reads
+         ONE contract token so the guide proves text/icon roles resolve + re-skin
+         from tokens alone — never a hard-coded color. */
+      .sg-tok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
+      .sg-tok { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--color-surface); }
+      .sg-tok .lab { display: block; font-size: .7rem; letter-spacing: .04em; color: var(--color-muted); font-family: var(--font-mono, ui-monospace, Menlo, monospace); margin-top: 6px; }
+      .sg-tok .txt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; display: inline-flex; align-items: center; gap: .5em; }
+      .sg-tok .ico { width: 1.15em; height: 1.15em; flex: none; }
+      .sg-tok-state { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+      /* Token-driven CTA + disabled/loading control (mirrors the shared button
+         contract: fill=--color-primary, hover=--color-primary-hover). */
+      .sg-tok-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--tap-target); padding: 0 1.4em; border-radius: var(--radius-full); border: 0; font-family: var(--font-display); font-weight: 700; font-size: .95rem; background: var(--color-primary); color: var(--color-primary-contrast); cursor: pointer; }
+      .sg-tok-btn:hover:not([disabled]) { background: var(--color-primary-hover); }
+      .sg-tok-btn[disabled] { background: var(--color-disabled); color: var(--color-disabled-contrast); cursor: not-allowed; }
+      .sg-tok-btn.is-loading { color: transparent; position: relative; }
+      .sg-tok-btn.is-loading::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 999px; border: 2px solid var(--color-primary-contrast); border-top-color: transparent; animation: sg-spin .7s linear infinite; }
+      @keyframes sg-spin { to { transform: rotate(360deg); } }
+      @media (prefers-reduced-motion: reduce) { .sg-tok-btn.is-loading::after { animation: none; } }
+      /* Accessible field: stronger --color-field-border + token focus ring. */
+      .sg-tok-field { min-height: var(--tap-target); width: min(320px, 100%); padding: 0 12px; border-radius: var(--radius-md); border: var(--border-medium, 1.5px) solid var(--color-field-border); background: var(--color-surface); color: var(--color-text); font: inherit; }
+      .sg-tok-field:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
+      /* Tap-target demo: an icon button sized to the WCAG minimum. */
+      .sg-tap { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
+      .sg-tap svg { width: 20px; height: 20px; }
     </style>
   </head>
   <body>
@@ -838,6 +952,62 @@ const componentVarsInline = Object.entries(componentVars)
         </div>
       </section>
 
+      {/* ── Semantic text & icon tokens (v1.1 · unit F6) ────────────────────
+          The quality-bar coverage sample: every text role, icon tint, and
+          interaction state renders from a NAMED contract token — nothing here
+          hard-codes a color or borrows `accent`. Swap the theme (or a
+          descriptor's preview.componentVars) and this whole slice re-skins,
+          which is exactly the bar a future tenant theme must clear. */}
+      <section class="sg-block">
+        <p class="sg-h">Semantic text &amp; icon tokens (v1.1)</p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Each swatch reads one contract token. A theme passes the quality bar by supplying these — or inheriting the platform default — so every text and icon role resolves and re-skins from tokens alone.</p>
+
+        <p class="form-help" style="margin:18px 0 8px">Text roles</p>
+        <div class="sg-tok-grid">
+          <div class="sg-tok"><span class="txt" style="color:var(--color-text)">Primary body text</span><span class="lab">--color-text</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-muted)">Secondary / caption</span><span class="lab">--color-muted</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-primary)">Brand / link anchor</span><span class="lab">--color-primary</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-accent-ink)">Accent text (AA)</span><span class="lab">--color-accent-ink</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-success)">In stock · savings</span><span class="lab">--color-success</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-sale)">Sale price</span><span class="lab">--color-sale</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-warning)">Low stock</span><span class="lab">--color-warning</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-error)">Error · out of stock</span><span class="lab">--color-error</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-info)">Informational</span><span class="lab">--color-info</span></div>
+        </div>
+
+        <p class="form-help" style="margin:22px 0 8px">Icon roles (<code>currentColor</code> tinted by token)</p>
+        <div class="sg-tok-grid">
+          <div class="sg-tok"><span class="txt" style="color:var(--color-star)">
+            <svg class="ico" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 15l-5.2 2.6 1-5.8L1.5 7.7l5.9-.9L10 1.5z"/></svg>
+            Rating star</span><span class="lab">--color-star</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-success)">
+            <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10.5l4 4 8-9"/></svg>
+            Success check</span><span class="lab">--color-success</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-warning)">
+            <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2.5L18.5 17H1.5L10 2.5z"/><path d="M10 8v3.5"/><path d="M10 14.4v.1"/></svg>
+            Warning</span><span class="lab">--color-warning</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-error)">
+            <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15"/></svg>
+            Error</span><span class="lab">--color-error</span></div>
+          <div class="sg-tok"><span class="txt" style="color:var(--color-info)">
+            <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="8"/><path d="M10 9v5"/><path d="M10 6v.1"/></svg>
+            Info</span><span class="lab">--color-info</span></div>
+        </div>
+
+        <p class="form-help" style="margin:22px 0 8px">Interaction states — CTA hover, disabled, loading, focus ring, tap-target</p>
+        <div class="sg-tok-state">
+          <button class="sg-tok-btn" type="button">Primary CTA</button>
+          <button class="sg-tok-btn" type="button" style="background:var(--color-primary-hover)">Hover</button>
+          <button class="sg-tok-btn is-loading" type="button" aria-busy="true" aria-label="Loading">Loading</button>
+          <button class="sg-tok-btn" type="button" disabled>Disabled</button>
+          <input class="sg-tok-field" type="email" placeholder="you@example.com — Tab here for the focus ring" aria-label="Focus-ring + field-border sample" />
+          <button class="sg-tap" type="button" aria-label="Add to cart (min tap-target)">
+            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h2l1.6 9.2a1 1 0 001 .8h7.6a1 1 0 001-.8L18 6H5"/><circle cx="8" cy="17" r="1"/><circle cx="15" cy="17" r="1"/></svg>
+          </button>
+        </div>
+        <p class="form-help" style="margin-top:10px;color:var(--color-muted)">Fill/hover read <code>--color-primary</code>/<code>--color-primary-hover</code>; disabled reads <code>--color-disabled</code> + <code>--color-disabled-contrast</code>; the field outline reads <code>--color-field-border</code>; Tab shows the <code>--color-focus-ring</code> ring; the icon button is sized to <code>--tap-target</code> (≥44px).</p>
+      </section>
+
       <section class="sg-block">
         <p class="sg-h">Promo cards</p>
         <div class="sg-promos">
@@ -1137,6 +1307,34 @@ const componentVarsInline = Object.entries(componentVars)
         />
       </section>
 
+      {/* ── Structured content widgets (components/content/, spec §F4) ───────
+          The DATA-driven promotion of repeated raw-page patterns. A tenant
+          authors a policy/about/compliance page as structured `sections`
+          (JSON) instead of copying an HTML/CSS fragment; these components
+          render it with the a11y (headings, <dl>, <address>, roles, tap
+          targets) baked in and every color from f06 tokens. The trust strip is
+          f09-guarded — real-or-absent, fabricated proof dropped. */}
+      <section class="sg-block">
+        <p class="sg-h">Structured content — <code>components/content/</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Data-driven framework widgets (F4): a policy page rendered from structured <code>sections</code> with no HTML/CSS to copy. Accessibility lives in the components; tenant content is pure data.</p>
+
+        <p class="form-help" style="margin:18px 0 8px">TrustStrip — <code>data-widget="trust-strip"</code> (f09 real-or-absent: 2 claims + 1 real rating shown; a "Based on 369 reviews" claim + a half-populated rating are dropped, never fabricated)</p>
+        <TrustStrip items={sampleTrustStrip} />
+
+        <p class="form-help" style="margin:28px 0 8px">Callout — <code>data-widget="callout"</code> (tones: info / warning / legal / success; role="note", token-tinted, mirrors f05 .disclaimer/.warn-band)</p>
+        <Callout callout={{ tone: "info", title: "Heads up", body: "An informational aside rendered from data." }} />
+        <Callout callout={{ tone: "warning", body: "A caution — check this before you rely on it." }} />
+        <Callout callout={{ tone: "legal", body: "Restricted to adults 21+ where lawful. Void where prohibited." }} />
+        <Callout callout={{ tone: "success", body: "Your terminal is verified and signed in." }} />
+
+        <p class="form-help" style="margin:28px 0 8px">NeedsReviewCallout — <code>data-widget="needs-review"</code> (reviewer-only; a placeholder pending human sign-off before go-live — never shown to shoppers)</p>
+        <NeedsReviewCallout flag={{ reason: "Refund window (14 vs 30 days) not confirmed with merchant.", severity: "blocker", owner: "ops", href: "#" }} />
+
+        <p class="form-help" style="margin:28px 0 8px">ProseToc — <code>data-widget="prose-toc"</code> + ProseSections — <code>data-widget="prose-sections"</code> (a full structured policy body: headings, rich-text links, list, glossary &lt;dl&gt;, callouts, &lt;address&gt; contact; needs-review shown here because the guide is preview)</p>
+        <ProseToc sections={sampleProseSections} min={2} />
+        <ProseSections sections={sampleProseSections} includeNeedsReview={true} />
+      </section>
+
       {/* ── Subscription/Autopilot education widgets (components/subscription/)
           Education-only: explains the Autopilot concept and hands off to the
           tenant's product-owned subscribe/manage flow — no scheduling,

package/apps/storefront/src/pages/style-guide/[tenant]/chrome/[theme].astro

@@ -17,7 +17,14 @@
  * as the component guide ([theme].astro): reference tokens overridden by the
  * descriptor's preview.componentVars, emitted on a scoping wrapper.
  * noindex, never in the sitemap, never production publishing.
+ *
+ * Left on-demand — NOT prerendered (audit finding "selective-prerender"). A dynamic
+ * [tenant]/chrome/[theme] route reading Astro.locals.cspNonce and depending on the
+ * middleware CSP + security headers; prerendering would need getStaticPaths AND lose
+ * those headers, for a dev/preview-only noindex surface with no production traffic.
  */
+export const prerender = false;
+
 const { tenant, theme } = Astro.params;
 const cspNonce = Astro.locals.cspNonce;
 

package/apps/storefront/src/pages/style-guide/[tenant]/guide/[theme].astro

@@ -9,7 +9,14 @@
  * has ONE maintained home. A persistent left sidebar (StyleGuideNav) makes the
  * guide reachable in one click from the tenant hub and links across the other
  * style-guide surfaces. noindex, never in the sitemap, never production publishing.
+ *
+ * Left on-demand — NOT prerendered (audit finding "selective-prerender"). A dynamic
+ * [tenant]/guide/[theme] route reading Astro.locals.cspNonce and depending on the
+ * middleware CSP + security headers; prerendering would need getStaticPaths AND lose
+ * those headers, for a dev/preview-only noindex surface with no production traffic.
  */
+export const prerender = false;
+
 import "@/styles/global.css";
 import type { MarkdownInstance } from "astro";
 import StyleGuideNav from "@/components/style-guide/StyleGuideNav.astro";

package/apps/storefront/src/pages/style-guide/[tenant]/index.astro

@@ -8,7 +8,14 @@
  * This is a review surface only: noindex, never in the sitemap, never part of
  * production marketing publishing. Tenant-agnostic route; theme data is
  * tenant-local (tenants/<tenant>/content/themes/*.json).
+ *
+ * Left on-demand — NOT prerendered (audit finding "selective-prerender"). A dynamic
+ * [tenant] route reading Astro.locals.cspNonce and depending on the middleware CSP +
+ * security headers; prerendering would need getStaticPaths AND lose those headers, for
+ * a dev/preview-only noindex surface with no production traffic (zero perf upside).
  */
+export const prerender = false;
+
 import StyleGuideNav from "@/components/style-guide/StyleGuideNav.astro";
 
 const { tenant } = Astro.params;

package/apps/storefront/src/pages/style-guide/index.astro

@@ -6,7 +6,17 @@
  * discoverable from one place. Review surface only: noindex, never in the
  * sitemap, never part of production marketing publishing. Tenant-agnostic —
  * theme data is tenant-local (tenants/<tenant>/content/themes/*.json).
+ *
+ * Left on-demand — NOT prerendered (audit finding "selective-prerender"). Though its
+ * theme data is build-time (import.meta.glob, tenant-independent), it still reads
+ * Astro.locals.cspNonce and relies on the middleware to emit the enforced CSP +
+ * security headers; a prerendered copy (served as a static asset, bypassing the
+ * worker) would carry NEITHER (no static _headers fallback). This is a dev/preview-only
+ * noindex review surface with no production traffic, so prerendering buys ~zero perf
+ * while downgrading its header posture — net negative.
  */
+export const prerender = false;
+
 const cspNonce = Astro.locals.cspNonce;
 
 // All tenant-local theme descriptors, grouped by tenant. Colocated repo-root

package/apps/storefront/src/styles/fonts.css

@@ -0,0 +1,54 @@
+/*
+ * Self-hosted web fonts (audit finding 6).
+ *
+ * Previously the Layout loaded a render-blocking third-party Google Fonts
+ * stylesheet (with its gstatic woff2). We now vendor the exact families +
+ * weights every theme actually uses via @fontsource, so the woff2 are bundled
+ * by Vite and served SAME-ORIGIN ('self' in the CSP). font-display: swap is
+ * preserved (it's @fontsource's default in every file below).
+ *
+ * These @font-face rules are declared for ALL tenants, but browsers lazy-load a
+ * woff2 only when a rendered element actually uses that font-family — so a tenant
+ * still downloads only its own 2–3 families, same as before. No typeface changes.
+ *
+ * Families/weights (keep in sync with the themes in src/themes/*):
+ *   Reference (PVC, sample-store-2, home): Space Grotesk 500/600/700 (display),
+ *     Source Serif 4 400/500/600 (body), Space Mono 400 (mono)
+ *   sample-store-3.com: Montserrat 600/700/800 (display), Inter 400/500/600 (body)
+ *   tokenoftrust.com: Plus Jakarta Sans 500/600/700/800 (display),
+ *     Inter 400/500/600 (body), JetBrains Mono 400/500 (mono)
+ */
+
+/* Space Grotesk — reference display */
+@import "@fontsource/space-grotesk/500.css";
+@import "@fontsource/space-grotesk/600.css";
+@import "@fontsource/space-grotesk/700.css";
+
+/* Source Serif 4 — reference body */
+@import "@fontsource/source-serif-4/400.css";
+@import "@fontsource/source-serif-4/500.css";
+@import "@fontsource/source-serif-4/600.css";
+
+/* Space Mono — reference mono (also sample-store-3' inherited mono) */
+@import "@fontsource/space-mono/400.css";
+
+/* Montserrat — sample-store-3 display */
+@import "@fontsource/montserrat/600.css";
+@import "@fontsource/montserrat/700.css";
+@import "@fontsource/montserrat/800.css";
+
+/* Inter — sample-store-3 + tokenoftrust body */
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/500.css";
+@import "@fontsource/inter/600.css";
+
+/* Plus Jakarta Sans — tokenoftrust display */
+@import "@fontsource/plus-jakarta-sans/500.css";
+@import "@fontsource/plus-jakarta-sans/600.css";
+@import "@fontsource/plus-jakarta-sans/700.css";
+@import "@fontsource/plus-jakarta-sans/800.css";
+
+/* JetBrains Mono — tokenoftrust mono + the auth/cockpit chrome pages */
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+@import "@fontsource/jetbrains-mono/600.css";

package/apps/storefront/src/styles/global.css

@@ -46,6 +46,19 @@
   --color-primary-hover: var(--color-primary-hover, color-mix(in srgb, var(--color-primary) 88%, #000));
   --color-accent-hover: var(--color-accent-hover, color-mix(in srgb, var(--color-accent) 88%, #000));
 
+  /* Interaction/quality-bar tokens (token-contract.md · unit F6). Each carries a
+     derived default so a component may read it unconditionally; a theme sets one
+     only to brand-tune it (emit --color-<k> via themeToCssVars).
+       - focus-ring       keyboard focus outline (defaults to the accent spark)
+       - disabled/-contrast  disabled+loading control fill / text-on-disabled
+       - field-border     stronger ≥3:1 input outline than the hairline border
+       - star             review/rating star fill (trust/UGC surfaces) */
+  --color-focus-ring: var(--color-focus-ring, var(--color-accent));
+  --color-disabled: var(--color-disabled, color-mix(in srgb, var(--color-muted) 26%, var(--color-surface)));
+  --color-disabled-contrast: var(--color-disabled-contrast, var(--color-muted));
+  --color-field-border: var(--color-field-border, color-mix(in srgb, var(--color-border) 52%, var(--color-text)));
+  --color-star: var(--color-star, var(--color-accent));
+
   --font-display: var(--font-display, "Space Grotesk"), system-ui, sans-serif;
   --font-body: var(--font-body, "Source Serif 4"), Georgia, serif;
   --font-mono: var(--font-mono, "Space Mono"), ui-monospace, monospace;
@@ -67,6 +80,11 @@
   :root {
     /* Fluid modular type scale; overridden by injected --fs-* when present. */
     color-scheme: light;
+    /* Minimum interactive tap-target (WCAG 2.2 §2.5.8). Non-@theme token (a size,
+       not a Tailwind color) so it lives here with a self-referential default: the
+       injected --tap-target (schema.ts, from shape.tapTarget) wins when present,
+       else 44px. Components size touch controls with var(--tap-target). (F6.) */
+    --tap-target: var(--tap-target, 44px);
   }
 
   html {
@@ -102,9 +120,11 @@
     text-decoration: none;
   }
 
-  /* Visible keyboard focus everywhere (WCAG 2.2 AA, brief §8). */
+  /* Visible keyboard focus everywhere (WCAG 2.2 AA, brief §8). Reads the
+     dedicated --color-focus-ring token (defaults to the accent spark) so a theme
+     can brand-tune the ring without touching the accent used elsewhere. */
   :focus-visible {
-    outline: var(--border-thick, 2px) solid var(--color-accent);
+    outline: var(--border-thick, 2px) solid var(--color-focus-ring);
     outline-offset: 2px;
     border-radius: 2px;
   }

package/apps/storefront/src/themes/schema.ts

@@ -81,31 +81,9 @@ export function themeToCssVars(t: ThemeTokens): string {
   push("shadow-sm", t.shape.shadow.sm);
   push("shadow-md", t.shape.shadow.md);
   push("shadow-lg", t.shape.shadow.lg);
+  // Minimum tap-target (WCAG 2.2 §2.5.8). Optional in the shape tokens; when a
+  // theme omits it the `:root` base default (44px) in global.css applies. (F6.)
+  if (t.shape.tapTarget) push("tap-target", t.shape.tapTarget);
 
   return `:root{\n${lines.join("\n")}\n}`;
 }
-
-/** Google Fonts <link> for a theme's display+body+mono families (if Google-hosted). */
-export function themeFontHref(t: ThemeTokens): string | null {
-  const families = new Map<string, number[]>();
-  families.set(t.type.display.family, t.type.display.weights);
-  families.set(t.type.body.family, t.type.body.weights);
-  if (t.type.mono) families.set(t.type.mono.family, t.type.mono.weights);
-
-  const params = [...families]
-    .filter(([fam]) => !SYSTEM_FONTS.has(fam))
-    .map(([fam, weights]) => {
-      const w = [...new Set(weights)].sort((a, b) => a - b).join(";");
-      return `family=${encodeURIComponent(fam).replace(/%20/g, "+")}:wght@${w}`;
-    });
-  if (!params.length) return null;
-  return `https://fonts.googleapis.com/css2?${params.join("&")}&display=swap`;
-}
-
-const SYSTEM_FONTS = new Set([
-  "system-ui",
-  "-apple-system",
-  "Arial",
-  "Helvetica",
-  "Georgia",
-]);

package/apps/storefront/tsconfig.json

@@ -11,6 +11,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": [".astro/types.d.ts", "src/**/*", "*.config.mjs", "env.d.ts"],
+  "include": [".astro/types.d.ts", "src/**/*", "perf/**/*.ts", "*.config.mjs", "env.d.ts"],
   "exclude": ["dist", "node_modules"]
 }

package/apps/storefront/vitest.config.ts

@@ -16,7 +16,10 @@ export default defineConfig({
     },
   },
   test: {
-    include: ["src/**/*.test.ts"],
+    // src/** = the app's unit tests; e2e/a11y/**/*.test.ts = the F15 a11y-matrix
+    // route-map validation (a pure, server-less smoke test — the Playwright
+    // *.spec.ts matrix runs separately via playwright.a11y.config.ts).
+    include: ["src/**/*.test.ts", "e2e/a11y/**/*.test.ts"],
     environment: "node",
   },
 });

package/package.json

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