@hgdc/ui 0.5.1 → 0.7.0

package/README.md

@@ -99,6 +99,8 @@ Filtres, tri et page vivent dans l'URL du produit : les composants sont contrôl
 | `money-field`       | `<MoneyField value={centimes} onChange={…} />` : CHF en centimes, « 1’250.50 », accepte « 12.– » ; `formatChf`, `parseMoney`                           |
 | `address-fields`    | `<AddressFields value={address} onChange={…} errors={validatePostalAddress(address)} />` : rue, numéro, NPA, localité, pays (facture QR)               |
 
+`access-request` : `<AccessRequest endpoint="https://<deploiement>.convex.site/f/<id>" product="HGDC Mail" signInRender={<Link to="/sign-in" />} />`, la page « Demander un accès » d'un produit (les comptes HGDC s'ouvrent sur invitation). Poste en JSON vers un formulaire HGDC Mail Forms : prénom, nom, entreprise, e-mail professionnel, message facultatif, `produit` caché, piège `_gotcha`. États envoi, réussite, erreur, champ refusé ; `submitAccessRequest` s'appelle seul.
+
 Les champs de date sont ceux du navigateur, sans calendrier maison (ADR 0006). Les fonctions pures (`parseMoney`, `contrastRatio`, `validatePostalAddress`, `formatDateRange`) s'importent seules, côté serveur aussi.
 
 ## Contrôles et surfaces flottantes
@@ -111,6 +113,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 +153,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/access-request.d.ts

@@ -0,0 +1,50 @@
+import type { ReactElement, ReactNode } from "react";
+/**
+ * Demander un accès à un produit de la famille, sans compte : les comptes HGDC s'ouvrent sur
+ * invitation. Le formulaire poste en JSON vers un formulaire HGDC Mail Forms (`POST /f/<id>`,
+ * réponse `{ ok }` ou `{ ok: false, error: { code }, errors }`) ; l'équipe reçoit l'avis et
+ * invite depuis HGDC Account. Le texte est au tutoiement, comme les pages publiques de la famille.
+ */
+export type AccessRequestValues = {
+    prenom: string;
+    nom: string;
+    entreprise: string;
+    email: string;
+    message: string;
+};
+export declare const EMPTY_ACCESS_REQUEST: AccessRequestValues;
+/** Ce qu'il faut de `fetch` : une adresse et une requête. */
+export type AccessRequestFetcher = (url: string, init: RequestInit) => Promise<Response>;
+export type AccessRequestResult = {
+    kind: "sent";
+} | {
+    kind: "invalid";
+    errors: Record<string, string>;
+} | {
+    kind: "failed";
+    message: string;
+};
+/**
+ * Envoie la demande et traduit la réponse. Fonction pure à part du composant : un produit peut
+ * l'appeler depuis son propre formulaire. `trap` est le piège à robots (`_gotcha`), vide pour un humain.
+ */
+export declare function submitAccessRequest(endpoint: string, values: AccessRequestValues, product: string, { trap, fetcher }?: {
+    trap?: string;
+    fetcher?: AccessRequestFetcher;
+}): Promise<AccessRequestResult>;
+export declare function AccessRequest({ endpoint, product, title, description, messageLabel, signInHref, signInRender, homeHref, homeRender, fetcher, }: {
+    /** Adresse d'envoi du formulaire Forms : `https://<deploiement>.convex.site/f/<id>`. */
+    endpoint: string;
+    /** Nom affiché et valeur du champ caché `produit` : « HGDC Mail ». */
+    product: string;
+    title?: string;
+    description?: ReactNode;
+    messageLabel?: string;
+    signInHref?: string;
+    /** Lien du routeur du produit vers la connexion : `signInRender={<Link to="/sign-in" />}`. */
+    signInRender?: ReactElement;
+    homeHref?: string;
+    homeRender?: ReactElement;
+    /** Pour les tests. */
+    fetcher?: AccessRequestFetcher;
+}): React.JSX.Element;

package/dist/access-request.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useState } from "react";
+import { Alert } from "./alert.js";
+import { Button, buttonVariants } from "./button.js";
+import { Field, FieldError, FieldLabel } from "./field.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+export const EMPTY_ACCESS_REQUEST = { prenom: "", nom: "", entreprise: "", email: "", message: "" };
+/** Les refus de l'endpoint, dits au tutoiement. */
+const FAILURES = {
+    rate_limited: "Trop d'envois en peu de temps. Réessaie dans une minute.",
+    origin_not_allowed: "Ce formulaire ne s'envoie que depuis le site de HGDC.",
+    form_closed: "Les demandes d'accès sont fermées pour le moment. Réessaie plus tard.",
+};
+/**
+ * Envoie la demande et traduit la réponse. Fonction pure à part du composant : un produit peut
+ * l'appeler depuis son propre formulaire. `trap` est le piège à robots (`_gotcha`), vide pour un humain.
+ */
+export async function submitAccessRequest(endpoint, values, product, { trap = "", fetcher = (url, init) => fetch(url, init) } = {}) {
+    let result;
+    try {
+        const response = await fetcher(endpoint, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", Accept: "application/json" },
+            body: JSON.stringify({ ...values, produit: product, _gotcha: trap }),
+        });
+        result = (await response.json());
+    }
+    catch {
+        return { kind: "failed", message: "Impossible d'envoyer la demande. Vérifie ta connexion et réessaie." };
+    }
+    if (result.ok)
+        return { kind: "sent" };
+    if (result.errors && Object.keys(result.errors).length)
+        return { kind: "invalid", errors: result.errors };
+    return {
+        kind: "failed",
+        message: FAILURES[result.error?.code ?? ""] ?? "La demande n'est pas partie. Réessaie dans un instant.",
+    };
+}
+function LinkSlot({ href, render, className, children, }) {
+    return useRender({
+        defaultTagName: "a",
+        render,
+        props: mergeProps({ className, children }, render ? {} : { href }),
+    });
+}
+export function AccessRequest({ endpoint, product, title = `Demander un accès à ${product}`, description = "Les comptes HGDC s'ouvrent sur invitation. Dis-nous qui tu es : on te répond rapidement et, si c'est bon, tu reçois une invitation par e-mail.", messageLabel = "Ton projet, en quelques mots (facultatif)", signInHref = "/sign-in", signInRender, homeHref = "/", homeRender, fetcher, }) {
+    const [values, setValues] = useState(EMPTY_ACCESS_REQUEST);
+    const [trap, setTrap] = useState("");
+    const [pending, setPending] = useState(false);
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [failure, setFailure] = useState(null);
+    const [sentTo, setSentTo] = useState(null);
+    const set = (key) => (event) => {
+        setValues((current) => ({ ...current, [key]: event.target.value }));
+        setFieldErrors(({ [key]: _gone, ...rest }) => rest);
+    };
+    async function submit(event) {
+        event.preventDefault();
+        setPending(true);
+        setFailure(null);
+        setFieldErrors({});
+        const result = await submitAccessRequest(endpoint, values, product, { trap, ...(fetcher ? { fetcher } : {}) });
+        if (result.kind === "sent")
+            setSentTo(values.email.trim());
+        else if (result.kind === "invalid")
+            setFieldErrors(result.errors);
+        else
+            setFailure(result.message);
+        setPending(false);
+    }
+    if (sentTo) {
+        return (_jsxs("div", { "data-slot": "access-request", className: "grid rise gap-6", children: [_jsx(HugeiconsIcon, { icon: CheckmarkCircle02Icon, className: "size-10 pop-in text-status-active" }), _jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-semibold text-balance", children: "Demande envoy\u00E9e" }), _jsxs("p", { className: "mt-2 text-muted-foreground", children: ["Merci. Un accus\u00E9 de r\u00E9ception part vers ", sentTo, ". Si ta demande est accept\u00E9e, tu re\u00E7ois une invitation de HGDC Account pour cr\u00E9er ton compte."] })] }), _jsx(LinkSlot, { href: homeHref, render: homeRender, className: buttonVariants({ variant: "outline", size: "lg" }), children: "Retour \u00E0 l'accueil" })] }, "access-done"));
+    }
+    const invalid = (key) => (fieldErrors[key] ? true : undefined);
+    const field = (key, label, input) => (_jsxs(Field, { "data-invalid": invalid(key), children: [_jsx(FieldLabel, { htmlFor: `acces-${key}`, children: label }), input, fieldErrors[key] ? _jsx(FieldError, { children: fieldErrors[key] }) : null] }));
+    const text = (key, autoComplete, max, type = "text") => (_jsx(Input, { id: `acces-${key}`, type: type, autoComplete: autoComplete, required: true, maxLength: max, value: values[key], onChange: set(key), "aria-invalid": invalid(key) }));
+    return (_jsxs("form", { "data-slot": "access-request", onSubmit: submit, className: "grid rise gap-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-semibold text-balance", children: title }), description ? _jsx("p", { className: "mt-2 text-muted-foreground", children: description }) : null] }), failure ? (_jsx(Alert, { tone: "destructive", role: "alert", children: failure })) : null, _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [field("prenom", "Prénom", text("prenom", "given-name", 100)), field("nom", "Nom", text("nom", "family-name", 100))] }), field("entreprise", "Entreprise", text("entreprise", "organization", 120)), field("email", "E-mail professionnel", text("email", "email", 320, "email")), field("message", messageLabel, _jsx(Textarea, { id: "acces-message", rows: 3, maxLength: 2000, value: values.message, onChange: set("message"), "aria-invalid": invalid("message") })), _jsx("input", { type: "text", name: "_gotcha", tabIndex: -1, autoComplete: "off", "aria-hidden": "true", value: trap, onChange: (e) => setTrap(e.target.value), className: "absolute -left-[9999px] size-px opacity-0" })] }), _jsx(Button, { type: "submit", size: "lg", isLoading: pending, children: "Envoyer la demande" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["D\u00E9j\u00E0 un compte HGDC ?", " ", _jsx(LinkSlot, { href: signInHref, render: signInRender, className: "font-medium text-foreground underline-offset-4 hover:underline", children: "Se connecter" })] })] }, "access"));
+}

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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.5.1",
+  "version": "0.7.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"
   }
 }