@hgdc/ui 0.5.0 → 0.6.0

package/README.md

@@ -111,6 +111,37 @@ Les champs de date sont ceux du navigateur, sans calendrier maison (ADR 0006). L
 | `tooltip`     | `<TooltipProvider>` autour de l'app, puis `<Tooltip><TooltipTrigger aria-label="Copier">…</TooltipTrigger><TooltipContent>Copier</TooltipContent></Tooltip>` |
 | `popover`     | `<Popover><PopoverTrigger>Aide</PopoverTrigger><PopoverContent><PopoverTitle>…</PopoverTitle></PopoverContent></Popover>`                                    |
 
+## E-mails
+
+`@hgdc/ui/email` : le modèle commun des e-mails transactionnels, rendu par React Email (`bun add --exact react-email@6.11.1`, version de la stack). Rendu côté serveur, dans une action Convex `"use node"`.
+
+```tsx
+import { EmailButton, EmailHeading, EmailLayout, EmailText, renderEmail } from "@hgdc/ui/email"
+
+const { html, text } = await renderEmail(
+  <EmailLayout product="Portal" preview="Claire t'invite à rejoindre Atelier Dupont.">
+    <EmailHeading>Claire t'invite dans Atelier Dupont</EmailHeading>
+    <EmailText>Tu pourras suivre le projet, signer et payer au même endroit.</EmailText>
+    <EmailButton href={url}>Voir l'invitation</EmailButton>
+  </EmailLayout>,
+)
+```
+
+| Bloc           | Rôle                                                                                                                                        |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `EmailLayout`  | Icône et nom du produit, carte, pied « Propulsé par HGDC Mail » et mentions légales ; `footer` (désabonnement), `name`, `iconSrc`, `accent` |
+| `EmailHeading` | Titre                                                                                                                                       |
+| `EmailText`    | Paragraphe ; `small` pour une note secondaire                                                                                               |
+| `EmailButton`  | Lien direct, jamais réécrit ; absolu (`https:`, `mailto:`) ou erreur                                                                        |
+| `EmailLink`    | Lien dans le texte                                                                                                                          |
+| `EmailCode`    | Code à usage unique, en deux groupes à l'œil, d'un bloc au copier                                                                           |
+| `EmailCallout` | Encadré `neutral`, `info`, `success`, `warning`, `danger`, avec titre                                                                       |
+| `EmailDivider` | Séparateur                                                                                                                                  |
+| `EmailDetails` | Liste clé / valeur                                                                                                                          |
+| `renderEmail`  | `{ html, text }` : HTML pour clients mail, texte tiré du même rendu                                                                         |
+
+L'accent vient du catalogue (`accent` de `@hgdc/ui/products`), les icônes de `https://hgdc.ch/email/<mot>.png` (fichiers dans `@hgdc/ui/email-icons/`, régénérés par `bun scripts/email-icons.ts`). Un exemple par type : `scripts/email-showcase.tsx`.
+
 ## Règles de la DA
 
 - Chrome monochrome, un seul accent violet : focus, lien, un geste principal par écran. « Vous êtes ici » (barre, onglets) reste en teinte.
@@ -120,6 +151,6 @@ Les champs de date sont ceux du navigateur, sans calendrier maison (ADR 0006). L
 - Graphiques : `--chart-1` à `--chart-6` dans cet ordre, validées pour le daltonisme dans les deux thèmes ; au-delà de six séries, regrouper en « Autres ».
 - Référence de l'interface : Host. Couleur d'un client : `--brand-accent`.
 
-Mode d'emploi complet : [Adopter le kit](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/guides/adopter-le-kit.md#7-interface). Décisions : [ADR 0005](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0005-ui-css-brute-et-sous-chemins.md), [ADR 0006](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0006-ui-composants-des-consoles.md).
+Mode d'emploi complet : [Adopter le kit](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/guides/adopter-le-kit.md#7-interface). Décisions : [ADR 0005](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0005-ui-css-brute-et-sous-chemins.md), [ADR 0006](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0006-ui-composants-des-consoles.md), [ADR 0007](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0007-ui-modele-des-e-mails.md).
 
 Tous droits réservés, Hugo Gebel Développement Conseil.

package/dist/email-palette.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Couleurs des e-mails, en hex : les clients mail ne lisent ni oklch ni les variables CSS. Chaque
+ * valeur est la traduction d'un jeton de `styles.css` (même nom), en deux thèmes.
+ *
+ * Blanc et noir purs sont évités (`#fffffe`, `#0a0a0a`) : Gmail et Outlook inversent les couleurs
+ * en mode sombre, et une valeur légèrement décalée y résiste mieux.
+ */
+export type EmailTheme = {
+    /** Fond autour de la carte (`muted`). */
+    ground: string;
+    card: string;
+    ink: string;
+    /** Texte courant, un cran sous l'encre. */
+    body: string;
+    /** Texte secondaire, pied de page. */
+    muted: string;
+    border: string;
+    /** Fond du code et des détails. */
+    wash: string;
+};
+export declare const EMAIL_LIGHT: EmailTheme;
+export declare const EMAIL_DARK: EmailTheme;
+/** Accent d'un produit : `--accent` en clair et en sombre. */
+export type EmailAccent = {
+    light: string;
+    dark: string;
+};
+/** L'accent violet de la DA, `oklch(0.55 0.25 296)` et `oklch(0.74 0.19 296)`. */
+export declare const HGDC_EMAIL_ACCENT: EmailAccent;
+export type EmailTone = "neutral" | "info" | "success" | "warning" | "danger";
+/** Encre, lavis et filet d'un encadré, par ton (jetons `--info`, `--status-*`, `--destructive`). */
+export type ToneColors = {
+    ink: string;
+    wash: string;
+    bar: string;
+};
+export declare const EMAIL_TONES: Readonly<Record<EmailTone, {
+    light: ToneColors;
+    dark: ToneColors;
+}>>;
+export declare function isHexColor(value: string): boolean;
+/** Rapport de contraste WCAG 2 entre deux couleurs hex, de 1 à 21. */
+export declare function contrastRatio(a: string, b: string): number;
+/** Le texte le plus lisible sur un fond : quasi blanc ou quasi noir. */
+export declare function readableOn(background: string): string;

package/dist/email-palette.js

@@ -0,0 +1,71 @@
+/**
+ * Couleurs des e-mails, en hex : les clients mail ne lisent ni oklch ni les variables CSS. Chaque
+ * valeur est la traduction d'un jeton de `styles.css` (même nom), en deux thèmes.
+ *
+ * Blanc et noir purs sont évités (`#fffffe`, `#0a0a0a`) : Gmail et Outlook inversent les couleurs
+ * en mode sombre, et une valeur légèrement décalée y résiste mieux.
+ */
+export const EMAIL_LIGHT = {
+    ground: "#f5f5f5",
+    card: "#fffffe",
+    ink: "#0a0a0a",
+    body: "#404040",
+    muted: "#696969",
+    border: "#e5e5e5",
+    wash: "#f5f5f5",
+};
+export const EMAIL_DARK = {
+    ground: "#0a0a0a",
+    card: "#171717",
+    ink: "#fafafa",
+    body: "#d4d4d4",
+    muted: "#a1a1a1",
+    border: "#262626",
+    wash: "#262626",
+};
+/** L'accent violet de la DA, `oklch(0.55 0.25 296)` et `oklch(0.74 0.19 296)`. */
+export const HGDC_EMAIL_ACCENT = { light: "#8538ee", dark: "#b78dff" };
+export const EMAIL_TONES = {
+    neutral: {
+        light: { ink: "#404040", wash: "#f5f5f5", bar: "#a1a1a1" },
+        dark: { ink: "#d4d4d4", wash: "#262626", bar: "#737373" },
+    },
+    info: {
+        light: { ink: "#005aba", wash: "#edf6ff", bar: "#2584f5" },
+        dark: { ink: "#83baff", wash: "#172537", bar: "#569fff" },
+    },
+    success: {
+        light: { ink: "#006836", wash: "#e6fcec", bar: "#0a924b" },
+        dark: { ink: "#6cd092", wash: "#132a1b", bar: "#46b86e" },
+    },
+    warning: {
+        light: { ink: "#8e5400", wash: "#fff4d7", bar: "#b67700" },
+        dark: { ink: "#edbb64", wash: "#32230e", bar: "#edbb64" },
+    },
+    danger: {
+        light: { ink: "#b7191c", wash: "#fff0ee", bar: "#e7000b" },
+        dark: { ink: "#ff8482", wash: "#391a17", bar: "#ff6467" },
+    },
+};
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+export function isHexColor(value) {
+    return HEX.test(value);
+}
+function channels(hex) {
+    const full = hex.length === 4 ? hex.replace(/[0-9a-f]/gi, (c) => c + c) : hex;
+    return [1, 3, 5].map((i) => Number.parseInt(full.slice(i, i + 2), 16) / 255);
+}
+/** Luminance relative WCAG 2. */
+function luminance(hex) {
+    const [r, g, b] = channels(hex).map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** Rapport de contraste WCAG 2 entre deux couleurs hex, de 1 à 21. */
+export function contrastRatio(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** Le texte le plus lisible sur un fond : quasi blanc ou quasi noir. */
+export function readableOn(background) {
+    return contrastRatio(background, "#fffffe") >= contrastRatio(background, "#0a0a0a") ? "#fffffe" : "#0a0a0a";
+}

package/dist/email.d.ts

@@ -0,0 +1,71 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type EmailAccent, type EmailTone } from "./email-palette.ts";
+import { type HgdcCatalogProduct } from "./products.ts";
+/**
+ * Modèle des e-mails transactionnels de la famille : une mise en page (`EmailLayout`) et des blocs,
+ * rendus par React Email en HTML pour clients mail (tableaux, styles en ligne, 600 px) et en texte.
+ * Le rendu se fait côté serveur (action Convex `"use node"`, route serveur) : `renderEmail`.
+ */
+/** Où hgdc.ch sert les icônes des e-mails (`packages/ui/email-icons/`). */
+export declare const EMAIL_ICON_BASE = "https://hgdc.ch/email/";
+/** Icône en PNG du produit (`mail` → `https://hgdc.ch/email/mail.png`). */
+export declare function emailIconUrl(word: string): string;
+export type EmailLayoutProps = {
+    /** Produit qui écrit : son mot (« Status ») ou son entrée du catalogue. */
+    product: HgdcCatalogProduct | string;
+    /** Aperçu affiché après l'objet dans la boîte de réception, 90 caractères utiles. */
+    preview: string;
+    children: ReactNode;
+    /** Nom affiché en tête, à la place de celui du produit (page de statut d'un client). */
+    name?: string | undefined;
+    /** Icône en tête, PNG en https ; à la place de celle du produit. */
+    iconSrc?: string | undefined;
+    /** Accent en hex à la place de celui du catalogue (couleur d'un client). */
+    accent?: EmailAccent | string | undefined;
+    /** Ligne au-dessus du pied : pourquoi la personne reçoit l'e-mail, lien de désabonnement. */
+    footer?: ReactNode;
+};
+export declare function EmailLayout({ product: ref, preview, children, name, iconSrc, accent, footer, }: EmailLayoutProps): ReactElement;
+export declare function EmailHeading({ children }: {
+    children: ReactNode;
+}): ReactElement;
+/** Paragraphe. `small` : note secondaire (validité d'un code, « si tu n'as rien demandé »). */
+export declare function EmailText({ children, small }: {
+    children: ReactNode;
+    small?: boolean;
+}): ReactElement;
+/** Lien dans le texte, à la couleur d'accent. */
+export declare function EmailLink({ href, children }: {
+    href: string;
+    children: ReactNode;
+}): ReactElement;
+/** Bouton d'action : un lien direct vers `href`, tel quel, sans redirection de suivi. */
+export declare function EmailButton({ href, children }: {
+    href: string;
+    children: ReactNode;
+}): ReactElement;
+/** Code à usage unique : chiffres à chasse fixe, coupés en deux groupes à l'œil mais copiés d'un bloc. */
+export declare function EmailCode({ code }: {
+    code: string;
+}): ReactElement;
+/** Encadré : une information à ne pas manquer. Le titre porte le sens, jamais la couleur seule. */
+export declare function EmailCallout({ tone, title, children, }: {
+    tone?: EmailTone;
+    title?: ReactNode;
+    children: ReactNode;
+}): ReactElement;
+export declare function EmailDivider(): ReactElement;
+export type EmailDetail = {
+    label: string;
+    value: ReactNode;
+};
+/** Liste clé / valeur : site, heure, durée, organisation. */
+export declare function EmailDetails({ items }: {
+    items: ReadonlyArray<EmailDetail>;
+}): ReactElement;
+export type RenderedEmail = {
+    html: string;
+    text: string;
+};
+/** HTML pour les clients mail et version texte, tirée du même rendu. */
+export declare function renderEmail(element: ReactElement): Promise<RenderedEmail>;

package/dist/email.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Body, Button, Column, Container, Head, Heading, Hr, Html, Img, Link, Preview, Row, Section, Text, render, toPlainText, } from "react-email";
+import { EMAIL_DARK, EMAIL_LIGHT, EMAIL_TONES, HGDC_EMAIL_ACCENT, isHexColor, readableOn, } from "./email-palette.js";
+import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
+/**
+ * Modèle des e-mails transactionnels de la famille : une mise en page (`EmailLayout`) et des blocs,
+ * rendus par React Email en HTML pour clients mail (tableaux, styles en ligne, 600 px) et en texte.
+ * Le rendu se fait côté serveur (action Convex `"use node"`, route serveur) : `renderEmail`.
+ */
+/** Où hgdc.ch sert les icônes des e-mails (`packages/ui/email-icons/`). */
+export const EMAIL_ICON_BASE = "https://hgdc.ch/email/";
+const MAIL_HREF = "https://mail.hgdc.ch";
+const LEGAL = "Hugo Gebel Développement Conseil, Lausanne";
+// Pas de police web : celle du système, Inter ou Geist quand elles sont installées.
+const FONT = 'Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace';
+/** Icône en PNG du produit (`mail` → `https://hgdc.ch/email/mail.png`). */
+export function emailIconUrl(word) {
+    return `${EMAIL_ICON_BASE}${word.toLowerCase()}.png`;
+}
+function findProduct(product) {
+    if (typeof product !== "string")
+        return product;
+    const found = [HGDC_ACCOUNT, ...HGDC_PRODUCTS].find((item) => item.word.toLowerCase() === product.toLowerCase());
+    if (!found)
+        throw new Error(`@hgdc/ui/email : produit inconnu « ${product} »`);
+    return found;
+}
+function resolveAccent(accent, product) {
+    const value = typeof accent === "string" ? { light: accent, dark: accent } : (accent ?? product.accent ?? HGDC_EMAIL_ACCENT);
+    if (!isHexColor(value.light) || !isHexColor(value.dark))
+        throw new Error("@hgdc/ui/email : accent en hex attendu (#8538ee)");
+    return value;
+}
+/** Seuls les liens absolus http(s) et mailto partent dans un e-mail ; ils ne sont jamais réécrits. */
+function assertLink(href) {
+    if (!/^(?:https?:\/\/|mailto:)/i.test(href))
+        throw new Error(`@hgdc/ui/email : lien absolu attendu, reçu « ${href} »`);
+    return href;
+}
+const AccentContext = createContext(HGDC_EMAIL_ACCENT);
+/**
+ * Mode sombre : les clients qui le gèrent (Apple Mail, Outlook macOS et iOS, Outlook.com par
+ * `data-ogsc`/`data-ogsb`) appliquent ces classes ; les autres gardent les couleurs en ligne, claires.
+ */
+function darkStyles(accent) {
+    const d = EMAIL_DARK;
+    const rules = [
+        `body.hg-ground, body.hg-ground > table > tbody > tr > td { background-color: ${d.ground} !important; }`,
+        `.hg-card { background-color: ${d.card} !important; border-color: ${d.border} !important; }`,
+        `.hg-ink { color: ${d.ink} !important; }`,
+        `.hg-body { color: ${d.body} !important; }`,
+        `.hg-muted, .hg-muted a { color: ${d.muted} !important; }`,
+        `.hg-wash { background-color: ${d.wash} !important; }`,
+        `.hg-rule { border-color: ${d.border} !important; }`,
+        `.hg-link { color: ${accent.dark} !important; }`,
+        `.hg-button { background-color: ${accent.dark} !important; color: ${readableOn(accent.dark)} !important; }`,
+        ...Object.entries(EMAIL_TONES).flatMap(([tone, { dark }]) => [
+            `.hg-callout-${tone} { background-color: ${dark.wash} !important; border-color: ${dark.bar} !important; }`,
+            `.hg-tone-${tone} { color: ${dark.ink} !important; }`,
+        ]),
+    ];
+    const outlook = rules.flatMap((rule) => {
+        const [selectors = "", declarations = ""] = rule.split(" {");
+        const scoped = selectors.split(", ").filter((s) => !s.startsWith("body"));
+        return scoped.length
+            ? [`${scoped.map((s) => `[data-ogsc] ${s}, [data-ogsb] ${s}`).join(", ")} {${declarations}`]
+            : [];
+    });
+    return [
+        ":root { color-scheme: light dark; supported-color-schemes: light dark; }",
+        `@media (prefers-color-scheme: dark) { ${rules.join(" ")} }`,
+        ...outlook,
+        "@media only screen and (max-width: 480px) { .hg-pad { padding: 24px 20px !important; } .hg-heading { font-size: 20px !important; line-height: 26px !important; } }",
+    ].join("\n");
+}
+export function EmailLayout({ product: ref, preview, children, name, iconSrc, accent, footer, }) {
+    const product = findProduct(ref);
+    const colors = resolveAccent(accent, product);
+    const l = EMAIL_LIGHT;
+    const muted = { color: l.muted, fontSize: 12, lineHeight: "18px", margin: 0 };
+    return (_jsxs(Html, { lang: "fr", dir: "ltr", children: [_jsxs(Head, { children: [_jsx("meta", { name: "color-scheme", content: "light dark" }), _jsx("meta", { name: "supported-color-schemes", content: "light dark" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("style", { dangerouslySetInnerHTML: { __html: darkStyles(colors) } })] }), _jsx(Preview, { children: preview }), _jsx(Body, { lang: "fr", className: "hg-ground", style: { backgroundColor: l.ground, fontFamily: FONT, margin: 0, padding: "32px 12px" }, children: _jsx(AccentContext, { value: colors, children: _jsxs(Container, { style: { width: "100%", maxWidth: 600 }, children: [_jsx(Section, { style: { padding: "0 4px 16px" }, children: _jsxs(Row, { children: [_jsx(Column, { style: { width: 40, verticalAlign: "middle" }, children: _jsx(Img, { src: assertLink(iconSrc ?? emailIconUrl(product.word)), width: 32, height: 32, alt: "", style: { display: "block", borderRadius: 16 } }) }), _jsx(Column, { style: { verticalAlign: "middle" }, children: _jsx(Text, { className: "hg-ink", style: { color: l.ink, fontSize: 15, fontWeight: 600, lineHeight: "20px", margin: 0 }, children: name ?? product.name }) })] }) }), _jsx(Section, { className: "hg-card", tdClassName: "hg-pad", style: {
+                                    backgroundColor: l.card,
+                                    border: `1px solid ${l.border}`,
+                                    borderRadius: 16,
+                                    padding: "32px 28px",
+                                }, children: children }), _jsxs(Section, { style: { padding: "20px 4px 0" }, children: [footer ? (_jsx(Text, { className: "hg-muted", style: { ...muted, margin: "0 0 12px" }, children: footer })) : null, _jsxs(Text, { className: "hg-muted", style: muted, children: [_jsx(Img, { src: emailIconUrl("mail"), width: 16, height: 16, alt: "", style: { display: "inline-block", verticalAlign: "middle", borderRadius: 8, marginRight: 6 } }), _jsxs("span", { style: { verticalAlign: "middle" }, children: ["Propuls\u00E9 par", " ", _jsx(Link, { href: MAIL_HREF, className: "hg-muted", style: { color: l.muted, textDecoration: "underline" }, children: "HGDC Mail" })] })] }), _jsx(Text, { className: "hg-muted", style: { ...muted, margin: "4px 0 0" }, children: LEGAL })] })] }) }) })] }));
+}
+export function EmailHeading({ children }) {
+    return (_jsx(Heading, { as: "h1", className: "hg-ink hg-heading", style: { color: EMAIL_LIGHT.ink, fontSize: 22, fontWeight: 600, lineHeight: "28px", margin: "0 0 12px" }, children: children }));
+}
+/** Paragraphe. `small` : note secondaire (validité d'un code, « si tu n'as rien demandé »). */
+export function EmailText({ children, small = false }) {
+    return (_jsx(Text, { className: small ? "hg-muted" : "hg-body", style: {
+            color: small ? EMAIL_LIGHT.muted : EMAIL_LIGHT.body,
+            fontSize: small ? 13 : 15,
+            lineHeight: small ? "20px" : "24px",
+            margin: "0 0 16px",
+        }, children: children }));
+}
+/** Lien dans le texte, à la couleur d'accent. */
+export function EmailLink({ href, children }) {
+    const accent = useContext(AccentContext);
+    return (_jsx(Link, { href: assertLink(href), className: "hg-link", style: { color: accent.light, textDecoration: "underline" }, children: children }));
+}
+/** Bouton d'action : un lien direct vers `href`, tel quel, sans redirection de suivi. */
+export function EmailButton({ href, children }) {
+    const accent = useContext(AccentContext);
+    return (_jsx(Section, { style: { margin: "8px 0 24px" }, children: _jsx(Button, { href: assertLink(href), className: "hg-button", style: {
+                backgroundColor: accent.light,
+                borderRadius: 999,
+                color: readableOn(accent.light),
+                fontSize: 15,
+                fontWeight: 600,
+                padding: "12px 24px",
+            }, children: children }) }));
+}
+/** Code à usage unique : chiffres à chasse fixe, coupés en deux groupes à l'œil mais copiés d'un bloc. */
+export function EmailCode({ code }) {
+    const half = code.length >= 6 && code.length % 2 === 0 ? code.length / 2 : code.length;
+    const groups = [code.slice(0, half), code.slice(half)].filter(Boolean);
+    return (_jsx(Section, { className: "hg-wash", style: {
+            backgroundColor: EMAIL_LIGHT.wash,
+            borderRadius: 12,
+            margin: "8px 0 24px",
+            padding: "18px 16px",
+            textAlign: "center",
+        }, children: _jsx(Text, { className: "hg-ink", style: {
+                color: EMAIL_LIGHT.ink,
+                fontFamily: MONO,
+                fontSize: 32,
+                fontWeight: 600,
+                letterSpacing: 6,
+                lineHeight: "40px",
+                margin: 0,
+            }, children: groups.map((group, i) => (_jsx("span", { style: i ? { marginLeft: 14 } : undefined, children: group }, i))) }) }));
+}
+/** Encadré : une information à ne pas manquer. Le titre porte le sens, jamais la couleur seule. */
+export function EmailCallout({ tone = "neutral", title, children, }) {
+    const colors = EMAIL_TONES[tone].light;
+    return (_jsxs(Section, { className: `hg-callout-${tone}`, style: {
+            backgroundColor: colors.wash,
+            borderLeft: `3px solid ${colors.bar}`,
+            borderRadius: 8,
+            margin: "4px 0 20px",
+            padding: "14px 16px",
+        }, children: [title ? (_jsx(Text, { className: `hg-tone-${tone}`, style: { color: colors.ink, fontSize: 14, fontWeight: 600, lineHeight: "20px", margin: "0 0 4px" }, children: title })) : null, _jsx(Text, { className: "hg-body", style: { color: EMAIL_LIGHT.body, fontSize: 14, lineHeight: "22px", margin: 0 }, children: children })] }));
+}
+export function EmailDivider() {
+    return (_jsx(Hr, { className: "hg-rule", style: { border: "none", borderTop: `1px solid ${EMAIL_LIGHT.border}`, margin: "24px 0" } }));
+}
+/** Liste clé / valeur : site, heure, durée, organisation. */
+export function EmailDetails({ items }) {
+    return (_jsx(Section, { style: { margin: "4px 0 20px" }, children: items.map((item, i) => {
+            const cell = {
+                borderTop: i ? `1px solid ${EMAIL_LIGHT.border}` : undefined,
+                padding: "9px 0",
+                verticalAlign: "top",
+            };
+            return (_jsxs(Row, { className: "hg-detail", children: [_jsx(Column, { className: i ? "hg-rule" : undefined, style: { ...cell, width: "38%", paddingRight: 12 }, children: _jsx(Text, { className: "hg-muted", style: { color: EMAIL_LIGHT.muted, fontSize: 13, lineHeight: "20px", margin: 0 }, children: item.label }) }), _jsx(Column, { className: i ? "hg-rule" : undefined, style: cell, children: _jsx(Text, { className: "hg-ink", style: { color: EMAIL_LIGHT.ink, fontSize: 14, lineHeight: "20px", margin: 0 }, children: item.value }) })] }, item.label));
+        }) }));
+}
+const TEXT_SELECTORS = [
+    { selector: "h1", options: { uppercase: false } },
+    // Une ligne par détail, « Libellé   valeur », plutôt que deux paragraphes.
+    { selector: "table.hg-detail", format: "dataTable" },
+];
+/** HTML pour les clients mail et version texte, tirée du même rendu. */
+export async function renderEmail(element) {
+    const html = await render(element);
+    return { html, text: toPlainText(html, { selectors: TEXT_SELECTORS }).trim() };
+}

package/dist/products.d.ts

@@ -1,4 +1,5 @@
 import type { IconSvgElement } from "@hugeicons/react";
+import { type EmailAccent } from "./email-palette.ts";
 /** Où en est un produit : seul ce qui répond s'ouvre depuis les menus. */
 export type ProductStage = "live" | "preview" | "soon";
 export declare const PRODUCT_STAGE_LABEL: Readonly<Record<ProductStage, string>>;
@@ -15,6 +16,11 @@ export type HgdcCatalogProduct = {
     pitch: string;
     icon: IconSvgElement;
     stage: ProductStage;
+    /**
+     * Accent du produit en hex, pour ce qui ne lit pas les jetons CSS (e-mails). Absent : l'accent
+     * violet de la DA. Tous les produits le partagent aujourd'hui ; un écart se décide ici.
+     */
+    accent?: EmailAccent | undefined;
 };
 /** HGDC Account : le compte commun (profil, sécurité, organisations), hors du catalogue des produits. */
 export declare const HGDC_ACCOUNT: HgdcCatalogProduct;

package/dist/products.js

@@ -5,6 +5,7 @@ import Briefcase01Icon from "@hugeicons/core-free-icons/Briefcase01Icon";
 import Mail01Icon from "@hugeicons/core-free-icons/Mail01Icon";
 import Rocket01Icon from "@hugeicons/core-free-icons/Rocket01Icon";
 import UserCircleIcon from "@hugeicons/core-free-icons/UserCircleIcon";
+import { HGDC_EMAIL_ACCENT } from "./email-palette.js";
 export const PRODUCT_STAGE_LABEL = {
     live: "En service",
     preview: "Préversion",
@@ -12,7 +13,16 @@ export const PRODUCT_STAGE_LABEL = {
 };
 function product(word, pitch, icon, stage) {
     const subdomain = `${word.toLowerCase()}.hgdc.ch`;
-    return { word, name: `HGDC ${word}`, subdomain, href: `https://${subdomain}`, pitch, icon, stage };
+    return {
+        word,
+        name: `HGDC ${word}`,
+        subdomain,
+        href: `https://${subdomain}`,
+        pitch,
+        icon,
+        stage,
+        accent: HGDC_EMAIL_ACCENT,
+    };
 }
 /** HGDC Account : le compte commun (profil, sécurité, organisations), hors du catalogue des produits. */
 export const HGDC_ACCOUNT = product("Account", "Ton compte HGDC : profil, sécurité et organisations, pour tous les produits.", UserCircleIcon, "live");
@@ -20,10 +30,10 @@ export const HGDC_ACCOUNT = product("Account", "Ton compte HGDC : profil, sécur
 export const HGDC_PRODUCTS = [
     product("Host", "Ton site en ligne, déployé à chaque modification.", Rocket01Icon, "preview"),
     product("Mail", "Tes e-mails, newsletters et formulaires, envoyés depuis ton adresse.", Mail01Icon, "live"),
-    product("Portal", "Un espace partagé où ton client suit son projet, signe et paie.", Briefcase01Icon, "soon"),
-    product("Status", "La surveillance de tes sites et ta page de statut.", Activity01Icon, "soon"),
-    product("Analytics", "Tes visiteurs mesurés, sans cookies ni bannière.", Analytics01Icon, "soon"),
-    product("Docs", "Ta documentation en ligne, avec un assistant qui y répond.", BookOpen01Icon, "soon"),
+    product("Portal", "Un espace partagé où ton client suit son projet, signe et paie.", Briefcase01Icon, "live"),
+    product("Status", "La surveillance de tes sites et ta page de statut.", Activity01Icon, "live"),
+    product("Analytics", "Tes visiteurs mesurés, sans cookies ni bannière.", Analytics01Icon, "live"),
+    product("Docs", "Ta documentation en ligne, avec un assistant qui y répond.", BookOpen01Icon, "live"),
 ];
 /** Vrai si le produit répond déjà (en service ou en préversion). */
 export function isProductOpen(item) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",
@@ -16,7 +16,8 @@
   },
   "files": [
     "dist",
-    "styles.css"
+    "styles.css",
+    "email-icons"
   ],
   "sideEffects": [
     "*.css"
@@ -24,6 +25,7 @@
   "exports": {
     "./styles.css": "./styles.css",
     "./package.json": "./package.json",
+    "./email-icons/*": "./email-icons/*",
     "./*": {
       "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
@@ -48,6 +50,15 @@
   "peerDependencies": {
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "tailwindcss": "^4.3.3"
+    "tailwindcss": "^4.3.3",
+    "react-email": "^6.11.1"
+  },
+  "peerDependenciesMeta": {
+    "react-email": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "react-email": "6.11.1"
   }
 }