@hgdc/ui 0.24.0 → 0.26.0

package/README.md

@@ -67,14 +67,19 @@ Une seule règle dans les sept produits, posée par la coque :
 
 ## Identité H Collection
 
-| Import                                  | Rôle                                                                                                                                                                                                                                                                                                       |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `product-badge`                         | `<ProductBadge product="host" className="size-8" />` (carré blanc arrondi, la même forme partout), `<FamilyMark />` (le H « Double », clair et sombre selon le thème), `PRODUCT_GRADIENT`                                                                                                                  |
-| `@hgdc/ui/family/<mot>.svg`             | Pictogrammes des produits (`account`, `host`, `mail`, `portal`, `status`, `analytics`, `docs`), originaux du site ; `family/tile/<mot>.svg` (carré blanc arrondi) ; `family/app/<mot>/` : favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, à copier dans `public/` |
-| `@hgdc/ui/family/hcollection-icon*.svg` | Le H « Double », marque de la H Collection, sur fond clair (`hcollection-icon.svg`) ou sombre (`-dark`), jamais recoloré                                                                                                                                                                                   |
-| `styles.css`                            | `--product-<mot>-from` / `--product-<mot>-to` (dégradé de chaque icône sur fond clair), `--glow-blue`, `--glow-violet`, `--glow-pink`, `--glow-orange`                                                                                                                                                     |
+| Import                                  | Rôle                                                                                                                                                                                                                                                                                                                                                             |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `product-badge`                         | `<ProductBadge product="host" className="size-8" />` (carré blanc arrondi, la même forme partout), `<FamilyMark />` (le H « Double », clair et sombre selon le thème), `PRODUCT_GRADIENT`                                                                                                                                                                        |
+| `@hgdc/ui/family/<mot>.svg`             | Pictogrammes des produits (`account`, `host`, `mail`, `portal`, `status`, `analytics`, `docs`), originaux du site ; `family/tile/<mot>.svg` (carré blanc arrondi) ; `family/app/<mot>/` : favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, posés dans `public/` au build par `hgdc-brand sync <mot>` (jamais versionnés) |
+| `@hgdc/ui/family/hcollection-icon*.svg` | Le H « Double », marque de la H Collection, sur fond clair (`hcollection-icon.svg`) ou sombre (`-dark`), jamais recoloré                                                                                                                                                                                                                                         |
+| `styles.css`                            | `--product-<mot>-from` / `--product-<mot>-to` (dégradé de chaque icône sur fond clair), `--glow-blue`, `--glow-violet`, `--glow-pink`, `--glow-orange`                                                                                                                                                                                                           |
 
-Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)`, jamais `in oklch`. Une icône de produit se pose toujours sur son fond blanc, en clair comme en sombre, sans bordure ni ombre : carré arrondi 22 % partout, pictogramme à 12 % de marge (barre, menu, « Propulsé par », e-mails, icône d'app), plein cadre pour apple-touch et maskable. Le favicon est sans fond et suit le thème du système (ADR 0017). Le H reste sans fond. Les originaux vivent dans le dépôt du site hgdc.ch : les recopier dans `packages/ui/family/`, puis `bun scripts/family.ts && bun run format` (SVG embarqués et PNG des e-mails).
+Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)`, jamais `in oklch`. Une icône de produit se pose toujours sur son fond blanc, en clair comme en sombre, sans bordure ni ombre : carré arrondi 22 % partout, pictogramme à 12 % de marge (barre, menu, « Propulsé par », e-mails, icône d'app), plein cadre pour apple-touch et maskable. Le favicon est sans fond et suit le thème du système (ADR 0017). Le H reste sans fond. Les originaux vivent dans le dépôt du site hgdc.ch : les recopier dans `packages/ui/family/`, puis `bun scripts/family.ts && bun run format` (SVG embarqués, PNG des e-mails, icônes d'application). Geste complet : `docs/runbooks/changer-une-icone.md`.
+
+**`hgdc-brand`** (bin de ce paquet) pose les icônes du kit au build, rien n'est recopié à la main :
+
+- produit : `"build": "hgdc-brand sync mail && vite build"` (et en tête de `dev`), les six fichiers de `family/app/<mot>/` dans `public/`, listés dans le `.gitignore` ; `--email-as <fichier>` y ajoute l'icône d'e-mail du produit sous un ancien nom ;
+- site hgdc.ch : `hgdc-brand emails public/email`, les `<mot>.png` servis à `EMAIL_ICON_BASE`.
 
 Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisation en haut, pastilles des produits ouverts, Account en bas, chacun par son entrée `/auth/hgdc?next=/`, le produit courant en teinte. Au survol (150 ms d'intention) ou au focus clavier, elle s'élargit par-dessus la page et écrit les noms. `productRail={false}` la coupe ; `accountHref` pointe vers un Account local. La barre latérale porte la marque du produit et se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. En rail, la pastille du produit devient le bouton « Déplier » au survol. Le kit ne connaît ni routeur ni authentification : liens par `render={<Link />}`, actions par callbacks. Rôles d'organisation : `owner`, `admin`, `member` (Propriétaire, Admin, Membre).
 
@@ -172,7 +177,7 @@ const { html, text } = await renderEmail(
 | `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/`, tirés des pastilles par `bun scripts/family.ts`). Un exemple par type : `scripts/email-showcase.tsx`.
+L'accent vient du catalogue (`accent` de `@hgdc/ui/products`), les icônes de `emailIconUrl(mot)` (aussi dans `@hgdc/ui/email-icon`, sans React Email, pour un HTML assemblé à la main) : `https://hgdc.ch/email/<mot>.png?v=<empreinte>` (fichiers dans `@hgdc/ui/email-icons/`, tirés des pastilles par `bun scripts/family.ts` ; l'empreinte `EMAIL_ICON_VERSION` change avec l'image et fait recharger les clients mail qui l'ont en cache). Un exemple par type : `scripts/email-showcase.tsx`.
 
 ## Règles de la DA
 

package/dist/account-menu.d.ts

@@ -20,7 +20,7 @@ export type AccountUser = {
     image?: string | null;
 };
 /**
- * Le menu du compte, en bas de la barre latérale : profil, sécurité, thème, raccourcis, autres
+ * Le menu du compte, en bas de la barre latérale : profil, sécurité, choix du thème en trois icônes, raccourcis, autres
  * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.

package/dist/account-menu.js

@@ -1,26 +1,22 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ComputerIcon from "@hugeicons/core-free-icons/ComputerIcon";
 import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
 import KeyboardIcon from "@hugeicons/core-free-icons/KeyboardIcon";
 import Logout01Icon from "@hugeicons/core-free-icons/Logout01Icon";
-import Moon02Icon from "@hugeicons/core-free-icons/Moon02Icon";
 import SecurityLockIcon from "@hugeicons/core-free-icons/SecurityLockIcon";
-import Sun03Icon from "@hugeicons/core-free-icons/Sun03Icon";
 import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
 import UserIcon from "@hugeicons/core-free-icons/UserIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { initials } from "./initials.js";
 import { MENU_LINK_ITEM } from "./org-switcher.js";
 import { ProductBadge } from "./product-badge.js";
 import { productMenuEntries } from "./products.js";
 import { useLeaveOnClick, useProductRailShown } from "./shell-placement.js";
-import { useTheme } from "./theme.js";
-const THEMES = ["light", "dark", "system"];
+import { ThemeSwitch } from "./theme-switch.js";
 /**
- * Le menu du compte, en bas de la barre latérale : profil, sécurité, thème, raccourcis, autres
+ * Le menu du compte, en bas de la barre latérale : profil, sécurité, choix du thème en trois icônes, raccourcis, autres
  * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
@@ -31,15 +27,10 @@ const THEMES = ["light", "dark", "system"];
  * liste ; `products={[]}` la retire.
  */
 export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
-    const { theme, setTheme } = useTheme();
     const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
     const railShown = useProductRailShown();
     const leaveOnClick = useLeaveOnClick();
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(HugeiconsIcon, { icon: theme === "dark" ? Moon02Icon : theme === "light" ? Sun03Icon : ComputerIcon, "aria-hidden": true }), "Th\u00E8me"] }), _jsx(DropdownMenuSubContent, { children: _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: (value) => {
-                                        const next = THEMES.find((t) => t === value);
-                                        if (next)
-                                            setTheme(next);
-                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsx(ThemeSwitch, {}), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }
 function ProductMenuIcon({ product }) {
     if (product.badge)

package/dist/brand.d.ts

@@ -0,0 +1,14 @@
+/** Fichiers de `family/app/<mot>/`, servis à la racine du produit (favicon, icônes d'application). */
+export declare const APP_ICON_FILES: readonly ["favicon.svg", "favicon.ico", "apple-touch-icon.png", "icon-192.png", "icon-512.png", "icon-maskable-512.png"];
+export type Copy = Readonly<{
+    from: string;
+    to: string;
+}>;
+/**
+ * Copies qui posent les icônes d'un produit dans `publicDir` : `family/app/<mot>/*`, plus l'icône
+ * d'e-mail du produit sous chaque nom de `emailAs` (adresses déjà parties dans des e-mails).
+ */
+export declare function appIconCopies(word: string, publicDir: string, emailAs?: ReadonlyArray<string>): Array<Copy>;
+/** Copies des icônes d'e-mail de tous les produits (`<mot>.png`) dans `dir`, pour le site qui les sert. */
+export declare function emailIconCopies(dir: string): Array<Copy>;
+export declare function runCopies(copies: ReadonlyArray<Copy>): Promise<void>;

package/dist/brand.js

@@ -0,0 +1,58 @@
+// Copie des icônes du kit dans un produit ou un site, au build et au démarrage du dev (`hgdc-brand`).
+// Les produits ne versionnent plus ces fichiers : les icônes suivent la version de `@hgdc/ui`
+// installée (ADR 0017, runbook `docs/runbooks/changer-une-icone.md`).
+import { copyFile, mkdir } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { FAMILY_PRODUCTS, isFamilyProduct } from "./family-svg.js";
+const PACKAGE_ROOT = fileURLToPath(new URL("../", import.meta.url));
+/** Fichiers de `family/app/<mot>/`, servis à la racine du produit (favicon, icônes d'application). */
+export const APP_ICON_FILES = [
+    "favicon.svg",
+    "favicon.ico",
+    "apple-touch-icon.png",
+    "icon-192.png",
+    "icon-512.png",
+    "icon-maskable-512.png",
+];
+function assertProduct(word) {
+    if (!isFamilyProduct(word))
+        throw new Error(`produit inconnu « ${word} » (attendu : ${FAMILY_PRODUCTS.join(", ")})`);
+    return word;
+}
+/** Nom de fichier simple, sans dossier : une copie ne sort jamais du dossier cible. */
+function assertFileName(name) {
+    if (!/^[\w.-]+$/.test(name) || name.startsWith("."))
+        throw new Error(`nom de fichier invalide « ${name} »`);
+    return name;
+}
+/**
+ * Copies qui posent les icônes d'un produit dans `publicDir` : `family/app/<mot>/*`, plus l'icône
+ * d'e-mail du produit sous chaque nom de `emailAs` (adresses déjà parties dans des e-mails).
+ */
+export function appIconCopies(word, publicDir, emailAs = []) {
+    const product = assertProduct(word);
+    return [
+        ...APP_ICON_FILES.map((file) => ({
+            from: join(PACKAGE_ROOT, "family", "app", product, file),
+            to: join(publicDir, file),
+        })),
+        ...emailAs.map((name) => ({
+            from: join(PACKAGE_ROOT, "email-icons", `${product}.png`),
+            to: join(publicDir, assertFileName(name)),
+        })),
+    ];
+}
+/** Copies des icônes d'e-mail de tous les produits (`<mot>.png`) dans `dir`, pour le site qui les sert. */
+export function emailIconCopies(dir) {
+    return FAMILY_PRODUCTS.map((product) => ({
+        from: join(PACKAGE_ROOT, "email-icons", `${product}.png`),
+        to: join(dir, `${product}.png`),
+    }));
+}
+export async function runCopies(copies) {
+    for (const { from, to } of copies) {
+        await mkdir(dirname(to), { recursive: true });
+        await copyFile(from, to);
+    }
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+// hgdc-brand : pose les icônes du kit dans un produit ou un site (src/brand.ts).
+import { resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { appIconCopies, emailIconCopies, runCopies } from "./brand.js";
+const USAGE = `Usage : hgdc-brand <commande>
+
+  sync <mot> [--public <dossier>] [--email-as <fichier>]...
+      pose favicon et icônes d'application du produit dans public/ (défaut : ./public) ;
+      --email-as copie aussi son icône d'e-mail sous ce nom (adresse déjà envoyée)
+  emails <dossier>
+      pose les icônes d'e-mail de tous les produits (<mot>.png) dans le dossier
+
+Les fichiers posés ne se versionnent pas : les lister dans le .gitignore.`;
+const { positionals, values } = parseArgs({
+    allowPositionals: true,
+    options: {
+        public: { type: "string", default: "public" },
+        "email-as": { type: "string", multiple: true, default: [] },
+        help: { type: "boolean", short: "h", default: false },
+    },
+});
+if (values.help) {
+    console.log(USAGE);
+    process.exit(0);
+}
+const [command, target] = positionals;
+try {
+    if (command === "sync" && target) {
+        const copies = appIconCopies(target, resolve(values.public), values["email-as"]);
+        await runCopies(copies);
+        console.log(`hgdc-brand : ${copies.length} icônes de ${target} posées dans ${values.public}/`);
+    }
+    else if (command === "emails" && target) {
+        const copies = emailIconCopies(resolve(target));
+        await runCopies(copies);
+        console.log(`hgdc-brand : ${copies.length} icônes d'e-mail posées dans ${target}/`);
+    }
+    else {
+        console.error(USAGE);
+        process.exit(2);
+    }
+}
+catch (error) {
+    console.error(`hgdc-brand : ${error instanceof Error ? error.message : String(error)}`);
+    process.exit(1);
+}

package/dist/email-icon.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Seule adresse des icônes des e-mails : hgdc.ch les sert depuis `packages/ui/email-icons/`, posées
+ * à son build par `hgdc-brand emails public/email`.
+ */
+export declare const EMAIL_ICON_BASE = "https://hgdc.ch/email/";
+/**
+ * Icône en PNG du produit (`mail` → `https://hgdc.ch/email/mail.png?v=<empreinte>`). L'empreinte
+ * change avec l'image : un client mail qui l'a gardée en cache charge la nouvelle.
+ */
+export declare function emailIconUrl(word: string): string;

package/dist/email-icon.js

@@ -0,0 +1,17 @@
+// Adresse des icônes des e-mails, sans React Email : un code serveur qui assemble son propre HTML
+// (filigrane de Mail) l'importe sans tirer le modèle (`@hgdc/ui/email-icon`).
+import { EMAIL_ICON_VERSION, isFamilyProduct } from "./family-svg.js";
+/**
+ * Seule adresse des icônes des e-mails : hgdc.ch les sert depuis `packages/ui/email-icons/`, posées
+ * à son build par `hgdc-brand emails public/email`.
+ */
+export const EMAIL_ICON_BASE = "https://hgdc.ch/email/";
+/**
+ * Icône en PNG du produit (`mail` → `https://hgdc.ch/email/mail.png?v=<empreinte>`). L'empreinte
+ * change avec l'image : un client mail qui l'a gardée en cache charge la nouvelle.
+ */
+export function emailIconUrl(word) {
+    const product = word.toLowerCase();
+    const url = `${EMAIL_ICON_BASE}${product}.png`;
+    return isFamilyProduct(product) ? `${url}?v=${EMAIL_ICON_VERSION[product]}` : url;
+}

package/dist/email.d.ts

@@ -1,15 +1,13 @@
 import { type ReactElement, type ReactNode } from "react";
 import { type EmailAccent, type EmailTone } from "./email-palette.ts";
+import { EMAIL_ICON_BASE, emailIconUrl } from "./email-icon.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 { EMAIL_ICON_BASE, emailIconUrl };
 export type EmailLayoutProps = {
     /** Produit qui écrit : son mot (« Status ») ou son entrée du catalogue. */
     product: HgdcCatalogProduct | string;

package/dist/email.js

@@ -2,23 +2,19 @@ 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 { EMAIL_ICON_BASE, emailIconUrl } from "./email-icon.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/";
+export { EMAIL_ICON_BASE, emailIconUrl };
 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;

package/dist/family-svg.d.ts

@@ -13,5 +13,10 @@ export type ThemedSvg = Readonly<{
  * sombre (`family/tile/<mot>.svg`).
  */
 export declare const PRODUCT_BADGE_SVG: Readonly<Record<FamilyProduct, string>>;
+/**
+ * Empreinte de chaque icône d'e-mail (`email-icons/<mot>.png`), ajoutée à son adresse : un client
+ * mail qui garde l'ancienne image en cache (proxy d'images de Gmail) charge la nouvelle.
+ */
+export declare const EMAIL_ICON_VERSION: Readonly<Record<FamilyProduct, string>>;
 /** SVG du H « Double », la marque de la H Collection, sans fond (`family/hcollection-icon(-dark).svg`). */
 export declare const FAMILY_MARK_SVG: ThemedSvg;

package/dist/family-svg.js

@@ -18,6 +18,19 @@ export const PRODUCT_BADGE_SVG = {
     analytics: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="15 15 34 34"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#e58309"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
     docs: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ec1dc"/><stop offset="1" stop-color="#0aa3c1"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/></svg></svg>',
 };
+/**
+ * Empreinte de chaque icône d'e-mail (`email-icons/<mot>.png`), ajoutée à son adresse : un client
+ * mail qui garde l'ancienne image en cache (proxy d'images de Gmail) charge la nouvelle.
+ */
+export const EMAIL_ICON_VERSION = {
+    account: "2263211d",
+    host: "ceb0451c",
+    mail: "5c18df41",
+    portal: "e18dd184",
+    status: "3f91af62",
+    analytics: "be693909",
+    docs: "4f1fb8a0",
+};
 /** SVG du H « Double », la marque de la H Collection, sans fond (`family/hcollection-icon(-dark).svg`). */
 export const FAMILY_MARK_SVG = {
     light: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 9 46 46"><defs><linearGradient id="hl" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="hr" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="hf" x1="24.5" y1="0" x2="34.5" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#000"/></linearGradient><mask id="hm" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="64"><rect x="24" y="24" width="11" height="11" fill="url(#hf)"/></mask><g id="h"><path d="M24 25H35V34H24Z" fill="url(#hr)"/><path d="M24 25H35V34H24Z" fill="url(#hl)" mask="url(#hm)"/><path d="M17.5 11.5H21.5A3 3 0 0 1 24.5 14.5V44.5A3 3 0 0 1 21.5 47.5H17.5A3 3 0 0 1 14.5 44.5V14.5A3 3 0 0 1 17.5 11.5Z" fill="url(#hl)"/><path d="M37.5 11.5H41.5A3 3 0 0 1 44.5 14.5V44.5A3 3 0 0 1 41.5 47.5H37.5A3 3 0 0 1 34.5 44.5V14.5A3 3 0 0 1 37.5 11.5Z" fill="url(#hr)"/></g></defs><use href="#h" transform="translate(6 6)" opacity="0.35"/><use href="#h"/></svg>',

package/dist/theme-switch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Le choix du thème en trois icônes dans une pilule (Système, Clair, Sombre), à poser dans un
+ * menu : chaque choix est une entrée du menu, qui ne se ferme pas. Flèches gauche et droite
+ * passent d'un choix à l'autre et l'appliquent ; le thème vient de `ThemeProvider`.
+ */
+export declare function ThemeSwitch({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/theme-switch.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ComputerIcon from "@hugeicons/core-free-icons/ComputerIcon";
+import Moon02Icon from "@hugeicons/core-free-icons/Moon02Icon";
+import Sun03Icon from "@hugeicons/core-free-icons/Sun03Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { useRef } from "react";
+import { cn } from "./cn.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { useTheme } from "./theme.js";
+const CHOICES = [
+    { value: "system", label: "Système", icon: ComputerIcon },
+    { value: "light", label: "Clair", icon: Sun03Icon },
+    { value: "dark", label: "Sombre", icon: Moon02Icon },
+];
+/**
+ * Le choix du thème en trois icônes dans une pilule (Système, Clair, Sombre), à poser dans un
+ * menu : chaque choix est une entrée du menu, qui ne se ferme pas. Flèches gauche et droite
+ * passent d'un choix à l'autre et l'appliquent ; le thème vient de `ThemeProvider`.
+ */
+export function ThemeSwitch({ className }) {
+    const { theme, setTheme } = useTheme();
+    const group = useRef(null);
+    function onKeyDown(event) {
+        const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+        if (step === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const index = CHOICES.findIndex((choice) => choice.value === theme);
+        const next = CHOICES[(index + step + CHOICES.length) % CHOICES.length];
+        if (!next)
+            return;
+        setTheme(next.value);
+        group.current?.querySelector(`[data-theme-choice="${next.value}"]`)?.focus();
+    }
+    const current = CHOICES.find((choice) => choice.value === theme);
+    return (_jsxs("div", { className: cn("flex items-center gap-2.5 px-3 py-[3px] text-sm font-medium max-lg:min-h-11 coarse:min-h-11", className), children: [_jsx(HugeiconsIcon, { icon: current?.icon ?? ComputerIcon, "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "flex-1", children: "Th\u00E8me" }), _jsx("div", { ref: group, role: "radiogroup", "aria-label": "Th\u00E8me", tabIndex: -1, onKeyDown: onKeyDown, className: "flex w-fit items-center gap-0.5 rounded-full border border-border p-0.5", children: CHOICES.map(({ value, label, icon }) => {
+                    const active = theme === value;
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(MenuPrimitive.Item, { closeOnClick: false, role: "radio", "aria-checked": active, "aria-label": label, "data-theme-choice": value, onClick: () => setTheme(value), className: cn("touch-target grid size-6 cursor-default place-items-center rounded-full outline-none", "transition-colors duration-(--duration-fast) ease-out focus-visible:ring-2 focus-visible:ring-ring/50", active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground") }), children: _jsx(HugeiconsIcon, { icon: icon, "aria-hidden": true, className: "size-3.5" }) }), _jsx(TooltipContent, { children: label })] }, value));
+                }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",
@@ -20,6 +20,9 @@
     "email-icons",
     "family"
   ],
+  "bin": {
+    "hgdc-brand": "./dist/cli.js"
+  },
   "sideEffects": [
     "*.css"
   ],
@@ -34,7 +37,7 @@
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json"
+    "build": "tsc -p tsconfig.build.json && tsc -p tsconfig.cli.json"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",