@certrev/cert-block 0.1.3 → 0.2.0

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

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renderCertBlock — locked-design snapshots > banner (navy default) matches the locked snapshot 1`] = `"<div class="certrev-cert certrev-cert--banner" data-certrev-mode="banner" data-certrev-strings-version="2026-07" style="--ba:#0a1b3f;--ba-fg:#ffffff;--br:14px;--bf:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;--surface:#ffffff;--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:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;--font-wordmark:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;font-family:var(--bf);color:var(--navy)"><div style="border:1px solid var(--navy-10);border-radius:calc(var(--br,14px) * 0.7);overflow:hidden;font-family:var(--bf);"><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;"><svg viewBox="0 0 375 375" width="20" height="20" style="flex-shrink:0" aria-label="CertREV"><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path></svg> Expert reviewed</span></div><div style="padding:22px 24px 18px;"><div style="display:grid;grid-template-columns:1fr 1fr;gap:22px;"><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;"><div style="width:42px;height:42px;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:12px;flex-shrink:0;">TE</div><div><div style="font-size:15px;font-weight:700;">The Editorial Team</div><div style="font-size:13px;color:var(--navy-55);">Editorial</div></div></div></div><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 Jane Doe" style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;border-radius:8px;transition:opacity .15s;"><div style="width:42px;height:42px;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:12px;flex-shrink:0;">JD</div><div><div style="font-size:15px;font-weight:700;">Jane Doe, MD<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></div><div style="font-size:13px;color:var(--navy-55);line-height:1.45;margin-top:3px;">Credential verified by CertREV</div><div style="font-size:13px;color:var(--navy-55);line-height:1.35;">on Apr 14, 2026</div><div class="certrev-cert__bio" hidden style="display:none;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--navy-75);">Board-certified dermatologist in San Francisco specializing in photoprotection, skin-cancer prevention, and evidence-based skincare, with fifteen years of clinical practice.</div></div></div></div></div><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;">Apr 14, 2026</span></span><span>Compensated expert</span></div></div></div><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;"><div style="width:46px;height:46px;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:13px;flex-shrink:0;">JD</div><div style="flex:1;min-width:0;"><div style="font-size:16px;margin-bottom:10px;"><span style="font-weight:700;">Jane Doe</span><span style="color:var(--navy-55);">, MD</span></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);">Patients ask me almost every week whether the SPF in their foundation is enough on its own. Treat makeup with SPF as a helpful last layer, not the base of your routine.</blockquote><div style="display:flex;gap:22px;margin-top:16px;"><a href="https://certrev.com/expert/sample" data-certrev-modal-open="expert" rel="noopener" style="font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;">View Jane's profile</a><a href="https://certrev.com/verify/sample" data-certrev-modal-open rel="noopener" style="font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;">View certificate</a></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);"><svg viewBox="0 0 375 375" width="18" height="18" style="flex-shrink:0" aria-label="CertREV"><path fill="#0a1b3f" d="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"></path><path fill="#0a1b3f" d="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"></path><path fill="#0a1b3f" d="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"></path><path fill="#0a1b3f" d="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"></path></svg> 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;">Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.</div></div></div>"`;
+
+exports[`renderCertBlock — locked-design snapshots > banner (themed, non-navy accent) matches the locked snapshot 1`] = `"<div class="certrev-cert certrev-cert--banner" data-certrev-mode="banner" data-certrev-strings-version="2026-07" style="--ba:#E8603C;--ba-fg:#141414;--br:22px;--bf:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;--surface:#faf8f4;--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:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;--font-wordmark:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;font-family:var(--bf);color:var(--navy)"><div style="border:1px solid var(--navy-10);border-radius:calc(var(--br,14px) * 0.7);overflow:hidden;font-family:var(--bf);"><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;"><svg viewBox="0 0 375 375" width="20" height="20" style="flex-shrink:0" aria-label="CertREV"><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path></svg> Expert reviewed</span></div><div style="padding:22px 24px 18px;"><div style="display:grid;grid-template-columns:1fr 1fr;gap:22px;"><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;"><div style="width:42px;height:42px;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:12px;flex-shrink:0;">TE</div><div><div style="font-size:15px;font-weight:700;">The Editorial Team</div><div style="font-size:13px;color:var(--navy-55);">Editorial</div></div></div></div><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 Jane Doe" style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;border-radius:8px;transition:opacity .15s;"><div style="width:42px;height:42px;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:12px;flex-shrink:0;">JD</div><div><div style="font-size:15px;font-weight:700;">Jane Doe, MD<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></div><div style="font-size:13px;color:var(--navy-55);line-height:1.45;margin-top:3px;">Credential verified by CertREV</div><div style="font-size:13px;color:var(--navy-55);line-height:1.35;">on Apr 14, 2026</div><div class="certrev-cert__bio" hidden style="display:none;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--navy-75);">Board-certified dermatologist in San Francisco specializing in photoprotection, skin-cancer prevention, and evidence-based skincare, with fifteen years of clinical practice.</div></div></div></div></div><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;">Apr 14, 2026</span></span><span>Compensated expert</span></div></div></div><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;"><div style="width:46px;height:46px;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:13px;flex-shrink:0;">JD</div><div style="flex:1;min-width:0;"><div style="font-size:16px;margin-bottom:10px;"><span style="font-weight:700;">Jane Doe</span><span style="color:var(--navy-55);">, MD</span></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);">Patients ask me almost every week whether the SPF in their foundation is enough on its own. Treat makeup with SPF as a helpful last layer, not the base of your routine.</blockquote><div style="display:flex;gap:22px;margin-top:16px;"><a href="https://certrev.com/expert/sample" data-certrev-modal-open="expert" rel="noopener" style="font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;">View Jane's profile</a><a href="https://certrev.com/verify/sample" data-certrev-modal-open rel="noopener" style="font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;">View certificate</a></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);"><svg viewBox="0 0 375 375" width="18" height="18" style="flex-shrink:0" aria-label="CertREV"><path fill="#0a1b3f" d="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"></path><path fill="#0a1b3f" d="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"></path><path fill="#0a1b3f" d="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"></path><path fill="#0a1b3f" d="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"></path></svg> 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;">Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.</div></div></div>"`;
+
+exports[`renderCertBlock — locked-design snapshots > floating (navy default) matches the locked snapshot 1`] = `"<div class="certrev-cert certrev-cert--floating" data-certrev-mode="floating" data-certrev-strings-version="2026-07" style="--ba:#0a1b3f;--ba-fg:#ffffff;--br:14px;--bf:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;--surface:#ffffff;--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:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;--font-wordmark:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;font-family:var(--bf);color:var(--navy)"><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><a href="https://certrev.com/expert/sample" data-certrev-modal-open="expert" rel="noopener" style="font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer;">Profile</a><span style="opacity:.5;">·</span><a href="https://certrev.com/verify/sample" data-certrev-modal-open rel="noopener" style="font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer;">Certificate</a></div></div>"`;
+
+exports[`renderCertBlock — locked-design snapshots > floating (themed, non-navy accent) matches the locked snapshot 1`] = `"<div class="certrev-cert certrev-cert--floating" data-certrev-mode="floating" data-certrev-strings-version="2026-07" style="--ba:#E8603C;--ba-fg:#141414;--br:22px;--bf:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;--surface:#faf8f4;--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:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;--font-wordmark:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;font-family:var(--bf);color:var(--navy)"><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><a href="https://certrev.com/expert/sample" data-certrev-modal-open="expert" rel="noopener" style="font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer;">Profile</a><span style="opacity:.5;">·</span><a href="https://certrev.com/verify/sample" data-certrev-modal-open rel="noopener" style="font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer;">Certificate</a></div></div>"`;
+
+exports[`renderCertBlock — locked-design snapshots > sidebar (navy default) matches the locked snapshot 1`] = `"<div class="certrev-cert certrev-cert--sidebar" data-certrev-mode="sidebar" data-certrev-strings-version="2026-07" style="--ba:#0a1b3f;--ba-fg:#ffffff;--br:14px;--bf:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;--surface:#ffffff;--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:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;--font-wordmark:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;font-family:var(--bf);color:var(--navy)"><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;"><svg viewBox="0 0 375 375" width="18" height="18" style="flex-shrink:0" aria-label="CertREV"><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path></svg> Expert reviewed</div><div style="padding:20px;"><div style="display:flex;align-items:flex-start;gap:13px;"><div style="width:46px;height:46px;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:13px;flex-shrink:0;">JD</div><div><div style="font-size:16px;font-weight:700;">Jane Doe, MD</div><div style="font-size:12.5px;color:var(--navy-55);line-height:1.45;margin-top:3px;">Credential verified by CertREV</div><div style="font-size:12.5px;color:var(--navy-55);line-height:1.35;">on Apr 14, 2026</div></div></div><p style="font-size:14px;line-height:1.55;color:var(--navy-75);margin:16px 0 0;">Board-certified dermatologist in San Francisco specializing in photoprotection, skin-cancer prevention, and evidence-based skincare, with fifteen years of clinical practice.</p><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);">Patients ask me almost every week whether the SPF in their foundation is enough on its own. Treat makeup with SPF as a helpful last layer, not the base of your routine.</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;">Compensated expert</span> · Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.</div></div><div style="display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--navy-10);"><a href="https://certrev.com/expert/sample" data-certrev-modal-open="expert" rel="noopener" style="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;">View Profile</a><a href="https://certrev.com/verify/sample" data-certrev-modal-open rel="noopener" style="text-align:center;padding:14px;font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;">View Certificate</a></div></div></div>"`;
+
+exports[`renderCertBlock — locked-design snapshots > sidebar (themed, non-navy accent) matches the locked snapshot 1`] = `"<div class="certrev-cert certrev-cert--sidebar" data-certrev-mode="sidebar" data-certrev-strings-version="2026-07" style="--ba:#E8603C;--ba-fg:#141414;--br:22px;--bf:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;--surface:#faf8f4;--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:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;--font-wordmark:'Plus Jakarta Sans', system-ui, Helvetica, Arial, sans-serif;font-family:var(--bf);color:var(--navy)"><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;"><svg viewBox="0 0 375 375" width="18" height="18" style="flex-shrink:0" aria-label="CertREV"><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path><path fill="currentColor" d="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"></path></svg> Expert reviewed</div><div style="padding:20px;"><div style="display:flex;align-items:flex-start;gap:13px;"><div style="width:46px;height:46px;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:13px;flex-shrink:0;">JD</div><div><div style="font-size:16px;font-weight:700;">Jane Doe, MD</div><div style="font-size:12.5px;color:var(--navy-55);line-height:1.45;margin-top:3px;">Credential verified by CertREV</div><div style="font-size:12.5px;color:var(--navy-55);line-height:1.35;">on Apr 14, 2026</div></div></div><p style="font-size:14px;line-height:1.55;color:var(--navy-75);margin:16px 0 0;">Board-certified dermatologist in San Francisco specializing in photoprotection, skin-cancer prevention, and evidence-based skincare, with fifteen years of clinical practice.</p><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);">Patients ask me almost every week whether the SPF in their foundation is enough on its own. Treat makeup with SPF as a helpful last layer, not the base of your routine.</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;">Compensated expert</span> · Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.</div></div><div style="display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--navy-10);"><a href="https://certrev.com/expert/sample" data-certrev-modal-open="expert" rel="noopener" style="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;">View Profile</a><a href="https://certrev.com/verify/sample" data-certrev-modal-open rel="noopener" style="text-align:center;padding:14px;font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;cursor:pointer;">View Certificate</a></div></div></div>"`;

package/src/__tests__/components.test.tsx

@@ -46,12 +46,27 @@ describe('<CertBadge>', () => {
 		expect(html).toContain('border-inline-start-color:#7c3aed')
 	})
 
-	it('compact style collapses to one line — no memo, no dates, no photo', () => {
+	it('compact style collapses the reviewer block — no memo, no dates, no photo', () => {
 		const html = renderToStaticMarkup(<CertBadge payload={payload} badgeStyle="compact" />)
 		expect(html).toContain('certrev-badge--compact')
 		expect(html).not.toContain('retinol claims')
 		expect(html).not.toContain('Certified')
 		expect(html).not.toContain('__photo')
+		// …but the compliance disclosures persist: a compact claim badge is still a claim face.
+		expect(html).toContain(
+			'Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.',
+		)
+	})
+
+	it('carries the always-on compliance baseline: cue + verbatim FTC scope line + strings-version stamp', () => {
+		const html = renderToStaticMarkup(<CertBadge payload={payload} />)
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+		expect(html).toContain(
+			'Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.',
+		)
+		expect(html).toContain('data-ftc-line')
+		// "Compensated expert" (tag-stripped — the cue links "expert" to the reviewer profile).
+		expect(html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ')).toContain('Compensated expert')
 	})
 
 	it('honors display flags: showMemo=false hides the memo; showExpertPhoto=false hides the photo', () => {

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

@@ -0,0 +1,259 @@
+/**
+ * renderCertBlock — the LOCKED 3-mode CertREV cert design (banner / sidebar /
+ * floating) as an SSR-safe HTML string.
+ *
+ * Coverage:
+ *   1. SNAPSHOTS — each mode for a representative envelope + a themed (non-navy)
+ *      variant, so any drift from the owner-approved locked design is caught.
+ *   2. LOCKED disclosures — the compensation cue, the byte-exact FTC scope line,
+ *      and the GROUPED dated credential verification appear on every CLAIM face
+ *      (banner + sidebar). Floating is a modal pointer, not a claim face.
+ *   3. THEMING — the resolved tokens reach the root as the guide's CSS vars; an
+ *      invalid token fails safe to navy; the fixed logo chrome is present.
+ *   4. ESCAPING — a value carrying `< & "` is escaped (this is storefront HTML).
+ */
+
+import { describe, expect, it } from 'vitest'
+import {
+	CERT_SCOPE_LINE,
+	type CertBlockFacts,
+	type CertBlockMode,
+	COMPENSATED_EXPERT_CUE,
+	CREDENTIAL_VERIFIED_ATTRIBUTION,
+	RENDER_BLOCK_FONT_STACKS,
+	type ResolvedBlockTheme,
+	renderCertBlock,
+} from '../index.js'
+
+/** A representative, well-formed cert (mirrors the locked-reference sample facts). */
+const FACTS: CertBlockFacts = {
+	authorName: 'The Editorial Team',
+	authorTitle: 'Editorial',
+	reviewerName: 'Jane Doe',
+	credential: 'MD',
+	credentialVerifiedAt: '2026-04-14T00:00:00.000Z',
+	certifiedAt: '2026-04-14T00:00:00.000Z',
+	memo: 'Patients ask me almost every week whether the SPF in their foundation is enough on its own. Treat makeup with SPF as a helpful last layer, not the base of your routine.',
+	bio: 'Board-certified dermatologist in San Francisco specializing in photoprotection, skin-cancer prevention, and evidence-based skincare, with fifteen years of clinical practice.',
+	profileUrl: 'https://certrev.com/expert/sample',
+	certificateUrl: 'https://certrev.com/verify/sample',
+}
+
+/** A themed brand (non-navy accent + dark ink + custom corners/surface/font). */
+const THEMED: ResolvedBlockTheme = {
+	accentColor: '#E8603C',
+	surface: '#faf8f4',
+	cornerRadius: '22px',
+	fontSlot: 'grotesk',
+	accentFg: '#141414',
+}
+
+const MODES: CertBlockMode[] = ['banner', 'sidebar', 'floating']
+const CLAIM_FACES: CertBlockMode[] = ['banner', 'sidebar']
+
+/** Tag-strip a fragment of HTML to its visible text (collapse whitespace). */
+function visibleText(html: string): string {
+	return html
+		.replace(/<[^>]+>/g, ' ')
+		.replace(/\s+/g, ' ')
+		.trim()
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// LOCKED disclosures are undroppable — omitted OR empty/whitespace defaults
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('renderCertBlock — LOCKED disclosure strings are undroppable', () => {
+	for (const mode of CLAIM_FACES) {
+		it(`${mode}: an empty/whitespace override of the locked strings falls back to the byte-exact constants`, () => {
+			const html = renderCertBlock({
+				mode,
+				facts: { ...FACTS, compensationCue: '', scopeLine: '', credentialLine: '   ' },
+			})
+			expect(html).toContain(COMPENSATED_EXPERT_CUE)
+			expect(html).toContain(CERT_SCOPE_LINE)
+			expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		})
+	}
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Snapshots — the locked-design byte target
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('renderCertBlock — locked-design snapshots', () => {
+	for (const mode of MODES) {
+		it(`${mode} (navy default) matches the locked snapshot`, () => {
+			expect(renderCertBlock({ mode, facts: FACTS })).toMatchSnapshot()
+		})
+		it(`${mode} (themed, non-navy accent) matches the locked snapshot`, () => {
+			expect(renderCertBlock({ mode, theme: THEMED, facts: FACTS })).toMatchSnapshot()
+		})
+	}
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// LOCKED disclosures — on every claim face
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('the three LOCKED disclosures render on every CLAIM face', () => {
+	for (const mode of CLAIM_FACES) {
+		it(`${mode}: compensation cue + byte-exact FTC scope line + dated credential verification`, () => {
+			const html = renderCertBlock({ mode, facts: FACTS })
+			// (1) compensation cue
+			expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+			// (2) FTC scope line — byte-exact, including the load-bearing curly apostrophe U+2019
+			expect(html).toContain(CERT_SCOPE_LINE)
+			expect(CERT_SCOPE_LINE).toContain('’')
+			// (3) dated credential verification
+			expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+			expect(html).toContain('on Apr 14, 2026')
+		})
+
+		it(`${mode}: the credential + its dated verification stay GROUPED, in order`, () => {
+			const html = renderCertBlock({ mode, facts: FACTS })
+			const iName = html.indexOf('Jane Doe, MD')
+			const iAttribution = html.indexOf(CREDENTIAL_VERIFIED_ATTRIBUTION)
+			const iDate = html.indexOf('on Apr 14, 2026')
+			expect(iName).toBeGreaterThanOrEqual(0)
+			expect(iAttribution).toBeGreaterThan(iName)
+			expect(iDate).toBeGreaterThan(iAttribution)
+		})
+
+		it(`${mode}: the disclosures survive even when the caller omits the locked strings`, () => {
+			// Omit compensationCue / scopeLine / credentialLine — they default to the
+			// byte-verbatim mirrored constants (the compliance baseline is never dropped).
+			const html = renderCertBlock({ mode, facts: FACTS })
+			expect(html).toContain(CERT_SCOPE_LINE)
+			expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+			expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		})
+	}
+
+	it('the caller-supplied locked strings are rendered verbatim when provided', () => {
+		const html = renderCertBlock({
+			mode: 'banner',
+			facts: {
+				...FACTS,
+				compensationCue: COMPENSATED_EXPERT_CUE,
+				scopeLine: CERT_SCOPE_LINE,
+				credentialLine: CREDENTIAL_VERIFIED_ATTRIBUTION,
+			},
+		})
+		expect(html).toContain(CERT_SCOPE_LINE)
+		expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+	})
+
+	it('the floating pill is a modal pointer — it makes no claim (no disclosures)', () => {
+		const html = renderCertBlock({ mode: 'floating', facts: FACTS })
+		expect(html).toContain('Expert reviewed:')
+		expect(html).not.toContain(CERT_SCOPE_LINE)
+		expect(html).not.toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		expect(visibleText(html)).not.toContain(COMPENSATED_EXPERT_CUE)
+		// but it still links to the two modal surfaces
+		expect(html).toContain('data-certrev-modal-open="expert"')
+		expect(html).toContain('data-certrev-modal-open ')
+	})
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Theming — CSS vars, fail-safe, fixed chrome
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('theming', () => {
+	it('un-themed: the root carries the navy default vars + the strings-version stamp', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: FACTS })
+		expect(html).toContain('--ba:#0a1b3f')
+		expect(html).toContain('--ba-fg:#ffffff')
+		expect(html).toContain('--br:14px')
+		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.sans}`)
+		expect(html).toContain('--surface:#ffffff')
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+	})
+
+	it('themed: the resolved tokens reach the root as CSS vars', () => {
+		const html = renderCertBlock({ mode: 'sidebar', theme: THEMED, facts: FACTS })
+		expect(html).toContain('--ba:#E8603C')
+		expect(html).toContain('--ba-fg:#141414')
+		expect(html).toContain('--br:22px')
+		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.grotesk}`)
+		expect(html).toContain('--surface:#faf8f4')
+	})
+
+	it('an invalid token fails SAFE to the navy default (never emitted into CSS)', () => {
+		const html = renderCertBlock({
+			mode: 'banner',
+			// injection attempts + malformed values across every token
+			theme: {
+				accentColor: 'red;}</style>',
+				surface: '#ffffffaa',
+				cornerRadius: 'calc(1px)',
+				fontSlot: 'comic-sans' as ResolvedBlockTheme['fontSlot'],
+				accentFg: 'blue' as ResolvedBlockTheme['accentFg'],
+			},
+			facts: FACTS,
+		})
+		expect(html).not.toContain('red;}')
+		expect(html).not.toContain('#ffffffaa')
+		// the injected radius is dropped (the card's own `calc(var(--br,14px) * 0.7)` is a fixed literal)
+		expect(html).not.toContain('calc(1px)')
+		expect(html).not.toContain('comic-sans')
+		expect(html).toContain('--ba:#0a1b3f')
+		expect(html).toContain('--ba-fg:#ffffff')
+		expect(html).toContain('--br:14px')
+		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.sans}`)
+	})
+
+	it('the fixed CertREV logo chrome renders on the banner + sidebar headers and the memo credit', () => {
+		const banner = renderCertBlock({ mode: 'banner', facts: FACTS })
+		const sidebar = renderCertBlock({ mode: 'sidebar', facts: FACTS })
+		// header marks track the accent ink (currentColor) + the memo credit mark (fixed navy) + the wordmark face
+		expect(banner).toContain('aria-label="CertREV"')
+		expect(banner).toContain('<path fill="currentColor"')
+		expect(banner).toContain('<path fill="#0a1b3f"')
+		expect(banner).toContain('font-family:var(--font-wordmark)')
+		expect(sidebar).toContain('aria-label="CertREV"')
+		expect(sidebar).toContain('<path fill="currentColor"')
+	})
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Escaping — storefront HTML built by hand
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('escaping (this is storefront HTML)', () => {
+	const HOSTILE = 'Ev<script>il & "quoted" \'x\''
+	const hostileFacts: CertBlockFacts = {
+		...FACTS,
+		authorName: HOSTILE,
+		authorTitle: HOSTILE,
+		reviewerName: HOSTILE,
+		credential: HOSTILE,
+		memo: HOSTILE,
+		bio: HOSTILE,
+		profileUrl: 'javascript:alert(1)',
+		certificateUrl: 'javascript:alert(2)',
+	}
+
+	for (const mode of CLAIM_FACES) {
+		it(`${mode}: every interpolated fact value is escaped; no raw injection survives`, () => {
+			const html = renderCertBlock({ mode, facts: hostileFacts })
+			// the injected markup never lands as live HTML
+			expect(html).not.toContain('<script>il')
+			expect(html).toContain('&lt;script&gt;')
+			expect(html).toContain('&amp;')
+			expect(html).toContain('&quot;')
+			expect(html).toContain('&#39;')
+		})
+	}
+
+	for (const mode of MODES) {
+		it(`${mode}: an unsafe URL scheme is dropped from every href`, () => {
+			const html = renderCertBlock({ mode, facts: hostileFacts })
+			expect(html).not.toContain('javascript:')
+			// the modal hook + a safe fallback href remain
+			expect(html).toContain('data-certrev-modal-open')
+			expect(html).toContain('href="#"')
+		})
+	}
+})