@certrev/cert-block 0.1.2 → 0.2.0

package/dist/components/render-cert-block.d.ts

@@ -0,0 +1,89 @@
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * renderCertBlock — the LOCKED CertREV cert design, as an SSR-safe HTML string
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * Paints the owner-approved cert render (decision 2026-07-17) in one of three
+ * placement modes — `banner`, `sidebar`, `floating` — from RESOLVED theme tokens +
+ * the cert facts. It returns a self-contained HTML string that renders with ZERO
+ * JavaScript (the CertREV modal + the reviewer-bio accordion are progressive
+ * enhancement, wired by the shared embed script via the `data-certrev-*` hooks).
+ *
+ * WHY A STRING (not a React component): the block is emitted into storefront HTML
+ * across every render surface (Shopify Liquid, WordPress PHP, the JS engine, and
+ * this headless twin). A pure string renderer — like `renderBadgeHtml` — runs on
+ * every runtime the main entry targets (edge / Workers / server) with no React, no
+ * DOM, no Node builtins.
+ *
+ * THEMING: the reference is variable-driven. This emits the guide's CSS-var theming
+ * hooks on the ROOT element so the block is self-contained on a storefront that does
+ * NOT define the guide's `:root` — the accent (`--ba`), its auto-contrast ink
+ * (`--ba-fg`), the corner radius (`--br`), the body font (`--bf`) and surface
+ * (`--surface`) come from the resolved theme; the navy trust tints + the fixed
+ * label/serif/wordmark fonts are LOCKED literals (guide "the lock is legal, not
+ * aesthetic"). A brand themes accent / font / corners / surface; the navy chrome ink
+ * stays fixed.
+ *
+ * COMPLIANCE (LOCKED, non-negotiable): the three material disclosures always render
+ * on a CLAIM face (banner + sidebar) — the compensation cue, the byte-exact FTC
+ * scope line, and the dated credential verification, which stays GROUPED with the
+ * credential (`<name>, <credential>` → "Credential verified by CertREV" → "on
+ * <date>"). The `floating` pill makes no claim (it only labels + links to the
+ * modal), so it carries no disclosures — matching the locked reference.
+ *
+ * SECURITY: this is storefront HTML built by hand (no JSX auto-escaping), so EVERY
+ * interpolated value is escaped — `escapeHtml` for content, `escapeAttribute` for
+ * attribute values, `safeHttpUrl` for hrefs. Theme tokens are re-validated
+ * (`resolveBlockTheme`) and only ever emitted as strict hex / length / enum-stack.
+ */
+import { type ResolvedBlockTheme } from './render-def.js';
+/** The three LOCKED placement faces. */
+export type CertBlockMode = 'banner' | 'sidebar' | 'floating';
+/**
+ * The cert facts + LOCKED display strings a face renders. Facts are escaped; the
+ * three locked strings (`compensationCue`, `scopeLine`, `credentialLine`) are
+ * byte-verbatim per the CertREV Display Guide and default to the mirrored constants
+ * when a caller omits them — so the compliance baseline is exact even if unsupplied.
+ */
+export interface CertBlockFacts {
+    /** The content author (the "Written by" column). */
+    readonly authorName: string;
+    /** The author's subtitle (e.g. "Editorial"). Omitted when absent. */
+    readonly authorTitle?: string;
+    /** The reviewing expert's display name, WITHOUT the credential (e.g. "Jane Doe"). */
+    readonly reviewerName: string;
+    /** The reviewer's credential abbreviation (e.g. "MD"). Empty → name-only. */
+    readonly credential: string;
+    /** ISO instant CertREV verified the CREDENTIAL (the dated verification date). */
+    readonly credentialVerifiedAt: string;
+    /** ISO instant the article was certified (the "Certified <date>" footer). */
+    readonly certifiedAt: string;
+    /** The expert's memo (rendered as the serif blockquote). */
+    readonly memo: string;
+    /** The expert's bio (banner accordion / sidebar paragraph). Omitted when absent. */
+    readonly bio?: string;
+    /** The expert profile URL (the "Profile" link + modal `expert` hook). */
+    readonly profileUrl: string;
+    /** The certificate URL (the "Certificate" link + modal hook). */
+    readonly certificateUrl: string;
+    /** LOCKED — the compensation cue. Default: `COMPENSATED_EXPERT_CUE`. */
+    readonly compensationCue?: string;
+    /** LOCKED — the byte-exact FTC scope line. Default: `CERT_SCOPE_LINE`. */
+    readonly scopeLine?: string;
+    /** LOCKED — the verification attribution. Default: `CREDENTIAL_VERIFIED_ATTRIBUTION`. */
+    readonly credentialLine?: string;
+}
+/** The full input to `renderCertBlock`. */
+export interface RenderCertBlockInput {
+    readonly mode: CertBlockMode;
+    /** RESOLVED theme tokens (the portal bakes these). Absent/invalid tokens fall back to navy. */
+    readonly theme?: Partial<ResolvedBlockTheme>;
+    readonly facts: CertBlockFacts;
+}
+/**
+ * Render the LOCKED CertREV cert design as an SSR-safe HTML string for one of the
+ * three placement modes. Returns a self-contained `<div class="certrev-cert …">`
+ * that needs no JS to render (the modal + bio accordion progressively enhance).
+ */
+export declare function renderCertBlock(input: RenderCertBlockInput): string;
+//# sourceMappingURL=render-cert-block.d.ts.map

package/dist/components/render-cert-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-cert-block.d.ts","sourceRoot":"","sources":["../../src/components/render-cert-block.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAIH,OAAO,EAMN,KAAK,kBAAkB,EAEvB,MAAM,iBAAiB,CAAA;AAExB,wCAAwC;AACxC,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7D;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC9B,oDAAoD;IACpD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,qEAAqE;IACrE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,qFAAqF;IACrF,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,iFAAiF;IACjF,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAA;IACrC,6EAA6E;IAC7E,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,4DAA4D;IAC5D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,oFAAoF;IACpF,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,yEAAyE;IACzE,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,iEAAiE;IACjE,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,0EAA0E;IAC1E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,yFAAyF;IACzF,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAChC;AAED,2CAA2C;AAC3C,MAAM,WAAW,oBAAoB;IACpC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAA;IAC5B,+FAA+F;IAC/F,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA;IAC5C,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAA;CAC9B;AAmSD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM,CAWnE"}

package/dist/components/render-cert-block.js

@@ -0,0 +1,282 @@
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * renderCertBlock — the LOCKED CertREV cert design, as an SSR-safe HTML string
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * Paints the owner-approved cert render (decision 2026-07-17) in one of three
+ * placement modes — `banner`, `sidebar`, `floating` — from RESOLVED theme tokens +
+ * the cert facts. It returns a self-contained HTML string that renders with ZERO
+ * JavaScript (the CertREV modal + the reviewer-bio accordion are progressive
+ * enhancement, wired by the shared embed script via the `data-certrev-*` hooks).
+ *
+ * WHY A STRING (not a React component): the block is emitted into storefront HTML
+ * across every render surface (Shopify Liquid, WordPress PHP, the JS engine, and
+ * this headless twin). A pure string renderer — like `renderBadgeHtml` — runs on
+ * every runtime the main entry targets (edge / Workers / server) with no React, no
+ * DOM, no Node builtins.
+ *
+ * THEMING: the reference is variable-driven. This emits the guide's CSS-var theming
+ * hooks on the ROOT element so the block is self-contained on a storefront that does
+ * NOT define the guide's `:root` — the accent (`--ba`), its auto-contrast ink
+ * (`--ba-fg`), the corner radius (`--br`), the body font (`--bf`) and surface
+ * (`--surface`) come from the resolved theme; the navy trust tints + the fixed
+ * label/serif/wordmark fonts are LOCKED literals (guide "the lock is legal, not
+ * aesthetic"). A brand themes accent / font / corners / surface; the navy chrome ink
+ * stays fixed.
+ *
+ * COMPLIANCE (LOCKED, non-negotiable): the three material disclosures always render
+ * on a CLAIM face (banner + sidebar) — the compensation cue, the byte-exact FTC
+ * scope line, and the dated credential verification, which stays GROUPED with the
+ * credential (`<name>, <credential>` → "Credential verified by CertREV" → "on
+ * <date>"). The `floating` pill makes no claim (it only labels + links to the
+ * modal), so it carries no disclosures — matching the locked reference.
+ *
+ * SECURITY: this is storefront HTML built by hand (no JSX auto-escaping), so EVERY
+ * interpolated value is escaped — `escapeHtml` for content, `escapeAttribute` for
+ * attribute values, `safeHttpUrl` for hrefs. Theme tokens are re-validated
+ * (`resolveBlockTheme`) and only ever emitted as strict hex / length / enum-stack.
+ */
+import { escapeAttribute, escapeHtml, safeHttpUrl } from './escape.js';
+import { formatDate } from './format.js';
+import { CERT_SCOPE_LINE, CERT_STRINGS_VERSION, COMPENSATED_EXPERT_CUE, CREDENTIAL_VERIFIED_ATTRIBUTION, RENDER_BLOCK_FONT_STACKS, resolveBlockTheme, } from './render-def.js';
+// ─────────────────────────────────────────────────────────────────────────────
+// The CertREV logo — the fixed 4-chevron mark (owner decision 2026-07-17: the logo
+// IS permitted on the article face). Path data is byte-exact to the locked reference.
+// ─────────────────────────────────────────────────────────────────────────────
+const LOGO_PATHS = [
+    '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 4-chevron CertREV mark at `size`px, filled `fill` (a controlled literal). The
+ * navy/pill HEADERS pass `currentColor` so the mark tracks the header text's accent
+ * foreground ink (`--ba-fg`) — white on the navy default, and the dark auto-contrast
+ * ink on a light themed accent (so it never goes white-on-light). The memo credit
+ * passes the fixed navy `#0a1b3f` (it sits on the white surface).
+ */
+function logo(size, fill) {
+    return (`<svg viewBox="0 0 375 375" width="${size}" height="${size}" style="flex-shrink:0" aria-label="CertREV">` +
+        LOGO_PATHS.map((d) => `<path fill="${fill}" d="${d}"></path>`).join('') +
+        `</svg>`);
+}
+/** The bio-accordion caret (progressive-enhancement affordance). */
+const CARET = `<span class="certrev-cert__caret" style="display:inline-flex;vertical-align:middle;margin-left:4px;color:var(--navy-35);transition:transform .18s ease-out;">` +
+    `<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span>`;
+// ─────────────────────────────────────────────────────────────────────────────
+// Small pure helpers
+// ─────────────────────────────────────────────────────────────────────────────
+/** "Jane Doe" → "JD"; "The Editorial Team" → "TE" (first letter of the first two words). */
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    const chars = parts
+        .slice(0, 2)
+        .map((p) => p[0] ?? '')
+        .join('');
+    return (chars || '?').toUpperCase();
+}
+/** The first name token (for "View Jane's profile"). */
+function firstNameOf(name) {
+    const first = name.trim().split(/\s+/)[0];
+    return first || name.trim();
+}
+/**
+ * A LOCKED display string: use the caller's value ONLY when it is a non-blank
+ * string, else the byte-verbatim constant. The three compliance strings
+ * (compensation cue, scope line, credential attribution) are undroppable — an
+ * omitted OR empty/whitespace override must never blank the disclosure.
+ */
+function locked(supplied, constant) {
+    return supplied?.trim() ? supplied : constant;
+}
+/** A round avatar tile with the given initials. */
+function avatar(text, size, fontSize) {
+    return (`<div style="width:${size}px;height:${size}px;border-radius:50%;background:var(--stone);color:var(--navy-55);` +
+        `display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:${fontSize}px;flex-shrink:0;">` +
+        `${escapeHtml(text)}</div>`);
+}
+/** "Jane Doe, MD" (or just the name when there is no credential) — escaped. */
+function nameWithCredential(name, credential) {
+    const n = escapeHtml(name);
+    return credential ? `${n}, ${escapeHtml(credential)}` : n;
+}
+/** The reviewer profile link (carries the modal `expert` hook + a real href fallback). */
+function profileLink(url, inner, style) {
+    const href = safeHttpUrl(url) ?? '#';
+    return `<a href="${escapeAttribute(href)}" data-certrev-modal-open="expert" rel="noopener" style="${style}">${inner}</a>`;
+}
+/** The certificate link (carries the modal hook + a real href fallback). */
+function certificateLink(url, inner, style) {
+    const href = safeHttpUrl(url) ?? '#';
+    return `<a href="${escapeAttribute(href)}" data-certrev-modal-open rel="noopener" style="${style}">${inner}</a>`;
+}
+/**
+ * The GROUPED dated credential verification (LOCKED requirement): the credentialed
+ * name, then the attribution line, then "on <date>" — one block, order preserved.
+ * `withAccordion` adds the bio caret + hidden bio (banner) as progressive enhancement.
+ */
+function verificationBlock(facts, withAccordion) {
+    const credentialLine = locked(facts.credentialLine, CREDENTIAL_VERIFIED_ATTRIBUTION);
+    const verified = formatDate(facts.credentialVerifiedAt) ?? escapeHtml(facts.credentialVerifiedAt);
+    const caret = withAccordion && facts.bio ? CARET : '';
+    const nameSize = withAccordion ? '15px' : '16px';
+    const muteSize = withAccordion ? '13px' : '12.5px';
+    const bio = withAccordion && facts.bio
+        ? `<div class="certrev-cert__bio" hidden style="display:none;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--navy-75);">${escapeHtml(facts.bio)}</div>`
+        : '';
+    return (`<div>` +
+        `<div style="font-size:${nameSize};font-weight:700;">${nameWithCredential(facts.reviewerName, facts.credential)}${caret}</div>` +
+        `<div style="font-size:${muteSize};color:var(--navy-55);line-height:1.45;margin-top:3px;">${escapeHtml(credentialLine)}</div>` +
+        `<div style="font-size:${muteSize};color:var(--navy-55);line-height:1.35;">on ${verified}</div>` +
+        bio +
+        `</div>`);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// The root wrapper — sets the guide's CSS vars so the block is self-contained
+// ─────────────────────────────────────────────────────────────────────────────
+function rootStyle(theme) {
+    // Data-bearing theme tokens are already strict-validated (hex / length / literal
+    // ink); the font is a controlled enum → stack literal. The navy tints + fixed
+    // label/serif/wordmark fonts are LOCKED literals.
+    return [
+        `--ba:${theme.accentColor}`,
+        `--ba-fg:${theme.accentFg}`,
+        `--br:${theme.cornerRadius}`,
+        `--bf:${RENDER_BLOCK_FONT_STACKS[theme.fontSlot]}`,
+        `--surface:${theme.surface}`,
+        `--navy:#0a1b3f`,
+        `--navy-06:rgba(10,27,63,.06)`,
+        `--navy-10:rgba(10,27,63,.10)`,
+        `--navy-35:rgba(10,27,63,.35)`,
+        `--navy-55:rgba(10,27,63,.55)`,
+        `--navy-75:rgba(10,27,63,.75)`,
+        `--stone:#ece9e1`,
+        `--font-mono:${RENDER_BLOCK_FONT_STACKS.mono}`,
+        `--font-serif:${RENDER_BLOCK_FONT_STACKS.serif}`,
+        `--font-wordmark:${RENDER_BLOCK_FONT_STACKS.grotesk}`,
+        `font-family:var(--bf)`,
+        `color:var(--navy)`,
+    ].join(';');
+}
+function root(mode, theme, inner) {
+    return (`<div class="certrev-cert certrev-cert--${mode}" data-certrev-mode="${mode}" ` +
+        `data-certrev-strings-version="${CERT_STRINGS_VERSION}" style="${rootStyle(theme)}">${inner}</div>`);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Mode 1 — BANNER: a certification header card + a separate expert-memo card
+// ─────────────────────────────────────────────────────────────────────────────
+function bannerHeaderCard(facts) {
+    const compensationCue = locked(facts.compensationCue, COMPENSATED_EXPERT_CUE);
+    const certified = formatDate(facts.certifiedAt) ?? escapeHtml(facts.certifiedAt);
+    const subtitle = facts.authorTitle
+        ? `<div style="font-size:13px;color:var(--navy-55);">${escapeHtml(facts.authorTitle)}</div>`
+        : '';
+    return (`<div style="border:1px solid var(--navy-10);border-radius:calc(var(--br,14px) * 0.7);overflow:hidden;font-family:var(--bf);">` +
+        // navy header
+        `<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;background:var(--ba,#0a1b3f);color:var(--ba-fg,#fff);">` +
+        `<span style="display:inline-flex;align-items:center;gap:11px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;">${logo(20, 'currentColor')} Expert reviewed</span>` +
+        `</div>` +
+        `<div style="padding:22px 24px 18px;">` +
+        `<div style="display:grid;grid-template-columns:1fr 1fr;gap:22px;">` +
+        // written by
+        `<div>` +
+        `<div style="font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-35);margin-bottom:11px;">Written by</div>` +
+        `<div style="display:flex;align-items:center;gap:12px;">${avatar(initials(facts.authorName), 42, 12)}` +
+        `<div><div style="font-size:15px;font-weight:700;">${escapeHtml(facts.authorName)}</div>${subtitle}</div></div>` +
+        `</div>` +
+        // reviewed by
+        `<div>` +
+        `<div style="font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-35);margin-bottom:11px;">Reviewed by</div>` +
+        `<div class="certrev-cert__rev" role="button" tabindex="0" aria-expanded="false" data-certrev-bio-toggle aria-label="Read more about ${escapeAttribute(facts.reviewerName)}" style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;border-radius:8px;transition:opacity .15s;">` +
+        `${avatar(initials(facts.reviewerName), 42, 12)}${verificationBlock(facts, true)}` +
+        `</div>` +
+        `</div>` +
+        `</div>` +
+        // hairline + mono footer
+        `<div style="height:1px;background:var(--navy-10);margin:16px 0 14px;"></div>` +
+        `<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-55);">` +
+        `<span>Certified <span style="color:var(--navy);margin-left:6px;">${certified}</span></span>` +
+        `<span>${escapeHtml(compensationCue)}</span>` +
+        `</div>` +
+        `</div>` +
+        `</div>`);
+}
+function bannerMemoCard(facts) {
+    const scopeLine = locked(facts.scopeLine, CERT_SCOPE_LINE);
+    const credTail = facts.credential
+        ? `<span style="color:var(--navy-55);">, ${escapeHtml(facts.credential)}</span>`
+        : '';
+    const first = firstNameOf(facts.reviewerName);
+    return (`<div style="border:1px solid var(--navy-10);border-radius:calc(var(--br,14px) * 0.7);padding:24px;font-family:var(--bf);">` +
+        `<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;">${avatar(initials(facts.reviewerName), 46, 13)}` +
+        `<div style="flex:1;min-width:0;">` +
+        `<div style="font-size:16px;margin-bottom:10px;"><span style="font-weight:700;">${escapeHtml(facts.reviewerName)}</span>${credTail}</div>` +
+        `<blockquote style="margin:0;padding-left:18px;border-left:3px solid var(--ba,#0a1b3f);font-family:var(--font-serif);font-style:italic;font-size:16px;line-height:1.55;color:var(--navy-75);">${escapeHtml(facts.memo)}</blockquote>` +
+        `<div style="display:flex;gap:22px;margin-top:16px;">` +
+        profileLink(facts.profileUrl, `View ${escapeHtml(first)}'s profile`, 'font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;') +
+        certificateLink(facts.certificateUrl, 'View certificate', 'font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;') +
+        `</div>` +
+        `</div>` +
+        `</div>` +
+        `<div style="height:1px;background:var(--navy-10);margin:18px 0 14px;"></div>` +
+        `<div style="display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--navy-75);">${logo(18, '#0a1b3f')} Verified by <span style="font-family:var(--font-wordmark);font-weight:800;">CertREV</span></div>` +
+        `<div style="font-size:13px;color:var(--navy-55);margin-top:8px;line-height:1.5;">${escapeHtml(scopeLine)}</div>` +
+        `</div>`);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Mode 2 — SIDEBAR: a reviewer card pinned beside the article body
+// ─────────────────────────────────────────────────────────────────────────────
+function sidebarCard(facts) {
+    const compensationCue = locked(facts.compensationCue, COMPENSATED_EXPERT_CUE);
+    const scopeLine = locked(facts.scopeLine, CERT_SCOPE_LINE);
+    const bioPara = facts.bio
+        ? `<p style="font-size:14px;line-height:1.55;color:var(--navy-75);margin:16px 0 0;">${escapeHtml(facts.bio)}</p>`
+        : '';
+    return (`<div style="background:var(--surface);border:1px solid var(--navy-10);border-radius:var(--br,14px);overflow:hidden;box-shadow:0 4px 18px var(--navy-06);font-family:var(--bf);">` +
+        `<div style="display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;background:var(--ba,#0a1b3f);color:var(--ba-fg,#fff);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;">${logo(18, 'currentColor')} Expert reviewed</div>` +
+        `<div style="padding:20px;">` +
+        `<div style="display:flex;align-items:flex-start;gap:13px;">${avatar(initials(facts.reviewerName), 46, 13)}${verificationBlock(facts, false)}</div>` +
+        bioPara +
+        `<blockquote style="margin:16px 0 0;padding-left:16px;border-left:3px solid var(--ba,#0a1b3f);font-family:var(--font-serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--navy-75);">${escapeHtml(facts.memo)}</blockquote>` +
+        `<div style="font-size:12.5px;line-height:1.5;color:var(--navy-55);margin-top:16px;"><span style="font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;">${escapeHtml(compensationCue)}</span> · ${escapeHtml(scopeLine)}</div>` +
+        `</div>` +
+        `<div style="display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--navy-10);">` +
+        profileLink(facts.profileUrl, 'View Profile', 'text-align:center;padding:14px;font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;border-right:1px solid var(--navy-10);cursor:pointer;') +
+        certificateLink(facts.certificateUrl, 'View Certificate', 'text-align:center;padding:14px;font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;') +
+        `</div>` +
+        `</div>`);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Mode 3 — FLOATING: a compact pinned pill (a modal pointer, NOT a claim face)
+// ─────────────────────────────────────────────────────────────────────────────
+function floatingPill(facts) {
+    return (`<div class="certrev-cert__pill" style="display:inline-flex;align-items:center;gap:14px;padding:12px 22px;border-radius:999px;background:var(--ba,#0a1b3f);color:var(--ba-fg,#fff);box-shadow:0 10px 26px var(--navy-10);">` +
+        `<span style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75;">Expert reviewed:</span>` +
+        profileLink(facts.profileUrl, 'Profile', 'font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer;') +
+        `<span style="opacity:.5;">·</span>` +
+        certificateLink(facts.certificateUrl, 'Certificate', 'font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer;') +
+        `</div>`);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Entry point
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Render the LOCKED CertREV cert design as an SSR-safe HTML string for one of the
+ * three placement modes. Returns a self-contained `<div class="certrev-cert …">`
+ * that needs no JS to render (the modal + bio accordion progressively enhance).
+ */
+export function renderCertBlock(input) {
+    const theme = resolveBlockTheme(input.theme);
+    const { facts, mode } = input;
+    switch (mode) {
+        case 'banner':
+            return root(mode, theme, bannerHeaderCard(facts) + bannerMemoCard(facts));
+        case 'sidebar':
+            return root(mode, theme, sidebarCard(facts));
+        case 'floating':
+            return root(mode, theme, floatingPill(facts));
+    }
+}
+//# sourceMappingURL=render-cert-block.js.map

package/dist/components/render-cert-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-cert-block.js","sourceRoot":"","sources":["../../src/components/render-cert-block.ts"],"names":[],"mappings":"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"}

package/dist/components/render-def.d.ts

@@ -0,0 +1,178 @@
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Design-guide RENDER-DEF support (the themeable-token + subtractive-visibility
+ * layer) + the two always-on COMPLIANCE strings.
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * WS6 of the unified cert-render / design-guide build
+ * (~/.claude-account-m/plans/smooth-meandering-graham.md). This is the Builder /
+ * headless projection twin's half of the "law-as-code" contract: cert-block is one
+ * of the four render surfaces (Shopify Liquid, WordPress PHP, JS engine, and this)
+ * that must paint the SAME compliant, optionally-themed badge from the SAME facts.
+ *
+ * cert-block is a self-contained npm package — it does NOT import the portal's
+ * `@/lib/design-guide` enforcement core. Instead it mirrors, at the RENDER edge,
+ * the small subset that shape the projection carries:
+ *
+ *   1. The four allowlisted THEMEABLE tokens `{accentColor, surface, cornerRadius,
+ *      fontSlot}`, emitted as the exact `--certrev-*` CSS custom properties the
+ *      Shopify/WordPress engines emit and the WS11 crawl monitor asserts
+ *      (`--certrev-accent` / `--certrev-surface` / `--certrev-radius` /
+ *      `--certrev-font`). Each is RE-VALIDATED here at render time (defense in
+ *      depth over the write-path fail-closed gate) against the SAME strict
+ *      validators the portal's `tokens.ts` uses, and an invalid value is DROPPED
+ *      (falls back to the preset default) — never emitted. `fontSlot` resolves to
+ *      a FIXED font STACK (never a free-form family — the CSS-injection surface).
+ *   2. SUBTRACTIVE field-visibility: a brand may only HIDE preset-placed,
+ *      brand-toggleable fields (`reviewerPhoto`, `memo`) — never add a field the
+ *      preset doesn't place. Locked fields (cue, scope, links) can never be hidden.
+ *   3. The two always-on COMPLIANCE strings a claim-bearing face carries on EVERY
+ *      rung (design guide §3): the compensation cue and the FTC scope line, both
+ *      byte-verbatim (the scope line's curly apostrophe U+2019 is load-bearing).
+ *
+ * FAIL-SAFE: when NO render-def is supplied the THEMING layer contributes nothing
+ * — no extra CSS vars, no `data-certrev-def-version`, no visibility subtraction —
+ * so the badge's theme output is byte-identical to the un-themed default (the
+ * program's no-op / merge-safety device). The compensation cue + scope line + the
+ * `data-certrev-strings-version` stamp are the compliance BASELINE and land on
+ * every claim face regardless of a def (matching the Shopify/WP engine fix).
+ *
+ * PURITY: no DOM, no Node builtins, no React — safe on every runtime the main
+ * entry targets (edge / Workers / server / client).
+ */
+/** The font ENUM. Resolves to a FIXED slot stack — never a free-form family. */
+export declare const FONT_SLOTS: readonly ["sans", "serif", "system"];
+export type FontSlot = (typeof FONT_SLOTS)[number];
+/**
+ * The `fontSlot` → fixed font-stack literal. BYTE-IDENTICAL to the Shopify Liquid
+ * engine's stacks (`shopify/extensions/certrev-schema/snippets/certrev-badge.liquid`
+ * — the only font families the twins use), so a themed brand's Builder projection
+ * paints the same typography as its Shopify face. A raw family string in a
+ * `font-family` CSS var is a CSS-injection surface AND breaks the "CertREV hosts no
+ * fonts" invariant, so the enum → stack indirection is the security boundary.
+ */
+export declare const FONT_STACKS: Readonly<Record<FontSlot, string>>;
+/** A fully-resolved themeable token set (a brand overrides a subset of these). */
+export interface CertThemeTokens {
+    readonly accentColor: string;
+    readonly surface: string;
+    readonly cornerRadius: string;
+    readonly fontSlot: FontSlot;
+}
+/** The badge fields a render-def may SUBTRACTIVELY hide (brand-toggleable, free). */
+export declare const HIDEABLE_FIELDS: readonly ["reviewerPhoto", "memo"];
+export type BadgeVisibilityFieldId = (typeof HIDEABLE_FIELDS)[number];
+/**
+ * A brand render-def as it reaches the render edge — the RESOLVED projection the
+ * portal's `getActiveRenderDef` → cert-chrome/builder-export path carries (mirrors
+ * the Shopify `certrev.render_def` metafield `{v, preset, rung, tokens, hidden}`;
+ * cert-block needs only the theming inputs). Every field is OPTIONAL: an absent
+ * `renderDef`, an absent token, or an invalid token all fall back to the preset
+ * default (fail-safe).
+ */
+export interface CertRenderDef {
+    /** Partial themeable-token overrides. Absent/invalid keys use the preset default. */
+    readonly tokens?: Partial<CertThemeTokens>;
+    /** SUBTRACTIVE hide-set — the ONLY visibility a brand can express. */
+    readonly hidden?: readonly BadgeVisibilityFieldId[];
+    /** Monotonic per-brand def version, stamped as `data-certrev-def-version`. */
+    readonly version?: number;
+}
+/** `accentColor` / `surface` — an opaque hex (surface opacity is FORCED for contrast soundness). */
+export declare function isOpaqueHexColor(value: string): boolean;
+/** `cornerRadius` — a single unit-bearing CSS length (or bare `0`). */
+export declare function isCornerRadius(value: string): boolean;
+/** Is `value` a known font slot? */
+export declare function isFontSlot(value: string): value is FontSlot;
+/**
+ * The compensation cue (design guide "line A"). Rendered beside the reviewer on
+ * EVERY claim-bearing face. Byte-exact; the tag-stripped visible text of the cue
+ * markup must equal this constant. Mirrors portal `COMPENSATED_EXPERT_CUE`.
+ */
+export declare const COMPENSATED_EXPERT_CUE = "Compensated expert";
+/**
+ * The FTC scope disclaimer (design guide "line B"). Byte-verbatim; the curly
+ * apostrophe (U+2019) in "article’s" is LOAD-BEARING (the MSA §3 references this
+ * copy in the present tense). Mirrors portal `FTC_DISCLOSURE_LINE` / `CERT_SCOPE_LINE`.
+ */
+export declare const CERT_SCOPE_LINE = "Independent editorial review of this article\u2019s text and sources. Not a product endorsement, nor medical advice.";
+/**
+ * The delivered display-string EDITION, stamped as `data-certrev-strings-version`
+ * so the crawl monitor can assert which verbatim strings a live face should carry.
+ * MUST equal the portal's `CERT_DISPLAY_STRINGS_VERSION` (display-strings.ts).
+ * Bump in lockstep whenever the cue or scope line changes.
+ */
+export declare const CERT_STRINGS_VERSION = "2026-07";
+/**
+ * The validated theme a render-def resolves to. Every field is present ONLY when
+ * the def supplied a VALID value for it (an absent/invalid token is dropped so the
+ * preset default shows through). `accent` is surfaced for the accent-precedence
+ * chain in `resolveDisplay`; `surface`/`cornerRadius`/`fontStack` have no legacy
+ * display equivalent and are emitted ONLY on a themed face.
+ */
+export interface ResolvedRenderTheme {
+    readonly accent?: string;
+    readonly surface?: string;
+    readonly cornerRadius?: string;
+    readonly fontStack?: string;
+    readonly version?: number;
+}
+/** Resolve + re-validate a render-def's tokens. Invalid values are DROPPED (fail-safe). */
+export declare function resolveRenderTheme(def?: CertRenderDef): ResolvedRenderTheme;
+/** Is a brand-toggleable field hidden by this render-def's subtractive hide-set? */
+export declare function isFieldHidden(def: CertRenderDef | undefined, id: BadgeVisibilityFieldId): boolean;
+/**
+ * The full portal font-slot enum (mirrors portal `src/lib/design-guide/tokens.ts`
+ * `FONT_SLOTS`). `grotesk` ⇐ the guide's wordmark slot; `mono` ⇐ the label slot.
+ */
+export declare const RENDER_BLOCK_FONT_SLOTS: readonly ["sans", "serif", "system", "grotesk", "mono"];
+export type RenderBlockFontSlot = (typeof RENDER_BLOCK_FONT_SLOTS)[number];
+/**
+ * The `RenderBlockFontSlot` → fixed family stack. BYTE-IDENTICAL to the portal's
+ * `FONT_SLOT_STACKS` (the guide's stacks — the cert-render parity anchor across the
+ * twins). Resolved family strings, never `var(...)` indirections. A raw family in a
+ * `font-family` CSS var is a CSS-injection surface, so the enum → stack indirection
+ * stays the security boundary (a caller can only pass an enum member).
+ */
+export declare const RENDER_BLOCK_FONT_STACKS: Readonly<Record<RenderBlockFontSlot, string>>;
+/** Is `value` a known render-block font slot? */
+export declare function isRenderBlockFontSlot(value: string): value is RenderBlockFontSlot;
+/**
+ * The resolved themeable-token set `renderCertBlock` paints — the render-edge mirror
+ * of the portal `ResolvedRenderDef` theme half (`tokens` ⊕ the precomputed
+ * `accentFg`). `accentFg` is the ink painted over the accent fill — the portal's
+ * guide-faithful Rec.601 auto-contrast pick (`#141414` or `#ffffff`), carried
+ * pre-computed so this dumb twin never recomputes it.
+ */
+export interface ResolvedBlockTheme {
+    readonly accentColor: string;
+    readonly surface: string;
+    readonly cornerRadius: string;
+    readonly fontSlot: RenderBlockFontSlot;
+    readonly accentFg: '#141414' | '#ffffff';
+}
+/** The CertREV navy default theme (the un-themed face — matches the locked reference `:root`). */
+export declare const DEFAULT_BLOCK_THEME: ResolvedBlockTheme;
+/**
+ * Re-validate a (possibly partial / untrusted) block theme at the render edge —
+ * defense in depth over the portal's fail-closed bake. Any invalid token is DROPPED
+ * to the navy default (never emitted into storefront CSS). Mirrors the
+ * `resolveRenderTheme` fail-safe posture.
+ */
+export declare function resolveBlockTheme(theme?: Partial<ResolvedBlockTheme>): ResolvedBlockTheme;
+/**
+ * The locked verification ATTRIBUTION phrase, rendered grouped with the dated
+ * verification (`<name>, <credential>` → this → `on <date>`). Byte-exact; mirrors the
+ * fixed clause inside portal `buildBylineCredentialed` ("Credential verified by
+ * CertREV on …"). Never re-word without contract + legal re-review.
+ */
+export declare const CREDENTIAL_VERIFIED_ATTRIBUTION = "Credential verified by CertREV";
+/**
+ * The extra `--certrev-*` custom-property declarations a THEMED face emits, in the
+ * engine's order (surface → radius → font; accent is emitted separately so the
+ * no-def output stays byte-identical). Returns `[]` when no theme is present, so
+ * the un-themed badge emits ZERO extra vars. The data-bearing values are already
+ * strict-validated; the font is a controlled literal stack.
+ */
+export declare function themeCssVarDeclarations(theme: ResolvedRenderTheme): ReadonlyArray<readonly [string, string]>;
+//# sourceMappingURL=render-def.d.ts.map

package/dist/components/render-def.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-def.d.ts","sourceRoot":"","sources":["../../src/components/render-def.ts"],"names":[],"mappings":"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"}