@certrev/cert-block 1.0.3 → 1.1.1

package/src/builder/envelope-face.ts

@@ -0,0 +1,173 @@
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * `envelopeCardInput` — the Builder card's face, from VERIFIED facts + the brand's def (1.1.0)
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * The one mapping from a verified payload's `content` and the Delivery API's `renderDef` sibling
+ * to the `renderCertBlock` input the registered `CertReviewCard` paints. It is its own module,
+ * react-free, and exported on the `./builder/face` subpath so the portal's server bundle (which
+ * cannot load `./builder`: that entry creates a React context at import) renders its preview
+ * through THIS function instead of a copy of it. A preview and the live card that share the
+ * mapping cannot disagree about it.
+ *
+ * The facts are read exactly as the Shopify app embed reads the same envelope:
+ *  - the credential is each verified credential's `cardLabel` (else `abbreviation`), joined, and
+ *    only with the dated verification beside it; no date, no credential (the name-only face);
+ *  - the compensation cue's PRESENCE is the only thing read; the words are the locked constant,
+ *    and an absent or null cue is the pro-bono face with no cue;
+ *  - the def's `hidden` set removes only what is hideable (`HIDEABLE_FIELDS`); a def cannot hide
+ *    the scope line, the credential verification or the certificate link.
+ *
+ * The face is the PHONE-aware one (`responsive`): on a narrow viewport the banner header stacks and
+ * a long memo collapses behind a toggle the card binds (`memo-toggle.ts`); a wider viewport paints
+ * exactly what it would without it.
+ *
+ * The caller has already run the kernel. This function never decides WHETHER to render a cert;
+ * it only returns null when the verified content cannot make a face (no reviewer, no verify URL).
+ */
+
+import type {
+	CertBlockFace,
+	CertBlockLayout,
+	CertBlockMode,
+	RenderCertBlockInput,
+} from '../components/render-cert-block.js'
+import { accentFg, HIDEABLE_FIELDS, isOpaqueHexColor, type ResolvedBlockTheme } from '../components/render-def.js'
+import type { CertContent } from '../contract/kernel.js'
+import type { CertChromeRenderDef } from './cert-chrome-data.js'
+
+/**
+ * Every field id `renderCertBlock` places, in its canonical order. A def-driven face places all of
+ * them except what the def hides; `renderCertBlock` still gates each on its fact being present.
+ */
+export const CERT_FACE_FIELDS = [
+	'label',
+	'authorName',
+	'authorTitle',
+	'reviewerPhoto',
+	'bylineCredentialed',
+	'bylinePlain',
+	'bio',
+	'memo',
+	'profileLink',
+	'certificateLink',
+	'scopeLine',
+	'compensationCue',
+] as const
+
+const MODES: readonly CertBlockMode[] = ['banner', 'sidebar', 'floating']
+
+function isMode(v: unknown): v is CertBlockMode {
+	return typeof v === 'string' && (MODES as readonly string[]).includes(v)
+}
+
+function text(v: unknown): string {
+	return typeof v === 'string' ? v : ''
+}
+
+function optionalText(v: unknown): string | undefined {
+	return text(v).trim() !== '' ? (v as string) : undefined
+}
+
+export interface EnvelopeCardOptions {
+	/** The placement the entry/editor chose. A recognised mode wins over the def's layout. */
+	readonly mode?: unknown
+	/** Banner memo placement, passed through as on the options path. */
+	readonly part?: unknown
+}
+
+/** The def's theme tokens as `renderCertBlock` theme input, with the accent ink derived. */
+export function themeFromDef(def: CertChromeRenderDef | null): Partial<ResolvedBlockTheme> | undefined {
+	const tokens = def?.tokens
+	if (!tokens) return undefined
+	const accentColor = optionalText(tokens.accentColor)
+	return {
+		accentColor,
+		surface: optionalText(tokens.surface),
+		cornerRadius: optionalText(tokens.cornerRadius),
+		fontSlot: optionalText(tokens.fontSlot) as ResolvedBlockTheme['fontSlot'] | undefined,
+		// The ink painted over the accent fill, derived the way the portal derives it, so a black
+		// accent carries white ink. Omitted for an accent `resolveBlockTheme` would reject anyway.
+		...(accentColor && isOpaqueHexColor(accentColor) ? { accentFg: accentFg(accentColor) } : {}),
+		barInk: optionalText(tokens.barInk),
+		inkColor: optionalText(tokens.inkColor),
+	}
+}
+
+/** The face a def asks for: its custom composition, or every field minus the hideable ones it hides. */
+export function faceFromDef(def: CertChromeRenderDef | null, layout: CertBlockLayout): CertBlockFace | undefined {
+	if (!def) return undefined
+	if (layout === 'custom') return { rung: def.rung, placedFields: [...(def.customFace?.placedFields ?? [])] }
+	const hidden = new Set(def.hidden.filter((id) => (HIDEABLE_FIELDS as readonly string[]).includes(id)))
+	return { rung: def.rung, placedFields: CERT_FACE_FIELDS.filter((id) => !hidden.has(id)) }
+}
+
+/**
+ * The layout: an editor-chosen mode, else the def's own layout (a custom face only when the def
+ * carries one), else banner, which is what the Shopify embed paints for a def with no layout and
+ * what every exported Builder entry has painted since 0.5.
+ */
+export function layoutFor(def: CertChromeRenderDef | null, mode: unknown): CertBlockLayout {
+	if (isMode(mode)) return mode
+	if (def?.layout === 'custom' && def.customFace) return 'custom'
+	if (isMode(def?.layout)) return def.layout
+	return 'banner'
+}
+
+/** The fused credential label the envelope's verified credentials stand for, or '' (name-only). */
+export function credentialLabel(expert: Record<string, unknown>): { credential: string; verifiedAt: string } | null {
+	const verifiedAt = optionalText(expert.credentialVerifiedAt)
+	if (!verifiedAt) return null
+	const creds = Array.isArray(expert.credentials) ? expert.credentials : []
+	const credential = creds
+		.map((c) => {
+			const rec = (typeof c === 'object' && c !== null ? c : {}) as Record<string, unknown>
+			return optionalText(rec.cardLabel) ?? optionalText(rec.abbreviation)
+		})
+		.filter((l): l is string => l !== undefined)
+		.join(', ')
+	return credential ? { credential, verifiedAt } : null
+}
+
+/**
+ * The exact `renderCertBlock` input for a verified envelope's content and the brand's def, or
+ * null when the content cannot make a face.
+ */
+export function envelopeCardInput(
+	content: CertContent,
+	renderDef: CertChromeRenderDef | null,
+	options: EnvelopeCardOptions = {},
+): RenderCertBlockInput | null {
+	const expert = (content?.expert ?? {}) as unknown as Record<string, unknown>
+	const author = (content?.author ?? {}) as unknown as Record<string, unknown>
+	const reviewerName = text(expert.displayName)
+	const verifyUrl = text(content?.verifyUrl)
+	if (!reviewerName || !verifyUrl) return null
+	const cred = credentialLabel(expert)
+	const layout = layoutFor(renderDef, options.mode)
+	const face = faceFromDef(renderDef, layout)
+	const theme = themeFromDef(renderDef)
+	const part =
+		options.part === 'full' || options.part === 'header' || options.part === 'memo' ? options.part : undefined
+	return {
+		mode: layout,
+		...(theme ? { theme } : {}),
+		...(face ? { face } : {}),
+		...(part ? { part } : {}),
+		responsive: true,
+		facts: {
+			authorName: optionalText(author.name) ?? 'Editorial',
+			authorTitle: optionalText(author.title),
+			reviewerName,
+			credential: cred?.credential ?? '',
+			credentialVerifiedAt: cred?.verifiedAt ?? '',
+			certifiedAt: text(content.certifiedAt),
+			memo: text(content.memo),
+			bio: optionalText(expert.bio),
+			profileUrl: text(expert.profileUrl),
+			certificateUrl: verifyUrl,
+			// Presence only: a cue string renders the locked constant; absent or null is pro-bono.
+			compensationCue: optionalText(expert.compensationCue) ? undefined : null,
+		},
+	}
+}

package/src/builder/index.tsx

@@ -12,7 +12,7 @@
  * another article, and there is no `placementId` input to forge or mis-select.
  *
  * THE PUSH KIT DOES NOT INHERIT THAT PROPERTY, and this module exports it too. `CertReviewCard` /
- * `certRevCertComponent` register the 19 wire-type fields — `reviewerName`,
+ * `certRevCertComponent` register the 20 wire-type fields — `reviewerName`,
  * `credentialVerification`, `verifyUrl`, `memo` — as Builder INPUTS, and the card renders what
  * those inputs hold; it runs no signature check and consults no verdict. `advanced: true` folds
  * them out of the editor's default view, which is a UI reveal and not a lock, and `safeHttpUrl`
@@ -22,6 +22,17 @@
  * narrows it. See "PUSH trust model" in the package README for the full statement — including
  * what a revocation upstream does and does not reach.
  *
+ * 1.1.0 NARROWS THAT FOR A BLOCK CARRYING THE `delivery` MARKER (`{ v: 1, baseUrl }`, which the
+ * CertREV exporter writes). Such a block ignores every other option: it reads the signed envelope
+ * for the entry it renders inside (`builderContext.content.id`) from the CertREV Delivery API on
+ * `baseUrl` (an https certrev.com origin, nothing else), verifies it against the baked
+ * `cert-issuer-1` key, re-judges revocation and expiry at every render, and paints the brand's
+ * render def served beside it. A revoked, expired, unverifiable or unreachable cert, a marker that
+ * is not exactly that shape, or a missing entry id renders nothing. A block WITHOUT the marker
+ * (every entry exported before 1.1.0) renders from its options exactly as 1.0.3 did, so the
+ * paragraph above still describes it: an editor who deletes the marker gets the options face back,
+ * which is the 1.0.3 trust boundary, not a new one.
+ *
  * Three things the card DOES enforce, and they are the limit of it: no chrome at all without a
  * `reviewerName` and a `verifyUrl`; a credential renders only welded to its dated verification
  * (the fused pair); and the FTC disclosures render from locked constants, so rewriting the
@@ -144,8 +155,10 @@ export {
 	type BuilderCertChromeData,
 	type BuilderCertChromeKey,
 	type CertChromeRenderDef,
+	type CertDeliveryMarker,
 } from './cert-chrome-data.js'
 export {
+	acceptedDeliveryMarker,
 	BUILDER_REGISTRATION,
 	type BuilderInput,
 	CERT_COMPONENT_NAME,
@@ -157,3 +170,12 @@ export {
 	PLACEMENT_INPUTS,
 	WIRE_INPUTS,
 } from './cert-review-card.js'
+export {
+	CERT_FACE_FIELDS,
+	credentialLabel,
+	type EnvelopeCardOptions,
+	envelopeCardInput,
+	faceFromDef,
+	layoutFor,
+	themeFromDef,
+} from './envelope-face.js'

package/src/builder/issuer-key.ts

@@ -0,0 +1,13 @@
+/**
+ * The CertREV issuer PUBLIC key the envelope-backed Builder card verifies against (1.1.0).
+ *
+ * A copy of `CERT_ISSUER_KID` / `CERT_ISSUER_PUBLIC_KEY_PEM` in `modal/certrev-cert.entry.ts`, not
+ * an import of it: that entry registers a custom element and starts the storefront DOM passes at
+ * import, which a React server render must not do, and moving the constant out of it would change
+ * the storefront bundle the Shopify extension ships byte-for-byte. The two copies are pinned equal by
+ * `builder/__tests__/issuer-key.test.ts`, so a rotation that updates one and not the other fails.
+ */
+export const CERT_ISSUER_KID = 'cert-issuer-1'
+export const CERT_ISSUER_PUBLIC_KEY_PEM = `-----BEGIN PUBLIC KEY-----
+MCowBQYDK2VwAyEAMWN956IOPjpAq900dL428VzA28TO/pVXnq3brwqUmwM=
+-----END PUBLIC KEY-----`

package/src/components/memo-toggle.ts

@@ -0,0 +1,63 @@
+/**
+ * The PHONE face's collapsible memo (1.1.0): the markup contract `renderCertBlock` emits when its
+ * input asks for the responsive face, and the one toggle every host wires to it.
+ *
+ * On a viewport `NARROW_VIEWPORT` or narrower a long memo is clamped to `MEMO_COLLAPSED_LINES`
+ * lines behind a native `<button>` that expands it; wider viewports show the whole memo and no
+ * button. The state lives on the memo box (`data-certrev-memo="collapsed" | "open"`), never on a
+ * class, so a host stylesheet's `.open` rules cannot reach it; the button mirrors it on
+ * `aria-expanded` and in its label.
+ *
+ * Pure DOM, no React: the Builder card binds it on its wrapper, and any other host that paints the
+ * responsive face (a portal preview, a web component) calls the same function.
+ */
+
+/** The memo box: the memo text and its toggle. The value is the state. */
+export const MEMO_ATTR = 'data-certrev-memo'
+/** The clamped text inside the box. */
+export const MEMO_TEXT_ATTR = 'data-certrev-memo-text'
+/** The expand/collapse button inside the box. */
+export const MEMO_TOGGLE_ATTR = 'data-certrev-memo-toggle'
+
+export const MEMO_EXPAND_LABEL = 'Read the full memo'
+export const MEMO_COLLAPSE_LABEL = 'Show less'
+
+/** The viewport at or under which the phone face applies. */
+export const NARROW_VIEWPORT = '(max-width: 640px)'
+/** Lines a collapsed memo keeps. */
+export const MEMO_COLLAPSED_LINES = 4
+
+/**
+ * A memo shorter than this, with fewer line breaks than `MEMO_COLLAPSE_MIN_BREAKS`, fits its
+ * collapsed lines on a phone (about 33 characters a line at 393px), so it gets no toggle: a button
+ * that reveals nothing is noise.
+ */
+export const MEMO_COLLAPSE_MIN_CHARS = 160
+export const MEMO_COLLAPSE_MIN_BREAKS = MEMO_COLLAPSED_LINES
+
+/** Is this memo long enough to collapse on a phone? (No memo never does.) */
+export function memoCollapses(memo: string | null | undefined): boolean {
+	if (!memo) return false
+	return memo.length > MEMO_COLLAPSE_MIN_CHARS || memo.split('\n').length - 1 >= MEMO_COLLAPSE_MIN_BREAKS
+}
+
+/** The toggle a click landed on (the button or anything inside it), or null. */
+export function memoToggleFor(target: EventTarget | null): Element | null {
+	const el = target as Element | null
+	if (!el || typeof el.closest !== 'function') return null
+	return el.closest(`[${MEMO_TOGGLE_ATTR}]`)
+}
+
+/**
+ * Flip the memo box a toggle belongs to, mirroring the state on the button. Returns the new state
+ * (true = expanded), or null when the button is not inside a memo box.
+ */
+export function toggleMemo(button: Element): boolean | null {
+	const box = button.closest(`[${MEMO_ATTR}]`)
+	if (!box) return null
+	const open = box.getAttribute(MEMO_ATTR) !== 'open'
+	box.setAttribute(MEMO_ATTR, open ? 'open' : 'collapsed')
+	button.setAttribute('aria-expanded', open ? 'true' : 'false')
+	button.textContent = open ? MEMO_COLLAPSE_LABEL : MEMO_EXPAND_LABEL
+	return open
+}

package/src/components/render-cert-block.ts

@@ -66,6 +66,15 @@
 
 import { escapeAttribute, escapeHtml, safeHttpUrl } from './escape.js'
 import { dedupeCredential, formatDate } from './format.js'
+import {
+	MEMO_ATTR,
+	MEMO_COLLAPSED_LINES,
+	MEMO_EXPAND_LABEL,
+	MEMO_TEXT_ATTR,
+	MEMO_TOGGLE_ATTR,
+	memoCollapses,
+	NARROW_VIEWPORT,
+} from './memo-toggle.js'
 import { CERTREV_LINK_REL } from './rel.js'
 import {
 	CERT_SCOPE_LINE,
@@ -165,6 +174,15 @@ export interface RenderCertBlockInput {
 	 * Ignored outside banner mode.
 	 */
 	readonly part?: 'full' | 'header' | 'memo'
+	/**
+	 * 1.1.0: the PHONE face. ABSENT ⇒ byte-identical to 1.0.3. `true` ⇒ at `NARROW_VIEWPORT` or
+	 * narrower the banner header stacks its author and reviewer columns, and a long memo
+	 * (`memoCollapses`) is clamped to `MEMO_COLLAPSED_LINES` lines behind a native toggle
+	 * (`memo-toggle.ts`) on every face that paints one. Wider viewports paint the same card as
+	 * without it. The Builder card's envelope face sets it; the options path and every other
+	 * surface leave it off.
+	 */
+	readonly responsive?: boolean
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -267,6 +285,77 @@ function showsCompensationCue(facts: CertBlockFacts, placed: PlacedTest): boolea
 const STAMP_LINK_STYLE =
 	'font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);text-decoration:none;cursor:pointer;'
 
+// ─────────────────────────────────────────────────────────────────────────────
+// The PHONE face (1.1.0, `responsive`): one scoped stylesheet per root, and the
+// collapsible memo markup `memo-toggle.ts` flips
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * The phone rules, scoped to a responsive root so a host page's other markup is never touched.
+ * Every rule lives inside the media query: a desktop viewport, or a host that strips the
+ * `<style>`, paints exactly the 1.0.3 card (the toggle stays hidden by its inline `display:none`,
+ * which only the `!important` rule here overrides).
+ */
+const RESPONSIVE_STYLE =
+	`<style>@media ${NARROW_VIEWPORT}{` +
+	`.certrev-cert[data-certrev-responsive] [data-certrev-stack]{grid-template-columns:1fr!important}` +
+	`.certrev-cert[data-certrev-responsive] [${MEMO_ATTR}="collapsed"] [${MEMO_TEXT_ATTR}]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${MEMO_COLLAPSED_LINES};line-clamp:${MEMO_COLLAPSED_LINES};overflow:hidden}` +
+	`.certrev-cert[data-certrev-responsive] [${MEMO_TOGGLE_ATTR}]{display:inline-flex!important}` +
+	`}</style>`
+
+/**
+ * The memo toggle: a native button (keyboard and screen reader for free), a 44px touch target,
+ * styled as the memo footer's stamp links. Hidden INLINE rather than with `hidden`, so a host
+ * stylesheet's `[hidden]{display:none!important}` cannot pin it shut on a phone.
+ */
+const MEMO_TOGGLE_STYLE =
+	'display:none;align-items:center;min-height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);text-decoration:underline;text-underline-offset:3px;'
+
+/** A stable short id for the memo text (the toggle's `aria-controls`); FNV-1a, base 36. */
+function memoId(seed: string): string {
+	let h = 0x811c9dc5
+	for (let i = 0; i < seed.length; i++) {
+		h ^= seed.charCodeAt(i)
+		h = Math.imul(h, 0x01000193)
+	}
+	return `certrev-memo-${(h >>> 0).toString(36)}`
+}
+
+/** The attributes and toggle a collapsible memo adds; all empty when it does not collapse. */
+interface MemoCollapse {
+	/** On the box that holds the memo text and its toggle: the state. */
+	readonly box: string
+	/** On the memo text element: its id and the clamp hook. */
+	readonly text: string
+	readonly toggle: string
+}
+
+const NO_MEMO_COLLAPSE: MemoCollapse = { box: '', text: '', toggle: '' }
+
+/**
+ * Collapsed by default: the phone rule clamps the text, and the desktop never reads the state.
+ * The clamp is visual only, so a screen reader reads the whole memo in either state and hears
+ * the toggle as "Read the full memo, button, collapsed".
+ */
+function memoCollapse(facts: CertBlockFacts, responsive: boolean, mode: CertBlockLayout): MemoCollapse {
+	if (!responsive || !memoCollapses(facts.memo)) return NO_MEMO_COLLAPSE
+	const id = memoId(`${mode}\n${facts.certificateUrl}\n${facts.memo}`)
+	return {
+		box: ` ${MEMO_ATTR}="collapsed"`,
+		text: ` id="${id}" ${MEMO_TEXT_ATTR}`,
+		toggle:
+			`<button type="button" ${MEMO_TOGGLE_ATTR} aria-expanded="false" aria-controls="${id}" ` +
+			`style="${MEMO_TOGGLE_STYLE}">${MEMO_EXPAND_LABEL}</button>`,
+	}
+}
+
+/** The sidebar/custom memo quote, collapsible on a phone. */
+function memoQuote(facts: CertBlockFacts, responsive: boolean, mode: CertBlockLayout): string {
+	const collapse = memoCollapse(facts, responsive, mode)
+	const quote = `<blockquote${collapse.text} style="margin:16px 0 0;padding-left:16px;border-left:3px solid var(--ba,#0a1b3f);font-size:15px;line-height:1.5;color:var(--cr-ink-soft);white-space:pre-line;">${escapeHtml(facts.memo)}</blockquote>`
+	return collapse.toggle ? `<div${collapse.box}>${quote}${collapse.toggle}</div>` : quote
+}
+
 /** A round avatar tile with the given initials. */
 function avatar(text: string, size: number, fontSize: number): string {
 	return (
@@ -394,13 +483,22 @@ function rootStyle(theme: ResolvedBlockTheme): string {
 	].join(';')
 }
 
-function root(mode: CertBlockLayout, theme: ResolvedBlockTheme, inner: string, face?: CertBlockFace): string {
+function root(
+	mode: CertBlockLayout,
+	theme: ResolvedBlockTheme,
+	inner: string,
+	face?: CertBlockFace,
+	responsive = false,
+): string {
 	// The rung is an OBSERVABILITY stamp for the crawl monitor — only emitted when a
 	// face is present, so the grandfathered (face-absent) output stays byte-identical.
 	const rungAttr = face ? ` data-certrev-rung="${escapeAttribute(face.rung)}"` : ''
+	// The phone face (1.1.0): the scope its rules key on, and the rules, only when asked for.
+	const responsiveAttr = responsive ? ' data-certrev-responsive' : ''
+	const style = responsive ? RESPONSIVE_STYLE : ''
 	return (
 		`<div class="certrev-cert certrev-cert--${mode}" data-certrev-mode="${mode}" ` +
-		`data-certrev-strings-version="${CERT_STRINGS_VERSION}"${rungAttr} style="${rootStyle(theme)}">${inner}</div>`
+		`data-certrev-strings-version="${CERT_STRINGS_VERSION}"${rungAttr}${responsiveAttr} style="${rootStyle(theme)}">${style}${inner}</div>`
 	)
 }
 
@@ -408,7 +506,7 @@ function root(mode: CertBlockLayout, theme: ResolvedBlockTheme, inner: string, f
 // Face — BANNER: a certification header card + a separate expert-memo card
 // ─────────────────────────────────────────────────────────────────────────────
 
-function bannerHeaderCard(facts: CertBlockFacts, placed: PlacedTest): string {
+function bannerHeaderCard(facts: CertBlockFacts, placed: PlacedTest, responsive = false): string {
 	const certified = formatDate(facts.certifiedAt)
 	const subtitle =
 		placed('authorTitle') && facts.authorTitle
@@ -473,7 +571,8 @@ function bannerHeaderCard(facts: CertBlockFacts, placed: PlacedTest): string {
 		`<div style="border:1px solid var(--navy-10);border-radius:calc(var(--br,14px) * 0.7);overflow:hidden;font-family:var(--cr-bf);">` +
 		header +
 		`<div style="padding:22px 24px 18px;">` +
-		`<div style="display:grid;grid-template-columns:${gridCols};gap:22px;">` +
+		// On a phone (responsive) the two columns stack: the stylesheet keys on `data-certrev-stack`.
+		`<div${responsive ? ' data-certrev-stack' : ''} style="display:grid;grid-template-columns:${gridCols};gap:22px;">` +
 		authorColumn +
 		`<div>` +
 		`<div style="font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:11px;">Reviewed by</div>` +
@@ -487,7 +586,7 @@ function bannerHeaderCard(facts: CertBlockFacts, placed: PlacedTest): string {
 	)
 }
 
-function bannerMemoCard(facts: CertBlockFacts, placed: PlacedTest): string {
+function bannerMemoCard(facts: CertBlockFacts, placed: PlacedTest, responsive = false): string {
 	// The memo card composes `<name><, credential>` as two spans rather than through
 	// `nameWithCredential`, so it needs the SAME duplicate guard — the doubled "MD, MD" was
 	// visible on this card too. Gated on what SURVIVES the dedupe, not on the raw field: a
@@ -500,15 +599,18 @@ function bannerMemoCard(facts: CertBlockFacts, placed: PlacedTest): string {
 	// placement (the pattern `bio` already follows): placement alone painted an "Expert
 	// memo" heading over an empty `<p>` for a contract-legal empty memo.
 	const memoAvatar = placed('reviewerPhoto') ? avatar(initials(facts.reviewerName), 46, 13) : ''
+	// On a phone a long memo collapses; the name row stays visible above it (the box is the column).
+	const collapse = memoCollapse(facts, responsive, 'banner')
 	const memoSection =
 		placed('memo') && facts.memo
 			? `<div style="font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-55);margin-bottom:14px;">Expert memo</div>` +
 				`<div style="display:flex;gap:15px;">${memoAvatar}` +
-				`<div style="flex:1;min-width:0;">` +
+				`<div${collapse.box} style="flex:1;min-width:0;">` +
 				`<div style="font-size:16px;line-height:1.2;color:var(--cr-ink);"><span style="font-weight:700;">${escapeHtml(facts.reviewerName)}</span>${credTail}</div>` +
 				// Readable, UPRIGHT DM Sans quote (the display-serif italic hurt legibility);
 				// pre-line preserves the reviewer's paragraph breaks. No left accent bar (matches the guide).
-				`<p style="margin:11px 0 14px;font-size:15.5px;line-height:1.6;color:var(--cr-ink-soft);white-space:pre-line;">${escapeHtml(facts.memo)}</p>` +
+				`<p${collapse.text} style="margin:11px 0 14px;font-size:15.5px;line-height:1.6;color:var(--cr-ink-soft);white-space:pre-line;">${escapeHtml(facts.memo)}</p>` +
+				collapse.toggle +
 				`</div>` +
 				`</div>`
 			: ''
@@ -547,7 +649,7 @@ function bannerMemoCard(facts: CertBlockFacts, placed: PlacedTest): string {
 // Face — SIDEBAR (the DEFAULT): a reviewer card pinned beside the article body
 // ─────────────────────────────────────────────────────────────────────────────
 
-function sidebarCard(facts: CertBlockFacts, placed: PlacedTest): string {
+function sidebarCard(facts: CertBlockFacts, placed: PlacedTest, responsive = false): string {
 	const header = placed('label')
 		? `<div style="display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;background:var(--certrev-bar-bg,#0a1b3f);color:var(--certrev-bar-fg,#fff);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;">${logo(18)} Expert reviewed</div>`
 		: ''
@@ -558,10 +660,7 @@ function sidebarCard(facts: CertBlockFacts, placed: PlacedTest): string {
 			: ''
 	// Gated on CONTENT as well as placement (like `bioPara` above) — placement alone rendered
 	// an empty accent-bordered blockquote for a contract-legal empty memo.
-	const blockquote =
-		placed('memo') && facts.memo
-			? `<blockquote style="margin:16px 0 0;padding-left:16px;border-left:3px solid var(--ba,#0a1b3f);font-size:15px;line-height:1.5;color:var(--cr-ink-soft);white-space:pre-line;">${escapeHtml(facts.memo)}</blockquote>`
-			: ''
+	const blockquote = placed('memo') && facts.memo ? memoQuote(facts, responsive, 'sidebar') : ''
 	// Disclosure row: cue + ` · ` + scope; the separator only when BOTH land, the row only when either does.
 	const cueEl = showsCompensationCue(facts, placed)
 		? `<span style="font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;">${escapeHtml(COMPENSATED_EXPERT_CUE)}</span>`
@@ -654,15 +753,12 @@ function floatingPill(facts: CertBlockFacts, placed: PlacedTest): string {
 // `data-certrev-*`-hooked building blocks the locked layouts use, so the custom face
 // carries the same markers as banner/sidebar and the crawl monitor reads them alike.
 //
-// NOT the ftc-guard, though — and the comment here claimed otherwise for as long as the
-// face has existed. `modal/ftc-guard.ts` looks for `data-ftc-line` / `data-ftc-disclosure`
-// hooks, which `CertBadge.tsx` and `render-badge-html.ts` emit and this renderer emits at
-// NONE of its three scope-line sites. The kill switch therefore cannot see anything
-// renderCertBlock produces, on ANY face. Whether it should is a live design question
-// (which surfaces the switch covers) — not something to settle by quietly adding hooks.
+// No runtime guard watches any of it: the `modal/ftc-guard.ts` kill switch (which never saw
+// this renderer's output anyway: it keyed on `.certrev-memo`) was removed in 1.1.1. Whether a
+// face shows its scope line is decided by its configuration, not policed in the page.
 // ─────────────────────────────────────────────────────────────────────────────
 
-function renderCustomFace(facts: CertBlockFacts, placed: PlacedTest): string {
+function renderCustomFace(facts: CertBlockFacts, placed: PlacedTest, responsive = false): string {
 	const parts: string[] = []
 
 	// 1. label — the navy "Expert reviewed" header bar (sidebar's header markup)
@@ -703,9 +799,7 @@ function renderCustomFace(facts: CertBlockFacts, placed: PlacedTest): string {
 
 	// 5. memo (sidebar's blockquote) — placement AND content, like `bio` directly above
 	if (placed('memo') && facts.memo) {
-		parts.push(
-			`<blockquote style="margin:16px 0 0;padding-left:16px;border-left:3px solid var(--ba,#0a1b3f);font-size:15px;line-height:1.5;color:var(--cr-ink-soft);white-space:pre-line;">${escapeHtml(facts.memo)}</blockquote>`,
-		)
+		parts.push(memoQuote(facts, responsive, 'custom'))
 	}
 
 	// 6. disclosures (sidebar's cue · scope row; separator only when BOTH land)
@@ -755,13 +849,14 @@ export function renderCertBlock(input: RenderCertBlockInput): string {
 	const theme = resolveBlockTheme(input.theme)
 	const { facts, face } = input
 	const placed = placedTester(face)
+	const responsive = input.responsive === true
 	switch (input.mode) {
 		case 'banner': {
 			// Suppress the memo card entirely when the engine placed none of its fields
 			// (avoids an empty bordered shell). Grandfather: all placed ⇒ card renders.
 			const memoCard =
 				placed('memo') || placed('profileLink') || placed('certificateLink') || placed('scopeLine')
-					? bannerMemoCard(facts, placed)
+					? bannerMemoCard(facts, placed, responsive)
 					: ''
 			// First-class memo split: default 'full' is byte-identical to the prior
 			// header+memo render; 'header'/'memo' emit only that card so the exporter can place
@@ -770,16 +865,17 @@ export function renderCertBlock(input: RenderCertBlockInput): string {
 			const part = input.part === 'header' || input.part === 'memo' ? input.part : 'full'
 			const inner =
 				part === 'header'
-					? bannerHeaderCard(facts, placed)
+					? bannerHeaderCard(facts, placed, responsive)
 					: part === 'memo'
 						? memoCard
-						: bannerHeaderCard(facts, placed) + memoCard
-			return root('banner', theme, inner, face)
+						: bannerHeaderCard(facts, placed, responsive) + memoCard
+			return root('banner', theme, inner, face, responsive)
 		}
 		case 'floating':
+			// The pill has no memo and no columns: nothing on it changes on a phone.
 			return root('floating', theme, floatingPill(facts, placed), face)
 		case 'custom':
-			return root('custom', theme, renderCustomFace(facts, placed), face)
+			return root('custom', theme, renderCustomFace(facts, placed, responsive), face, responsive)
 		// THE default placement, named here and nowhere else: the declared default and the
 		// runtime fallback are the same line, so they cannot drift apart. Naming `sidebar` as a
 		// real case also keeps the exhaustiveness read over CertBlockLayout honest — a reader
@@ -787,6 +883,6 @@ export function renderCertBlock(input: RenderCertBlockInput): string {
 		// biome-ignore lint/complexity/noUselessSwitchCase: the redundancy IS the mechanism (see above)
 		case 'sidebar':
 		default:
-			return root('sidebar', theme, sidebarCard(facts, placed), face)
+			return root('sidebar', theme, sidebarCard(facts, placed, responsive), face, responsive)
 	}
 }

package/src/index.ts

@@ -36,6 +36,21 @@ export {
 	type ResolvedDisplay,
 	resolveDisplay,
 } from './components/format.js'
+// ── The PHONE face's collapsible memo (1.1.0): the markup contract + the one toggle ──
+export {
+	MEMO_ATTR,
+	MEMO_COLLAPSE_LABEL,
+	MEMO_COLLAPSE_MIN_BREAKS,
+	MEMO_COLLAPSE_MIN_CHARS,
+	MEMO_COLLAPSED_LINES,
+	MEMO_EXPAND_LABEL,
+	MEMO_TEXT_ATTR,
+	MEMO_TOGGLE_ATTR,
+	memoCollapses,
+	memoToggleFor,
+	NARROW_VIEWPORT,
+	toggleMemo,
+} from './components/memo-toggle.js'
 // ── Pre-sales PREVIEW block — static, non-delivery, hard-bounded ──
 export {
 	type PreviewBlockOptions,
@@ -118,6 +133,19 @@ export {
 	serializeJsonLdForScript,
 } from './jsonld/project.js'
 export { TtlCache, type TtlCacheOptions } from './verify/cache.js'
+export {
+	type CachedDelivery,
+	deliveryCacheKey,
+	deliveryUrl,
+	type GetVerifiedDeliveryOptions,
+	getVerifiedDelivery,
+	invalidateDelivery,
+	parseRenderDef,
+	peekVerifiedDelivery,
+	settleDelivery,
+	sharedDeliveryCache,
+	type VerifiedDelivery,
+} from './verify/get-verified-delivery.js'
 // ── Verify layer ──────────────────────────────────────────────────────────────────
 export {
 	type EnvelopeSource,