@hgdc/ui 0.14.2 → 0.15.0

package/README.md

@@ -80,25 +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 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 {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : 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                                                                                                                                                                                                                                                |
+| 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` | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : le seul H d'un chargement de page, fixe sur la zone de contenu de la coque, rendu par le serveur, calé sur l'horloge (même pixel et même phase d'une page et d'un produit à l'autre, ADR 0015). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner` |
+| `page-pending`  | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : la zone de contenu se couvre dès qu'une navigation attend, la coque reste ; `PagePending` : marque la place d'une page qui attend, le H du document s'affiche                                     |
+| `skeleton`      | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                                                                                                                                                                                                              |
 
 ## Listes, journaux et retours
 

package/dist/app-shell.d.ts

@@ -33,17 +33,6 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
     /** Lien du routeur : `render={<Link to="…" />}`. */
     render?: React.ReactElement;
 }): React.JSX.Element;
-/**
- * La coque commune des consoles HGDC, celle de Host. Sur ordinateur, de gauche à droite : la barre
- * des produits de la famille (organisation, Account, pastilles ; élargie au survol à la place
- * de la barre latérale, qui se plie le temps du survol), la barre latérale du produit (sa marque, sa navigation, le compte en bas),
- * réductible en rail (`Ctrl+B`, mémorisé), et la page sur une carte. Sur téléphone : une barre en
- * haut, le menu dans un tiroir qui monte du bas et se referme quand on choisit une page ; les
- * produits restent dans le menu de l'avatar.
- *
- * 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, contentKey, navigating, mainClassName, }: {
     /** Le produit affiché (`"host"`) : sa marque en haut de la barre, « vous êtes ici » dans la barre des produits. */
     product: FamilyProduct;

package/dist/app-shell.js

@@ -4,11 +4,12 @@ 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, Suspense, useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { createContext, Suspense, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { CommandMenuButton } from "./command-menu.js";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
+import { FamilyLoaderHost, FamilyLoaderRootContext } from "./family-loader.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 { CONTENT_LOADING_LAYER, ContentLoadingContext, PAGE_PENDING_MIN_MS, PAGE_PENDING_MS, 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";
@@ -131,14 +132,55 @@ 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.
  */
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
+function useHydrated() {
+    const [hydrated, setHydrated] = useState(false);
+    useIsomorphicLayoutEffect(() => setHydrated(true), []);
+    return hydrated;
+}
+/**
+ * Le chargement de la zone de contenu : `navigating` après 50 ms, `pending` aussitôt, puis au
+ * moins 300 ms. Effets de mise en page : une page qui passe en attente est couverte avant d'être
+ * peinte, jamais une image vide entre les deux.
+ */
+function useContentLoading({ navigating, pending }) {
+    const [navigatingLong, setNavigatingLong] = useState(false);
+    useEffect(() => {
+        if (!navigating)
+            return undefined;
+        const timer = window.setTimeout(() => setNavigatingLong(true), PAGE_PENDING_MS);
+        return () => {
+            window.clearTimeout(timer);
+            setNavigatingLong(false);
+        };
+    }, [navigating]);
+    const active = pending || (navigating && navigatingLong);
+    const [visible, setVisible] = useState(false);
+    const shownAt = useRef(0);
+    useIsomorphicLayoutEffect(() => {
+        if (active && !visible) {
+            shownAt.current = performance.now();
+            setVisible(true);
+            return undefined;
+        }
+        if (!active && visible) {
+            const timer = window.setTimeout(() => setVisible(false), Math.max(0, shownAt.current + PAGE_PENDING_MIN_MS - performance.now()));
+            return () => window.clearTimeout(timer);
+        }
+        return undefined;
+    }, [active, visible]);
+    return visible;
+}
 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();
-    // 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.
+    // Chargement de la zone de contenu (ADR 0015) : une navigation en cours (après 50 ms), une page
+    // qui attend (`PagePending`, aussitôt : le routeur a déjà attendu), ou le départ vers un autre
+    // produit (aussitôt). Une fois montré, au moins 300 ms. Le H est celui du document, en position
+    // fixe : il ne bouge pas d'un état à l'autre et n'est jamais démonté.
     const [leaving, setLeaving] = useState(false);
     const [pagePending, setPagePending] = useState(0);
     const registerPagePending = useCallback(() => {
@@ -155,16 +197,16 @@ export function AppShell({ product, organization, productRail = true, accountHre
         window.addEventListener("pageshow", onPageShow);
         return () => window.removeEventListener("pageshow", onPageShow);
     }, []);
-    // Le calque attend 50 ms et reste au moins 300 ms ; quand la page prend le relais avec
-    // `PagePending` (même H, même place, même phase), il s'efface derrière elle sans que rien ne bouge,
-    // et ne revient pas quand la page arrive.
-    const navigatingShown = useDelayedFlag(navigating && pagePending === 0, PAGE_PENDING_MS, PAGE_PENDING_MIN_MS);
-    const loading = navigatingShown || leaving;
+    const loading = useContentLoading({ navigating, pending: pagePending > 0 || leaving });
+    // Avant l'hydratation, le CSS montre le calque et le H dès qu'une page attend (`:has`) ; ensuite
+    // `data-loading` prend le relais dans la même image.
+    const hydrated = useHydrated();
+    const hasRoot = useContext(FamilyLoaderRootContext);
     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] }) })] }) }) }) }));
+    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, "data-product-rail": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : 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 lg:[scrollbar-gutter:stable]", 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", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsx("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? 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)) }) })] }) }), hasRoot ? null : _jsx(FamilyLoaderHost, {}), _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

@@ -3,23 +3,70 @@ declare const SIZES: {
     readonly md: 40;
     readonly lg: 64;
 };
+/** Durée de la boucle du H (`styles.css`, `.family-loader [data-fill]`). */
+export declare const FAMILY_LOADER_PERIOD_MS = 2000;
 /**
- * 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.
+ * Début des animations du H sur la ligne de temps du document, pour que la boucle soit à la même
+ * phase partout au même instant : `(performance.timeOrigin + now) % période`. Deux pages, deux
+ * produits, un rendu serveur et son hydratation tombent en phase sans se parler.
+ */
+export declare function familyLoaderStartTime(timeOrigin: number, period?: number): number;
+/** Phase de la boucle (0 à la période) à l'instant `epochMs` (ms depuis 1970). */
+export declare function familyLoaderPhase(epochMs: number, period?: number): number;
+/** Cale toutes les animations du H sous `root` sur l'horloge (voir `familyLoaderStartTime`). */
+export declare function syncFamilyLoader(root: Element | null): void;
+/**
+ * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
+ * signalent au lieu de dessiner leur propre H.
+ */
+export declare const FamilyLoaderRootContext: React.Context<boolean>;
+/**
+ * Le H du chargement : la silhouette grise du H de la famille, toujours visible, dont les trois
+ * pièces se remplissent de leurs dégradés en une seule boucle de 2 s (gauche, barre, droite, H
+ * complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
+ * seulement. Mouvement réduit : le H plein respire doucement.
  *
- * 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.
+ * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
+ * document (`FamilyLoaderRoot`), au même pixel dans tous les états. Ce composant sert au H en
+ * ligne (une carte, un panneau) ; dans un bouton ou une ligne, `Spinner` reste la règle.
  */
 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;
-    /** Centré dans l'écran, pour un chargement hors de la coque. */
+    /** Chargement de toute la page : passe par le H du document, comme `PagePending`. */
     page?: boolean;
     className?: string;
 }): React.JSX.Element;
+/**
+ * Le H du document : un seul élément, en position fixe sur la scène (la zone de contenu de la
+ * coque), toujours monté, que le CSS montre quand une page attend ou que la coque charge. Monté par
+ * `FamilyLoaderRoot`, ou, à défaut, par la coque ou par `PagePending` eux-mêmes.
+ */
+export declare function FamilyLoaderHost(): React.JSX.Element;
+/**
+ * Le chargeur du document, à poser une fois dans le `body` de la route racine, autour de l'app :
+ *
+ * ```tsx
+ * <body>
+ *   <FamilyLoaderRoot>{children}</FamilyLoaderRoot>
+ *   <Scripts />
+ * </body>
+ * ```
+ *
+ * Il rend le H dans le HTML du serveur, avant l'hydratation, à la même place et à la même phase
+ * que dans la coque et que dans le produit qu'on vient de quitter (ADR 0015).
+ */
+export declare function FamilyLoaderRoot({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * La place d'une page qui attend, hors de la coque : sa seule présence montre le H du document
+ * (CSS `:has`), dès le rendu serveur. Sans `FamilyLoaderRoot`, elle monte son propre H.
+ */
+export declare function PageLoadingPlaceholder({ label, hasRoot, className, }: {
+    label: string;
+    hasRoot: boolean;
+    className?: string | undefined;
+}): React.JSX.Element;
 export {};

package/dist/family-loader.js

@@ -1,30 +1,109 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef } from "react";
 import { cn } from "./cn.js";
 const SIZES = { sm: 24, md: 40, lg: 64 };
+/** Durée de la boucle du H (`styles.css`, `.family-loader [data-fill]`). */
+export const FAMILY_LOADER_PERIOD_MS = 2000;
 /**
- * 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.
+ * Début des animations du H sur la ligne de temps du document, pour que la boucle soit à la même
+ * phase partout au même instant : `(performance.timeOrigin + now) % période`. Deux pages, deux
+ * produits, un rendu serveur et son hydratation tombent en phase sans se parler.
+ */
+export function familyLoaderStartTime(timeOrigin, period = FAMILY_LOADER_PERIOD_MS) {
+    return -(((timeOrigin % period) + period) % period);
+}
+/** Phase de la boucle (0 à la période) à l'instant `epochMs` (ms depuis 1970). */
+export function familyLoaderPhase(epochMs, period = FAMILY_LOADER_PERIOD_MS) {
+    return ((epochMs % period) + period) % period;
+}
+/** Cale toutes les animations du H sous `root` sur l'horloge (voir `familyLoaderStartTime`). */
+export function syncFamilyLoader(root) {
+    if (!root || typeof root.getAnimations !== "function")
+        return;
+    const start = familyLoaderStartTime(performance.timeOrigin);
+    for (const animation of root.getAnimations({ subtree: true })) {
+        if (animation.startTime !== start)
+            animation.startTime = start;
+    }
+}
+/**
+ * Même calage, en ligne dans le HTML rendu par le serveur, juste après l'élément : il s'exécute
+ * avant l'hydratation, une fois la feuille de style chargée (un script attend les feuilles de
+ * style qui le précèdent). Une animation recréée (mouvement réduit basculé) se recale aussi.
+ */
+const SYNC_SCRIPT = `(function(e){if(!e||!e.getAnimations)return;var p=${FAMILY_LOADER_PERIOD_MS};function s(){var t=-(((performance.timeOrigin%p)+p)%p);e.getAnimations({subtree:true}).forEach(function(a){if(a.startTime!==t)a.startTime=t})}s();e.addEventListener("animationstart",s)})(document.currentScript&&document.currentScript.previousElementSibling)`;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Cale le H sur l'horloge au montage et à chaque animation recréée. */
+function useClockSync(ref) {
+    useIsomorphicLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        syncFamilyLoader(element);
+        const onStart = () => syncFamilyLoader(element);
+        element.addEventListener("animationstart", onStart);
+        return () => element.removeEventListener("animationstart", onStart);
+    }, [ref]);
+}
+function Mark() {
+    return ["left", "bar", "right"].map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece)));
+}
+/**
+ * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
+ * signalent au lieu de dessiner leur propre H.
+ */
+export const FamilyLoaderRootContext = createContext(false);
+/**
+ * Le H du chargement : la silhouette grise du H de la famille, toujours visible, dont les trois
+ * pièces se remplissent de leurs dégradés en une seule boucle de 2 s (gauche, barre, droite, H
+ * complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
+ * seulement. Mouvement réduit : le H plein respire doucement.
  *
- * 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.
+ * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
+ * document (`FamilyLoaderRoot`), au même pixel dans tous les états. Ce composant sert au H en
+ * ligne (une carte, un panneau) ; dans un bouton ou une ligne, `Spinner` reste la règle.
  */
 export function FamilyLoader({ size, label = "Chargement…", page = false, className, }) {
-    const px = SIZES[size ?? (page ? "lg" : "md")];
+    const hasRoot = useContext(FamilyLoaderRootContext);
+    if (page)
+        return _jsx(PageLoadingPlaceholder, { label: label, hasRoot: hasRoot, className: className });
+    return _jsx(FamilyMark, { px: SIZES[size ?? "md"], label: label, className: className });
+}
+function FamilyMark({ px, label, className, }) {
     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-dvh w-full place-items-center", className), children: loader }));
+    useClockSync(ref);
+    return (_jsx("span", { ref: ref, ...(label ? { role: "status", "aria-label": label } : { "aria-hidden": true }), "data-slot": "family-loader", className: cn("family-loader", className), style: { ["--family-loader-size"]: `${px}px` }, children: _jsx(Mark, {}) }));
+}
+/**
+ * Le H du document : un seul élément, en position fixe sur la scène (la zone de contenu de la
+ * coque), toujours monté, que le CSS montre quand une page attend ou que la coque charge. Monté par
+ * `FamilyLoaderRoot`, ou, à défaut, par la coque ou par `PagePending` eux-mêmes.
+ */
+export function FamilyLoaderHost() {
+    const ref = useRef(null);
+    useClockSync(ref);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, "data-slot": "family-loader-root", "aria-hidden": true, children: [_jsx("div", { "data-frame": true }), _jsx("div", { "data-stage": true, children: _jsx("span", { "data-slot": "family-loader", className: "family-loader", style: { ["--family-loader-size"]: "64px" }, children: _jsx(Mark, {}) }) })] }), _jsx("script", { dangerouslySetInnerHTML: { __html: SYNC_SCRIPT } })] }));
+}
+/**
+ * Le chargeur du document, à poser une fois dans le `body` de la route racine, autour de l'app :
+ *
+ * ```tsx
+ * <body>
+ *   <FamilyLoaderRoot>{children}</FamilyLoaderRoot>
+ *   <Scripts />
+ * </body>
+ * ```
+ *
+ * Il rend le H dans le HTML du serveur, avant l'hydratation, à la même place et à la même phase
+ * que dans la coque et que dans le produit qu'on vient de quitter (ADR 0015).
+ */
+export function FamilyLoaderRoot({ children }) {
+    return (_jsxs(FamilyLoaderRootContext, { value: true, children: [children, _jsx(FamilyLoaderHost, {})] }));
+}
+/**
+ * La place d'une page qui attend, hors de la coque : sa seule présence montre le H du document
+ * (CSS `:has`), dès le rendu serveur. Sans `FamilyLoaderRoot`, elle monte son propre H.
+ */
+export function PageLoadingPlaceholder({ label, hasRoot, className, }) {
+    return (_jsx("div", { "data-slot": "page-pending", role: "status", "aria-label": label, className: cn("min-h-dvh w-full", className), children: hasRoot ? null : _jsx(FamilyLoaderHost, {}) }));
 }
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/dist/page-pending.d.ts

@@ -7,24 +7,32 @@ export declare const PAGE_PENDING_MS = 50;
 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.
+ * largeur, opaque. Il cache l'ancienne page ; le H, lui, est celui du document
+ * (`FamilyLoaderRoot`), en position fixe, au même pixel dans tous les états.
  */
 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`). */
+/**
+ * @deprecated Le H d'un chargement de page est celui du document (`FamilyLoaderRoot`, ADR 0015) :
+ * la scène ne garde qu'un texte pour les lecteurs d'écran.
+ */
 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.
+ * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, la coque couvre
+ * alors la zone de contenu et montre le H du document.
  */
 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.
+ * Le chargement d'une page : le H de la famille, au centre de la zone de contenu de la coque, au
+ * même pixel et à la même phase dans tous les états (calque de navigation de la coque, attente
+ * d'une route, frontière `Suspense`, rendu serveur, page d'entrée, produit d'à côté). Ce composant
+ * ne dessine pas de H : il marque la place de la page (`data-slot="page-pending"`) et le H du
+ * document (`FamilyLoaderRoot`) s'affiche, dès le HTML du serveur. Dans la coque, la coque s'en
+ * charge ; hors de la coque, le cadre de la coque est dessiné autour du H.
+ *
+ * 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;

package/dist/page-pending.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
-import { FamilyLoader } from "./family-loader.js";
+import { FamilyLoaderRootContext, PageLoadingPlaceholder } 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.
@@ -10,32 +10,40 @@ export const PAGE_PENDING_MS = 50;
 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.
+ * largeur, opaque. Il cache l'ancienne page ; le H, lui, est celui du document
+ * (`FamilyLoaderRoot`), en position fixe, au même pixel dans tous les états.
  */
 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`). */
+/**
+ * @deprecated Le H d'un chargement de page est celui du document (`FamilyLoaderRoot`, ADR 0015) :
+ * la scène ne garde qu'un texte pour les lecteurs d'écran.
+ */
 export function ContentLoadingStage({ label }) {
-    return (_jsx("div", { className: CONTENT_LOADING_STAGE, children: _jsx(FamilyLoader, { size: "lg", label: label }) }));
+    return (_jsx("span", { role: "status", className: "sr-only", children: 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.
+ * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, la coque couvre
+ * alors la zone de contenu et montre le H du document.
  */
 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.
+ * Le chargement d'une page : le H de la famille, au centre de la zone de contenu de la coque, au
+ * même pixel et à la même phase dans tous les états (calque de navigation de la coque, attente
+ * d'une route, frontière `Suspense`, rendu serveur, page d'entrée, produit d'à côté). Ce composant
+ * ne dessine pas de H : il marque la place de la page (`data-slot="page-pending"`) et le H du
+ * document (`FamilyLoaderRoot`) s'affiche, dès le HTML du serveur. Dans la coque, la coque s'en
+ * charge ; hors de la coque, le cadre de la coque est dessiné autour du H.
+ *
+ * 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);
+    const hasRoot = useContext(FamilyLoaderRootContext);
     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 }) }) }));
+        return _jsx(PageLoadingPlaceholder, { label: label, hasRoot: hasRoot });
+    return (_jsx("div", { "data-slot": "page-pending", role: "status", "aria-label": label, className: "min-h-[calc(100dvh-10rem)]" }));
 }
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /**

package/dist/product-rail.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ProductBadge } from "./product-badge.js";
 import { productRailEntries } from "./products.js";
 import { ShellPlacementContext, useLeaveOnClick } from "./shell-placement.js";
 import { cn } from "./cn.js";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** 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 }) {
@@ -28,7 +29,9 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
     const [focused, setFocused] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const expanded = hovered || focused || menuOpen;
-    useEffect(() => {
+    // Avant la peinture : la barre latérale se plie dans la même image que la barre s'élargit, les
+    // deux transitions partent ensemble et la page ne bouge pas.
+    useIsomorphicLayoutEffect(() => {
         onExpandedChange?.(expanded);
     }, [expanded, onExpandedChange]);
     const ref = useRef(null);

package/package.json

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

@@ -477,13 +477,12 @@
     opacity: 0.35;
   }
 }
-
-/* `FamilyLoader` : le H tricolore se construit (jambage gauche, barre, jambage droit), tient,
-   s'efface, recommence. Les pièces sont coupées par `clip-path` (la forme ne change pas), un
-   léger chevauchement lie les trois gestes. Visible après 200 ms seulement : pas de flash. */
-/* 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. */
+/* Chargeur de la famille (`FamilyLoader`, ADR 0015) : silhouette grise du H, pièces remplies de
+   leurs dégradés. Géométrie du H sur 256 (FAMILY_MARK_SVG). Une seule boucle de 2 s pour tout le H,
+   calée sur l'horloge (`syncFamilyLoader`) : le jambage gauche monte, la barre le prolonge vers la
+   droite, le jambage droit s'ouvre depuis la barre vers le haut et le bas ; le H complet tient, se
+   vide d'un fondu, la silhouette reste un instant, et ça recommence. Seuls `transform` et `opacity`
+   s'animent, sur des couches internes : compositeur, fluide pendant qu'une page charge. */
 .family-loader {
   --fl: var(--family-loader-size, 40px);
   --fl-ghost: color-mix(in oklab, var(--foreground) var(--fl-ghost-mix, 11%), var(--background));
@@ -527,73 +526,216 @@
 .family-loader [data-fill] {
   position: absolute;
   inset: 0;
-  will-change: transform;
+  will-change: transform, opacity;
+  /* Une seule durée, aucun délai : les trois pièces sont trois pistes de la même boucle. */
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
 }
 .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;
+  animation-name: family-loader-left;
 }
 .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;
+  animation-name: family-loader-bar;
 }
-/* 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 {
+.family-loader [data-piece="right"] [data-fill] {
+  background: linear-gradient(to bottom, #fe5292, #ff9a46);
+  /* Le jambage droit s'ouvre depuis la barre (son milieu : 128,5 sur 256, soit 50,24 % du jambage). */
+  transform-origin: 50% 50.24%;
+  animation-name: family-loader-right;
+}
+/* La boucle, sur 2 s : gauche 0-500 ms, barre 300-800, droite 600-1100, H complet 1100-1500,
+   fondu 1500-1750, silhouette seule 1750-2000. Chaque remplissage reprend sa place de départ
+   pendant qu'il est invisible (opacité nulle), d'un seul pas. */
+@keyframes family-loader-left {
   0% {
-    transform: translateY(101%);
+    transform: translateY(100%);
+    opacity: 1;
+    animation-timing-function: var(--ease-in-out);
   }
-  38%,
-  62% {
+  25%,
+  75% {
     transform: translateY(0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  87.5% {
+    transform: translateY(0);
+    opacity: 0;
+    animation-timing-function: steps(1, end);
   }
   100% {
-    transform: translateY(-101%);
+    transform: translateY(100%);
+    opacity: 1;
   }
 }
-/* La barre, de gauche à droite. */
-@keyframes family-loader-sweep {
-  0% {
-    transform: translateX(-101%);
+@keyframes family-loader-bar {
+  0%,
+  15% {
+    transform: translateX(-100%);
+    opacity: 1;
+    animation-timing-function: var(--ease-in-out);
+  }
+  40%,
+  75% {
+    transform: translateX(0);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
   }
-  38%,
-  62% {
+  87.5% {
     transform: translateX(0);
+    opacity: 0;
+    animation-timing-function: steps(1, end);
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 1;
+  }
+}
+@keyframes family-loader-right {
+  0%,
+  30% {
+    transform: scaleY(0);
+    opacity: 1;
+    animation-timing-function: var(--ease-in-out);
+  }
+  55%,
+  75% {
+    transform: scaleY(1);
+    opacity: 1;
+    animation-timing-function: var(--ease-out);
+  }
+  87.5% {
+    transform: scaleY(1);
+    opacity: 0;
+    animation-timing-function: steps(1, end);
   }
   100% {
-    transform: translateX(101%);
+    transform: scaleY(0);
+    opacity: 1;
   }
 }
-@keyframes family-loader-glow {
+/* Mouvement réduit : le H est plein et respire doucement, sur la même boucle. */
+@keyframes family-loader-breathe {
   0%,
   100% {
-    opacity: 0.25;
+    opacity: 0.4;
   }
   50% {
     opacity: 1;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  /* 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;
+    animation-name: family-loader-breathe;
+    animation-timing-function: ease-in-out;
+  }
+}
+
+/* Scène du chargement (ADR 0015) : la zone de contenu de la coque, calculée depuis l'écran, pour
+   que le H soit au même pixel dans la coque, avant elle (rendu serveur, page d'entrée) et d'un
+   produit à l'autre. Téléphone : sous l'en-tête de 56 px. Ordinateur : barre des produits (56 px),
+   barre latérale (256 px, 64 en rail), marge de 8 px, en-tête de 56 px. */
+:root {
+  --hgdc-rail-w: 0px;
+  --hgdc-content-left: 0px;
+  --hgdc-stage-top: calc(env(safe-area-inset-top, 0px) + 3.5rem);
+  --hgdc-stage-right: 0px;
+  --hgdc-stage-bottom: 0px;
+  --hgdc-stage-left: 0px;
+}
+@media (width >= 64rem) {
+  :root {
+    --hgdc-rail-w: 3.5rem;
+    --hgdc-sidebar-w: 16rem;
+    --hgdc-content-left: calc(var(--hgdc-rail-w) + var(--hgdc-sidebar-w));
+    --hgdc-stage-top: 4rem;
+    --hgdc-stage-right: 0.5rem;
+    --hgdc-stage-bottom: 0.5rem;
+    --hgdc-stage-left: var(--hgdc-content-left);
+  }
+  :root[data-sidebar="rail"] {
+    --hgdc-sidebar-w: 4rem;
+  }
+  :root:has([data-slot="app-shell"]:not([data-product-rail])) {
+    --hgdc-rail-w: 0px;
   }
 }
-/* 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. */
+
+/* Le chargeur du document (`FamilyLoaderRoot`) : un seul H par page, en position fixe sur la scène.
+   Visible quand une page attend (`PagePending`) hors de la coque, quand la coque charge
+   (`data-loading`), ou dès le rendu serveur quand une page attend dans une coque pas encore
+   hydratée. Masqué avec 80 ms de retenue : un `PagePending` qui laisse la place à un autre ne fait
+   pas clignoter le H. */
+[data-slot="family-loader-root"] {
+  position: fixed;
+  inset: 0;
+  z-index: 25;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 120ms var(--ease-out) 80ms,
+    visibility 0s linear 200ms;
+}
+:root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])) [data-slot="family-loader-root"],
+:root:has([data-slot="app-shell"][data-loading]) [data-slot="family-loader-root"],
+:root:has([data-slot="app-shell"]:not([data-hydrated]) [data-slot="page-pending"]) [data-slot="family-loader-root"] {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity 150ms var(--ease-out),
+    visibility 0s;
+}
+[data-slot="family-loader-root"] > [data-stage] {
+  position: fixed;
+  top: var(--hgdc-stage-top);
+  right: var(--hgdc-stage-right);
+  bottom: var(--hgdc-stage-bottom);
+  left: var(--hgdc-stage-left);
+  display: grid;
+  place-items: center;
+}
+/* Hors de la coque, le cadre de la coque : la page qui arrive a déjà sa forme, le H sa place. */
+[data-slot="family-loader-root"] > [data-frame] {
+  position: fixed;
+  inset: 0;
+  display: none;
+  background: var(--background);
+}
+:root:not(:has([data-slot="app-shell"])) [data-slot="family-loader-root"] > [data-frame] {
+  display: block;
+}
+@media (width >= 64rem) {
+  [data-slot="family-loader-root"] > [data-frame] {
+    background:
+      linear-gradient(var(--shell-rail), var(--shell-rail)) left / var(--hgdc-rail-w) 100% no-repeat,
+      var(--shell);
+  }
+  [data-slot="family-loader-root"] > [data-frame]::after {
+    content: "";
+    position: absolute;
+    inset: 0.5rem 0.5rem 0.5rem var(--hgdc-content-left);
+    border-radius: var(--radius-xl);
+    background: var(--background);
+  }
+}
+
+/* Calque de la zone de contenu (`AppShell`) : opaque, au-dessus de l'ancienne page, sous le H du
+   document. Mêmes conditions et même rythme que le H : ils apparaissent et s'effacent ensemble. */
 [data-slot="app-shell-loading"] {
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 100ms var(--ease-out),
-    visibility 0s linear 100ms;
+    opacity 120ms var(--ease-out) 80ms,
+    visibility 0s linear 200ms;
 }
-[data-slot="app-shell-loading"][data-visible] {
+[data-slot="app-shell"][data-loading] [data-slot="app-shell-loading"],
+[data-slot="app-shell"]:not([data-hydrated]):has([data-slot="page-pending"]) [data-slot="app-shell-loading"] {
   opacity: 1;
   visibility: visible;
   transition: