@certrev/cert-block 0.2.0 → 0.5.0

package/src/__tests__/render-cert-block.test.ts

@@ -16,7 +16,9 @@
 import { describe, expect, it } from 'vitest'
 import {
 	CERT_SCOPE_LINE,
+	type CertBlockFace,
 	type CertBlockFacts,
+	type CertBlockLayout,
 	type CertBlockMode,
 	COMPENSATED_EXPERT_CUE,
 	CREDENTIAL_VERIFIED_ATTRIBUTION,
@@ -48,6 +50,17 @@ const THEMED: ResolvedBlockTheme = {
 	accentFg: '#141414',
 }
 
+/**
+ * A v2 brand-ink themed brand (e.l.f.-shaped): a black seal bar + near-black free-content ink on
+ * top of the accent/surface/corner/font theming. `barInkFg` is DERIVED at the edge from `barInk`
+ * (accentFg('#000000') = '#ffffff'), so it need not be supplied here.
+ */
+const THEMED_INK: ResolvedBlockTheme = {
+	...THEMED,
+	barInk: '#000000',
+	inkColor: '#1a1a1a',
+}
+
 const MODES: CertBlockMode[] = ['banner', 'sidebar', 'floating']
 const CLAIM_FACES: CertBlockMode[] = ['banner', 'sidebar']
 
@@ -90,6 +103,53 @@ describe('renderCertBlock — locked-design snapshots', () => {
 			expect(renderCertBlock({ mode, theme: THEMED, facts: FACTS })).toMatchSnapshot()
 		})
 	}
+	for (const mode of CLAIM_FACES) {
+		it(`${mode} (v2 brand-ink: barInk + inkColor) matches the locked snapshot`, () => {
+			expect(renderCertBlock({ mode, theme: THEMED_INK, facts: FACTS })).toMatchSnapshot()
+		})
+	}
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// First-class banner memo split (POR-10741) — retires the CertReviewCard string-hack
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('renderCertBlock — banner memo split (part)', () => {
+	it("default (no part) is byte-identical to part:'full'", () => {
+		expect(renderCertBlock({ mode: 'banner', facts: FACTS })).toBe(
+			renderCertBlock({ mode: 'banner', part: 'full', facts: FACTS }),
+		)
+	})
+
+	it("part:'full' === header + memo (the two split parts recompose the whole card set)", () => {
+		const header = renderCertBlock({ mode: 'banner', part: 'header', facts: FACTS })
+		const memo = renderCertBlock({ mode: 'banner', part: 'memo', facts: FACTS })
+		// Each part is a self-contained themed root; concatenating the header's inner + the memo's
+		// inner reproduces the full render's inner (same root shell, split content).
+		const inner = (html: string) => html.slice(html.indexOf('>') + 1, html.lastIndexOf('</div>'))
+		const full = renderCertBlock({ mode: 'banner', part: 'full', facts: FACTS })
+		expect(inner(header) + inner(memo)).toBe(inner(full))
+	})
+
+	it("part:'header' renders the header card WITHOUT the memo quote", () => {
+		const header = renderCertBlock({ mode: 'banner', part: 'header', facts: FACTS })
+		expect(header.startsWith('<div class="certrev-cert certrev-cert--banner')).toBe(true)
+		expect(header).toContain('Expert reviewed')
+		expect(header).not.toContain(FACTS.memo)
+	})
+
+	it("part:'memo' renders the memo card WITHOUT the header eyebrow", () => {
+		const memo = renderCertBlock({ mode: 'banner', part: 'memo', facts: FACTS })
+		expect(memo.startsWith('<div class="certrev-cert certrev-cert--banner')).toBe(true)
+		expect(memo).toContain(FACTS.memo)
+		expect(memo).not.toContain('Expert reviewed')
+	})
+
+	it('part is ignored outside banner mode (sidebar renders identically with or without it)', () => {
+		expect(renderCertBlock({ mode: 'sidebar', part: 'header', facts: FACTS })).toBe(
+			renderCertBlock({ mode: 'sidebar', facts: FACTS }),
+		)
+	})
 })
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -166,7 +226,11 @@ describe('theming', () => {
 		expect(html).toContain('--ba:#0a1b3f')
 		expect(html).toContain('--ba-fg:#ffffff')
 		expect(html).toContain('--br:14px')
-		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.sans}`)
+		// The body font is a host-overridable HOOK (POR-10742): the resolved stack is the FALLBACK
+		// inside `--cr-bf:var(--bf,<stack>)`, and the root must NOT hard-declare a bare `--bf:` (which
+		// would shadow a host page's `--bf` and force `!important`).
+		expect(html).toContain(`--cr-bf:var(--bf,${RENDER_BLOCK_FONT_STACKS.sans})`)
+		expect(html).not.toContain(';--bf:')
 		expect(html).toContain('--surface:#ffffff')
 		expect(html).toContain('data-certrev-strings-version="2026-07"')
 	})
@@ -176,7 +240,7 @@ describe('theming', () => {
 		expect(html).toContain('--ba:#E8603C')
 		expect(html).toContain('--ba-fg:#141414')
 		expect(html).toContain('--br:22px')
-		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.grotesk}`)
+		expect(html).toContain(`--cr-bf:var(--bf,${RENDER_BLOCK_FONT_STACKS.grotesk})`)
 		expect(html).toContain('--surface:#faf8f4')
 	})
 
@@ -201,22 +265,112 @@ describe('theming', () => {
 		expect(html).toContain('--ba:#0a1b3f')
 		expect(html).toContain('--ba-fg:#ffffff')
 		expect(html).toContain('--br:14px')
-		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.sans}`)
+		expect(html).toContain(`--cr-bf:var(--bf,${RENDER_BLOCK_FONT_STACKS.sans})`)
 	})
 
 	it('the fixed CertREV logo chrome renders on the banner + sidebar headers and the memo credit', () => {
 		const banner = renderCertBlock({ mode: 'banner', facts: FACTS })
 		const sidebar = renderCertBlock({ mode: 'sidebar', facts: FACTS })
-		// header marks track the accent ink (currentColor) + the memo credit mark (fixed navy) + the wordmark face
+		// every mark tracks its container ink via currentColor (navy header + memo verified lockup)
 		expect(banner).toContain('aria-label="CertREV"')
 		expect(banner).toContain('<path fill="currentColor"')
-		expect(banner).toContain('<path fill="#0a1b3f"')
-		expect(banner).toContain('font-family:var(--font-wordmark)')
+		// the memo footer carries the "Verified by CertREV" trust mark; the wordmark rides the body
+		// font now (the grotesk --font-wordmark slot is gone from the locked chrome)
+		expect(banner).toContain('Verified by')
+		expect(banner).not.toContain('font-family:var(--font-wordmark)')
 		expect(sidebar).toContain('aria-label="CertREV"')
 		expect(sidebar).toContain('<path fill="currentColor"')
 	})
 })
 
+// ─────────────────────────────────────────────────────────────────────────────
+// V2 brand-ink theming (barInk + inkColor) — parity with the portal Liquid/CSS
+// engines. The bar/ink wire vars are emitted ONLY when the def sets the token;
+// unset ⇒ neither (byte-identical navy default). The FREE-content ink follows the
+// brand ink; the LOCKED legal disclosures stay on the navy trust ink.
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('v2 brand-ink theming — barInk + inkColor (portal parity)', () => {
+	it('unset ⇒ NEITHER the bar wire vars NOR --certrev-ink is emitted (byte-clean default)', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: FACTS })
+		expect(html).not.toContain('--certrev-bar-bg:#')
+		expect(html).not.toContain('--certrev-bar-fg:#')
+		expect(html).not.toContain('--certrev-ink:#')
+		// the --cr-ink family is ALWAYS defined; unthemed it is the EXACT navy literals (no color-mix)
+		expect(html).toContain('--cr-ink:var(--certrev-ink,#0a1b3f)')
+		expect(html).toContain('--cr-ink-sub:rgba(10,27,63,.55)') // === --navy-55
+		expect(html).toContain('--cr-ink-soft:rgba(10,27,63,.75)') // === --navy-75
+		// the header bar consumes the navy/white fallbacks (byte-identical)
+		expect(html).toContain('background:var(--certrev-bar-bg,#0a1b3f);color:var(--certrev-bar-fg,#fff)')
+	})
+
+	it('barInk set ⇒ emits --certrev-bar-bg + the DERIVED --certrev-bar-fg (accentFg)', () => {
+		const html = renderCertBlock({ mode: 'banner', theme: { ...THEMED, barInk: '#000000' }, facts: FACTS })
+		expect(html).toContain('--certrev-bar-bg:#000000')
+		// accentFg('#000000') = '#ffffff' (a dark bar takes a white foreground)
+		expect(html).toContain('--certrev-bar-fg:#ffffff')
+	})
+
+	it('barInkFg is DERIVED at the edge — a LIGHT bar → #141414, and a bogus input barInkFg is ignored', () => {
+		const html = renderCertBlock({
+			mode: 'floating',
+			// pass a WRONG barInkFg — resolveBlockTheme recomputes it from barInk via accentFg
+			theme: { ...THEMED, barInk: '#f5f5f5', barInkFg: '#ffffff' },
+			facts: FACTS,
+		})
+		expect(html).toContain('--certrev-bar-bg:#f5f5f5')
+		expect(html).toContain('--certrev-bar-fg:#141414') // light bar → dark ink, recomputed
+		expect(html).not.toContain('--certrev-bar-fg:#ffffff')
+	})
+
+	it('inkColor set ⇒ emits --certrev-ink + derives the muted scale off --cr-ink via color-mix', () => {
+		const html = renderCertBlock({ mode: 'banner', theme: { ...THEMED, inkColor: '#1a1a1a' }, facts: FACTS })
+		expect(html).toContain('--certrev-ink:#1a1a1a')
+		expect(html).toContain('--cr-ink:var(--certrev-ink,#0a1b3f)')
+		expect(html).toContain('--cr-ink-sub:color-mix(in srgb,var(--cr-ink) 55%,transparent)')
+		expect(html).toContain('--cr-ink-soft:color-mix(in srgb,var(--cr-ink) 75%,transparent)')
+	})
+
+	it('FREE content follows the brand ink; LOCKED legal disclosures stay on the navy trust ink', () => {
+		const html = renderCertBlock({ mode: 'banner', theme: THEMED_INK, facts: FACTS })
+		// FREE — names ride --cr-ink; the memo/bio ride --cr-ink-soft; title/credential/initials --cr-ink-sub
+		expect(html).toContain('font-weight:700;color:var(--cr-ink);">Jane Doe, MD') // reviewer name
+		expect(html).toContain('color:var(--cr-ink);">The Editorial Team') // author name
+		expect(html).toContain('color:var(--cr-ink-soft);white-space:pre-line;">Patients ask me') // memo body
+		// LOCKED — the legal/trust text is NEVER repointed to --cr-ink (proves the free/locked boundary)
+		expect(html).toContain('color:var(--navy-55);line-height:1.45;margin-top:3px;">Credential verified by CertREV')
+		expect(html).toContain(`color:var(--navy-55);margin-top:8px;line-height:1.5;">${CERT_SCOPE_LINE}</div>`) // FTC scope
+		expect(html).toContain('color:var(--navy);margin-bottom:11px;">Reviewed by') // section label
+		expect(html).toContain('text-transform:uppercase;color:var(--navy-55);"><span>Certified') // certified date + cue row
+		// and the legal text never carries a --cr-ink token
+		expect(html).not.toMatch(/--cr-ink[^;]*;[^"]*">Credential verified by CertREV/)
+		expect(html).not.toMatch(/--cr-ink[^;]*;[^"]*">Independent editorial review/)
+	})
+
+	it('barInk themes the pill (floating) — portal parity: the pill follows the BAR, not the accent', () => {
+		const html = renderCertBlock({ mode: 'floating', theme: THEMED_INK, facts: FACTS })
+		expect(html).toContain('--certrev-bar-bg:#000000')
+		expect(html).toContain('background:var(--certrev-bar-bg,#0a1b3f);color:var(--certrev-bar-fg,#fff)')
+	})
+
+	it('an invalid barInk / inkColor fails SAFE — dropped, never emitted (bar + ink stay navy)', () => {
+		const html = renderCertBlock({
+			mode: 'banner',
+			theme: {
+				...THEMED,
+				barInk: 'black;}</style>' as ResolvedBlockTheme['barInk'],
+				inkColor: '#12' as ResolvedBlockTheme['inkColor'],
+			},
+			facts: FACTS,
+		})
+		expect(html).not.toContain('--certrev-bar-bg:#')
+		expect(html).not.toContain('--certrev-ink:#')
+		expect(html).not.toContain('black;}')
+		// the free-content ink falls back to the navy literals
+		expect(html).toContain('--cr-ink-sub:rgba(10,27,63,.55)')
+	})
+})
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Escaping — storefront HTML built by hand
 // ─────────────────────────────────────────────────────────────────────────────
@@ -257,3 +411,247 @@ describe('escaping (this is storefront HTML)', () => {
 		})
 	}
 })
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Reviewer name — honorific stripping (parity with the Liquid twin)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('reviewer name — honorific stripping (Liquid parity)', () => {
+	it('strips a leading honorific for the avatar initials + the first-name link', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: { ...FACTS, reviewerName: 'Dr. Marcus Ellison' } })
+		// "Dr. Marcus Ellison" → "ME" avatar, never "DM"
+		expect(html).toContain('flex-shrink:0;">ME<')
+		expect(html).not.toContain('flex-shrink:0;">DM<')
+		// "Marcus's Profile", never "Dr.'s Profile" (apostrophe-agnostic)
+		expect(html).toMatch(/Marcus.s Profile/)
+		expect(html).not.toMatch(/View Dr\..s profile/)
+	})
+
+	it('leaves an un-prefixed name untouched', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: { ...FACTS, reviewerName: 'Jane Doe' } })
+		expect(html).toContain('flex-shrink:0;">JD<')
+	})
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// WS-B — placedFields-strict rendering: visibility is the engine's face alone,
+// `rung` is a stamp (never a branch), and an ABSENT face grandfathers 0.3.0.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Every engine field id renderCertBlock knows how to paint. */
+const ALL_FIELDS = [
+	'label',
+	'authorName',
+	'authorTitle',
+	'bylinePlain',
+	'bylineCredentialed',
+	'reviewerPhoto',
+	'bio',
+	'memo',
+	'compensationCue',
+	'scopeLine',
+	'profileLink',
+	'certificateLink',
+] as const
+
+/** A full claim face (everything placed) — the strict analogue of the grandfathered full-facts render. */
+const FULL_FACE: CertBlockFace = { rung: 'credentialed', placedFields: [...ALL_FIELDS] }
+
+/** Drop the observability-only rung attribute so a strict render can be compared to its grandfathered twin. */
+function stripRung(html: string): string {
+	return html.replace(/ data-certrev-rung="[^"]*"/g, '')
+}
+
+/** A face placing everything EXCEPT the given ids. */
+function faceExcept(...omit: string[]): CertBlockFace {
+	return { rung: 'credentialed', placedFields: ALL_FIELDS.filter((f) => !omit.includes(f)) }
+}
+
+describe('WS-B: face-absent grandfathers the 0.3.0 full-facts render byte-for-byte', () => {
+	for (const mode of MODES) {
+		it(`${mode}: a full-face strict render === the grandfathered render (modulo the rung stamp)`, () => {
+			const grandfathered = renderCertBlock({ mode, facts: FACTS })
+			const strictFull = renderCertBlock({ mode, facts: FACTS, face: FULL_FACE })
+			// the ONLY difference a full face introduces is the observability stamp
+			expect(strictFull).toContain('data-certrev-rung="credentialed"')
+			expect(stripRung(strictFull)).toBe(grandfathered)
+		})
+	}
+
+	it('an absent face emits NO rung attribute (grandfather stays byte-clean)', () => {
+		expect(renderCertBlock({ mode: 'banner', facts: FACTS })).not.toContain('data-certrev-rung')
+	})
+})
+
+describe('WS-B: strict placedFields — a minimal face renders only what it placed', () => {
+	const MINIMAL: CertBlockFace = { rung: 'minimal', placedFields: ['label', 'profileLink', 'certificateLink'] }
+
+	it('custom: [label, profileLink, certificateLink] paints exactly those, nothing else', () => {
+		const html = renderCertBlock({ mode: 'custom', facts: FACTS, face: MINIMAL })
+		// the placed fields
+		expect(html).toContain('Expert reviewed')
+		expect(html).toMatch(/Jane's Profile/)
+		expect(html).toContain('>Certificate</a>')
+		// everything NOT placed is absent
+		expect(html).not.toContain('Written by')
+		expect(html).not.toContain('Jane Doe') // no byline / reviewer name
+		expect(html).not.toContain('Expert memo')
+		expect(html).not.toContain(FACTS.memo)
+		expect(html).not.toContain(FACTS.bio)
+		expect(html).not.toContain(CERT_SCOPE_LINE)
+		expect(html).not.toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		expect(visibleText(html)).not.toContain(COMPENSATED_EXPERT_CUE)
+		// the custom face still carries the strict + observability markers
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+		expect(html).toContain('data-certrev-rung="minimal"')
+		expect(html).toContain('data-certrev-mode="custom"')
+	})
+
+	it('banner: a minimal face drops the author + reviewer body + compensation cue', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: FACTS, face: MINIMAL })
+		expect(html).toContain('Expert reviewed') // label header
+		expect(html).not.toContain('Written by')
+		expect(html).not.toContain('Jane Doe') // no byline placed → no reviewer name anywhere
+		expect(html).not.toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		expect(visibleText(html)).not.toContain(COMPENSATED_EXPERT_CUE)
+		// the memo card still renders because profile/certificate are placed
+		expect(html).toMatch(/Jane's Profile/)
+		expect(html).toContain('>Certificate</a>')
+	})
+})
+
+describe('WS-B: a claim face paints all disclosures byte-verbatim', () => {
+	const CLAIM: CertBlockFace = {
+		rung: 'memo',
+		placedFields: [
+			'label',
+			'bylineCredentialed',
+			'reviewerPhoto',
+			'memo',
+			'compensationCue',
+			'scopeLine',
+			'profileLink',
+			'certificateLink',
+		],
+	}
+
+	for (const mode of ['banner', 'sidebar', 'custom'] as CertBlockLayout[]) {
+		it(`${mode}: the compensation cue + FTC scope line + dated credential verification all render`, () => {
+			const html = renderCertBlock({ mode, facts: FACTS, face: CLAIM })
+			expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+			expect(html).toContain(CERT_SCOPE_LINE) // byte-exact incl. the U+2019 apostrophe
+			expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+			expect(html).toContain('on Apr 14, 2026')
+			// the credentialed byline + its dated verification stay GROUPED, in order
+			const iName = html.indexOf('Jane Doe, MD')
+			const iAttr = html.indexOf(CREDENTIAL_VERIFIED_ATTRIBUTION)
+			const iDate = html.indexOf('on Apr 14, 2026')
+			expect(iName).toBeGreaterThanOrEqual(0)
+			expect(iAttr).toBeGreaterThan(iName)
+			expect(iDate).toBeGreaterThan(iAttr)
+		})
+	}
+})
+
+describe('WS-B: the credentialed byline group is all-or-nothing on `bylineCredentialed`', () => {
+	it('sidebar: a PLAIN byline shows the name only — no credential suffix, no attribution/date', () => {
+		const face: CertBlockFace = { rung: 'named', placedFields: ['label', 'bylinePlain', 'reviewerPhoto'] }
+		const html = renderCertBlock({ mode: 'sidebar', facts: FACTS, face })
+		expect(html).toContain('Jane Doe')
+		expect(html).not.toContain('Jane Doe, MD')
+		expect(html).not.toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		expect(html).not.toContain('on Apr 14, 2026')
+	})
+
+	it('sidebar: a CREDENTIALED byline fuses the credential + the grouped attribution/date', () => {
+		const face: CertBlockFace = { rung: 'credentialed', placedFields: ['label', 'bylineCredentialed'] }
+		const html = renderCertBlock({ mode: 'sidebar', facts: FACTS, face })
+		expect(html).toContain('Jane Doe, MD')
+		expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		expect(html).toContain('on Apr 14, 2026')
+	})
+})
+
+describe('WS-B: per-field subtraction drops exactly that markup', () => {
+	it('banner: omitting reviewerPhoto removes the reviewer avatar', () => {
+		expect(renderCertBlock({ mode: 'banner', facts: FACTS, face: FULL_FACE })).toContain('flex-shrink:0;">JD<')
+		expect(renderCertBlock({ mode: 'banner', facts: FACTS, face: faceExcept('reviewerPhoto') })).not.toContain(
+			'flex-shrink:0;">JD<',
+		)
+	})
+
+	it('banner: omitting authorName removes the "Written by" column (and collapses the grid to 1fr)', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: FACTS, face: faceExcept('authorName') })
+		expect(html).not.toContain('Written by')
+		expect(html).toContain('grid-template-columns:1fr;')
+	})
+
+	it('banner: omitting memo removes the memo body', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: FACTS, face: faceExcept('memo') })
+		expect(html).not.toContain('Expert memo')
+		expect(html).not.toContain(FACTS.memo)
+		// but the trust footer + links survive (profile/certificate still placed)
+		expect(html).toContain('Verified by')
+	})
+
+	it('banner: omitting bio removes the hidden bio accordion', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: FACTS, face: faceExcept('bio') })
+		expect(html).not.toContain(FACTS.bio)
+		expect(html).not.toContain('certrev-cert__bio')
+	})
+
+	it('sidebar: omitting BOTH links removes the entire footer grid', () => {
+		const html = renderCertBlock({
+			mode: 'sidebar',
+			facts: FACTS,
+			face: faceExcept('profileLink', 'certificateLink'),
+		})
+		expect(html).not.toContain('View Profile')
+		expect(html).not.toContain('>Certificate</a>')
+		expect(html).not.toContain('border-top:1px solid var(--navy-10);')
+	})
+
+	it('sidebar: a lone profile link drops its border-right and collapses the grid to 1fr', () => {
+		const html = renderCertBlock({ mode: 'sidebar', facts: FACTS, face: faceExcept('certificateLink') })
+		expect(html).toContain('View Profile')
+		expect(html).not.toContain('>Certificate</a>')
+		expect(html).toContain('grid-template-columns:1fr;border-top')
+		expect(html).not.toContain('border-right:1px solid var(--navy-10);')
+	})
+})
+
+describe('WS-B: custom face — a compliant vertical stack in canonical order', () => {
+	it('renders placed fields top-to-bottom: label → reviewer → memo → disclosures → actions', () => {
+		const html = renderCertBlock({ mode: 'custom', facts: FACTS, face: FULL_FACE })
+		const order = [
+			html.indexOf('Expert reviewed'), // 1. label
+			html.indexOf('Written by'), // 2. author
+			html.indexOf('Jane Doe, MD'), // 3. reviewer byline
+			html.indexOf(FACTS.bio), // 4. bio
+			html.indexOf(FACTS.memo), // 5. memo
+			html.indexOf(CERT_SCOPE_LINE), // 6. disclosures
+			html.indexOf("Jane's Profile"), // 7. actions
+		]
+		for (const i of order) expect(i).toBeGreaterThanOrEqual(0)
+		const sorted = [...order].sort((a, b) => a - b)
+		expect(order).toEqual(sorted)
+		// the modal + strings + rung markers ride the same building blocks as the locked layouts
+		expect(html).toContain('data-certrev-modal-open')
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+		expect(html).toContain('data-certrev-rung="credentialed"')
+		// it is a single flex-column stack
+		expect(html).toContain('flex-direction:column;gap:14px;')
+	})
+})
+
+describe('WS-B: `rung` is a stamp, never a branch — it never changes visibility', () => {
+	for (const mode of ['banner', 'sidebar', 'floating', 'custom'] as CertBlockLayout[]) {
+		it(`${mode}: two faces with the same placedFields but different rung render identical HTML (modulo the rung attr)`, () => {
+			const placedFields = [...ALL_FIELDS]
+			const a = renderCertBlock({ mode, facts: FACTS, face: { rung: 'minimal', placedFields } })
+			const b = renderCertBlock({ mode, facts: FACTS, face: { rung: 'credentialed', placedFields } })
+			expect(a).not.toBe(b) // the rung attr differs
+			expect(stripRung(a)).toBe(stripRung(b)) // …but nothing else does
+		})
+	}
+})

package/src/builder/__tests__/builder.test.tsx

@@ -66,3 +66,74 @@ describe('Builder adapter — CertRevAnchor render', () => {
 		expect(html).not.toContain('data-certrev-editor-placeholder')
 	})
 })
+
+// ── POR-10721 W1/W3: the PUSH kit (CertReviewCard) + contract lock ──
+import {
+	BUILDER_CERT_CHROME_KEYS,
+	BUILDER_REGISTRATION,
+	type BuilderCertChromeData,
+	CERT_COMPONENT_NAME,
+	CertReviewCard,
+	WIRE_INPUTS,
+} from '../index.js'
+
+describe('POR-10721 W3 — Builder kit contract lock (inputs ⇄ wire-type parity)', () => {
+	it('WIRE_INPUTS names are EXACTLY the wire-type keys, in order (no silent drift)', () => {
+		expect(WIRE_INPUTS.map((i) => i.name)).toEqual([...BUILDER_CERT_CHROME_KEYS])
+	})
+	it('BUILDER_REGISTRATION carries every wire input + the placement inputs, named canonically', () => {
+		expect(BUILDER_REGISTRATION.name).toBe(CERT_COMPONENT_NAME)
+		const inputNames = new Set(BUILDER_REGISTRATION.inputs.map((i) => i.name))
+		for (const k of BUILDER_CERT_CHROME_KEYS) expect(inputNames.has(k)).toBe(true)
+		expect(inputNames.has('mode')).toBe(true) // a placement input, NOT a wire-type key
+	})
+})
+
+describe('POR-10721 W1 — CertReviewCard render + the fused-credential R1 gate', () => {
+	const base: Partial<BuilderCertChromeData> = {
+		reviewerName: 'Dr. Jane Doe',
+		verifyUrl: 'https://certrev.com/verify/abc',
+		bylinePlain: 'Reviewed on 2026-03-08 by Dr. Jane Doe.',
+		certifiedAt: '2026-03-08',
+		scopeLine: 'Independent editorial review.',
+		display: { showExpertPhoto: true, showCredentials: true },
+		renderDef: null,
+		stringsVersion: '2026-07',
+	}
+	it('renders a certified face (the reviewer name)', () => {
+		expect(renderToStaticMarkup(<CertReviewCard {...base} />)).toContain('Dr. Jane Doe')
+	})
+	it('name-only when credentialVerification is null — a credential never leaks without its date', () => {
+		expect(renderToStaticMarkup(<CertReviewCard {...base} credentialVerification={null} />)).not.toContain(
+			'FAAAAI',
+		)
+	})
+	it('renders the credential ONLY as the fused (credential + verifiedAt) pair', () => {
+		const html = renderToStaticMarkup(
+			<CertReviewCard {...base} credentialVerification={{ credential: 'FAAAAI', verifiedAt: '2026-03-01' }} />,
+		)
+		expect(html).toContain('FAAAAI')
+	})
+	it('showCredentials:false collapses to name-only even with the pair present', () => {
+		const html = renderToStaticMarkup(
+			<CertReviewCard
+				{...base}
+				display={{ showExpertPhoto: true, showCredentials: false }}
+				credentialVerification={{ credential: 'FAAAAI', verifiedAt: '2026-03-01' }}
+			/>,
+		)
+		expect(html).not.toContain('FAAAAI')
+	})
+	it('returns nothing pre-cert (no reviewerName / verifyUrl)', () => {
+		expect(renderToStaticMarkup(<CertReviewCard />)).toBe('')
+	})
+	it('passes `part` through to renderCertBlock (POR-10741 — header excludes the memo, memo excludes the header)', () => {
+		const withMemo = { ...base, memo: 'Checked the claims against current guidance; accurate.' }
+		const header = renderToStaticMarkup(<CertReviewCard {...withMemo} part="header" />)
+		const memo = renderToStaticMarkup(<CertReviewCard {...withMemo} part="memo" />)
+		expect(header).toContain('Expert reviewed')
+		expect(header).not.toContain('Checked the claims against current guidance; accurate.')
+		expect(memo).toContain('Checked the claims against current guidance; accurate.')
+		expect(memo).not.toContain('Expert reviewed')
+	})
+})