@zevra/ui 0.20.0 → 0.22.0

package/react/email-tokens.ts

@@ -0,0 +1,60 @@
+// GÉNÉRÉ par scripts/build-email-tokens.mjs — ne pas éditer à la main.
+// Source de vérité : tokens/index.js, lui-même miroir de src/tokens.css.
+
+export const COULEURS = {
+  "ink": "#0b1020",
+  "ink2": "#4a5468",
+  "muted": "#5a637a",
+  "label": "#8a93a8",
+  "line": "#e3e6ef",
+  "hairline": "#eef1f8",
+  "paper": "#f5f6fa",
+  "panel": "#fbfcfe",
+  "white": "#ffffff",
+  "accentDeep": "#1e1b8c",
+  "accent": "#2a2aa8",
+  "accentLine": "#c9d6f5",
+  "accentSoft": "#eaf1ff",
+  "violet": "#8a3af8",
+  "iris": "#5848f8",
+  "bleu": "#2f6ef8",
+  "cyan": "#14c2f8",
+  "lavande": "#b8a8f8",
+  "accentOnDark": "#a5b4fc",
+  "ok": "#1c6b4a",
+  "okSoft": "#e6f3ec",
+  "okLine": "#bfdccb",
+  "warn": "#b98a1f",
+  "warnSoft": "#faf3e2",
+  "warnLine": "#ebdcb4",
+  "warnInk": "#8a6d1e",
+  "err": "#b5202c",
+  "errSoft": "#fdece9",
+  "errLine": "#efc9cd",
+  "fmtPdf": "#c4362b",
+  "fmtDocx": "#2a5ba8"
+} as const
+
+export const POLICES = {
+  "display": "\"Outfit\", \"Helvetica Neue\", Arial, sans-serif",
+  "texte": "\"Public Sans\", \"Helvetica Neue\", Arial, sans-serif",
+  "mono": "\"Space Grotesk\", \"Menlo\", monospace",
+  "code": "ui-monospace, \"SF Mono\", \"Menlo\", \"Consolas\", monospace"
+} as const
+
+export const TAILLES = {
+  "h1": "76px",
+  "h2": "56px",
+  "h3": "38px",
+  "cardTitle": "24px",
+  "lead": "18px",
+  "body": "15px",
+  "appLg": "14px",
+  "app": "13px",
+  "appSm": "12px",
+  "appH2": "20px",
+  "appH3": "16px",
+  "monoLg": "11px",
+  "mono": "10px",
+  "monoSm": "9px"
+} as const

package/react/email.ts

@@ -0,0 +1,219 @@
+// Gabarits d'e-mail « Encre & Papier ».
+//
+// ⚠️ CE MODULE N'EST PAS DU REACT ET N'EMPLOIE PAS LE CSS DU PAQUET. Il rend
+// des chaînes de HTML. C'est la seule dérogation à la règle première du dépôt
+// (« le CSS est la source de vérité, les composants n'en sont qu'une
+// façade »), et elle est imposée par le support, pas choisie :
+//
+//   · il n'y a pas de feuille de style à charger dans un e-mail ;
+//   · Outlook et Gmail SUPPRIMENT les propriétés personnalisées : un
+//     `var(--accent)` s'y rend en couleur nulle, donc en texte noir sur fond
+//     transparent. Les valeurs sont donc écrites en clair — mais tirées du
+//     miroir JS des tokens, que tests/tokens.test.js tient aligné sur le CSS ;
+//   · ni flexbox ni grid ne sont fiables : la mise en page est en TABLES ;
+//   · les dégradés ne se rendent pas dans Outlook — le bouton plein perd le
+//     sien et devient un aplat, le filet de spectre devient trois aplats.
+//
+// Il vit dans react/ parce que c'est la racine de compilation du paquet
+// (`rootDir`), pas parce qu'il en dépend : il n'importe pas une ligne de
+// React et n'émet aucune classe `zv-`.
+//
+// ⚠️ Ce module ÉCHAPPE à ta feuille de style : ce qui n'est pas ici ne
+// s'affichera pas. Ne pas y ajouter de classes en espérant qu'elles soient
+// stylées.
+
+import { COULEURS, POLICES as PILES } from './email-tokens.js'
+
+/** ⚠️ Les piles de polices du paquet contiennent des GUILLEMETS DOUBLES
+ *  (`"Public Sans", …`), et tout ici s'écrit dans un attribut `style="…"`
+ *  délimité par ces mêmes guillemets : l'attribut se refermerait au premier
+ *  guillemet interne, et TOUT le style du nœud serait perdu. En HTML, un
+ *  guillemet simple est équivalent à l'intérieur d'une valeur de police.
+ *  Cette faute ne se voit pas à la relecture — elle se voit au rendu, où
+ *  l'e-mail entier repasse en Times sans style. */
+const pourAttribut = (pile: string) => pile.replace(/"/g, "'")
+
+const POLICES = {
+  display: pourAttribut(PILES.display),
+  texte: pourAttribut(PILES.texte),
+  mono: pourAttribut(PILES.mono),
+}
+
+/* ─── Réglages communs ─────────────────────────────────────────────── */
+
+/** 600px : la largeur qui traverse tous les clients depuis vingt ans, dont
+ *  le volet de lecture d'Outlook. Ce n'est pas --page-max, et ça n'a rien à
+ *  voir : c'est une contrainte du support. */
+const LARGEUR = 600
+
+const CORPS = `font-family:${POLICES.texte};font-size:15px;line-height:1.6;color:${COULEURS.muted};`
+const TITRE = `font-family:${POLICES.display};font-weight:300;letter-spacing:-0.02em;color:${COULEURS.ink};`
+
+/** Échappe ce qui entre dans le HTML. Un objet d'e-mail vient souvent d'une
+ *  base de données : un nom de client avec une esperluette casserait le
+ *  document, et un `<` bien placé y injecterait du balisage. */
+export function echappe(texte: string): string {
+  return texte
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/* ─── Blocs ────────────────────────────────────────────────────────── */
+
+/** Sur-titre : le filet de spectre suivi du label en capitales.
+ *  PREMIER des trois emplois autorisés du spectre. Le dégradé est rendu en
+ *  TROIS APLATS de 19px (violet, bleu, cyan) : un `linear-gradient` ne se
+ *  rend pas dans Outlook, qui afficherait une bande vide. */
+export function emailKicker(texte: string): string {
+  const brin = (couleur: string) =>
+    `<td width="19" height="2" style="background:${couleur};font-size:0;line-height:0;">&nbsp;</td>`
+  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 14px;"><tr>
+<td><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>${brin(COULEURS.violet)}${brin(COULEURS.bleu)}${brin(COULEURS.cyan)}</tr></table></td>
+<td style="padding-left:12px;font-family:${POLICES.mono};font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:${COULEURS.accent};">${echappe(texte)}</td>
+</tr></table>`
+}
+
+/** Le titre du message. Un seul par e-mail : c'est la promesse de l'objet,
+ *  tenue à l'ouverture. */
+export function emailTitre(texte: string): string {
+  return `<h1 style="${TITRE}font-size:26px;line-height:1.2;margin:0 0 18px;">${echappe(texte)}</h1>`
+}
+
+/** Un paragraphe. Le HTML d'enrichissement (`<strong>`, `<a>`) est admis :
+ *  c'est du texte rédigé, pas une saisie utilisateur — l'échapper
+ *  afficherait des chevrons. Passer par `echappe` toute valeur qui vient
+ *  d'une base. */
+export function emailTexte(html: string): string {
+  return `<p style="${CORPS}margin:0 0 16px;">${html}</p>`
+}
+
+/** L'action. UN SEUL bouton plein par e-mail, comme par page — c'est ce qui
+ *  fait qu'on sait où cliquer.
+ *  Construit en table : le `padding` d'un `<a>` est ignoré par Outlook, qui
+ *  rendrait un lien nu au milieu du message. Aplat indigo et non dégradé,
+ *  pour la même raison. Angle vif, comme partout. */
+export function emailBouton({ href, libelle }: { href: string; libelle: string }): string {
+  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:26px 0;"><tr>
+<td align="center" bgcolor="${COULEURS.accentDeep}" style="background:${COULEURS.accentDeep};">
+<a href="${echappe(href)}" style="display:inline-block;padding:15px 30px;font-family:${POLICES.texte};font-size:15px;font-weight:600;color:${COULEURS.white};text-decoration:none;">${echappe(libelle)}</a>
+</td></tr></table>`
+}
+
+/** Le lien secondaire, sous le bouton : l'autre chemin, pour qui ne veut pas
+ *  du premier. Souligné — dans un e-mail, la couleur seule ne suffit pas à
+ *  annoncer un lien. */
+export function emailLienSecondaire({ href, libelle }: { href: string; libelle: string }): string {
+  return `<p style="${CORPS}font-size:14px;margin:0 0 16px;"><a href="${echappe(href)}" style="color:${COULEURS.accent};text-decoration:underline;">${echappe(libelle)}</a></p>`
+}
+
+/** La mention discrète : ce qu'on lit après avoir décidé. */
+export function emailNote(html: string): string {
+  return `<p style="font-family:${POLICES.texte};font-size:13px;line-height:1.55;color:${COULEURS.label};margin:0 0 12px;">${html}</p>`
+}
+
+/** L'encart : un extrait, un récapitulatif de commande, un code. */
+export function emailEncart(html: string): string {
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 18px;"><tr>
+<td style="background:${COULEURS.panel};border:1px solid ${COULEURS.hairline};border-left:2px solid ${COULEURS.accentLine};padding:14px 18px;font-family:${POLICES.texte};font-size:13px;line-height:1.6;color:${COULEURS.ink};">${html}</td>
+</tr></table>`
+}
+
+/** Le filet de séparation. */
+export function emailFilet(): string {
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:22px 0;"><tr>
+<td height="1" style="background:${COULEURS.line};font-size:0;line-height:0;">&nbsp;</td></tr></table>`
+}
+
+/* ─── Le gabarit ───────────────────────────────────────────────────── */
+
+export interface EmailOptions {
+  /** Repris en `<title>`. Ce n'est PAS l'objet du message : l'objet se pose
+   *  à l'envoi, dans l'en-tête SMTP. */
+  titre: string
+  /** Le texte gris qui suit l'objet dans la liste des messages. Sans lui,
+   *  le client y affiche les premiers mots du HTML — souvent « Voir cet
+   *  e-mail dans votre navigateur », ce qui gâche la seule ligne dont on
+   *  dispose pour convaincre d'ouvrir. */
+  preheader?: string
+  /** Le nom de la marque, écrit en toutes lettres. ⚠️ OBLIGATOIRE même avec
+   *  un logo : une image sur deux est bloquée par défaut, et un e-mail qui
+   *  ne dit pas de qui il vient part à la corbeille. */
+  marque: string
+  /** L'URL ABSOLUE du logo — une image d'e-mail ne se résout pas depuis un
+   *  chemin relatif, et les data-URI sont bloquées par Gmail. */
+  logo?: { src: string; hauteur?: number }
+  /** Les blocs, concaténés. */
+  contenu: string
+  /** Sous la carte : mentions légales, désinscription. */
+  pied?: string
+  lang?: string
+}
+
+/**
+ * Assemble un e-mail complet.
+ *
+ * ⚠️ Le mode sombre est REFUSÉ explicitement (`color-scheme: light`) : la
+ * charte est claire par nature, et l'inversion automatique d'Apple Mail
+ * retourne les neutres sans toucher aux aplats — l'indigo du bouton
+ * resterait sur un fond devenu noir, et les contrastes réglés dans un sens
+ * partiraient dans l'autre. C'est la même règle que pour les surfaces
+ * sombres du système : elles se font avec la bande manifeste, jamais en
+ * inversant les neutres.
+ */
+export function email({
+  titre,
+  preheader,
+  marque,
+  logo,
+  contenu,
+  pied,
+  lang = 'fr',
+}: EmailOptions): string {
+  const enTete = logo
+    ? `<img src="${echappe(logo.src)}" height="${logo.hauteur ?? 28}" alt="${echappe(marque)}" style="display:block;border:0;height:${logo.hauteur ?? 28}px;width:auto;">`
+    : `<span style="font-family:${POLICES.display};font-weight:600;font-size:20px;letter-spacing:-0.02em;color:${COULEURS.ink};">${echappe(marque)}</span>`
+
+  return `<!doctype html>
+<html lang="${lang}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="color-scheme" content="light">
+<meta name="supported-color-schemes" content="light">
+<title>${echappe(titre)}</title>
+<style>
+  /* Le seul <style> du document, et il ne porte QUE du responsive : ce que
+     Gmail en supprime ne fait rien perdre, tout le reste est en ligne. */
+  @media (max-width:620px) {
+    .zv-carte { padding:26px 20px !important; }
+    .zv-marge { padding:20px 12px !important; }
+  }
+</style>
+</head>
+<body style="margin:0;padding:0;width:100%;background:${COULEURS.paper};-webkit-text-size-adjust:100%;">
+<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${preheader ? echappe(preheader) : ''}</div>
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:${COULEURS.paper};">
+<tr><td align="center" class="zv-marge" style="padding:32px 16px;">
+<table role="presentation" width="${LARGEUR}" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:${LARGEUR}px;">
+
+<tr><td style="padding:0 0 20px;">${enTete}</td></tr>
+
+<tr><td class="zv-carte" bgcolor="${COULEURS.white}" style="background:${COULEURS.white};border:1px solid ${COULEURS.line};padding:34px 36px;">
+${contenu}
+</td></tr>
+
+${
+  pied
+    ? `<tr><td style="padding:20px 4px 0;font-family:${POLICES.texte};font-size:12px;line-height:1.6;color:${COULEURS.label};">${pied}</td></tr>`
+    : ''
+}
+
+</table>
+</td></tr>
+</table>
+</body>
+</html>
+`
+}

package/src/components.css

@@ -636,8 +636,23 @@
 /* ─── FAQ ───────────────────────────────────────────────────────────────
  * Cinq questions par page au maximum. */
 
+/* Le filet, comme `.zv-fold` : sans lui, la FAQ est un aplat blanc posé sur
+ * le papier, sans début ni fin. Toutes les autres surfaces blanches de la
+ * vitrine — carte, encart, tarif — en portent un ; celle-ci faisait tache. */
 .zv-faq {
   background: var(--white);
+  border: 1px solid var(--line);
+}
+
+/* Chaque question est un `<details>` : le repli est natif, sans JavaScript.
+ * Le filet sépare les questions ENTRE elles ; la première n'en porte pas, il
+ * tomberait sur celui du bloc et ferait un trait double. */
+.zv-faq__item {
+  border-top: 1px solid var(--hairline);
+}
+
+.zv-faq__item:first-child {
+  border-top: 0;
 }
 
 .zv-faq__q {
@@ -646,22 +661,54 @@
   align-items: center;
   gap: 16px;
   padding: 18px 24px;
-  border-bottom: 1px solid var(--hairline);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
+  /* Le marqueur natif du `<summary>` tombe : le chevron du composant fait le
+   * même travail sans imposer le triangle du navigateur. Même traitement que
+   * `.zv-fold__titre`. */
+  list-style: none;
 }
 
-.zv-faq__q svg {
+.zv-faq__q::-webkit-details-marker {
+  display: none;
+}
+
+/* Une FAQ de vitrine veut ses questions dans le PLAN DU DOCUMENT : c'est ce
+ * que lisent les moteurs, et ce que parcourt un lecteur d'écran qui saute de
+ * titre en titre. On accepte donc un `<h2>`/`<h3>`/`<h4>` comme question,
+ * et on lui retire ce que le navigateur lui met — taille, graisse, marges —
+ * pour qu'il se rende comme le reste des questions. Le niveau reste au
+ * balisage, l'apparence au système. */
+.zv-faq__q > :is(h2, h3, h4) {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.zv-faq__q:hover {
+  background: var(--panel);
+}
+
+/* Le chevron porte sa classe : cibler tout `svg` du titre attraperait aussi
+ * une icône posée dans le libellé, qui se verrait rétrécie et retournée. */
+.zv-faq__chevron {
   width: 14px;
   height: 14px;
   flex: none;
   color: var(--accent);
+  transition: rotate 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-faq__item[open] .zv-faq__chevron {
+  rotate: 180deg;
 }
 
 .zv-faq__a {
-  padding: 14px 24px;
+  margin: 0;
+  padding: 0 24px 18px;
   font-size: 13px;
+  line-height: 1.6;
   color: var(--muted);
 }
 

package/src/layout.css

@@ -395,11 +395,15 @@
   padding-top: 22px;
   padding-bottom: 12px;
   z-index: 40;
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--paper) 92%, transparent),
-    color-mix(in srgb, var(--paper) 0%, transparent)
-  );
+  /* Le voile est PLEIN derrière la barre, et il se dégrade EN DESSOUS d'elle
+   * (::after). Il était auparavant dégradé sur toute sa hauteur : à sa base
+   * il ne restait donc presque rien, et un titre de 38 ou 56px qui passait
+   * dessous se retrouvait COUPÉ EN DEUX — moitié voilée, moitié nette, avec
+   * les entrées de nav posées sur ses lettres. Deux textes superposés, aucun
+   * lisible. Signalé en recette sur mcp-factory.
+   * Le dégradé n'est pas perdu : il vit sous la barre, là où il adoucit le
+   * passage sans se disputer la place avec la navigation. */
+  background: color-mix(in srgb, var(--paper) 92%, transparent);
   /* ⚠️ LE PRÉFIXÉ D'ABORD. Lightning CSS — le compilateur de Tailwind v4,
    * donc celui de toutes nos applications Next — SUPPRIME `backdrop-filter`
    * non préfixé quand il précède la forme `-webkit-`. Or Firefox ne connaît
@@ -419,6 +423,25 @@
   backdrop-filter: blur(6px);
 }
 
+/* La frange de dégradé, posée SOUS la barre. `pointer-events: none` : elle
+ * couvre le haut du contenu, elle ne doit rien intercepter. */
+.zv-header::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 24px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--paper) 92%, transparent),
+    color-mix(in srgb, var(--paper) 0%, transparent)
+  );
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  pointer-events: none;
+}
+
 .zv-header:has(> .zv-nav) {
   display: block;
   padding-top: 0;