@hgdc/ui 0.38.0 → 0.39.1

package/README.md

@@ -65,11 +65,21 @@ Le menu « Produits » et la palette (`badge` d'une commande) montrent la pastil
 
 ### D'un produit à l'autre sous `app.hgdc.ch` (ADR 0020)
 
-Entre deux produits servis sous la même origine, la coque fait comme une seule app : transition de vue entre documents (la barre des produits, la barre latérale et la barre du haut restent en place, le contenu passe en fondu de 150 ms, rien en mouvement réduit), lien relatif marqué `data-hgdc-prerender` et prérendu au survol (`PRODUCT_SPECULATION_RULES` de `@hgdc/ui/product-switch`). Le H couvre le contenu 100 ms après le clic (`PRODUCT_LEAVE_DELAY_MS`) : jamais pour une page prérendue. Chrome et Edge : tout ; Safari 18.2+ : la transition, sans prérendu ; Firefox : navigation ordinaire.
+Entre deux produits servis sous la même origine, la coque fait comme une seule app : transition de vue entre documents, lien relatif marqué `data-hgdc-prerender` et prérendu au survol (`PRODUCT_SPECULATION_RULES` de `@hgdc/ui/product-switch`). Le H couvre le contenu 100 ms après le clic (`PRODUCT_LEAVE_DELAY_MS`) : jamais pour une page prérendue. Chrome et Edge : tout ; Safari 18.2+ : la transition, sans prérendu ; Firefox : navigation ordinaire.
+
+Pendant le passage (0.39) :
+
+- **Barre des produits** : immobile, sans fondu, seul l'indicateur du produit change. La page d'arrivée la peint identique dès sa première image, même quand ses données ne sont pas là : `OrgPlaceholder` tient la place de l'organisation (`organization` absent) avec la marque de la dernière organisation affichée sous l'origine (initiales ou logo, retenus par `OrgSwitcher`, oubliés à la déconnexion par `AccountMenu`), sinon un squelette de la même taille. Le clic la replie sans transition et la page d'arrivée ne l'élargit pas sous la souris restée dessus.
+- **Barre latérale** : la marque du produit et sa navigation passent en fondu de 200 ms. Une page qui attend hors de la coque (`PagePending` sous `FamilyLoaderRoot`) dessine la coque entière : barre des produits, marque du produit de l'adresse, navigation en squelette à la hauteur retenue pour ce produit, barre du haut.
+- **H** : un seul nom de transition (`hgdc-loader`), sans fondu, calé sur l'horloge : celui de l'arrivée reprend à la même phase.
+- **Contenu** : fondu de 150 ms.
+
+`sidebarInitScript` (dans le `<head>`, déjà posé par tous les produits) applique cette mémoire sur `<html>` avant la première peinture : `data-hgdc-product`, `data-hgdc-org`, `--hgdc-org-initials`, `--hgdc-org-logo` (adresse `https:` seulement), `--hgdc-nav-height`. Elle vit dans `localStorage` (`hgdc-shell:org`, `hgdc-shell:nav:<produit>`) et `sessionStorage` (`hgdc-shell:switch`) ; rien d'autre que des initiales, un logo et une hauteur.
 
 Ce que chaque produit fait :
 
 - Monter `@hgdc/ui` et `@hgdc/auth` : `styles.css` déclare `@view-transition`, `AppShell` pose les noms et les règles. Rien d'autre à écrire.
+- Pendant le chargement de ses données, rendre `AppShell` sans `organization` (pas `organization={null}`) : la place reste tenue.
 - CSP : aucun produit ne pose `script-src` aujourd'hui. Celui qui en pose un ajoute `'inline-speculation-rules'` (règles en ligne insérées par la coque) ; sans cela, Chrome les ignore et rien ne casse.
 - Une page qui compte une visite ou lance un effet au chargement attend l'affichage : `document.prerendering` faux, sinon `prerenderingchange`. La relecture des organisations le fait déjà.
 - `localStorage` est commun à tous les produits de l'origine : `theme` et `sidebar` sont communs, c'est voulu ; les groupes repliables sont propres au produit (`sidebar-group:<produit>:<titre>`). Une clé du produit commence par son mot (`mail:last-org`).

package/dist/account-menu.js

@@ -12,6 +12,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 { forgetShellOrganization } from "./shell-memory.js";
 import { useLeaveOnClick, useProductRailShown } from "./shell-placement.js";
 import { ThemeSwitch } from "./theme-switch.js";
 /** L'avatar du compte : la photo, sinon les initiales sur la teinte stable de l'adresse. */
@@ -38,7 +39,11 @@ export function AccountMenu({ user, onProfile, onSecurity, onSignOut, products:
     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: [_jsx(AccountAvatar, { user: user }), 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-72", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { className: "flex items-center gap-2.5 py-2", children: [_jsx(AccountAvatar, { user: user }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium 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, _jsx(ThemeSwitch, {}), children ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), 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"] })] })] }));
+    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: [_jsx(AccountAvatar, { user: user }), 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-72", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { className: "flex items-center gap-2.5 py-2", children: [_jsx(AccountAvatar, { user: user }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium 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, _jsx(ThemeSwitch, {}), children ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), 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: () => {
+                            // La marque de l'organisation retenue pour la coque ne survit pas à la session.
+                            forgetShellOrganization();
+                            onSignOut();
+                        }, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }
 function ProductMenuIcon({ product }) {
     if (product.badge)

package/dist/app-shell.d.ts

@@ -2,8 +2,10 @@ import { type IconSvgElement } from "@hugeicons/react";
 import { type ReactNode } from "react";
 import type { FamilyProduct } from "./family-svg.ts";
 /**
- * À poser dans le `<head>`, avec `themeInitScript` : il remet le rail avant la première
- * peinture, et la variante CSS `rail:` le lit, donc rien ne saute au chargement.
+ * À poser dans le `<head>`, avec `themeInitScript` : avant la première peinture, il remet le
+ * rail (la variante CSS `rail:` le lit, rien ne saute au chargement) et la mémoire de la coque
+ * partagée sous la même origine (`shell-memory` : produit de l'adresse, dernière organisation,
+ * hauteur de la navigation), que le cadre du chargeur et `OrgPlaceholder` lisent (ADR 0020).
  */
 export declare const sidebarInitScript: string;
 /** La barre latérale est-elle réduite en rail ? L'état vit sur `<html data-sidebar="rail">`. */
@@ -126,7 +128,11 @@ export declare const PRODUCT_LEAVE_DELAY_MS = 100;
 export declare function AppShell({ product, organization, productRail, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating, mainClassName, statusPage, }: {
     /** 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. */
+    /**
+     * `OrgSwitcher` : en haut de la barre des produits, en haut du tiroir sur téléphone. Absent
+     * pendant que les données du produit arrivent : la barre lui garde sa place, avec la marque de
+     * la dernière organisation affichée (`OrgPlaceholder`, ADR 0020). `null` : aucune organisation.
+     */
     organization?: ReactNode;
     /**
      * `false` : pas de barre des produits (un écran hors de la famille). L'organisation passe alors

package/dist/app-shell.js

@@ -20,8 +20,9 @@ import { CONTENT_LOADING_LAYER, ContentLoadingContext, PAGE_PENDING_MIN_MS, PAGE
 import { ProductBadge } from "./product-badge.js";
 import { ProductRail } from "./product-rail.js";
 import { useProductSwitch } from "./product-switch.js";
-import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
 import { ProductRailShownContext, ShellLeaveContext, StatusPageContext } from "./shell-placement.js";
+import { familyProductName, SIDEBAR_BRAND, SIDEBAR_BRAND_NAME, SIDEBAR_HEAD } from "./shell-frame.js";
+import { rememberShellNavHeight, shellBootScript } from "./shell-memory.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "./cn.js";
 import { ServiceStatus, statusPageUrlFor } from "./service-status.js";
@@ -30,10 +31,12 @@ import { useMediaQuery } from "./use-media-query.js";
 const RAIL_KEY = "sidebar";
 const RAIL_EVENT = "sidebarchange";
 /**
- * À poser dans le `<head>`, avec `themeInitScript` : il remet le rail avant la première
- * peinture, et la variante CSS `rail:` le lit, donc rien ne saute au chargement.
+ * À poser dans le `<head>`, avec `themeInitScript` : avant la première peinture, il remet le
+ * rail (la variante CSS `rail:` le lit, rien ne saute au chargement) et la mémoire de la coque
+ * partagée sous la même origine (`shell-memory` : produit de l'adresse, dernière organisation,
+ * hauteur de la navigation), que le cadre du chargeur et `OrgPlaceholder` lisent (ADR 0020).
  */
-export const sidebarInitScript = `try{if(localStorage.getItem(${JSON.stringify(RAIL_KEY)})==="rail")document.documentElement.dataset.sidebar="rail"}catch(e){}`;
+export const sidebarInitScript = shellBootScript();
 function subscribeRail(onChange) {
     window.addEventListener(RAIL_EVENT, onChange);
     return () => window.removeEventListener(RAIL_EVENT, onChange);
@@ -344,11 +347,6 @@ const TOGGLE = "touch-target relative grid h-9 w-10 shrink-0 place-items-center
 function ShortcutHint({ label }) {
     return (_jsxs("span", { className: "flex items-center gap-2", children: [label, _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: isApplePlatform() ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: "B" })] })] }));
 }
-function productName(product) {
-    if (product === HGDC_ACCOUNT.badge)
-        return HGDC_ACCOUNT.name;
-    return HGDC_PRODUCTS.find((item) => item.badge === product)?.name ?? `HGDC ${product}`;
-}
 /**
  * Haut de la barre latérale. Dépliée : la marque du produit, et le bouton « Réduire » à droite.
  * En rail : la marque seule, qui devient le bouton « Déplier » au survol de la barre ou au focus,
@@ -356,7 +354,7 @@ function productName(product) {
  * choisis par la variante CSS `rail:`, donc justes dès la première peinture.
  */
 function SidebarHead({ product }) {
-    return (_jsxs("div", { className: "mt-2 flex h-14 shrink-0 items-center gap-1 px-3", children: [_jsxs("div", { "data-slot": "sidebar-brand", className: "flex min-w-0 flex-1 items-center gap-2.5 pl-2.25 rail:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "truncate font-heading text-[0.9375rem] font-semibold", children: productName(product) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-collapse", onClick: toggleSidebar, "aria-label": "R\u00E9duire la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "rail:hidden") }), children: _jsx(HugeiconsIcon, { icon: COLLAPSE_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "R\u00E9duire" }) })] }), _jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-expand", onClick: toggleSidebar, "aria-label": "D\u00E9plier la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "group/toggle hidden rail:grid") }), children: [_jsx(ProductBadge, { product: product, className: "col-start-1 row-start-1 size-6 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-0 group-focus-visible/toggle:opacity-0 motion-reduce:transition-none" }), _jsx(HugeiconsIcon, { icon: EXPAND_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "col-start-1 row-start-1 size-[1.125rem] opacity-0 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-100 group-focus-visible/toggle:opacity-100 motion-reduce:transition-none" })] }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "D\u00E9plier" }) })] })] }));
+    return (_jsxs("div", { className: SIDEBAR_HEAD, children: [_jsxs("div", { "data-slot": "sidebar-brand", className: cn(SIDEBAR_BRAND, "rail:hidden"), children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: SIDEBAR_BRAND_NAME, children: familyProductName(product) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-collapse", onClick: toggleSidebar, "aria-label": "R\u00E9duire la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "rail:hidden") }), children: _jsx(HugeiconsIcon, { icon: COLLAPSE_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "R\u00E9duire" }) })] }), _jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-expand", onClick: toggleSidebar, "aria-label": "D\u00E9plier la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "group/toggle hidden rail:grid") }), children: [_jsx(ProductBadge, { product: product, className: "col-start-1 row-start-1 size-6 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-0 group-focus-visible/toggle:opacity-0 motion-reduce:transition-none" }), _jsx(HugeiconsIcon, { icon: EXPAND_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "col-start-1 row-start-1 size-[1.125rem] opacity-0 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-100 group-focus-visible/toggle:opacity-100 motion-reduce:transition-none" })] }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "D\u00E9plier" }) })] })] }));
 }
 /**
  * La coque commune des consoles HGDC, celle de Host. Sur ordinateur, de gauche à droite : la barre
@@ -445,6 +443,7 @@ export function AppShell({ product, organization, productRail = true, accountHre
                 return;
             window.clearTimeout(leaveTimer.current);
             setLeaving(false);
+            delete document.documentElement.dataset.hgdcSwitching;
         };
         window.addEventListener("pageshow", onPageShow);
         return () => {
@@ -459,6 +458,21 @@ export function AppShell({ product, organization, productRail = true, accountHre
     const hydrated = useHydrated();
     const hasRoot = useContext(FamilyLoaderRootContext);
     const contentRef = useRef(null);
+    const sidebarRef = useRef(null);
+    // Mémoire de la coque (ADR 0020) : le produit affiché, pour le cadre d'un chargement qui suivrait
+    // hors de la coque dans ce document, et la hauteur de sa navigation, pour le squelette de la
+    // barre latérale à la prochaine arrivée sur ce produit.
+    useIsomorphicLayoutEffect(() => {
+        document.documentElement.dataset.hgdcProduct = product;
+    }, [product]);
+    const navHeight = useRef(0);
+    useEffect(() => {
+        const list = sidebarRef.current?.querySelector(":scope > nav > ul");
+        if (!(list instanceof HTMLElement) || list.offsetHeight === navHeight.current)
+            return;
+        navHeight.current = list.offsetHeight;
+        rememberShellNavHeight(product, list.offsetHeight);
+    });
     useEffect(() => {
         // Sur ordinateur, la zone de contenu défile seule : le calque couvre sa partie visible, en haut.
         if (loading && contentRef.current)
@@ -477,5 +491,5 @@ export function AppShell({ product, organization, productRail = true, accountHre
     const assistantButtonRef = useRef(null);
     useAssistantShortcut(assistant);
     const footer = (_jsxs(_Fragment, { children: [account !== undefined ? sidebarFooter : null, _jsx(ShellCommonLinks, { links: links ?? {}, statusPageUrl: statusPageUrl }), account ?? sidebarFooter] }));
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ProductRailShownContext, { value: productRail, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, 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, "data-assistant": assistantOpen ? "" : undefined, className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)_auto]" : "lg:grid-cols-[auto_minmax(0,1fr)_auto]"), 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("div", { className: "contents", inert: pageBlocked || undefined, children: _jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref, onExpandedChange: setRailPeek }) })) : null, _jsxs("aside", { "data-slot": "app-shell-sidebar", "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, 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, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, 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", { "data-slot": "app-shell-header", className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 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: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : 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 }), _jsxs("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(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, 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, _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)] empty:hidden", children: footer })] }) })] }) }) }) }) }));
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ProductRailShownContext, { value: productRail, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, 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, "data-assistant": assistantOpen ? "" : undefined, className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)_auto]" : "lg:grid-cols-[auto_minmax(0,1fr)_auto]"), 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("div", { className: "contents", inert: pageBlocked || undefined, children: _jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref, onExpandedChange: setRailPeek }) })) : null, _jsxs("aside", { ref: sidebarRef, "data-slot": "app-shell-sidebar", "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, 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, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, 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", { "data-slot": "app-shell-header", className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 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: familyProductName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : 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 }), _jsxs("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(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, 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, _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)] empty:hidden", children: footer })] }) })] }) }) }) }) }));
 }

package/dist/family-loader.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { createContext, useContext, useEffect, useLayoutEffect, useRef } from "react";
 import { cn } from "./cn.js";
 import { useBackgroundOrganizationRefresh } from "./product-switch.js";
+import { ShellFrame } from "./shell-frame.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;
@@ -92,7 +93,7 @@ function FamilyMark({ px, label, className, }) {
 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 } })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, "data-slot": "family-loader-root", "aria-hidden": true, children: [_jsx("div", { "data-frame": true, children: _jsx(ShellFrame, {}) }), _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 :

package/dist/org-switcher.js

@@ -4,9 +4,11 @@ import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
 import UnfoldMoreIcon from "@hugeicons/core-free-icons/UnfoldMoreIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { useEffect } from "react";
 import { Badge } from "./badge.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { initials } from "./initials.js";
+import { rememberShellOrganization } from "./shell-memory.js";
 import { useShellPlacement } from "./shell-placement.js";
 import { cn } from "./cn.js";
 export const ORG_ROLE_LABEL = {
@@ -39,6 +41,13 @@ export function OrgMark({ org, className, }) {
 export function OrgSwitcher({ organizations, activeId, onSelect, createHref, onCreate, className, }) {
     const placement = useShellPlacement();
     const active = organizations.find((org) => org.id === activeId);
+    // Retenue pour la première image du prochain produit ouvert sous la même origine (ADR 0020).
+    const activeName = active?.name;
+    const activeLogo = active?.logo;
+    useEffect(() => {
+        if (activeName !== undefined)
+            rememberShellOrganization({ name: activeName, logo: activeLogo });
+    }, [activeName, activeLogo]);
     if (!active)
         return null;
     // En haut de la barre des produits : la marque seule dans 40 px, le nom quand la barre s'élargit.

package/dist/product-rail.d.ts

@@ -2,6 +2,20 @@ import { type ReactNode } from "react";
 import { type HgdcCatalogProduct } from "./products.ts";
 /** Délai d'intention avant d'élargir la barre au survol : un passage de souris ne l'ouvre pas. */
 export declare const PRODUCT_RAIL_OPEN_DELAY = 150;
+/**
+ * La place de l'organisation tant que le produit ne l'a pas (ses données arrivent) : la marque de
+ * la dernière organisation affichée sous cette origine, au pixel près de celle d'`OrgSwitcher`
+ * (initiales ou logo, posés sur `<html>` par `sidebarInitScript` avant la première peinture),
+ * sinon un carré de squelette de la même taille. Rien ne bouge quand la vraie arrive.
+ */
+export declare function OrgPlaceholder(): React.JSX.Element;
+/**
+ * La barre des produits du cadre de chargement (`FamilyLoaderRoot`, hors de la coque) : la même
+ * colonne que `ProductRail` repliée, `OrgPlaceholder` en haut, les mêmes pastilles, sans liens. Le
+ * produit courant est marqué par le CSS (`<html data-hgdc-product>`, posé par
+ * `sidebarInitScript`) : au rendu serveur, le kit ne connaît pas l'adresse.
+ */
+export declare function ProductRailFrame(): React.JSX.Element;
 /**
  * La barre des produits de la famille, tout à gauche de la coque sur ordinateur : organisation en
  * haut, Account, puis les pastilles des produits. 56 px de large ; au survol (après un court délai
@@ -14,7 +28,10 @@ export declare const PRODUCT_RAIL_OPEN_DELAY = 150;
 export declare function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }: {
     /** Le mot du produit affiché (« host ») : marqué en teinte. */
     current?: string | undefined;
-    /** `OrgSwitcher`, rendu compact. */
+    /**
+     * `OrgSwitcher`, rendu compact. Absent (`undefined` : les données du produit arrivent), sa
+     * place est tenue par `OrgPlaceholder`. `null` : pas d'organisation, rien en haut.
+     */
     organization?: ReactNode;
     /** Adresse d'Account (un Account local en développement). */
     accountHref?: string | undefined;

package/dist/product-rail.js

@@ -3,6 +3,7 @@ import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } fr
 import { ProductBadge } from "./product-badge.js";
 import { PRODUCT_PRERENDER_ATTRIBUTE } from "./product-switch.js";
 import { productRailEntries } from "./products.js";
+import { markProductSwitch, takeProductSwitch } from "./shell-memory.js";
 import { ShellPlacementContext, useLeaveOnClick } from "./shell-placement.js";
 import { cn } from "./cn.js";
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -13,10 +14,41 @@ function usePageOrigin() {
 }
 /** 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;
+/** Boîte d'une entrée de la barre : la même pour un lien et pour sa place dans le cadre de chargement. */
+const PRODUCT_ITEM = "flex h-10 items-center gap-3 rounded-xl px-2 text-shell-muted coarse:h-11";
+/** Colonne de la barre (56 px) et son contenu : les mêmes pour la barre et pour le cadre de chargement. */
+const RAIL_COLUMN = "hidden w-14 shrink-0 overflow-hidden lg:block";
+const RAIL_INNER = "group/rail flex h-full w-full flex-col gap-2 overflow-hidden bg-shell-rail px-2 py-3 text-shell-foreground";
+const RAIL_LIST = "grid min-h-0 gap-1 overflow-x-hidden overflow-y-auto";
+function ProductLabel({ entry }) {
+    return (_jsxs(_Fragment, { 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] })] }));
+}
 function ProductLink({ entry }) {
     // 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, ...(entry.sameOrigin ? { [PRODUCT_PRERENDER_ATTRIBUTE]: "" } : {}), "aria-current": entry.current ? "page" : undefined, className: cn("flex h-10 items-center gap-3 rounded-xl px-2 text-shell-muted coarse:h-11 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] })] }) }));
+    return (_jsx("li", { children: _jsx("a", { href: entry.href, onClick: leaveOnClick, ...(entry.sameOrigin ? { [PRODUCT_PRERENDER_ATTRIBUTE]: "" } : {}), "aria-current": entry.current ? "page" : undefined, className: cn(PRODUCT_ITEM, "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(ProductLabel, { entry: entry }) }) }));
+}
+/**
+ * La place de l'organisation tant que le produit ne l'a pas (ses données arrivent) : la marque de
+ * la dernière organisation affichée sous cette origine, au pixel près de celle d'`OrgSwitcher`
+ * (initiales ou logo, posés sur `<html>` par `sidebarInitScript` avant la première peinture),
+ * sinon un carré de squelette de la même taille. Rien ne bouge quand la vraie arrive.
+ */
+export function OrgPlaceholder() {
+    return (_jsx("div", { "data-slot": "org-placeholder", "aria-hidden": true, className: "flex h-10 w-full shrink-0 items-center px-1 coarse:h-11", children: _jsx("span", { "data-slot": "org-placeholder-mark", className: "grid size-8 shrink-0 place-items-center rounded-lg text-xs font-semibold uppercase" }) }));
+}
+function RailDivider() {
+    return _jsx("div", { "aria-hidden": true, className: "mx-2 h-px shrink-0 bg-foreground/8" });
+}
+/**
+ * La barre des produits du cadre de chargement (`FamilyLoaderRoot`, hors de la coque) : la même
+ * colonne que `ProductRail` repliée, `OrgPlaceholder` en haut, les mêmes pastilles, sans liens. Le
+ * produit courant est marqué par le CSS (`<html data-hgdc-product>`, posé par
+ * `sidebarInitScript`) : au rendu serveur, le kit ne connaît pas l'adresse.
+ */
+export function ProductRailFrame() {
+    const { products, account } = productRailEntries();
+    return (_jsx("div", { "data-slot": "shell-frame-rail", className: RAIL_COLUMN, children: _jsxs("div", { className: RAIL_INNER, children: [_jsx(OrgPlaceholder, {}), _jsx(RailDivider, {}), _jsx("ul", { className: RAIL_LIST, children: [account, ...products].map((entry) => (_jsx("li", { children: _jsx("span", { "data-product": entry.badge, className: PRODUCT_ITEM, children: _jsx(ProductLabel, { entry: entry }) }) }, entry.badge))) })] }) }));
 }
 /**
  * La barre des produits de la famille, tout à gauche de la coque sur ordinateur : organisation en
@@ -50,17 +82,21 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
         if (!rail)
             return;
         let timer;
+        // Arrivée depuis la barre d'un autre produit, la souris restée dessus : la barre ne s'élargit
+        // pas sous elle, il faut d'abord en sortir (ADR 0020).
+        let arrivedUnderPointer = takeProductSwitch();
         const cancel = () => {
             window.clearTimeout(timer);
             timer = undefined;
         };
         const onEnter = (event) => {
-            if (event.pointerType !== "mouse")
+            if (event.pointerType !== "mouse" || arrivedUnderPointer)
                 return;
             cancel();
             timer = window.setTimeout(() => setHovered(true), PRODUCT_RAIL_OPEN_DELAY);
         };
         const onLeave = () => {
+            arrivedUnderPointer = false;
             cancel();
             setHovered(false);
         };
@@ -88,6 +124,10 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
                 return;
             if (!(event.target instanceof Element) || !event.target.closest("a[href]"))
                 return;
+            // Repliée d'un coup, sans transition (`data-hgdc-switching`) : l'image de départ de la
+            // transition de vue montre déjà la barre telle que la page d'arrivée la peint.
+            document.documentElement.dataset.hgdcSwitching = "";
+            markProductSwitch();
             cancel();
             setHovered(false);
             setFocused(false);
@@ -126,10 +166,10 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
             rail.removeEventListener("click", onClick);
         };
     }, []);
-    return (_jsx("div", { "data-slot": "product-rail", "data-expanded": expanded ? "" : undefined, className: cn("hidden w-14 shrink-0 overflow-hidden lg:block", 
+    return (_jsx("div", { "data-slot": "product-rail", "data-expanded": expanded ? "" : undefined, className: cn(RAIL_COLUMN, 
         // Même durée et même courbe que la barre latérale qui se plie : la somme des deux largeurs
         // reste constante (56 + 256 = 248 + 64), la page ne bouge pas.
-        "transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none", "data-expanded:w-62 folded:data-expanded:w-55"), children: _jsxs("nav", { ref: ref, "aria-label": "Produits", "data-expanded": expanded ? "" : undefined, className: "group/rail flex h-full w-full flex-col gap-2 overflow-hidden bg-shell-rail px-2 py-3 text-shell-foreground", children: [organization ? (_jsxs(_Fragment, { children: [_jsx(ShellPlacementContext, { value: "product-rail", children: organization }), _jsx("div", { "aria-hidden": true, className: "mx-2 h-px shrink-0 bg-foreground/8" })] })) : null, _jsxs("ul", { className: "grid min-h-0 gap-1 overflow-x-hidden overflow-y-auto", children: [_jsx(ProductLink, { entry: account }), products.map((entry) => (_jsx(ProductLink, { entry: entry }, entry.badge)))] })] }) }));
+        "transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none", "data-expanded:w-62 folded:data-expanded:w-55"), children: _jsxs("nav", { ref: ref, "aria-label": "Produits", "data-expanded": expanded ? "" : undefined, className: RAIL_INNER, children: [organization === undefined ? (_jsxs(_Fragment, { children: [_jsx(OrgPlaceholder, {}), _jsx(RailDivider, {})] })) : organization ? (_jsxs(_Fragment, { children: [_jsx(ShellPlacementContext, { value: "product-rail", children: organization }), _jsx(RailDivider, {})] })) : null, _jsxs("ul", { className: RAIL_LIST, children: [_jsx(ProductLink, { entry: account }), products.map((entry) => (_jsx(ProductLink, { entry: entry }, entry.badge)))] })] }) }));
 }
 function focusVisible(target) {
     if (!(target instanceof Element))

package/dist/products.js

@@ -75,7 +75,7 @@ const account = product("Account", "Ton compte : profil, sécurité et organisat
 export const HGDC_ACCOUNT = { ...account, entryHref: account.href };
 /** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
 export const HGDC_PRODUCTS = [
-    product("Host", "Ton site en ligne, déployé à chaque modification.", Rocket01Icon, "preview"),
+    product("Host", "Ton site en ligne, déployé à chaque modification.", Rocket01Icon, "live"),
     product("Mail", "Tes e-mails, newsletters et formulaires, envoyés depuis ton adresse.", Mail01Icon, "live"),
     product("Portal", "Un espace partagé où ton client suit son projet, signe et paie.", Briefcase01Icon, "live"),
     product("Status", "La surveillance de tes sites et ta page de statut.", Activity01Icon, "live"),

package/dist/shell-frame.d.ts

@@ -0,0 +1,21 @@
+import { type FamilyProduct } from "./family-svg.ts";
+/** Nom affiché d'un produit de la famille (« Mail »), Account compris. */
+export declare function familyProductName(product: FamilyProduct): string;
+/** Haut de la barre latérale (marque du produit) : le même dans la coque et dans le cadre. */
+export declare const SIDEBAR_HEAD = "mt-2 flex h-14 shrink-0 items-center gap-1 px-3";
+export declare const SIDEBAR_BRAND = "flex min-w-0 flex-1 items-center gap-2.5 pl-2.25";
+export declare const SIDEBAR_BRAND_NAME = "truncate font-heading text-[0.9375rem] font-semibold";
+/** Même boîte qu'une entrée de la barre en rail : 40 × 36 px. */
+export declare const SIDEBAR_RAIL_BOX = "grid h-9 w-10 shrink-0 place-items-center rounded-xl";
+/**
+ * Le cadre de la coque, dessiné par le chargeur du document (`FamilyLoaderRoot`) quand une page
+ * attend hors de la coque : barre des produits complète (organisation retenue, pastilles, produit
+ * courant), barre latérale du produit (sa marque, la navigation en squelette à sa hauteur
+ * retenue), carte du contenu et sa barre du haut. Mêmes boîtes que la coque, au pixel : la
+ * transition de vue d'un produit à l'autre n'a rien à faire bouger, et la coque qui monte ensuite
+ * prend la place sans saut.
+ *
+ * Le produit vient de l'adresse (`<html data-hgdc-product>`, `sidebarInitScript`) : le rendu
+ * serveur dessine toutes les marques, le CSS montre la bonne.
+ */
+export declare function ShellFrame(): React.JSX.Element;

package/dist/shell-frame.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FAMILY_PRODUCTS } from "./family-svg.js";
+import { ProductBadge } from "./product-badge.js";
+import { ProductRailFrame } from "./product-rail.js";
+import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
+/** Nom affiché d'un produit de la famille (« Mail »), Account compris. */
+export function familyProductName(product) {
+    if (product === HGDC_ACCOUNT.badge)
+        return HGDC_ACCOUNT.name;
+    return HGDC_PRODUCTS.find((item) => item.badge === product)?.name ?? `HGDC ${product}`;
+}
+/** Haut de la barre latérale (marque du produit) : le même dans la coque et dans le cadre. */
+export const SIDEBAR_HEAD = "mt-2 flex h-14 shrink-0 items-center gap-1 px-3";
+export const SIDEBAR_BRAND = "flex min-w-0 flex-1 items-center gap-2.5 pl-2.25";
+export const SIDEBAR_BRAND_NAME = "truncate font-heading text-[0.9375rem] font-semibold";
+/** Même boîte qu'une entrée de la barre en rail : 40 × 36 px. */
+export const SIDEBAR_RAIL_BOX = "grid h-9 w-10 shrink-0 place-items-center rounded-xl";
+/** Lignes de squelette de la navigation, coupées à la hauteur retenue (`--hgdc-nav-height`). */
+const SKELETON_ROWS = 12;
+/**
+ * Le cadre de la coque, dessiné par le chargeur du document (`FamilyLoaderRoot`) quand une page
+ * attend hors de la coque : barre des produits complète (organisation retenue, pastilles, produit
+ * courant), barre latérale du produit (sa marque, la navigation en squelette à sa hauteur
+ * retenue), carte du contenu et sa barre du haut. Mêmes boîtes que la coque, au pixel : la
+ * transition de vue d'un produit à l'autre n'a rien à faire bouger, et la coque qui monte ensuite
+ * prend la place sans saut.
+ *
+ * Le produit vient de l'adresse (`<html data-hgdc-product>`, `sidebarInitScript`) : le rendu
+ * serveur dessine toutes les marques, le CSS montre la bonne.
+ */
+export function ShellFrame() {
+    return (_jsxs("div", { "data-slot": "shell-frame", "aria-hidden": true, className: "hidden h-full lg:flex", children: [_jsx(ProductRailFrame, {}), _jsxs("div", { "data-slot": "shell-frame-sidebar", className: "flex w-64 shrink-0 flex-col overflow-hidden rail:w-16", children: [_jsx("div", { className: SIDEBAR_HEAD, children: FAMILY_PRODUCTS.map((product) => (_jsxs("div", { "data-product": product, className: "contents", children: [_jsxs("div", { className: `${SIDEBAR_BRAND} rail:hidden`, children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: SIDEBAR_BRAND_NAME, children: familyProductName(product) })] }), _jsx("div", { className: `${SIDEBAR_RAIL_BOX} hidden rail:grid`, children: _jsx(ProductBadge, { product: product, className: "size-6" }) })] }, product))) }), _jsx("div", { className: "px-3 py-2", children: _jsx("div", { "data-slot": "shell-frame-nav", className: "grid gap-0.5 overflow-hidden", children: Array.from({ length: SKELETON_ROWS }, (_, index) => (_jsxs("div", { className: "flex h-9 shrink-0 items-center gap-2.5 px-3 rail:justify-center rail:px-0", children: [_jsx("span", { className: "size-[1.125rem] shrink-0 rounded-md bg-shell-hover" }), _jsx("span", { className: "h-2.5 w-24 rounded-full bg-shell-hover rail:hidden" })] }, index))) }) })] }), _jsx("div", { className: "min-w-0 flex-1 py-2 pr-2", children: _jsx("div", { className: "h-full overflow-hidden rounded-xl bg-background", children: _jsx("div", { "data-slot": "shell-frame-header", className: "min-h-14 border-b border-foreground/5 bg-background" }) }) })] }));
+}

package/dist/shell-memory.d.ts

@@ -0,0 +1,65 @@
+/** Organisation affichée en dernier : `{ initials, logo? }`, en `localStorage`. */
+export declare const SHELL_ORG_KEY = "hgdc-shell:org";
+/** Hauteur en pixels de la navigation d'un produit : `hgdc-shell:nav:<produit>`. */
+export declare const SHELL_NAV_KEY_PREFIX = "hgdc-shell:nav:";
+/** Passage d'un produit à l'autre (horodatage), en `sessionStorage`. */
+export declare const SHELL_SWITCH_KEY = "hgdc-shell:switch";
+/** Au-delà, un passage noté n'est plus celui qu'on vit (onglet laissé, retour bien plus tard). */
+export declare const SHELL_SWITCH_MAX_AGE_MS = 10000;
+export type ShellOrganization = {
+    initials: string;
+    logo?: string;
+};
+export type ShellBootConfig = {
+    /** Clé du rail de la barre latérale (`sidebar`), valeur `rail`. */
+    railKey: string;
+    orgKey: string;
+    navKeyPrefix: string;
+    /** Les produits de la famille, par mot en minuscules. */
+    products: ReadonlyArray<string>;
+    /** `[produit, origine, base]` des produits servis sous une base de chemin (`PRODUCT_ORIGINS`). */
+    origins: ReadonlyArray<readonly [string, string, string]>;
+    /** Domaine des produits sur leur sous-domaine (`hgdc.ch` : `mail.hgdc.ch` est Mail). */
+    domain: string;
+};
+type BootWindow = {
+    document: {
+        documentElement: HTMLElement;
+    };
+    location: {
+        origin: string;
+        hostname: string;
+        pathname: string;
+    };
+    localStorage: Pick<Storage, "getItem">;
+};
+/**
+ * Applique la mémoire de la coque sur `<html>` : `data-sidebar="rail"`, `data-hgdc-product`
+ * (le produit de l'adresse), `data-hgdc-org` et les variables `--hgdc-org-initials`,
+ * `--hgdc-org-logo`, `--hgdc-nav-height` que lit `styles.css`. Autonome : sa source est recopiée
+ * telle quelle dans le script en ligne du `<head>`.
+ */
+export declare function shellBoot(config: ShellBootConfig, win: BootWindow): void;
+/** Configuration de la famille : les produits du kit et `PRODUCT_ORIGINS`. */
+export declare const SHELL_BOOT_CONFIG: ShellBootConfig;
+/** Le script en ligne du `<head>` : `shellBoot` et sa configuration, sans dépendance. */
+export declare function shellBootScript(config?: ShellBootConfig): string;
+/** Ce que la coque retient d'une organisation : ses initiales et son logo (`https:` seulement). */
+export declare function shellOrganization(org: {
+    name: string;
+    logo?: string | undefined;
+}): ShellOrganization;
+/** Retient l'organisation affichée (`OrgSwitcher` le fait) et l'applique à la page. */
+export declare function rememberShellOrganization(org: {
+    name: string;
+    logo?: string | undefined;
+}): void;
+/** Oublie l'organisation (déconnexion) : la page suivante montre un squelette. */
+export declare function forgetShellOrganization(): void;
+/** Retient la hauteur de la navigation d'un produit (`AppShell` le fait après l'affichage). */
+export declare function rememberShellNavHeight(product: string, height: number): void;
+/** Note le départ vers un autre produit (clic dans la barre des produits). */
+export declare function markProductSwitch(now?: number): void;
+/** Lit et efface la note : vrai si la page vient d'un passage depuis la barre, il y a peu. */
+export declare function takeProductSwitch(now?: number): boolean;
+export {};

package/dist/shell-memory.js

@@ -0,0 +1,169 @@
+import { initials } from "./initials.js";
+import { FAMILY_PRODUCTS } from "./family-svg.js";
+import { PRODUCT_ORIGINS } from "./products.js";
+/*
+ * Mémoire de la coque, partagée par les produits servis sous la même origine (`app.hgdc.ch/<produit>`,
+ * ADR 0020) : ce qu'il faut pour que la première image d'un produit ait déjà la barre des produits
+ * complète et la barre latérale à sa taille, avant que ses données n'arrivent.
+ *
+ * - l'organisation affichée en dernier : ses initiales et son logo (rien d'autre, pas le nom) ;
+ * - la hauteur de la navigation de chaque produit, pour un squelette à la bonne taille ;
+ * - le passage en cours d'un produit à l'autre (session de l'onglet), pour que la barre d'arrivée
+ *   ne s'élargisse pas sous une souris restée immobile.
+ *
+ * `shellBoot` applique la mémoire sur `<html>` avant la première peinture : il tourne en ligne
+ * dans le `<head>` (`sidebarInitScript`), donc il ne dépend de rien d'autre que de ses arguments.
+ */
+/** Organisation affichée en dernier : `{ initials, logo? }`, en `localStorage`. */
+export const SHELL_ORG_KEY = "hgdc-shell:org";
+/** Hauteur en pixels de la navigation d'un produit : `hgdc-shell:nav:<produit>`. */
+export const SHELL_NAV_KEY_PREFIX = "hgdc-shell:nav:";
+/** Passage d'un produit à l'autre (horodatage), en `sessionStorage`. */
+export const SHELL_SWITCH_KEY = "hgdc-shell:switch";
+/** Au-delà, un passage noté n'est plus celui qu'on vit (onglet laissé, retour bien plus tard). */
+export const SHELL_SWITCH_MAX_AGE_MS = 10_000;
+/**
+ * Applique la mémoire de la coque sur `<html>` : `data-sidebar="rail"`, `data-hgdc-product`
+ * (le produit de l'adresse), `data-hgdc-org` et les variables `--hgdc-org-initials`,
+ * `--hgdc-org-logo`, `--hgdc-nav-height` que lit `styles.css`. Autonome : sa source est recopiée
+ * telle quelle dans le script en ligne du `<head>`.
+ */
+export function shellBoot(config, win) {
+    // Ni fonction imbriquée ni import : un outil de construction n'a rien à y injecter.
+    const root = win.document.documentElement;
+    let rail = null;
+    let rawOrg = null;
+    try {
+        rail = win.localStorage.getItem(config.railKey);
+        rawOrg = win.localStorage.getItem(config.orgKey);
+    }
+    catch {
+        // Stockage bloqué : rien à reprendre.
+    }
+    if (rail === "rail")
+        root.dataset.sidebar = "rail";
+    let product = "";
+    for (const [word, origin, base] of config.origins) {
+        const path = win.location.pathname;
+        if (win.location.origin === origin && (path === base || path.startsWith(`${base}/`)))
+            product = word;
+    }
+    const host = win.location.hostname;
+    const suffix = `.${config.domain}`;
+    if (!product && host.endsWith(suffix)) {
+        const word = host.slice(0, -suffix.length);
+        if (config.products.includes(word))
+            product = word;
+    }
+    // La coque, une fois montée, sait mieux que l'adresse : on ne réécrit pas son produit.
+    if (product && !root.dataset.hgdcProduct)
+        root.dataset.hgdcProduct = product;
+    product = root.dataset.hgdcProduct ?? "";
+    let org = null;
+    try {
+        org = JSON.parse(rawOrg ?? "null");
+    }
+    catch {
+        org = null;
+    }
+    const letters = org && typeof org.initials === "string" ? org.initials.replace(/[^\p{L}\p{N}]/gu, "").slice(0, 4) : "";
+    const logo = org && typeof org.logo === "string" && org.logo.length < 2048 && /^https:\/\/[^\s"'()\\]+$/.test(org.logo)
+        ? org.logo
+        : "";
+    if (letters || logo) {
+        root.dataset.hgdcOrg = "";
+        root.style.setProperty("--hgdc-org-initials", logo ? '""' : `"${letters}"`);
+        if (logo)
+            root.style.setProperty("--hgdc-org-logo", `url("${logo}")`);
+        else
+            root.style.removeProperty("--hgdc-org-logo");
+    }
+    else {
+        delete root.dataset.hgdcOrg;
+        root.style.removeProperty("--hgdc-org-initials");
+        root.style.removeProperty("--hgdc-org-logo");
+    }
+    let height = 0;
+    try {
+        height = product ? Number(win.localStorage.getItem(config.navKeyPrefix + product)) : 0;
+    }
+    catch {
+        height = 0;
+    }
+    if (height > 0 && height < 2000)
+        root.style.setProperty("--hgdc-nav-height", `${Math.round(height)}px`);
+}
+/** Configuration de la famille : les produits du kit et `PRODUCT_ORIGINS`. */
+export const SHELL_BOOT_CONFIG = {
+    railKey: "sidebar",
+    orgKey: SHELL_ORG_KEY,
+    navKeyPrefix: SHELL_NAV_KEY_PREFIX,
+    products: FAMILY_PRODUCTS,
+    origins: Object.entries(PRODUCT_ORIGINS).map(([word, { origin, basePath }]) => [word, origin, basePath]),
+    domain: "hgdc.ch",
+};
+/** Le script en ligne du `<head>` : `shellBoot` et sa configuration, sans dépendance. */
+export function shellBootScript(config = SHELL_BOOT_CONFIG) {
+    return `try{(${shellBoot.toString()})(${JSON.stringify(config)},window)}catch(e){}`;
+}
+function browser() {
+    return typeof window === "undefined" ? null : window;
+}
+function storageSet(storage, key, value) {
+    try {
+        if (value === null)
+            window[storage].removeItem(key);
+        else
+            window[storage].setItem(key, value);
+    }
+    catch {
+        // Stockage bloqué : la première image d'un autre produit montrera un squelette, rien de plus.
+    }
+}
+/** Ce que la coque retient d'une organisation : ses initiales et son logo (`https:` seulement). */
+export function shellOrganization(org) {
+    return { initials: initials(org.name), ...(org.logo ? { logo: org.logo } : {}) };
+}
+/** Retient l'organisation affichée (`OrgSwitcher` le fait) et l'applique à la page. */
+export function rememberShellOrganization(org) {
+    const win = browser();
+    if (!win)
+        return;
+    storageSet("localStorage", SHELL_ORG_KEY, JSON.stringify(shellOrganization(org)));
+    shellBoot(SHELL_BOOT_CONFIG, win);
+}
+/** Oublie l'organisation (déconnexion) : la page suivante montre un squelette. */
+export function forgetShellOrganization() {
+    const win = browser();
+    if (!win)
+        return;
+    storageSet("localStorage", SHELL_ORG_KEY, null);
+    shellBoot(SHELL_BOOT_CONFIG, win);
+}
+/** Retient la hauteur de la navigation d'un produit (`AppShell` le fait après l'affichage). */
+export function rememberShellNavHeight(product, height) {
+    if (!browser() || !(height > 0))
+        return;
+    storageSet("localStorage", SHELL_NAV_KEY_PREFIX + product, String(Math.round(height)));
+}
+/** Note le départ vers un autre produit (clic dans la barre des produits). */
+export function markProductSwitch(now = Date.now()) {
+    if (!browser())
+        return;
+    storageSet("sessionStorage", SHELL_SWITCH_KEY, String(now));
+}
+/** Lit et efface la note : vrai si la page vient d'un passage depuis la barre, il y a peu. */
+export function takeProductSwitch(now = Date.now()) {
+    if (!browser())
+        return false;
+    let value = null;
+    try {
+        value = window.sessionStorage.getItem(SHELL_SWITCH_KEY);
+        window.sessionStorage.removeItem(SHELL_SWITCH_KEY);
+    }
+    catch {
+        return false;
+    }
+    const at = Number(value);
+    return value !== null && at > 0 && now - at >= 0 && now - at < SHELL_SWITCH_MAX_AGE_MS;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.38.0",
+  "version": "0.39.1",
   "description": "Interface de la H Collection : 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

@@ -838,20 +838,58 @@
 :root:not(:has([data-slot="app-shell"])) [data-slot="family-loader-root"] > [data-frame] {
   display: block;
 }
+/* Sur ordinateur, le cadre est la coque elle-même (`ShellFrame`) : barre des produits complète,
+   marque du produit, navigation en squelette, carte du contenu (ADR 0020). */
 @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);
+    background: var(--shell);
   }
 }
+/* La marque du produit de l'adresse (`<html data-hgdc-product>`, `sidebarInitScript`), seule ; le
+   produit courant marqué dans la barre, comme `aria-current` dans la coque. */
+[data-slot="shell-frame"] [data-product] {
+  display: none;
+}
+[data-slot="shell-frame-rail"] [data-product] {
+  display: flex;
+}
+:root[data-hgdc-product="account"] [data-slot="shell-frame"] [data-product="account"],
+:root[data-hgdc-product="host"] [data-slot="shell-frame"] [data-product="host"],
+:root[data-hgdc-product="mail"] [data-slot="shell-frame"] [data-product="mail"],
+:root[data-hgdc-product="portal"] [data-slot="shell-frame"] [data-product="portal"],
+:root[data-hgdc-product="status"] [data-slot="shell-frame"] [data-product="status"],
+:root[data-hgdc-product="analytics"] [data-slot="shell-frame"] [data-product="analytics"],
+:root[data-hgdc-product="docs"] [data-slot="shell-frame"] [data-product="docs"] {
+  display: contents;
+}
+:root[data-hgdc-product="account"] [data-slot="shell-frame-rail"] [data-product="account"],
+:root[data-hgdc-product="host"] [data-slot="shell-frame-rail"] [data-product="host"],
+:root[data-hgdc-product="mail"] [data-slot="shell-frame-rail"] [data-product="mail"],
+:root[data-hgdc-product="portal"] [data-slot="shell-frame-rail"] [data-product="portal"],
+:root[data-hgdc-product="status"] [data-slot="shell-frame-rail"] [data-product="status"],
+:root[data-hgdc-product="analytics"] [data-slot="shell-frame-rail"] [data-product="analytics"],
+:root[data-hgdc-product="docs"] [data-slot="shell-frame-rail"] [data-product="docs"] {
+  display: flex;
+  background: var(--shell-active);
+  color: var(--shell-foreground);
+}
+/* Navigation en squelette, à la hauteur retenue pour ce produit (`--hgdc-nav-height`). */
+[data-slot="shell-frame-nav"] {
+  max-height: var(--hgdc-nav-height, 7.5rem);
+}
+
+/* La place de l'organisation (`OrgPlaceholder`) : la marque retenue (`<html data-hgdc-org>`,
+   initiales ou logo), comme `OrgMark` ; sinon un carré de squelette de la même taille. */
+[data-slot="org-placeholder-mark"] {
+  background: var(--shell-hover);
+}
+:root[data-hgdc-org] [data-slot="org-placeholder-mark"] {
+  background: var(--hgdc-org-logo, var(--foreground)) center / cover no-repeat;
+  color: var(--background);
+}
+:root[data-hgdc-org] [data-slot="org-placeholder-mark"]::before {
+  content: var(--hgdc-org-initials, "");
+}
 
 /* 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. */
@@ -893,16 +931,41 @@
 [data-slot="app-shell-header"] {
   view-transition-name: hgdc-header;
 }
+/* Le cadre du chargeur (hors de la coque) et le H lui-même portent les mêmes noms, seulement quand
+   ils sont à l'écran : mêmes conditions que l'affichage du chargeur, plus haut. */
+:root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])) {
+  & [data-slot="shell-frame-rail"] {
+    view-transition-name: hgdc-product-rail;
+  }
+  & [data-slot="shell-frame-sidebar"] {
+    view-transition-name: hgdc-sidebar;
+  }
+  & [data-slot="shell-frame-header"] {
+    view-transition-name: hgdc-header;
+  }
+}
+:root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])),
+:root:has([data-slot="app-shell"][data-loading]),
+:root:has([data-slot="app-shell"]:not([data-hydrated]) [data-slot="page-pending"]) {
+  & [data-slot="family-loader-root"] > [data-stage] {
+    view-transition-name: hgdc-loader;
+  }
+}
+/* Un clic dans la barre des produits : la barre se replie et la barre latérale revient d'un coup,
+   pour que l'image de départ soit déjà celle de l'arrivée (`ProductRail`). */
+:root[data-hgdc-switching] [data-slot="product-rail"],
+:root[data-hgdc-switching] [data-slot="app-shell-sidebar"] {
+  transition: none;
+}
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation-duration: var(--duration-fast);
   animation-timing-function: var(--ease-out);
 }
-::view-transition-group(hgdc-product-rail),
+/* Barre latérale et barre du haut : à la même place des deux côtés, leur contenu (un autre
+   produit) passe en fondu en place. */
 ::view-transition-group(hgdc-sidebar),
 ::view-transition-group(hgdc-header),
-::view-transition-old(hgdc-product-rail),
-::view-transition-new(hgdc-product-rail),
 ::view-transition-old(hgdc-sidebar),
 ::view-transition-new(hgdc-sidebar),
 ::view-transition-old(hgdc-header),
@@ -910,3 +973,37 @@
   animation-duration: var(--duration-base);
   animation-timing-function: var(--ease-ios);
 }
+/* Barre des produits et H : identiques des deux côtés (la barre ne change que d'indicateur, le H
+   est à la même phase, calé sur l'horloge). Ni fondu ni mouvement : l'ancienne image est masquée,
+   la nouvelle, vivante, s'affiche telle quelle. Présents d'un seul côté (une page sans coque,
+   une page prête sans H), ils apparaissent ou s'effacent en fondu court. */
+::view-transition-group(hgdc-product-rail),
+::view-transition-group(hgdc-loader),
+::view-transition-new(hgdc-product-rail),
+::view-transition-new(hgdc-loader) {
+  animation: none;
+}
+::view-transition-old(hgdc-product-rail),
+::view-transition-old(hgdc-loader) {
+  animation: none;
+  opacity: 0;
+}
+::view-transition-old(hgdc-product-rail):only-child,
+::view-transition-old(hgdc-loader):only-child {
+  opacity: 1;
+  animation: hgdc-view-out var(--duration-fast) var(--ease-out) both;
+}
+::view-transition-new(hgdc-product-rail):only-child,
+::view-transition-new(hgdc-loader):only-child {
+  animation: hgdc-view-in var(--duration-fast) var(--ease-out) both;
+}
+@keyframes hgdc-view-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes hgdc-view-in {
+  from {
+    opacity: 0;
+  }
+}