@hgdc/ui 0.70.0 → 0.72.0

package/README.md

@@ -135,8 +135,9 @@ Une seule barre latérale (ADR 0024) : organisation et bouton Réduire en haut,
 | `secret-reveal`  | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                                                                                                                                                                                                                                                                        |
 | `assistant-chat` | `<AssistantConversation><AssistantUserMessage>…</AssistantUserMessage><AssistantReply tools={chips} waiting={pending} actions={<AssistantActionCard title=… status="pending" onConfirm={…} onCancel={…} />}><Markdown>{text}</Markdown></AssistantReply></AssistantConversation>`, `<AssistantComposer value={v} onValueChange={setV} onSubmit={send} busy={busy} />`, `<AssistantExamples examples={…} onPick={setV} />` : le produit rend le Markdown |
 | `assistant-view` | `<AssistantView status={status} threads={threads} threadId={id} onThreadChange={setId} thread={thread} renderText={(t) => <Markdown>{t}</Markdown>} onSend={send} onConfirm={confirm} onCancel={cancel} />` : le panneau complet pour `AppShell` (`assistant.panel`), aux formes de `@hgdc/assistant/convex` ; `subject` (page ouverte), `request` (demande venue de la page), `labels` (vouvoiement)                                                   |
-| `family-loader`  | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : le seul H d'un chargement de page, fixe sur la zone de contenu de la coque, rendu par le serveur, calé sur l'horloge (même pixel et même phase d'une page et d'un produit à l'autre, ADR 0015). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner`                                   |
-| `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : la zone de contenu se couvre dès qu'une navigation attend, la coque reste ; `PagePending` : marque la place d'une page qui attend, le H du document s'affiche                                                                       |
+| `family-loader`  | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : la lueur du chargement de page (`EdgeGlow`, une bande tricolore qui ondule le long de la carte du contenu, WebGL, repli CSS rendu par le serveur), calée sur l'horloge (même phase d'une page et d'un produit à l'autre). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner`         |
+| `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, squelette après 1 s, au moins 500 ms, ADR 0025) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : une navigation montre la barre de progression, l'ancienne page reste ; `PagePending variant="list"                                                                                                                           | "dashboard" | "form"` : dans la coque, le squelette de la page ; hors de la coque, la lueur du document |
+| `page-skeleton`  | `<PageSkeleton variant="dashboard" />` : la forme d'une page qui charge, calée sur `Page` (en-tête, colonne, espacement), pour que rien ne saute à l'arrivée                                                                                                                                                                                                                                                                                            |
 | `skeleton`       | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                                                                                                                                                                                                                                                |
 
 ## Listes, journaux et retours

package/dist/app-shell.d.ts

@@ -79,16 +79,17 @@ export declare function AppShell({ product, organization, productRail: productRa
     children: ReactNode;
     /**
      * Clé de la page affichée (le chemin, `location.pathname`) : la zone de contenu devient une
-     * frontière `Suspense` neuve à chaque page, qui montre `PagePending` pendant qu'une page charge
-     * ses données dans ses composants (`useSuspenseQuery`), au lieu de garder l'ancienne page figée
-     * pendant la transition de la navigation. Sans clé, pas de frontière.
+     * frontière `Suspense` neuve à chaque page, qui montre le squelette de la page (`PagePending`)
+     * pendant qu'une page charge ses données dans ses composants (`useSuspenseQuery`). Sans clé, pas
+     * de frontière.
      */
     contentKey?: string | undefined;
     /**
      * Une navigation vers une autre page est en cours (TanStack Router :
      * `useRouterState({ select: (s) => s.isLoading && s.location.pathname !== s.resolvedLocation?.pathname })`).
-     * Au-delà de 50 ms, la zone de contenu se couvre du H centré, la coque restant en place : jamais
-     * l'ancienne page figée, quel que soit ce qui attend (session, loaders, code de la page).
+     * Au-delà de 150 ms, une fine barre de progression court sous la barre du haut ; l'ancienne page
+     * reste affichée jusqu'à ce que la nouvelle soit prête, ou que son squelette la remplace après 1 s
+     * (`routerPendingDefaults`, ADR 0025).
      */
     navigating?: boolean;
     /**

package/dist/app-shell.js

@@ -3,11 +3,11 @@ import Settings02Icon from "@hugeicons/core-free-icons/Settings02Icon";
 import { SIDEBAR_ITEM } from "./sidebar-nav.js";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { Suspense, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { Suspense, useContext, useEffect, useId, useRef, useState } from "react";
 import { CommandMenuButton } from "./command-menu.js";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
 import { FamilyLoaderHost, FamilyLoaderRootContext } from "./family-loader.js";
-import { CONTENT_LOADING_LAYER, ContentLoadingContext, PagePending } from "./page-pending.js";
+import { CONTENT_LOADING_LAYER, NAVIGATION_PROGRESS_MIN_MS, NAVIGATION_PROGRESS_MS, PagePending, ShellContentContext, useDelayedFlag, } from "./page-pending.js";
 import { ProductBadge } from "./product-badge.js";
 import { productBarShown, useProductBarPreference, useProductBarSync } from "./product-bar.js";
 import { ShellNavigation } from "./module-bar.js";
@@ -22,7 +22,7 @@ import { rememberLastProduct, rememberShellNavHeight } from "./shell-memory.js";
 import { ModuleBarShownContext, ShellLeaveContext, ShellMenuLinksContext, StatusPageContext, } from "./shell-placement.js";
 import { ShellOrganizationHead, SidebarHead } from "./sidebar-head.js";
 import { useToggleShortcut } from "./sidebar-rail.js";
-import { useContentLoading, useHydrated, useIsomorphicLayoutEffect } from "./use-content-loading.js";
+import { useHydrated, useIsomorphicLayoutEffect, useShellCover } from "./use-content-loading.js";
 import { useProductLeave } from "./use-product-leave.js";
 import { useMediaQuery } from "./use-media-query.js";
 export { sidebarInitScript, toggleSidebar, useSidebarRail } from "./sidebar-rail.js";
@@ -50,20 +50,12 @@ export function AppShell({ product, organization, productRail: productRailOption
     useToggleShortcut();
     // Relecture des organisations après un passage depuis la barre, préchargement des autres produits (ADR 0016).
     useProductSwitch(productRail);
-    // Chargement de la zone de contenu (ADR 0015) : une navigation en cours (après 50 ms), une page
-    // qui attend (`PagePending`, aussitôt : le routeur a déjà attendu), ou le départ vers un autre
-    // produit (aussitôt). Une fois montré, au moins 300 ms. Le H est celui du document, en position
-    // fixe : il ne bouge pas d'un état à l'autre et n'est jamais démonté.
-    const [pagePending, setPagePending] = useState(0);
-    const registerPagePending = useCallback(() => {
-        setPagePending((count) => count + 1);
-        return () => setPagePending((count) => count - 1);
-    }, []);
+    // Chargement (ADR 0025) : une navigation dans le module montre la barre de progression, l'ancienne
+    // page restant à l'écran ; seul le départ vers un autre module couvre la zone de contenu du H.
     const { leaving, leave } = useProductLeave();
+    const progress = useDelayedFlag(navigating, NAVIGATION_PROGRESS_MS, NAVIGATION_PROGRESS_MIN_MS);
     const statusPageUrl = statusPage === false ? null : (statusPage ?? statusPageUrlFor(product));
-    const loading = useContentLoading({ navigating, pending: pagePending > 0 || leaving });
-    // Avant l'hydratation, le CSS montre le calque et le H dès qu'une page attend (`:has`) ; ensuite
-    // `data-loading` prend le relais dans la même image.
+    const loading = useShellCover(leaving);
     const hydrated = useHydrated();
     const hasRoot = useContext(FamilyLoaderRootContext);
     const contentRef = useRef(null);
@@ -111,5 +103,5 @@ export function AppShell({ product, organization, productRail: productRailOption
         }
         : {};
     const navigation = productRail ? (_jsx(ShellNavigation, { product: product, nav: nav, accountHref: accountHref, level: navLevel, onLevelChange: setNavLevel, projectModules: project?.modules })) : (nav);
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ModuleBarShownContext, { value: productRail, children: _jsx(ShellMenuLinksContext, { value: menuLinks, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-module-bar": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:bg-shell", 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" }), _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: [productRail ? (_jsx(ShellOrganizationHead, { organization: organization })) : (_jsxs(_Fragment, { children: [_jsx(SidebarHead, { product: product }), organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null] })), navigation, _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, navigation, _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(ModuleBarShownContext, { value: productRail, children: _jsx(ShellMenuLinksContext, { value: menuLinks, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-module-bar": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-navigating": progress ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:bg-shell", 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" }), _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: [productRail ? (_jsx(ShellOrganizationHead, { organization: organization })) : (_jsxs(_Fragment, { children: [_jsx(SidebarHead, { product: product }), organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null] })), navigation, _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("div", { "data-slot": "app-shell-progress", "aria-hidden": true }), _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] }), progress ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement de la page\u2026" })) : 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(ShellContentContext, { value: true, 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, navigation, _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/edge-glow.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Réglages de la lueur, choisis par Hugo le 2026-11-11 : épaisseur 47 px, houle 32 %, vitesse
+ * 68 %, pulsation 56 % sur 3 s.
+ */
+export declare const EDGE_GLOW: {
+    readonly width: 47;
+    readonly swell: 0.32;
+    readonly speed: 0.68;
+    readonly pulse: 0.56;
+    readonly pulsePeriodMs: 3000;
+};
+/** Temps des vagues (s) et phase de la pulsation (0 à 1) sur l'horloge : même image partout au même instant. */
+export declare function edgeGlowClock(epochMs: number): {
+    time: number;
+    pulse: number;
+};
+/**
+ * La lueur du chargement de page : une bande tricolore le long du bord de son parent (qui fixe la
+ * taille et l'arrondi, `overflow: hidden`). Elle pousse depuis le bord quand elle devient visible et
+ * s'y retire quand elle se cache ; l'animation ne tourne que pendant ce temps. Sans WebGL, avant
+ * l'hydratation, ou avec le mouvement réduit (une image fixe), le CSS dessine une lueur immobile
+ * (`[data-slot="edge-glow"]:not([data-live])`).
+ */
+export declare function EdgeGlow(): React.JSX.Element;

package/dist/edge-glow.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+/**
+ * Réglages de la lueur, choisis par Hugo le 2026-11-11 : épaisseur 47 px, houle 32 %, vitesse
+ * 68 %, pulsation 56 % sur 3 s.
+ */
+export const EDGE_GLOW = { width: 47, swell: 0.32, speed: 0.68, pulse: 0.56, pulsePeriodMs: 3000 };
+const VERTEX = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";
+/**
+ * Une seule bande le long du bord : opaque contre le bord, effacée vers l'intérieur. Son bord
+ * intérieur ondule (cinq vagues de vitesses différentes, qui ne se répètent pas), toute la bande
+ * respire (pulsation), les couleurs du H tournent. La profondeur est un minimum adouci des quatre
+ * distances aux bords : les coins intérieurs restent arrondis quelle que soit l'épaisseur.
+ */
+const FRAGMENT = `precision highp float;
+uniform vec2 R;uniform float D,T,W,A,I,P,Q;
+vec3 pal(float x){x=fract(x)*6.;vec3 b=vec3(.173,.471,.992),v=vec3(.451,.263,.996),k=vec3(.996,.322,.573),o=vec3(1.,.604,.275);
+if(x<1.)return mix(b,v,x);if(x<2.)return mix(v,k,x-1.);if(x<3.)return mix(k,o,x-2.);if(x<4.)return mix(o,k,x-3.);if(x<5.)return mix(k,v,x-4.);return mix(v,b,x-5.);}
+void main(){vec2 s=R/D;vec2 p=gl_FragCoord.xy/D;
+float k=14.;float d=-k*log(exp(-p.x/k)+exp(-p.y/k)+exp(-(s.x-p.x)/k)+exp(-(s.y-p.y)/k));
+vec2 c=p-s*.5;float a=atan(c.y/s.y,c.x/s.x);
+float w=.55+A*(.22*sin(2.*a+1.1*T)+.16*sin(3.*a-1.7*T+1.3)+.12*sin(5.*a+2.3*T+.4)+.08*sin(8.*a-3.1*T+2.)+.05*sin(13.*a+4.2*T));
+float br=.5-.5*cos(6.2832*Q);br=br*br*(3.-2.*br);
+float th=max(W*w,W*.12)*I*(1.+P*(br*1.2-.4));
+float f=pow(1.-smoothstep(0.,th,d),1.5);
+float al=f*.92*min(I*1.5,1.)*(.88+.12*br);
+gl_FragColor=vec4(pal(a/6.2832+T*.06)*al,al);}`;
+/** Temps des vagues (s) et phase de la pulsation (0 à 1) sur l'horloge : même image partout au même instant. */
+export function edgeGlowClock(epochMs) {
+    // Ramené sous 2π × 1000 : la précision des flottants du GPU reste fine, un saut toutes les 2,5 h.
+    const time = ((epochMs / 1000) * EDGE_GLOW.speed) % (Math.PI * 2000);
+    const pulse = (((epochMs % EDGE_GLOW.pulsePeriodMs) + EDGE_GLOW.pulsePeriodMs) % EDGE_GLOW.pulsePeriodMs) /
+        EDGE_GLOW.pulsePeriodMs;
+    return { time, pulse };
+}
+function createRenderer(canvas) {
+    const gl = canvas.getContext("webgl", { premultipliedAlpha: true, antialias: false, alpha: true });
+    if (!gl)
+        return null;
+    const program = gl.createProgram();
+    for (const [type, source] of [
+        [gl.VERTEX_SHADER, VERTEX],
+        [gl.FRAGMENT_SHADER, FRAGMENT],
+    ]) {
+        const shader = gl.createShader(type);
+        if (!shader)
+            return null;
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        gl.attachShader(program, shader);
+    }
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+        return null;
+    gl.useProgram(program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const position = gl.getAttribLocation(program, "p");
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    const u = (name) => gl.getUniformLocation(program, name);
+    const [uR, uD, uT, uW, uA, uI, uP, uQ] = ["R", "D", "T", "W", "A", "I", "P", "Q"].map(u);
+    return {
+        draw(width, height, ratio, intensity, epochMs) {
+            const w = Math.round(width * ratio);
+            const h = Math.round(height * ratio);
+            if (canvas.width !== w || canvas.height !== h) {
+                canvas.width = w;
+                canvas.height = h;
+                gl.viewport(0, 0, w, h);
+            }
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            if (intensity < 0.003)
+                return;
+            const { time, pulse } = edgeGlowClock(epochMs);
+            gl.uniform2f(uR ?? null, w, h);
+            gl.uniform1f(uD ?? null, ratio);
+            gl.uniform1f(uT ?? null, time);
+            gl.uniform1f(uW ?? null, EDGE_GLOW.width);
+            gl.uniform1f(uA ?? null, EDGE_GLOW.swell);
+            gl.uniform1f(uI ?? null, intensity);
+            gl.uniform1f(uP ?? null, EDGE_GLOW.pulse);
+            gl.uniform1f(uQ ?? null, pulse);
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+        },
+    };
+}
+function isShown(element) {
+    return typeof element.checkVisibility === "function" ? element.checkVisibility({ visibilityProperty: true }) : true;
+}
+/**
+ * La lueur du chargement de page : une bande tricolore le long du bord de son parent (qui fixe la
+ * taille et l'arrondi, `overflow: hidden`). Elle pousse depuis le bord quand elle devient visible et
+ * s'y retire quand elle se cache ; l'animation ne tourne que pendant ce temps. Sans WebGL, avant
+ * l'hydratation, ou avec le mouvement réduit (une image fixe), le CSS dessine une lueur immobile
+ * (`[data-slot="edge-glow"]:not([data-live])`).
+ */
+export function EdgeGlow() {
+    const ref = useRef(null);
+    useEffect(() => {
+        const canvas = ref.current;
+        if (!canvas)
+            return;
+        const renderer = createRenderer(canvas);
+        if (!renderer)
+            return;
+        const still = window.matchMedia("(prefers-reduced-motion: reduce)");
+        canvas.dataset["live"] = "";
+        let frame = 0;
+        let intensity = 0;
+        let last = performance.now();
+        const tick = (now) => {
+            frame = 0;
+            const shown = isShown(canvas);
+            const dt = Math.min((now - last) / 1000, 0.05);
+            last = now;
+            const target = shown ? 1 : 0;
+            intensity = still.matches ? target : intensity + (target - intensity) * (1 - Math.exp(-dt * (shown ? 5 : 7)));
+            // Mouvement réduit : une image fixe, toujours la même.
+            const epoch = still.matches ? 0 : performance.timeOrigin + now;
+            const { width, height } = canvas.getBoundingClientRect();
+            renderer.draw(width, height, Math.min(window.devicePixelRatio || 1, 1.5), intensity, epoch);
+            if (still.matches || (!shown && intensity < 0.003))
+                return;
+            frame = requestAnimationFrame(tick);
+        };
+        const wake = (event) => {
+            if (event && !(event.target instanceof Element && event.target.contains(canvas)))
+                return;
+            if (frame)
+                return;
+            last = performance.now();
+            frame = requestAnimationFrame(tick);
+        };
+        wake();
+        // Le chargeur s'affiche par une transition CSS (`:has`) : elle réveille la boucle.
+        document.addEventListener("transitionrun", wake);
+        const onMotionChange = () => wake();
+        still.addEventListener("change", onMotionChange);
+        return () => {
+            cancelAnimationFrame(frame);
+            document.removeEventListener("transitionrun", wake);
+            still.removeEventListener("change", onMotionChange);
+        };
+    }, []);
+    return _jsx("canvas", { ref: ref, "data-slot": "edge-glow", "aria-hidden": true });
+}

package/dist/family-loader.d.ts

@@ -16,7 +16,7 @@ export declare function familyLoaderPhase(epochMs: number, period?: number): num
 /** Cale toutes les animations du H sous `root` sur l'horloge (voir `familyLoaderStartTime`). */
 export declare function syncFamilyLoader(root: Element | null): void;
 /**
- * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
+ * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` (hors de la coque) et la coque s'y
  * signalent au lieu de dessiner leur propre H.
  */
 export declare const FamilyLoaderRootContext: React.Context<boolean>;
@@ -26,22 +26,23 @@ export declare const FamilyLoaderRootContext: React.Context<boolean>;
  * H complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
  * seulement. Mouvement réduit : le H plein, immobile.
  *
- * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
- * document (`FamilyLoaderRoot`), au même pixel dans tous les états. Ce composant sert au H en
+ * Un chargement de page ne montre pas ce H : c'est `PagePending`, qui passe par la lueur du
+ * document (`FamilyLoaderRoot`, `EdgeGlow`). Ce composant sert au H en
  * ligne (une carte, un panneau) ; dans un bouton ou une ligne, `Spinner` reste la règle.
  */
 export declare function FamilyLoader({ size, label, page, className, }: {
     /** `sm` 24 px, `md` 40 px, `lg` 64 px. Par défaut `lg` en page, `md` sinon. */
     size?: keyof typeof SIZES;
     label?: string;
-    /** Chargement de toute la page : passe par le H du document, comme `PagePending`. */
+    /** Chargement de toute la page : passe par la lueur du document, comme `PagePending`. */
     page?: boolean;
     className?: string;
 }): React.JSX.Element;
 /**
- * Le H du document : un seul élément, en position fixe sur la scène (la zone de contenu de la
- * coque), toujours monté, que le CSS montre quand une page attend ou que la coque charge. Monté par
- * `FamilyLoaderRoot`, ou, à défaut, par la coque ou par `PagePending` eux-mêmes.
+ * Le chargeur du document : la lueur du bord (`EdgeGlow`), en position fixe sur la carte du contenu
+ * de la coque (tout l'écran sur téléphone), toujours montée, que le CSS montre quand une page attend
+ * ou que la coque charge. Monté par `FamilyLoaderRoot`, ou, à défaut, par la coque ou par
+ * `PagePending` eux-mêmes.
  */
 export declare function FamilyLoaderHost(): React.JSX.Element;
 /**
@@ -54,14 +55,14 @@ export declare function FamilyLoaderHost(): React.JSX.Element;
  * </body>
  * ```
  *
- * Il rend le H dans le HTML du serveur, avant l'hydratation, à la même place et à la même phase
+ * Il rend la lueur dans le HTML du serveur (repli CSS avant l'hydratation), à la même place et à la même phase
  * que dans la coque et que dans le produit qu'on vient de quitter (ADR 0015).
  */
 export declare function FamilyLoaderRoot({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 /**
- * La place d'une page qui attend, hors de la coque : sa seule présence montre le H du document
+ * La place d'une page qui attend, hors de la coque : sa seule présence montre la lueur du document
  * (CSS `:has`), dès le rendu serveur. Sans `FamilyLoaderRoot`, elle monte son propre H.
  */
 export declare function PageLoadingPlaceholder({ label, hasRoot, className, }: {

package/dist/family-loader.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef } from "react";
 import { cn } from "./cn.js";
+import { EdgeGlow } from "./edge-glow.js";
 import { useBackgroundOrganizationRefresh } from "./product-switch.js";
 import { ShellFrame } from "./shell-frame.js";
 const SIZES = { sm: 24, md: 40, lg: 64 };
@@ -35,12 +36,6 @@ export function syncFamilyLoader(root) {
             animation.startTime = start;
     }
 }
-/**
- * Même calage, en ligne dans le HTML rendu par le serveur, juste après l'élément : il s'exécute
- * avant l'hydratation, une fois la feuille de style chargée (un script attend les feuilles de
- * style qui le précèdent). Une animation recréée (mouvement réduit basculé) se recale aussi.
- */
-const SYNC_SCRIPT = `(function(e){if(!e||!e.getAnimations)return;var p=${FAMILY_LOADER_PERIOD_MS};function s(){var t=-(((performance.timeOrigin%p)+p)%p);e.getAnimations({subtree:true}).forEach(function(a){if(String(a.animationName).indexOf("family-loader")===0&&a.startTime!==t)a.startTime=t})}s();e.addEventListener("animationstart",s)})(document.currentScript&&document.currentScript.previousElementSibling)`;
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** Cale le H sur l'horloge au montage et à chaque animation recréée. */
 function useClockSync(ref) {
@@ -60,7 +55,7 @@ function Mark() {
     return (_jsx(_Fragment, { children: PIECES.map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece))) }));
 }
 /**
- * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
+ * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` (hors de la coque) et la coque s'y
  * signalent au lieu de dessiner leur propre H.
  */
 export const FamilyLoaderRootContext = createContext(false);
@@ -70,8 +65,8 @@ export const FamilyLoaderRootContext = createContext(false);
  * H complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
  * seulement. Mouvement réduit : le H plein, immobile.
  *
- * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
- * document (`FamilyLoaderRoot`), au même pixel dans tous les états. Ce composant sert au H en
+ * Un chargement de page ne montre pas ce H : c'est `PagePending`, qui passe par la lueur du
+ * document (`FamilyLoaderRoot`, `EdgeGlow`). Ce composant sert au H en
  * ligne (une carte, un panneau) ; dans un bouton ou une ligne, `Spinner` reste la règle.
  */
 export function FamilyLoader({ size, label = "Chargement…", page = false, className, }) {
@@ -86,14 +81,13 @@ function FamilyMark({ px, label, className, }) {
     return (_jsx("span", { ref: ref, ...(label ? { role: "status", "aria-label": label } : { "aria-hidden": true }), "data-slot": "family-loader", className: cn("family-loader", className), style: { ["--family-loader-size"]: `${px}px` }, children: _jsx(Mark, {}) }));
 }
 /**
- * Le H du document : un seul élément, en position fixe sur la scène (la zone de contenu de la
- * coque), toujours monté, que le CSS montre quand une page attend ou que la coque charge. Monté par
- * `FamilyLoaderRoot`, ou, à défaut, par la coque ou par `PagePending` eux-mêmes.
+ * Le chargeur du document : la lueur du bord (`EdgeGlow`), en position fixe sur la carte du contenu
+ * de la coque (tout l'écran sur téléphone), toujours montée, que le CSS montre quand une page attend
+ * ou que la coque charge. Monté par `FamilyLoaderRoot`, ou, à défaut, par la coque ou par
+ * `PagePending` eux-mêmes.
  */
 export function FamilyLoaderHost() {
-    const ref = useRef(null);
-    useClockSync(ref);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, "data-slot": "family-loader-root", "aria-hidden": true, children: [_jsx("div", { "data-frame": true, 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 } })] }));
+    return (_jsxs("div", { "data-slot": "family-loader-root", "aria-hidden": true, children: [_jsx("div", { "data-frame": true, children: _jsx(ShellFrame, {}) }), _jsx("div", { "data-glow": true, children: _jsx(EdgeGlow, {}) })] }));
 }
 /**
  * Le chargeur du document, à poser une fois dans le `body` de la route racine, autour de l'app :
@@ -105,7 +99,7 @@ export function FamilyLoaderHost() {
  * </body>
  * ```
  *
- * Il rend le H dans le HTML du serveur, avant l'hydratation, à la même place et à la même phase
+ * Il rend la lueur dans le HTML du serveur (repli CSS avant l'hydratation), à la même place et à la même phase
  * que dans la coque et que dans le produit qu'on vient de quitter (ADR 0015).
  */
 export function FamilyLoaderRoot({ children }) {
@@ -114,7 +108,7 @@ export function FamilyLoaderRoot({ children }) {
     return (_jsxs(FamilyLoaderRootContext, { value: true, children: [children, _jsx(FamilyLoaderHost, {})] }));
 }
 /**
- * La place d'une page qui attend, hors de la coque : sa seule présence montre le H du document
+ * La place d'une page qui attend, hors de la coque : sa seule présence montre la lueur du document
  * (CSS `:has`), dès le rendu serveur. Sans `FamilyLoaderRoot`, elle monte son propre H.
  */
 export function PageLoadingPlaceholder({ label, hasRoot, className, }) {

package/dist/module-bar.js

@@ -17,6 +17,7 @@ import { ProductBadge } from "./product-badge.js";
 import { PRODUCT_PRERENDER_ATTRIBUTE } from "./product-switch.js";
 import { shellProductEntries } from "./products.js";
 import { familyProductName } from "./product-name.js";
+import { lastOrganization } from "./shell-memory.js";
 import { useLeaveOnClick } from "./shell-placement.js";
 import { SIDEBAR_ITEM, SidebarNavBack } from "./sidebar-nav.js";
 import { useSidebarRail } from "./sidebar-rail.js";
@@ -26,6 +27,10 @@ const noSubscription = () => () => { };
 function usePageOrigin() {
     return useSyncExternalStore(noSubscription, () => window.location.origin, () => undefined);
 }
+/** Dernière organisation ouverte après l'hydratation, `null` au rendu serveur (lien vers l'accueil d'abord). */
+function useLastOrganization() {
+    return useSyncExternalStore(noSubscription, lastOrganization, () => null);
+}
 const GROUP_LABEL = "px-3 pt-3 pb-1.5 text-xs font-medium text-muted-foreground lg:text-shell-muted lg:rail:sr-only";
 function ShellEntryLink({ entry, icon, onOpenCurrent, }) {
     const rail = useSidebarRail();
@@ -83,8 +88,9 @@ function ModuleBarEditor({ order, onSave, onCancel, }) {
  */
 export function ShellNavigation({ product, nav, accountHref, level, onLevelChange, projectModules, }) {
     const pageOrigin = usePageOrigin();
+    const organization = useLastOrganization();
     const order = useModuleBar();
-    const { products, account } = shellProductEntries({ current: product, accountHref, pageOrigin });
+    const { products, account } = shellProductEntries({ current: product, accountHref, pageOrigin, organization });
     return (_jsxs("div", { "data-slot": "shell-navigation", className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { "data-slot": "shell-manager", className: "shrink-0 px-3 pt-1", children: [_jsx("ul", { children: _jsx(ShellEntryLink, { entry: account, icon: UserGroupIcon }) }), _jsx("div", { "aria-hidden": true, className: "mx-2 mt-2 h-px bg-foreground/8" })] }), level === "modules" ? (_jsx(ModuleList, { entries: products, order: shownModules(order, product).filter((word) => !projectModules || word === product || projectModules.includes(word)), onOpenCurrent: () => onLevelChange("tabs"), onCustomize: () => onLevelChange("edit") })) : level === "edit" ? (_jsx(ModuleBarEditor, { order: order, onSave: (next) => {
                     saveModuleBar(next);
                     void pushModuleBar(next);

package/dist/page-pending.d.ts

@@ -1,41 +1,38 @@
+import { type PageSkeletonVariant } from "./page-skeleton.tsx";
 /**
- * Délai avant de couvrir l'ancienne page pendant une navigation : une navigation préchargée
- * (survol, `defaultPreload: "intent"`) se termine avant et ne montre rien.
+ * Attente avant de remplacer l'ancienne page par le squelette de la nouvelle (ADR 0025). En dessous,
+ * l'ancienne page reste à l'écran avec la barre de progression : une navigation courte ne fait rien
+ * clignoter. Valeur par défaut de TanStack Router, et seuil d'une seconde de Nielsen.
  */
-export declare const PAGE_PENDING_MS = 50;
-/** Durée minimale d'affichage une fois apparu : le H ne clignote pas. */
-export declare const PAGE_PENDING_MIN_MS = 300;
+export declare const PAGE_PENDING_MS = 1000;
+/** Durée minimale d'affichage du squelette une fois apparu : il ne clignote pas (défaut de TanStack Router). */
+export declare const PAGE_PENDING_MIN_MS = 500;
+/** Attente avant la barre de progression d'une navigation : une page préchargée s'ouvre sans elle. */
+export declare const NAVIGATION_PROGRESS_MS = 150;
+/** Durée minimale de la barre de progression une fois apparue. */
+export declare const NAVIGATION_PROGRESS_MIN_MS = 300;
 /**
- * Calque de chargement de la zone de contenu : sous l'en-tête de la coque (56 px), sur toute la
- * largeur, opaque. Il cache l'ancienne page ; le H, lui, est celui du document
- * (`FamilyLoaderRoot`), en position fixe, au même pixel dans tous les états.
+ * Calque de la zone de contenu, sous l'en-tête de la coque (56 px), opaque : il cache la page
+ * pendant le départ vers un autre module, la lueur du document par-dessus (ADR 0015, 0020).
  */
 export declare const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
+/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas la lueur. */
+export declare const ShellContentContext: React.Context<boolean>;
 /**
- * @deprecated Le H d'un chargement de page est celui du document (`FamilyLoaderRoot`, ADR 0015) :
- * la scène ne garde qu'un texte pour les lecteurs d'écran.
- */
-export declare function ContentLoadingStage({ label }: {
-    label: string;
-}): React.JSX.Element;
-/**
- * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, la coque couvre
- * alors la zone de contenu et montre le H du document.
- */
-export declare const ContentLoadingContext: React.Context<(() => () => void) | null>;
-/**
- * Le chargement d'une page : le H de la famille, au centre de la zone de contenu de la coque, au
- * même pixel et à la même phase dans tous les états (calque de navigation de la coque, attente
- * d'une route, frontière `Suspense`, rendu serveur, page d'entrée, produit d'à côté). Ce composant
- * ne dessine pas de H : il marque la place de la page (`data-slot="page-pending"`) et le H du
- * document (`FamilyLoaderRoot`) s'affiche, dès le HTML du serveur. Dans la coque, la coque s'en
- * charge ; hors de la coque, le cadre de la coque est dessiné autour du H.
+ * Le chargement d'une page.
+ *
+ * - **Dans la coque** (`AppShell`) : le squelette de la page (`PageSkeleton`), la coque restant en
+ *   place. Jamais la lueur : elle est réservée au document qui n'a pas encore de coque (ADR 0025).
+ * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : la lueur du document
+ *   (`FamilyLoaderRoot`), au même pixel que dans la coque (ADR 0015).
  *
- * Composant de `pendingComponent` (TanStack Router, `routerPendingDefaults`), repli de la frontière
- * `Suspense` de la coque, et état de chargement d'une page qui lit ses données.
+ * Composant par défaut de `pendingComponent` (`routerPendingDefaults`) et repli de la frontière
+ * `Suspense` de la coque. Une route dont la page n'est pas une liste passe sa forme :
+ * `pendingComponent: () => <PagePending variant="dashboard" />`.
  */
-export declare function PagePending({ label }: {
+export declare function PagePending({ label, variant, }: {
     label?: string;
+    variant?: PageSkeletonVariant;
 }): React.JSX.Element;
 /**
  * Vrai après `delay` ms de `active`, et le reste au moins `min` ms une fois vrai : un état bref ne
@@ -43,17 +40,20 @@ export declare function PagePending({ label }: {
  */
 export declare function useDelayedFlag(active: boolean, delay: number, min: number): boolean;
 /**
- * Réglages communs de `createRouter` (TanStack Router) :
+ * Réglages communs de `createRouter` (TanStack Router), ADR 0025 :
  * - préchargement au survol ou au focus d'un lien (`intent`) : la plupart des pages s'ouvrent sans
- *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur ;
- * - une route qui attend encore ses données montre `PagePending` après 50 ms, au moins 300 ms.
+ *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur (doc de
+ *   TanStack Router, « External data loading ») ;
+ * - pendant une navigation, l'ancienne page reste avec la barre de progression de la coque ; si la
+ *   nouvelle attend encore ses données après 1 s, son squelette (`PagePending`) la remplace, au
+ *   moins 500 ms.
  *
  * ```ts
  * createRouter({ routeTree, ...routerPendingDefaults })
  * ```
  *
- * La coque doit vivre dans une route de mise en page (`/o/$org`) et le `beforeLoad` de la racine
- * ne doit pas appeler le serveur à chaque navigation : une attente là remplacerait toute l'app.
+ * La coque doit vivre dans une route de mise en page (`/o/$org`), rendue avant les données des
+ * pages, et le `beforeLoad` de la racine ne doit pas appeler le serveur à chaque navigation.
  */
 export declare const routerPendingDefaults: {
     defaultPendingComponent: typeof PagePending;

package/dist/page-pending.js

@@ -1,51 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { FamilyLoaderRootContext, PageLoadingPlaceholder } from "./family-loader.js";
+import { PageSkeleton } from "./page-skeleton.js";
 /**
- * Délai avant de couvrir l'ancienne page pendant une navigation : une navigation préchargée
- * (survol, `defaultPreload: "intent"`) se termine avant et ne montre rien.
+ * Attente avant de remplacer l'ancienne page par le squelette de la nouvelle (ADR 0025). En dessous,
+ * l'ancienne page reste à l'écran avec la barre de progression : une navigation courte ne fait rien
+ * clignoter. Valeur par défaut de TanStack Router, et seuil d'une seconde de Nielsen.
  */
-export const PAGE_PENDING_MS = 50;
-/** Durée minimale d'affichage une fois apparu : le H ne clignote pas. */
-export const PAGE_PENDING_MIN_MS = 300;
+export const PAGE_PENDING_MS = 1000;
+/** Durée minimale d'affichage du squelette une fois apparu : il ne clignote pas (défaut de TanStack Router). */
+export const PAGE_PENDING_MIN_MS = 500;
+/** Attente avant la barre de progression d'une navigation : une page préchargée s'ouvre sans elle. */
+export const NAVIGATION_PROGRESS_MS = 150;
+/** Durée minimale de la barre de progression une fois apparue. */
+export const NAVIGATION_PROGRESS_MIN_MS = 300;
 /**
- * Calque de chargement de la zone de contenu : sous l'en-tête de la coque (56 px), sur toute la
- * largeur, opaque. Il cache l'ancienne page ; le H, lui, est celui du document
- * (`FamilyLoaderRoot`), en position fixe, au même pixel dans tous les états.
+ * Calque de la zone de contenu, sous l'en-tête de la coque (56 px), opaque : il cache la page
+ * pendant le départ vers un autre module, la lueur du document par-dessus (ADR 0015, 0020).
  */
 export const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
+/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas la lueur. */
+export const ShellContentContext = createContext(false);
 /**
- * @deprecated Le H d'un chargement de page est celui du document (`FamilyLoaderRoot`, ADR 0015) :
- * la scène ne garde qu'un texte pour les lecteurs d'écran.
- */
-export function ContentLoadingStage({ label }) {
-    return (_jsx("span", { role: "status", className: "sr-only", children: label }));
-}
-/**
- * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, la coque couvre
- * alors la zone de contenu et montre le H du document.
- */
-export const ContentLoadingContext = createContext(null);
-/**
- * Le chargement d'une page : le H de la famille, au centre de la zone de contenu de la coque, au
- * même pixel et à la même phase dans tous les états (calque de navigation de la coque, attente
- * d'une route, frontière `Suspense`, rendu serveur, page d'entrée, produit d'à côté). Ce composant
- * ne dessine pas de H : il marque la place de la page (`data-slot="page-pending"`) et le H du
- * document (`FamilyLoaderRoot`) s'affiche, dès le HTML du serveur. Dans la coque, la coque s'en
- * charge ; hors de la coque, le cadre de la coque est dessiné autour du H.
+ * Le chargement d'une page.
+ *
+ * - **Dans la coque** (`AppShell`) : le squelette de la page (`PageSkeleton`), la coque restant en
+ *   place. Jamais la lueur : elle est réservée au document qui n'a pas encore de coque (ADR 0025).
+ * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : la lueur du document
+ *   (`FamilyLoaderRoot`), au même pixel que dans la coque (ADR 0015).
  *
- * Composant de `pendingComponent` (TanStack Router, `routerPendingDefaults`), repli de la frontière
- * `Suspense` de la coque, et état de chargement d'une page qui lit ses données.
+ * Composant par défaut de `pendingComponent` (`routerPendingDefaults`) et repli de la frontière
+ * `Suspense` de la coque. Une route dont la page n'est pas une liste passe sa forme :
+ * `pendingComponent: () => <PagePending variant="dashboard" />`.
  */
-export function PagePending({ label = "Chargement…" }) {
-    const register = useContext(ContentLoadingContext);
+export function PagePending({ label = "Chargement…", variant, }) {
+    const inShell = useContext(ShellContentContext);
     const hasRoot = useContext(FamilyLoaderRootContext);
-    useIsomorphicLayoutEffect(() => register?.(), [register]);
-    if (!register)
-        return _jsx(PageLoadingPlaceholder, { label: label, hasRoot: hasRoot });
-    return (_jsx("div", { "data-slot": "page-pending", role: "status", "aria-label": label, className: "min-h-[calc(100dvh-10rem)]" }));
+    if (inShell)
+        return _jsx(PageSkeleton, { label: label, ...(variant ? { variant } : {}) });
+    return _jsx(PageLoadingPlaceholder, { label: label, hasRoot: hasRoot });
 }
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /**
  * Vrai après `delay` ms de `active`, et le reste au moins `min` ms une fois vrai : un état bref ne
  * montre rien, un état montré ne clignote pas.
@@ -70,17 +64,20 @@ export function useDelayedFlag(active, delay, min) {
     return visible;
 }
 /**
- * Réglages communs de `createRouter` (TanStack Router) :
+ * Réglages communs de `createRouter` (TanStack Router), ADR 0025 :
  * - préchargement au survol ou au focus d'un lien (`intent`) : la plupart des pages s'ouvrent sans
- *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur ;
- * - une route qui attend encore ses données montre `PagePending` après 50 ms, au moins 300 ms.
+ *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur (doc de
+ *   TanStack Router, « External data loading ») ;
+ * - pendant une navigation, l'ancienne page reste avec la barre de progression de la coque ; si la
+ *   nouvelle attend encore ses données après 1 s, son squelette (`PagePending`) la remplace, au
+ *   moins 500 ms.
  *
  * ```ts
  * createRouter({ routeTree, ...routerPendingDefaults })
  * ```
  *
- * La coque doit vivre dans une route de mise en page (`/o/$org`) et le `beforeLoad` de la racine
- * ne doit pas appeler le serveur à chaque navigation : une attente là remplacerait toute l'app.
+ * La coque doit vivre dans une route de mise en page (`/o/$org`), rendue avant les données des
+ * pages, et le `beforeLoad` de la racine ne doit pas appeler le serveur à chaque navigation.
  */
 export const routerPendingDefaults = {
     defaultPendingComponent: PagePending,

package/dist/page-skeleton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * La forme d'une page qui charge, dans la coque. Elle reprend la mise en page de `Page`
+ * (`@hgdc/ui/page-header`) : en-tête de la même hauteur, même colonne, même espacement, pour que
+ * rien ne saute quand la page arrive (ADR 0025).
+ *
+ * - `list` : un tableau ou une liste (par défaut) ;
+ * - `dashboard` : des chiffres en tête, un graphique, une liste ;
+ * - `form` : des réglages ou une fiche, dans la colonne de lecture.
+ */
+export type PageSkeletonVariant = "list" | "dashboard" | "form";
+export declare function PageSkeleton({ variant, label, className, }: {
+    variant?: PageSkeletonVariant;
+    /** Annoncé aux lecteurs d'écran. */
+    label?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/page-skeleton.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { Skeleton } from "./skeleton.js";
+export function PageSkeleton({ variant = "list", label = "Chargement…", className, }) {
+    return (_jsxs("div", { "data-slot": "page-skeleton", "data-variant": variant, role: "status", "aria-label": label, className: cn("w-full", variant === "form" && "max-w-3xl", className), children: [_jsx("div", { "data-slot": "page-header", className: "mb-8 grid gap-3", children: _jsxs("div", { className: "min-w-0", children: [_jsx(Skeleton, { className: "h-9 w-56 max-w-full rounded-lg" }), _jsx(Skeleton, { className: "mt-2 h-4 w-80 max-w-full rounded-md" })] }) }), _jsx("div", { className: "grid gap-6", children: BODIES[variant] })] }));
+}
+function Rows({ count }) {
+    return (_jsx("div", { className: "overflow-hidden rounded-2xl border border-foreground/5", children: Array.from({ length: count }, (_, index) => (_jsxs("div", { className: "flex items-center gap-4 border-b border-foreground/5 px-4 py-3 last:border-b-0", children: [_jsx(Skeleton, { className: "size-8 shrink-0 rounded-lg" }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-2/5 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-1/4 rounded-md" })] }), _jsx(Skeleton, { className: "hidden h-6 w-16 rounded-full sm:block" })] }, index))) }));
+}
+const BODIES = {
+    list: (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-10 w-full max-w-md" }), _jsx(Rows, { count: 6 })] })),
+    dashboard: (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-2 gap-4 lg:grid-cols-4", children: Array.from({ length: 4 }, (_, index) => (_jsx(Skeleton, { className: "h-24 rounded-2xl" }, index))) }), _jsx(Skeleton, { className: "h-64 rounded-2xl" }), _jsx(Rows, { count: 4 })] })),
+    form: (_jsx(_Fragment, { children: Array.from({ length: 3 }, (_, index) => (_jsxs("div", { className: "grid gap-4 rounded-2xl border border-foreground/5 p-6", children: [_jsx(Skeleton, { className: "h-5 w-40 rounded-md" }), _jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-2/3" })] }, index))) })),
+};

package/dist/product-switch.d.ts

@@ -4,6 +4,15 @@ 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;
+/**
+ * Une relecture au plus par produit pendant ce délai. Elle refait une connexion complète chez ID
+ * (environ 3 s côté serveur, pendant le chargement de la page) : la refaire à chaque passage d'un
+ * produit à l'autre ralentissait la navigation (2026-11-11). Les changements d'appartenance arrivent
+ * déjà en direct par les événements d'Account ; la relecture n'est qu'un filet.
+ */
+export declare const BACKGROUND_REFRESH_INTERVAL_MS: number;
+/** Heure de la dernière relecture d'un produit, en `localStorage` : `hgdc-org-sync:<base>` (`/` à la racine). */
+export declare const ORG_SYNC_LAST_KEY_PREFIX = "hgdc-org-sync:";
 /** 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";
 /**
@@ -30,12 +39,13 @@ 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;
 /**
- * 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. Une page prérendue au survol attend d'être affichée :
- * un survol sans clic ne relit rien.
+ * Relit les organisations dans un cadre caché, une fois, si l'entrée l'a demandé et que la dernière
+ * relecture de ce produit date de plus de `BACKGROUND_REFRESH_INTERVAL_MS`. 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. 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;
 /**

package/dist/product-switch.js

@@ -15,6 +15,15 @@ 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;
+/**
+ * Une relecture au plus par produit pendant ce délai. Elle refait une connexion complète chez ID
+ * (environ 3 s côté serveur, pendant le chargement de la page) : la refaire à chaque passage d'un
+ * produit à l'autre ralentissait la navigation (2026-11-11). Les changements d'appartenance arrivent
+ * déjà en direct par les événements d'Account ; la relecture n'est qu'un filet.
+ */
+export const BACKGROUND_REFRESH_INTERVAL_MS = 10 * 60_000;
+/** Heure de la dernière relecture d'un produit, en `localStorage` : `hgdc-org-sync:<base>` (`/` à la racine). */
+export const ORG_SYNC_LAST_KEY_PREFIX = "hgdc-org-sync:";
 /** 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";
 /**
@@ -83,12 +92,33 @@ 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. Une page prérendue au survol attend d'être affichée :
- * un survol sans clic ne relit rien.
+ * Vrai si la relecture de ce produit est due, et note alors l'heure : au plus une toutes les
+ * `BACKGROUND_REFRESH_INTERVAL_MS`. Sans `localStorage` (navigation privée stricte), toujours due.
+ */
+function refreshDue(base, win, now = Date.now()) {
+    const key = `${ORG_SYNC_LAST_KEY_PREFIX}${base || "/"}`;
+    try {
+        const storage = win?.localStorage;
+        if (!storage)
+            return true;
+        const last = Number(storage.getItem(key));
+        if (Number.isFinite(last) && last > 0 && now - last >= 0 && now - last < BACKGROUND_REFRESH_INTERVAL_MS)
+            return false;
+        storage.setItem(key, String(now));
+    }
+    catch {
+        // Stockage refusé : la relecture part, comme avant.
+    }
+    return true;
+}
+/**
+ * Relit les organisations dans un cadre caché, une fois, si l'entrée l'a demandé et que la dernière
+ * relecture de ce produit date de plus de `BACKGROUND_REFRESH_INTERVAL_MS`. 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. Une page prérendue au survol attend d'être affichée : un survol sans
+ * clic ne relit rien.
  */
 export function startBackgroundRefresh(doc = document) {
     if (doc.prerendering) {
@@ -96,7 +126,7 @@ export function startBackgroundRefresh(doc = document) {
         return null;
     }
     const base = takeOrgSync(doc);
-    if (base === null)
+    if (base === null || !refreshDue(base, doc.defaultView))
         return null;
     const frame = doc.createElement("iframe");
     frame.hidden = true;

package/dist/products.d.ts

@@ -65,13 +65,19 @@ export type ProductOrigin = {
 export declare const PRODUCT_ORIGINS: Readonly<Record<string, ProductOrigin>>;
 /** Adresse de l'app d'un produit : celle de `PRODUCT_ORIGINS`, sinon `https://<mot>.hgdc.ch`. */
 export declare function productOrigin(word: string, origins?: Readonly<Record<string, ProductOrigin>>): ProductOrigin;
-/** Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`. */
-export declare function productEntryHref(word: string, origins?: Readonly<Record<string, ProductOrigin>>): string;
+/**
+ * Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`.
+ * Avec `organization` (slug de la dernière organisation ouverte), l'entrée mène droit à
+ * `/o/<organisation>` : sans les redirections de l'accueil (`/`, puis `/dashboard` ou `/o/…`).
+ */
+export declare function productEntryHref(word: string, origins?: Readonly<Record<string, ProductOrigin>>, organization?: string | null): string;
 /**
  * Requête de l'entrée depuis un autre produit : arriver sur l'accueil, relire les organisations en
  * arrière-plan (`refresh=background`, ADR 0016).
  */
 export declare const PRODUCT_ENTRY_REFRESH_QUERY = "refresh=background&next=/";
+/** Requête de l'entrée : `refresh=background` toujours en tête (règles de prérendu), `next` vers l'organisation si connue. */
+export declare function productEntryQuery(word: string, organization?: string | null): string;
 export declare const HGDC_ACCOUNT: HgdcCatalogProduct;
 /** Manager : les organisations, leurs membres et leurs rôles. En tête du menu et de la barre des produits. */
 export declare const HGDC_MANAGER: HgdcCatalogProduct;
@@ -137,6 +143,8 @@ export declare function shellProductEntries(options?: {
     accountHref?: string | undefined;
     catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
     pageOrigin?: string | undefined;
+    /** Dernière organisation ouverte (`lastOrganization()`, absente au rendu serveur) : l'entrée y mène droit. */
+    organization?: string | null | undefined;
 }): {
     products: Array<ShellProductEntry>;
     account: ShellProductEntry;

package/dist/products.js

@@ -37,16 +37,32 @@ export function productOrigin(word, origins = PRODUCT_ORIGINS) {
     const key = word.toLowerCase();
     return Object.hasOwn(origins, key) ? origins[key] : { origin: `https://${key}.hgdc.ch`, basePath: "" };
 }
-/** Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`. */
-export function productEntryHref(word, origins = PRODUCT_ORIGINS) {
+/**
+ * Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`.
+ * Avec `organization` (slug de la dernière organisation ouverte), l'entrée mène droit à
+ * `/o/<organisation>` : sans les redirections de l'accueil (`/`, puis `/dashboard` ou `/o/…`).
+ */
+export function productEntryHref(word, origins = PRODUCT_ORIGINS, organization) {
     const app = productOrigin(word, origins);
-    return `${app.origin}${app.basePath}${PRODUCT_ENTRY_PATH}?${PRODUCT_ENTRY_REFRESH_QUERY}`;
+    return `${app.origin}${app.basePath}${PRODUCT_ENTRY_PATH}?${productEntryQuery(word, organization)}`;
 }
 /**
  * Requête de l'entrée depuis un autre produit : arriver sur l'accueil, relire les organisations en
  * arrière-plan (`refresh=background`, ADR 0016).
  */
 export const PRODUCT_ENTRY_REFRESH_QUERY = "refresh=background&next=/";
+/** Slug d'organisation tel que les produits l'écrivent dans `/o/<slug>` : rien d'autre ne part dans `next`. */
+const ORGANIZATION_SLUG = /^[a-z0-9][a-z0-9-]{0,62}$/;
+/** Produits dont `/o/<slug>` est la page d'une organisation. Manager les désigne par leur identifiant. */
+function opensOrganizationBySlug(word) {
+    return word.toLowerCase() !== "manager";
+}
+/** Requête de l'entrée : `refresh=background` toujours en tête (règles de prérendu), `next` vers l'organisation si connue. */
+export function productEntryQuery(word, organization) {
+    if (!organization || !ORGANIZATION_SLUG.test(organization) || !opensOrganizationBySlug(word))
+        return PRODUCT_ENTRY_REFRESH_QUERY;
+    return `refresh=background&next=${encodeURIComponent(`/o/${organization}`)}`;
+}
 function product(word, pitch, icon, stage, 
 /** Nom affiché quand il diffère du mot de l'adresse : le nom du module (« Déploiements » pour `host`). */
 name = word) {
@@ -147,7 +163,7 @@ export function sameOriginPath(href, pageOrigin) {
  */
 export function shellProductEntries(options = {}) {
     const current = options.current?.toLowerCase();
-    const { pageOrigin } = options;
+    const { pageOrigin, organization } = options;
     const entry = (item, href, product) => {
         const base = {
             name: item.name,
@@ -165,7 +181,9 @@ export function shellProductEntries(options = {}) {
     const head = manager ?? HGDC_MANAGER;
     const local = localManagerHref(options.accountHref);
     return {
-        products: others.filter(isProductOpen).map((item) => entry(item, item.entryHref, true)),
+        products: others
+            .filter(isProductOpen)
+            .map((item) => entry(item, organization ? productEntryHref(item.badge, PRODUCT_ORIGINS, organization) : item.entryHref, true)),
         account: entry(head, local ?? head.entryHref, local === undefined),
     };
 }

package/dist/spinner.d.ts

@@ -6,10 +6,11 @@ declare const SIZES: {
     readonly 8: "size-8";
 };
 /**
- * L'anneau d'attente de la DA : un arc arrondi qui tourne sur une piste à peine visible, le
- * même que la page d'attente du portail. Dans un bouton ou une ligne, il prend la couleur du
- * texte (`tone="current"`) ; seul sur une page, il prend l'accent (`tone="accent"`).
- * Mouvement réduit : l'arc ne tourne plus, il respire.
+ * L'anneau d'attente de la DA : un arc arrondi sur une piste à peine visible. La tête avance
+ * toujours, la queue la rattrape, puis l'arc repart d'un point ; l'anneau tourne lentement en même
+ * temps (`styles.css`, `.spinner-*`). Dans un bouton ou une ligne, il prend la couleur du texte
+ * (`tone="current"`) ; seul sur une page, les couleurs du H (`tone="accent"`).
+ * Mouvement réduit : un arc fixe qui respire.
  */
 export declare function Spinner({ className, label, size, tone, }: {
     className?: string;

package/dist/spinner.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cn } from "./cn.js";
 const SIZES = { 3: "size-3", 4: "size-4", 5: "size-5", 6: "size-6", 8: "size-8" };
 /**
- * L'anneau d'attente de la DA : un arc arrondi qui tourne sur une piste à peine visible, le
- * même que la page d'attente du portail. Dans un bouton ou une ligne, il prend la couleur du
- * texte (`tone="current"`) ; seul sur une page, il prend l'accent (`tone="accent"`).
- * Mouvement réduit : l'arc ne tourne plus, il respire.
+ * L'anneau d'attente de la DA : un arc arrondi sur une piste à peine visible. La tête avance
+ * toujours, la queue la rattrape, puis l'arc repart d'un point ; l'anneau tourne lentement en même
+ * temps (`styles.css`, `.spinner-*`). Dans un bouton ou une ligne, il prend la couleur du texte
+ * (`tone="current"`) ; seul sur une page, les couleurs du H (`tone="accent"`).
+ * Mouvement réduit : un arc fixe qui respire.
  */
 export function Spinner({ className, label, size = 4, tone = "current", }) {
-    return (_jsxs("span", { role: "status", className: cn("inline-flex items-center gap-2", className), children: [_jsxs("svg", { viewBox: "0 0 32 32", fill: "none", "aria-hidden": true, className: cn("shrink-0", SIZES[size]), children: [_jsx("circle", { cx: "16", cy: "16", r: "13", strokeWidth: "4", className: "stroke-current opacity-15" }), _jsx("circle", { cx: "16", cy: "16", r: "13", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: "22 60", className: cn("origin-center animate-spin motion-reduce:animate-pulse", tone === "accent" ? "stroke-accent" : "stroke-current") })] }), label ? _jsx("span", { children: label }) : _jsx("span", { className: "sr-only", children: "Chargement" })] }));
+    const gradient = useId();
+    return (_jsxs("span", { role: "status", className: cn("inline-flex items-center gap-2", className), children: [_jsxs("svg", { viewBox: "0 0 32 32", fill: "none", "aria-hidden": true, className: cn("shrink-0", SIZES[size]), children: [tone === "accent" ? (_jsx("defs", { children: _jsxs("linearGradient", { id: gradient, x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: "#2c78fd" }), _jsx("stop", { offset: "0.45", stopColor: "#7343fe" }), _jsx("stop", { offset: "0.8", stopColor: "#fe5292" }), _jsx("stop", { offset: "1", stopColor: "#ff9a46" })] }) })) : null, _jsx("circle", { cx: "16", cy: "16", r: "12", strokeWidth: "4", className: "stroke-current opacity-15" }), _jsx("g", { className: "spinner-rotor", children: _jsx("circle", { cx: "16", cy: "16", r: "12", strokeWidth: "4", strokeLinecap: "round", pathLength: 100, transform: "rotate(-90 16 16)", className: cn("spinner-arc", tone === "accent" ? null : "stroke-current"), ...(tone === "accent" ? { stroke: `url(#${gradient})` } : {}) }) })] }), label ? _jsx("span", { children: label }) : _jsx("span", { className: "sr-only", children: "Chargement" })] }));
 }

package/dist/use-content-loading.d.ts

@@ -3,11 +3,8 @@ export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 /** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
 export declare function useHydrated(): boolean;
 /**
- * Le chargement de la zone de contenu : `navigating` après 50 ms, `pending` aussitôt, puis au
- * moins 300 ms. Effets de mise en page : une page qui passe en attente est couverte avant d'être
- * peinte, jamais une image vide entre les deux.
+ * Le calque du H sur la zone de contenu, pendant le départ vers un autre module : aussitôt, puis
+ * au moins 300 ms. Effet de mise en page : la page est couverte avant d'être peinte, jamais une
+ * image vide entre les deux. Une navigation dans le module ne le montre plus (ADR 0025).
  */
-export declare function useContentLoading({ navigating, pending }: {
-    navigating: boolean;
-    pending: boolean;
-}): boolean;
+export declare function useShellCover(active: boolean): boolean;

package/dist/use-content-loading.js

@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { PAGE_PENDING_MIN_MS, PAGE_PENDING_MS } from "./page-pending.js";
+/** Durée minimale du calque de départ une fois montré : le H ne clignote pas. */
+const COVER_MIN_MS = 300;
 export const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
 export function useHydrated() {
@@ -8,22 +9,11 @@ export function useHydrated() {
     return hydrated;
 }
 /**
- * Le chargement de la zone de contenu : `navigating` après 50 ms, `pending` aussitôt, puis au
- * moins 300 ms. Effets de mise en page : une page qui passe en attente est couverte avant d'être
- * peinte, jamais une image vide entre les deux.
+ * Le calque du H sur la zone de contenu, pendant le départ vers un autre module : aussitôt, puis
+ * au moins 300 ms. Effet de mise en page : la page est couverte avant d'être peinte, jamais une
+ * image vide entre les deux. Une navigation dans le module ne le montre plus (ADR 0025).
  */
-export function useContentLoading({ navigating, pending }) {
-    const [navigatingLong, setNavigatingLong] = useState(false);
-    useEffect(() => {
-        if (!navigating)
-            return undefined;
-        const timer = window.setTimeout(() => setNavigatingLong(true), PAGE_PENDING_MS);
-        return () => {
-            window.clearTimeout(timer);
-            setNavigatingLong(false);
-        };
-    }, [navigating]);
-    const active = pending || (navigating && navigatingLong);
+export function useShellCover(active) {
     const [visible, setVisible] = useState(false);
     const shownAt = useRef(0);
     useIsomorphicLayoutEffect(() => {
@@ -33,7 +23,7 @@ export function useContentLoading({ navigating, pending }) {
             return undefined;
         }
         if (!active && visible) {
-            const timer = window.setTimeout(() => setVisible(false), Math.max(0, shownAt.current + PAGE_PENDING_MIN_MS - performance.now()));
+            const timer = window.setTimeout(() => setVisible(false), Math.max(0, shownAt.current + COVER_MIN_MS - performance.now()));
             return () => window.clearTimeout(timer);
         }
         return undefined;

package/package.json

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

@@ -558,6 +558,50 @@
   animation: rise 420ms var(--ease-ios) both;
 }
 
+/* L'anneau d'attente (`Spinner`) : la tête de l'arc avance de 1 à 99 % du tour pendant que la
+   queue reste, puis la queue la rattrape (la tête ne recule jamais) ; l'anneau tourne lentement,
+   chaque départ tombe un peu plus loin. */
+@keyframes spinner-arc {
+  0% {
+    stroke-dasharray: 1 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 71 150;
+    stroke-dashoffset: -28;
+  }
+  100% {
+    stroke-dasharray: 71 150;
+    stroke-dashoffset: -99;
+  }
+}
+@keyframes spinner-rotor {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-breathe {
+  50% {
+    opacity: 0.45;
+  }
+}
+.spinner-rotor {
+  transform-origin: 50% 50%;
+  animation: spinner-rotor 1.6s linear infinite;
+}
+.spinner-arc {
+  animation: spinner-arc 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner-rotor {
+    animation: none;
+  }
+  .spinner-arc {
+    stroke-dasharray: 30 150;
+    animation: spinner-breathe 1.6s ease-in-out infinite;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .soft-in,
   .pop-in,
@@ -792,11 +836,11 @@
   }
 }
 
-/* Le chargeur du document (`FamilyLoaderRoot`) : un seul H par page, en position fixe sur la scène.
-   Visible quand une page attend (`PagePending`) hors de la coque, quand la coque charge
-   (`data-loading`), ou dès le rendu serveur quand une page attend dans une coque pas encore
-   hydratée. Masqué avec 80 ms de retenue : un `PagePending` qui laisse la place à un autre ne fait
-   pas clignoter le H. */
+/* Le chargeur du document (`FamilyLoaderRoot`) : une seule lueur par page, en position fixe sur la
+   carte du contenu. Visible quand une page attend (`PagePending`) hors de la coque, ou quand la
+   coque part vers un autre module (`data-loading`). Dans la coque, une page qui attend montre son
+   squelette, jamais la lueur (ADR 0025). Masqué avec 80 ms de retenue : un `PagePending` qui laisse
+   la place à un autre ne fait pas clignoter la lueur. */
 [data-slot="family-loader-root"] {
   position: fixed;
   inset: 0;
@@ -809,22 +853,40 @@
     visibility 0s linear 200ms;
 }
 :root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])) [data-slot="family-loader-root"],
-:root:has([data-slot="app-shell"][data-loading]) [data-slot="family-loader-root"],
-:root:has([data-slot="app-shell"]:not([data-hydrated]) [data-slot="page-pending"]) [data-slot="family-loader-root"] {
+:root:has([data-slot="app-shell"][data-loading]) [data-slot="family-loader-root"] {
   opacity: 1;
   visibility: visible;
   transition:
     opacity 150ms var(--ease-out),
     visibility 0s;
 }
-[data-slot="family-loader-root"] > [data-stage] {
+/* La lueur du chargement (`EdgeGlow`) : tout l'écran sur téléphone ; sur ordinateur, la carte du
+   contenu de la coque (marge de 8 px, `rounded-xl`), en-tête compris. */
+[data-slot="family-loader-root"] > [data-glow] {
   position: fixed;
-  top: var(--hgdc-stage-top);
-  right: var(--hgdc-stage-right);
-  bottom: var(--hgdc-stage-bottom);
-  left: var(--hgdc-stage-left);
-  display: grid;
-  place-items: center;
+  inset: 0;
+  overflow: hidden;
+}
+@media (width >= 64rem) {
+  [data-slot="family-loader-root"] > [data-glow] {
+    inset: 0.5rem 0.5rem 0.5rem var(--hgdc-content-left);
+    border-radius: var(--radius-xl);
+  }
+}
+[data-slot="edge-glow"] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* Sans WebGL ou avant l'hydratation : une lueur immobile, mêmes couleurs, dessinée par le CSS. */
+[data-slot="edge-glow"]:not([data-live]) {
+  padding: 1.5rem;
+  background: conic-gradient(#2c78fd, #7343fe, #fe5292, #ff9a46, #fe5292, #7343fe, #2c78fd);
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  filter: blur(1.25rem);
+  opacity: 0.6;
 }
 /* Hors de la coque, le cadre de la coque : la page qui arrive a déjà sa forme, le H sa place. */
 [data-slot="family-loader-root"] > [data-frame] {
@@ -877,8 +939,8 @@
   content: var(--hgdc-org-initials, "");
 }
 
-/* Calque de la zone de contenu (`AppShell`) : opaque, au-dessus de l'ancienne page, sous le H du
-   document. Mêmes conditions et même rythme que le H : ils apparaissent et s'effacent ensemble. */
+/* Calque de la zone de contenu (`AppShell`) pendant le départ vers un autre module : opaque,
+   au-dessus de la page, sous la lueur du document. Même rythme que la lueur. */
 [data-slot="app-shell-loading"] {
   opacity: 0;
   visibility: hidden;
@@ -886,8 +948,7 @@
     opacity 120ms var(--ease-out) 80ms,
     visibility 0s linear 200ms;
 }
-[data-slot="app-shell"][data-loading] [data-slot="app-shell-loading"],
-[data-slot="app-shell"]:not([data-hydrated]):has([data-slot="page-pending"]) [data-slot="app-shell-loading"] {
+[data-slot="app-shell"][data-loading] [data-slot="app-shell-loading"] {
   opacity: 1;
   visibility: visible;
   transition:
@@ -895,6 +956,52 @@
     visibility 0s;
 }
 
+/* Barre de progression d'une navigation dans le module (ADR 0025) : 2 px sous la barre du haut,
+   l'ancienne page reste lisible. Un segment qui court de gauche à droite, `transform` seul.
+   Mouvement réduit : la barre entière, immobile, en demi-teinte. */
+[data-slot="app-shell-progress"] {
+  position: absolute;
+  inset-inline: 0;
+  bottom: -1px;
+  height: 2px;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms var(--ease-out);
+}
+[data-slot="app-shell-progress"]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 40%;
+  background: var(--primary);
+  transform: translateX(-100%);
+}
+[data-slot="app-shell"][data-navigating] [data-slot="app-shell-progress"] {
+  opacity: 1;
+  transition-duration: 100ms;
+}
+[data-slot="app-shell"][data-navigating] [data-slot="app-shell-progress"]::before {
+  animation: hgdc-progress 1.1s var(--ease-in-out) infinite;
+}
+@keyframes hgdc-progress {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="app-shell"][data-navigating] [data-slot="app-shell-progress"]::before {
+    animation: none;
+    width: 100%;
+    transform: none;
+    opacity: 0.5;
+  }
+}
+
 /* 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 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
@@ -925,9 +1032,8 @@
   }
 }
 :root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])),
-:root:has([data-slot="app-shell"][data-loading]),
-:root:has([data-slot="app-shell"]:not([data-hydrated]) [data-slot="page-pending"]) {
-  & [data-slot="family-loader-root"] > [data-stage] {
+:root:has([data-slot="app-shell"][data-loading]) {
+  & [data-slot="family-loader-root"] > [data-glow] {
     view-transition-name: hgdc-loader;
   }
 }