@certrev/cert-block 0.3.0 → 0.5.0

package/src/modal/certrev-cert-modal.ts

@@ -0,0 +1,273 @@
+/**
+ * `<certrev-cert-modal>` — the ONE Shadow-DOM element that renders both in-page cert
+ * dialogs (certificate 3a + reviewer 4b) across Shopify / WordPress / Builder
+ * (POR-10102). Replaces the three drifting per-platform modal implementations.
+ *
+ * Design:
+ *  - One element, one OPEN shadow root, two `<dialog>`s (`#cert`, `#expert`). Public
+ *    `open('cert'|'expert')` → `dialog.showModal()` (guarded). Data is public SSR
+ *    content already, so an open shadow adds no exposure and eases debugging/tests.
+ *  - CSS is adopted via a shared constructable stylesheet (falls back to an inline
+ *    `<style>` on older engines). Shadow scoping means the brand theme can't bleed in
+ *    and these rules can't leak out — the literal-hex/theme-armor constraints that
+ *    bind the `body_html` modal do not apply here.
+ *  - Envelope acquisition, in priority order: (1) a light-DOM
+ *    `<script type="application/json" data-certrev-envelope>` child (Shopify + WP SSR,
+ *    parsed lazily on first open — no network, crawl-safe); (2) a `data-envelope`
+ *    attribute (stories/tests); (3) a Delivery-API fetch from
+ *    `{data-delivery-api}/api/cert/v1/delivery/{data-platform}/{data-external-id}`
+ *    (Builder/Hydrogen). The triggers (`data-certrev-modal-open`) stay in the light
+ *    DOM (badge/memo) and are wired by `interactions.ts`.
+ *  - Close plumbing (×, Close, backdrop, Esc) lives HERE, not in `interactions.ts`:
+ *    a click inside a shadow root is retargeted to the host for a document listener,
+ *    so the document-level delegate can't see the close controls.
+ *  - Fonts inject at document level on first open (font faces don't scope into a
+ *    shadow root); deferring to first open avoids loading them on every article view.
+ */
+
+import { type CertDeliveryArtifact, isTombstone } from '@certrev/cert-contract'
+import { CERT_FONT_FACE_CSS, CERT_FONTS_ORIGIN } from './font-face.js'
+import { type CertModalContent, renderCertDialogInner, renderExpertDialogInner } from './cert-modal-view.js'
+import { CERT_MODAL_CSS } from './certrev-cert-modal.styles.js'
+
+export const CERT_MODAL_TAG = 'certrev-cert-modal'
+type ModalKind = 'cert' | 'expert'
+
+/** Shared constructable stylesheet (one per document lifetime). */
+let sharedSheet: CSSStyleSheet | null = null
+function supportsConstructableSheets(): boolean {
+	return (
+		typeof CSSStyleSheet !== 'undefined' &&
+		'replaceSync' in CSSStyleSheet.prototype &&
+		'adoptedStyleSheets' in Document.prototype
+	)
+}
+function getSharedSheet(): CSSStyleSheet | null {
+	if (!supportsConstructableSheets()) return null
+	if (!sharedSheet) {
+		sharedSheet = new CSSStyleSheet()
+		sharedSheet.replaceSync(CERT_MODAL_CSS)
+	}
+	return sharedSheet
+}
+
+/**
+ * Inject the modal font families once, at document level, on first open — SELF-HOSTED from R2
+ * (POR-10657). Declares the shared CERT_FONT_FACE_CSS @font-face block inline instead of loading a
+ * render-blocking `fonts.googleapis.com` stylesheet (which also leaked the visitor's IP to Google).
+ * @font-face at document level resolves across the shadow boundary, so the shadow-DOM modal picks
+ * these up exactly as it did the old Google <link>. A crossorigin preconnect warms the R2 origin
+ * (an @font-face fetch is always a CORS request). Idempotent across instances via the marker attr.
+ */
+let fontsInjected = false
+function injectFontsOnce(doc: Document): void {
+	if (fontsInjected) return
+	fontsInjected = true
+	if (doc.querySelector('style[data-certrev-modal-fonts]')) return
+	if (!doc.querySelector('link[data-certrev-modal-preconnect]')) {
+		const pre = doc.createElement('link')
+		pre.rel = 'preconnect'
+		pre.href = CERT_FONTS_ORIGIN
+		pre.crossOrigin = ''
+		pre.setAttribute('data-certrev-modal-preconnect', '')
+		doc.head.appendChild(pre)
+	}
+	const style = doc.createElement('style')
+	style.textContent = CERT_FONT_FACE_CSS
+	style.setAttribute('data-certrev-modal-fonts', '')
+	doc.head.appendChild(style)
+}
+
+export class CertRevCertModal extends HTMLElement {
+	private root: ShadowRoot
+	private rendered = false
+	private content: CertModalContent | null = null
+	private fetchInFlight: Promise<void> | null = null
+
+	constructor() {
+		super()
+		this.root = this.attachShadow({ mode: 'open' })
+		const sheet = getSharedSheet()
+		if (sheet) {
+			this.root.adoptedStyleSheets = [sheet]
+		} else {
+			const style = document.createElement('style')
+			style.textContent = CERT_MODAL_CSS
+			this.root.appendChild(style)
+		}
+		// One delegated close listener inside the shadow root.
+		this.root.addEventListener('click', (e) => this.onShadowClick(e))
+	}
+
+	/**
+	 * Open the given dialog. Returns `true` when this element will handle the open
+	 * (so a link-shaped trigger should `preventDefault`), `false` when it cannot
+	 * (no envelope + no fetch source) so the caller lets the `href` fall back.
+	 */
+	open(kind: ModalKind): boolean {
+		// A host page that already provides the five families (e.g. the design guide, which
+		// self-hosts them) suppresses the modal's font injection with `data-fonts="host"` — so
+		// embedding the component adds no font-src/style-src origins to that page's CSP.
+		if (this.getAttribute('data-fonts') !== 'host') injectFontsOnce(document)
+		if (this.ensureRendered()) {
+			this.show(kind)
+			return true
+		}
+		if (this.hasFetchSource()) {
+			void this.fetchThenShow(kind)
+			return true
+		}
+		return false
+	}
+
+	/** Parse the synchronous envelope source (embedded JSON / attr) + render once. */
+	private ensureRendered(): boolean {
+		if (this.rendered) return this.content != null
+		const content = this.readSyncContent()
+		if (!content) return false
+		this.content = content
+		this.renderDialogs(content)
+		this.rendered = true
+		return true
+	}
+
+	private readSyncContent(): CertModalContent | null {
+		const attr = this.getAttribute('data-envelope')
+		if (attr) return safeParseContent(attr)
+		const script = this.querySelector('script[data-certrev-envelope]')
+		if (script?.textContent) return safeParseContent(script.textContent)
+		return null
+	}
+
+	private hasFetchSource(): boolean {
+		return !!(
+			this.getAttribute('data-delivery-api') &&
+			this.getAttribute('data-platform') &&
+			this.getAttribute('data-external-id')
+		)
+	}
+
+	private async fetchThenShow(kind: ModalKind): Promise<void> {
+		if (!this.fetchInFlight) {
+			const base = (this.getAttribute('data-delivery-api') || '').replace(/\/$/, '')
+			const platform = this.getAttribute('data-platform') || ''
+			const externalId = this.getAttribute('data-external-id') || ''
+			this.fetchInFlight = (async () => {
+				try {
+					const res = await fetch(
+						`${base}/api/cert/v1/delivery/${encodeURIComponent(platform)}/${encodeURIComponent(externalId)}`,
+						{
+							cache: 'no-store',
+							credentials: 'omit',
+						},
+					)
+					if (!res.ok) return
+					const artifact = (await res.json()) as CertDeliveryArtifact
+					// A 200 may be a REVOCATION — either the SLIM `CertTombstone` the control plane now
+					// serves for a revoked placement (POR-10481, no payload) or a legacy envelope with
+					// `revokedAt` set — plus an EXPIRED envelope. The Delivery API serves those signed so
+					// the edge SUPPRESSES rather than fail-opening on a 404 (POR-10101). Never render
+					// "verified" content from a revoked/expired artifact.
+					if (isArtifactSuppressed(artifact)) {
+						this.markSuppressed()
+						return
+					}
+					// Not suppressed → a live envelope (a tombstone always suppresses above); `isTombstone`
+					// narrows the union so the payload read is type-safe (POR-10684).
+					const content = isTombstone(artifact)
+						? undefined
+						: (artifact.payload?.content as CertModalContent | undefined)
+					if (content) {
+						this.content = content
+						this.renderDialogs(content)
+						this.rendered = true
+					}
+				} catch {
+					// fail-open: no modal, the trigger's href (if any) already prevented — a dead click at worst
+				}
+			})()
+		}
+		await this.fetchInFlight
+		if (this.rendered) this.show(kind)
+	}
+
+	private renderDialogs(content: CertModalContent): void {
+		const cert = renderCertDialogInner(content)
+		const expert = renderExpertDialogInner(content)
+		const wrap = document.createElement('div')
+		wrap.innerHTML = `${cert ? `<dialog id="cert" class="crm-dialog crm-dialog--cert" aria-label="CertREV certificate">${cert}</dialog>` : ''}${expert ? `<dialog id="expert" class="crm-dialog crm-dialog--expert" aria-label="Verified reviewer profile">${expert}</dialog>` : ''}`
+		// keep the adopted stylesheet / fallback <style>; append the dialogs
+		for (const node of Array.from(wrap.childNodes)) this.root.appendChild(node)
+	}
+
+	private show(kind: ModalKind): void {
+		const dlg = this.root.getElementById(kind) as HTMLDialogElement | null
+		if (dlg && typeof dlg.showModal === 'function' && !dlg.open) dlg.showModal()
+	}
+
+	/**
+	 * The modal kill-switch (POR-10101): a fetched envelope is REVOKED/EXPIRED. Don't open;
+	 * mark the host suppressed (mirrors the badge revalidation's `data-certrev-suppressed`) and
+	 * hide the light-DOM triggers so a stale click can't re-open a pulled cert. Best-effort DOM.
+	 */
+	private markSuppressed(): void {
+		this.setAttribute('data-certrev-suppressed', '')
+		for (const t of Array.from(document.querySelectorAll('[data-certrev-modal-open]'))) {
+			t.setAttribute('hidden', '')
+			t.setAttribute('aria-hidden', 'true')
+		}
+	}
+
+	private onShadowClick(e: Event): void {
+		const target = e.target as HTMLElement | null
+		if (!target) return
+		// backdrop click (the click landed directly on the dialog element)
+		if (target instanceof HTMLDialogElement && target.classList.contains('crm-dialog')) {
+			target.close()
+			return
+		}
+		const closer = target.closest('[data-certrev-modal-close]')
+		if (closer) {
+			e.preventDefault()
+			closer.closest('dialog')?.close()
+		}
+	}
+}
+
+function safeParseContent(json: string): CertModalContent | null {
+	try {
+		const parsed = JSON.parse(json)
+		return parsed && typeof parsed === 'object' ? (parsed as CertModalContent) : null
+	} catch {
+		return null
+	}
+}
+
+/**
+ * The modal-side lifecycle gate (POR-10101 / POR-10684): a fetched Delivery-API artifact that is
+ * REVOKED or EXPIRED must NOT render "verified" content. Two revocation shapes suppress:
+ *   • the SLIM `CertTombstone` the control plane serves for a revoked placement (POR-10481) —
+ *     detected by the `kind: 'tombstone'` discriminator via `isTombstone`. It carries NO payload,
+ *     so a `payload.lifecycle` read alone would MISS it (and `markSuppressed()` would never fire);
+ *   • a legacy envelope with `lifecycle.revokedAt` set, or any envelope whose `expiresAt` passed.
+ * The Delivery API only serves CertREV-signed artifacts, so this shape read is a safe suppress
+ * signal for the display surface (the `<certrev-badge>` revalidation runs the full ed25519
+ * verdict via `verifyArtifact` — this is the modal's belt-and-suspenders).
+ */
+export function isArtifactSuppressed(artifact: CertDeliveryArtifact | null | undefined): boolean {
+	if (!artifact) return false
+	if (isTombstone(artifact)) return true
+	const lc = artifact.payload?.lifecycle
+	if (!lc) return false
+	if (lc.revokedAt != null) return true
+	if (lc.expiresAt && Date.now() >= new Date(lc.expiresAt).getTime()) return true
+	return false
+}
+
+/** Register the element once (idempotent — a double script-load must not throw). */
+export function defineCertModal(): void {
+	if (typeof customElements === 'undefined') return
+	if (!customElements.get(CERT_MODAL_TAG)) customElements.define(CERT_MODAL_TAG, CertRevCertModal)
+}
+
+defineCertModal()

package/src/modal/certrev-cert.entry.ts

@@ -0,0 +1,44 @@
+/**
+ * Browser bundle ENTRY for the Shopify cert-badge Web Component (built by
+ * scripts/build-shopify-cert-asset.mjs → shopify/extensions/certrev-schema/assets/certrev-cert.js,
+ * loaded by the `certrev-cert` app block via its schema `javascript` key).
+ *
+ * Glue only: it resolves the published issuer key + the Delivery-API verifier (which runs the
+ * canonical `verifyEnvelope` kernel) and kicks off the DOM revalidation pass. No crypto here.
+ */
+
+import type { ResolvePublicKeyByKid } from '@certrev/cert-contract'
+import './certrev-cert-modal.js' // registers the unified <certrev-cert-modal> element (POR-10102)
+import { installFtcGuard } from './ftc-guard.js'
+import { initCertInteractionsOnReady } from './interactions.js'
+import { initCertPlacement } from './placement.js'
+import { initBadgeRevalidation } from './revalidate.js'
+import { createDeliveryVerifier } from './verify-client.js'
+
+/**
+ * The published CertREV issuer signing key (SPKI PEM) for kid `cert-issuer-1` — the PUBLIC
+ * verification key, safe to ship to every storefront browser. Kept BYTE-IDENTICAL to
+ * `CERT_ENVELOPE_SIGNING_PUBLIC_KEY_PEM` in src/lib/cert-delivery/signer.ts; revalidate.test.ts
+ * asserts the equality so a key rotation can't silently desync this copy. (signer.ts is
+ * node-only, so it cannot be imported into a browser bundle — hence the asserted copy.)
+ */
+export const CERT_ISSUER_KID = 'cert-issuer-1'
+export const CERT_ISSUER_PUBLIC_KEY_PEM = `-----BEGIN PUBLIC KEY-----
+MCowBQYDK2VwAyEAMWN956IOPjpAq900dL428VzA28TO/pVXnq3brwqUmwM=
+-----END PUBLIC KEY-----`
+
+const resolveKid: ResolvePublicKeyByKid = (kid) =>
+	kid === CERT_ISSUER_KID ? { format: 'pem', pem: CERT_ISSUER_PUBLIC_KEY_PEM } : null
+
+if (typeof document !== 'undefined') {
+	// Placement runs FIRST — relocate the @graph to <head> + move the card wrapper to its final
+	// in-article position — so the badge re-verify pass below finds `<certrev-badge>` already in
+	// place and never re-runs against a detached/re-attached node.
+	initCertPlacement(document)
+	// Tap-to-expand contributor bios + the in-page certificate modal (progressive enhancement).
+	initCertInteractionsOnReady(document)
+	// FTC §3 anti-stripping: neutralize a memo whose verbatim disclosure was stripped/hidden/altered
+	// (restores the iframe kill switch in the native, in-DOM render). No-op when there's no memo.
+	installFtcGuard(document)
+	initBadgeRevalidation(document, { verify: createDeliveryVerifier(resolveKid) })
+}

package/src/modal/display-strings.ts

@@ -0,0 +1,38 @@
+/**
+ * Cert-render display strings + date formatter for the MODAL — a BYTE-FAITHFUL relocation of
+ * portal `src/lib/cert-delivery/display-strings.ts` (POR-10721 W2). Kept a SEPARATE module from
+ * ftc-disclosure.ts (matching portal) so the bundle's `var` layout is byte-identical to the live asset.
+ *
+ * ⚠ Deliberately SEPARATE from `../components/render-def.ts`/`format.ts`. `formatCertDisplayDate`
+ * uses `toLocaleDateString` (NOT the components' fixed MONTHS array): the live modal formats dates
+ * via `toLocaleDateString` at runtime in the browser, so a fixed-array formatter would VISIBLY
+ * diverge on any browser whose ICU renders a month abbreviation differently (the "Sep"/"Sept"
+ * CLDR-42 case). Byte-parity with the deployed asset requires preserving the exact source.
+ */
+
+import { FTC_DISCLOSURE_LINE } from "./ftc-disclosure.js";
+
+/** The compensation cue (guide "line A"), byte-verbatim from portal `COMPENSATED_EXPERT_CUE`. */
+export const COMPENSATED_EXPERT_CUE = "Compensated expert";
+
+/** The FTC scope disclaimer, re-exported from the FTC SoT (portal `CERT_SCOPE_LINE = FTC_DISCLOSURE_LINE`). */
+export const CERT_SCOPE_LINE = FTC_DISCLOSURE_LINE;
+
+/**
+ * Format a timestamp the way every cert byline renders dates ("Jun 14, 2026", en-US short month,
+ * UTC-pinned). Byte-faithful to portal `formatCertDisplayDate`. Null for an unparseable input —
+ * callers treat that as "no date, no byline".
+ */
+export function formatCertDisplayDate(
+	iso: string | Date | null | undefined,
+): string | null {
+	if (!iso) return null;
+	const date = iso instanceof Date ? iso : new Date(iso);
+	if (Number.isNaN(date.getTime())) return null;
+	return date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+		timeZone: "UTC",
+	});
+}

package/src/modal/escape.ts

@@ -0,0 +1,20 @@
+/**
+ * HTML escaping for the cert MODAL string builder — a BYTE-FAITHFUL relocation of
+ * portal `src/lib/utils/html.ts` `escapeHtml` (the exact `.replace` chain the deployed
+ * `certrev-cert.js` was bundled from — POR-10721 W2).
+ *
+ * ⚠ Deliberately SEPARATE from `../components/escape.ts`: that SSR helper encodes the
+ * apostrophe as `'`, THIS one as `'`. They render identically in a browser, but
+ * this module is a byte-frozen relocation of the live Shopify asset, so it must reproduce
+ * portal's exact `'` bytes — the two escapes are NOT interchangeable here. (Unifying
+ * them is a deliberate post-publish follow-up, tracked with the unification program.)
+ */
+
+export function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}

package/src/modal/font-face.ts

@@ -0,0 +1,138 @@
+// ⚠ VENDORED, BYTE-FAITHFUL copy of portal `src/lib/cert-delivery/fonts/font-face.generated.ts`
+// (POR-10721 W2) — the exact @font-face block the deployed `certrev-cert.js` was bundled from.
+// Regenerated upstream in portal; do not hand-edit the CSS here (a drift would break byte-parity).
+//
+// GENERATED by scripts/build-cert-fonts.mjs — DO NOT EDIT BY HAND.
+//
+// The CertREV self-hosted cert @font-face block (absolute R2 URLs on assets.certrev.com),
+// mirrored from the block spliced into
+// shopify/extensions/certrev-schema/assets/certrev-cert.css so the surfaces that CAN'T @import a
+// .css asset share ONE canonical declaration: the standalone /embed renderers and the
+// <certrev-cert-modal> web component (POR-10657). Regenerate with
+// `node scripts/build-cert-fonts.mjs` (or `--emit-ts-only` to re-derive from the CSS without
+// re-downloading). Inline this inside a <style> to load the fonts non-blocking from R2.
+
+export const CERT_FONT_FACE_CSS = `
+@font-face {
+	font-family: "DM Sans";
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-dm-sans-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "DM Sans";
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-dm-sans-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "Playfair Display";
+	font-style: italic;
+	font-weight: 400 600;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-italic-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "Playfair Display";
+	font-style: italic;
+	font-weight: 400 600;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-italic-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "Playfair Display";
+	font-style: normal;
+	font-weight: 600 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "Playfair Display";
+	font-style: normal;
+	font-weight: 600 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-playfair-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "JetBrains Mono";
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-jetbrains-mono-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "JetBrains Mono";
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-jetbrains-mono-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "Plus Jakarta Sans";
+	font-style: normal;
+	font-weight: 700 800;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-jakarta-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "Plus Jakarta Sans";
+	font-style: normal;
+	font-weight: 700 800;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-jakarta-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "Allura";
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-allura-latin-ext.woff2") format("woff2");
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+	font-family: "Allura";
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("https://assets.certrev.com/fonts/cert-allura-latin.woff2") format("woff2");
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+`;
+
+/** Preconnect origin for the self-hosted cert fonts (crossorigin — @font-face is always CORS). */
+export const CERT_FONTS_ORIGIN = "https://assets.certrev.com";

package/src/modal/ftc-disclosure.ts

@@ -0,0 +1,13 @@
+/**
+ * The verbatim FTC material-connection + scope disclosure line — a BYTE-FAITHFUL relocation of
+ * the (tree-shaken) `FTC_DISCLOSURE_LINE` from portal `src/lib/embed/ftc-disclosure.ts`
+ * (POR-9317 / POR-10721 W2). Legally load-bearing: the curly apostrophe (U+2019) in "article’s"
+ * is byte-exact; a reword is a contract divergence.
+ *
+ * Kept as its OWN module (imported by both ftc-guard + display-strings, exactly as in portal) so
+ * the browser bundle emits the same `var` structure as the deployed certrev-cert.js — do not merge
+ * it into display-strings.ts (that consolidation drops one `var` and breaks byte-parity).
+ */
+
+export const FTC_DISCLOSURE_LINE =
+	"Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice." as const;

package/src/modal/ftc-guard.test.ts

@@ -0,0 +1,153 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for the native FTC disclosure tamper guard (iframe→native parity for the MSA §3
+ * anti-stripping kill switch). Pure DOM. The expected text is the single source of truth
+ * `FTC_DISCLOSURE_LINE`, so these also pin the guard to the verbatim copy.
+ */
+
+import { beforeEach, describe, expect, it } from "vitest";
+import { FTC_DISCLOSURE_LINE } from "./ftc-disclosure.js";
+import {
+	enforceFtcDisclosure,
+	FTC_NEUTRALIZED_ATTR,
+	installFtcGuard,
+	isDisclosureIntact,
+	neutralizeMemo,
+} from "./ftc-guard.js";
+
+beforeEach(() => {
+	document.head.innerHTML = "";
+	document.body.innerHTML = "";
+});
+
+/** jsdom returns a 0×0 box for everything; stub a non-zero rect so the visibility check passes. */
+function makeVisible(el: Element): void {
+	(el as HTMLElement).getBoundingClientRect = () =>
+		({
+			width: 200,
+			height: 18,
+			top: 0,
+			left: 0,
+			right: 200,
+			bottom: 18,
+			x: 0,
+			y: 0,
+			toJSON() {},
+		}) as DOMRect;
+}
+
+/** Mount a memo wrap + section carrying the verbatim disclosure line. Returns the line node too. */
+function mountMemo(lineText: string = FTC_DISCLOSURE_LINE): {
+	wrap: HTMLElement;
+	memo: HTMLElement;
+	line: HTMLElement;
+} {
+	const wrap = document.createElement("div");
+	wrap.className = "certrev-memo-wrap";
+	wrap.innerHTML = `
+		<section class="certrev-memo">
+			<p class="certrev-memo__ftc" data-ftc-disclosure><span data-ftc-line>${lineText}</span></p>
+		</section>`;
+	document.body.appendChild(wrap);
+	const line = wrap.querySelector<HTMLElement>("[data-ftc-line]")!;
+	makeVisible(line);
+	return {
+		wrap,
+		memo: wrap.querySelector<HTMLElement>(".certrev-memo")!,
+		line,
+	};
+}
+
+describe("isDisclosureIntact", () => {
+	it("true when the line is present, verbatim, and visible", () => {
+		const { memo } = mountMemo();
+		expect(isDisclosureIntact(memo)).toBe(true);
+	});
+
+	it("false when the disclosure line node is missing (stripped)", () => {
+		const { memo, line } = mountMemo();
+		line.remove();
+		expect(isDisclosureIntact(memo)).toBe(false);
+	});
+
+	it("false when the text was altered (a single changed word)", () => {
+		const { memo } = mountMemo(
+			FTC_DISCLOSURE_LINE.replace("Independent", "Sponsored"),
+		);
+		expect(isDisclosureIntact(memo)).toBe(false);
+	});
+
+	it("false when the line is hidden via display:none", () => {
+		const { memo, line } = mountMemo();
+		line.style.display = "none";
+		expect(isDisclosureIntact(memo)).toBe(false);
+	});
+
+	it("false when the line is hidden via visibility:hidden", () => {
+		const { memo, line } = mountMemo();
+		line.style.visibility = "hidden";
+		expect(isDisclosureIntact(memo)).toBe(false);
+	});
+
+	it("false when the line is collapsed to a zero box (rect 0×0)", () => {
+		const { memo, line } = mountMemo();
+		(line as HTMLElement).getBoundingClientRect = () =>
+			({ width: 0, height: 0 }) as DOMRect;
+		expect(isDisclosureIntact(memo)).toBe(false);
+	});
+});
+
+describe("neutralizeMemo", () => {
+	it("replaces the memo with the marked neutral notice (no attribution survives)", () => {
+		const { memo } = mountMemo();
+		memo.querySelector("span")!; // sanity: exists pre-neutralize
+		neutralizeMemo(memo);
+		expect(document.querySelector(".certrev-memo")).toBeNull();
+		const notice = document.querySelector(`[${FTC_NEUTRALIZED_ATTR}]`);
+		expect(notice).not.toBeNull();
+		expect(notice!.textContent).toContain("required disclosure was not shown");
+	});
+});
+
+describe("enforceFtcDisclosure", () => {
+	it("leaves an intact memo untouched and returns true", () => {
+		mountMemo();
+		expect(enforceFtcDisclosure(document)).toBe(true);
+		expect(document.querySelector(".certrev-memo")).not.toBeNull();
+		expect(document.querySelector(`[${FTC_NEUTRALIZED_ATTR}]`)).toBeNull();
+	});
+
+	it("neutralizes a tampered memo and returns false", () => {
+		const { line } = mountMemo();
+		line.remove(); // strip the disclosure
+		expect(enforceFtcDisclosure(document)).toBe(false);
+		expect(document.querySelector(".certrev-memo")).toBeNull();
+		expect(document.querySelector(`[${FTC_NEUTRALIZED_ATTR}]`)).not.toBeNull();
+	});
+
+	it("NO-OP (no false positive) when there is no memo at all — the no-memo certified path", () => {
+		// A certified article without an expert memo renders no .certrev-memo (only the card cue).
+		document.body.innerHTML =
+			'<section class="certrev-badge certrev-card">card only, no memo</section>';
+		expect(enforceFtcDisclosure(document)).toBe(true);
+		expect(document.querySelector(`[${FTC_NEUTRALIZED_ATTR}]`)).toBeNull();
+		expect(document.querySelector(".certrev-card")).not.toBeNull();
+	});
+});
+
+describe("installFtcGuard", () => {
+	it("enforces on install (document already interactive)", () => {
+		const { line } = mountMemo();
+		line.remove();
+		installFtcGuard(document);
+		expect(document.querySelector(`[${FTC_NEUTRALIZED_ATTR}]`)).not.toBeNull();
+	});
+
+	it("is idempotent — a second install does not double-bind / re-throw", () => {
+		mountMemo();
+		installFtcGuard(document);
+		expect(() => installFtcGuard(document)).not.toThrow();
+		// Still intact (the second call is a no-op; nothing neutralized a valid memo).
+		expect(document.querySelector(".certrev-memo")).not.toBeNull();
+	});
+});