@certrev/cert-block 0.3.0 → 0.5.1

package/src/components/render-def.ts

@@ -221,6 +221,34 @@ export function isRenderBlockFontSlot(value: string): value is RenderBlockFontSl
 	return (RENDER_BLOCK_FONT_SLOTS as readonly string[]).includes(value)
 }
 
+/**
+ * Parse a 3- or 6-digit opaque hex into 8-bit RGB channels (null on a malformed value). The
+ * 3-digit form expands each nibble (`#abc` → `#aabbcc`), matching CSS.
+ */
+function parseHexColor(hex: string): { r: number; g: number; b: number } | null {
+	const m = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(hex)
+	if (!m) return null
+	let h = m[1]
+	if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2]
+	const n = Number.parseInt(h, 16)
+	return { r: (n >> 16) & 0xff, g: (n >> 8) & 0xff, b: n & 0xff }
+}
+
+/**
+ * AUTO-CONTRAST PICKER — the ink painted over an opaque fill. BYTE-FAITHFUL to the portal's
+ * `accentFg` (src/lib/design-guide/tokens.ts): Rec.601 perceptual luma with a strict `> 0.62`
+ * cutoff, returning EXACTLY `#141414` (near-black) or `#ffffff`; an unparseable value falls back
+ * to the dark ink (safe default). Used at the render edge to DERIVE `barInkFg` from a themed
+ * `barInk` (v2 Phase 1), so the bar foreground always clears its own fill with no separate stored
+ * token — the exact model the portal uses for the accent fill.
+ */
+export function accentFg(hex: string): '#141414' | '#ffffff' {
+	const rgb = parseHexColor(hex)
+	if (!rgb) return '#141414'
+	const luma = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255
+	return luma > 0.62 ? '#141414' : '#ffffff'
+}
+
 /**
  * The resolved themeable-token set `renderCertBlock` paints — the render-edge mirror
  * of the portal `ResolvedRenderDef` theme half (`tokens` ⊕ the precomputed
@@ -234,6 +262,24 @@ export interface ResolvedBlockTheme {
 	readonly cornerRadius: string
 	readonly fontSlot: RenderBlockFontSlot
 	readonly accentFg: '#141414' | '#ffffff'
+	/**
+	 * V2 chrome-ink (Phase 1, e.l.f.) — the header/seal bar (and floating-pill) FILL. OPTIONAL:
+	 * present ONLY when the def themes it, so an un-barInk'd face emits nothing extra and the bar
+	 * keeps its locked navy/white base (byte-identical). Mirrors the portal's `ThemeTokens.barInk`.
+	 */
+	readonly barInk?: string
+	/**
+	 * V2 chrome-ink — the bar's auto-contrast FOREGROUND, DERIVED at the edge via `accentFg(barInk)`
+	 * (the bar-background twin of the accent's `accentFg`). A SIBLING of the tokens, present ONLY when
+	 * `barInk` is (absent ⇒ the locked white bar fg). Mirrors the portal's `ResolvedRenderDef.barInkFg`.
+	 */
+	readonly barInkFg?: '#141414' | '#ffffff'
+	/**
+	 * V2 chrome-ink — the primary FREE-content trust ink (reviewer/author names, title, credential,
+	 * bio, initials + the derived muted scale). OPTIONAL: absent ⇒ the ink stays navy (byte-identical).
+	 * The LOCKED legal disclosures NEVER follow it. Mirrors the portal's `ThemeTokens.inkColor`.
+	 */
+	readonly inkColor?: string
 }
 
 /** The CertREV navy default theme (the un-themed face — matches the locked reference `:root`). */
@@ -253,12 +299,21 @@ export const DEFAULT_BLOCK_THEME: ResolvedBlockTheme = {
  */
 export function resolveBlockTheme(theme?: Partial<ResolvedBlockTheme>): ResolvedBlockTheme {
 	const t = theme ?? {}
+	// v2 chrome-ink (Phase 1): re-validate the two brand-ink tokens at the edge (defense in depth over
+	// the portal's fail-closed bake). Each is DROPPED unless it is an opaque hex; `barInkFg` is always
+	// DERIVED here via `accentFg(barInk)` — never trusted from the input — so the bar foreground can
+	// never diverge from the fill it sits on. ABSENT ⇒ omitted, so the renderer emits nothing extra and
+	// the face is byte-identical to the un-themed default.
+	const barInk = t.barInk && isOpaqueHexColor(t.barInk) ? t.barInk : undefined
+	const inkColor = t.inkColor && isOpaqueHexColor(t.inkColor) ? t.inkColor : undefined
 	return {
 		accentColor: t.accentColor && isOpaqueHexColor(t.accentColor) ? t.accentColor : DEFAULT_BLOCK_THEME.accentColor,
 		surface: t.surface && isOpaqueHexColor(t.surface) ? t.surface : DEFAULT_BLOCK_THEME.surface,
 		cornerRadius: t.cornerRadius && isCornerRadius(t.cornerRadius) ? t.cornerRadius : DEFAULT_BLOCK_THEME.cornerRadius,
 		fontSlot: t.fontSlot && isRenderBlockFontSlot(t.fontSlot) ? t.fontSlot : DEFAULT_BLOCK_THEME.fontSlot,
 		accentFg: t.accentFg === '#141414' || t.accentFg === '#ffffff' ? t.accentFg : DEFAULT_BLOCK_THEME.accentFg,
+		...(barInk ? { barInk, barInkFg: accentFg(barInk) } : {}),
+		...(inkColor ? { inkColor } : {}),
 	}
 }
 

package/src/index.ts

@@ -36,15 +36,24 @@ export {
 	type ResolvedDisplay,
 	resolveDisplay,
 } from './components/format.js'
+// ── Pre-sales PREVIEW block — static, non-delivery, hard-bounded (POR-10743) ──
+export {
+	type PreviewBlockOptions,
+	previewExpiry,
+	renderPreviewBlock,
+} from './components/preview-block.js'
 // ── Cert-render BLOCK — the LOCKED 3-mode cert design as an SSR-safe HTML string ──
 export {
+	type CertBlockFace,
 	type CertBlockFacts,
+	type CertBlockLayout,
 	type CertBlockMode,
 	type RenderCertBlockInput,
 	renderCertBlock,
 } from './components/render-cert-block.js'
 // ── Design-guide render-def support (WS6: themeable tokens + subtractive visibility) ──
 export {
+	accentFg,
 	type BadgeVisibilityFieldId,
 	CERT_SCOPE_LINE,
 	CERT_STRINGS_VERSION,

package/src/modal/avatar-resize.ts

@@ -0,0 +1,99 @@
+// ⚠ VENDORED, BYTE-FAITHFUL relocation of portal `src/lib/cert-delivery/avatar-resize.ts`
+// (POR-10721 W2). The body is byte-identical to the source the deployed `certrev-cert.js`
+// was bundled from — keep it that way. Configurable asset origins for other headless
+// brands are a deliberate post-relocation follow-up (byte-parity takes precedence now).
+/**
+ * Avatar right-sizing (POR-10470) — the SINGLE source of truth for how a cert contributor/expert
+ * headshot URL is rewritten to a display-sized derivative. Referenced by the cert MODAL (TS,
+ * cert-modal-view.ts), mirrored by the Liquid snippet (certrev-avatar-url.liquid), and by the
+ * Cloudflare size-allowlist WAF rule (infra/terraform/cloudflare). Keep the three in lockstep — the
+ * `avatar-resize.test.ts` `SIZES`/param assertions are the tripwire.
+ *
+ * Architecture (Fable-reviewed): the signed cert envelope carries ONE canonical full-res photoUrl
+ * (also the JSON-LD Person.image — never shrunk). Display sizing is a PRESENTATION concern, applied
+ * here via Cloudflare Image Resizing on the same zone as assets.certrev.com:
+ *   https://assets.certrev.com/cdn-cgi/image/width=W,height=W,fit=cover,format=auto/<path>
+ * Same-zone (assets.certrev.com is a custom domain on certrev.com), so no cross-origin origin
+ * allowlist is needed; format=auto serves webp/avif; the transform is cached + billed per-unique.
+ *
+ * ENABLEMENT GATE (`AVATAR_RESIZE_ENABLED`): OFF until Cloudflare Image Resizing is enabled on the
+ * certrev.com zone AND a real photo is verified to resize (POR-10470 gate). While OFF, avatars use
+ * the raw canonical URL — byte-identical to today's behavior — so the extension can deploy for the
+ * font de-block with ZERO avatar regression (a cdn-cgi/image URL 404s → initials fallback if the
+ * feature isn't live). Going live is a one-line flip here + in certrev-avatar-url.liquid, then the
+ * raw branch is removed (flag-debt: tracked as the POR-10470 avatar go-live follow-up).
+ */
+
+/**
+ * Enablement gate — LIVE as of 2026-07-20 (POR-10656). Cloudflare Image Resizing (Transformations)
+ * is enabled on the certrev.com zone (`image_resizing = on`), and the size-allowlist WAF rule
+ * (ruleset 7c9df62e88cb4713b18f12853651af08) is verified enforcing on `/cdn-cgi/image/` paths — a real
+ * photo resizes (`width=84` → 200 image/jpeg) while a disallowed size (`width=999`) is 403-blocked.
+ * Kept as a one-line kill-switch: flip back to `false` + redeploy to instantly revert to raw URLs if
+ * resizing ever misbehaves (removing the raw branch entirely is the flag-debt follow-up, POR-10680).
+ */
+export const AVATAR_RESIZE_ENABLED = true;
+
+/**
+ * The closed size menu (display px @2x for retina). Must equal the widths the Cloudflare WAF rule
+ * allowlists — an open resizer lets anyone mint unbounded transforms (per-unique billing = a cost
+ * DoS). 42→84 (card), 56→112 (memo + modal cert), 64→128 (modal reviewer), 144 = headroom.
+ */
+export const AVATAR_SIZES = [84, 112, 128, 144] as const;
+export type AvatarSize = (typeof AVATAR_SIZES)[number];
+
+/** The R2 asset hosts we own + resize. Anything else is returned untouched (host-guard). */
+export const AVATAR_RESIZE_HOSTS = [
+	"assets.certrev.com",
+	"staging-assets.certrev.com",
+] as const;
+
+/**
+ * The canonical transform options (order is load-bearing — the WAF allowlist matches this EXACT
+ * string). `onerror=redirect` (same-zone) degrades a fatal transform to the original image rather
+ * than a broken avatar. If this string changes, the Cloudflare allowlist + certrev-avatar-url.liquid
+ * + the tripwire test must change in lockstep.
+ */
+export function avatarTransformOptions(size: AvatarSize): string {
+	return `width=${size},height=${size},fit=cover,format=auto,onerror=redirect`;
+}
+
+/**
+ * Pure wrap (ignores the enablement gate) — rewrite a full-res avatar URL to a display-sized
+ * cdn-cgi/image derivative when the host is one we own. Everything else (foreign host, non-https,
+ * malformed, already-a-cdn-cgi URL) returns the input unchanged, so this can never break a URL or
+ * double-wrap. Kept separate from the gate so the wrapping logic is unit-testable before go-live.
+ */
+export function buildResizedAvatarUrl(
+	url: string | null | undefined,
+	size: AvatarSize,
+): string {
+	const raw = (url ?? "").trim();
+	if (!/^https:\/\//i.test(raw)) return raw;
+	let parsed: URL;
+	try {
+		parsed = new URL(raw);
+	} catch {
+		return raw;
+	}
+	if (!(AVATAR_RESIZE_HOSTS as readonly string[]).includes(parsed.hostname))
+		return raw;
+	if (parsed.pathname.startsWith("/cdn-cgi/image/")) return raw; // never double-wrap
+	// Drop any query string: the transform request must carry an EMPTY query so the WAF allowlist's
+	// `query eq ""` pin holds (a photoUrl query would otherwise both bust the cache and trip the rule).
+	const path = parsed.pathname.replace(/^\//, "");
+	return `${parsed.origin}/cdn-cgi/image/${avatarTransformOptions(size)}/${path}`;
+}
+
+/**
+ * The enablement-gated entry point used by the render surfaces. Until Cloudflare Image Resizing is
+ * verified live (`AVATAR_RESIZE_ENABLED`), returns the raw canonical URL — so nothing 404s on a host
+ * whose resizing isn't enabled. After go-live it delegates to the (already-tested) pure builder.
+ */
+export function resizeAvatarUrl(
+	url: string | null | undefined,
+	size: AvatarSize,
+): string {
+	if (!AVATAR_RESIZE_ENABLED) return (url ?? "").trim();
+	return buildResizedAvatarUrl(url, size);
+}

package/src/modal/cert-modal-view.test.ts

@@ -0,0 +1,175 @@
+/** Unit tests for the pure cert-modal view (POR-10102): envelope → dialog HTML. */
+
+import { describe, expect, it } from "vitest";
+import {
+	type CertModalContent,
+	deriveInitials,
+	renderCertDialogInner,
+	renderExpertDialogInner,
+	safeHref,
+	signatureName,
+	stripProtocol,
+} from "./cert-modal-view.js";
+import { CERT_SCOPE_LINE, COMPENSATED_EXPERT_CUE } from "./display-strings.js";
+
+const FULL: CertModalContent = {
+	expert: {
+		displayName: "Dr. Erik Schraga, MD",
+		credentials: [
+			{ cardLabel: "Board-Certified" },
+			{ cardLabel: "Emergency Medicine" },
+		],
+		profileUrl: "https://certrev.com/expert/abc",
+		photoUrl: null,
+		bio: "Short bio.",
+		background: "Reviews health content for accuracy and responsible framing.",
+	},
+	certifiedAt: "2026-04-14T00:00:00.000Z",
+	verifyUrl: "https://certrev.com/verify/abc123",
+	articleTitle: "Spring Cold or Spring Allergies?",
+	displayCertId: "CR-2026-0512",
+	display: { showExpertPhoto: false, showBio: true },
+};
+
+describe("name helpers", () => {
+	it("deriveInitials strips honorific AND post-nominal (ES, not EM)", () => {
+		expect(deriveInitials("Dr. Erik Schraga, MD")).toBe("ES");
+		expect(deriveInitials("Jane Doe")).toBe("JD");
+		expect(deriveInitials("Prof. Ada Lovelace, PhD")).toBe("AL");
+		expect(deriveInitials("Madonna")).toBe("MA");
+		expect(deriveInitials("")).toBe("");
+	});
+	it("signatureName is the bare given+family name", () => {
+		expect(signatureName("Dr. Erik Schraga, MD")).toBe("Erik Schraga");
+		expect(signatureName("Jane Doe")).toBe("Jane Doe");
+	});
+	it("stripProtocol / safeHref", () => {
+		expect(stripProtocol("https://certrev.com/verify/x/")).toBe(
+			"certrev.com/verify/x",
+		);
+		expect(safeHref("https://certrev.com/x")).toBe("https://certrev.com/x");
+		expect(safeHref("javascript:alert(1)")).toBe("#");
+		expect(safeHref("/relative")).toBe("#");
+		expect(safeHref(null)).toBe("#");
+	});
+});
+
+describe("renderCertDialogInner (3a)", () => {
+	it("renders the header, name, creds, article title, cert id, signature, stamp, CTA", () => {
+		const html = renderCertDialogInner(FULL) ?? "";
+		expect(html).toContain("Certificate of Expert Review");
+		expect(html).toContain("Dr. Erik Schraga, MD");
+		expect(html).toContain("Board-Certified · Emergency Medicine");
+		expect(html).toContain("Spring Cold or Spring Allergies?");
+		expect(html).toContain("CR-2026-0512");
+		expect(html).toContain(">Erik Schraga<"); // Allura signature = core name
+		expect(html).toContain("certrev.com/verify/abc123"); // footer url, protocol stripped
+		expect(html).toContain("CERTREV VERIFIED · CERTIFIED"); // the stamp textPath
+		expect(html).toContain("View full certificate");
+		expect(html).toContain('href="https://certrev.com/verify/abc123"');
+	});
+	it("fails closed with no reviewer name", () => {
+		expect(
+			renderCertDialogInner({
+				...FULL,
+				expert: { ...FULL.expert, displayName: "" },
+			}),
+		).toBeNull();
+		expect(renderCertDialogInner({ ...FULL, expert: null })).toBeNull();
+	});
+	it('drops the "Certifies the article" block when no title', () => {
+		const html = renderCertDialogInner({ ...FULL, articleTitle: null }) ?? "";
+		expect(html).not.toContain("Certifies the article");
+	});
+	it("drops the Certificate ID column when no display id", () => {
+		const html = renderCertDialogInner({ ...FULL, displayCertId: null }) ?? "";
+		expect(html).not.toContain("Certificate ID");
+		expect(html).toContain("Issued"); // other meta cols still present
+	});
+	it("escapes a hostile reviewer name", () => {
+		const html =
+			renderCertDialogInner({
+				...FULL,
+				expert: { ...FULL.expert, displayName: "<script>x</script>" },
+			}) ?? "";
+		expect(html).not.toContain("<script>x</script>");
+		expect(html).toContain("&lt;script&gt;");
+	});
+});
+
+describe("renderExpertDialogInner (4b)", () => {
+	it("renders the header, name, verified credential chips, bio, trust, CTA", () => {
+		const html = renderExpertDialogInner(FULL) ?? "";
+		expect(html).toContain("Verified reviewer");
+		expect(html).toContain("Dr. Erik Schraga, MD");
+		expect(html).toContain(">Board-Certified<");
+		expect(html).toContain(">Emergency Medicine<");
+		expect(html).toContain("Reviews health content for accuracy"); // verified background as bio
+		expect(html).toContain("Independently reviewed · Certified Apr 14, 2026");
+		expect(html).toContain("View full profile on CertREV");
+		expect(html).toContain('href="https://certrev.com/expert/abc"');
+	});
+	it("NEVER renders an affiliation subtitle (omitted — no data source)", () => {
+		const html = renderExpertDialogInner(FULL) ?? "";
+		expect(html).not.toContain("crm-id__subtitle");
+	});
+	it("drops the bio when showBio is false", () => {
+		const html =
+			renderExpertDialogInner({ ...FULL, display: { showBio: false } }) ?? "";
+		expect(html).not.toContain("crm-bio");
+	});
+	it("renders no chips when there are no credentials", () => {
+		const html =
+			renderExpertDialogInner({
+				...FULL,
+				expert: { ...FULL.expert, credentials: [] },
+			}) ?? "";
+		expect(html).not.toContain("crm-chips");
+	});
+	it("drops a javascript: profile url to #", () => {
+		const html =
+			renderExpertDialogInner({
+				...FULL,
+				expert: { ...FULL.expert, profileUrl: "javascript:alert(1)" },
+			}) ?? "";
+		expect(html).toContain('href="#"');
+		expect(html).not.toContain("javascript:");
+	});
+	it("fails closed with no reviewer name", () => {
+		expect(
+			renderExpertDialogInner({
+				...FULL,
+				expert: { ...FULL.expert, displayName: null },
+			}),
+		).toBeNull();
+	});
+});
+
+describe("FTC disclosure footer (POR-10496)", () => {
+	const COMPENSATED: CertModalContent = {
+		...FULL,
+		expert: { ...FULL.expert, compensationCue: COMPENSATED_EXPERT_CUE },
+	};
+	// A pro-bono reviewer carries no cue (FULL omits `compensationCue`).
+	const PRO_BONO = FULL;
+
+	for (const [label, render] of [
+		["reviewer (4b)", renderExpertDialogInner],
+		["certificate (3a)", renderCertDialogInner],
+	] as const) {
+		it(`${label}: compensated → the cue label + the scope line`, () => {
+			const html = render(COMPENSATED) ?? "";
+			expect(html).toContain("crm-disclosure");
+			expect(html).toContain("crm-disclosure__cue");
+			expect(html).toContain(COMPENSATED_EXPERT_CUE);
+			expect(html).toContain(CERT_SCOPE_LINE);
+		});
+		it(`${label}: pro-bono → the scope line ONLY (no cue label)`, () => {
+			const html = render(PRO_BONO) ?? "";
+			expect(html).toContain("crm-disclosure"); // footer + scope line always render
+			expect(html).toContain(CERT_SCOPE_LINE);
+			expect(html).not.toContain("crm-disclosure__cue"); // the "Compensated expert" label is dropped
+			expect(html).not.toContain(COMPENSATED_EXPERT_CUE);
+		});
+	}
+});

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

@@ -0,0 +1,210 @@
+/**
+ * Pure envelope → modal-HTML mapping for `<certrev-cert-modal>` (POR-10102).
+ *
+ * DOM-free and side-effect-free so it unit-tests without a browser: given the
+ * signed envelope's `payload.content`, it returns the inner HTML of the certificate
+ * (3a) and reviewer (4b) `<dialog>`s. The element (`certrev-cert-modal.ts`) owns the
+ * shadow root, the `<dialog>` wrappers, and the open/close wiring; this module owns
+ * only the content.
+ *
+ * Invariants:
+ *  - Every dynamic value is `escapeHtml`'d (the envelope is signed, but a reviewer
+ *    name / memo is still attacker-adjacent content).
+ *  - Only `http(s)` hrefs render (mirrors the Liquid `certrev-safe-url` guard).
+ *  - Verified-only fields (POR-10091): the bio binds the envelope's verified
+ *    `background`/`bio`; this module never reaches for a raw column.
+ *  - Graceful degradation: a missing article title drops the "Certifies the article"
+ *    block; a missing display cert id drops that meta column; no credentials → no
+ *    chips / no creds line; no bio → no bio paragraph. Nothing renders an empty gap.
+ *  - WS4a (display eviction) accept-on-read: an ABSENT `display` block resolves to the
+ *    preset default (show-all) — every read below is `display?.x !== false` / `=== false`,
+ *    so `undefined` never suppresses a field. The modal is the LOCKED navy trust chrome and
+ *    is deliberately NOT themeable by a brand render-def; it reads visibility off the signed
+ *    envelope only, so no render-def wiring belongs here.
+ */
+
+import { escapeHtml } from './escape.js'
+import { resizeAvatarUrl } from './avatar-resize.js'
+import { CERT_SCOPE_LINE, formatCertDisplayDate } from './display-strings.js'
+import { checkIcon, chevronMark, verifiedStamp } from './certrev-cert-modal.styles.js'
+
+export interface CertModalCredential {
+	abbreviation?: string | null
+	fullName?: string | null
+	cardLabel?: string | null
+}
+
+export interface CertModalExpert {
+	displayName?: string | null
+	credentials?: readonly CertModalCredential[] | null
+	profileUrl?: string | null
+	photoUrl?: string | null
+	bio?: string | null
+	background?: string | null
+	/** POR-10496: the pre-composed material-connection label ('Compensated expert') or null/absent for
+	 *  a pro-bono reviewer. Present → the disclosure footer renders the label; null/absent → label omitted. */
+	compensationCue?: string | null
+}
+
+/** The subset of the signed `payload.content` the modals read (structural). */
+export interface CertModalContent {
+	expert?: CertModalExpert | null
+	certifiedAt?: string | null
+	verifyUrl?: string | null
+	articleTitle?: string | null
+	displayCertId?: string | null
+	display?: { showExpertPhoto?: boolean | null; showBio?: boolean | null } | null
+}
+
+const HONORIFIC_RE = /^(dr|prof|professor|mr|mrs|ms|mx|rev|sir|dame)\.?\s+/i
+
+/** The bare given+family name: strip the leading honorific AND the trailing post-nominal
+ *  (`, MD`), so "Dr. Erik Schraga, MD" → "Erik Schraga". */
+function coreName(displayName: string): string {
+	const withoutHonorific = displayName.replace(HONORIFIC_RE, '').trim()
+	const comma = withoutHonorific.indexOf(',')
+	return (comma === -1 ? withoutHonorific : withoutHonorific.slice(0, comma)).trim()
+}
+
+/** Two-letter initials — first + last of the core name (honorific + post-nominal stripped),
+ *  so "Dr. Erik Schraga, MD" → "ES" (matches the Liquid derivation), not "EM". */
+export function deriveInitials(name: string): string {
+	const words = coreName(name).split(/\s+/).filter(Boolean)
+	if (words.length === 0) return ''
+	if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
+	return (words[0][0] + words[words.length - 1][0]).toUpperCase()
+}
+
+/** The handwritten-signature form (the core name). */
+export function signatureName(displayName: string): string {
+	return coreName(displayName)
+}
+
+/** `https://certrev.com/verify/x` → `certrev.com/verify/x` (footer URL line). */
+export function stripProtocol(url: string): string {
+	return url.replace(/^https?:\/\//i, '').replace(/\/$/, '')
+}
+
+/** Return the url only if it is an absolute http(s) URL, else `#` (safe-url guard). */
+export function safeHref(url: string | null | undefined): string {
+	if (!url) return '#'
+	return /^https?:\/\//i.test(url.trim()) ? url.trim() : '#'
+}
+
+/** A single credential's display label (cardLabel ?? fullName ?? abbreviation). */
+function credLabel(c: CertModalCredential): string {
+	return (c.cardLabel || c.fullName || c.abbreviation || '').trim()
+}
+
+/** The verified credential labels, in order, de-duped + non-empty. */
+function credLabels(expert: CertModalExpert | null | undefined): string[] {
+	const out: string[] = []
+	for (const c of expert?.credentials ?? []) {
+		const label = credLabel(c)
+		if (label && !out.includes(label)) out.push(label)
+	}
+	return out
+}
+
+/** The reviewer bio — verified background preferred, then verified bio. */
+function bioText(expert: CertModalExpert | null | undefined, display: CertModalContent['display']): string {
+	if (display?.showBio === false) return ''
+	return (expert?.background || expert?.bio || '').trim()
+}
+
+/** An avatar cell — the cert-frozen photo (when shown) or the initials chip. */
+function avatarHtml(
+	expert: CertModalExpert | null | undefined,
+	name: string,
+	sizeClass: string,
+	showPhoto: boolean,
+): string {
+	const photo = (expert?.photoUrl || '').trim()
+	if (showPhoto && /^https?:\/\//i.test(photo)) {
+		// Display px from the size class; request the @2x derivative for retina crispness (POR-10470).
+		// resizeAvatarUrl is host-guarded + enablement-gated: until Cloudflare Image Resizing is live it
+		// returns the raw canonical URL, so the modal never 404s an unresized host.
+		const displayPx = sizeClass.includes('--64') ? 64 : 56
+		const src = resizeAvatarUrl(photo, displayPx === 64 ? 128 : 112)
+		return `<img class="crm-avatar ${sizeClass}" src="${escapeHtml(src)}" alt="" width="${displayPx}" height="${displayPx}" decoding="async">`
+	}
+	return `<span class="crm-avatar ${sizeClass}">${escapeHtml(deriveInitials(name))}</span>`
+}
+
+const CLOSE_BUTTON = `<button type="button" class="crm-close" data-certrev-modal-close aria-label="Close">&times;</button>`
+
+function headHtml(eyebrow: string): string {
+	return `<div class="crm-head">${chevronMark(16, '#ffffff')}<span class="crm-head__eyebrow">${escapeHtml(eyebrow)}</span><span class="crm-head__wordmark">CertREV</span></div>`
+}
+
+function certifiedChip(cls: string): string {
+	return `<span class="${cls}">${checkIcon(8)}Certified</span>`
+}
+
+/**
+ * The FTC disclosure footer (POR-10496), rendered on both dialogs. The material-connection cue
+ * (`expert.compensationCue`, a FINISHED string off the signed envelope) leads ONLY when the reviewer
+ * was compensated; a pro-bono reviewer (null/absent cue) drops the label but keeps the scope line —
+ * which makes no compensation claim, so it is true for volunteers too and renders unconditionally.
+ * The scope line is the verbatim FTC copy (`CERT_SCOPE_LINE`), never re-assembled here.
+ */
+function disclosureFooter(expert: CertModalExpert | null | undefined): string {
+	const cue = (expert?.compensationCue || '').trim()
+	const cueHtml = cue ? `<span class="crm-disclosure__cue">${escapeHtml(cue)}</span> ` : ''
+	return `<div class="crm-disclosure">${cueHtml}${escapeHtml(CERT_SCOPE_LINE)}</div>`
+}
+
+/**
+ * The certificate modal (3a) inner HTML. Returns `null` when there is no reviewer
+ * name to display — a certificate card must never render anonymous (fail-closed,
+ * mirrors the Liquid `ename != ''` gate).
+ */
+export function renderCertDialogInner(content: CertModalContent): string | null {
+	const expert = content.expert ?? null
+	const name = (expert?.displayName || '').trim()
+	if (!name) return null
+
+	const showPhoto = content.display?.showExpertPhoto !== false
+	const creds = credLabels(expert).join(' · ')
+	const issued = formatCertDisplayDate(content.certifiedAt) ?? ''
+	const certId = (content.displayCertId || '').trim()
+	const title = (content.articleTitle || '').trim()
+	const verifyUrl = (content.verifyUrl || '').trim()
+	const sig = signatureName(name)
+
+	const certifiesBlock = title
+		? `<div class="crm-certifies"><div class="crm-certifies__eyebrow">Certifies the article</div><div class="crm-certifies__title">${escapeHtml(title)}</div></div>`
+		: ''
+
+	const certIdCol = certId
+		? `<div class="crm-meta__col"><div class="crm-meta__label">Certificate ID</div><div class="crm-meta__value crm-meta__value--mono">${escapeHtml(certId)}</div></div>`
+		: ''
+
+	const urlLine = verifyUrl ? `<div class="crm-sig__url">${escapeHtml(stripProtocol(verifyUrl))}</div>` : ''
+
+	return `${CLOSE_BUTTON}${headHtml('Certificate of Expert Review')}<div class="crm-body--cert"><div class="crm-expert-row">${avatarHtml(expert, name, 'crm-avatar--56', showPhoto)}<div class="crm-expert-row__info"><div class="crm-expert-row__eyebrow">Reviewing Expert</div><div class="crm-expert-row__name">${escapeHtml(name)}</div>${creds ? `<div class="crm-expert-row__creds">${escapeHtml(creds)}</div>` : ''}</div></div>${certifiesBlock}<div class="crm-meta"><div class="crm-meta__col"><div class="crm-meta__label">Issued</div><div class="crm-meta__value">${escapeHtml(issued)}</div></div>${certIdCol}<div class="crm-meta__col"><div class="crm-meta__label">Status</div><div class="crm-meta__status">${certifiedChip('crm-chip')}</div></div></div><div class="crm-sig"><div><div class="crm-sig__name">${escapeHtml(sig)}</div><div class="crm-sig__rule"></div>${urlLine}</div>${verifiedStamp('cert')}</div>${disclosureFooter(expert)}<div class="crm-actions"><a class="crm-cta" href="${escapeHtml(safeHref(verifyUrl))}" target="_blank" rel="noopener noreferrer">View full certificate</a><button type="button" class="crm-ghost" data-certrev-modal-close>Close</button></div></div>`
+}
+
+/**
+ * The reviewer/profile modal (4b) inner HTML. Returns `null` when there is no
+ * reviewer name (fail-closed). The affiliation subtitle is intentionally omitted
+ * (no verified data source — POR-10102 decision).
+ */
+export function renderExpertDialogInner(content: CertModalContent): string | null {
+	const expert = content.expert ?? null
+	const name = (expert?.displayName || '').trim()
+	if (!name) return null
+
+	const showPhoto = content.display?.showExpertPhoto !== false
+	const chips = credLabels(expert)
+	const bio = bioText(expert, content.display)
+	const date = formatCertDisplayDate(content.certifiedAt)
+
+	const chipsHtml = chips.length
+		? `<div class="crm-chips">${chips.map((c) => `<span class="crm-chips__chip">${escapeHtml(c)}</span>`).join('')}</div>`
+		: ''
+	const bioHtml = bio ? `<p class="crm-bio">${escapeHtml(bio)}</p>` : ''
+	const trustText = date ? `Independently reviewed · Certified ${escapeHtml(date)}` : 'Independently reviewed'
+
+	return `${CLOSE_BUTTON}${headHtml('Verified reviewer')}<div class="crm-body--expert"><div class="crm-id">${avatarHtml(expert, name, 'crm-avatar--64', showPhoto)}<div class="crm-id__info"><div class="crm-id__name">${escapeHtml(name)}</div></div></div>${chipsHtml}${bioHtml}<div class="crm-trust">${certifiedChip('crm-trust__chip')}<span class="crm-trust__text">${trustText}</span></div>${disclosureFooter(expert)}<div class="crm-actions"><a class="crm-cta" href="${escapeHtml(safeHref(expert?.profileUrl))}" target="_blank" rel="noopener noreferrer">View full profile on CertREV</a><button type="button" class="crm-ghost" data-certrev-modal-close>Close</button></div></div>`
+}