@hgdc/ui 0.12.1 → 0.13.0

package/README.md

@@ -80,24 +80,25 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 
 ## Contenu et données
 
-| Import          | Exemple                                                                                                                                                                                                                 |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `card`          | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>`                                                                 |
-| `alert`         | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>`                                                                                                   |
-| `table`         | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />`                    |
-| `resource-list` | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>`                                                                                       |
-| `stat`          | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`                                                                                                  |
-| `time-chart`    | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" lastIncomplete />` (dernier point en pointillés : la journée n'est pas finie)                     |
-| `status`        | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu) ; hors services, `<StatusBadge tone="success" label="Remis" />` (`neutral`, `success`, `warning`, `danger`, `info`, `pending`) |
-| `uptime-bar`    | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />`                                                                                                                |
-| `timeline`      | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />`                                                                                                                                         |
-| `relative-time` | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol)                                                                                                                            |
-| `copy-button`   | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`, `<CopyButton value={all} label="Tout copier" showLabel />`                                                                                 |
-| `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                                                                                                |
+| Import          | Exemple                                                                                                                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `card`          | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>`                                                                                                                                                             |
+| `alert`         | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>`                                                                                                                                                                                               |
+| `table`         | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />`                                                                                                                |
+| `resource-list` | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>`                                                                                                                                                                                   |
+| `stat`          | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`                                                                                                                                                                                              |
+| `time-chart`    | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" lastIncomplete />` (dernier point en pointillés : la journée n'est pas finie)                                                                                                                 |
+| `status`        | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu) ; hors services, `<StatusBadge tone="success" label="Remis" />` (`neutral`, `success`, `warning`, `danger`, `info`, `pending`)                                                                                             |
+| `uptime-bar`    | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />`                                                                                                                                                                                                            |
+| `timeline`      | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />`                                                                                                                                                                                                                                     |
+| `relative-time` | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol)                                                                                                                                                                                                                        |
+| `copy-button`   | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`, `<CopyButton value={all} label="Tout copier" showLabel />`                                                                                                                                                                             |
+| `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 size="lg" label="Ouverture du projet…" />` : le H de la famille qui se construit sur son fantôme (jamais de trou), après 120 ms ; `page` le centre sous l'en-tête en taille `lg`. Dans un bouton : `Spinner`                                                                                         |
+| `page-pending`  | `createRouter({ routeTree, ...routerPendingDefaults })` : `PagePending` (le H centré) dès qu'une navigation attend plus de 120 ms, au moins 400 ms ; avec `AppShell contentKey={location.pathname}`, une page qui charge dans ses composants (`useSuspenseQuery`) le montre aussi au lieu de garder l'ancienne page |
+| `skeleton`      | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                                                                                                            |
 
 ## Listes, journaux et retours
 

package/dist/account-menu.d.ts

@@ -25,7 +25,8 @@ export type AccountUser = {
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
- * « Produits » liste par défaut Account et les produits ouverts du catalogue
+ * « Produits » (masquée au-delà de `lg` dans une coque qui affiche la barre des produits, où ils
+ * sont déjà ; gardée sur téléphone) 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

@@ -16,6 +16,7 @@ import { initials } from "./initials.js";
 import { MENU_LINK_ITEM } from "./org-switcher.js";
 import { ProductBadge } from "./product-badge.js";
 import { productMenuEntries } from "./products.js";
+import { useProductRailShown } from "./shell-placement.js";
 import { useTheme } from "./theme.js";
 const THEMES = ["light", "dark", "system"];
 /**
@@ -24,18 +25,20 @@ const THEMES = ["light", "dark", "system"];
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
- * « Produits » liste par défaut Account et les produits ouverts du catalogue
+ * « Produits » (masquée au-delà de `lg` dans une coque qui affiche la barre des produits, où ils
+ * sont déjà ; gardée sur téléphone) 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.
  */
 export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
     const { theme, setTheme } = useTheme();
     const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
+    const railShown = useProductRailShown();
     return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(HugeiconsIcon, { icon: theme === "dark" ? Moon02Icon : theme === "light" ? Sun03Icon : ComputerIcon, "aria-hidden": true }), "Th\u00E8me"] }), _jsx(DropdownMenuSubContent, { children: _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: (value) => {
                                         const next = THEMES.find((t) => t === value);
                                         if (next)
                                             setTheme(next);
-                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _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"] })] })] }));
+                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, 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

@@ -44,7 +44,7 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
  * 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({ product, organization, productRail, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, mainClassName, }: {
+export declare function AppShell({ product, organization, productRail, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, 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. */
@@ -73,6 +73,13 @@ export declare function AppShell({ product, organization, productRail, accountHr
     /** Texte du champ de recherche : « Rechercher » par défaut. */
     searchLabel?: string;
     children: ReactNode;
+    /**
+     * Clé de la page affichée (le chemin, `location.pathname`) : la zone de contenu devient une
+     * frontière `Suspense` neuve à chaque page, qui montre `PagePending` pendant qu'une page charge
+     * ses données dans ses composants (`useSuspenseQuery`), au lieu de garder l'ancienne page figée
+     * pendant la transition de la navigation. Sans clé, pas de frontière.
+     */
+    contentKey?: string | undefined;
     /**
      * @deprecated La largeur du contenu est la même dans toute la famille (`max-w-6xl`, ADR 0012) :
      * une page étroite passe par `Page` (`@hgdc/ui/page-header`), pas par la coque.

package/dist/app-shell.js

@@ -4,13 +4,15 @@ import PanelLeftCloseIcon from "@hugeicons/core-free-icons/PanelLeftCloseIcon";
 import PanelLeftOpenIcon from "@hugeicons/core-free-icons/PanelLeftOpenIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { useRender } from "@base-ui/react/use-render";
-import { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
+import { createContext, Suspense, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { CommandMenuButton } from "./command-menu.js";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
 import { isApplePlatform, Kbd, KbdGroup } from "./kbd.js";
+import { PagePending } from "./page-pending.js";
 import { ProductBadge } from "./product-badge.js";
 import { ProductRail } from "./product-rail.js";
 import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
+import { ProductRailShownContext } from "./shell-placement.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 ──────────────
@@ -129,10 +131,10 @@ function SidebarHead({ product }) {
  * 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({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, mainClassName, }) {
+export function AppShell({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, 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", "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] }) })] }) }));
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsx(ProductRailShownContext, { value: productRail, 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: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] }) }), _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/family-loader.d.ts

@@ -5,19 +5,20 @@ declare const SIZES: {
 };
 /**
  * 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
+ * boucle (CSS seul, `styles.css`), par-dessus son fantôme (le H à 15 %, toujours visible : la
+ * boucle n'a jamais de trou). La forme et les dégradés sont ceux de `FAMILY_MARK_SVG`.
+ * Il n'apparaît qu'après 120 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.
+ * Pour une page ou une route entière (`PagePending`, `routerPendingDefaults`) ; dans un bouton ou
+ * une ligne, `Spinner` reste la règle. `page` le centre dans la zone de contenu, en taille `lg`.
  */
 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. */
+    /** Centré dans la zone de contenu (sous l'en-tête de la coque), en taille `lg` par défaut. */
     page?: boolean;
     className?: string;
 }): React.JSX.Element;

package/dist/family-loader.js

@@ -4,18 +4,19 @@ 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
+ * boucle (CSS seul, `styles.css`), par-dessus son fantôme (le H à 15 %, toujours visible : la
+ * boucle n'a jamais de trou). La forme et les dégradés sont ceux de `FAMILY_MARK_SVG`.
+ * Il n'apparaît qu'après 120 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.
+ * Pour une page ou une route entière (`PagePending`, `routerPendingDefaults`) ; dans un bouton ou
+ * une ligne, `Spinner` reste la règle. `page` le centre dans la zone de contenu, en taille `lg`.
  */
-export function FamilyLoader({ size = "md", label = "Chargement…", delay = 200, page = false, className, }) {
+export function FamilyLoader({ size, label = "Chargement…", delay = 120, 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)` })] }) }));
+    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 ? "lg" : "md")], !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" })] })] }), _jsxs("g", { "data-ghost": true, opacity: "0.15", children: [_jsx("rect", { x: "43", y: "24", width: "57", height: "208", rx: "18", fill: `url(#${id}l)` }), _jsx("rect", { x: "156", y: "24", width: "57", height: "208", rx: "18", fill: `url(#${id}r)` }), _jsx("rect", { x: "67", y: "107", width: "122", height: "43", rx: "14", fill: `url(#${id}b)` })] }), _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 }));
+    return (_jsx("div", { "data-slot": "family-loader-page", className: cn("grid min-h-[calc(100dvh-10rem)] w-full place-items-center", className), children: loader }));
 }

package/dist/page-pending.d.ts

@@ -0,0 +1,27 @@
+/** Attente avant d'afficher le chargement d'une page : une navigation rapide ne le montre jamais. */
+export declare const PAGE_PENDING_MS = 120;
+/** Durée minimale d'affichage une fois apparu : il ne clignote pas. */
+export declare const PAGE_PENDING_MIN_MS = 400;
+/**
+ * Le chargement d'une page dans la zone de contenu : le H de la famille, centré sous l'en-tête,
+ * la coque restant en place. Composant de `pendingComponent` (TanStack Router) et repli de la
+ * frontière `Suspense` de la coque (`AppShell`, `contentKey`). Sans délai propre : celui de la
+ * route (`PAGE_PENDING_MS`) suffit.
+ */
+export declare function PagePending({ label }: {
+    label?: string;
+}): React.JSX.Element;
+/**
+ * Réglages communs de `createRouter` (TanStack Router) : dès qu'une navigation attend ses données
+ * plus de 120 ms, la zone de contenu montre `PagePending` au lieu de garder l'ancienne page figée,
+ * au moins 400 ms. Le défaut de TanStack Router attend 1 s.
+ *
+ * ```ts
+ * createRouter({ routeTree, ...routerPendingDefaults })
+ * ```
+ */
+export declare const routerPendingDefaults: {
+    defaultPendingComponent: typeof PagePending;
+    defaultPendingMs: number;
+    defaultPendingMinMs: number;
+};

package/dist/page-pending.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FamilyLoader } from "./family-loader.js";
+/** Attente avant d'afficher le chargement d'une page : une navigation rapide ne le montre jamais. */
+export const PAGE_PENDING_MS = 120;
+/** Durée minimale d'affichage une fois apparu : il ne clignote pas. */
+export const PAGE_PENDING_MIN_MS = 400;
+/**
+ * Le chargement d'une page dans la zone de contenu : le H de la famille, centré sous l'en-tête,
+ * la coque restant en place. Composant de `pendingComponent` (TanStack Router) et repli de la
+ * frontière `Suspense` de la coque (`AppShell`, `contentKey`). Sans délai propre : celui de la
+ * route (`PAGE_PENDING_MS`) suffit.
+ */
+export function PagePending({ label = "Chargement…" }) {
+    return _jsx(FamilyLoader, { page: true, delay: 0, label: label });
+}
+/**
+ * Réglages communs de `createRouter` (TanStack Router) : dès qu'une navigation attend ses données
+ * plus de 120 ms, la zone de contenu montre `PagePending` au lieu de garder l'ancienne page figée,
+ * au moins 400 ms. Le défaut de TanStack Router attend 1 s.
+ *
+ * ```ts
+ * createRouter({ routeTree, ...routerPendingDefaults })
+ * ```
+ */
+export const routerPendingDefaults = {
+    defaultPendingComponent: PagePending,
+    defaultPendingMs: PAGE_PENDING_MS,
+    defaultPendingMinMs: PAGE_PENDING_MIN_MS,
+};

package/dist/product-rail.d.ts

@@ -8,7 +8,8 @@ export declare const PRODUCT_RAIL_OPEN_DELAY = 150;
  * 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.
+ * pousse la page (220 px). Un menu ouvert depuis la barre (sélecteur d'organisation) la garde
+ * élargie ; tout revient quand la souris est sortie et que le menu est fermé.
  */
 export declare function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }: {
     /** Le mot du produit affiché (« host ») : marqué en teinte. */

package/dist/product-rail.js

@@ -15,17 +15,24 @@ function ProductLink({ entry }) {
  * 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.
+ * pousse la page (220 px). Un menu ouvert depuis la barre (sélecteur d'organisation) la garde
+ * élargie ; tout revient quand la souris est sortie et que le menu est fermé.
  */
 export function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }) {
-    const [expanded, setExpanded] = useState(false);
+    // Trois raisons de rester élargie : le survol (après le délai d'intention), le focus clavier, et
+    // un menu ouvert depuis la barre (sélecteur d'organisation ou tout autre) : la souris qui quitte
+    // la barre pour aller dans le menu ne doit pas la replier sous elle.
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const expanded = hovered || focused || menuOpen;
     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
-    // focus de ses liens qui l'élargissent.
+    // Écouteurs natifs : la barre est un repère `nav`, pas un contrôle ; c'est son survol, le focus
+    // de ses liens et les menus qu'elle ouvre qui l'élargissent.
     useEffect(() => {
         const rail = ref.current;
         if (!rail)
@@ -39,27 +46,44 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
             if (event.pointerType !== "mouse")
                 return;
             cancel();
-            timer = window.setTimeout(() => setExpanded(true), PRODUCT_RAIL_OPEN_DELAY);
+            timer = window.setTimeout(() => setHovered(true), PRODUCT_RAIL_OPEN_DELAY);
         };
         const onLeave = () => {
             cancel();
-            setExpanded(false);
+            setHovered(false);
+        };
+        // Au clavier seulement : un clic de souris ne laisse pas la barre ouverte, ni le focus rendu au
+        // déclencheur quand un menu ouvert à la souris se ferme. La dernière interaction fait foi.
+        let keyboard = false;
+        const onDocKey = () => {
+            keyboard = true;
+        };
+        const onDocPointer = () => {
+            keyboard = 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);
+            if (keyboard && event.target && focusVisible(event.target))
+                setFocused(true);
         };
         const onFocusOut = (event) => {
             if (!(event.relatedTarget instanceof Node) || !rail.contains(event.relatedTarget))
-                setExpanded(false);
+                setFocused(false);
         };
         const onKey = (event) => {
             if (event.key !== "Escape")
                 return;
             cancel();
-            setExpanded(false);
+            setHovered(false);
+            setFocused(false);
         };
+        // Un menu ouvert depuis la barre : son déclencheur porte `aria-expanded="true"` (Base UI, Radix,
+        // natif). Le menu lui-même vit dans un portail, hors de la barre : on suit donc le déclencheur.
+        const syncMenu = () => setMenuOpen(rail.querySelector('[aria-expanded="true"]') !== null);
+        const observer = new MutationObserver(syncMenu);
+        observer.observe(rail, { subtree: true, attributes: true, attributeFilter: ["aria-expanded"], childList: true });
+        syncMenu();
+        document.addEventListener("keydown", onDocKey, true);
+        document.addEventListener("pointerdown", onDocPointer, true);
         rail.addEventListener("pointerenter", onEnter);
         rail.addEventListener("pointerleave", onLeave);
         rail.addEventListener("focusin", onFocusIn);
@@ -67,6 +91,9 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
         rail.addEventListener("keydown", onKey);
         return () => {
             cancel();
+            observer.disconnect();
+            document.removeEventListener("keydown", onDocKey, true);
+            document.removeEventListener("pointerdown", onDocPointer, true);
             rail.removeEventListener("pointerenter", onEnter);
             rail.removeEventListener("pointerleave", onLeave);
             rail.removeEventListener("focusin", onFocusIn);

package/dist/shell-placement.d.ts

@@ -5,3 +5,9 @@
 export type ShellPlacement = "sidebar" | "product-rail";
 export declare const ShellPlacementContext: React.Context<ShellPlacement>;
 export declare function useShellPlacement(): ShellPlacement;
+/**
+ * Vrai quand la coque affiche la barre des produits (sur ordinateur) : les produits y sont déjà,
+ * le menu du compte ne les répète pas au-delà de `lg`.
+ */
+export declare const ProductRailShownContext: React.Context<boolean>;
+export declare function useProductRailShown(): boolean;

package/dist/shell-placement.js

@@ -3,3 +3,11 @@ export const ShellPlacementContext = createContext("sidebar");
 export function useShellPlacement() {
     return useContext(ShellPlacementContext);
 }
+/**
+ * Vrai quand la coque affiche la barre des produits (sur ordinateur) : les produits y sont déjà,
+ * le menu du compte ne les répète pas au-delà de `lg`.
+ */
+export const ProductRailShownContext = createContext(false);
+export function useProductRailShown() {
+    return useContext(ProductRailShownContext);
+}

package/package.json

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

@@ -483,7 +483,7 @@
    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;
+  animation: family-loader-in var(--duration-base) var(--ease-out) var(--family-loader-delay, 120ms) forwards;
 }
 /* Le nom dans chaque raccourci : sans lui, lightningcss (minification de Vite) réduit
    `animation: 1.8s infinite both` à `animation: none`. */
@@ -507,13 +507,12 @@
     opacity: 1;
     animation-timing-function: var(--ease-out);
   }
-  24%,
-  74% {
+  22%,
+  76% {
     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;
@@ -526,13 +525,12 @@
     opacity: 1;
     animation-timing-function: var(--ease-out);
   }
-  40%,
-  77% {
+  38%,
+  80% {
     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;
@@ -545,13 +543,12 @@
     opacity: 1;
     animation-timing-function: var(--ease-out);
   }
-  56%,
-  80% {
+  54%,
+  84% {
     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;