@hgdc/ui 0.37.0 → 0.38.0

package/README.md

@@ -63,6 +63,17 @@ 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 (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.
+
+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.
+- 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/app-shell.d.ts

@@ -77,7 +77,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,6 +118,11 @@ 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;

package/dist/app-shell.js

@@ -77,7 +77,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 +191,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);
@@ -403,6 +409,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 +431,26 @@ 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);
         };
         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 });
@@ -455,5 +477,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", { "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 })] }) })] }) }) }) }) }));
 }

package/dist/product-rail.js

@@ -1,16 +1,22 @@
 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 { 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;
 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: _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] })] }) }));
 }
 /**
  * La barre des produits de la famille, tout à gauche de la coque sur ordinateur : organisation en
@@ -35,7 +41,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(() => {
@@ -74,6 +81,17 @@ 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;
+            cancel();
+            setHovered(false);
+            setFocused(false);
+        };
         const onKey = (event) => {
             if (event.key !== "Escape")
                 return;
@@ -94,6 +112,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,6 +123,7 @@ 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", 

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;

package/dist/product-switch.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 /*
- * Passage d'un produit à l'autre (ADR 0016) : la barre des produits pointe vers
+ * Passage d'un produit à l'autre (ADR 0016, 0020) : la barre des produits pointe vers
  * `/auth/hgdc?refresh=background&next=/`. Avec une session du produit ouverte, l'entrée de
  * `@hgdc/auth` va droit à la page et pose un cookie « relire les organisations » ; la coque le lit
  * ici et relit les organisations dans un cadre caché, sans faire attendre la personne.
@@ -15,13 +15,33 @@ export const ORG_SYNC_COOKIE = "hgdc-org-sync";
 export 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 const BACKGROUND_REFRESH_TIMEOUT_MS = 20_000;
+/** Marque d'un lien de la barre vers un autre produit servi sous la même origine : prérendu au survol. */
+export 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 const PRODUCT_PREFETCH_RULES = JSON.stringify({
+export const PRODUCT_SPECULATION_RULES = JSON.stringify({
+    prerender: [
+        {
+            source: "document",
+            where: {
+                and: [
+                    { selector_matches: `a[${PRODUCT_PRERENDER_ATTRIBUTE}]` },
+                    { href_matches: "/*/auth/hgdc?refresh=background*" },
+                ],
+            },
+            eagerness: "moderate",
+        },
+    ],
     prefetch: [
         {
             source: "document",
@@ -30,24 +50,53 @@ export const PRODUCT_PREFETCH_RULES = JSON.stringify({
         },
     ],
 });
-/** Lit et efface le cookie de relecture. Vrai s'il était posé. */
-export function takeOrgSyncCookie(doc = document) {
-    const present = doc.cookie.split(";").some((part) => part.trim() === `${ORG_SYNC_COOKIE}=1`);
-    if (present) {
+/** @deprecated Remplacé par `PRODUCT_SPECULATION_RULES` (prérendu sous la même origine, 0.38). */
+export const PRODUCT_PREFETCH_RULES = PRODUCT_SPECULATION_RULES;
+/** Base de chemin d'un produit (`/analytics`), telle que l'entrée la pose dans le cookie. */
+const BASE_PATH = /^(?:\/[A-Za-z0-9_~-][A-Za-z0-9._~-]*)+$/;
+/**
+ * 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 function takeOrgSync(doc = document) {
+    let base = null;
+    for (const part of doc.cookie.split(";")) {
+        const [name, value] = part.trim().split("=", 2);
+        if (name !== ORG_SYNC_COOKIE || value === undefined)
+            continue;
+        if (value === "1")
+            base = "";
+        else if (BASE_PATH.test(value))
+            base = value;
+        if (base !== null)
+            break;
+    }
+    if (base !== null) {
         const secure = doc.location.protocol === "https:" ? "; Secure" : "";
-        doc.cookie = `${ORG_SYNC_COOKIE}=; Path=/; Max-Age=0; SameSite=Lax${secure}`;
+        doc.cookie = `${ORG_SYNC_COOKIE}=; Path=${base || "/"}; Max-Age=0; SameSite=Lax${secure}`;
     }
-    return present;
+    return base;
+}
+/** Lit et efface le cookie de relecture. Vrai s'il était posé. */
+export function takeOrgSyncCookie(doc = document) {
+    return takeOrgSync(doc) !== null;
 }
 /**
  * Relit les organisations dans un cadre caché, une fois, si l'entrée l'a demandé. Le cadre n'a
  * 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 function startBackgroundRefresh(doc = document) {
-    if (!takeOrgSyncCookie(doc))
+    if (doc.prerendering) {
+        doc.addEventListener("prerenderingchange", () => startBackgroundRefresh(doc), { once: true });
+        return null;
+    }
+    const base = takeOrgSync(doc);
+    if (base === null)
         return null;
     const frame = doc.createElement("iframe");
     frame.hidden = true;
@@ -63,7 +112,7 @@ export function startBackgroundRefresh(doc = document) {
     };
     const timer = window.setTimeout(done, BACKGROUND_REFRESH_TIMEOUT_MS);
     frame.addEventListener("load", done, { once: true });
-    frame.src = BACKGROUND_REFRESH_PATH;
+    frame.src = `${base}${BACKGROUND_REFRESH_PATH}`;
     doc.body.append(frame);
     return frame;
 }
@@ -80,7 +129,9 @@ export function useBackgroundOrganizationRefresh() {
 }
 /**
  * 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 function useProductSwitch(enabled = true) {
     useEffect(() => {
@@ -95,7 +146,7 @@ export function useProductSwitch(enabled = true) {
         // Créé par le DOM, pas par React : un script inséré par `innerHTML` n'est jamais lu.
         const script = document.createElement("script");
         script.type = "speculationrules";
-        script.textContent = PRODUCT_PREFETCH_RULES;
+        script.textContent = PRODUCT_SPECULATION_RULES;
         document.head.append(script);
         return () => script.remove();
     }, [enabled]);

package/dist/products.d.ts

@@ -96,6 +96,11 @@ export declare function productMenuEntries(options?: {
     accountHref?: string | undefined;
     catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
 }): Array<ProductMenuEntry>;
+/**
+ * Chemin de `href` s'il est servi sous `pageOrigin` (`/mail/auth/hgdc?…` depuis
+ * `https://app.hgdc.ch`), sinon `null`. Sans origine connue (rendu serveur), `null`.
+ */
+export declare function sameOriginPath(href: string, pageOrigin: string | undefined): string | null;
 /** Une entrée de la barre des produits d'`AppShell`. */
 export type ProductRailEntry = {
     name: string;
@@ -105,17 +110,27 @@ export type ProductRailEntry = {
     current?: boolean;
     /** Texte discret sous le nom : « Préversion ». */
     hint?: string;
+    /**
+     * Produit servi sous la même origine que la page : lien relatif, prérendu au survol
+     * (`PRODUCT_PRERENDER_ATTRIBUTE` de `@hgdc/ui/product-switch`) et transition de vue.
+     */
+    sameOrigin?: boolean;
 };
 /**
  * Les entrées de la barre des produits : les produits ouverts du catalogue et Account, affiché en
  * tête (le compte commun, pas un produit). Chaque produit pointe vers son entrée
  * `/auth/hgdc?refresh=background&next=/` (ADR 0010, 0013, 0016), Account vers sa racine (`accountHref` en
- * développement). Le produit courant pointe vers `/`, sans détour par l'entrée.
+ * développement). Le produit courant pointe vers sa racine, sans détour par l'entrée.
+ *
+ * `pageOrigin` (`location.origin`, absent au rendu serveur) : un produit servi sous cette origine
+ * (`PRODUCT_ORIGINS`, `app.hgdc.ch/<produit>`) reçoit un lien relatif et `sameOrigin` (ADR 0020),
+ * et le produit courant sa base (`/mail/`) plutôt que `/`.
  */
 export declare function productRailEntries(options?: {
     current?: string | undefined;
     accountHref?: string | undefined;
     catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
+    pageOrigin?: string | undefined;
 }): {
     products: Array<ProductRailEntry>;
     account: ProductRailEntry;

package/dist/products.js

@@ -34,6 +34,7 @@ export const PRODUCT_ORIGINS = {
     analytics: { origin: "https://app.hgdc.ch", basePath: "/analytics" },
     mail: { origin: "https://app.hgdc.ch", basePath: "/mail" },
     host: { origin: "https://app.hgdc.ch", basePath: "/host" },
+    docs: { origin: "https://app.hgdc.ch", basePath: "/docs" },
 };
 /** Adresse de l'app d'un produit : celle de `PRODUCT_ORIGINS`, sinon `https://<mot>.hgdc.ch`. */
 export function productOrigin(word, origins = PRODUCT_ORIGINS) {
@@ -104,22 +105,49 @@ export function productMenuEntries(options = {}) {
         ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
     }));
 }
+/**
+ * Chemin de `href` s'il est servi sous `pageOrigin` (`/mail/auth/hgdc?…` depuis
+ * `https://app.hgdc.ch`), sinon `null`. Sans origine connue (rendu serveur), `null`.
+ */
+export function sameOriginPath(href, pageOrigin) {
+    if (!pageOrigin)
+        return null;
+    try {
+        const url = new URL(href);
+        return url.origin === pageOrigin ? `${url.pathname}${url.search}${url.hash}` : null;
+    }
+    catch {
+        return null;
+    }
+}
 /**
  * Les entrées de la barre des produits : les produits ouverts du catalogue et Account, affiché en
  * tête (le compte commun, pas un produit). Chaque produit pointe vers son entrée
  * `/auth/hgdc?refresh=background&next=/` (ADR 0010, 0013, 0016), Account vers sa racine (`accountHref` en
- * développement). Le produit courant pointe vers `/`, sans détour par l'entrée.
+ * développement). Le produit courant pointe vers sa racine, sans détour par l'entrée.
+ *
+ * `pageOrigin` (`location.origin`, absent au rendu serveur) : un produit servi sous cette origine
+ * (`PRODUCT_ORIGINS`, `app.hgdc.ch/<produit>`) reçoit un lien relatif et `sameOrigin` (ADR 0020),
+ * et le produit courant sa base (`/mail/`) plutôt que `/`.
  */
 export function productRailEntries(options = {}) {
     const current = options.current?.toLowerCase();
-    const entry = (item, href) => ({
-        name: item.name,
-        badge: item.badge,
-        ...(item.badge === current ? { href: "/", current: true } : { href }),
-        ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
-    });
+    const { pageOrigin } = options;
+    const entry = (item, href, product) => {
+        const base = {
+            name: item.name,
+            badge: item.badge,
+            ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
+        };
+        if (item.badge === current) {
+            const app = productOrigin(item.badge);
+            return { ...base, href: pageOrigin === app.origin ? `${app.basePath}/` : "/", current: true };
+        }
+        const path = product ? sameOriginPath(href, pageOrigin) : null;
+        return path === null ? { ...base, href } : { ...base, href: path, sameOrigin: true };
+    };
     return {
-        products: (options.catalog ?? HGDC_PRODUCTS).filter(isProductOpen).map((item) => entry(item, item.entryHref)),
-        account: entry(HGDC_ACCOUNT, options.accountHref ?? HGDC_ACCOUNT.entryHref),
+        products: (options.catalog ?? HGDC_PRODUCTS).filter(isProductOpen).map((item) => entry(item, item.entryHref, true)),
+        account: entry(HGDC_ACCOUNT, options.accountHref ?? HGDC_ACCOUNT.entryHref, false),
     };
 }

package/package.json

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

@@ -870,3 +870,43 @@
     opacity 150ms var(--ease-out),
     visibility 0s;
 }
+
+/* Passage d'un produit à l'autre sous la même origine (`app.hgdc.ch/<produit>`, ADR 0020) : une
+   transition de vue entre documents. La barre des produits, la barre latérale et la barre du haut
+   gardent leur place (même nom des deux côtés : elles ne bougent pas, leur contenu passe en
+   fondu) ; le reste de la page passe en fondu court. Le navigateur garde l'ancienne page à l'écran
+   jusqu'à ce que la nouvelle soit prête : pas de page blanche. Chrome, Edge et Safari 18.2+ ;
+   ailleurs, une navigation ordinaire. Entre deux origines (un produit encore sur son sous-domaine)
+   ou derrière une redirection vers Account, le navigateur n'en fait pas. Mouvement réduit : aucune
+   transition. */
+@media (prefers-reduced-motion: no-preference) {
+  @view-transition {
+    navigation: auto;
+  }
+}
+[data-slot="product-rail"] {
+  view-transition-name: hgdc-product-rail;
+}
+[data-slot="app-shell-sidebar"] {
+  view-transition-name: hgdc-sidebar;
+}
+[data-slot="app-shell-header"] {
+  view-transition-name: hgdc-header;
+}
+::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),
+::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),
+::view-transition-new(hgdc-header) {
+  animation-duration: var(--duration-base);
+  animation-timing-function: var(--ease-ios);
+}