@zevra/ui 0.21.0 → 0.22.0

package/DECISIONS.md

@@ -1179,3 +1179,72 @@ rien intercepter.
 
 Aucun changement de gabarit : le `::after` est en absolu sous une barre déjà
 fixée, il ne prend pas de place dans le flux.
+
+---
+
+## Les e-mails (27/08/2026)
+
+Le paquet gagne des gabarits d'e-mail (`@zevra/ui/email`). Ils étaient
+jusqu'ici refaits par chaque produit, hors charte — fond crème, angles
+ronds, surligné jaune, titres en serif : rien de tout cela n'est dans le
+système.
+
+### La dérogation à la règle première, et pourquoi elle est imposée
+
+« Le CSS est la source de vérité, les composants n'en sont qu'une façade » —
+sauf ici. Ce n'est pas un choix, c'est le support :
+
+- il n'y a **aucune 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 ;
+- ni flexbox ni grid ne sont fiables : la mise en page est en **tables** ;
+- les **dégradés** ne se rendent pas dans Outlook.
+
+Les valeurs sont donc écrites en clair — mais tirées du **miroir JS des
+tokens**, que `tokens/index.js` destinait déjà explicitement à cet usage
+(« couleurs de thème d'un e-mail ») et que `tests/tokens.test.js` tient
+aligné sur le CSS. Aucune seconde source n'apparaît. Le détour par
+`react/email-tokens.ts` (généré) est imposé par le `rootDir` du tsconfig.
+
+### Ce que le support fait perdre, et ce qu'on met à la place
+
+| Dans le système | Dans l'e-mail | Pourquoi |
+|---|---|---|
+| Bouton plein en dégradé indigo | Aplat `--accent-deep` | Les dégradés ne se rendent pas dans Outlook |
+| Filet de spectre en `linear-gradient` | Trois aplats de 19 px | Idem — une bande vide sinon |
+| `padding` sur le `<a>` du bouton | Table + `bgcolor` | Outlook ignore le padding d'un `<a>` |
+| Largeur `--page-max` | 600 px | Le volet de lecture d'Outlook |
+
+Ce qui NE change pas : l'angle vif, le papier, l'encre, les trois familles,
+un seul bouton plein par message, et le filet de spectre comme signature —
+premier de ses trois emplois autorisés.
+
+### Le mode sombre est refusé
+
+`color-scheme: light`, explicitement. La charte est claire par nature :
+l'inversion automatique d'Apple Mail retourne les neutres **sans toucher aux
+aplats**, et l'indigo du bouton se retrouverait sur un fond devenu noir. Même
+règle que pour les surfaces sombres du système — elles se font avec la bande
+manifeste, jamais en inversant les neutres.
+
+### Deux règles qui ne sont pas décoratives
+
+**La marque s'écrit en toutes lettres, même avec un logo.** Une image sur
+deux est bloquée par défaut ; un e-mail qui ne dit pas de qui il vient part à
+la corbeille. D'où `marque` obligatoire, et le logo en option.
+
+**Le preheader est un contenu, pas un détail.** Sans lui, le client affiche
+les premiers mots du HTML dans la liste des messages — c'est la seule ligne
+dont on dispose pour convaincre d'ouvrir.
+
+### Un piège rencontré, et gardé
+
+Les piles de polices du paquet contiennent des **guillemets doubles**
+(`"Public Sans", …`) et tout s'écrit dans un `style="…"` délimité par ces
+mêmes guillemets : l'attribut se referme au premier guillemet interne et le
+nœud perd **tout** son style. L'e-mail entier repassait en Times, sans
+couleurs, avec un libellé de bouton blanc devenu illisible sur l'aplat
+indigo. Cela ne se voit pas à la relecture — cela s'est vu au rendu. Les
+piles sont converties en guillemets simples, et un test refuse désormais
+tout attribut `style` contenant un guillemet double.

package/dist/email-tokens.d.ts

@@ -0,0 +1,56 @@
+export declare const COULEURS: {
+    readonly ink: "#0b1020";
+    readonly ink2: "#4a5468";
+    readonly muted: "#5a637a";
+    readonly label: "#8a93a8";
+    readonly line: "#e3e6ef";
+    readonly hairline: "#eef1f8";
+    readonly paper: "#f5f6fa";
+    readonly panel: "#fbfcfe";
+    readonly white: "#ffffff";
+    readonly accentDeep: "#1e1b8c";
+    readonly accent: "#2a2aa8";
+    readonly accentLine: "#c9d6f5";
+    readonly accentSoft: "#eaf1ff";
+    readonly violet: "#8a3af8";
+    readonly iris: "#5848f8";
+    readonly bleu: "#2f6ef8";
+    readonly cyan: "#14c2f8";
+    readonly lavande: "#b8a8f8";
+    readonly accentOnDark: "#a5b4fc";
+    readonly ok: "#1c6b4a";
+    readonly okSoft: "#e6f3ec";
+    readonly okLine: "#bfdccb";
+    readonly warn: "#b98a1f";
+    readonly warnSoft: "#faf3e2";
+    readonly warnLine: "#ebdcb4";
+    readonly warnInk: "#8a6d1e";
+    readonly err: "#b5202c";
+    readonly errSoft: "#fdece9";
+    readonly errLine: "#efc9cd";
+    readonly fmtPdf: "#c4362b";
+    readonly fmtDocx: "#2a5ba8";
+};
+export declare const POLICES: {
+    readonly display: "\"Outfit\", \"Helvetica Neue\", Arial, sans-serif";
+    readonly texte: "\"Public Sans\", \"Helvetica Neue\", Arial, sans-serif";
+    readonly mono: "\"Space Grotesk\", \"Menlo\", monospace";
+    readonly code: "ui-monospace, \"SF Mono\", \"Menlo\", \"Consolas\", monospace";
+};
+export declare const TAILLES: {
+    readonly h1: "76px";
+    readonly h2: "56px";
+    readonly h3: "38px";
+    readonly cardTitle: "24px";
+    readonly lead: "18px";
+    readonly body: "15px";
+    readonly appLg: "14px";
+    readonly app: "13px";
+    readonly appSm: "12px";
+    readonly appH2: "20px";
+    readonly appH3: "16px";
+    readonly monoLg: "11px";
+    readonly mono: "10px";
+    readonly monoSm: "9px";
+};
+//# sourceMappingURL=email-tokens.d.ts.map

package/dist/email-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-tokens.d.ts","sourceRoot":"","sources":["../react/email-tokens.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;aACnB,GAAK,EAAE,SAAS;aAChB,IAAM,EAAE,SAAS;aACjB,KAAO,EAAE,SAAS;aAClB,KAAO,EAAE,SAAS;aAClB,IAAM,EAAE,SAAS;aACjB,QAAU,EAAE,SAAS;aACrB,KAAO,EAAE,SAAS;aAClB,KAAO,EAAE,SAAS;aAClB,KAAO,EAAE,SAAS;aAClB,UAAY,EAAE,SAAS;aACvB,MAAQ,EAAE,SAAS;aACnB,UAAY,EAAE,SAAS;aACvB,UAAY,EAAE,SAAS;aACvB,MAAQ,EAAE,SAAS;aACnB,IAAM,EAAE,SAAS;aACjB,IAAM,EAAE,SAAS;aACjB,IAAM,EAAE,SAAS;aACjB,OAAS,EAAE,SAAS;aACpB,YAAc,EAAE,SAAS;aACzB,EAAI,EAAE,SAAS;aACf,MAAQ,EAAE,SAAS;aACnB,MAAQ,EAAE,SAAS;aACnB,IAAM,EAAE,SAAS;aACjB,QAAU,EAAE,SAAS;aACrB,QAAU,EAAE,SAAS;aACrB,OAAS,EAAE,SAAS;aACpB,GAAK,EAAE,SAAS;aAChB,OAAS,EAAE,SAAS;aACpB,OAAS,EAAE,SAAS;aACpB,MAAQ,EAAE,SAAS;aACnB,OAAS,EAAE,SAAS;CACZ,CAAA;AAEV,eAAO,MAAM,OAAO;aAClB,OAAS,EAAE,mDAAmD;aAC9D,KAAO,EAAE,wDAAwD;aACjE,IAAM,EAAE,yCAAyC;aACjD,IAAM,EAAE,+DAA+D;CAC/D,CAAA;AAEV,eAAO,MAAM,OAAO;aAClB,EAAI,EAAE,MAAM;aACZ,EAAI,EAAE,MAAM;aACZ,EAAI,EAAE,MAAM;aACZ,SAAW,EAAE,MAAM;aACnB,IAAM,EAAE,MAAM;aACd,IAAM,EAAE,MAAM;aACd,KAAO,EAAE,MAAM;aACf,GAAK,EAAE,MAAM;aACb,KAAO,EAAE,MAAM;aACf,KAAO,EAAE,MAAM;aACf,KAAO,EAAE,MAAM;aACf,MAAQ,EAAE,MAAM;aAChB,IAAM,EAAE,MAAM;aACd,MAAQ,EAAE,KAAK;CACP,CAAA"}

package/dist/email-tokens.js

@@ -0,0 +1,58 @@
+// 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"
+};
+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"
+};
+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"
+};
+//# sourceMappingURL=email-tokens.js.map

package/dist/email-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-tokens.js","sourceRoot":"","sources":["../react/email-tokens.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,yEAAyE;AAEzE,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,SAAS;IACnB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,SAAS;IACzB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;CACZ,CAAA;AAEV,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS,EAAE,mDAAmD;IAC9D,OAAO,EAAE,wDAAwD;IACjE,MAAM,EAAE,yCAAyC;IACjD,MAAM,EAAE,+DAA+D;CAC/D,CAAA;AAEV,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,MAAM;IACnB,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,KAAK;CACP,CAAA"}

package/dist/email.d.ts

@@ -0,0 +1,77 @@
+/** É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 declare function echappe(texte: string): string;
+/** 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 declare function emailKicker(texte: string): string;
+/** Le titre du message. Un seul par e-mail : c'est la promesse de l'objet,
+ *  tenue à l'ouverture. */
+export declare function emailTitre(texte: string): string;
+/** 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 declare function emailTexte(html: string): string;
+/** 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 declare function emailBouton({ href, libelle }: {
+    href: string;
+    libelle: string;
+}): string;
+/** 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 declare function emailLienSecondaire({ href, libelle }: {
+    href: string;
+    libelle: string;
+}): string;
+/** La mention discrète : ce qu'on lit après avoir décidé. */
+export declare function emailNote(html: string): string;
+/** L'encart : un extrait, un récapitulatif de commande, un code. */
+export declare function emailEncart(html: string): string;
+/** Le filet de séparation. */
+export declare function emailFilet(): string;
+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 declare function email({ titre, preheader, marque, logo, contenu, pied, lang, }: EmailOptions): string;
+//# sourceMappingURL=email.d.ts.map

package/dist/email.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../react/email.ts"],"names":[],"mappings":"AAmDA;;gEAEgE;AAChE,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM7C;AAID;;;6DAG6D;AAC7D,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOjD;AAED;2BAC2B;AAC3B,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;kBAGkB;AAClB,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED;;;;qDAIqD;AACrD,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAKxF;AAED;;wBAEwB;AACxB,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAEhG;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAIhD;AAED,8BAA8B;AAC9B,wBAAgB,UAAU,IAAI,MAAM,CAGnC;AAID,MAAM,WAAW,YAAY;IAC3B;0CACsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb;;;4CAGwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;0DAEsD;IACtD,MAAM,EAAE,MAAM,CAAA;IACd;mEAC+D;IAC/D,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,6BAA6B;IAC7B,OAAO,EAAE,MAAM,CAAA;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,IAAW,GACZ,EAAE,YAAY,GAAG,MAAM,CA8CvB"}

package/dist/email.js

@@ -0,0 +1,166 @@
+// 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) => 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) {
+    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) {
+    const brin = (couleur) => `<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) {
+    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) {
+    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 }) {
+    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 }) {
+    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) {
+    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) {
+    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() {
+    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>`;
+}
+/**
+ * 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', }) {
+    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>
+`;
+}
+//# sourceMappingURL=email.js.map

package/dist/email.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,
@@ -37,6 +37,10 @@
       "types": "./dist/css-inline.d.ts",
       "default": "./dist/css-inline.js"
     },
+    "./email": {
+      "types": "./dist/email.d.ts",
+      "default": "./dist/email.js"
+    },
     "./react/table": {
       "types": "./dist/data-table.d.ts",
       "default": "./dist/data-table.js"
@@ -74,7 +78,7 @@
     "DECISIONS.md"
   ],
   "scripts": {
-    "build": "node scripts/build-icon-react.mjs && node scripts/build-css-bundle.mjs && tsc -p tsconfig.json",
+    "build": "node scripts/build-icon-react.mjs && node scripts/build-css-bundle.mjs && node scripts/build-email-tokens.mjs && tsc -p tsconfig.json",
     "test": "npm run build && vitest run",
     "prepublishOnly": "npm run build",
     "storybook": "npm run build && node scripts/build-stories.mjs && storybook dev -p 6006 --no-open",

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>
+`
+}