@hgdc/ui 0.2.1 → 0.4.0

package/dist/time-chart.d.ts

@@ -0,0 +1,40 @@
+export type TimeSeries = {
+    /** Identifiant stable : la couleur suit la série, jamais son rang dans un filtre. */
+    key: string;
+    label: string;
+    /** Une valeur par horodatage de `timestamps` ; `null` : pas de mesure (la ligne s'interrompt). */
+    values: Array<number | null>;
+};
+/** Six teintes de la DA (`--chart-1` à `--chart-6`), dans l'ordre, jamais recyclées. */
+export declare const CHART_COLORS: ReadonlyArray<string>;
+/**
+ * Un maximum « rond » pour l'axe des valeurs, et ses graduations : 0, 25, 50, 75, 100 plutôt que
+ * 0, 23,7, 47,4. `ticks` est le nombre d'intervalles visé.
+ */
+export declare function niceScale(max: number, ticks?: number): {
+    max: number;
+    step: number;
+};
+/**
+ * Série temporelle en SVG, sans bibliothèque : lignes (aire sous la courbe pour une série seule)
+ * ou barres empilées. Le SVG s'étire à la largeur de son conteneur ; les traits gardent 2 px
+ * (`non-scaling-stroke`) et les textes restent en HTML, nets à toute taille.
+ *
+ * Survol ou flèches du clavier : un repère vertical et une infobulle avec chaque valeur. Les
+ * lecteurs d'écran ont un tableau des données. Légende dès deux séries.
+ */
+export declare function TimeChart({ timestamps, series, kind, height, compact, label, formatValue, formatTime, emptyLabel, className, }: {
+    timestamps: Array<number>;
+    series: Array<TimeSeries>;
+    kind?: "line" | "bar";
+    /** Hauteur de la zone de tracé, en pixels. */
+    height?: number;
+    /** Sans axes, grille ni légende : la courbe seule, sous un `StatTile`. */
+    compact?: boolean;
+    /** Ce que montre le graphique, pour les lecteurs d'écran : « Envois par jour ». */
+    label: string;
+    formatValue?: (value: number) => string;
+    formatTime?: (time: number) => string;
+    emptyLabel?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/time-chart.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { areaPath, linePath } from "./chart-path.js";
+import { cn } from "./cn.js";
+/** Six teintes de la DA (`--chart-1` à `--chart-6`), dans l'ordre, jamais recyclées. */
+export const CHART_COLORS = [
+    "var(--chart-1)",
+    "var(--chart-2)",
+    "var(--chart-3)",
+    "var(--chart-4)",
+    "var(--chart-5)",
+    "var(--chart-6)",
+];
+const number = new Intl.NumberFormat("fr-CH");
+const dayMonth = new Intl.DateTimeFormat("fr-CH", { day: "numeric", month: "short" });
+/**
+ * Un maximum « rond » pour l'axe des valeurs, et ses graduations : 0, 25, 50, 75, 100 plutôt que
+ * 0, 23,7, 47,4. `ticks` est le nombre d'intervalles visé.
+ */
+export function niceScale(max, ticks = 4) {
+    if (!(max > 0))
+        return { max: 1, step: 0.25 };
+    const raw = max / ticks;
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    const residual = raw / magnitude;
+    const nice = residual <= 1 ? 1 : residual <= 2 ? 2 : residual <= 2.5 ? 2.5 : residual <= 5 ? 5 : 10;
+    const step = nice * magnitude;
+    return { max: Math.ceil(max / step) * step, step };
+}
+/**
+ * Série temporelle en SVG, sans bibliothèque : lignes (aire sous la courbe pour une série seule)
+ * ou barres empilées. Le SVG s'étire à la largeur de son conteneur ; les traits gardent 2 px
+ * (`non-scaling-stroke`) et les textes restent en HTML, nets à toute taille.
+ *
+ * Survol ou flèches du clavier : un repère vertical et une infobulle avec chaque valeur. Les
+ * lecteurs d'écran ont un tableau des données. Légende dès deux séries.
+ */
+export function TimeChart({ timestamps, series, kind = "line", height = 200, compact = false, label, formatValue = (v) => number.format(v), formatTime = (t) => dayMonth.format(t), emptyLabel = "Aucune donnée sur cette période.", className, }) {
+    const [active, setActive] = useState(null);
+    const n = timestamps.length;
+    const hasData = n > 0 && series.some((s) => s.values.some((v) => v !== null));
+    if (!hasData)
+        return (_jsx("div", { "data-slot": "time-chart", "data-state": "empty", style: { height }, className: cn("grid place-items-center rounded-2xl bg-foreground/[0.03] text-sm text-muted-foreground", className), children: emptyLabel }));
+    const totals = timestamps.map((_, i) => kind === "bar"
+        ? series.reduce((sum, s) => sum + (s.values[i] ?? 0), 0)
+        : Math.max(0, ...series.map((s) => s.values[i] ?? 0)));
+    const scale = niceScale(Math.max(0, ...totals));
+    const ticks = Array.from({ length: Math.round(scale.max / scale.step) + 1 }, (_, i) => i * scale.step);
+    const color = (index) => CHART_COLORS[index % CHART_COLORS.length] ?? "currentColor";
+    const indexFromPointer = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const ratio = (event.clientX - rect.left) / rect.width;
+        return Math.min(n - 1, Math.max(0, Math.floor(ratio * n)));
+    };
+    const onKeyDown = (event) => {
+        const moves = { ArrowLeft: -1, ArrowRight: 1, Home: -n, End: n };
+        if (event.key === "Escape")
+            return setActive(null);
+        const move = moves[event.key];
+        if (move === undefined)
+            return;
+        event.preventDefault();
+        setActive((current) => Math.min(n - 1, Math.max(0, (current ?? (move > 0 ? -1 : n)) + move)));
+    };
+    const activeTime = active !== null ? timestamps[active] : undefined;
+    const describe = (i) => {
+        const t = timestamps[i];
+        const values = series
+            .map((s) => `${s.label} ${s.values[i] == null ? "pas de mesure" : formatValue(s.values[i] ?? 0)}`)
+            .join(", ");
+        return t === undefined ? values : `${formatTime(t)} : ${values}`;
+    };
+    const xLabels = compact ? [] : [0, Math.floor((n - 1) / 2), n - 1].filter((v, i, a) => a.indexOf(v) === i);
+    return (_jsxs("figure", { "data-slot": "time-chart", className: cn("grid gap-3", className), children: [!compact && series.length > 1 ? (_jsx("figcaption", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground", children: series.map((s, i) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 rounded-[3px]", style: { background: color(i) } }), s.label] }, s.key))) })) : null, _jsxs("div", { className: cn("grid", !compact && "grid-cols-[auto_minmax(0,1fr)] gap-x-2"), children: [!compact ? (_jsx("div", { "aria-hidden": true, className: "relative w-10 text-right text-[11px] text-muted-foreground tabular-nums", style: { height }, children: ticks.map((t) => (_jsx("span", { className: "absolute right-0 -translate-y-1/2", style: { top: `${100 - (t / scale.max) * 100}%` }, children: formatValue(t) }, t))) })) : null, _jsxs("div", { className: "grid gap-1.5", children: [_jsxs("div", { 
+                                // Un curseur sur le temps : les flèches le déplacent d'un point, et chaque position se
+                                // lit en entier (date et valeurs).
+                                role: "slider", tabIndex: 0, "aria-label": label, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": n - 1, "aria-valuenow": active ?? n - 1, "aria-valuetext": describe(active ?? n - 1), onPointerMove: (event) => setActive(indexFromPointer(event)), onPointerLeave: () => setActive(null), onKeyDown: onKeyDown, onBlur: () => setActive(null), className: "relative rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50", style: { height }, children: [_jsxs("svg", { viewBox: `0 0 ${n} 100`, preserveAspectRatio: "none", "aria-hidden": true, className: "absolute inset-0 size-full overflow-visible", children: [!compact
+                                                ? ticks.map((t) => (_jsx("line", { x1: 0, x2: n, y1: 100 - (t / scale.max) * 100, y2: 100 - (t / scale.max) * 100, vectorEffect: "non-scaling-stroke", className: t === 0 ? "stroke-foreground/15" : "stroke-foreground/[0.06]", strokeWidth: 1 }, t)))
+                                                : null, kind === "bar"
+                                                ? timestamps.map((_, i) => {
+                                                    let base = 100;
+                                                    return series.map((s, si) => {
+                                                        const v = s.values[i] ?? 0;
+                                                        const h = (v / scale.max) * 100;
+                                                        base -= h;
+                                                        return v > 0 ? (_jsx("rect", { x: i + 0.15, y: base, width: 0.7, height: h, fill: color(si), opacity: active === null || active === i ? 1 : 0.55 }, `${s.key}-${i}`)) : null;
+                                                    });
+                                                })
+                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(s.values, scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsx("p", { className: "font-medium", children: formatTime(activeTime) }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: timestamps.map((t, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: formatTime(t) }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, t))) })] })] }));
+}

package/dist/timeline.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type ServiceStatus } from "./status.tsx";
+export type TimelineEntry = {
+    id: string;
+    /** « Identifié », « Correctif déployé », « Résolu ». */
+    title: ReactNode;
+    description?: ReactNode;
+    /** Instant de l'étape, affiché en relatif avec la date exacte au survol. */
+    time: number | Date;
+    /** Couleur du point ; sans statut, un point neutre. */
+    status?: ServiceStatus;
+};
+/**
+ * Historique d'un incident, d'un envoi, d'un déploiement : une étape par ligne, reliées par un
+ * fil. Le produit les passe dans l'ordre voulu (le plus récent d'abord, d'habitude).
+ */
+export declare function Timeline({ entries, now, className, }: {
+    entries: Array<TimelineEntry>;
+    now?: number;
+    className?: string;
+}): React.JSX.Element;

package/dist/timeline.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RelativeTime } from "./relative-time.js";
+import { StatusDot } from "./status.js";
+import { cn } from "./cn.js";
+/**
+ * Historique d'un incident, d'un envoi, d'un déploiement : une étape par ligne, reliées par un
+ * fil. Le produit les passe dans l'ordre voulu (le plus récent d'abord, d'habitude).
+ */
+export function Timeline({ entries, now, className, }) {
+    return (_jsx("ol", { "data-slot": "timeline", className: cn("grid", className), children: entries.map((entry, index) => (_jsxs("li", { className: "relative grid grid-cols-[1rem_minmax(0,1fr)] gap-x-3 pb-6 last:pb-0", children: [index < entries.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "absolute top-5 bottom-0 left-[calc(0.5rem-0.5px)] w-px bg-foreground/10" })) : null, _jsx("span", { className: "flex h-5 items-center justify-center", children: entry.status ? (_jsx(StatusDot, { status: entry.status, className: "size-2.5" })) : (_jsx("span", { "aria-hidden": true, className: "size-2.5 rounded-full bg-foreground/20" })) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("p", { className: "text-sm font-medium", children: entry.title }), _jsx("span", { className: "text-xs text-muted-foreground", children: _jsx(RelativeTime, { date: entry.time, ...(now !== undefined ? { now } : {}) }) })] }), entry.description ? _jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: entry.description }) : null] })] }, entry.id))) }));
+}

package/dist/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+/**
+ * Infobulle : le nom d'un bouton-icône ou d'un raccourci, pour la souris et le clavier. Jamais
+ * une information indispensable : elle n'existe pas au doigt (Base UI la coupe sur écran
+ * tactile). Le déclencheur porte toujours un `aria-label` qui dit la même chose. Pour une
+ * explication à lire, c'est un `Popover`.
+ *
+ * Un `TooltipProvider` autour de l'application : passée la première, les infobulles voisines
+ * s'ouvrent aussitôt, sans animation.
+ */
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): React.JSX.Element;
+declare const Tooltip: typeof TooltipPrimitive.Root;
+declare const TooltipTrigger: typeof TooltipPrimitive.Trigger;
+declare function TooltipContent({ className, side, sideOffset, align, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "side" | "sideOffset" | "align">): React.JSX.Element;
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent };

package/dist/tooltip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { FLOATING_COLLISION_AVOIDANCE, FLOATING_COLLISION_PADDING, FLOATING_MAX_WIDTH } from "./floating.js";
+import { cn } from "./cn.js";
+/**
+ * Infobulle : le nom d'un bouton-icône ou d'un raccourci, pour la souris et le clavier. Jamais
+ * une information indispensable : elle n'existe pas au doigt (Base UI la coupe sur écran
+ * tactile). Le déclencheur porte toujours un `aria-label` qui dit la même chose. Pour une
+ * explication à lire, c'est un `Popover`.
+ *
+ * Un `TooltipProvider` autour de l'application : passée la première, les infobulles voisines
+ * s'ouvrent aussitôt, sans animation.
+ */
+function TooltipProvider({ delay = 500, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { delay: delay, ...props });
+}
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipContent({ className, side = "top", sideOffset = 6, align = "center", children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { className: "isolate z-50", side: side, sideOffset: sideOffset, align: align, collisionPadding: FLOATING_COLLISION_PADDING, collisionAvoidance: FLOATING_COLLISION_AVOIDANCE, children: _jsx(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn(FLOATING_MAX_WIDTH, 
+                // Encre inversée : une étiquette courte, lisible sur n'importe quel fond. Elle flotte,
+                // elle a donc une ombre, douce.
+                "w-fit max-w-xs origin-(--transform-origin) rounded-xl bg-foreground px-2.5 py-1.5 text-xs font-medium text-balance text-background shadow-lg shadow-black/10", "transition-[scale,opacity] duration-(--duration-fast) ease-out data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-(--duration-instant) data-instant:transition-none data-starting-style:scale-[0.97] data-starting-style:opacity-0", "[&_kbd]:bg-background/15 [&_kbd]:text-background", className), ...props, children: children }) }) }));
+}
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent };

package/dist/uptime-bar.d.ts

@@ -0,0 +1,29 @@
+import { type ServiceStatus } from "./status.tsx";
+export type UptimeDay = {
+    /** Le jour, en millisecondes ou en `Date`. */
+    date: number | Date;
+    /** Le pire statut du jour. `unknown` : pas de mesure (service plus récent que la période). */
+    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 ». */
+    note?: 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.
+ *
+ * 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.
+ */
+export declare function UptimeBar({ days, label, summary, className, }: {
+    days: Array<UptimeDay>;
+    /** Nom de la liste pour les lecteurs d'écran. */
+    label?: string;
+    /** Au centre de la légende : « 99,95 % sur 90 jours ». */
+    summary?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/uptime-bar.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { SERVICE_STATUS_LABEL } from "./status.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "./cn.js";
+const BAR = {
+    operational: "bg-status-operational",
+    degraded: "bg-status-degraded",
+    outage: "bg-status-outage",
+    maintenance: "bg-status-maintenance",
+    unknown: "bg-foreground/10",
+};
+const day = new Intl.DateTimeFormat("fr-CH", { weekday: "short", day: "numeric", month: "short" });
+function describe(entry) {
+    return [day.format(entry.date), SERVICE_STATUS_LABEL[entry.status], entry.uptime, entry.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) {
+    if (count === 0)
+        return null;
+    switch (key) {
+        case "ArrowLeft":
+            return Math.max(0, current - 1);
+        case "ArrowRight":
+            return Math.min(count - 1, current + 1);
+        case "Home":
+            return 0;
+        case "End":
+            return count - 1;
+        default:
+            return 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.
+ *
+ * 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.
+ */
+export function UptimeBar({ days, label = "Disponibilité", summary, className, }) {
+    const [focused, setFocused] = useState(null);
+    const list = useRef(null);
+    const current = Math.min(focused ?? days.length - 1, days.length - 1);
+    function onKeyDown(event) {
+        const target = nextDay(event.key, current, days.length);
+        if (target === null)
+            return;
+        event.preventDefault();
+        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, className: "flex items-center justify-between gap-2 text-xs text-muted-foreground tabular-nums", children: [_jsx("span", { children: days.length > 0 ? `il y a ${days.length} jours` : null }), summary ? _jsx("span", { className: "text-foreground", children: summary }) : null, _jsx("span", { children: "Aujourd'hui" })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Interface de la H family : 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

@@ -18,6 +18,9 @@
 @source "./dist";
 
 @custom-variant dark (&:is(.dark *));
+/* Barre latérale réduite en rail : `data-sidebar="rail"` sur <html>, posé avant la première
+   peinture par `sidebarInitScript` (`@hgdc/ui/app-shell`). */
+@custom-variant rail (&:where([data-sidebar="rail"] *));
 
 /* Courbes et durées. Pas d'ease-in : il démarre lentement à l'instant où l'œil regarde. */
 @theme {
@@ -70,6 +73,21 @@
   --color-info: var(--info);
   --color-info-ink: var(--info-ink);
   --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-status-operational: var(--status-operational);
+  --color-status-operational-ink: var(--status-operational-ink);
+  --color-status-degraded: var(--status-degraded);
+  --color-status-degraded-ink: var(--status-degraded-ink);
+  --color-status-outage: var(--status-outage);
+  --color-status-outage-ink: var(--status-outage-ink);
+  --color-status-maintenance: var(--status-maintenance);
+  --color-status-maintenance-ink: var(--status-maintenance-ink);
+  --color-status-unknown: var(--status-unknown);
+  --color-status-unknown-ink: var(--status-unknown-ink);
   --color-inverse: var(--inverse);
   --color-inverse-foreground: var(--inverse-foreground);
   --color-inverse-muted: var(--inverse-muted);
@@ -117,7 +135,27 @@
   --shell-muted-foreground: oklch(0.45 0 0);
   --shell-hover: oklch(0 0 0 / 5%);
   --shell-active: oklch(0 0 0 / 8%);
-  --chart-1: oklch(0.62 0.19 256);
+  /* Séries de graphique, dans cet ordre, jamais recyclées : une 7e série se replie en « Autres ».
+     Validées (daltonisme, écart entre voisines) sur `surface` en clair et sur `card` en sombre.
+     En clair, 2 à 5 passent sous 3:1 : un graphique les accompagne d'une légende et de libellés. */
+  --chart-1: oklch(0.575 0.163 255.5);
+  --chart-2: oklch(0.671 0.175 40.6);
+  --chart-3: oklch(0.669 0.141 162.1);
+  --chart-4: oklch(0.764 0.161 75.1);
+  --chart-5: oklch(0.716 0.141 357.4);
+  --chart-6: oklch(0.527 0.197 283.4);
+  /* Disponibilité d'un service : toujours avec un libellé (`StatusBadge`), jamais la couleur seule.
+     Chaque jeton suit une couleur de la DA, donc les deux thèmes. */
+  --status-operational: var(--status-active);
+  --status-operational-ink: var(--status-active-ink);
+  --status-degraded: var(--status-paused);
+  --status-degraded-ink: var(--status-paused-ink);
+  --status-outage: var(--destructive);
+  --status-outage-ink: var(--destructive);
+  --status-maintenance: var(--info);
+  --status-maintenance-ink: var(--info-ink);
+  --status-unknown: var(--muted-foreground);
+  --status-unknown-ink: var(--muted-foreground);
   --status-active: oklch(0.55 0.15 156);
   --status-paused: oklch(0.62 0.14 75);
   --status-done: oklch(0.52 0.2 293);
@@ -160,7 +198,12 @@
   --shell-muted-foreground: oklch(0.708 0 0);
   --shell-hover: oklch(1 0 0 / 6%);
   --shell-active: oklch(1 0 0 / 12%);
-  --chart-1: oklch(0.68 0.16 256);
+  --chart-1: oklch(0.622 0.161 255.1);
+  --chart-2: oklch(0.622 0.173 40.1);
+  --chart-3: oklch(0.621 0.128 163.1);
+  --chart-4: oklch(0.67 0.143 73.2);
+  --chart-5: oklch(0.622 0.171 0.8);
+  --chart-6: oklch(0.67 0.145 286.8);
   --status-active: oklch(0.74 0.14 156);
   --status-paused: oklch(0.82 0.15 86);
   --status-done: oklch(0.68 0.17 293);