@hgdc/ui 0.37.0 → 0.39.0

package/README.md

@@ -63,6 +63,27 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 
 Le menu « Produits » et la palette (`badge` d'une commande) montrent la pastille de chaque produit.
 
+### 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, 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`).
+
 ### Mise en page (ADR 0012)
 
 Une seule règle dans les sept produits, posée par la coque :

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">`. */
@@ -77,7 +79,7 @@ export declare function SidebarNavGroup(props: {
     active?: boolean;
     /** Ouvert tant que la personne n'a rien choisi. Fermé par défaut. */
     defaultOpen?: boolean;
-    /** Clé de mémorisation, par défaut le titre : à donner quand deux groupes portent le même. */
+    /** Clé de mémorisation, par défaut le titre, propre au produit de la coque : à donner quand deux groupes portent le même. */
     storageKey?: string;
 }): React.JSX.Element;
 /**
@@ -118,10 +120,19 @@ export type AppShellAssistant = {
     /** Lettre du raccourci `Ctrl` (`⌘`) + lettre qui ouvre et ferme l'assistant (`"j"`). Aucun par défaut. */
     shortcut?: string;
 };
+/**
+ * Délai entre le clic vers un autre produit et le H : une page prérendue s'affiche avant (une ou
+ * deux images), le H n'apparaît alors jamais ; une page à charger le montre aussitôt après.
+ */
+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);
@@ -77,7 +80,9 @@ function useToggleShortcut() {
     }, []);
 }
 // ── Navigation ──────────────────────────────────────────────────────────────────────
-const ShellContext = createContext({ closeMobileNav: () => { } });
+const ShellContext = createContext({
+    closeMobileNav: () => { },
+});
 /** Pour fermer le tiroir mobile depuis un élément de la barre (un sélecteur, un bouton). */
 export function useAppShell() {
     return useContext(ShellContext);
@@ -189,7 +194,11 @@ export function SidebarNavGroup(props) {
     return _jsx(TitledNavGroup, { label: props.label, children: props.children });
 }
 function CollapsibleNavGroup({ label, children, icon, active, defaultOpen = false, storageKey, }) {
-    const key = storageKey ?? label;
+    // Propre au produit : sous une origine partagée (`app.hgdc.ch/<produit>`), `localStorage` est
+    // commun à tous. Le thème et la barre réduite le sont volontairement (`theme`, `sidebar`), un
+    // groupe « Réglages » de Mail et de Host ne l'est pas (ADR 0020).
+    const { product } = useContext(ShellContext);
+    const key = product ? `${product}:${storageKey ?? label}` : (storageKey ?? label);
     const buttonId = useId();
     const listId = useId();
     const listRef = useRef(null);
@@ -338,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,
@@ -350,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
@@ -403,6 +407,11 @@ function useContentLoading({ navigating, pending }) {
     }, [active, visible]);
     return visible;
 }
+/**
+ * Délai entre le clic vers un autre produit et le H : une page prérendue s'affiche avant (une ou
+ * deux images), le H n'apparaît alors jamais ; une page à charger le montre aussitôt après.
+ */
+export const PRODUCT_LEAVE_DELAY_MS = 100;
 export function AppShell({ product, organization, productRail = true, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating = false, mainClassName, statusPage, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     // Barre des produits élargie : la barre latérale se plie le temps du survol (ADR 0011).
@@ -420,15 +429,27 @@ export function AppShell({ product, organization, productRail = true, accountHre
         setPagePending((count) => count + 1);
         return () => setPagePending((count) => count - 1);
     }, []);
-    const leave = useCallback(() => setLeaving(true), []);
+    // Après `PRODUCT_LEAVE_DELAY_MS` seulement : une page prérendue au survol s'affiche avant, sans
+    // que le H apparaisse (ADR 0020). Sinon le H couvre le contenu jusqu'au départ de la page.
+    const leaveTimer = useRef(undefined);
+    const leave = useCallback(() => {
+        window.clearTimeout(leaveTimer.current);
+        leaveTimer.current = window.setTimeout(() => setLeaving(true), PRODUCT_LEAVE_DELAY_MS);
+    }, []);
     useEffect(() => {
         // Retour arrière depuis l'autre produit (cache de page) : la page revient telle quelle.
         const onPageShow = (event) => {
-            if (event.persisted)
-                setLeaving(false);
+            if (!event.persisted)
+                return;
+            window.clearTimeout(leaveTimer.current);
+            setLeaving(false);
+            delete document.documentElement.dataset.hgdcSwitching;
         };
         window.addEventListener("pageshow", onPageShow);
-        return () => window.removeEventListener("pageshow", onPageShow);
+        return () => {
+            window.removeEventListener("pageshow", onPageShow);
+            window.clearTimeout(leaveTimer.current);
+        };
     }, []);
     const statusPageUrl = statusPage === false ? null : (statusPage ?? statusPageUrlFor(product));
     const loading = useContentLoading({ navigating, pending: pagePending > 0 || leaving });
@@ -437,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)
@@ -455,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) }, 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", { "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", { 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

@@ -1,16 +1,54 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 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;
+const noSubscription = () => () => { };
+/** `location.origin` après l'hydratation, `undefined` au rendu serveur (liens absolus d'abord). */
+function usePageOrigin() {
+    return useSyncExternalStore(noSubscription, () => window.location.origin, () => undefined);
+}
 /** 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, "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
@@ -35,7 +73,8 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
         onExpandedChange?.(expanded);
     }, [expanded, onExpandedChange]);
     const ref = useRef(null);
-    const { products, account } = productRailEntries({ current, accountHref, catalog });
+    const pageOrigin = usePageOrigin();
+    const { products, account } = productRailEntries({ current, accountHref, catalog, pageOrigin });
     // Écouteurs natifs : la barre est un repère `nav`, pas un contrôle ; c'est son survol, le focus
     // de ses liens et les menus qu'elle ouvre qui l'élargissent.
     useEffect(() => {
@@ -43,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);
         };
@@ -74,6 +117,21 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
             if (!(event.relatedTarget instanceof Node) || !rail.contains(event.relatedTarget))
                 setFocused(false);
         };
+        // Un produit choisi : la barre se replie comme un menu qui se ferme, pendant que l'autre produit
+        // s'ouvre. La page d'arrivée la montre repliée : rien ne bouge au passage (ADR 0020).
+        const onClick = (event) => {
+            if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                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);
+        };
         const onKey = (event) => {
             if (event.key !== "Escape")
                 return;
@@ -94,6 +152,7 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
         rail.addEventListener("focusin", onFocusIn);
         rail.addEventListener("focusout", onFocusOut);
         rail.addEventListener("keydown", onKey);
+        rail.addEventListener("click", onClick);
         return () => {
             cancel();
             observer.disconnect();
@@ -104,12 +163,13 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
             rail.removeEventListener("focusin", onFocusIn);
             rail.removeEventListener("focusout", onFocusOut);
             rail.removeEventListener("keydown", onKey);
+            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/product-switch.d.ts

@@ -4,13 +4,29 @@ export declare const ORG_SYNC_COOKIE = "hgdc-org-sync";
 export declare const BACKGROUND_REFRESH_PATH = "/auth/hgdc?refresh=1&frame=1";
 /** Abandon du cadre s'il ne s'est pas chargé : Account injoignable, réseau coupé. */
 export declare const BACKGROUND_REFRESH_TIMEOUT_MS = 20000;
+/** Marque d'un lien de la barre vers un autre produit servi sous la même origine : prérendu au survol. */
+export declare const PRODUCT_PRERENDER_ATTRIBUTE = "data-hgdc-prerender";
 /**
- * Liens préchargés au survol : l'entrée d'un autre produit en `refresh=background`. Elle ne fait
- * que lire la session et rediriger ; sans session, elle répond 503 à un préchargement (rien n'est
- * créé), et le clic repart normalement. Jamais de `prerender` : la page d'arrivée lit un cookie et
- * ouvre un cadre, ce qu'un prérendu ferait pour un simple survol.
+ * Règles de spéculation posées par la coque (Chrome et Edge ; ignorées ailleurs) :
+ *
+ * - **prérendu** au survol (`eagerness: "moderate"`, environ 200 ms) des liens marqués
+ *   `PRODUCT_PRERENDER_ATTRIBUTE` vers l'entrée `refresh=background` d'un produit de la même
+ *   origine (`app.hgdc.ch/<produit>`) : le motif est relatif, il ne vaut que pour l'origine de la
+ *   page. L'entrée ne rend que la redirection d'une session ouverte ; sans session, elle répond 503
+ *   à une requête `Sec-Purpose: prefetch;prerender`, le prérendu est jeté et le clic repart
+ *   normalement. La page prérendue attend d'être affichée pour relire les organisations.
+ * - **préchargement** seul de l'entrée d'un produit encore sur son sous-domaine (même site, les
+ *   cookies partent), comme avant (ADR 0016).
  */
+export declare const PRODUCT_SPECULATION_RULES: string;
+/** @deprecated Remplacé par `PRODUCT_SPECULATION_RULES` (prérendu sous la même origine, 0.38). */
 export declare const PRODUCT_PREFETCH_RULES: string;
+/**
+ * Lit et efface le cookie de relecture. Rend la base de chemin du produit (`""` à la racine de son
+ * origine, `"/analytics"` sous `app.hgdc.ch/analytics`), `null` s'il n'était pas posé. Sous une
+ * base, l'entrée le limite à ce chemin : un autre produit de la même origine ne le voit pas.
+ */
+export declare function takeOrgSync(doc?: Document): string | null;
 /** Lit et efface le cookie de relecture. Vrai s'il était posé. */
 export declare function takeOrgSyncCookie(doc?: Document): boolean;
 /**
@@ -18,7 +34,8 @@ export declare function takeOrgSyncCookie(doc?: Document): boolean;
  * ni script ni formulaire (`sandbox`), il suit seulement les redirections d'Account ; la nouvelle
  * session du produit recopie les organisations, et les requêtes Convex abonnées se mettent à jour.
  * Si la session d'Account a expiré, Account refuse d'être affiché dans un cadre : rien ne se passe,
- * la session du produit reste celle d'avant.
+ * la session du produit reste celle d'avant. Une page prérendue au survol attend d'être affichée :
+ * un survol sans clic ne relit rien.
  */
 export declare function startBackgroundRefresh(doc?: Document): HTMLIFrameElement | null;
 /**
@@ -30,6 +47,8 @@ export declare function startBackgroundRefresh(doc?: Document): HTMLIFrameElemen
 export declare function useBackgroundOrganizationRefresh(): void;
 /**
  * Dans la coque (`AppShell` le fait) : la relecture ci-dessus si la racine ne l'a pas déjà faite
- * (le cookie ne sert qu'une fois), et le préchargement au survol des autres produits.
+ * (le cookie ne sert qu'une fois), et le prérendu ou le préchargement au survol des autres
+ * produits. Les règles sont un `<script type="speculationrules">` en ligne : une CSP qui pose
+ * `script-src` doit y autoriser `'inline-speculation-rules'` (README).
  */
 export declare function useProductSwitch(enabled?: boolean): void;