@hgdc/ui 0.26.0 → 0.27.0

package/README.md

@@ -94,7 +94,7 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 | `stat`           | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`                                                                                                                                                                                                                                                                                                                                  |
 | `time-chart`     | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" lastIncomplete />` (dernier point en pointillés : la journée n'est pas finie)                                                                                                                                                                                                                                                     |
 | `status`         | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu) ; hors services, `<StatusBadge tone="success" label="Remis" />` (`neutral`, `success`, `warning`, `danger`, `info`, `pending`)                                                                                                                                                                                                                                 |
-| `uptime-bar`     | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />`                                                                                                                                                                                                                                                                                                                                                |
+| `uptime-bar`     | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %", detail: { levels, incidents } }]} summary="99,95 % sur 90 jours" />`                                                                                                                                                                                                                                                                                                                 |
 | `timeline`       | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />`                                                                                                                                                                                                                                                                                                                                                                         |
 | `relative-time`  | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol)                                                                                                                                                                                                                                                                                                                                                            |
 | `copy-button`    | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`, `<CopyButton value={all} label="Tout copier" showLabel />`                                                                                                                                                                                                                                                                                                                 |

package/dist/account-menu.d.ts

@@ -30,7 +30,7 @@ export type AccountUser = {
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */
-export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant, }: {
+export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, statusPage, children, variant, }: {
     user: AccountUser;
     onProfile?: () => void;
     onSecurity?: () => void;
@@ -43,6 +43,12 @@ export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts,
     product?: string;
     /** Adresse d'Account dans la liste par défaut (un Account local en développement). */
     accountHref?: string;
+    /**
+     * Page de statut du produit, entrée « État du service » : celle d'`AppShell` par défaut (son
+     * `statusPage`, sinon `https://status.hgdc.ch/<produit>`), `false` pour la retirer. Hors de la
+     * coque, sans adresse donnée, pas d'entrée.
+     */
+    statusPage?: string | false;
     /** Entrées propres au produit (« Administration »), après le profil. */
     children?: ReactNode;
     variant?: "row" | "avatar";

package/dist/account-menu.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
 import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
 import KeyboardIcon from "@hugeicons/core-free-icons/KeyboardIcon";
 import Logout01Icon from "@hugeicons/core-free-icons/Logout01Icon";
@@ -13,7 +14,7 @@ import { initials } from "./initials.js";
 import { MENU_LINK_ITEM } from "./org-switcher.js";
 import { ProductBadge } from "./product-badge.js";
 import { productMenuEntries } from "./products.js";
-import { useLeaveOnClick, useProductRailShown } from "./shell-placement.js";
+import { useLeaveOnClick, useProductRailShown, useStatusPage } from "./shell-placement.js";
 import { ThemeSwitch } from "./theme-switch.js";
 /**
  * Le menu du compte, en bas de la barre latérale : profil, sécurité, choix du thème en trois icônes, raccourcis, autres
@@ -26,11 +27,13 @@ import { ThemeSwitch } from "./theme-switch.js";
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */
-export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
+export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, statusPage, children, variant = "row", }) {
     const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
     const railShown = useProductRailShown();
+    const shellStatusPage = useStatusPage();
+    const statusPageUrl = statusPage === false ? null : (statusPage ?? shellStatusPage);
     const leaveOnClick = useLeaveOnClick();
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsx(ThemeSwitch, {}), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsx(ThemeSwitch, {}), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, statusPageUrl ? (_jsxs(MenuPrimitive.LinkItem, { href: statusPageUrl, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: Activity01Icon, "aria-hidden": true }), "\u00C9tat du service"] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }
 function ProductMenuIcon({ product }) {
     if (product.badge)

package/dist/app-shell.d.ts

@@ -84,7 +84,7 @@ export declare function AppShell({ product, organization, productRail, accountHr
     /**
      * Page de statut du produit, dont le bandeau d'état se pose en tête du contenu (ADR 0018) :
      * `https://status.hgdc.ch/<produit>` par défaut, une autre adresse (prévisualisation sur une page
-     * de test), ou `false` pour ne rien lire.
+     * de test), ou `false` pour ne rien lire. Le menu du compte en tire son entrée « État du service ».
      */
     statusPage?: string | false | undefined;
 }): React.JSX.Element;

package/dist/app-shell.js

@@ -14,7 +14,7 @@ import { ProductBadge } from "./product-badge.js";
 import { ProductRail } from "./product-rail.js";
 import { useProductSwitch } from "./product-switch.js";
 import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
-import { ProductRailShownContext, ShellLeaveContext } from "./shell-placement.js";
+import { ProductRailShownContext, ShellLeaveContext, StatusPageContext } from "./shell-placement.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "./cn.js";
 import { ServiceStatus, statusPageUrlFor } from "./service-status.js";
@@ -201,6 +201,7 @@ export function AppShell({ product, organization, productRail = true, accountHre
         window.addEventListener("pageshow", onPageShow);
         return () => window.removeEventListener("pageshow", onPageShow);
     }, []);
+    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.
@@ -212,5 +213,5 @@ export function AppShell({ product, organization, productRail = true, accountHre
         if (loading && contentRef.current)
             contentRef.current.scrollTop = 0;
     }, [loading]);
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsx(ProductRailShownContext, { value: productRail, children: _jsx(ShellLeaveContext, { value: leave, children: _jsxs("div", { "data-slot": "app-shell", "data-rail-peek": railPeek ? "" : undefined, "data-product-rail": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)]" : "lg:grid-cols-[auto_minmax(0,1fr)]"), children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), productRail ? (_jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref, onExpandedChange: setRailPeek })) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [_jsx(SidebarHead, { product: product }), !productRail && organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null, nav, sidebarFooter ? _jsx("div", { className: "grid gap-0.5 px-3 pt-1 pb-3", children: sidebarFooter }) : null] }), _jsx("div", { className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex 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] }), _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: statusPage === false ? null : (statusPage ?? statusPageUrlFor(product)), className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), hasRoot ? null : _jsx(FamilyLoaderHost, {}), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, nav, sidebarFooter ? (_jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)]", children: sidebarFooter })) : null] }) })] }) }) }) }));
+    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, className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)]" : "lg:grid-cols-[auto_minmax(0,1fr)]"), children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), productRail ? (_jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref, onExpandedChange: setRailPeek })) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [_jsx(SidebarHead, { product: product }), !productRail && organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null, nav, sidebarFooter ? _jsx("div", { className: "grid gap-0.5 px-3 pt-1 pb-3", children: sidebarFooter }) : null] }), _jsx("div", { className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex 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] }), _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)) })] })] }) }), hasRoot ? null : _jsx(FamilyLoaderHost, {}), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, nav, sidebarFooter ? (_jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)]", children: sidebarFooter })) : null] }) })] }) }) }) }) }));
 }

package/dist/shell-placement.d.ts

@@ -19,3 +19,10 @@ export declare function useProductRailShown(): boolean;
 export declare const ShellLeaveContext: React.Context<() => void>;
 /** `onClick` d'un lien vers un autre produit : clic simple seulement (pas Ctrl, Cmd, Maj, molette). */
 export declare function useLeaveOnClick(): (event: React.MouseEvent<HTMLAnchorElement>) => void;
+/**
+ * Page de statut du produit affiché, posée par `AppShell` (son `statusPage`, sinon
+ * `https://status.hgdc.ch/<produit>`) : le menu du compte en tire son entrée « État du service ».
+ * `null` hors de la coque ou quand la coque ne lit aucune page.
+ */
+export declare const StatusPageContext: React.Context<string | null>;
+export declare function useStatusPage(): string | null;

package/dist/shell-placement.js

@@ -31,3 +31,12 @@ export function useLeaveOnClick() {
         leave();
     };
 }
+/**
+ * Page de statut du produit affiché, posée par `AppShell` (son `statusPage`, sinon
+ * `https://status.hgdc.ch/<produit>`) : le menu du compte en tire son entrée « État du service ».
+ * `null` hors de la coque ou quand la coque ne lit aucune page.
+ */
+export const StatusPageContext = createContext(null);
+export function useStatusPage() {
+    return useContext(StatusPageContext);
+}

package/dist/uptime-bar.d.ts

@@ -6,15 +6,38 @@ export type UptimeDay = {
     status: ServiceStatus;
     /** Disponibilité du jour, déjà formatée : « 99,98 % ». */
     uptime?: string;
-    /** Ce qui s'est passé : « Panne de 12 min, base de données ». */
+    /** Ce qui s'est passé : « Panne de 12 min, base de données ». Ignoré quand `detail` est là. */
     note?: string;
+    /**
+     * Détail du jour, comme chez Statuspage : durée par niveau et incidents en liens. Le jour ouvre
+     * alors une bulle (survol, toucher, Entrée) dont les liens se suivent au clavier, au lieu de
+     * l'infobulle en texte.
+     */
+    detail?: UptimeDayDetail;
+};
+export type UptimeDayDetail = {
+    /** Temps passé à chaque niveau, du plus grave au moins grave : « Panne majeure », « 12 min ». */
+    levels: Array<{
+        status: ServiceStatus;
+        label: string;
+        duration: string;
+    }>;
+    /** Incidents du jour, vers leur page. */
+    incidents: Array<{
+        title: string;
+        href: string;
+    }>;
+    /** Phrase quand `levels` est vide : « Aucune panne ce jour-là » par défaut. */
+    empty?: string;
 };
 /** Le jour à atteindre pour une touche, ou `null` si la touche ne déplace pas. */
 export declare function nextDay(key: string, current: number, count: number): number | null;
 /**
  * Une barre par jour, du plus ancien au plus récent, comme les pages de statut de référence.
  * Chaque barre a sa couleur et, au survol, une infobulle en texte (jour, statut, disponibilité,
- * note). Les lecteurs d'écran lisent la liste des jours, dont chacun dit son statut en mots.
+ * note). Un jour qui porte un `detail` ouvre à la place une bulle (survol, toucher, Entrée) : durée
+ * par niveau et incidents du jour en liens. Les lecteurs d'écran lisent la liste des jours, dont
+ * chacun dit son statut en mots.
  *
  * Au clavier, la barre est un seul arrêt de tabulation (le dernier jour visité, aujourd'hui au
  * départ) ; les flèches, Début et Fin passent d'un jour à l'autre et ouvrent son infobulle.

package/dist/uptime-bar.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { SERVICE_STATUS_LABEL } from "./status.js";
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { SERVICE_STATUS_LABEL, StatusDot } from "./status.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "./cn.js";
+const NO_DOWNTIME = "Aucune panne ce jour-là";
 const BAR = {
     operational: "bg-status-operational",
     degraded: "bg-status-degraded",
@@ -10,11 +12,20 @@ const BAR = {
     maintenance: "bg-status-maintenance",
     unknown: "bg-foreground/10",
 };
+const DAY = "block w-full rounded-[3px] outline-none transition-opacity duration-(--duration-fast) ease-out hover:opacity-70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-popup-open:opacity-70";
 const day = new Intl.DateTimeFormat("fr-CH", { weekday: "short", day: "numeric", month: "short" });
+const longDay = new Intl.DateTimeFormat("fr-CH", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
 function describe(entry) {
-    return [day.format(entry.date), SERVICE_STATUS_LABEL[entry.status], entry.uptime, entry.note]
-        .filter(Boolean)
-        .join(" · ");
+    const detail = entry.detail;
+    const note = detail
+        ? [
+            ...detail.levels.map((level) => `${level.label} ${level.duration}`),
+            ...detail.incidents.map((incident) => incident.title),
+        ].join(" · ") ||
+            detail.empty ||
+            NO_DOWNTIME
+        : entry.note;
+    return [day.format(entry.date), SERVICE_STATUS_LABEL[entry.status], entry.uptime, note].filter(Boolean).join(" · ");
 }
 /** Le jour à atteindre pour une touche, ou `null` si la touche ne déplace pas. */
 export function nextDay(key, current, count) {
@@ -33,10 +44,16 @@ export function nextDay(key, current, count) {
             return null;
     }
 }
+/** Bulle d'un jour : date, disponibilité, durée par niveau (point et mots), incidents en liens. */
+function DayDetail({ entry, detail }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx(PopoverTitle, { className: "first-letter:uppercase", children: longDay.format(entry.date) }), entry.uptime ? _jsx("p", { className: "text-xs text-muted-foreground tabular-nums", children: entry.uptime }) : null] }), detail.levels.length ? (_jsx("ul", { className: "grid gap-1", children: detail.levels.map((level) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(StatusDot, { status: level.status }), _jsx("span", { className: "min-w-0 flex-1", children: level.label }), _jsx("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: level.duration })] }, level.label))) })) : (_jsx("p", { className: "text-muted-foreground", children: detail.empty ?? NO_DOWNTIME })), detail.incidents.length ? (_jsx("ul", { "aria-label": "Incidents du jour", className: "grid gap-1.5 border-t border-border pt-2", children: detail.incidents.map((incident) => (_jsx("li", { children: _jsx("a", { href: incident.href, className: "rounded-sm font-medium text-pretty underline decoration-muted-foreground/50 underline-offset-4 outline-none hover:decoration-foreground focus-visible:ring-2 focus-visible:ring-ring", children: incident.title }) }, incident.href))) })) : null] }));
+}
 /**
  * Une barre par jour, du plus ancien au plus récent, comme les pages de statut de référence.
  * Chaque barre a sa couleur et, au survol, une infobulle en texte (jour, statut, disponibilité,
- * note). Les lecteurs d'écran lisent la liste des jours, dont chacun dit son statut en mots.
+ * note). Un jour qui porte un `detail` ouvre à la place une bulle (survol, toucher, Entrée) : durée
+ * par niveau et incidents du jour en liens. Les lecteurs d'écran lisent la liste des jours, dont
+ * chacun dit son statut en mots.
  *
  * Au clavier, la barre est un seul arrêt de tabulation (le dernier jour visité, aujourd'hui au
  * départ) ; les flèches, Début et Fin passent d'un jour à l'autre et ouvrent son infobulle.
@@ -53,5 +70,16 @@ export function UptimeBar({ days, label = "Disponibilité", summary, className,
         setFocused(target);
         list.current?.querySelectorAll("[data-slot=uptime-day]")[target]?.focus();
     }
-    return (_jsxs("div", { "data-slot": "uptime-bar", className: cn("grid gap-2", className), children: [_jsx("ol", { ref: list, "aria-label": label, className: "flex h-8 items-stretch gap-[2px]", children: days.map((entry, index) => (_jsx("li", { className: "flex min-w-0 flex-1", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button" }), "data-slot": "uptime-day", tabIndex: index === current ? 0 : -1, onFocus: () => setFocused(index), onKeyDown: onKeyDown, className: cn("block w-full rounded-[3px] outline-none transition-opacity duration-(--duration-fast) ease-out hover:opacity-70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-popup-open:opacity-70", BAR[entry.status]), children: _jsx("span", { className: "sr-only", children: describe(entry) }) }), _jsx(TooltipContent, { children: describe(entry) })] }) }, new Date(entry.date).toISOString()))) }), _jsxs("div", { "aria-hidden": true, "data-slot": "uptime-legend", className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-muted-foreground tabular-nums", children: [_jsx("span", { className: "shrink-0", children: days.length > 0 ? `il y a ${days.length} jours` : null }), summary ? (_jsx("span", { className: "min-w-0 text-center text-pretty break-words text-foreground", children: summary })) : null, _jsx("span", { className: "shrink-0", children: "Aujourd'hui" })] })] }));
+    return (_jsxs("div", { "data-slot": "uptime-bar", className: cn("grid gap-2", className), children: [_jsx("ol", { ref: list, "aria-label": label, className: "flex h-8 items-stretch gap-[2px]", children: days.map((entry, index) => {
+                    const trigger = {
+                        render: _jsx("button", { type: "button" }),
+                        "data-slot": "uptime-day",
+                        tabIndex: index === current ? 0 : -1,
+                        onFocus: () => setFocused(index),
+                        onKeyDown,
+                        className: cn(DAY, BAR[entry.status]),
+                        children: _jsx("span", { className: "sr-only", children: describe(entry) }),
+                    };
+                    return (_jsx("li", { className: "flex min-w-0 flex-1", children: entry.detail ? (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, ...trigger }), _jsx(PopoverContent, { side: "top", className: "w-64 gap-3", "data-slot": "uptime-day-detail", children: _jsx(DayDetail, { entry: entry, detail: entry.detail }) })] })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { ...trigger }), _jsx(TooltipContent, { children: describe(entry) })] })) }, new Date(entry.date).toISOString()));
+                }) }), _jsxs("div", { "aria-hidden": true, "data-slot": "uptime-legend", className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-muted-foreground tabular-nums", children: [_jsx("span", { className: "shrink-0", children: days.length > 0 ? `il y a ${days.length} jours` : null }), summary ? (_jsx("span", { className: "min-w-0 text-center text-pretty break-words text-foreground", children: summary })) : null, _jsx("span", { className: "shrink-0", children: "Aujourd'hui" })] })] }));
 }

package/package.json

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