@certrev/cert-block 1.2.0-canary.6 → 1.2.0

package/CHANGELOG.md

@@ -5,41 +5,126 @@ change the rendered cert output and never break a compiling integration** (regis
 exports, types). Anything that would alter what a visitor sees, or require integration changes,
 is announced loudly here first.
 
-## 1.2.0-canary.6 · 2026-10-06
-
-Still on the `canary` dist-tag. It lets the reader sidebar card's float out of its Builder block, so on a Builder
-page the sidebar sits in the article column the way it does on a WordPress or Shopify page (the judge's round 11:
-all 80 `sidebar.*.desktop` cells failed placement). **Only a reader face's output changes**, by one element. Every
-other face, the options-only card, a revoked or failed card, the stylesheet, the modal, `CERT_FONT_FACE_CSS` and
-`@certrev/cert-contract` are byte for byte as in canary.5. No integration needs a code change.
-
-- **Cause.** Builder serves a page's blocks as a flex column (`.builder-blocks`), and each block
-  (`.builder-block`) is a flex item, which is a formatting context of its own. A formatting context contains a
-  float. So the block around a sidebar card spanned the whole column at the aside's height (at 1280: 1208 px wide,
-  the aside plus its 2 px and 18 px margins tall), and no copy could sit beside the aside.
-- **Fix.** A reader face paints one more element, right after its wrapper: `<style data-certrev-builder-flow="">`
-  holding `BUILDER_SIDEBAR_FLOW_CSS`. Its three rules apply only above the reader CSS's own stacking breakpoint
-  (`@media not all and (max-width: 820px)`, the complement of the reader CSS's `(max-width: 820px)`), and only in a
-  Builder column that holds a reader SIDEBAR card as `.builder-blocks > .builder-block > [data-certrev-face="reader"]
-  > .certrev-reader > .certrev-r-side`:
-  - that column becomes `display: flow-root`, so it lays its blocks out as blocks and still contains the float;
-  - the card's block and the face's wrapper become `display: block`, so they take no height, and the aside is
-    the box the copy flows around.
-
-  A column with no reader sidebar (a banner, a floating pill, a legacy face), a card that is not a direct child of
-  a Builder block, the stacked widths, and a browser with no `:has()` keep exactly the layout they had. In the
-  column the rules do apply, its blocks lay out as blocks rather than flex items: `align-self` on a block there has
-  no effect, and vertical margins between blocks collapse.
-- **Export.** `BUILDER_SIDEBAR_FLOW_CSS` from `./builder/cert-review-card` (not re-exported from `.` or `./builder`).
-- **Tests.** `reader-face-sidebar-flow.test.tsx` (new) pins:
-  - that every reader face paints the rules once, after its wrapper, unescaped;
-  - that no other face and no options-only or revoked card paints them;
-  - that the breakpoint is read from the reader CSS;
-  - that the rules set only `display`;
-  - which elements the rules select in a page shaped as Builder serves it.
-
-  `reader-face-card.test.tsx` and `reader-face-card-hydrate.test.tsx` now count the second style element. Hydration
-  keeps both style nodes in place, with no mismatch, and a revocation removes both.
+## 1.2.0 · 2026-10-06
+
+Minor, the first stable release with the `delivery` card's reader face (dist-tag `latest`). It follows
+`1.2.0-canary.5` (the design pin, below, is part of it) and adds these changes: **the delivery card never reads
+from the browser unless the brand opts in, so no storefront needs a Content-Security-Policy change**, **a card whose
+server could not reach CertREV paints the block's own options face, never nothing**, **the server's read waits 8 s
+and serves a certificate stale while it refreshes**, **a field the def hides is absent from the page**, **the reader
+face's avatar shows the person's initials where it has no photo to paint, or a photo fails to load**, and **the
+reader sidebar card's float leaves its Builder block** (canary.6). No integration needs a code change, and an
+options-only block is untouched.
+
+- **No browser read by default; the options face when CertREV is not reached (the 1.2.0 re-cut).** A proof run on a
+  cold staging read found the failure this release exists to remove: the server's read missed the verifier's 3 s
+  deadline, so the server painted no card, and the browser's own read was then blocked by the storefront's CSP. Now:
+  - The card **never fetches from the browser** unless the block opts in with the new `clientRead` prop (code only,
+    not a Builder input). A card the browser renders with no server render behind it paints the block's options face,
+    or nothing (a block with no options).
+  - Where the server has no envelope it writes a **fallback record** in the seed attribute,
+    `{ v: 1, baseUrl, externalId, design?, face }` with `face` `"options"` or `"none"` and nothing of a certificate.
+    CertREV not reached (a 5xx, a body that is not an envelope, a network error, the deadline) paints the block's
+    own **options face**, the 1.0.3 bytes, in the block's `mode`, else its def's `layout`, else the banner; a block
+    whose options cannot paint writes `"none"`. A pinned card (canary.5's design pin, CertREV's replica) paints the
+    options face too, with a record naming its pin, so the replica shows what a brand's page shows: of canary.5's
+    fail-closed list below, only the 503 changes. A definitive no (revoked, expired, unverifiable,
+    another entry, a 404 or 410) still paints nothing, with `"none"`, so the options face never paints over a
+    revocation. The browser keeps the recorded face through hydration and through React's client re-render after a
+    hydration error, with no read.
+  - The card runtime's server read waits **8 s** (`CARD_DELIVERY_TIMEOUT_MS`; `getVerifiedEnvelope` and
+    `getVerifiedDelivery` keep their 3 s default). Its cache gains `staleMs` (5 minutes, `CARD_DELIVERY_STALE_MS`):
+    past the 60 s TTL a certificate is served at once while ONE background refresh runs (stale-while-revalidate),
+    and kept while CertREV cannot be reached (stale-if-error); a definitive refusal replaces it as soon as its
+    refresh lands, and a negative entry is never served stale. `inflightMaxMs` (deadline + 2 s) lets the next render
+    start a new load instead of joining one the host runtime abandoned. `TtlCache` without the new options behaves
+    exactly as before.
+  - A reviewer photo that **fails to load** (a CSP `img-src` block, a 404) is repainted as the person's initials,
+    whether it failed before hydration or after; the record is unchanged and nothing is requested.
+
+- **The browser hydrates from the server's read (no browser fetch).** Through canary.5 a `delivery`-marker
+  card read the Delivery API on the server and again in the browser on hydration; a storefront whose CSP
+  `connect-src` names no CertREV origin blocked the second read, the read settled as a suppress and the
+  server's card vanished. The face's wrapper now carries the envelope it was painted from,
+  `data-certrev-envelope` = `{ v: 1, baseUrl, externalId, design?, payload, signature?, renderDef }` (the payload
+  as served, less hidden fields, below; `src/builder/ssr-seed.ts`), and the browser hydrates from it with zero
+  requests. After hydration the card re-runs the lifecycle and subject policy at the browser's clock, so an
+  expiry that passes while the page is open still takes it down. A card the browser mounts later paints
+  from any seed the page carried for the same placement. A card with no server render behind it (a
+  client-only page, Builder's editor preview) makes no read unless the block opts in with `clientRead`
+  (above); where an opted-in read is blocked or fails it renders nothing and logs nothing, and it never
+  unmounts the host's tree. A pinned card
+  (canary.5's `certrevDesignPin`) takes only a seed carrying the same pin, and the seed records it.
+- **Server render or browser hydration is decided from the page, with no switch.** The card used to ask the
+  delivery runtime's `isServer()`, which defaulted to `typeof document === 'undefined'`; a `react-dom/server` render
+  under jsdom (or any DOM shim) therefore took the browser path and painted `<!--$--><!--/$-->`. The seam is gone.
+  A card with no `document` is a server; a card past hydration or mounted on the client is a browser; a card that is
+  hydrating is a browser only when the live document already holds server-rendered HTML in front of it (this
+  placement's seed, or any React Suspense boundary marker, which the card's own `<Suspense>` always leaves) and is a
+  server render otherwise. One case is not seen: a server render run while the document still holds server-rendered
+  React HTML is taken for a hydration, so a harness that hydrates one page and renders another into the same document
+  clears it between them.
+- **A hidden field is absent from the page.** The seed (and so the page source) used to carry the reviewer's photo
+  URL even where the def hides `reviewerPhoto` or the payload's `display.showExpertPhoto` is `false`, and the memo text
+  where the def hides `memo`. Now the payload is stripped of what is hidden before the card paints and before it writes
+  the seed: `reviewerPhoto` removes `content.expert.photoUrl` and `content.author.photoUrl`, `display.showExpertPhoto:
+  false` removes the same two (whatever the def hides; only a literal `false` counts, as the reader face reads it), and
+  `memo` removes `content.memo`. The face is painted from the
+  stripped payload, on the server and in the browser, so the two stay identical. The seed then **carries no
+  signature**: it signs the full payload, a stripped one no longer verifies, the browser never re-checks a seed's
+  signature (it re-runs the lifecycle and subject policy only, which read nothing that is stripped), and a pair that
+  fails to verify would only mislead. A seed that stripped nothing keeps the signature. `content.expert.compensationCue`
+  is never stripped: it is a locked disclosure, and the banner, the memo and the sidebar paint "Compensated expert" from it (the floating pill's own markup carries no
+  disclosure line, as in the portal's snippets; the modal it opens paints the cue). One visible
+  consequence: a reader def that hides `memo` now paints no memo on the Builder card (the reader face called directly,
+  and the portal's snippets, still paint the memo they are given).
+- **The reader face's avatar is the person's initials where it has no photo to paint.** The silhouette is now the
+  fallback for a name with no initials, not for a missing photo. A photo that is missing or unsafe, `display.showExpertPhoto:
+  false`, and a def that hides `reviewerPhoto` (which used to remove the avatar altogether, and now removes the photo:
+  its URL is never written) all paint the initials. The initials are fixed bytes the portal's Liquid and PHP twins
+  print too: trim the name, split on single spaces and skip the empty parts (so "Jane  Doe", two spaces, is "JD"), drop a
+  leading dr, mr, mrs, ms, prof or mx (with or without the dot), take the first character of each of the first two
+  parts left, uppercase, and paint exactly
+  `<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><text x="20" y="20" text-anchor="middle"
+  dominant-baseline="central" font-size="15" font-weight="700">JD</text></svg>`, escaped. It applies to every avatar of the face
+  (the sidebar reviewer, the banner and memo reviewer, and the banner's writer under the writer's own name). A photo that is
+  painted is the same `<img>` as before.
+- **The reader card loads no font file.** Its inlined `<style>` is `READER_CSS` without the 40 remote
+  `@font-face` rules (`https://assets.certrev.com/fonts/…`), so the card needs no `font-src` and logs no
+  violation on a strict CSP. The four metric Fallback faces stay, so text paints in Arial and Times New Roman
+  sized to the demo's fonts and the layout holds. `READER_CSS` and `./reader.css` are unchanged and still
+  carry all 44 rules: a host that wants certrev.com's faces links `./reader.css` and allows the origin.
+- **The reader sidebar card's float leaves its Builder block (canary.6).** Builder serves a page's blocks as a flex
+  column (`.builder-blocks`), and each block (`.builder-block`) is a flex item, which is a formatting context of its
+  own and so contains a float. The block around a reader sidebar card therefore spanned the whole column at the
+  aside's height (at 1280: 1208 px wide), and no copy could sit beside the aside. A reader face now paints one more
+  element right after its wrapper: `<style data-certrev-builder-flow="">` holding `BUILDER_SIDEBAR_FLOW_CSS`
+  (exported from `./builder/cert-review-card`). Its three rules apply only above the reader CSS's own stacking
+  breakpoint (`@media not all and (max-width: 820px)`), and only in a Builder column holding a reader SIDEBAR card
+  as `.builder-blocks > .builder-block > [data-certrev-face="reader"] > .certrev-reader > .certrev-r-side`:
+  - that column becomes `display: flow-root`;
+  - the card's block and the face's wrapper become `display: block`, so they take no height and the aside is the
+    box the copy flows around.
+
+  Any other column, a card that is not a direct child of a Builder block, the stacked widths and a browser with no
+  `:has()` keep their layout. In a column the rules do apply, its blocks lay out as blocks: `align-self` has no
+  effect there, and vertical margins between blocks collapse. `reader-face-sidebar-flow.test.tsx` pins the element,
+  the breakpoint read from the reader CSS, and what the rules select in a Builder-shaped page.
+- **Bytes.** The legacy face's HTML is unchanged. The reader face's is unchanged except the avatars above and the
+  flow rules' `<style>` after the wrapper. The wrapper of either gains the one attribute, and the card's inlined
+  stylesheet loses the remote font faces. The cache
+  keeps the envelope's signature beside the verdict so the seed can carry it.
+- **Tests.** `delivery-card-hydrate.test.tsx` (rewritten: zero browser reads on hydration for both faces, the
+  same DOM nodes, the seed verifying against the issuer key, revoked and browser-clock-expired cards, a later
+  client mount, the options and none records kept through hydration and through a client re-render after a
+  hydration error with no read, the no-record client mount making no read without `clientRead` and with it reading
+  once or failing closed silently, a broken or pre-failed photo repainted as initials, every server render under
+  jsdom with no switch), `delivery-card.test.tsx` (each unreachable case paints the 1.0.3 options face byte for
+  byte with an options record; the def layout and an editor's mode; a pinned card's options record; the 8 s deadline; a
+  read slower than 3 s still painting; the stale window over a CertREV outage), `cache.test.ts` (new: the stale
+  window, stale-if-error and the in-flight limit, and the cache unchanged without them) and `ssr-seed.test.tsx` (the seed and fallback-record parsers' refusals, `withoutPhotos`, the design pin in the seed key, the hidden-field
+  strip and the signature decision, and a card stylesheet with no font URL). The reader tests gain the initials
+  cases (`reader-initials.test.ts`).
 
 ## 1.2.0-canary.5 · 2026-10-06
 

package/README.md

@@ -295,8 +295,10 @@ brand's render-def (accent / surface / corners / font + v2 bar-ink / body-ink).
 certrev.com's "reader" design (a banner card plus the expert memo, a sidebar card, a floating pill) is a
 **second face** beside the one every earlier version paints. A `delivery`-marker card paints it only when
 the Delivery API's render def says `face: 'reader'`, spelled exactly. Any other def (no `face`, `legacy`, an
-unknown name, a non-string) paints exactly the bytes 1.1.1 painted: the byte tests in
-`src/builder/__tests__/legacy-face-1.1.1.test.ts` compare it to the 1.1.1 tag's own output. A block without
+unknown name, a non-string) paints exactly the face bytes 1.1.1 painted: the byte tests in
+`src/builder/__tests__/legacy-face-1.1.1.test.ts` compare it to the 1.1.1 tag's own output. (From 1.2.0
+the face's wrapper also carries its `data-certrev-envelope` seed; see
+[The delivery card in the browser](#the-delivery-card-in-the-browser-120).) A block without
 the `delivery` marker (an options-only block) never reads the envelope, so it stays on the legacy face.
 
 - **Same bytes as the Liquid.** The markup is the Shopify `certrev-reader-*` snippets', and the portal's
@@ -312,10 +314,13 @@ the `delivery` marker (an options-only block) never reads the envelope, so it st
   and the four metric "* Fallback" faces (`src: local(Arial)`, so no fetch). They are declared at
   `font-stretch: 101%` and the reader root asks for 101%, so they apply to reader text only and never to a
   legacy face of the same name. The brand font stacks are the demo's own (`'DM Sans', ui-sans-serif, ...`);
-  there are no "CertREV Reader" aliases. The faces ride the card's own `<style>`, so they are in the document
-  whenever the card is, with no modal opened; the **browser** loads a file when the card paints with that
-  family, and the card itself makes no request. A host whose CSP has no `font-src` for that origin gets the
-  stack's generic family (and the Fallback metric face for the demo's stacks), never a broken card.
+  there are no "CertREV Reader" aliases. **The card's own `<style>` (1.2.0) is `READER_CSS` without the 40
+  remote faces**: it keeps the four Fallback faces and names no font URL, so a card loads no font file and
+  needs no `font-src`, and a storefront whose CSP allows no CertREV origin logs no violation. Its text paints
+  in the Fallback metric faces (Arial and Times New Roman sized to the demo's fonts, so the layout matches)
+  unless the page already declares the demo's families. A host that wants certrev.com's own faces links
+  `@certrev/cert-block/reader.css` (which keeps all 44 rules) from its own stylesheet and allows
+  `font-src https://assets.certrev.com`; the card then paints in them with no change of its own.
   Every declaration on the `.certrev-reader` root is `!important`, a guard rule makes descendant text inherit
   the reader's font, colour and spacing over a host theme's element rules, and an image armor keeps `img`
   corners square (`border-radius: 0 !important`; Hydrogen's starter `app.css` rounds every `img` 4px).
@@ -347,17 +352,99 @@ the `delivery` marker (an options-only block) never reads the envelope, so it st
   comment opener or a bracket) paints the default, navy `#0A1B3F` and `14px`, and never reaches the
   `style` attribute. The font is one of five stacks (`sans`, `serif`, `grotesk`, `mono`, `system`); an
   unknown slot paints sans.
-- **Avatars.** Every byline paints a round avatar: the reviewer's photo, or the silhouette when there is
-  none to show (36 px for the writer, 42 px for the banner reviewer, 46 px for the memo and sidebar
-  reviewer). The silhouette is an inline `<svg>`, not an `<img>`, so a page with no photos holds no
-  avatar image. The def's `hidden` set is what removes them: `reviewerPhoto` takes the reviewer's and the
-  writer's alike, which is data on the brand, not a face setting. `display.showExpertPhoto: false` keeps
-  the silhouette and never reads a photo URL.
+- **Avatars.** Every byline paints a round avatar: the person's photo when there is one to paint, else their
+  initials, else the silhouette (a name with no initials). It is 36 px for the writer, 42 px for the banner
+  reviewer, 46 px for the memo and sidebar reviewer. The initials and the silhouette are an inline `<svg>`, not an
+  `<img>`, so a page with no photos holds no avatar image. The initials are the same bytes the portal's Liquid
+  snippets and WordPress renderer print: the name trimmed and split on single spaces (empty parts skipped, so
+  "Jane  Doe" is "JD"), a leading dr, mr, mrs, ms, prof or mx (with or without the dot) dropped, the first character (by code point) of each of the first two parts left,
+  uppercased, in
+  `<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><text x="20" y="20" text-anchor="middle" dominant-baseline="central" font-size="15" font-weight="700">JD</text></svg>`
+  (the initials escaped); an empty result paints the silhouette. A def that hides `reviewerPhoto`, and
+  `display.showExpertPhoto: false`, never read a photo URL and paint the initials: the hidden photo is removed, not
+  the avatar. `reviewerPhoto` takes the reviewer's and the writer's photo alike, which is data on the brand, not a face
+  setting.
 - **Credential line.** The banner prints the reviewer's credential, a middle dot and the attribution as
   three leaves of one `<em>` (`RDN, LD, PhD · Credential verified by CertREV on May 1, 2026`); a reviewer
   with no displayed credential makes no verification claim. The writer's `<em>` under the name is the
   envelope's `author.title`, printed only when it is non-empty.
 
+### The delivery card in the browser (1.2.0)
+
+A `delivery`-marker card reads the signed envelope (and the brand's render def) from the Delivery API **on
+the server**, and the face it paints carries that read as one attribute on its wrapper:
+`data-certrev-envelope` = `{ v: 1, baseUrl, externalId, design?, payload, signature?, renderDef }`. The payload is
+the served one less the fields the def hides (below), and `design` is the design pin the read was made with. The
+browser hydrates from it:
+
+- **A server-rendered card makes no browser read.** It hydrates from its own `data-certrev-envelope`,
+  byte for byte the server's face, so a storefront whose CSP `connect-src` names no CertREV origin keeps
+  the card painted and logs nothing. Through 1.1.1 the browser re-read the Delivery API on hydration, and a
+  blocked read took the server's card down.
+- **Where the server had no envelope to paint, it writes what it painted instead**, in the same attribute: a
+  record `{ v: 1, baseUrl, externalId, design?, face }` with no payload, no signature and no def. The browser keeps
+  that face through hydration and any later render of the same placement, and reads nothing:
+  - **CertREV not reached** (a 5xx, a body that is not an envelope, a network error, the 8 s deadline): the
+    block's own options face, the card 0.5.x and 1.0.x painted from the same fields, with `face: "options"`. Its
+    placement is the block's `mode`, else its def's `layout`, else the banner. A page never loses its card to an
+    outage. A pinned card (below) paints it too, with a record naming its pin. A block whose options cannot
+    paint (no reviewer) paints nothing, with `face: "none"`.
+  - **A definitive no** (revoked, expired, unverifiable, another entry's envelope, a 404 or 410): nothing, with
+    `face: "none"`, so a revocation is never painted over by the options face.
+- **After hydration** the card re-runs the lifecycle and subject policy at the browser's clock: a cert
+  whose `expiresAt` passed while the page was open comes down. The signature is not re-checked in the
+  browser (whoever can write the page's HTML can already write any card), and a revocation shows on the
+  next page load, which is when the server reads again.
+- **A card the browser mounts later** (an in-app navigation, a re-render) paints from any seed the page's
+  server HTML carried for the same placement, so it makes no read either. A pinned card (the design pin,
+  below) takes only a seed carrying the same pin.
+- **A card with no server render behind it** (a client-only page, Builder's visual editor preview) **makes no
+  read**: it paints the block's own options face, as the unreachable case does, pinned or not, or nothing (a
+  block with no options). The browser never fetches by default, so no brand's CSP needs a CertREV origin.
+- **`clientRead` (a prop, off by default) opts in to that read.** A card with `clientRead` and no server render
+  behind it reads the Delivery API once from the browser and settles exactly as a server does. That read needs
+  `connect-src` for the Delivery origin; where it is blocked or fails, the card **renders nothing and logs
+  nothing**, never a broken card and never the host's tree unmounted. It is not a Builder input: a brand that wants
+  it sets it in code, on a wrapper of the registered component.
+- **The server's read** waits up to 8 s (the verifier's own default stays 3 s). Its cache keeps a certificate for
+  60 s, then serves it for up to 5 minutes more while one background refresh runs or while CertREV cannot be
+  reached; a refusal (revoked, expired) lands as soon as its refresh does. A cold placement waits once; a warm one
+  never waits.
+- **A reviewer photo the browser cannot load** (a CSP `img-src` without the photo's origin, a 404) is repainted as
+  the person's initials, the same bytes the face paints for a hidden photo (below), with no request and no change to
+  the record.
+- **Server render or hydration is decided from the page, with no switch.** React tells a component nothing
+  about which it is in, and under jsdom (or a DOM shim) a `react-dom/server` render sees a `document` too.
+  So the card reads what a hydration has and a server render cannot: server-rendered HTML in the document. No
+  `document` is a server; a card mounted on the client, or past its hydration, is a browser; a card that is
+  hydrating is a browser only if the live document holds this placement's seed or a React Suspense boundary marker
+  (the card's own `<Suspense>` leaves one even where the server painted no card), and otherwise is a server render,
+  which reads and seeds as a server does. The one case that is not seen is a server render run while the document
+  still holds server-rendered React HTML (a test or shim that hydrates one page and renders another into the same
+  document): it is taken for a hydration, so clear the document between pages in such a harness.
+
+#### Hidden fields are absent from the page
+
+A def's `hidden` set (`reviewerPhoto`, `memo`) and the payload's `display.showExpertPhoto: false` are the brand's
+statement that the page does not show those fields, so the seed does not carry them either. Before the card paints and
+before it writes the seed, the payload is stripped:
+
+| hidden by | removed from the payload |
+| --- | --- |
+| the def's `reviewerPhoto` | `content.expert.photoUrl` and `content.author.photoUrl` (the reader face paints the writer's photo under the same switch) |
+| `display.showExpertPhoto: false` (a literal `false`; absent or `null` shows the photo) | the same two photo URLs, whatever the def hides |
+| the def's `memo` | `content.memo` |
+
+The face is painted from the stripped payload on the server and in the browser, so the two are identical and the page
+source holds neither the photo URL nor the memo text. `content.expert.compensationCue` is never stripped: it is a locked
+disclosure no def can hide, and the banner, the memo and the sidebar paint "Compensated expert" from it (the floating pill's own markup carries no
+disclosure line, as in the portal's snippets; the modal it opens paints the cue). **When anything was stripped the seed
+carries no `signature`.** The signature signs the whole payload, so a stripped payload no longer verifies against it;
+the browser never re-checks a seed's signature, only the lifecycle and subject policy at its own clock, and neither reads
+a stripped field. A seed that stripped nothing keeps the signature, so its payload can still be checked against the issuer
+key. A reader def that hides `memo` paints no memo card on the Builder card (the reader face called directly, like the
+portal's Shopify snippets, paints the memo it is given).
+
 ### Design pin (staging replica)
 
 1.2.0-canary.5. **This is for CertREV's own canary replica only; production brands never send it.** The
@@ -390,8 +477,12 @@ the same URL, under the same cache key, and paints the same bytes as before.
     fetched.
   - a pin on a block without the `delivery` marker. The options face is never the pinned design, and nothing
     is fetched.
-  - a 404 (`no_design`) or 503 from the API, and every verdict that already suppresses an unpinned card
+  - a 404 (`no_design`) from the API, and every verdict that already suppresses an unpinned card
     (revoked, expired, unverifiable, another entry).
+
+  CertREV not reached (a 503, a timeout, a network error) is not a fail-closed case since 1.2.0: a pinned card
+  paints the block's own options face, as an unpinned card does, with a record that names the pin and says
+  `options`. That is never the live design, and the record tells a capture it is not the pinned one either.
   - a def that is anything other than a **reader** def (`face: 'reader'`) at **exactly** the pinned version.
     That includes no def, a malformed def, a legacy or unknown face, and another version.
 
@@ -466,12 +557,15 @@ import certScriptUrl from '@certrev/cert-block/modal/certrev-cert.js?url'
 <script src={certScriptUrl} defer />
 ```
 
-CSP allowances for the headless host. The **registered card** needs none on the legacy face: it fetches
-no font, loads no image (the avatar is rendered initials) and inlines its logo as SVG. The reader face's
-inlined stylesheet names `https://assets.certrev.com/fonts/` in its `@font-face` rules for every font slot
-(DM Sans, Playfair Display, Plus Jakarta Sans, JetBrains Mono), so a host that wants those fonts needs the
-`font-src` below for the card as well as the modal (`data-fonts="host"` only stops the modal's injection).
-These are what the **modal** needs:
+CSP allowances for the headless host. The **registered card** needs none when the server renders it
+(1.2.0): it hydrates from the envelope in its own server HTML with no browser read (see
+[The delivery card in the browser](#the-delivery-card-in-the-browser-120)), fetches no font (the reader
+face's inlined stylesheet names no font URL), and paints its logo and silhouette avatars inline. Two
+things a host may still want: `img-src` for the reviewer's photo when the brand's def shows it (a reader
+face `<img>` of the envelope's `photoUrl`, usually `https://assets.certrev.com`; a def that hides
+`reviewerPhoto` loads no image, and a photo the policy blocks is repainted as the person's initials), and
+`connect-src` only for a block that opts in to a browser read with `clientRead`. These are what the **modal**
+needs:
 
 - `connect-src` → the CertREV Delivery origin the element fetches the signed envelope from
   (production `https://portal.certrev.com`; staging `https://staging.portal.certrev.com`).
@@ -731,7 +825,7 @@ notification channel, because for those consumers it is the only one.
 
 ## Tests
 
-`pnpm test` (Vitest) runs all 17 test files. They sit next to what they cover: `src/__tests__/`
+`pnpm test` (Vitest) runs every test file. They sit next to what they cover: `src/__tests__/`
 for the cross-cutting suites, `src/builder/__tests__/` for the Builder kit, and `src/modal/*.test.ts`
 alongside each modal module. The load-bearing ones:
 
@@ -742,6 +836,7 @@ alongside each modal module. The load-bearing ones:
 - **`__tests__/escape-family.test.ts`** puts both escape families (`components/` and `modal/`) against wrong-typed input, not just null: a half-filled CMS object must degrade, never throw.
 - **`__tests__/webcomponent.test.tsx`**: the shared `renderBadgeHtml` string renderer (hand-escaping, unsafe-URL/color dropping, compact style) and the `<certrev-badge>` custom element (idempotent registration, SSR light-DOM preservation, client-mode fail-closed without a resolver).
 - **`builder/__tests__/builder.test.tsx`** covers the PUSH card and its registration: the wire-type ⇄ inputs parity lock, the fused-credential gate, and the mistyped-option degradation.
+- **`builder/__tests__/delivery-card-hydrate.test.tsx`** + **`builder/__tests__/ssr-seed.test.tsx`** (1.2.0): a server-rendered delivery card hydrates on both faces with zero browser reads, no mismatch and the same nodes; its seed is the served envelope and still verifies; revoked and browser-clock-expired cards come down; a later client mount reuses the page's seed; the server's options and none records are kept through hydration and through React's client re-render after a hydration error, with no read; a client mount with no record makes no read and paints the options face or nothing, and only with `clientRead` reads once, or renders nothing and logs nothing when the read is refused; a reviewer photo that fails to load repaints as initials; the seed and fallback-record parsers refuse malformed records and each other's; the design pin is part of the seed's key; a hidden `reviewerPhoto` or `memo`, or `display.showExpertPhoto: false` (the photo URLs), is absent from the whole server HTML and the seed carries no signature; every server render in these files runs under jsdom with no server switch; and the card's inlined reader stylesheet names no font URL. **`builder/__tests__/delivery-card.test.tsx`** pins the unreachable cases to the 1.0.3 options face byte for byte, and the 8 s deadline and the stale window; **`verify/__tests__/cache.test.ts`** the cache's stale-while-revalidate, stale-if-error and in-flight limit. **`reader/__tests__/reader-initials.test.ts`** pins the initials bytes (honorifics, escaping, hidden and missing photos, `showExpertPhoto`, the empty name).
 - **`modal/*.test.ts`**, per module: the modal element (tombstone → `markSuppressed`), the dialog view, interactions, placement, badge revalidation, and the Delivery-API verify client. `modal/own-face-modal.test.ts` puts two faces on one page and proves each control opens its own face's modal; `modal/closed-container-face.test.ts` proves a face that loads inside a closed `<details>`, tab or accordion is left alone and renders when opened (there is no runtime disclosure guard).
 - **`__tests__/readme-version.test.ts`** + **`__tests__/readme-contract.test.ts`** pin the claims in this file that rot silently: the version stamp against `package.json`, the key id, the route-example heading, and every `exports` subpath appearing under Public API.
 
@@ -750,7 +845,7 @@ published at `@certrev/cert-block/fixtures`).
 
 ## Version
 
-`1.2.0-canary.6`: see [CHANGELOG.md](./CHANGELOG.md) for the release history and the semver contract
+`1.2.0`: see [CHANGELOG.md](./CHANGELOG.md) for the release history and the semver contract
 (patch/minor never change the rendered cert output or break a compiling integration). Publishes
 **publicly** to npm as `@certrev/cert-block` (`publishConfig.access: public`) via GitHub Actions
 trusted publishing (OIDC); the internal `@certrev` GitHub-Packages channel mirrors it.

package/dist/builder/card-reader-css.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The reader stylesheet as the Builder card inlines it (1.2.0): `READER_CSS` without its remote `@font-face` rules.
+ *
+ * The portal's reader CSS loads its faces from `https://assets.certrev.com/fonts/…`. A storefront whose CSP
+ * `font-src` does not name that origin (e.l.f.'s live policy names `'self' data:` and a list of font CDNs, no
+ * CertREV origin) refuses each load and logs a violation, and the text falls back anyway. So the card ships only the
+ * `local()` fallback faces (Arial or Times New Roman under each family's metric overrides), which need no CSP at all:
+ * the face looks the same as it does on a page that blocks the remote fonts, with nothing refused. The portal and the
+ * Shopify reader keep `READER_CSS` unchanged.
+ *
+ * INTERNAL: not on the package `exports` map.
+ */
+export declare const CARD_READER_CSS: string;
+//# sourceMappingURL=card-reader-css.d.ts.map

package/dist/builder/card-reader-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-reader-css.d.ts","sourceRoot":"","sources":["../../src/builder/card-reader-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAOH,eAAO,MAAM,eAAe,QAA2C,CAAA"}

package/dist/builder/card-reader-css.js

@@ -0,0 +1,17 @@
+/**
+ * The reader stylesheet as the Builder card inlines it (1.2.0): `READER_CSS` without its remote `@font-face` rules.
+ *
+ * The portal's reader CSS loads its faces from `https://assets.certrev.com/fonts/…`. A storefront whose CSP
+ * `font-src` does not name that origin (e.l.f.'s live policy names `'self' data:` and a list of font CDNs, no
+ * CertREV origin) refuses each load and logs a violation, and the text falls back anyway. So the card ships only the
+ * `local()` fallback faces (Arial or Times New Roman under each family's metric overrides), which need no CSP at all:
+ * the face looks the same as it does on a page that blocks the remote fonts, with nothing refused. The portal and the
+ * Shopify reader keep `READER_CSS` unchanged.
+ *
+ * INTERNAL: not on the package `exports` map.
+ */
+import { READER_CSS } from '../reader/reader-css.generated.js';
+/** One `@font-face { … }` rule whose body has a `url(`; the reader CSS has no nested braces inside a face rule. */
+const REMOTE_FONT_FACE = /@font-face\s*\{[^{}]*\burl\([^{}]*\}\s*/g;
+export const CARD_READER_CSS = READER_CSS.replace(REMOTE_FONT_FACE, '');
+//# sourceMappingURL=card-reader-css.js.map

package/dist/builder/card-reader-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-reader-css.js","sourceRoot":"","sources":["../../src/builder/card-reader-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAE9D,mHAAmH;AACnH,MAAM,gBAAgB,GAAG,0CAA0C,CAAA;AAEnE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAA"}

package/dist/builder/cert-review-card.d.ts

@@ -62,6 +62,14 @@ export interface CertReviewCardProps extends Partial<BuilderCertChromeData> {
             readonly certrevDesignPin?: unknown;
         } | null;
     } | null;
+    /**
+     * 1.2.0: opt in to a Delivery read FROM THE BROWSER for a card the server did not render (a client-side navigation,
+     * Builder's editor). Off by default: the card then never makes a request from the browser, so a brand's
+     * Content-Security-Policy needs no CertREV origin, and such a card paints the block's own options face. Turning it
+     * on needs the Delivery API's origin in the page's `connect-src`. Not a Builder input: a brand sets it in code, on
+     * a wrapper of this component.
+     */
+    clientRead?: boolean;
 }
 /**
  * The delivery marker, accepted only as `{ v: 1, baseUrl }` with `baseUrl` an `https:` ORIGIN on

package/dist/builder/cert-review-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cert-review-card.d.ts","sourceRoot":"","sources":["../../src/builder/cert-review-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"cert-review-card.d.ts","sourceRoot":"","sources":["../../src/builder/cert-review-card.tsx"],"names":[],"mappings":"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"}