@certrev/cert-block 1.1.1 → 1.2.0-canary.0

package/dist/reader/tokens.d.ts

@@ -0,0 +1,8 @@
+export interface ReaderTokens {
+    /** The value of the section's `style` attribute. */
+    readonly style: string;
+    /** The ink on the accent: `#ffffff` or `#141414`. The logo is white on the first and mono on the second. */
+    readonly fg: string;
+}
+export declare function readerTokens(def: unknown): ReaderTokens;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/reader/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/reader/tokens.ts"],"names":[],"mappings":"AAgDA,MAAM,WAAW,YAAY;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,OAAO,GAAG,YAAY,CAoBvD"}

package/dist/reader/tokens.js

@@ -0,0 +1,65 @@
+/**
+ * `certrev-reader-tokens`: the four CSS custom properties a reader section carries on its root, from the render def.
+ *
+ *   --cr-ba     the accent the card cap and pill paint: the def's `barInk`, else its `accentColor`, else navy
+ *   --cr-ba-fg  the ink on that accent: white, or `#141414` when the def baked it for the colour that painted
+ *   --cr-br     the corner radius
+ *   --cr-bf     the font stack for the brand's `fontSlot`
+ *
+ * The values land inside a double-quoted `style` attribute, so a colour or radius that could break out of it
+ * (`; ( ) { } < > "` or a space) is dropped to its default rather than escaped into something half valid. The variable
+ * names are the reader stylesheet's (`reader.css`), which `.certrev-reader` declares defaults for.
+ */
+import { asText } from '../components/escape.js';
+import { esc, rec, textOr } from './helpers.js';
+/** The accent when the def has none: CertREV navy. */
+const DEFAULT_ACCENT = '#0A1B3F';
+const DEFAULT_RADIUS = '14px';
+/** The foreground the def bakes for a light accent; anything else is the white default. */
+const DARK_INK = '#141414';
+/**
+ * The font stack per `fontSlot`, in one table so the Liquid `certrev-reader-tokens` snippet and this one are compared
+ * on a single list. An unknown or missing slot is the sans stack, as in the snippet. The serif and grotesk stacks name
+ * the reader's own `@font-face` aliases first ("CertREV Reader Serif" / "CertREV Reader Grotesk", declared in
+ * `reader.css`), then the legacy family and the generic fallbacks, as the snippet's `--cr-bf` does.
+ */
+function fontStack(slot) {
+    switch (slot) {
+        case 'serif':
+            return "'CertREV Reader Serif', 'Playfair Display', ui-serif, Georgia, serif";
+        case 'grotesk':
+            return "'CertREV Reader Grotesk', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif";
+        case 'mono':
+            return "'JetBrains Mono', ui-monospace, monospace";
+        case 'system':
+            return "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+        default:
+            return "'DM Sans', ui-sans-serif, system-ui, sans-serif";
+    }
+}
+/** A token value that cannot leave the style attribute, or '' (which the caller defaults). */
+function guarded(value) {
+    const text = textOr(value);
+    return /[;(){}<>" ]/.test(text) ? '' : text;
+}
+export function readerTokens(def) {
+    const rd = rec(def);
+    const tokens = rec(rd.tokens);
+    const barInk = guarded(tokens.barInk);
+    const accent = guarded(tokens.accentColor);
+    const ba = barInk || accent || DEFAULT_ACCENT;
+    // The ink follows the value that painted the accent: a def with a bar ink takes the foreground baked for it
+    // (barInkFg); one that paints its accent colour takes the one baked for that colour (accentFg).
+    let fg = '#ffffff';
+    if (barInk !== '') {
+        if (rd.barInkFg === DARK_INK)
+            fg = DARK_INK;
+    }
+    else if (accent !== '' && rd.accentFg === DARK_INK) {
+        fg = DARK_INK;
+    }
+    const br = guarded(tokens.cornerRadius) || DEFAULT_RADIUS;
+    const bf = fontStack(asText(tokens.fontSlot));
+    return { style: `--cr-ba:${esc(ba)};--cr-ba-fg:${fg};--cr-br:${esc(br)};--cr-bf:${bf}`, fg };
+}
+//# sourceMappingURL=tokens.js.map

package/dist/reader/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/reader/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAChD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAE/C,sDAAsD;AACtD,MAAM,cAAc,GAAG,SAAS,CAAA;AAChC,MAAM,cAAc,GAAG,MAAM,CAAA;AAC7B,2FAA2F;AAC3F,MAAM,QAAQ,GAAG,SAAS,CAAA;AAE1B;;;;;GAKG;AACH,SAAS,SAAS,CAAC,IAAY;IAC9B,QAAQ,IAAI,EAAE,CAAC;QACd,KAAK,OAAO;YACX,OAAO,sEAAsE,CAAA;QAC9E,KAAK,SAAS;YACb,OAAO,qFAAqF,CAAA;QAC7F,KAAK,MAAM;YACV,OAAO,2CAA2C,CAAA;QACnD,KAAK,QAAQ;YACZ,OAAO,8EAA8E,CAAA;QACtF;YACC,OAAO,iDAAiD,CAAA;IAC1D,CAAC;AACF,CAAC;AAED,8FAA8F;AAC9F,SAAS,OAAO,CAAC,KAAc;IAC9B,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC1B,OAAO,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;AAC5C,CAAC;AASD,MAAM,UAAU,YAAY,CAAC,GAAY;IACxC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA;IACnB,MAAM,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,MAAM,CAAC,CAAA;IAE7B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACrC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,EAAE,GAAG,MAAM,IAAI,MAAM,IAAI,cAAc,CAAA;IAE7C,4GAA4G;IAC5G,gGAAgG;IAChG,IAAI,EAAE,GAAG,SAAS,CAAA;IAClB,IAAI,MAAM,KAAK,EAAE,EAAE,CAAC;QACnB,IAAI,EAAE,CAAC,QAAQ,KAAK,QAAQ;YAAE,EAAE,GAAG,QAAQ,CAAA;IAC5C,CAAC;SAAM,IAAI,MAAM,KAAK,EAAE,IAAI,EAAE,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACtD,EAAE,GAAG,QAAQ,CAAA;IACd,CAAC;IAED,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,cAAc,CAAA;IACzD,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC7C,OAAO,EAAE,KAAK,EAAE,WAAW,GAAG,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,GAAG,CAAC,EAAE,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;AAC7F,CAAC"}

package/dist/verify/get-verified-delivery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-verified-delivery.d.ts","sourceRoot":"","sources":["../../src/verify/get-verified-delivery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,KAAK,EAEX,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,qGAAqG;AACrG,MAAM,MAAM,cAAc,GACvB;IAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,SAAS,EAAE,mBAAmB,GAAG,IAAI,CAAA;CAAE,GAC5G;IAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAA;CAAE,CAAA;AAEvE,mGAAmG;AACnG,MAAM,WAAW,gBAAgB;IAChC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAA;IAC7B,iGAAiG;IACjG,QAAQ,CAAC,SAAS,EAAE,mBAAmB,GAAG,IAAI,CAAA;CAC9C;AAED,MAAM,WAAW,0BAA0B;IAC1C,mGAAmG;IACnG,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAA;IAC1C,8FAA8F;IAC9F,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,CAAA;IACjC,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAA;IACzC,mGAAmG;IACnG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,kFAAkF;AAClF,QAAA,MAAM,mBAAmB,0BAAwE,CAAA;AAMjG,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAGzF;AAED,wGAAwG;AACxG,wBAAgB,gBAAgB,CAC/B,IAAI,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,GACvF,MAAM,CAER;AAKD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,mBAAmB,GAAG,IAAI,CA4BzE;AAyCD,iGAAiG;AACjG,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa,GAAG,gBAAgB,CAI/F;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,0BAA0B,GAAG,OAAO,CAAC,gBAAgB,CAAC,CASrG;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CACnC,IAAI,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC,GACjG,gBAAgB,GAAG,SAAS,CAG9B;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CACjC,IAAI,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,EACzF,KAAK,GAAE,QAAQ,CAAC,cAAc,CAAuB,GACnD,IAAI,CAEN;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"get-verified-delivery.d.ts","sourceRoot":"","sources":["../../src/verify/get-verified-delivery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,KAAK,EAEX,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,qGAAqG;AACrG,MAAM,MAAM,cAAc,GACvB;IAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,SAAS,EAAE,mBAAmB,GAAG,IAAI,CAAA;CAAE,GAC5G;IAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAA;CAAE,CAAA;AAEvE,mGAAmG;AACnG,MAAM,WAAW,gBAAgB;IAChC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAA;IAC7B,iGAAiG;IACjG,QAAQ,CAAC,SAAS,EAAE,mBAAmB,GAAG,IAAI,CAAA;CAC9C;AAED,MAAM,WAAW,0BAA0B;IAC1C,mGAAmG;IACnG,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAA;IAC1C,8FAA8F;IAC9F,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,CAAA;IACjC,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAA;IACzC,mGAAmG;IACnG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,kFAAkF;AAClF,QAAA,MAAM,mBAAmB,0BAAwE,CAAA;AAMjG,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAGzF;AAED,wGAAwG;AACxG,wBAAgB,gBAAgB,CAC/B,IAAI,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,GACvF,MAAM,CAER;AAKD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,mBAAmB,GAAG,IAAI,CAgCzE;AAyCD,iGAAiG;AACjG,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa,GAAG,gBAAgB,CAI/F;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,0BAA0B,GAAG,OAAO,CAAC,gBAAgB,CAAC,CASrG;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CACnC,IAAI,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC,GACjG,gBAAgB,GAAG,SAAS,CAG9B;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CACjC,IAAI,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,EACzF,KAAK,GAAE,QAAQ,CAAC,cAAc,CAAuB,GACnD,IAAI,CAEN;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/verify/get-verified-delivery.js

@@ -52,7 +52,7 @@ const isRecord = (v) => typeof v === 'object' && v !== null && !Array.isArray(v)
 export function parseRenderDef(value) {
     if (!isRecord(value))
         return null;
-    const { v, preset, rung, tokens, hidden, barInkFg, layout, customFace } = value;
+    const { v, preset, rung, tokens, hidden, barInkFg, accentFg, face: faceName, layout, customFace } = value;
     if (typeof v !== 'number' || !Number.isFinite(v))
         return null;
     if (!isString(preset) || !isString(rung) || !isRecord(tokens))
@@ -79,6 +79,10 @@ export function parseRenderDef(value) {
         rung,
         tokens: tokenOut,
         ...(barInkFg === '#141414' || barInkFg === '#ffffff' ? { barInkFg } : {}),
+        // 1.2.0: the reader face's two keys. 1.1.x dropped both; they are kept only when well-formed, so a def that
+        // carries neither parses to exactly the object 1.1.1 returned for it.
+        ...(accentFg === '#141414' || accentFg === '#ffffff' ? { accentFg } : {}),
+        ...(isString(faceName) ? { face: faceName } : {}),
         hidden: [...hidden],
         ...(layout !== undefined ? { layout } : {}),
         ...(face ? { customFace: face } : {}),

package/dist/verify/get-verified-delivery.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-verified-delivery.js","sourceRoot":"","sources":["../../src/verify/get-verified-delivery.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"get-verified-delivery.js","sourceRoot":"","sources":["../../src/verify/get-verified-delivery.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@certrev/cert-block",
-	"version": "1.1.1",
+	"version": "1.2.0-canary.0",
 	"description": "Headless render edge for the CertREV CertDeliveryEnvelope: SSR-safe React cert components, a framework-agnostic <certrev-badge> Web Component, a schema.org JSON-LD projector, and a fail-closed verify layer over the shared VerdictKernel.",
 	"repository": {
 		"type": "git",
@@ -27,6 +27,11 @@
 			"types": "./dist/builder/envelope-face.d.ts",
 			"default": "./dist/builder/envelope-face.js"
 		},
+		"./reader": {
+			"types": "./dist/reader/index.d.ts",
+			"default": "./dist/reader/index.js"
+		},
+		"./reader.css": "./src/reader/reader.css",
 		"./webcomponent": {
 			"types": "./dist/webcomponent/certrev-badge.d.ts",
 			"default": "./dist/webcomponent/certrev-badge.js"
@@ -65,6 +70,7 @@
 	"scripts": {
 		"build": "tsc && pnpm build:modal-bundle",
 		"build:modal-bundle": "pnpm dlx esbuild@0.27.7 src/modal/certrev-cert.entry.ts --bundle --minify --target=es2020 --format=iife --legal-comments=none --tsconfig-raw='{\"compilerOptions\":{\"target\":\"ES2017\",\"module\":\"esnext\",\"strict\":true}}' --banner:js='/* biome-ignore-all format: generated cert-badge bundle, see @certrev/cert-block src/modal/ */ /* biome-ignore-all lint: generated cert-badge bundle, see @certrev/cert-block src/modal/ */' --outfile=dist/modal/certrev-cert.js",
+		"refresh:reader": "node scripts/refresh-reader.mjs",
 		"typecheck": "tsc --noEmit",
 		"test": "vitest run"
 	},

package/src/builder/cert-chrome-data.ts

@@ -47,6 +47,16 @@ export interface CertChromeRenderDef {
 	}
 	/** The auto-contrast bar foreground — present only on a barInk-themed face (v2). */
 	readonly barInkFg?: '#141414' | '#ffffff'
+	/**
+	 * The ink painted over the ACCENT fill, as the portal derived it (1.2.0, reader face). Only the reader face reads
+	 * it: the legacy face re-derives its own accent ink from `tokens.accentColor` and ignores this.
+	 */
+	readonly accentFg?: '#141414' | '#ffffff'
+	/**
+	 * The face the brand chose (1.2.0). `'reader'` selects the certrev.com reader face; absent, or any other value,
+	 * paints the face 1.1.1 paints (unknown faces degrade to the legacy face, never to nothing).
+	 */
+	readonly face?: string
 	/** The subtractive field-visibility hide-set. */
 	readonly hidden: readonly string[]
 	/**

package/src/builder/cert-review-card.tsx

@@ -23,11 +23,12 @@ import { Suspense } from 'react'
 import { memoToggleFor, toggleMemo } from '../components/memo-toggle.js'
 import { type CertBlockMode, renderCertBlock } from '../components/render-cert-block.js'
 import { CERT_STRINGS_VERSION, type ResolvedBlockTheme } from '../components/render-def.js'
+import { READER_CSS } from '../reader/reader-css.generated.js'
 import { getVerifiedDelivery, peekVerifiedDelivery, type VerifiedDelivery } from '../verify/get-verified-delivery.js'
 import type { BuilderCertChromeData } from './cert-chrome-data.js'
 import { BUILDER_CERT_CHROME_KEYS } from './cert-chrome-data.js'
 import { cardDeliveryRuntime } from './delivery-runtime.js'
-import { envelopeCardInput } from './envelope-face.js'
+import { envelopeCardHtml, envelopeCardInput, isReaderFaceDef } from './envelope-face.js'
 
 /**
  * The canonical Builder block name. A brand's registration + the portal
@@ -147,8 +148,17 @@ function suspendOn(key: string, start: () => Promise<VerifiedDelivery>): Verifie
  * in; the button is native, so Enter and Space reach it as clicks. Bound after hydration only: the
  * server HTML is the collapsed face, which is also what a reader without JS keeps (the whole memo
  * is still in the text for a screen reader, and the desktop never clamps it).
+ *
+ * `reader` (1.2.0) is true ONLY for a def whose `face` is `'reader'`; it adds two things to the wrapper and nothing to
+ * any other face: `data-certrev-face="reader"` and `display: flow-root`. The reader sidebar card is a right float, and
+ * on a Shopify page the placement script and its wrapper contain it; a Builder block has no such ancestor, so the
+ * wrapper contains the float itself and the block keeps its own box in the page.
  */
-function EnvelopeFace(props: { readonly html: string; readonly defVersion: number | undefined }) {
+function EnvelopeFace(props: {
+	readonly html: string
+	readonly defVersion: number | undefined
+	readonly reader?: boolean
+}) {
 	const ref = React.useRef<HTMLDivElement>(null)
 	React.useEffect(() => {
 		const el = ref.current
@@ -169,6 +179,7 @@ function EnvelopeFace(props: { readonly html: string; readonly defVersion: numbe
 			data-certrev-delivery=""
 			data-certrev-strings-version={CERT_STRINGS_VERSION}
 			data-certrev-def-version={props.defVersion}
+			{...(props.reader ? { 'data-certrev-face': 'reader', style: { display: 'flow-root' } } : {})}
 			// biome-ignore lint/security/noDangerouslySetInnerHtml: renderCertBlock is the escaping-safe SSR string renderer
 			dangerouslySetInnerHTML={{ __html: props.html }}
 		/>
@@ -192,6 +203,24 @@ function EnvelopeCertReviewCard(props: {
 		)
 	// Revoked, expired, unverifiable, for another entry, or unreachable: nothing at all.
 	if (settled.verdict.decision !== 'render') return null
+	// The reader face is opt-in by the def's own `face` and is chosen HERE and nowhere else on this path; every other
+	// def (no face, an unknown face) falls through to the legacy lines below, untouched since 1.1.1.
+	if (isReaderFaceDef(settled.renderDef)) {
+		const reader = envelopeCardHtml(settled.verdict.payload.content, settled.renderDef, {
+			mode: props.mode,
+			part: props.part,
+			certId: settled.verdict.payload.certId,
+		})
+		if (!reader) return null
+		return (
+			<EnvelopeFace
+				reader
+				// The stylesheet rides inside the face, once per card; it is the portal's reader CSS byte for byte.
+				html={`<style data-certrev-reader-css>${READER_CSS}</style>${reader}`}
+				defVersion={settled.renderDef ? settled.renderDef.v : undefined}
+			/>
+		)
+	}
 	const input = envelopeCardInput(settled.verdict.payload.content, settled.renderDef, {
 		mode: props.mode,
 		part: props.part,

package/src/builder/envelope-face.ts

@@ -26,14 +26,16 @@
  * it only returns null when the verified content cannot make a face (no reviewer, no verify URL).
  */
 
-import type {
-	CertBlockFace,
-	CertBlockLayout,
-	CertBlockMode,
-	RenderCertBlockInput,
+import {
+	type CertBlockFace,
+	type CertBlockLayout,
+	type CertBlockMode,
+	type RenderCertBlockInput,
+	renderCertBlock,
 } 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 ReaderLayout, renderReaderFace } from '../reader/render.js'
 import type { CertChromeRenderDef } from './cert-chrome-data.js'
 
 /**
@@ -74,6 +76,10 @@ export interface EnvelopeCardOptions {
 	readonly mode?: unknown
 	/** Banner memo placement, passed through as on the options path. */
 	readonly part?: unknown
+	/** The verified payload's `certId`: stamped on the reader face (`data-certrev-cert-id`). The legacy face ignores it. */
+	readonly certId?: unknown
+	/** A CertREV preview, never a live page: the reader face words the cue's empty slot as the demo does. Only `true` counts. */
+	readonly illustrative?: unknown
 }
 
 /** The def's theme tokens as `renderCertBlock` theme input, with the accent ink derived. */
@@ -171,3 +177,46 @@ export function envelopeCardInput(
 		},
 	}
 }
+
+/** The def `face` that selects the certrev.com reader face (1.2.0). Nothing else does. */
+export const READER_FACE = 'reader'
+
+/** Whether a def asks for the reader face: `face === 'reader'`, exactly. Absent or any other value is the legacy face. */
+export function isReaderFaceDef(def: CertChromeRenderDef | null | undefined): boolean {
+	return def?.face === READER_FACE
+}
+
+/**
+ * The card's HTML for a verified envelope's content and the brand's def, or '' when nothing paints.
+ *
+ * THE ONE SELECTION POINT between the two faces, react-free so the portal's preview reaches it too:
+ *  - `renderDef.face === 'reader'` paints the reader face (`renderReaderFace`), the same bytes as the Shopify reader
+ *    snippets for the same facts;
+ *  - EVERY other def (no `face`, `face: 'legacy'`, a face this version has never heard of, no def at all) paints
+ *    exactly `renderCertBlock(envelopeCardInput(...))`, byte for byte what 1.1.1 paints. An unknown face degrades to
+ *    the face the page had before, never to nothing and never to the reader.
+ * The reader branch sits BESIDE the legacy one; `envelopeCardInput` and `renderCertBlock` are not touched.
+ *
+ * Both faces keep the one gate they share: a content with no reviewer name or no certificate URL cannot make a face.
+ * The reader's layout is `layoutFor` (an editor mode wins, then the def's own layout, else banner); the legacy-only
+ * `custom` composition has no reader twin and paints the reader banner.
+ */
+export function envelopeCardHtml(
+	content: CertContent,
+	renderDef: CertChromeRenderDef | null,
+	options: EnvelopeCardOptions = {},
+): string {
+	const input = envelopeCardInput(content, renderDef, options)
+	if (!input) return ''
+	if (!isReaderFaceDef(renderDef)) return renderCertBlock(input)
+	const chosen = layoutFor(renderDef, options.mode)
+	const layout: ReaderLayout = chosen === 'custom' ? 'banner' : chosen
+	return renderReaderFace({
+		content,
+		def: renderDef,
+		layout,
+		part: input.part,
+		certId: typeof options.certId === 'string' ? options.certId : undefined,
+		illustrative: options.illustrative === true,
+	})
+}

package/src/builder/index.tsx

@@ -174,8 +174,11 @@ export {
 	CERT_FACE_FIELDS,
 	credentialLabel,
 	type EnvelopeCardOptions,
+	envelopeCardHtml,
 	envelopeCardInput,
 	faceFromDef,
+	isReaderFaceDef,
 	layoutFor,
+	READER_FACE,
 	themeFromDef,
 } from './envelope-face.js'

package/src/reader/face.ts

@@ -0,0 +1,35 @@
+/**
+ * `certrev-reader-face`: the round avatar on a reader byline: the person's photo when there is one to show, the
+ * silhouette when there is not. The span carries a size class (`sm` for the author, none for the banner reviewer,
+ * `lg` for the memo and sidebar reviewer); the image is requested at `width` square through the asset resizer.
+ */
+import { avatarUrl, cleaned, esc, safeUrl } from './helpers.js'
+
+export type ReaderFaceSize = '' | 'sm' | 'lg'
+
+export interface ReaderFaceInput {
+	/** The photo URL on the envelope. */
+	readonly photo: unknown
+	/** Whether to ATTEMPT the photo: false never reads the URL (the silhouette shows). */
+	readonly show: boolean
+	readonly size: ReaderFaceSize
+	/** The pixel width the resizer is asked for. */
+	readonly width: number
+}
+
+const SILHOUETTE =
+	'<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><circle cx="20" cy="14.8" r="7"/><path d="M20 23.4c-6.9 0-12.6 4.8-13.8 11.2a20 20 0 0 0 27.6 0C32.6 28.2 26.9 23.4 20 23.4Z"/></svg>'
+
+const DIMENSION: Readonly<Record<ReaderFaceSize, number>> = { '': 42, sm: 36, lg: 46 }
+
+export function readerFace({ photo, show, size, width }: ReaderFaceInput): string {
+	const safe = show ? cleaned(safeUrl(photo)) : ''
+	const src = cleaned(avatarUrl(safe, width))
+	const dim = DIMENSION[size]
+	const cls = size === '' ? 'certrev-r-face' : `certrev-r-face ${esc(size)}`
+	const inner =
+		src !== ''
+			? `<img src="${esc(src)}" alt="" width="${dim}" height="${dim}" loading="lazy" decoding="async">`
+			: SILHOUETTE
+	return `<span class="${cls}">${inner}</span>`
+}

package/src/reader/helpers.ts

@@ -0,0 +1,178 @@
+/**
+ * The Liquid semantics the reader snippets lean on, as small pure functions.
+ *
+ * The reader face is a byte-for-byte twin of the Shopify `certrev-reader-*` snippets, so the helpers below are not
+ * "what a TypeScript author would write": each one reproduces what the Liquid filter or tag does with the same input
+ * (which value counts as `blank`, which `default` replaces, how `contains` reads a string, what `strip_html` removes).
+ * Where the snippets call another snippet (`certrev-safe-url`, `certrev-avatar-url`, `certrev-reader-first-name`,
+ * `certrev-reader-date`) the port is named for it.
+ *
+ * Like every helper in this package they NEVER throw on a hostile type: the envelope is verified for its signature,
+ * not its shape, so a number or an object can arrive where the contract promised a string. Values are read through
+ * `rec` and `asText`, never dereferenced bare.
+ */
+import { asText, escapeHtml } from '../components/escape.js'
+
+export type Rec = Readonly<Record<string, unknown>>
+
+const NO_FIELDS: Rec = Object.freeze({})
+
+/** An object's fields, or none: Liquid reads a missing field as nil, never an error. */
+export function rec(value: unknown): Rec {
+	return typeof value === 'object' && value !== null && !Array.isArray(value) ? (value as Rec) : NO_FIELDS
+}
+
+/** Liquid `escape` as Shopify (and this package) spell it: `&amp; &lt; &gt; &quot; &#39;`. */
+export const esc = (value: unknown): string => escapeHtml(asText(value))
+
+/** Liquid `default: fallback`: replaces nil, false and the empty string only (whitespace stays). */
+export function orDefault(value: unknown, fallback: string): unknown {
+	return value === undefined || value === null || value === false || value === '' ? fallback : value
+}
+
+/** `value | default: ''` read as text. */
+export const textOr = (value: unknown, fallback = ''): string => asText(orDefault(value, fallback))
+
+/** Liquid's `== blank` for the string-ish values the envelope carries: nil, false, empty or whitespace only. */
+export const isBlank = (value: unknown): boolean => asText(value).trim() === ''
+
+/** `{% if x %}` for a value read as a flag: Liquid treats only nil and false as false (the empty string is true). */
+export const isTruthy = (value: unknown): boolean => value !== undefined && value !== null && value !== false
+
+/** Whether a field carries a value after `| default: ''` (so `!= ''` in the snippet). */
+export const isPresent = (value: unknown): boolean =>
+	!(value === undefined || value === null || value === false || value === '')
+
+/** Liquid `contains`: an array holds the needle, a string includes it, anything else does not. */
+export function contains(container: unknown, needle: string): boolean {
+	if (Array.isArray(container)) return container.some((item) => item === needle)
+	if (typeof container === 'string') return container.includes(needle)
+	return false
+}
+
+/**
+ * Liquid `strip_html` as the portal's liquidjs harness runs it: raw-text blocks (`<script…</script>`, `<style…</style>`,
+ * `<!-- … -->`) and then any `<…>` tag are dropped; an opener with no closer is not a block, and once no opener fits
+ * the rest of the string is kept as it is. The snippets use it on every captured value because Shopify wraps each
+ * `{% render %}` of an app snippet in `<!-- BEGIN/END app snippet -->` comments that would corrupt an attribute.
+ */
+export function stripHtml(input: string): string {
+	const blocks = new Map<string, string>([
+		['<script', '</script>'],
+		['<style', '</style>'],
+		['<!--', '-->'],
+		['<', '>'],
+	])
+	let out = ''
+	let i = 0
+	while (i < input.length) {
+		const lt = input.indexOf('<', i)
+		if (lt < 0) return out + input.slice(i)
+		out += input.slice(i, lt)
+		for (const [opener, closer] of blocks) {
+			if (!input.startsWith(opener, lt)) continue
+			const end = input.indexOf(closer, lt + opener.length)
+			if (end >= 0) {
+				i = end + closer.length
+				break
+			}
+			blocks.delete(opener)
+		}
+		if (i <= lt) return out + input.slice(lt)
+	}
+	return out
+}
+
+/** `{% capture x %}…{% endcapture %}` then `x | strip_html | strip`, which every snippet applies to a captured value. */
+export const cleaned = (value: string): string => stripHtml(value).trim()
+
+/**
+ * `certrev-safe-url`: the trimmed URL when it is http(s), protocol-relative or site-relative (`/…`, `#…`), else ''.
+ * A `javascript:`, `data:` or other scheme collapses to '' so the caller's `!= ''` guard drops the link or the photo.
+ */
+export function safeUrl(url: unknown): string {
+	const u = textOr(url).trim()
+	if (u === '') return ''
+	const lower = u.toLowerCase()
+	if (
+		lower.startsWith('https://') ||
+		lower.startsWith('http://') ||
+		u.startsWith('//') ||
+		u.startsWith('/') ||
+		u.startsWith('#')
+	)
+		return u
+	return ''
+}
+
+const ASSET_HOSTS: readonly string[] = ['assets.certrev.com', 'staging-assets.certrev.com']
+
+/**
+ * `certrev-avatar-url`: a CertREV asset-host photo is requested through the host's `cdn-cgi/image` resizer at
+ * `width` square (the query string dropped, which the WAF allowlist pins to empty); any other URL, a lookalike host,
+ * an `http://` or `//` form, or a URL already carrying `cdn-cgi/image/`, is returned as it is.
+ */
+export function avatarUrl(url: string, width: number): string {
+	const u = url.trim()
+	if (!u.includes('assets.certrev.com/')) return u
+	const after = u.replace('https://', '')
+	const host = after.split('/')[0] ?? ''
+	if (!ASSET_HOSTS.includes(host)) return u
+	const path = after.replace(host, '').replace('/', '').split('?')[0] ?? ''
+	if (path.includes('cdn-cgi/image/')) return u
+	return `https://${host}/cdn-cgi/image/width=${width},height=${width},fit=cover,format=auto,onerror=redirect/${path}`
+}
+
+const HONORIFICS: readonly string[] = [
+	'dr.',
+	'dr',
+	'mr.',
+	'mr',
+	'mrs.',
+	'mrs',
+	'ms.',
+	'ms',
+	'prof.',
+	'prof',
+	'mx.',
+	'mx',
+]
+
+/**
+ * `certrev-reader-first-name`: the name's first word with a leading honorific (Dr., Mr., Mrs., Ms., Prof., Mx.,
+ * any case) dropped; '' when nothing is left, which the caller words as "View profile".
+ */
+export function firstName(name: string): string {
+	let clean = name.trim()
+	const firstWord = (clean.split(' ')[0] ?? '').toLowerCase()
+	if (HONORIFICS.includes(firstWord)) {
+		const honorific = clean.split(' ')[0] ?? ''
+		clean = clean.replace(honorific, '').trim()
+	}
+	return clean.split(' ')[0] ?? ''
+}
+
+const MONTHS: readonly string[] = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December',
+]
+
+/**
+ * `certrev-reader-date`: "June 20, 2026" for an ISO timestamp, read in UTC (the portal harness's `date` filter does
+ * the same). A value that is not a date prints nothing, so the caller's `!= ''` guard falls to the undated wording.
+ */
+export function longDate(iso: unknown): string {
+	const parsed = new Date(asText(iso))
+	if (Number.isNaN(parsed.getTime())) return ''
+	return `${MONTHS[parsed.getUTCMonth()]} ${parsed.getUTCDate()}, ${parsed.getUTCFullYear()}`
+}

package/src/reader/index.ts

@@ -0,0 +1,14 @@
+/**
+ * The reader face, react-free: `@certrev/cert-block/reader`.
+ *
+ * Importing this loads no React, so a server bundle that cannot load `./builder` (it creates a React context at import)
+ * can still render, and a stylesheet pipeline can still read the CSS. The Builder card reaches the same function
+ * through `envelopeCardHtml` (`./builder/face`); the stylesheet is also the package asset `./reader.css`.
+ */
+export { READER_CSS } from './reader-css.generated.js'
+export {
+	type ReaderFaceInput,
+	type ReaderLayout,
+	type ReaderPart,
+	renderReaderFace,
+} from './render.js'

package/src/reader/logo.ts

@@ -0,0 +1,28 @@
+/**
+ * The CertREV mark the reader face paints in the card cap (18px) and the memo footer (17px): the Liquid
+ * `certrev-reader-logo` snippet's inline SVG data URI, byte for byte, so a Builder page and a Shopify page carry the
+ * same image. White on a dark accent, black (the demo's logo-mono) on a light one.
+ *
+ * The four `d` strings below are the snippet's, copied rather than retyped; the golden tests compare the whole
+ * element, so a slipped digit fails there.
+ */
+import { escapeHtml } from '../components/escape.js'
+
+export type ReaderLogoInk = 'white' | 'mono'
+
+const MARK_PATHS: readonly string[] = [
+	'M67.59 221.77L138.77 292.95C145.8 299.98 145.8 311.44 138.77 318.47L123.02 334.22C116 341.25 104.54 341.25 97.5 334.22L26.32 263.04C19.29 256.01 19.29 244.55 26.32 237.52L42.07 221.77C49.1 214.74 60.56 214.74 67.59 221.77Z',
+	'M96.79 335.08L81.12 319.42C73.8 312.1 73.8 300.23 81.12 292.92L315.88 58.16C323.2 50.85 335.06 50.85 342.38 58.16L358.04 73.83C365.36 81.14 365.36 93.01 358.04 100.33L123.29 335.08C115.97 342.4 104.1 342.4 96.79 335.08Z',
+	'M203.5 335.14L187.83 319.48C180.52 312.16 180.52 300.29 187.83 292.98L315.88 164.93C323.2 157.62 335.06 157.62 342.38 164.93L358.04 180.6C365.36 187.92 365.36 199.78 358.04 207.1L230 335.14C222.68 342.46 210.82 342.46 203.5 335.14Z',
+	'M310.21 335.2L294.54 319.54C287.23 312.22 287.23 300.36 294.54 293.04L315.88 271.71C323.2 264.39 335.06 264.39 342.38 271.71L358.04 287.37C365.36 294.69 365.36 306.55 358.04 313.87L336.71 335.2C329.39 342.52 317.53 342.52 310.21 335.2Z',
+]
+
+/** The `<img>` for the mark: `size` is the pixel width and height, `alt` is '' where the words carry the meaning. */
+export function readerLogo(ink: ReaderLogoInk, size: number, alt: string): string {
+	const fill = ink === 'white' ? 'ffffff' : '000000'
+	const paths = MARK_PATHS.map((d) => `%3Cpath fill='%23${fill}' d='${d}'/%3E`).join('')
+	return (
+		`<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 375'%3E${paths}%3C/svg%3E" ` +
+		`alt="${escapeHtml(alt)}" width="${escapeHtml(String(size))}" height="${escapeHtml(String(size))}" decoding="async">`
+	)
+}