@hgdc/ui 0.12.2 → 0.14.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…" />` : la silhouette grise du H, dont les pièces se remplissent de leurs dégradés en boucle (1,6 s, `transform` seul, fluide pendant un chargement). `page` le centre dans l'écran. Dans un bouton : `Spinner`                                                                |
+| `page-pending`  | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell navigating={…} contentKey={pathname}` : le H couvre la zone de contenu dès qu'une navigation attend, la coque reste ; `PagePending` : même H, même place, pour une page qui lit ses données |
+| `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 { useLeaveOnClick, useProductRailShown } from "./shell-placement.js";
 import { useTheme } from "./theme.js";
 const THEMES = ["light", "dark", "system"];
 /**
@@ -24,18 +25,21 @@ 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();
+    const leaveOnClick = useLeaveOnClick();
     return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(HugeiconsIcon, { icon: theme === "dark" ? Moon02Icon : theme === "light" ? Sun03Icon : ComputerIcon, "aria-hidden": true }), "Th\u00E8me"] }), _jsx(DropdownMenuSubContent, { children: _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: (value) => {
                                         const next = THEMES.find((t) => t === value);
                                         if (next)
                                             setTheme(next);
-                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _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, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }
 function ProductMenuIcon({ product }) {
     if (product.badge)

package/dist/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, navigating, 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,20 @@ 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;
+    /**
+     * Une navigation vers une autre page est en cours (TanStack Router :
+     * `useRouterState({ select: (s) => s.isLoading && s.location.pathname !== s.resolvedLocation?.pathname })`).
+     * Au-delà de 50 ms, la zone de contenu se couvre du H centré, la coque restant en place : jamais
+     * l'ancienne page figée, quel que soit ce qui attend (session, loaders, code de la page).
+     */
+    navigating?: boolean;
     /**
      * @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, useCallback, useContext, useEffect, useRef, 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 { CONTENT_LOADING_LAYER, ContentLoadingContext, ContentLoadingStage, PAGE_PENDING_MIN_MS, PAGE_PENDING_MS, PagePending, useDelayedFlag, } 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, ShellLeaveContext } 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,37 @@ 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, navigating = false, 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] }) })] }) }));
+    // Chargement de la zone de contenu : navigation en cours (après 50 ms, au moins 300 ms), ou départ
+    // vers un autre produit (aussitôt). Une page qui affiche déjà `PagePending` montre le même H au
+    // même endroit : le calque de la coque s'efface alors derrière lui.
+    const navigatingShown = useDelayedFlag(navigating, PAGE_PENDING_MS, PAGE_PENDING_MIN_MS);
+    const [leaving, setLeaving] = useState(false);
+    const [pagePending, setPagePending] = useState(0);
+    const registerPagePending = useCallback(() => {
+        setPagePending((count) => count + 1);
+        return () => setPagePending((count) => count - 1);
+    }, []);
+    const leave = useCallback(() => setLeaving(true), []);
+    useEffect(() => {
+        // Retour arrière depuis l'autre produit (cache de page) : la page revient telle quelle.
+        const onPageShow = (event) => {
+            if (event.persisted)
+                setLeaving(false);
+        };
+        window.addEventListener("pageshow", onPageShow);
+        return () => window.removeEventListener("pageshow", onPageShow);
+    }, []);
+    const loading = (navigatingShown || leaving) && pagePending === 0;
+    const contentRef = useRef(null);
+    useEffect(() => {
+        // Sur ordinateur, la zone de contenu défile seule : le calque couvre sa partie visible, en haut.
+        if (loading && contentRef.current)
+            contentRef.current.scrollTop = 0;
+    }, [loading]);
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsx(ProductRailShownContext, { value: productRail, children: _jsx(ShellLeaveContext, { value: leave, 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", { ref: contentRef, className: "relative 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("div", { "data-slot": "app-shell-loading", "data-visible": loading ? "" : undefined, "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: _jsx(ContentLoadingStage, { label: "Chargement\u2026" }) }), _jsx("main", { id: "contenu", tabIndex: -1, "aria-busy": loading || pagePending > 0 ? true : undefined, inert: loading || undefined, 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: _jsx(ContentLoadingContext, { value: registerPagePending, 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

@@ -1,23 +1,24 @@
 declare const SIZES: {
-    readonly sm: "size-6";
-    readonly md: "size-10";
-    readonly lg: "size-16";
+    readonly sm: 24;
+    readonly md: 40;
+    readonly lg: 64;
 };
 /**
- * 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.
+ * Le chargement d'une page : la silhouette grise du H de la famille, toujours visible, dont les
+ * trois pièces se remplissent de leurs dégradés tricolores l'une après l'autre, puis se vident, en
+ * boucle (1,6 s). CSS seul (`styles.css`) et seulement `transform` : l'animation tourne sur le
+ * compositeur et reste fluide pendant qu'une page charge. Mouvement réduit : la silhouette reste,
+ * le remplissage pulse doucement.
  *
- * 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.
+ * Dans la coque (`AppShell`), un chargement de page passe par `PagePending`, qui affiche ce H à une
+ * position fixe au centre de la zone de contenu. Ailleurs, `page` le centre dans l'écran. Dans un
+ * bouton ou une ligne, `Spinner` reste la règle.
  */
-export declare function FamilyLoader({ size, label, delay, page, className, }: {
+export declare function FamilyLoader({ size, label, page, className, }: {
+    /** `sm` 24 px, `md` 40 px, `lg` 64 px. Par défaut `lg` en page, `md` sinon. */
     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 l'écran, pour un chargement hors de la coque. */
     page?: boolean;
     className?: string;
 }): React.JSX.Element;

package/dist/family-loader.js

@@ -1,21 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { cn } from "./cn.js";
-const SIZES = { sm: "size-6", md: "size-10", lg: "size-16" };
+const SIZES = { sm: 24, md: 40, lg: 64 };
 /**
- * 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.
+ * Le chargement d'une page : la silhouette grise du H de la famille, toujours visible, dont les
+ * trois pièces se remplissent de leurs dégradés tricolores l'une après l'autre, puis se vident, en
+ * boucle (1,6 s). CSS seul (`styles.css`) et seulement `transform` : l'animation tourne sur le
+ * compositeur et reste fluide pendant qu'une page charge. Mouvement réduit : la silhouette reste,
+ * le remplissage pulse doucement.
  *
- * 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.
+ * Dans la coque (`AppShell`), un chargement de page passe par `PagePending`, qui affiche ce H à une
+ * position fixe au centre de la zone de contenu. Ailleurs, `page` le centre dans l'écran. Dans un
+ * bouton ou une ligne, `Spinner` reste la règle.
  */
-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)` })] }) }));
+export function FamilyLoader({ size, label = "Chargement…", page = false, className, }) {
+    const px = SIZES[size ?? (page ? "lg" : "md")];
+    const ref = useRef(null);
+    // Tous les H de la page battent en phase, calés sur l'horloge du document : passer du calque de
+    // navigation de la coque à celui de la page, ou du rendu serveur à l'hydratation, ne saute pas.
+    useIsomorphicLayoutEffect(() => {
+        for (const animation of ref.current?.getAnimations?.({ subtree: true }) ?? [])
+            animation.startTime = 0;
+    }, []);
+    const loader = (_jsx("span", { ref: ref, role: "status", "aria-label": label, "data-slot": "family-loader", className: cn("family-loader", !page && className), style: { ["--family-loader-size"]: `${px}px` }, children: ["left", "right", "bar"].map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece))) }));
     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-dvh w-full place-items-center", className), children: loader }));
 }
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/dist/page-pending.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Délai avant de couvrir l'ancienne page pendant une navigation : une navigation préchargée
+ * (survol, `defaultPreload: "intent"`) se termine avant et ne montre rien.
+ */
+export declare const PAGE_PENDING_MS = 50;
+/** Durée minimale d'affichage une fois apparu : le H ne clignote pas. */
+export declare const PAGE_PENDING_MIN_MS = 300;
+/**
+ * Calque de chargement de la zone de contenu : sous l'en-tête de la coque (56 px), sur toute la
+ * largeur, opaque. Le H y est centré dans la hauteur visible et y reste (`sticky`) : même place
+ * pour le calque de navigation de la coque et pour `PagePending`, donc aucun saut de l'un à l'autre.
+ */
+export declare const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
+/** Le H centré dans la zone de contenu (calque de `CONTENT_LOADING_LAYER`). */
+export declare function ContentLoadingStage({ label }: {
+    label: string;
+}): React.JSX.Element;
+/**
+ * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, pour que la coque
+ * n'affiche pas son propre calque de navigation par-dessus.
+ */
+export declare const ContentLoadingContext: React.Context<(() => () => void) | null>;
+/**
+ * Le chargement d'une page. Dans la coque (`AppShell`) : le H centré sur un calque opaque de la
+ * zone de contenu, la coque restant en place, dès le rendu serveur. Hors de la coque : le H centré
+ * dans l'écran. Composant de `pendingComponent` (TanStack Router, `routerPendingDefaults`), repli
+ * de la frontière `Suspense` de la coque, et état de chargement d'une page qui lit ses données.
+ */
+export declare function PagePending({ label }: {
+    label?: string;
+}): React.JSX.Element;
+/**
+ * Vrai après `delay` ms de `active`, et le reste au moins `min` ms une fois vrai : un état bref ne
+ * montre rien, un état montré ne clignote pas.
+ */
+export declare function useDelayedFlag(active: boolean, delay: number, min: number): boolean;
+/**
+ * Réglages communs de `createRouter` (TanStack Router) :
+ * - préchargement au survol ou au focus d'un lien (`intent`) : la plupart des pages s'ouvrent sans
+ *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur ;
+ * - une route qui attend encore ses données montre `PagePending` après 50 ms, au moins 300 ms.
+ *
+ * ```ts
+ * createRouter({ routeTree, ...routerPendingDefaults })
+ * ```
+ *
+ * La coque doit vivre dans une route de mise en page (`/o/$org`) et le `beforeLoad` de la racine
+ * ne doit pas appeler le serveur à chaque navigation : une attente là remplacerait toute l'app.
+ */
+export declare const routerPendingDefaults: {
+    defaultPendingComponent: typeof PagePending;
+    defaultPendingMs: number;
+    defaultPendingMinMs: number;
+    defaultPreload: "intent";
+    defaultPreloadStaleTime: number;
+};

package/dist/page-pending.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { FamilyLoader } from "./family-loader.js";
+/**
+ * Délai avant de couvrir l'ancienne page pendant une navigation : une navigation préchargée
+ * (survol, `defaultPreload: "intent"`) se termine avant et ne montre rien.
+ */
+export const PAGE_PENDING_MS = 50;
+/** Durée minimale d'affichage une fois apparu : le H ne clignote pas. */
+export const PAGE_PENDING_MIN_MS = 300;
+/**
+ * Calque de chargement de la zone de contenu : sous l'en-tête de la coque (56 px), sur toute la
+ * largeur, opaque. Le H y est centré dans la hauteur visible et y reste (`sticky`) : même place
+ * pour le calque de navigation de la coque et pour `PagePending`, donc aucun saut de l'un à l'autre.
+ */
+export const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
+const CONTENT_LOADING_STAGE = "sticky top-14 grid h-[calc(100dvh-3.5rem)] place-items-center lg:h-[calc(100dvh-1rem-3.5rem)]";
+/** Le H centré dans la zone de contenu (calque de `CONTENT_LOADING_LAYER`). */
+export function ContentLoadingStage({ label }) {
+    return (_jsx("div", { className: CONTENT_LOADING_STAGE, children: _jsx(FamilyLoader, { size: "lg", label: label }) }));
+}
+/**
+ * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, pour que la coque
+ * n'affiche pas son propre calque de navigation par-dessus.
+ */
+export const ContentLoadingContext = createContext(null);
+/**
+ * Le chargement d'une page. Dans la coque (`AppShell`) : le H centré sur un calque opaque de la
+ * zone de contenu, la coque restant en place, dès le rendu serveur. Hors de la coque : le H centré
+ * dans l'écran. Composant de `pendingComponent` (TanStack Router, `routerPendingDefaults`), repli
+ * de la frontière `Suspense` de la coque, et état de chargement d'une page qui lit ses données.
+ */
+export function PagePending({ label = "Chargement…" }) {
+    const register = useContext(ContentLoadingContext);
+    useIsomorphicLayoutEffect(() => register?.(), [register]);
+    if (!register)
+        return _jsx(FamilyLoader, { page: true, label: label });
+    return (_jsx("div", { "data-slot": "page-pending", className: "min-h-[calc(100dvh-10rem)]", children: _jsx("div", { className: CONTENT_LOADING_LAYER, children: _jsx(ContentLoadingStage, { label: label }) }) }));
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/**
+ * Vrai après `delay` ms de `active`, et le reste au moins `min` ms une fois vrai : un état bref ne
+ * montre rien, un état montré ne clignote pas.
+ */
+export function useDelayedFlag(active, delay, min) {
+    const [visible, setVisible] = useState(false);
+    const [shownAt, setShownAt] = useState(0);
+    useEffect(() => {
+        if (active && !visible) {
+            const timer = window.setTimeout(() => {
+                setShownAt(Date.now());
+                setVisible(true);
+            }, delay);
+            return () => window.clearTimeout(timer);
+        }
+        if (!active && visible) {
+            const timer = window.setTimeout(() => setVisible(false), Math.max(0, shownAt + min - Date.now()));
+            return () => window.clearTimeout(timer);
+        }
+        return undefined;
+    }, [active, visible, delay, min, shownAt]);
+    return visible;
+}
+/**
+ * Réglages communs de `createRouter` (TanStack Router) :
+ * - préchargement au survol ou au focus d'un lien (`intent`) : la plupart des pages s'ouvrent sans
+ *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur ;
+ * - une route qui attend encore ses données montre `PagePending` après 50 ms, au moins 300 ms.
+ *
+ * ```ts
+ * createRouter({ routeTree, ...routerPendingDefaults })
+ * ```
+ *
+ * La coque doit vivre dans une route de mise en page (`/o/$org`) et le `beforeLoad` de la racine
+ * ne doit pas appeler le serveur à chaque navigation : une attente là remplacerait toute l'app.
+ */
+export const routerPendingDefaults = {
+    defaultPendingComponent: PagePending,
+    defaultPendingMs: PAGE_PENDING_MS,
+    defaultPendingMinMs: PAGE_PENDING_MIN_MS,
+    defaultPreload: "intent",
+    defaultPreloadStaleTime: 0,
+};

package/dist/product-rail.js

@@ -2,12 +2,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { ProductBadge } from "./product-badge.js";
 import { productRailEntries } from "./products.js";
-import { ShellPlacementContext } from "./shell-placement.js";
+import { ShellPlacementContext, useLeaveOnClick } 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] })] }) }));
+    // Chaque produit s'ouvre en document complet : la coque montre le H dès le clic.
+    const leaveOnClick = useLeaveOnClick();
+    return (_jsx("li", { children: _jsxs("a", { href: entry.href, onClick: leaveOnClick, "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

package/dist/shell-placement.d.ts

@@ -5,3 +5,17 @@
 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;
+/**
+ * Prévient la coque qu'un lien vers un autre produit (ou une autre adresse servie en document
+ * complet) vient d'être suivi : elle couvre aussitôt la zone de contenu du H de chargement, le
+ * temps que le navigateur ouvre l'autre produit. Sans coque, ne fait rien.
+ */
+export declare const ShellLeaveContext: React.Context<() => void>;
+/** `onClick` d'un lien vers un autre produit : clic simple seulement (pas Ctrl, Cmd, Maj, molette). */
+export declare function useLeaveOnClick(): (event: React.MouseEvent<HTMLAnchorElement>) => void;

package/dist/shell-placement.js

@@ -3,3 +3,31 @@ 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);
+}
+/**
+ * Prévient la coque qu'un lien vers un autre produit (ou une autre adresse servie en document
+ * complet) vient d'être suivi : elle couvre aussitôt la zone de contenu du H de chargement, le
+ * temps que le navigateur ouvre l'autre produit. Sans coque, ne fait rien.
+ */
+export const ShellLeaveContext = createContext(() => { });
+/** `onClick` d'un lien vers un autre produit : clic simple seulement (pas Ctrl, Cmd, Maj, molette). */
+export function useLeaveOnClick() {
+    const leave = useContext(ShellLeaveContext);
+    return (event) => {
+        if (event.defaultPrevented || event.button !== 0)
+            return;
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const target = event.currentTarget.getAttribute("target");
+        if (target && target !== "_self")
+            return;
+        leave();
+    };
+}

package/package.json

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

@@ -481,93 +481,122 @@
 /* `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. */
+/* Chargeur de la famille (`FamilyLoader`) : silhouette grise du H, pièces remplies de leurs
+   dégradés. Géométrie du H sur 256 (FAMILY_MARK_SVG). Seul `transform` s'anime : compositeur,
+   fluide pendant qu'une page charge. */
 .family-loader {
-  opacity: 0;
-  animation: family-loader-in var(--duration-base) var(--ease-out) var(--family-loader-delay, 200ms) forwards;
+  --fl: var(--family-loader-size, 40px);
+  --fl-ghost: color-mix(in oklab, var(--foreground) var(--fl-ghost-mix, 11%), var(--background));
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--fl);
+  height: var(--fl);
+}
+/* Sur fond sombre, la silhouette a besoin d'un peu plus de lumière pour rester lisible. */
+.dark .family-loader {
+  --fl-ghost-mix: 19%;
+}
+.family-loader [data-piece] {
+  position: absolute;
+  overflow: hidden;
+  background: var(--fl-ghost);
+  /* Le coin arrondi découpe aussi le remplissage, sur sa propre couche. */
+  isolation: isolate;
+}
+.family-loader [data-piece="left"],
+.family-loader [data-piece="right"] {
+  top: calc(var(--fl) * 24 / 256);
+  width: calc(var(--fl) * 57 / 256);
+  height: calc(var(--fl) * 208 / 256);
+  border-radius: calc(var(--fl) * 18 / 256);
 }
-/* Le nom dans chaque raccourci : sans lui, lightningcss (minification de Vite) réduit
-   `animation: 1.8s infinite both` à `animation: none`. */
 .family-loader [data-piece="left"] {
-  animation: family-loader-left 1.8s infinite both;
-}
-.family-loader [data-piece="bar"] {
-  animation: family-loader-bar 1.8s infinite both;
+  left: calc(var(--fl) * 43 / 256);
 }
 .family-loader [data-piece="right"] {
-  animation: family-loader-right 1.8s infinite both;
-}
-@keyframes family-loader-in {
-  to {
-    opacity: 1;
-  }
+  left: calc(var(--fl) * 156 / 256);
 }
-@keyframes family-loader-left {
+.family-loader [data-piece="bar"] {
+  left: calc(var(--fl) * 67 / 256);
+  top: calc(var(--fl) * 107 / 256);
+  width: calc(var(--fl) * 122 / 256);
+  height: calc(var(--fl) * 43 / 256);
+  border-radius: calc(var(--fl) * 14 / 256);
+}
+.family-loader [data-fill] {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+.family-loader [data-piece="left"] [data-fill] {
+  background: linear-gradient(to bottom, #2c78fd, #7343fe);
+  animation: family-loader-rise 1.6s var(--ease-in-out) infinite both;
+}
+.family-loader [data-piece="right"] [data-fill] {
+  background: linear-gradient(to bottom, #fe5292, #ff9a46);
+  animation: family-loader-rise 1.6s var(--ease-in-out) 0.4s infinite both;
+}
+.family-loader [data-piece="bar"] [data-fill] {
+  background: linear-gradient(to right, #8145ff, #fe5292);
+  animation: family-loader-sweep 1.6s var(--ease-in-out) 0.2s infinite both;
+}
+/* Les jambes se remplissent par le bas, tiennent, puis la couleur continue de monter et laisse
+   la silhouette : le cycle suivant repart sans temps mort. */
+@keyframes family-loader-rise {
   0% {
-    clip-path: inset(100% 0 0 0);
-    opacity: 1;
-    animation-timing-function: var(--ease-out);
+    transform: translateY(101%);
   }
-  24%,
-  74% {
-    clip-path: inset(0 0 0 0);
-    opacity: 1;
-    animation-timing-function: var(--ease-out);
+  38%,
+  62% {
+    transform: translateY(0);
   }
-  90%,
   100% {
-    clip-path: inset(0 0 0 0);
-    opacity: 0;
+    transform: translateY(-101%);
   }
 }
-@keyframes family-loader-bar {
-  0%,
-  16% {
-    clip-path: inset(0 100% 0 0);
-    opacity: 1;
-    animation-timing-function: var(--ease-out);
+/* La barre, de gauche à droite. */
+@keyframes family-loader-sweep {
+  0% {
+    transform: translateX(-101%);
   }
-  40%,
-  77% {
-    clip-path: inset(0 0 0 0);
-    opacity: 1;
-    animation-timing-function: var(--ease-out);
+  38%,
+  62% {
+    transform: translateX(0);
   }
-  93%,
   100% {
-    clip-path: inset(0 0 0 0);
-    opacity: 0;
+    transform: translateX(101%);
   }
 }
-@keyframes family-loader-right {
+@keyframes family-loader-glow {
   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;
+    opacity: 0.25;
   }
-}
-@keyframes family-loader-breathe {
   50% {
-    opacity: 0.45;
+    opacity: 1;
   }
 }
 @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;
+  /* La silhouette reste, le remplissage pulse en place, sans mouvement. */
+  .family-loader [data-piece] [data-fill] {
+    transform: none;
+    animation: family-loader-glow 1.6s ease-in-out infinite both;
   }
 }
+/* Calque de chargement de la zone de contenu (`AppShell`) : opaque, au-dessus de l'ancienne page,
+   le H à une position fixe. Apparition courte, disparition plus courte encore. */
+[data-slot="app-shell-loading"] {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 100ms var(--ease-out),
+    visibility 0s linear 100ms;
+}
+[data-slot="app-shell-loading"][data-visible] {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity 150ms var(--ease-out),
+    visibility 0s;
+}