@hgdc/ui 0.22.0 → 0.23.0

package/dist/app-shell.d.ts

@@ -33,7 +33,7 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
     /** Lien du routeur : `render={<Link to="…" />}`. */
     render?: React.ReactElement;
 }): React.JSX.Element;
-export declare function AppShell({ product, organization, productRail, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, navigating, mainClassName, }: {
+export declare function AppShell({ product, organization, productRail, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, navigating, mainClassName, statusPage, }: {
     /** Le produit affiché (`"host"`) : sa marque en haut de la barre, « vous êtes ici » dans la barre des produits. */
     product: FamilyProduct;
     /** `OrgSwitcher` : en haut de la barre des produits, en haut du tiroir sur téléphone. */
@@ -81,4 +81,10 @@ export declare function AppShell({ product, organization, productRail, accountHr
      * une page étroite passe par `Page` (`@hgdc/ui/page-header`), pas par la coque.
      */
     mainClassName?: string;
+    /**
+     * 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.
+     */
+    statusPage?: string | false | undefined;
 }): React.JSX.Element;

package/dist/app-shell.js

@@ -17,6 +17,7 @@ import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
 import { ProductRailShownContext, ShellLeaveContext } from "./shell-placement.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "./cn.js";
+import { ServiceStatus, statusPageUrlFor } from "./service-status.js";
 // ── Rail : la barre latérale réduite aux icônes, mémorisée par navigateur ──────────────
 const RAIL_KEY = "sidebar";
 const RAIL_EVENT = "sidebarchange";
@@ -173,7 +174,7 @@ function useContentLoading({ navigating, pending }) {
     }, [active, visible]);
     return visible;
 }
-export function AppShell({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, navigating = false, mainClassName, }) {
+export function AppShell({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, navigating = false, mainClassName, statusPage, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     // Barre des produits élargie : la barre latérale se plie le temps du survol (ADR 0011).
     const [railPeek, setRailPeek] = useState(false);
@@ -211,5 +212,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 }), _jsx("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(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: _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] }) })] }) }) }) }));
 }

package/dist/resource-list.d.ts

@@ -15,7 +15,7 @@ export declare function ResourceItem({ icon, title, meta, badge, actions, href,
     /** Icône, favicon ou marque, dans une tuile de 40 px. */
     icon?: ReactNode;
     title: ReactNode;
-    /** Une ligne de contexte : adresse, date, auteur. Deux lignes au plus sur un écran étroit, puis tronquée. */
+    /** Contexte : adresse, date, auteur. Deux lignes au plus, puis tronquée. */
     meta?: ReactNode;
     badge?: ReactNode;
     /** Boutons-icônes ou menu « … ». */

package/dist/resource-list.js

@@ -17,7 +17,7 @@ export function ResourceList({ className, surface = true, ...props }) {
  */
 export function ResourceItem({ icon, title, meta, badge, actions, href, render, className, }) {
     const linked = href !== undefined || render !== undefined;
-    return (_jsxs("li", { "data-slot": "resource-item", className: cn("relative flex min-h-16 items-center gap-3 px-4 py-3 transition-colors duration-(--duration-fast) ease-out not-first:border-t not-first:border-foreground/5 sm:gap-4 sm:px-5", linked && "hover:bg-foreground/[0.03] has-focus-visible:bg-foreground/[0.03]", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-10 shrink-0 place-items-center overflow-hidden rounded-xl bg-background text-muted-foreground dark:bg-muted [&_svg:not([class*='size-'])]:size-5", children: icon })) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2 sm:gap-x-4", children: [_jsxs("div", { className: "min-w-0 flex-[1_1_12rem]", children: [_jsx("p", { className: "truncate text-sm font-medium", children: linked ? (_jsx(ResourceLink, { href: href, render: render, children: title })) : (title) }), meta ? _jsx("p", { className: "mt-0.5 line-clamp-2 text-xs break-words text-muted-foreground", children: meta }) : null] }), badge || actions ? (_jsxs("div", { "data-slot": "resource-item-trailing", className: "flex max-w-full shrink-0 flex-wrap items-center gap-x-3 gap-y-2 sm:gap-x-4", children: [badge ? _jsx("div", { className: "shrink-0", children: badge }) : null, actions ? _jsx("div", { className: "relative z-1 flex shrink-0 items-center gap-1", children: actions }) : null] })) : null] })] }));
+    return (_jsxs("li", { "data-slot": "resource-item", className: cn("relative flex min-h-16 items-center gap-3 px-4 py-3 transition-colors duration-(--duration-fast) ease-out not-first:border-t not-first:border-foreground/5 sm:gap-4 sm:px-5", linked && "hover:bg-foreground/[0.03] has-focus-visible:bg-foreground/[0.03]", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-10 shrink-0 place-items-center overflow-hidden rounded-xl bg-background text-muted-foreground dark:bg-muted [&_svg:not([class*='size-'])]:size-5", children: icon })) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2 sm:gap-x-4", children: [_jsxs("div", { className: "min-w-0 flex-[1_1_12rem]", children: [_jsx("p", { className: "text-sm font-medium break-words", children: linked ? (_jsx(ResourceLink, { href: href, render: render, children: title })) : (title) }), meta ? _jsx("p", { className: "mt-0.5 line-clamp-2 text-xs break-words text-muted-foreground", children: meta }) : null] }), badge || actions ? (_jsxs("div", { "data-slot": "resource-item-trailing", className: "flex min-w-0 max-w-full flex-wrap items-center gap-x-3 gap-y-2 sm:gap-x-4", children: [badge ? _jsx("div", { className: "max-w-full min-w-0", children: badge }) : null, actions ? (_jsx("div", { className: "relative z-1 flex max-w-full min-w-0 flex-wrap items-center gap-1 [&>:not([class*=size-])]:h-auto [&>:not([class*=size-])]:min-h-9 [&>:not([class*=size-])]:py-1.5 [&>:not([class*=size-])]:text-center [&>:not([class*=size-])]:whitespace-normal [&>*]:max-w-full", children: actions })) : null] })) : null] })] }));
 }
 function ResourceLink({ href, render, children, }) {
     return useRender({

package/dist/service-status.d.ts

@@ -0,0 +1,54 @@
+import type { FamilyProduct } from "./family-svg.ts";
+import { type ServiceStatus } from "./status.tsx";
+/**
+ * Bandeau d'état d'un produit (ADR 0018) : lit `summary.json` de sa page de statut (format
+ * Statuspage, CORS ouvert) depuis le navigateur, après le premier rendu, puis toutes les
+ * 2 minutes quand l'onglet est visible. Il ne retarde jamais le produit, et une lecture qui
+ * échoue n'affiche rien : jamais de fausse alerte. Pas de liseré : le point et les mots portent l'état.
+ */
+/** Page de statut d'un produit de la famille. Docs vit à `/documentation` (`/docs` sert l'aide de Status). */
+export declare function statusPageUrlFor(product: FamilyProduct): string;
+export type ServiceEvent = {
+    id: string;
+    kind: "incident" | "maintenance" | "upcoming";
+    status: ServiceStatus;
+    title: string;
+    /** « Cause identifiée · mis à jour à 14:15 », « mardi 21 octobre, de 22:00 à 23:30 ». */
+    detail: string;
+    href: string;
+    /** Change à chaque mise à jour : un bandeau fermé revient avec la suivante. */
+    version: string;
+};
+/** Une maintenance annoncée s'affiche 24 h avant son début. */
+export declare const UPCOMING_NOTICE_MS: number;
+/**
+ * Lien d'un événement, lu dans `summary.json` : jamais rendu tel quel. Seule une adresse `https:`
+ * de la même origine que la page de statut est gardée ; sinon, la page elle-même.
+ */
+export declare function safeEventHref(candidate: unknown, pageUrl: string): string;
+/**
+ * Événements à montrer, d'après un `summary.json` : incidents ouverts, maintenances en cours,
+ * maintenances qui commencent dans les 24 h. Pannes d'abord. Les liens restent sur `pageUrl` (`safeEventHref`) :
+ * l'adresse annoncée par le fichier lui-même n'est jamais crue. Tout champ manquant ou d'une autre
+ * forme écarte l'événement, jamais le bandeau entier.
+ */
+export declare function eventsFromSummary(summary: unknown, now: number, pageUrl: string): ServiceEvent[];
+/**
+ * Événements en cours d'une page de statut, lus après le premier rendu puis toutes les
+ * 2 minutes, onglet visible. `pageUrl` nul : rien n'est lu. Une lecture ratée vide la liste.
+ */
+export declare function useServiceStatus(pageUrl: string | null): {
+    events: ServiceEvent[];
+    dismiss: (event: ServiceEvent) => void;
+};
+/** Une ligne : point de couleur, nature et titre de l'événement, lien vers la page, fermeture. */
+export declare function ServiceStatusBanner({ event, onDismiss, className, }: {
+    event: ServiceEvent;
+    onDismiss?: () => void;
+    className?: string;
+}): React.JSX.Element;
+/** Bandeaux d'un produit, posés par `AppShell` en tête du contenu. Rien tant que tout va bien. */
+export declare function ServiceStatus({ pageUrl, className, }: {
+    pageUrl: string | null;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/service-status.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useCallback, useEffect, useState } from "react";
+import { cn } from "./cn.js";
+import { StatusDot } from "./status.js";
+/**
+ * Bandeau d'état d'un produit (ADR 0018) : lit `summary.json` de sa page de statut (format
+ * Statuspage, CORS ouvert) depuis le navigateur, après le premier rendu, puis toutes les
+ * 2 minutes quand l'onglet est visible. Il ne retarde jamais le produit, et une lecture qui
+ * échoue n'affiche rien : jamais de fausse alerte. Pas de liseré : le point et les mots portent l'état.
+ */
+/** Page de statut d'un produit de la famille. Docs vit à `/documentation` (`/docs` sert l'aide de Status). */
+export function statusPageUrlFor(product) {
+    return `https://status.hgdc.ch/${product === "docs" ? "documentation" : product}`;
+}
+/** Une maintenance annoncée s'affiche 24 h avant son début. */
+export const UPCOMING_NOTICE_MS = 24 * 3_600_000;
+const STATUS_WORDS = {
+    investigating: "Analyse en cours",
+    identified: "Cause identifiée",
+    monitoring: "Sous surveillance",
+    in_progress: "En cours",
+    verifying: "Vérification",
+};
+const time = new Intl.DateTimeFormat("fr-CH", { timeZone: "Europe/Zurich", hour: "2-digit", minute: "2-digit" });
+const dayMonth = new Intl.DateTimeFormat("fr-CH", {
+    timeZone: "Europe/Zurich",
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+});
+const text = (v) => (typeof v === "string" ? v : "");
+/**
+ * Lien d'un événement, lu dans `summary.json` : jamais rendu tel quel. Seule une adresse `https:`
+ * de la même origine que la page de statut est gardée ; sinon, la page elle-même.
+ */
+export function safeEventHref(candidate, pageUrl) {
+    try {
+        const page = new URL(pageUrl);
+        const url = new URL(text(candidate), page);
+        if (url.protocol === "https:" && url.origin === page.origin)
+            return url.href;
+    }
+    catch {
+        // Adresse illisible : la page.
+    }
+    return pageUrl;
+}
+const instant = (v) => (typeof v === "string" ? Date.parse(v) : Number.NaN);
+function incidentTone(impact) {
+    return impact === "critical" ? "outage" : "degraded";
+}
+/**
+ * Événements à montrer, d'après un `summary.json` : incidents ouverts, maintenances en cours,
+ * maintenances qui commencent dans les 24 h. Pannes d'abord. Les liens restent sur `pageUrl` (`safeEventHref`) :
+ * l'adresse annoncée par le fichier lui-même n'est jamais crue. Tout champ manquant ou d'une autre
+ * forme écarte l'événement, jamais le bandeau entier.
+ */
+export function eventsFromSummary(summary, now, pageUrl) {
+    if (!summary || typeof summary !== "object")
+        return [];
+    const root = summary;
+    const out = [];
+    const list = (v) => (Array.isArray(v) ? v : []);
+    for (const incident of list(root.incidents)) {
+        const id = text(incident.id);
+        const status = text(incident.status);
+        if (!id || !text(incident.name) || status === "resolved" || status === "postmortem")
+            continue;
+        const updatedAt = instant(incident.updated_at);
+        out.push({
+            id,
+            kind: "incident",
+            status: incidentTone(text(incident.impact)),
+            title: text(incident.name),
+            detail: [STATUS_WORDS[status], Number.isNaN(updatedAt) ? null : `mis à jour à ${time.format(updatedAt)}`]
+                .filter(Boolean)
+                .join(" · "),
+            href: safeEventHref(incident.shortlink, pageUrl),
+            version: `${status}:${text(incident.updated_at)}`,
+        });
+    }
+    for (const m of list(root.scheduled_maintenances)) {
+        const id = text(m.id);
+        const status = text(m.status);
+        const from = instant(m.scheduled_for);
+        const until = instant(m.scheduled_until);
+        if (!id || !text(m.name) || Number.isNaN(from) || Number.isNaN(until))
+            continue;
+        const inProgress = status === "in_progress" || status === "verifying";
+        const upcoming = status === "scheduled" && from > now && from - now <= UPCOMING_NOTICE_MS;
+        if (!inProgress && !upcoming)
+            continue;
+        const sameDay = dayMonth.format(from) === dayMonth.format(until);
+        out.push({
+            id,
+            kind: inProgress ? "maintenance" : "upcoming",
+            status: "maintenance",
+            title: text(m.name),
+            detail: inProgress
+                ? `jusqu'à ${time.format(until)}`
+                : sameDay
+                    ? `${dayMonth.format(from)}, de ${time.format(from)} à ${time.format(until)}`
+                    : `du ${dayMonth.format(from)}, ${time.format(from)}, au ${dayMonth.format(until)}, ${time.format(until)}`,
+            href: safeEventHref(m.shortlink, pageUrl),
+            version: `${status}:${text(m.updated_at)}`,
+        });
+    }
+    const order = { incident: 0, maintenance: 1, upcoming: 2 };
+    return out.sort((a, b) => order[a.kind] - order[b.kind]);
+}
+const REFRESH_MS = 2 * 60_000;
+const DISMISSED = "hgdc-service-status:";
+function dismissedKey(event) {
+    return `${DISMISSED}${event.id}:${event.version}`;
+}
+function isDismissed(event) {
+    try {
+        return window.sessionStorage.getItem(dismissedKey(event)) === "1";
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Événements en cours d'une page de statut, lus après le premier rendu puis toutes les
+ * 2 minutes, onglet visible. `pageUrl` nul : rien n'est lu. Une lecture ratée vide la liste.
+ */
+export function useServiceStatus(pageUrl) {
+    const [events, setEvents] = useState([]);
+    useEffect(() => {
+        if (!pageUrl)
+            return;
+        let cancelled = false;
+        const controller = new AbortController();
+        const read = async () => {
+            try {
+                const response = await fetch(`${pageUrl}/api/v2/summary.json`, {
+                    signal: controller.signal,
+                    headers: { accept: "application/json" },
+                });
+                if (!response.ok)
+                    throw new Error(String(response.status));
+                const next = eventsFromSummary(await response.json(), Date.now(), pageUrl);
+                if (!cancelled)
+                    setEvents(next);
+            }
+            catch {
+                if (!cancelled)
+                    setEvents([]);
+            }
+        };
+        void read();
+        const id = window.setInterval(() => {
+            if (document.visibilityState === "visible")
+                void read();
+        }, REFRESH_MS);
+        return () => {
+            cancelled = true;
+            controller.abort();
+            window.clearInterval(id);
+        };
+    }, [pageUrl]);
+    const dismiss = useCallback((event) => {
+        try {
+            window.sessionStorage.setItem(dismissedKey(event), "1");
+        }
+        catch {
+            // Stockage indisponible (navigation privée) : fermé pour cette page seulement.
+        }
+        setEvents((list) => list.filter((e) => e.id !== event.id));
+    }, []);
+    return { events: events.filter((e) => !isDismissed(e)), dismiss };
+}
+const LEAD = {
+    incident: "Incident en cours",
+    maintenance: "Maintenance en cours",
+    upcoming: "Maintenance prévue",
+};
+const TINT = {
+    outage: "bg-status-outage/8",
+    degraded: "bg-status-degraded/12",
+    maintenance: "bg-status-maintenance/10",
+    operational: "bg-status-operational/10",
+    unknown: "bg-foreground/5",
+};
+/** Une ligne : point de couleur, nature et titre de l'événement, lien vers la page, fermeture. */
+export function ServiceStatusBanner({ event, onDismiss, className, }) {
+    return (_jsxs("div", { role: "status", "data-slot": "service-status", className: cn("flex items-start gap-3 rounded-2xl px-4 py-2.5 text-sm sm:items-center", TINT[event.status], className), children: [_jsx(StatusDot, { status: event.status, live: event.kind !== "upcoming", className: "mt-1.5 size-2 shrink-0 sm:mt-0" }), _jsxs("p", { className: "min-w-0 flex-1 text-pretty", children: [_jsx("span", { className: "font-medium", children: LEAD[event.kind] }), _jsx("span", { className: "text-muted-foreground", children: " \u00B7 " }), event.title, event.detail ? (_jsx("span", { className: "block text-xs text-muted-foreground sm:ml-2 sm:inline", children: event.detail })) : null] }), _jsxs("a", { href: event.href, target: "_blank", rel: "noopener", className: "inline-flex shrink-0 items-center gap-1 rounded-lg font-medium underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "max-sm:sr-only", children: "\u00C9tat du service" }), _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, className: "size-4", "aria-hidden": true })] }), onDismiss ? (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Masquer jusqu'\u00E0 la prochaine mise \u00E0 jour", className: "-my-1 -mr-1.5 grid size-7 shrink-0 place-items-center rounded-lg text-muted-foreground outline-none hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, className: "size-4", "aria-hidden": true }) })) : null] }));
+}
+/** Bandeaux d'un produit, posés par `AppShell` en tête du contenu. Rien tant que tout va bien. */
+export function ServiceStatus({ pageUrl, className, }) {
+    const { events, dismiss } = useServiceStatus(pageUrl);
+    if (!events.length)
+        return null;
+    return (_jsx("div", { "data-slot": "service-status-list", className: cn("grid gap-2", className), children: events.map((event) => (_jsx(ServiceStatusBanner, { event: event, onDismiss: () => dismiss(event) }, event.id))) }));
+}

package/package.json

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