@hgdc/ui 0.9.0 → 0.10.1

package/README.md

@@ -41,7 +41,7 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 
 | Import         | Exemple                                                                                                                                                                                                                         |
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `app-shell`    | `<AppShell sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                                                                                                  |
+| `app-shell`    | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                                                                                    |
 |                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                               |
 | `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                     |
 | `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché                                                                        |
@@ -50,7 +50,7 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 | `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                                                                              |
 | `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`                                                                    |
 
-Le menu « Produits HGDC » et la palette (`badge` d'une commande) montrent la pastille de chaque produit.
+Le menu « Produits » et la palette (`badge` d'une commande) montrent la pastille de chaque produit.
 
 ## Identité H family
 
@@ -63,7 +63,7 @@ Le menu « Produits HGDC » et la palette (`badge` d'une commande) montrent la p
 
 Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)`, jamais `in oklch`. Une pastille reste seule, jamais dans une tuile de couleur. 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).
 
-La barre se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. 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).
+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).
 
 ## Contenu et données
 
@@ -112,7 +112,7 @@ 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.
+`access-request` : `<AccessRequest endpoint="https://<deploiement>.convex.site/f/<id>" product="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.
 
@@ -142,18 +142,18 @@ const { html, text } = await renderEmail(
 )
 ```
 
-| 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                                                                         |
+| 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                                                                                  |
 
 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/access-request.d.ts

@@ -35,7 +35,7 @@ export declare function submitAccessRequest(endpoint: string, values: AccessRequ
 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 ». */
+    /** Nom affiché et valeur du champ caché `produit` : « Mail ». */
     product: string;
     title?: string;
     description?: ReactNode;

package/dist/access-request.js

@@ -49,7 +49,7 @@ function LinkSlot({ href, render, className, children, }) {
         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, }) {
+export function AccessRequest({ endpoint, product, title = `Demander un accès à ${product}`, description = "Les comptes 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);
@@ -75,10 +75,10 @@ export function AccessRequest({ endpoint, product, title = `Demander un accès
         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"));
+        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 d'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"));
+    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 ?", " ", _jsx(LinkSlot, { href: signInHref, render: signInRender, className: "font-medium text-foreground underline-offset-4 hover:underline", children: "Se connecter" })] })] }, "access"));
 }

package/dist/account-menu.d.ts

@@ -2,7 +2,7 @@ import { type IconSvgElement } from "@hugeicons/react";
 import type { ReactNode } from "react";
 import type { FamilyProduct } from "./family-svg.ts";
 export type HgdcProduct = {
-    /** « HGDC Host ». */
+    /** « Host ». */
     name: string;
     href: string;
     /** Le produit ouvert : coché, sans lien. */
@@ -25,7 +25,7 @@ export type AccountUser = {
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
- * « Produits HGDC » liste par défaut Account et les produits ouverts du catalogue
+ * « Produits » liste par défaut Account et les produits ouverts du catalogue
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */

package/dist/account-menu.js

@@ -31,7 +31,7 @@ function initials(name) {
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
- * « Produits HGDC » liste par défaut Account et les produits ouverts du catalogue
+ * « Produits » liste par défaut Account et les produits ouverts du catalogue
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */
@@ -42,7 +42,7 @@ export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOu
                                         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, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Produits HGDC" }), 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, 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"] })] })] }));
+                                    }, 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, {}), _jsxs(DropdownMenuGroup, { 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, 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/app-shell.d.ts

@@ -1,5 +1,6 @@
 import { type IconSvgElement } from "@hugeicons/react";
 import { type ReactNode } from "react";
+import type { FamilyProduct } from "./family-svg.ts";
 /**
  * À poser dans le `<head>`, avec `themeInitScript` : il remet le rail avant la première
  * peinture, et la variante CSS `rail:` le lit, donc rien ne saute au chargement.
@@ -33,17 +34,28 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
     render?: React.ReactElement;
 }): React.JSX.Element;
 /**
- * La coque commune des consoles HGDC, celle de Host. Sur ordinateur : colonne teintée à gauche
- * (organisation en haut, navigation, compte en bas), réductible en rail (`Ctrl+B`, mémorisé), et
- * la page sur une carte à côté. Sur téléphone : une barre en haut, le menu dans un tiroir qui
- * monte du bas et se referme quand on choisit une page.
+ * La coque commune des consoles HGDC, celle de Host. Sur ordinateur, de gauche à droite : la barre
+ * des produits de la famille (organisation en haut, pastilles, Account en bas, élargie au survol
+ * par-dessus la page), la barre latérale du produit (sa marque, sa navigation, le compte en bas),
+ * réductible en rail (`Ctrl+B`, mémorisé), et la page sur une carte. Sur téléphone : une barre en
+ * haut, le menu dans un tiroir qui monte du bas et se referme quand on choisit une page ; les
+ * produits restent dans le menu de l'avatar.
  *
  * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
  * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
  */
-export declare function AppShell({ sidebarHeader, nav, sidebarFooter, header, children, mainClassName, }: {
-    /** Haut de la barre : `OrgSwitcher`. */
-    sidebarHeader?: ReactNode;
+export declare function AppShell({ product, organization, productRail, accountHref, nav, sidebarFooter, header, children, mainClassName, }: {
+    /** Le produit affiché (`"host"`) : sa marque en haut de la barre, « vous êtes ici » dans la barre des produits. */
+    product: FamilyProduct;
+    /** `OrgSwitcher` : en haut de la barre des produits, en haut du tiroir sur téléphone. */
+    organization?: ReactNode;
+    /**
+     * `false` : pas de barre des produits (un écran hors de la famille). L'organisation passe alors
+     * sous la marque, dans la barre latérale.
+     */
+    productRail?: boolean;
+    /** Adresse d'Account dans la barre des produits (un Account local en développement). */
+    accountHref?: string | undefined;
     /** `SidebarNav` et ses `SidebarNavItem`. */
     nav: ReactNode;
     /** Bas de la barre : liens secondaires (Docs, Paramètres) et `AccountMenu`. */

package/dist/app-shell.js

@@ -6,6 +6,10 @@ import { HugeiconsIcon } from "@hugeicons/react";
 import { useRender } from "@base-ui/react/use-render";
 import { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
+import { isApplePlatform, Kbd, KbdGroup } from "./kbd.js";
+import { ProductBadge } from "./product-badge.js";
+import { ProductRail } from "./product-rail.js";
+import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "./cn.js";
 // ── Rail : la barre latérale réduite aux icônes, mémorisée par navigateur ──────────────
@@ -90,18 +94,42 @@ export function SidebarNavItem({ icon, label, active, href, render, }) {
     return (_jsx("li", { children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
 }
 // ── Coque ─────────────────────────────────────────────────────────────────────────────
+// Les noms de Hugeicons disent l'état du panneau, pas le geste : « Open » dessine la flèche vers la
+// gauche (réduire), « Close » vers la droite (déplier).
+const COLLAPSE_ICON = PanelLeftOpenIcon;
+const EXPAND_ICON = PanelLeftCloseIcon;
+/** Même boîte qu'une entrée de la barre en rail : 40 × 36 px, icône de 18 px centrée. */
+const TOGGLE = "relative grid h-9 w-10 shrink-0 place-items-center rounded-xl text-shell-muted outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-shell-hover hover:text-shell-foreground focus-visible:ring-2 focus-visible:ring-ring/50";
+function ShortcutHint({ label }) {
+    return (_jsxs("span", { className: "flex items-center gap-2", children: [label, _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: isApplePlatform() ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: "B" })] })] }));
+}
+function productName(product) {
+    if (product === HGDC_ACCOUNT.badge)
+        return HGDC_ACCOUNT.name;
+    return HGDC_PRODUCTS.find((item) => item.badge === product)?.name ?? `HGDC ${product}`;
+}
+/**
+ * Haut de la barre latérale. Dépliée : la marque du produit, et le bouton « Réduire » à droite.
+ * En rail : la marque seule, qui devient le bouton « Déplier » au survol de la barre ou au focus,
+ * à la même place : le bouton ne descend jamais sous le logo. Les deux états sont dans la page et
+ * choisis par la variante CSS `rail:`, donc justes dès la première peinture.
+ */
+function SidebarHead({ product }) {
+    return (_jsxs("div", { className: "mt-2 flex h-14 shrink-0 items-center gap-1 px-3", children: [_jsxs("div", { "data-slot": "sidebar-brand", className: "flex min-w-0 flex-1 items-center gap-2.5 pl-2.25 rail:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "truncate font-heading text-[0.9375rem] font-semibold", children: productName(product) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-collapse", onClick: toggleSidebar, "aria-label": "R\u00E9duire la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "rail:hidden") }), children: _jsx(HugeiconsIcon, { icon: COLLAPSE_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "R\u00E9duire" }) })] }), _jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-expand", onClick: toggleSidebar, "aria-label": "D\u00E9plier la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "group/toggle hidden rail:grid") }), children: [_jsx(ProductBadge, { product: product, className: "col-start-1 row-start-1 size-6 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-0 group-focus-visible/toggle:opacity-0 motion-reduce:transition-none" }), _jsx(HugeiconsIcon, { icon: EXPAND_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "col-start-1 row-start-1 size-[1.125rem] opacity-0 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-100 group-focus-visible/toggle:opacity-100 motion-reduce:transition-none" })] }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "D\u00E9plier" }) })] })] }));
+}
 /**
- * La coque commune des consoles HGDC, celle de Host. Sur ordinateur : colonne teintée à gauche
- * (organisation en haut, navigation, compte en bas), réductible en rail (`Ctrl+B`, mémorisé), et
- * la page sur une carte à côté. Sur téléphone : une barre en haut, le menu dans un tiroir qui
- * monte du bas et se referme quand on choisit une page.
+ * La coque commune des consoles HGDC, celle de Host. Sur ordinateur, de gauche à droite : la barre
+ * des produits de la famille (organisation en haut, pastilles, Account en bas, élargie au survol
+ * par-dessus la page), la barre latérale du produit (sa marque, sa navigation, le compte en bas),
+ * réductible en rail (`Ctrl+B`, mémorisé), et la page sur une carte. Sur téléphone : une barre en
+ * haut, le menu dans un tiroir qui monte du bas et se referme quand on choisit une page ; les
+ * produits restent dans le menu de l'avatar.
  *
  * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
  * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
  */
-export function AppShell({ sidebarHeader, nav, sidebarFooter, header, children, mainClassName, }) {
-    const rail = useSidebarRail();
+export function AppShell({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, children, mainClassName, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     useToggleShortcut();
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsxs("div", { "data-slot": "app-shell", className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)] lg:bg-shell", children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-drawer) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [_jsxs("div", { className: "mt-2 flex min-h-14 shrink-0 items-center gap-1 px-3 rail:flex-col rail:justify-center rail:px-0 rail:py-1", children: [_jsx("div", { className: "min-w-0 flex-1 rail:flex-none", children: sidebarHeader }), _jsx("button", { type: "button", onClick: toggleSidebar, "aria-label": rail ? "Déplier la barre latérale" : "Réduire la barre latérale", "aria-keyshortcuts": "Control+B Meta+B", title: rail ? "Déplier (Ctrl+B)" : "Réduire (Ctrl+B)", className: "grid size-8 shrink-0 place-items-center rounded-lg text-shell-muted outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-shell-hover hover:text-shell-foreground focus-visible:ring-2 focus-visible:ring-ring/50 active:scale-[0.96]", children: _jsx(HugeiconsIcon, { icon: rail ? PanelLeftCloseIcon : PanelLeftOpenIcon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) })] }), nav, sidebarFooter ? _jsx("div", { className: "grid gap-0.5 px-3 pt-1 pb-3", children: sidebarFooter }) : null] }), _jsx("div", { className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { className: "flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background", children: [_jsxs("header", { className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex h-14 shrink-0 items-center gap-1 border-b border-foreground/5 bg-background px-2 sm:px-4 lg:top-0", children: [_jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: header })] }), _jsx("main", { id: "contenu", tabIndex: -1, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: children })] }) }), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), sidebarHeader ? _jsx("div", { className: "px-3 pt-1", children: sidebarHeader }) : null, nav, sidebarFooter ? (_jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)]", children: sidebarFooter })) : null] }) })] }) }));
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsxs("div", { "data-slot": "app-shell", className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)]" : "lg:grid-cols-[auto_minmax(0,1fr)]"), children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), productRail ? _jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref }) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-drawer) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [_jsx(SidebarHead, { product: product }), !productRail && organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null, nav, sidebarFooter ? _jsx("div", { className: "grid gap-0.5 px-3 pt-1 pb-3", children: sidebarFooter }) : null] }), _jsx("div", { className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { className: "flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background", children: [_jsxs("header", { className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex h-14 shrink-0 items-center gap-1 border-b border-foreground/5 bg-background px-2 sm:px-4 lg:top-0", children: [_jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: header })] }), _jsx("main", { id: "contenu", tabIndex: -1, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: children })] }) }), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, nav, sidebarFooter ? (_jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)]", children: sidebarFooter })) : null] }) })] }) }));
 }

package/dist/command-menu.d.ts

@@ -5,7 +5,7 @@ export type Command = {
     id: string;
     label: string;
     icon?: IconSvgElement;
-    /** Pastille d'un produit (« Ouvrir HGDC Mail »), à la place de `icon`. */
+    /** Pastille d'un produit (« Ouvrir Mail »), à la place de `icon`. */
     badge?: FamilyProduct;
     /** Autres mots qui trouvent la commande : « dns » pour « Ajouter un domaine ». */
     keywords?: Array<string>;

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: ["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 })] })] }) }) })] }));
+                                }, 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 })] })] }) }) })] }));
 }
 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/org-switcher.d.ts

@@ -16,7 +16,9 @@ export declare function OrgMark({ org, className, }: {
     className?: string;
 }): React.JSX.Element;
 /**
- * Haut de la barre latérale : l'organisation active, et le menu pour en changer ou en créer une.
+ * L'organisation active, et le menu pour en changer ou en créer une. En haut de la barre des
+ * produits d'`AppShell` (la marque seule, le nom quand la barre s'élargit), dans le tiroir sur
+ * téléphone, ou en haut de la barre latérale quand le produit coupe la barre des produits.
  * Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
  * l'URL `/o/<slug>/…`), le kit n'appelle rien.
  */

package/dist/org-switcher.js

@@ -5,6 +5,7 @@ import UnfoldMoreIcon from "@hugeicons/core-free-icons/UnfoldMoreIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { useShellPlacement } from "./shell-placement.js";
 import { cn } from "./cn.js";
 export const ORG_ROLE_LABEL = {
     owner: "Propriétaire",
@@ -20,13 +21,24 @@ export function OrgMark({ org, className, }) {
     return (_jsx("span", { "aria-hidden": true, className: cn("grid size-8 shrink-0 place-items-center rounded-lg bg-foreground text-xs font-semibold text-background uppercase", className), children: org.name.slice(0, 2) }));
 }
 /**
- * Haut de la barre latérale : l'organisation active, et le menu pour en changer ou en créer une.
+ * L'organisation active, et le menu pour en changer ou en créer une. En haut de la barre des
+ * produits d'`AppShell` (la marque seule, le nom quand la barre s'élargit), dans le tiroir sur
+ * téléphone, ou en haut de la barre latérale quand le produit coupe la barre des produits.
  * Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
  * l'URL `/o/<slug>/…`), le kit n'appelle rien.
  */
 export function OrgSwitcher({ organizations, activeId, onSelect, createHref, onCreate, className, }) {
+    const placement = useShellPlacement();
     const active = organizations.find((org) => org.id === activeId);
     if (!active)
         return null;
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": `Organisation ${active.name}, changer d'organisation`, className: cn("flex h-10 w-full min-w-0 items-center gap-2.5 rounded-xl px-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:w-auto lg:rail:justify-center lg:rail:px-1", className) }), children: [_jsx(OrgMark, { org: active }), _jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: active.name }), active.role ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: ORG_ROLE_LABEL[active.role] })) : null] }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground lg:text-shell-muted lg:rail:hidden" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Organisations" }), organizations.map((org) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(org.id), children: [_jsx(OrgMark, { org: org, className: "size-6 rounded-md bg-muted text-[10px] text-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name }), org.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Organisation active", className: "size-4" })) : org.role ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: ORG_ROLE_LABEL[org.role] })) : null] }, org.id)))] }), createHref !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(MenuPrimitive.LinkItem, { href: createHref, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : onCreate !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onCreate, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : null] })] }));
+    // En haut de la barre des produits : la marque seule dans 40 px, le nom quand la barre s'élargit.
+    const inRail = placement === "product-rail";
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": `Organisation ${active.name}, changer d'organisation`, className: cn("flex h-10 w-full min-w-0 items-center gap-2.5 rounded-xl px-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", inRail
+                        ? "shrink-0 gap-3 px-1 hover:bg-shell-hover aria-expanded:bg-shell-hover"
+                        : "lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:w-auto lg:rail:justify-center lg:rail:px-1", className) }), children: [_jsx(OrgMark, { org: active }), _jsxs("span", { className: cn("min-w-0 flex-1", inRail
+                            ? "opacity-0 transition-opacity duration-(--duration-fast) ease-out group-data-expanded/rail:opacity-100 motion-reduce:transition-none"
+                            : "lg:rail:hidden"), children: [_jsx("span", { className: "block truncate text-sm font-medium", children: active.name }), active.role ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: ORG_ROLE_LABEL[active.role] })) : null] }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: cn("size-4 shrink-0 text-muted-foreground lg:text-shell-muted", inRail
+                            ? "opacity-0 transition-opacity duration-(--duration-fast) group-data-expanded/rail:opacity-100"
+                            : "lg:rail:hidden") })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Organisations" }), organizations.map((org) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(org.id), children: [_jsx(OrgMark, { org: org, className: "size-6 rounded-md bg-muted text-[10px] text-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name }), org.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Organisation active", className: "size-4" })) : org.role ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: ORG_ROLE_LABEL[org.role] })) : null] }, org.id)))] }), createHref !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(MenuPrimitive.LinkItem, { href: createHref, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : onCreate !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onCreate, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : null] })] }));
 }

package/dist/product-rail.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import { type HgdcCatalogProduct } from "./products.ts";
+/** Délai d'intention avant d'élargir la barre au survol : un passage de souris ne l'ouvre pas. */
+export declare const PRODUCT_RAIL_OPEN_DELAY = 150;
+/**
+ * La barre des produits de la famille, tout à gauche de la coque sur ordinateur : organisation en
+ * haut, pastilles des produits, Account en bas. 56 px de large ; au survol (après un court délai
+ * d'intention) ou au focus clavier, elle s'élargit par-dessus la page et écrit le nom de chaque
+ * produit, sans rien décaler. Elle se referme dès que la souris sort.
+ */
+export declare function ProductRail({ current, organization, accountHref, catalog, }: {
+    /** Le mot du produit affiché (« host ») : marqué en teinte. */
+    current?: string | undefined;
+    /** `OrgSwitcher`, rendu compact. */
+    organization?: ReactNode;
+    /** Adresse d'Account (un Account local en développement). */
+    accountHref?: string | undefined;
+    catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
+}): React.JSX.Element;

package/dist/product-rail.js

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ProductBadge } from "./product-badge.js";
+import { productRailEntries } from "./products.js";
+import { ShellPlacementContext } from "./shell-placement.js";
+import { cn } from "./cn.js";
+/** Délai d'intention avant d'élargir la barre au survol : un passage de souris ne l'ouvre pas. */
+export const PRODUCT_RAIL_OPEN_DELAY = 150;
+function ProductLink({ entry }) {
+    return (_jsx("li", { children: _jsxs("a", { href: entry.href, "aria-current": entry.current ? "page" : undefined, className: cn("flex h-10 items-center gap-3 rounded-xl px-2 text-shell-muted outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-shell-hover hover:text-shell-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "aria-[current=page]:bg-shell-active aria-[current=page]:text-shell-foreground"), children: [_jsx(ProductBadge, { product: entry.badge, className: "size-6" }), _jsxs("span", { className: "min-w-0 flex-1 truncate opacity-0 transition-opacity duration-(--duration-fast) ease-out group-data-expanded/rail:opacity-100 motion-reduce:transition-none", children: [_jsx("span", { className: "font-heading text-sm font-medium", children: entry.name }), entry.hint ? _jsx("span", { className: "sr-only", children: ", " }) : null, entry.hint ? _jsx("span", { className: "ml-1.5 text-xs text-shell-muted", children: entry.hint }) : null] })] }) }));
+}
+/**
+ * La barre des produits de la famille, tout à gauche de la coque sur ordinateur : organisation en
+ * haut, pastilles des produits, Account en bas. 56 px de large ; au survol (après un court délai
+ * d'intention) ou au focus clavier, elle s'élargit par-dessus la page et écrit le nom de chaque
+ * produit, sans rien décaler. Elle se referme dès que la souris sort.
+ */
+export function ProductRail({ current, organization, accountHref, catalog, }) {
+    const [expanded, setExpanded] = useState(false);
+    const ref = useRef(null);
+    const { products, account } = productRailEntries({ current, accountHref, catalog });
+    // Écouteurs natifs : la barre est un repère `nav`, pas un contrôle ; c'est son survol et le
+    // focus de ses liens qui l'élargissent.
+    useEffect(() => {
+        const rail = ref.current;
+        if (!rail)
+            return;
+        let timer;
+        const cancel = () => {
+            window.clearTimeout(timer);
+            timer = undefined;
+        };
+        const onEnter = (event) => {
+            if (event.pointerType !== "mouse")
+                return;
+            cancel();
+            timer = window.setTimeout(() => setExpanded(true), PRODUCT_RAIL_OPEN_DELAY);
+        };
+        const onLeave = () => {
+            cancel();
+            setExpanded(false);
+        };
+        // Au clavier seulement : un clic de souris ne laisse pas la barre ouverte.
+        const onFocusIn = (event) => {
+            if (event.target && focusVisible(event.target))
+                setExpanded(true);
+        };
+        const onFocusOut = (event) => {
+            if (!(event.relatedTarget instanceof Node) || !rail.contains(event.relatedTarget))
+                setExpanded(false);
+        };
+        const onKey = (event) => {
+            if (event.key !== "Escape")
+                return;
+            cancel();
+            setExpanded(false);
+        };
+        rail.addEventListener("pointerenter", onEnter);
+        rail.addEventListener("pointerleave", onLeave);
+        rail.addEventListener("focusin", onFocusIn);
+        rail.addEventListener("focusout", onFocusOut);
+        rail.addEventListener("keydown", onKey);
+        return () => {
+            cancel();
+            rail.removeEventListener("pointerenter", onEnter);
+            rail.removeEventListener("pointerleave", onLeave);
+            rail.removeEventListener("focusin", onFocusIn);
+            rail.removeEventListener("focusout", onFocusOut);
+            rail.removeEventListener("keydown", onKey);
+        };
+    }, []);
+    return (_jsx("div", { "data-slot": "product-rail", className: "relative hidden w-14 shrink-0 lg:block", children: _jsxs("nav", { ref: ref, "aria-label": "Produits", "data-expanded": expanded ? "" : undefined, className: cn("group/rail absolute inset-y-0 left-0 z-40 flex w-14 flex-col gap-2 overflow-hidden bg-shell-rail px-2 py-3 text-shell-foreground", "transition-[width,box-shadow] duration-(--duration-base) ease-ios motion-reduce:transition-none", 
+            // L'ombre seulement quand elle flotte ; en sombre, où l'ombre ne se voit pas, un filet.
+            "data-expanded:w-55 data-expanded:shadow-xl data-expanded:shadow-black/10 dark:data-expanded:shadow-black/50 dark:data-expanded:ring-1 dark:data-expanded:ring-white/8"), children: [organization ? (_jsxs(_Fragment, { children: [_jsx(ShellPlacementContext, { value: "product-rail", children: organization }), _jsx("div", { "aria-hidden": true, className: "mx-2 h-px shrink-0 bg-foreground/8" })] })) : null, _jsx("ul", { className: "grid min-h-0 gap-1 overflow-x-hidden overflow-y-auto", children: products.map((entry) => (_jsx(ProductLink, { entry: entry }, entry.badge))) }), _jsx("ul", { className: "mt-auto grid", children: _jsx(ProductLink, { entry: account }) })] }) }));
+}
+function focusVisible(target) {
+    if (!(target instanceof Element))
+        return false;
+    try {
+        return target.matches(":focus-visible");
+    }
+    catch {
+        return true;
+    }
+}

package/dist/products.d.ts

@@ -6,9 +6,9 @@ export type ProductStage = "live" | "preview" | "soon";
 export declare const PRODUCT_STAGE_LABEL: Readonly<Record<ProductStage, string>>;
 /** Un produit de la famille, tel que la vision le décrit. */
 export type HgdcCatalogProduct = {
-    /** Le mot de « HGDC <mot> » : « Host ». */
+    /** Le mot du produit, qui sert de sous-domaine : « Host ». */
     word: string;
-    /** « HGDC Host ». */
+    /** Nom affiché, le mot seul (« Host ») : la famille ne se répète pas devant chaque produit. */
     name: string;
     /** « host.hgdc.ch ». */
     subdomain: string;
@@ -43,7 +43,7 @@ export declare const HGDC_ACCOUNT: HgdcCatalogProduct;
 export declare const HGDC_PRODUCTS: ReadonlyArray<HgdcCatalogProduct>;
 /** Vrai si le produit répond déjà (en service ou en préversion). */
 export declare function isProductOpen(item: Pick<HgdcCatalogProduct, "stage">): boolean;
-/** Une entrée du menu « Produits HGDC » d'`AccountMenu`. */
+/** Une entrée du menu « Produits » d'`AccountMenu`. */
 export type ProductMenuEntry = {
     name: string;
     href: string;
@@ -66,3 +66,27 @@ export declare function productMenuEntries(options?: {
     accountHref?: string | undefined;
     catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
 }): Array<ProductMenuEntry>;
+/** Une entrée de la barre des produits d'`AppShell`. */
+export type ProductRailEntry = {
+    name: string;
+    href: string;
+    badge: FamilyProduct;
+    /** Le produit ouvert : « vous êtes ici », lien vers sa propre racine. */
+    current?: boolean;
+    /** Texte discret sous le nom : « Préversion ». */
+    hint?: string;
+};
+/**
+ * Les entrées de la barre des produits : les produits ouverts du catalogue, puis Account, à part
+ * en bas (le compte commun, pas un produit). Chaque produit pointe vers son entrée
+ * `/auth/hgdc?next=/` (ADR 0010), Account vers sa racine (`accountHref` en développement). Le
+ * produit courant pointe vers `/`, sans détour par l'entrée.
+ */
+export declare function productRailEntries(options?: {
+    current?: string | undefined;
+    accountHref?: string | undefined;
+    catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
+}): {
+    products: Array<ProductRailEntry>;
+    account: ProductRailEntry;
+};

package/dist/products.js

@@ -26,7 +26,7 @@ function product(word, pitch, icon, stage) {
     const href = `https://${subdomain}`;
     return {
         word,
-        name: `HGDC ${word}`,
+        name: word,
         subdomain,
         href,
         entryHref: `${href}${PRODUCT_ENTRY_PATH}`,
@@ -38,7 +38,7 @@ function product(word, pitch, icon, stage) {
     };
 }
 /** HGDC Account : le compte commun (profil, sécurité, organisations), hors du catalogue des produits. */
-const account = product("Account", "Ton compte HGDC : profil, sécurité et organisations, pour tous les produits.", UserCircleIcon, "live");
+const account = product("Account", "Ton compte : profil, sécurité et organisations, pour tous les produits de la famille.", UserCircleIcon, "live");
 export const HGDC_ACCOUNT = { ...account, entryHref: account.href };
 /** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
 export const HGDC_PRODUCTS = [
@@ -72,3 +72,24 @@ export function productMenuEntries(options = {}) {
         ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
     }));
 }
+/**
+ * Les entrées de la barre des produits : les produits ouverts du catalogue, puis Account, à part
+ * en bas (le compte commun, pas un produit). Chaque produit pointe vers son entrée
+ * `/auth/hgdc?next=/` (ADR 0010), Account vers sa racine (`accountHref` en développement). Le
+ * produit courant pointe vers `/`, sans détour par l'entrée.
+ */
+export function productRailEntries(options = {}) {
+    const current = options.current?.toLowerCase();
+    const entry = (item, href) => ({
+        name: item.name,
+        badge: item.badge,
+        ...(item.badge === current ? { href: "/", current: true } : { href }),
+        ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
+    });
+    return {
+        products: (options.catalog ?? HGDC_PRODUCTS)
+            .filter(isProductOpen)
+            .map((item) => entry(item, `${item.entryHref}?next=/`)),
+        account: entry(HGDC_ACCOUNT, options.accountHref ?? HGDC_ACCOUNT.entryHref),
+    };
+}

package/dist/shell-placement.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Où `AppShell` pose un élément du produit (le sélecteur d'organisation) : dans la barre latérale
+ * ou le tiroir mobile, ou en haut de la barre des produits, où il n'a qu'une colonne de 56 px.
+ */
+export type ShellPlacement = "sidebar" | "product-rail";
+export declare const ShellPlacementContext: React.Context<ShellPlacement>;
+export declare function useShellPlacement(): ShellPlacement;

package/dist/shell-placement.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+export const ShellPlacementContext = createContext("sidebar");
+export function useShellPlacement() {
+    return useContext(ShellPlacementContext);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "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",

package/styles.css

@@ -63,6 +63,7 @@
   --color-shell-muted: var(--shell-muted-foreground);
   --color-shell-hover: var(--shell-hover);
   --color-shell-active: var(--shell-active);
+  --color-shell-rail: var(--shell-rail);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
   --color-status-active: var(--status-active);
@@ -135,6 +136,8 @@
   --shell-muted-foreground: oklch(0.45 0 0);
   --shell-hover: oklch(0 0 0 / 5%);
   --shell-active: oklch(0 0 0 / 8%);
+  /* Barre des produits, un cran sous la coque. */
+  --shell-rail: oklch(0.93 0 0);
   /* Séries de graphique, dans cet ordre, jamais recyclées : une 7e série se replie en « Autres ».
      Validées (daltonisme, écart entre voisines) sur `surface` en clair et sur `card` en sombre.
      En clair, 2 à 5 passent sous 3:1 : un graphique les accompagne d'une légende et de libellés. */
@@ -198,6 +201,7 @@
   --shell-muted-foreground: oklch(0.708 0 0);
   --shell-hover: oklch(1 0 0 / 6%);
   --shell-active: oklch(1 0 0 / 12%);
+  --shell-rail: oklch(0.05 0 0);
   --chart-1: oklch(0.622 0.161 255.1);
   --chart-2: oklch(0.622 0.173 40.1);
   --chart-3: oklch(0.621 0.128 163.1);