@hgdc/ui 0.17.0 → 0.17.2

package/README.md

@@ -1,6 +1,6 @@
 # @hgdc/ui
 
-Interface de la H family : jetons de la DA, thèmes clair et sombre, polices, composants de base et coque des consoles, pour une application React 19 + Tailwind v4.
+Interface de la H Collection : jetons de la DA, thèmes clair et sombre, polices, composants de base et coque des consoles, pour une application React 19 + Tailwind v4.
 
 ```sh
 bun add @hgdc/ui
@@ -65,7 +65,7 @@ Une seule règle dans les sept produits, posée par la coque :
 - **États vides** : `<Empty variant="card">` pour une page vide, icône monochrome (`EmptyMedia variant="icon"`), sans teinte de couleur.
 - **Rôles et initiales** : `RoleBadge` (neutre), `MemberItem`, `initials`. Jamais une fonction d'initiales ou un badge de rôle dans un produit.
 
-## Identité H family
+## Identité H Collection
 
 | Import                         | Rôle                                                                                                                                       |
 | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -158,18 +158,18 @@ const { html, text } = await renderEmail(
 )
 ```
 
-| Bloc           | Rôle                                                                                                                                                 |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `EmailLayout`  | Icône et nom du produit, carte, pied « Envoyé avec Mail de la H family » 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                                                                                  |
+| Bloc           | Rôle                                                                                                                                                     |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `EmailLayout`  | Icône et nom du produit, carte, pied « Envoyé avec Mail de la H Collection » 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/`, tirés des pastilles par `bun scripts/family.ts`). Un exemple par type : `scripts/email-showcase.tsx`.
 

package/dist/email.js

@@ -85,7 +85,7 @@ export function EmailLayout({ product: ref, preview, children, name, iconSrc, ac
                                     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: ["Envoy\u00E9 avec", " ", _jsx(Link, { href: MAIL_HREF, className: "hg-muted", style: { color: l.muted, textDecoration: "underline" }, children: "Mail de la H family" })] })] }), _jsx(Text, { className: "hg-muted", style: { ...muted, margin: "4px 0 0" }, children: LEGAL })] })] }) }) })] }));
+                                }, 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: ["Envoy\u00E9 avec", " ", _jsx(Link, { href: MAIL_HREF, className: "hg-muted", style: { color: l.muted, textDecoration: "underline" }, children: "Mail de la H Collection" })] })] }), _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 }));

package/dist/family-loader.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef } from "react";
 import { cn } from "./cn.js";
+import { useBackgroundOrganizationRefresh } from "./product-switch.js";
 const SIZES = { sm: 24, md: 40, lg: 64 };
 /** Durée de la boucle du H (`styles.css`, `.family-loader [data-fill]`). */
 export const FAMILY_LOADER_PERIOD_MS = 2000;
@@ -105,6 +106,8 @@ export function FamilyLoaderHost() {
  * que dans la coque et que dans le produit qu'on vient de quitter (ADR 0015).
  */
 export function FamilyLoaderRoot({ children }) {
+    // Une fois par document : relecture des organisations après un passage depuis la barre (ADR 0016).
+    useBackgroundOrganizationRefresh();
     return (_jsxs(FamilyLoaderRootContext, { value: true, children: [children, _jsx(FamilyLoaderHost, {})] }));
 }
 /**

package/dist/family-svg.d.ts

@@ -1,4 +1,4 @@
-/** Les produits de la H family qui ont une pastille, par leur mot en minuscules. */
+/** Les produits de la H Collection qui ont une pastille, par leur mot en minuscules. */
 export declare const FAMILY_PRODUCTS: readonly ["account", "host", "mail", "portal", "status", "analytics", "docs"];
 export type FamilyProduct = (typeof FAMILY_PRODUCTS)[number];
 /** Vrai si le mot en minuscules (« host ») désigne un produit qui a une pastille. */

package/dist/family-svg.js

@@ -1,5 +1,5 @@
 // Généré par `bun scripts/family.ts` depuis `packages/ui/family/`. Ne pas modifier à la main.
-/** Les produits de la H family qui ont une pastille, par leur mot en minuscules. */
+/** Les produits de la H Collection qui ont une pastille, par leur mot en minuscules. */
 export const FAMILY_PRODUCTS = ["account", "host", "mail", "portal", "status", "analytics", "docs"];
 /** Vrai si le mot en minuscules (« host ») désigne un produit qui a une pastille. */
 export function isFamilyProduct(word) {

package/dist/product-switch.d.ts

@@ -22,8 +22,14 @@ export declare function takeOrgSyncCookie(doc?: Document): boolean;
  */
 export declare function startBackgroundRefresh(doc?: Document): HTMLIFrameElement | null;
 /**
- * À monter une fois par document dans la coque (`AppShell` le fait) : relecture en arrière-plan
- * après un passage depuis la barre, et préchargement au survol des autres produits. Le cadre vit
- * hors de l'arbre React : un démontage ne l'interrompt pas, il se retire seul.
+ * Relecture en arrière-plan si l'entrée l'a demandé. Montée à la racine du document
+ * (`FamilyLoaderRoot`), pour toutes les pages, y compris celles hors de la coque : la page « il te
+ * faut une organisation » d'une personne qui vient d'accepter une invitation en a le plus besoin.
+ * Le cadre vit hors de l'arbre React : un démontage ne l'interrompt pas, il se retire seul.
+ */
+export declare function useBackgroundOrganizationRefresh(): void;
+/**
+ * Dans la coque (`AppShell` le fait) : la relecture ci-dessus si la racine ne l'a pas déjà faite
+ * (le cookie ne sert qu'une fois), et le préchargement au survol des autres produits.
  */
 export declare function useProductSwitch(enabled?: boolean): void;

package/dist/product-switch.js

@@ -68,9 +68,19 @@ export function startBackgroundRefresh(doc = document) {
     return frame;
 }
 /**
- * À monter une fois par document dans la coque (`AppShell` le fait) : relecture en arrière-plan
- * après un passage depuis la barre, et préchargement au survol des autres produits. Le cadre vit
- * hors de l'arbre React : un démontage ne l'interrompt pas, il se retire seul.
+ * Relecture en arrière-plan si l'entrée l'a demandé. Montée à la racine du document
+ * (`FamilyLoaderRoot`), pour toutes les pages, y compris celles hors de la coque : la page « il te
+ * faut une organisation » d'une personne qui vient d'accepter une invitation en a le plus besoin.
+ * Le cadre vit hors de l'arbre React : un démontage ne l'interrompt pas, il se retire seul.
+ */
+export function useBackgroundOrganizationRefresh() {
+    useEffect(() => {
+        startBackgroundRefresh();
+    }, []);
+}
+/**
+ * Dans la coque (`AppShell` le fait) : la relecture ci-dessus si la racine ne l'a pas déjà faite
+ * (le cookie ne sert qu'une fois), et le préchargement au survol des autres produits.
  */
 export function useProductSwitch(enabled = true) {
     useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.17.0",
-  "description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
+  "version": "0.17.2",
+  "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",
   "bugs": "https://github.com/hugogebel-boop/hgdc-kit/security/advisories/new",

package/styles.css

@@ -228,7 +228,7 @@
   --inverse: oklch(0.1 0 0);
 }
 
-/* Identité H family, la même en clair et en sombre. Dégradé de chaque pastille produit
+/* Identité H Collection, la même en clair et en sombre. Dégradé de chaque pastille produit
    (`ProductBadge`, `family/<mot>.svg`) et palette du H tricolore. Réservés aux visuels de marque
    (pastille, carte de produit), jamais au chrome. Couleurs pleines ; pour éclaircir, mélanger au
    blanc `in oklab`, jamais `in oklch` (la teinte du blanc s'y mêle, tout vire au rose). */