@hgdc/ui 0.11.1 → 0.12.0

package/README.md

@@ -96,6 +96,7 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 | `progress`      | `<Progress label="Envoi de la campagne" value={120} max={400} />` (`value={null}` : durée inconnue), `<Meter label="E-mails ce mois" value={8600} max={10000} />` (orange puis rouge près de la limite)                 |
 | `rank-bar`      | `<RankBar label="Pages les plus vues" items={[{ key, label: "/tarifs", value: 640, render: <Link … /> }]} limit={5} />`                                                                                                 |
 | `secret-reveal` | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                                        |
+| `family-loader` | `<FamilyLoader page />` en `pendingComponent` d'une route, `<FamilyLoader size="lg" label="Ouverture du projet…" />` : le H de la famille qui se construit, après 200 ms. Dans un bouton : `Spinner`                    |
 | `skeleton`      | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                |
 
 ## Listes, journaux et retours

package/dist/app-shell.d.ts

@@ -35,8 +35,8 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
 }): React.JSX.Element;
 /**
  * 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),
+ * des produits de la famille (organisation, Account, pastilles ; élargie au survol à la place
+ * de la barre latérale, qui se plie le temps du survol), 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.

package/dist/app-shell.js

@@ -120,8 +120,8 @@ function SidebarHead({ product }) {
 }
 /**
  * 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),
+ * des produits de la famille (organisation, Account, pastilles ; élargie au survol à la place
+ * de la barre latérale, qui se plie le temps du survol), 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.
@@ -131,6 +131,8 @@ function SidebarHead({ product }) {
  */
 export function AppShell({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, mainClassName, }) {
     const [menuOpen, setMenuOpen] = useState(false);
+    // Barre des produits élargie : la barre latérale se plie le temps du survol (ADR 0011).
+    const [railPeek, setRailPeek] = useState(false);
     useToggleShortcut();
-    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" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: productName(product) })] }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null] }), _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] }) })] }) }));
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsxs("div", { "data-slot": "app-shell", "data-rail-peek": railPeek ? "" : undefined, 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, onExpandedChange: setRailPeek })) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) 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" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: productName(product) })] }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null] }), _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/checkbox.js

@@ -15,7 +15,7 @@ import { cn } from "./cn.js";
  * ```
  */
 export function Checkbox({ className, indeterminate, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", indeterminate: indeterminate, className: cn("touch-target peer grid size-5 shrink-0 place-items-center rounded-[0.4rem] border border-foreground/25 bg-background text-primary-foreground", "transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/40 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-invalid:border-destructive", 
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", indeterminate: indeterminate, className: cn("touch-target peer grid size-5 shrink-0 place-items-center rounded-[0.4rem] border border-control-off bg-background text-primary-foreground", "transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/70 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-invalid:border-destructive", 
         // Le fond sombre de la case vide ne doit jamais recouvrir le fond coché (même spécificité).
         "dark:bg-white/[0.04] dark:data-checked:bg-primary dark:data-indeterminate:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "grid place-items-center data-unchecked:hidden", children: _jsx(HugeiconsIcon, { icon: indeterminate ? MinusSignIcon : Tick02Icon, strokeWidth: 2.5, className: "size-3.5" }) }) }));
 }

package/dist/destructive-dialog.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Copy01Icon from "@hugeicons/core-free-icons/Copy01Icon";
 import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { useId, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "./button.js";
 import { useCopy } from "./copy-button.js";
@@ -38,7 +38,6 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
     const view = shown.current;
     const [typed, setTyped] = useState("");
     const [pending, setPending] = useState(false);
-    const inputId = useId();
     const ready = !pending && (view.name === undefined || matchesConfirmation(typed, view.name));
     const [wasOpen, setWasOpen] = useState(open);
     if (open !== wasOpen) {
@@ -70,5 +69,5 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
             }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: view.title }), _jsxs(DialogDescription, { render: _jsx("div", {}), className: "grid gap-1 text-[15px]", children: [_jsx("p", { children: view.question }), view.consequence ? _jsx("p", { children: view.consequence }) : null, _jsx("p", { className: "font-semibold text-destructive", children: "Impossible de revenir en arri\u00E8re." })] })] }), view.name !== undefined ? (_jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
                         event.preventDefault();
                         void confirm();
-                    }, children: [_jsxs("label", { htmlFor: inputId, className: "text-[15px] leading-7 text-muted-foreground", children: ["Tape ", _jsx(NameChip, { name: view.name }), " pour confirmer."] }), _jsx(Input, { id: inputId, autoFocus: true, autoComplete: "off", autoCapitalize: "off", spellCheck: false, value: typed, onChange: (event) => setTyped(event.target.value), placeholder: view.name, "aria-invalid": typed.length > 0 && !view.name.startsWith(typed) ? true : undefined })] })) : null, _jsxs(DialogFooter, { className: "sm:justify-start", children: [_jsxs(Button, { variant: "destructive", isLoading: pending, disabled: !ready, onClick: () => void confirm(), children: [view.confirmLabel ?? view.title, _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden bg-current/10 text-current lg:inline-flex", children: mod }), _jsx(Kbd, { "aria-hidden": true, className: "hidden bg-current/10 text-current lg:inline-flex", children: "\u21B5" })] }), _jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onOpenChange(false), children: ["Annuler", _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden lg:inline-flex", children: "\u00C9chap" })] })] })] }) }));
+                    }, children: [_jsxs("p", { className: "text-[15px] leading-7 text-muted-foreground", children: ["Tape ", _jsx(NameChip, { name: view.name }), " pour confirmer."] }), _jsx(Input, { "aria-label": `Tape ${view.name} pour confirmer`, autoFocus: true, autoComplete: "off", autoCapitalize: "off", spellCheck: false, value: typed, onChange: (event) => setTyped(event.target.value), placeholder: view.name, "aria-invalid": typed.length > 0 && !view.name.startsWith(typed) ? true : undefined })] })) : null, _jsxs(DialogFooter, { className: "sm:justify-start", children: [_jsxs(Button, { variant: "destructive", isLoading: pending, disabled: !ready, onClick: () => void confirm(), children: [view.confirmLabel ?? view.title, _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden bg-current/10 text-current lg:inline-flex", children: mod }), _jsx(Kbd, { "aria-hidden": true, className: "hidden bg-current/10 text-current lg:inline-flex", children: "\u21B5" })] }), _jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onOpenChange(false), children: ["Annuler", _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden lg:inline-flex", children: "\u00C9chap" })] })] })] }) }));
 }

package/dist/family-loader.d.ts

@@ -0,0 +1,24 @@
+declare const SIZES: {
+    readonly sm: "size-6";
+    readonly md: "size-10";
+    readonly lg: "size-16";
+};
+/**
+ * Le chargement d'une page : le H tricolore de la H family se construit, tient, s'efface, en
+ * boucle (CSS seul, `styles.css`). La forme et les dégradés sont ceux de `FAMILY_MARK_SVG`.
+ * Il n'apparaît qu'après 200 ms (`delay`) : une page rapide ne le montre jamais, et sa place est
+ * réservée dès le départ, rien ne saute. Mouvement réduit : le H entier respire.
+ *
+ * Pour une page ou une route entière (`pendingComponent`, `Pending` de page) ; dans un bouton ou
+ * une ligne, `Spinner` reste la règle. `page` le centre dans la hauteur visible.
+ */
+export declare function FamilyLoader({ size, label, delay, page, className, }: {
+    size?: keyof typeof SIZES;
+    label?: string;
+    /** Attente avant d'apparaître, en millisecondes. */
+    delay?: number;
+    /** Centré dans un bloc de la hauteur de l'écran, pour un chargement de page. */
+    page?: boolean;
+    className?: string;
+}): React.JSX.Element;
+export {};

package/dist/family-loader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "./cn.js";
+const SIZES = { sm: "size-6", md: "size-10", lg: "size-16" };
+/**
+ * Le chargement d'une page : le H tricolore de la H family se construit, tient, s'efface, en
+ * boucle (CSS seul, `styles.css`). La forme et les dégradés sont ceux de `FAMILY_MARK_SVG`.
+ * Il n'apparaît qu'après 200 ms (`delay`) : une page rapide ne le montre jamais, et sa place est
+ * réservée dès le départ, rien ne saute. Mouvement réduit : le H entier respire.
+ *
+ * Pour une page ou une route entière (`pendingComponent`, `Pending` de page) ; dans un bouton ou
+ * une ligne, `Spinner` reste la règle. `page` le centre dans la hauteur visible.
+ */
+export function FamilyLoader({ size = "md", label = "Chargement…", delay = 200, page = false, className, }) {
+    // Ids des dégradés propres à chaque instance : deux loaders ne se volent pas leurs couleurs.
+    const id = useId().replace(/[^\w-]/g, "");
+    const loader = (_jsx("span", { role: "status", "aria-label": label, "data-slot": "family-loader", className: cn("family-loader inline-grid shrink-0 place-items-center", SIZES[size], !page && className), style: { ["--family-loader-delay"]: `${delay}ms` }, children: _jsxs("svg", { viewBox: "0 0 256 256", "aria-hidden": true, className: "size-full overflow-visible", children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: `${id}l`, x1: "0", y1: "24", x2: "0", y2: "232", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#2c78fd" }), _jsx("stop", { offset: "1", stopColor: "#7343fe" })] }), _jsxs("linearGradient", { id: `${id}r`, x1: "0", y1: "24", x2: "0", y2: "232", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#fe5292" }), _jsx("stop", { offset: "1", stopColor: "#ff9a46" })] }), _jsxs("linearGradient", { id: `${id}b`, x1: "64", y1: "0", x2: "192", y2: "0", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#8145ff" }), _jsx("stop", { offset: "1", stopColor: "#fe5292" })] })] }), _jsx("rect", { "data-piece": "left", x: "43", y: "24", width: "57", height: "208", rx: "18", fill: `url(#${id}l)` }), _jsx("rect", { "data-piece": "right", x: "156", y: "24", width: "57", height: "208", rx: "18", fill: `url(#${id}r)` }), _jsx("rect", { "data-piece": "bar", x: "67", y: "107", width: "122", height: "43", rx: "14", fill: `url(#${id}b)` })] }) }));
+    if (!page)
+        return loader;
+    return (_jsx("div", { "data-slot": "family-loader-page", className: cn("grid min-h-[60dvh] w-full place-items-center", className), children: loader }));
+}

package/dist/page-header.js

@@ -27,7 +27,7 @@ export function Breadcrumbs({ items, className }) {
  * actions passent sous le titre.
  */
 export function PageHeader({ title, description, actions, breadcrumbs, className, }) {
-    return (_jsxs("header", { "data-slot": "page-header", className: cn("mb-8 grid gap-3", className), children: [breadcrumbs?.length ? _jsx(Breadcrumbs, { items: breadcrumbs }) : null, _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight sm:text-[28px]", children: title }), description ? _jsx("p", { className: "mt-1.5 max-w-prose text-sm text-muted-foreground", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null] })] }));
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("mb-8 grid gap-3", className), children: [breadcrumbs?.length ? _jsx(Breadcrumbs, { items: breadcrumbs }) : null, _jsxs("div", { "data-slot": "page-header-row", className: cn("flex flex-wrap justify-between gap-4", description ? "items-end" : "items-start"), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight sm:text-[28px]", children: title }), description ? _jsx("p", { className: "mt-1.5 max-w-prose text-sm text-muted-foreground", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null] })] }));
 }
 /**
  * Une page de console, dans la coque (`AppShell`) : `PageHeader`, puis les sections empilées.

package/dist/product-rail.d.ts

@@ -4,11 +4,13 @@ import { type HgdcCatalogProduct } from "./products.ts";
 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.
+ * haut, Account, puis les pastilles des produits. 56 px de large ; au survol (après un court délai
+ * d'intention) ou au focus clavier, elle s'élargit et écrit le nom de chaque produit. Elle ne
+ * recouvre jamais la page : `AppShell` plie la barre latérale du produit le temps du survol, la
+ * barre prend exactement la place libérée (248 px) ; si la barre latérale est déjà pliée, elle
+ * pousse la page (220 px). Tout revient dès que la souris sort.
  */
-export declare function ProductRail({ current, organization, accountHref, catalog, }: {
+export declare function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }: {
     /** Le mot du produit affiché (« host ») : marqué en teinte. */
     current?: string | undefined;
     /** `OrgSwitcher`, rendu compact. */
@@ -16,4 +18,6 @@ export declare function ProductRail({ current, organization, accountHref, catalo
     /** Adresse d'Account (un Account local en développement). */
     accountHref?: string | undefined;
     catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
+    /** Prévenu à chaque ouverture et fermeture : `AppShell` y plie sa barre latérale. */
+    onExpandedChange?: ((expanded: boolean) => void) | undefined;
 }): React.JSX.Element;

package/dist/product-rail.js

@@ -11,12 +11,17 @@ function ProductLink({ entry }) {
 }
 /**
  * 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.
+ * haut, Account, puis les pastilles des produits. 56 px de large ; au survol (après un court délai
+ * d'intention) ou au focus clavier, elle s'élargit et écrit le nom de chaque produit. Elle ne
+ * recouvre jamais la page : `AppShell` plie la barre latérale du produit le temps du survol, la
+ * barre prend exactement la place libérée (248 px) ; si la barre latérale est déjà pliée, elle
+ * pousse la page (220 px). Tout revient dès que la souris sort.
  */
-export function ProductRail({ current, organization, accountHref, catalog, }) {
+export function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }) {
     const [expanded, setExpanded] = useState(false);
+    useEffect(() => {
+        onExpandedChange?.(expanded);
+    }, [expanded, onExpandedChange]);
     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
@@ -69,9 +74,10 @@ export function ProductRail({ current, organization, accountHref, catalog, }) {
             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 }) })] }) }));
+    return (_jsx("div", { "data-slot": "product-rail", "data-expanded": expanded ? "" : undefined, className: cn("hidden w-14 shrink-0 overflow-hidden lg:block", 
+        // Même durée et même courbe que la barre latérale qui se plie : la somme des deux largeurs
+        // reste constante (56 + 256 = 248 + 64), la page ne bouge pas.
+        "transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none", "data-expanded:w-62 folded:data-expanded:w-55"), children: _jsxs("nav", { ref: ref, "aria-label": "Produits", "data-expanded": expanded ? "" : undefined, className: "group/rail flex h-full w-full flex-col gap-2 overflow-hidden bg-shell-rail px-2 py-3 text-shell-foreground", 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, _jsxs("ul", { className: "grid min-h-0 gap-1 overflow-x-hidden overflow-y-auto", children: [_jsx(ProductLink, { entry: account }), products.map((entry) => (_jsx(ProductLink, { entry: entry }, entry.badge)))] })] }) }));
 }
 function focusVisible(target) {
     if (!(target instanceof Element))

package/dist/products.d.ts

@@ -16,7 +16,9 @@ export type HgdcCatalogProduct = {
     href: string;
     /**
      * Entrée dans l'app avec la session HGDC Account (`PRODUCT_ENTRY_PATH`), sans page d'accueil
-     * ni bouton de connexion. Pour Account, sa racine.
+     * ni bouton de connexion : `https://<mot>.hgdc.ch/auth/hgdc?refresh=1&next=/`. `refresh=1`
+     * relit les organisations au passage (une organisation rejointe dans Account apparaît sans se
+     * reconnecter, ADR 0013). Pour Account, sa racine.
      */
     entryHref: string;
     /** Une phrase, au tutoiement. */
@@ -38,6 +40,8 @@ export type HgdcCatalogProduct = {
  * quand cette session existe.
  */
 export declare const PRODUCT_ENTRY_PATH = "/auth/hgdc";
+/** Requête de l'entrée depuis un autre produit : relire les organisations, arriver sur l'accueil. */
+export declare const PRODUCT_ENTRY_REFRESH_QUERY = "refresh=1&next=/";
 export declare const HGDC_ACCOUNT: HgdcCatalogProduct;
 /** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
 export declare const HGDC_PRODUCTS: ReadonlyArray<HgdcCatalogProduct>;
@@ -77,10 +81,10 @@ export type ProductRailEntry = {
     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.
+ * Les entrées de la barre des produits : les produits ouverts du catalogue et Account, affiché en
+ * tête (le compte commun, pas un produit). Chaque produit pointe vers son entrée
+ * `/auth/hgdc?refresh=1&next=/` (ADR 0010, 0013), 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;

package/dist/products.js

@@ -18,6 +18,8 @@ export const PRODUCT_STAGE_LABEL = {
  * quand cette session existe.
  */
 export const PRODUCT_ENTRY_PATH = "/auth/hgdc";
+/** Requête de l'entrée depuis un autre produit : relire les organisations, arriver sur l'accueil. */
+export const PRODUCT_ENTRY_REFRESH_QUERY = "refresh=1&next=/";
 function product(word, pitch, icon, stage) {
     const badge = word.toLowerCase();
     if (!isFamilyProduct(badge))
@@ -29,7 +31,7 @@ function product(word, pitch, icon, stage) {
         name: word,
         subdomain,
         href,
-        entryHref: `${href}${PRODUCT_ENTRY_PATH}`,
+        entryHref: `${href}${PRODUCT_ENTRY_PATH}?${PRODUCT_ENTRY_REFRESH_QUERY}`,
         pitch,
         badge,
         icon,
@@ -73,10 +75,10 @@ export function productMenuEntries(options = {}) {
     }));
 }
 /**
- * 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.
+ * Les entrées de la barre des produits : les produits ouverts du catalogue et Account, affiché en
+ * tête (le compte commun, pas un produit). Chaque produit pointe vers son entrée
+ * `/auth/hgdc?refresh=1&next=/` (ADR 0010, 0013), 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();
@@ -87,9 +89,7 @@ export function productRailEntries(options = {}) {
         ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
     });
     return {
-        products: (options.catalog ?? HGDC_PRODUCTS)
-            .filter(isProductOpen)
-            .map((item) => entry(item, `${item.entryHref}?next=/`)),
+        products: (options.catalog ?? HGDC_PRODUCTS).filter(isProductOpen).map((item) => entry(item, item.entryHref)),
         account: entry(HGDC_ACCOUNT, options.accountHref ?? HGDC_ACCOUNT.entryHref),
     };
 }

package/dist/radio-group.js

@@ -18,5 +18,5 @@ export function RadioGroup({ className, ...props }) {
     return _jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
 }
 export function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("touch-target grid size-5 shrink-0 place-items-center rounded-full border border-foreground/25 bg-background", "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/40 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive data-invalid:border-destructive", "dark:bg-white/[0.04] dark:data-checked:bg-primary", className), ...props, children: _jsx(RadioPrimitive.Indicator, { className: "size-2 rounded-full bg-primary-foreground data-unchecked:hidden" }) }));
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("touch-target grid size-5 shrink-0 place-items-center rounded-full border border-control-off bg-background", "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/70 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive data-invalid:border-destructive", "dark:bg-white/[0.04] dark:data-checked:bg-primary", className), ...props, children: _jsx(RadioPrimitive.Indicator, { className: "size-2 rounded-full bg-primary-foreground data-unchecked:hidden" }) }));
 }

package/dist/switch.js

@@ -17,7 +17,11 @@ import { cn } from "./cn.js";
  * pouce le trouve sans viser.
  */
 export function Switch({ checked, onCheckedChange, disabled, className, ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: cn("relative inline-flex h-8 w-[3.25rem] shrink-0 items-center rounded-full p-0.5", "transition-colors duration-200 ease-ios", "outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2", "focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50", "bg-muted data-checked:bg-status-active", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: cn("size-7 rounded-full bg-background shadow-sm ring-1 ring-foreground/5", 
+    return (_jsx(SwitchPrimitive.Root, { checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: cn("relative inline-flex h-8 w-[3.25rem] shrink-0 items-center rounded-full p-0.5", "transition-colors duration-200 ease-ios", "outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2", "focus-visible:ring-offset-background", 
+        // Désactivé : tout l'interrupteur s'estompe, la piste ne disparaît pas.
+        "disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50", 
+        // Éteint : piste grise à 3:1 du fond, de la carte et de `--muted` ; allumé : l'accent d'état.
+        "bg-control-off data-checked:bg-status-active", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: cn("size-7 rounded-full bg-background shadow-sm ring-1 ring-foreground/5", 
             // `translate` et non `left` : la position part sur le compositeur,
             // le pouce ne voit donc pas la bascule sautiller quand la page est
             // occupée ailleurs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",

package/styles.css

@@ -19,8 +19,11 @@
 
 @custom-variant dark (&:is(.dark *));
 /* Barre latérale réduite en rail : `data-sidebar="rail"` sur <html>, posé avant la première
-   peinture par `sidebarInitScript` (`@hgdc/ui/app-shell`). */
-@custom-variant rail (&:where([data-sidebar="rail"] *));
+   peinture par `sidebarInitScript` (`@hgdc/ui/app-shell`), ou `data-rail-peek` sur la coque le
+   temps que la barre des produits est élargie (ADR 0011). */
+@custom-variant rail (&:where([data-sidebar="rail"] *, [data-rail-peek] *));
+/* Pliée par la personne seulement (pas le temps du survol de la barre des produits). */
+@custom-variant folded (&:where([data-sidebar="rail"] *));
 
 /* Courbes et durées. Pas d'ease-in : il démarre lentement à l'instant où l'œil regarde. */
 @theme {
@@ -57,6 +60,7 @@
   --color-destructive: var(--destructive);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-control-off: var(--control-off);
   --color-ring: var(--ring);
   --color-shell: var(--shell);
   --color-shell-foreground: var(--shell-foreground);
@@ -129,6 +133,9 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
+  /* Contrôle éteint (piste d'interrupteur, bord de case et de bouton radio) : 3:1 au moins contre
+     le fond, une carte et `--muted` (WCAG 1.4.11, vérifié par contrast.test.ts). */
+  --control-off: oklch(0.62 0 0);
   --ring: var(--accent);
   /* Coque de l'application : barre latérale et en-tête. */
   --shell: oklch(0.955 0 0);
@@ -196,6 +203,7 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
+  --control-off: oklch(0.57 0 0);
   --shell: oklch(0.08 0 0);
   --shell-foreground: oklch(0.985 0 0);
   --shell-muted-foreground: oklch(0.708 0 0);
@@ -469,3 +477,98 @@
     opacity: 0.35;
   }
 }
+
+/* `FamilyLoader` : le H tricolore se construit (jambage gauche, barre, jambage droit), tient,
+   s'efface, recommence. Les pièces sont coupées par `clip-path` (la forme ne change pas), un
+   léger chevauchement lie les trois gestes. Visible après 200 ms seulement : pas de flash. */
+.family-loader {
+  opacity: 0;
+  animation: family-loader-in var(--duration-base) var(--ease-out) var(--family-loader-delay, 200ms) forwards;
+}
+.family-loader [data-piece] {
+  animation: 1.8s infinite both;
+}
+.family-loader [data-piece="left"] {
+  animation-name: family-loader-left;
+}
+.family-loader [data-piece="bar"] {
+  animation-name: family-loader-bar;
+}
+.family-loader [data-piece="right"] {
+  animation-name: family-loader-right;
+}
+@keyframes family-loader-in {
+  to {
+    opacity: 1;
+  }
+}
+@keyframes family-loader-left {
+  0% {
+    clip-path: inset(100% 0 0 0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  24%,
+  74% {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  90%,
+  100% {
+    clip-path: inset(0 0 0 0);
+    opacity: 0;
+  }
+}
+@keyframes family-loader-bar {
+  0%,
+  16% {
+    clip-path: inset(0 100% 0 0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  40%,
+  77% {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  93%,
+  100% {
+    clip-path: inset(0 0 0 0);
+    opacity: 0;
+  }
+}
+@keyframes family-loader-right {
+  0%,
+  32% {
+    clip-path: inset(100% 0 0 0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  56%,
+  80% {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  96%,
+  100% {
+    clip-path: inset(0 0 0 0);
+    opacity: 0;
+  }
+}
+@keyframes family-loader-breathe {
+  50% {
+    opacity: 0.45;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  /* Le H entier, qui respire lentement. */
+  .family-loader [data-piece] {
+    animation: none;
+  }
+  .family-loader svg {
+    animation: family-loader-breathe 2.4s ease-in-out infinite;
+  }
+}