@hgdc/ui 0.3.0 → 0.5.0

package/dist/rank-bar.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "./cn.js";
+const number = new Intl.NumberFormat("fr-CH");
+function RankRow({ item, max, formatValue, }) {
+    const width = max > 0 ? Math.max(0, Math.min(1, item.value / max)) : 0;
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, "data-slot": "rank-bar-fill", className: "absolute inset-y-0 left-0 rounded-lg bg-foreground/[0.06] transition-[width] duration-(--duration-base) ease-out", style: { width: `${width * 100}%` } }), _jsxs("span", { className: "relative flex min-w-0 flex-1 items-center gap-2", children: [item.icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-4 shrink-0 place-items-center", children: item.icon })) : null, _jsx("span", { className: "min-w-0 truncate", children: item.label })] }), _jsx("span", { className: "relative shrink-0 font-medium tabular-nums", children: formatValue(item.value) })] }));
+    const row = "relative flex min-h-9 items-center gap-3 rounded-lg px-2.5 text-sm";
+    const link = useRender({
+        render: item.render,
+        enabled: item.render !== undefined,
+        props: {
+            className: cn(row, "outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/[0.04] focus-visible:ring-2 focus-visible:ring-ring/50"),
+            children: content,
+        },
+    });
+    return _jsx("li", { children: link ?? _jsx("div", { className: row, children: content }) });
+}
+/**
+ * Classement d'un tableau de bord : pages les plus vues, domaines qui envoient le plus, pays.
+ * Une ligne par élément, triée du plus grand au plus petit, sa barre proportionnelle au premier.
+ * Une liste ordonnée : le rang se lit sans la barre, et chaque valeur s'écrit.
+ */
+export function RankBar({ label, items, limit, formatValue = (v) => number.format(v), valueLabel, emptyLabel = "Rien à classer sur cette période.", className, }) {
+    const sorted = [...items].sort((a, b) => b.value - a.value);
+    const shown = limit === undefined ? sorted : sorted.slice(0, limit);
+    const max = shown[0]?.value ?? 0;
+    if (shown.length === 0)
+        return (_jsx("p", { "data-slot": "rank-bar", "data-state": "empty", className: cn("py-6 text-center text-sm text-muted-foreground", className), children: emptyLabel }));
+    return (_jsxs("div", { "data-slot": "rank-bar", className: cn("grid gap-1", className), children: [valueLabel ? (_jsx("p", { "aria-hidden": true, className: "flex justify-end px-2.5 text-xs text-muted-foreground", children: valueLabel })) : null, _jsx("ol", { "aria-label": label, className: "grid gap-1", children: shown.map((item) => (_jsx(RankRow, { item: item, max: max, formatValue: formatValue }, item.key))) })] }));
+}

package/dist/settings-section.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+/**
+ * Un bloc de réglages : titre, description, champs, et un pied avec son propre bouton
+ * Enregistrer. Chaque bloc s'enregistre seul : on ne perd pas la saisie d'un bloc en validant
+ * un autre, et l'erreur dit lequel a échoué. Repris de la page de réglages de Host.
+ *
+ * Avec `onSave`, le bloc est un formulaire : Entrée dans un champ enregistre, le bouton reste
+ * grisé tant que `dirty` est faux et tourne pendant `saving`. Sans `onSave`, `footer` reçoit
+ * les actions telles quelles (« Supprimer le projet » d'un bloc `tone="danger"`).
+ *
+ * ```tsx
+ * <SettingsSection
+ *   title="Nom de l'espace"
+ *   description="Visible par les membres et dans les e-mails d'invitation."
+ *   dirty={name !== initial}
+ *   saving={saving}
+ *   onSave={save}
+ * >
+ *   <Field><FieldLabel>Nom</FieldLabel><Input value={name} onChange={…} /></Field>
+ * </SettingsSection>
+ * ```
+ */
+export declare function SettingsSection({ title, description, children, footer, footerNote, tone, onSave, dirty, saving, saveLabel, className, }: {
+    title: string;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Actions du pied, à la place du bouton Enregistrer (ou avant lui avec `onSave`). */
+    footer?: ReactNode;
+    /** Texte discret à gauche du pied : « Appliqué au prochain déploiement. » */
+    footerNote?: ReactNode;
+    /** `danger` : la zone des actions irréversibles, cerclée de rouge. */
+    tone?: "default" | "danger";
+    /** Enregistre le bloc et affiche lui-même son erreur (toast, `FieldError`) : rien ne l'attrape ici. */
+    onSave?: () => void | Promise<void>;
+    /** Faux : rien n'a changé, le bouton reste grisé. */
+    dirty?: boolean;
+    saving?: boolean;
+    saveLabel?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/settings-section.js

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+/**
+ * Un bloc de réglages : titre, description, champs, et un pied avec son propre bouton
+ * Enregistrer. Chaque bloc s'enregistre seul : on ne perd pas la saisie d'un bloc en validant
+ * un autre, et l'erreur dit lequel a échoué. Repris de la page de réglages de Host.
+ *
+ * Avec `onSave`, le bloc est un formulaire : Entrée dans un champ enregistre, le bouton reste
+ * grisé tant que `dirty` est faux et tourne pendant `saving`. Sans `onSave`, `footer` reçoit
+ * les actions telles quelles (« Supprimer le projet » d'un bloc `tone="danger"`).
+ *
+ * ```tsx
+ * <SettingsSection
+ *   title="Nom de l'espace"
+ *   description="Visible par les membres et dans les e-mails d'invitation."
+ *   dirty={name !== initial}
+ *   saving={saving}
+ *   onSave={save}
+ * >
+ *   <Field><FieldLabel>Nom</FieldLabel><Input value={name} onChange={…} /></Field>
+ * </SettingsSection>
+ * ```
+ */
+export function SettingsSection({ title, description, children, footer, footerNote, tone = "default", onSave, dirty = true, saving = false, saveLabel = "Enregistrer", className, }) {
+    const titleId = useId();
+    const descriptionId = useId();
+    const hasFooter = Boolean(footer || footerNote || onSave);
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 p-5 sm:p-6", children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, className: "text-base font-semibold text-balance", children: title }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 max-w-prose text-sm text-pretty text-muted-foreground", children: description })) : null] }), children] }), hasFooter ? (_jsxs("div", { "data-slot": "settings-section-footer", className: "flex flex-wrap items-center justify-end gap-3 border-t border-border bg-muted/40 px-5 py-3 sm:px-6", children: [footerNote ? _jsx("p", { className: "mr-auto text-sm text-muted-foreground", children: footerNote }) : null, footer, onSave ? (_jsx(Button, { type: "submit", size: "sm", disabled: !dirty, isLoading: saving, children: saveLabel })) : null] })) : null] }));
+    const shared = {
+        "data-slot": "settings-section",
+        "data-tone": tone,
+        "aria-labelledby": titleId,
+        ...(description ? { "aria-describedby": descriptionId } : {}),
+        className: cn("overflow-hidden rounded-3xl surface", tone === "danger" && "ring-1 ring-destructive/30", className),
+    };
+    if (!onSave)
+        return _jsx("section", { ...shared, children: body });
+    const submit = (event) => {
+        event.preventDefault();
+        if (!dirty || saving)
+            return;
+        void onSave();
+    };
+    // Un `<form>` nommé par son titre a le rôle « form » : il apparaît dans les repères du lecteur d'écran.
+    return (_jsx("form", { ...shared, onSubmit: submit, children: body }));
+}

package/dist/sonner.d.ts

@@ -1,3 +1,22 @@
 import { type ToasterProps } from "sonner";
 declare function Toaster(props: ToasterProps): React.JSX.Element;
-export { Toaster };
+/**
+ * Retour d'une action réversible, avec « Annuler » pendant quelques secondes : on agit tout de
+ * suite (mise à jour optimiste), sans boîte de confirmation, et on laisse revenir en arrière.
+ * Une action qui ne se rattrape pas passe par `DestructiveDialog`.
+ *
+ * `onUndo` défait l'action. `onCommit`, s'il est donné, part quand le toast se ferme sans
+ * annulation (délai écoulé, fermé à la main) : pour une action différée, envoyée seulement
+ * une fois le délai passé. Rend l'identifiant du toast (`toast.dismiss(id)`).
+ */
+declare function toastUndo(message: React.ReactNode, { onUndo, onCommit, description, duration, undoLabel, }: {
+    onUndo: () => unknown;
+    onCommit?: () => unknown;
+    description?: React.ReactNode;
+    /** En millisecondes ; Sonner met le délai en pause au survol et quand l'onglet est caché. */
+    duration?: number;
+    undoLabel?: string;
+}): string | number;
+/** Le message d'une erreur, lisible : celui de l'`Error`, sinon une phrase générique. */
+declare function errorMessage(error: unknown, fallback?: string): string;
+export { Toaster, toastUndo, errorMessage };

package/dist/sonner.js

@@ -4,7 +4,7 @@ import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02I
 import InformationCircleIcon from "@hugeicons/core-free-icons/InformationCircleIcon";
 import MultiplicationSignCircleIcon from "@hugeicons/core-free-icons/MultiplicationSignCircleIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { Toaster as Sonner } from "sonner";
+import { Toaster as Sonner, toast } from "sonner";
 import { Spinner } from "./spinner.js";
 import { useTheme } from "./theme.js";
 function Toaster(props) {
@@ -30,4 +30,45 @@ function Toaster(props) {
             },
         }, ...props }));
 }
-export { Toaster };
+/**
+ * Retour d'une action réversible, avec « Annuler » pendant quelques secondes : on agit tout de
+ * suite (mise à jour optimiste), sans boîte de confirmation, et on laisse revenir en arrière.
+ * Une action qui ne se rattrape pas passe par `DestructiveDialog`.
+ *
+ * `onUndo` défait l'action. `onCommit`, s'il est donné, part quand le toast se ferme sans
+ * annulation (délai écoulé, fermé à la main) : pour une action différée, envoyée seulement
+ * une fois le délai passé. Rend l'identifiant du toast (`toast.dismiss(id)`).
+ */
+function toastUndo(message, { onUndo, onCommit, description, duration = 6000, undoLabel = "Annuler", }) {
+    let settled = false;
+    const commit = () => {
+        if (settled)
+            return;
+        settled = true;
+        void onCommit?.();
+    };
+    return toast(message, {
+        description,
+        duration,
+        action: {
+            label: undoLabel,
+            onClick: () => {
+                if (settled)
+                    return;
+                settled = true;
+                void onUndo();
+            },
+        },
+        onAutoClose: commit,
+        onDismiss: commit,
+    });
+}
+/** Le message d'une erreur, lisible : celui de l'`Error`, sinon une phrase générique. */
+function errorMessage(error, fallback = "Quelque chose n'a pas marché. Réessaie.") {
+    if (error instanceof Error && error.message.trim() !== "")
+        return error.message;
+    if (typeof error === "string" && error.trim() !== "")
+        return error;
+    return fallback;
+}
+export { Toaster, toastUndo, errorMessage };

package/dist/sparkline.d.ts

@@ -0,0 +1,21 @@
+/** Ce que la courbe dit, en une phrase, pour qui ne la voit pas. */
+export declare function describeSparkline(label: string, values: ReadonlyArray<number | null>, format?: (value: number) => string): string;
+/**
+ * Tendance en un trait, sans axe ni info-bulle, à côté d'un chiffre (ligne de tableau, `StatTile`).
+ * L'échelle va du minimum au maximum de la série : c'est la forme qui compte, pas le zéro. Pour lire
+ * des valeurs, c'est `TimeChart`. Les lecteurs d'écran entendent l'étendue et la dernière valeur.
+ */
+export declare function Sparkline({ values, label, color, area, height, formatValue, className, }: {
+    /** Du plus ancien au plus récent ; `null` : pas de mesure, le trait s'interrompt. */
+    values: ReadonlyArray<number | null>;
+    /** Ce que mesure la courbe : « Envois sur 7 jours ». */
+    label: string;
+    /** Teinte `--chart-1` à `--chart-6`. */
+    color?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Lavis sous la courbe. */
+    area?: boolean;
+    /** En pixels ; la largeur suit le conteneur. */
+    height?: number;
+    formatValue?: (value: number) => string;
+    className?: string;
+}): React.JSX.Element;

package/dist/sparkline.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { areaPath, linePath } from "./chart-path.js";
+import { cn } from "./cn.js";
+import { CHART_COLORS } from "./time-chart.js";
+const number = new Intl.NumberFormat("fr-CH");
+/** Ce que la courbe dit, en une phrase, pour qui ne la voit pas. */
+export function describeSparkline(label, values, format = (v) => number.format(v)) {
+    const known = values.filter((v) => v !== null);
+    const last = known.at(-1);
+    if (last === undefined)
+        return `${label} : aucune donnée`;
+    return `${label} : de ${format(Math.min(...known))} à ${format(Math.max(...known))}, dernière valeur ${format(last)}`;
+}
+/**
+ * Tendance en un trait, sans axe ni info-bulle, à côté d'un chiffre (ligne de tableau, `StatTile`).
+ * L'échelle va du minimum au maximum de la série : c'est la forme qui compte, pas le zéro. Pour lire
+ * des valeurs, c'est `TimeChart`. Les lecteurs d'écran entendent l'étendue et la dernière valeur.
+ */
+export function Sparkline({ values, label, color = 1, area = true, height = 32, formatValue, className, }) {
+    const known = values.filter((v) => v !== null);
+    const min = Math.min(...known);
+    const max = Math.max(...known);
+    const stroke = CHART_COLORS[color - 1] ?? "currentColor";
+    const description = describeSparkline(label, values, formatValue);
+    // Une série plate se dessine au milieu ; une marge en haut et en bas garde le trait entier.
+    const [lo, hi] = max > min ? [min, max] : [min - 1, max + 1];
+    return (_jsx("span", { "data-slot": "sparkline", role: "img", "aria-label": description, style: { height }, className: cn("inline-block w-24 min-w-0 align-middle", className), children: known.length > 0 ? (_jsxs("svg", { "aria-hidden": true, viewBox: `0 -6 ${values.length} 112`, preserveAspectRatio: "none", className: "block size-full overflow-visible", children: [area ? _jsx("path", { d: areaPath(values, hi, lo), fill: stroke, opacity: 0.12 }) : null, _jsx("path", { d: linePath(values, hi, lo), fill: "none", stroke: stroke, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] })) : (_jsx("span", { "aria-hidden": true, className: "flex size-full items-center", children: _jsx("span", { className: "h-px w-full bg-foreground/10" }) })) }));
+}

package/dist/status.d.ts

@@ -1,22 +1,45 @@
 /** Disponibilité d'un service, vocabulaire fermé de la famille (Status, Host, Mail). */
 export type ServiceStatus = "operational" | "degraded" | "outage" | "maintenance" | "unknown";
 export declare const SERVICE_STATUS_LABEL: Record<ServiceStatus, string>;
+/**
+ * Ton d'un statut quelconque (déploiement, e-mail, domaine), quand le vocabulaire des services ne
+ * convient pas : `pending` pour ce qui attend ou tourne encore (« En file », « Vérification »).
+ */
+export type StatusTone = "neutral" | "success" | "warning" | "danger" | "info" | "pending";
+/** Couleur de chaque ton, prise dans les jetons de statut : mêmes teintes que les services. */
+export declare const STATUS_TONE_COLOR: Readonly<Record<StatusTone, ServiceStatus>>;
 /**
  * Le point d'un statut, décoratif (`aria-hidden`) : il accompagne toujours un libellé.
  * `live` ajoute l'anneau qui s'élargit, pour ce qui est en cours (incident, vérification DNS).
  */
-export declare function StatusDot({ status, live, className, }: {
-    status: ServiceStatus;
+export declare function StatusDot({ status: statusProp, tone, live, className, }: {
+    /** Statut de service ; sinon `tone`. */
+    status?: ServiceStatus;
+    tone?: StatusTone;
     live?: boolean;
     className?: string;
 }): React.JSX.Element;
-/**
- * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
- * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
- */
-export declare function StatusBadge({ status, label, live, className, }: {
+export type StatusBadgeProps = {
+    /** Disponibilité d'un service : le libellé de la famille par défaut. */
     status: ServiceStatus;
+    tone?: never;
     label?: string;
     live?: boolean;
     className?: string;
-}): React.JSX.Element;
+} | {
+    status?: never;
+    /** Statut d'autre chose (déploiement, e-mail, domaine) : le libellé est alors obligatoire. */
+    tone: StatusTone;
+    label: string;
+    /** Par défaut vrai pour `pending` : l'anneau dit que ça tourne encore. */
+    live?: boolean;
+    className?: string;
+};
+/**
+ * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
+ * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
+ *
+ * Hors des services, `tone` et `label` : `<StatusBadge tone="success" label="Remis" />`,
+ * `<StatusBadge tone="pending" label="En construction" />`.
+ */
+export declare function StatusBadge(props: StatusBadgeProps): React.JSX.Element;

package/dist/status.js

@@ -21,17 +21,33 @@ const BADGE = {
     maintenance: "bg-status-maintenance/12 text-status-maintenance-ink",
     unknown: "bg-foreground/[0.06] text-status-unknown-ink",
 };
+/** Couleur de chaque ton, prise dans les jetons de statut : mêmes teintes que les services. */
+export const STATUS_TONE_COLOR = {
+    neutral: "unknown",
+    success: "operational",
+    warning: "degraded",
+    danger: "outage",
+    info: "maintenance",
+    pending: "degraded",
+};
 /**
  * Le point d'un statut, décoratif (`aria-hidden`) : il accompagne toujours un libellé.
  * `live` ajoute l'anneau qui s'élargit, pour ce qui est en cours (incident, vérification DNS).
  */
-export function StatusDot({ status, live = false, className, }) {
+export function StatusDot({ status: statusProp, tone, live = false, className, }) {
+    const status = statusProp ?? STATUS_TONE_COLOR[tone ?? "neutral"];
     return (_jsxs("span", { "aria-hidden": true, "data-slot": "status-dot", className: cn("relative inline-flex size-2 shrink-0", className), children: [live ? _jsx("span", { className: cn("absolute inset-0 live-ping rounded-full", DOT[status]) }) : null, _jsx("span", { className: cn("relative inline-flex size-full rounded-full", DOT[status]) })] }));
 }
 /**
  * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
  * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
+ *
+ * Hors des services, `tone` et `label` : `<StatusBadge tone="success" label="Remis" />`,
+ * `<StatusBadge tone="pending" label="En construction" />`.
  */
-export function StatusBadge({ status, label, live = false, className, }) {
-    return (_jsxs("span", { "data-slot": "status-badge", "data-status": status, className: cn("inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", BADGE[status], className), children: [_jsx(StatusDot, { status: status, live: live, className: "size-1.5" }), label ?? SERVICE_STATUS_LABEL[status]] }));
+export function StatusBadge(props) {
+    const { label, className } = props;
+    const status = props.status !== undefined ? props.status : STATUS_TONE_COLOR[props.tone];
+    const live = props.live ?? props.tone === "pending";
+    return (_jsxs("span", { "data-slot": "status-badge", "data-status": status, ...(props.tone ? { "data-tone": props.tone } : {}), className: cn("inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", BADGE[status], className), children: [_jsx(StatusDot, { status: status, live: live, className: "size-1.5" }), label ?? SERVICE_STATUS_LABEL[status]] }));
 }

package/dist/time-chart.d.ts

@@ -23,7 +23,7 @@ export declare function niceScale(max: number, ticks?: number): {
  * 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, }: {
+export declare function TimeChart({ timestamps, series, kind, height, compact, label, formatValue, formatTime, emptyLabel, lastIncomplete, className, }: {
     timestamps: Array<number>;
     series: Array<TimeSeries>;
     kind?: "line" | "bar";
@@ -36,5 +36,11 @@ export declare function TimeChart({ timestamps, series, kind, height, compact, l
     formatValue?: (value: number) => string;
     formatTime?: (time: number) => string;
     emptyLabel?: string;
+    /**
+     * Le dernier point couvre une période pas encore finie (aujourd'hui, ce mois-ci) : sa ligne est
+     * en pointillés, sa barre pâlie, et l'infobulle le dit. Sans cela, une chute du dernier jour
+     * se lit comme une baisse alors que la journée n'est pas terminée.
+     */
+    lastIncomplete?: boolean;
     className?: string;
 }): React.JSX.Element;

package/dist/time-chart.js

@@ -1,5 +1,6 @@
 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 = [
@@ -26,44 +27,6 @@ export function niceScale(max, ticks = 4) {
     const step = nice * magnitude;
     return { max: Math.ceil(max / step) * step, step };
 }
-function linePath(values, max) {
-    let d = "";
-    let open = false;
-    values.forEach((v, i) => {
-        if (v === null) {
-            open = false;
-            return;
-        }
-        const x = i + 0.5;
-        const y = 100 - (v / max) * 100;
-        d += `${open ? "L" : "M"}${x} ${y}`;
-        open = true;
-    });
-    return d;
-}
-function areaPath(values, max) {
-    // Une aire par segment continu, fermée sur l'axe.
-    const parts = [];
-    let start = -1;
-    const close = (end) => {
-        if (start < 0)
-            return;
-        const segment = values.slice(start, end);
-        const top = segment
-            .map((v, j) => `${j === 0 ? "M" : "L"}${start + j + 0.5} ${100 - ((v ?? 0) / max) * 100}`)
-            .join("");
-        parts.push(`${top}L${end - 1 + 0.5} 100L${start + 0.5} 100Z`);
-        start = -1;
-    };
-    values.forEach((v, i) => {
-        if (v === null)
-            close(i);
-        else if (start < 0)
-            start = i;
-    });
-    close(values.length);
-    return parts.join("");
-}
 /**
  * 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
@@ -72,7 +35,7 @@ function areaPath(values, max) {
  * 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, }) {
+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.", lastIncomplete = false, className, }) {
     const [active, setActive] = useState(null);
     const n = timestamps.length;
     const hasData = n > 0 && series.some((s) => s.values.some((v) => v !== null));
@@ -99,13 +62,15 @@ export function TimeChart({ timestamps, series, kind = "line", height = 200, com
         event.preventDefault();
         setActive((current) => Math.min(n - 1, Math.max(0, (current ?? (move > 0 ? -1 : n)) + move)));
     };
+    const incompleteIndex = lastIncomplete && n > 1 ? n - 1 : -1;
     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 time = t === undefined ? "" : `${formatTime(t)}${i === incompleteIndex ? " (en cours)" : ""} : `;
+        return `${time}${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", { 
@@ -120,8 +85,8 @@ export function TimeChart({ timestamps, series, kind = "line", height = 200, com
                                                         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;
+                                                        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) * (i === incompleteIndex ? 0.5 : 1) }, `${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))) })] })] }));
+                                                : 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(incompleteIndex < 0 ? s.values : s.values.map((v, i) => (i === incompleteIndex ? null : v)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }), incompleteIndex >= 0 ? (_jsx("path", { "data-slot": "time-chart-incomplete", d: linePath(s.values.map((v, i) => (i >= incompleteIndex - 1 ? v : null)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeDasharray: "3 4", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })) : null] }, 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: [_jsxs("p", { className: "font-medium", children: [formatTime(activeTime), active === incompleteIndex ? (_jsx("span", { className: "ml-1.5 font-normal text-muted-foreground", children: "En cours" })) : null] }), 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: [_jsxs("th", { scope: "row", children: [formatTime(t), i === incompleteIndex ? " (en cours)" : ""] }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, t))) })] })] }));
 }

package/dist/uptime-bar.d.ts

@@ -9,10 +9,15 @@ export type UptimeDay = {
     /** 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>;

package/dist/uptime-bar.js

@@ -1,4 +1,5 @@
 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";
@@ -15,11 +16,42 @@ function describe(entry) {
         .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, }) {
-    return (_jsxs("div", { "data-slot": "uptime-bar", className: cn("grid gap-2", className), children: [_jsx("ol", { "aria-label": label, className: "flex h-8 items-stretch gap-[2px]", children: days.map((entry) => (_jsx("li", { className: "flex min-w-0 flex-1", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", {}), className: cn("block w-full rounded-[3px] transition-opacity duration-(--duration-fast) ease-out hover:opacity-70 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" })] })] }));
+    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.3.0",
+  "version": "0.5.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

@@ -394,6 +394,19 @@
   animation: live-ping 1.6s var(--ease-out) infinite;
 }
 
+/* Barre d'avancement de durée inconnue : un tiers de piste qui glisse, à vitesse constante. */
+@keyframes progress-slide {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 300% 0;
+  }
+}
+@utility progress-slide {
+  animation: progress-slide 1.4s linear infinite;
+}
+
 /* Des étapes qui montent l'une après l'autre au premier affichage. */
 @keyframes rise {
   from {
@@ -420,4 +433,10 @@
   .card-in {
     transition: none;
   }
+  /* Sans mouvement, la durée inconnue se lit sur une piste pleine et pâle. */
+  .progress-slide {
+    animation: none;
+    width: 100%;
+    opacity: 0.35;
+  }
 }