@hgdc/ui 0.3.0 → 0.4.0

package/README.md

@@ -69,6 +69,22 @@ La barre se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` d
 | `secret-reveal` | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                     |
 | `skeleton`      | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                             |
 
+## Listes, journaux et retours
+
+| Import               | Exemple                                                                                                                                                    |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `filter-bar`         | `<FilterBar search={{ value: q, onChange }} filters={[{ key: "status", label: "Statut", options }]} values={{ status }} onFilterChange={…} onReset={…} />` |
+| `data-table`         | `<DataTable label="Déploiements" rows={rows} columns={columns} rowKey={(d) => d.id} sort={sort} onSortChange={…} filters={<FilterBar …/>} loadMore={…} />` |
+| `dns-record-table`   | `<DnsRecordTable records={[{ type: "MX", name: "send", value, priority: 10, status: "pending" }]} />` (Vérifié, En attente, Échec, À ajouter)              |
+| `log-viewer`         | `<LogViewer lines={[{ id, time, level: "error", message }]} live />` : niveaux, recherche, « Suivre », copie ; seules les lignes visibles sont rendues     |
+| `sparkline`          | `<Sparkline label="Envois sur 7 jours" values={[3, 8, 5]} color={2} />`                                                                                    |
+| `middle-truncate`    | `<MiddleTruncate text={deployment.url} />` : « …/routes/index.tsx », texte entier dans la page                                                             |
+| `error-card`         | `<ErrorCard title="Impossible de charger les journaux" detail={message} reference={requestId} onRetry={refetch} />`                                        |
+| `destructive-dialog` | `<DestructiveDialog open={open} onOpenChange={setOpen} title="Supprimer le domaine" question="…" name="acme.ch" onConfirm={remove} />`                     |
+| `sonner`             | `<Toaster />` une fois, puis `toastUndo("Domaine retiré", { onUndo: restore })` ; `errorMessage(error)` pour un toast d'erreur                             |
+
+Filtres, tri et page vivent dans l'URL du produit : les composants sont contrôlés et ne connaissent pas le routeur.
+
 ## Contrôles et surfaces flottantes
 
 | Import        | Exemple                                                                                                                                                      |

package/dist/chart-path.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tracés SVG partagés par `TimeChart` et `Sparkline`. Repère de `values.length` unités de large
+ * sur 100 de haut : le point `i` est au centre de sa colonne (`i + 0.5`), `min` en bas, `max` en
+ * haut. Le SVG s'étire ensuite (`preserveAspectRatio="none"`).
+ */
+/** Une ligne, interrompue là où une valeur manque (`null`). */
+export declare function linePath(values: ReadonlyArray<number | null>, max: number, min?: number): string;
+/** L'aire sous la ligne : une forme par segment continu, fermée sur le bas du repère. */
+export declare function areaPath(values: ReadonlyArray<number | null>, max: number, min?: number): string;

package/dist/chart-path.js

@@ -0,0 +1,46 @@
+/**
+ * Tracés SVG partagés par `TimeChart` et `Sparkline`. Repère de `values.length` unités de large
+ * sur 100 de haut : le point `i` est au centre de sa colonne (`i + 0.5`), `min` en bas, `max` en
+ * haut. Le SVG s'étire ensuite (`preserveAspectRatio="none"`).
+ */
+function y(value, min, max) {
+    const range = max - min;
+    return range > 0 ? 100 - ((value - min) / range) * 100 : 50;
+}
+/** Une ligne, interrompue là où une valeur manque (`null`). */
+export function linePath(values, max, min = 0) {
+    let d = "";
+    let open = false;
+    values.forEach((v, i) => {
+        if (v === null) {
+            open = false;
+            return;
+        }
+        d += `${open ? "L" : "M"}${i + 0.5} ${y(v, min, max)}`;
+        open = true;
+    });
+    return d;
+}
+/** L'aire sous la ligne : une forme par segment continu, fermée sur le bas du repère. */
+export function areaPath(values, max, min = 0) {
+    const parts = [];
+    let start = -1;
+    const close = (end) => {
+        if (start < 0)
+            return;
+        const top = values
+            .slice(start, end)
+            .map((v, j) => `${j === 0 ? "M" : "L"}${start + j + 0.5} ${y(v ?? min, min, max)}`)
+            .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("");
+}

package/dist/data-table.d.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import { type SortDirection } from "./table.tsx";
+export type DataTableSort = {
+    key: string;
+    direction: Exclude<SortDirection, "none">;
+};
+export type DataTableColumn<Row> = {
+    /** Identifiant de la colonne, et clé du tri dans l'URL. */
+    key: string;
+    header: ReactNode;
+    cell: (row: Row) => ReactNode;
+    /** Chiffres alignés à droite, en `tabular-nums`. */
+    numeric?: boolean;
+    /** Triable : l'en-tête devient un bouton. */
+    sortable?: boolean;
+    /** Sens du premier clic : `descending` pour une date ou un volume, `ascending` pour un nom. */
+    firstDirection?: DataTableSort["direction"];
+    className?: string;
+    headClassName?: string;
+};
+/**
+ * Le tri après un clic sur une colonne : une nouvelle colonne part dans son sens premier, la
+ * colonne déjà triée change de sens.
+ */
+export declare function nextSort(current: DataTableSort | null | undefined, key: string, firstDirection?: DataTableSort["direction"]): DataTableSort;
+/**
+ * Une liste de ressources en tableau, avec ses filtres, son tri et sa pagination, tous contrôlés :
+ * l'état vit dans l'URL du produit (tri, page, filtres), le tableau ne fait que l'afficher et
+ * rappeler. Construit sur `table` ; pour une mise en page à part, les pièces de `table` restent
+ * disponibles.
+ *
+ * `rows` à `undefined` : chargement, des lignes squelettes à la forme des vraies. `error` remplace
+ * le tableau (un `ErrorCard`). Aucune ligne : `empty`, ou `filteredEmpty` quand des filtres sont
+ * posés, pour dire que c'est la recherche qui ne trouve rien.
+ *
+ * Deux paginations : `pagination` (pages numérotées) ou `loadMore` (« Charger plus », comme
+ * `usePaginatedQuery` de Convex).
+ */
+export declare function DataTable<Row>({ rows, columns, rowKey, label, sort, onSortChange, filters, filtered, empty, filteredEmpty, error, pagination, loadMore, skeletonRows, surface, className, }: {
+    /** `undefined` pendant le chargement. */
+    rows: ReadonlyArray<Row> | undefined;
+    columns: ReadonlyArray<DataTableColumn<Row>>;
+    rowKey: (row: Row) => string;
+    /** Nom du tableau pour les lecteurs d'écran : « Déploiements ». */
+    label: string;
+    sort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort) => void;
+    /** Au-dessus du tableau : un `FilterBar`. */
+    filters?: ReactNode;
+    /** Des filtres sont posés : l'état vide le dit. */
+    filtered?: boolean;
+    empty?: ReactNode;
+    filteredEmpty?: ReactNode;
+    /** À la place du tableau quand le chargement a échoué. */
+    error?: ReactNode;
+    pagination?: {
+        page: number;
+        pageCount: number;
+        onPageChange: (page: number) => void;
+    };
+    loadMore?: {
+        hasMore: boolean;
+        onLoadMore: () => void;
+        loading?: boolean;
+        label?: string;
+    };
+    skeletonRows?: number;
+    surface?: boolean;
+    className?: string;
+}): React.JSX.Element;

package/dist/data-table.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow, TableSkeleton, } from "./table.js";
+/**
+ * Le tri après un clic sur une colonne : une nouvelle colonne part dans son sens premier, la
+ * colonne déjà triée change de sens.
+ */
+export function nextSort(current, key, firstDirection = "ascending") {
+    if (current?.key !== key)
+        return { key, direction: firstDirection };
+    return { key, direction: current.direction === "ascending" ? "descending" : "ascending" };
+}
+function Pagination({ page, pageCount, onPageChange, }) {
+    return (_jsxs("nav", { "aria-label": "Pagination", className: "flex items-center justify-between gap-3 px-1 text-sm", children: [_jsxs("p", { className: "text-muted-foreground tabular-nums", "aria-live": "polite", children: ["Page ", page, " sur ", Math.max(pageCount, 1)] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: [_jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, strokeWidth: 2, "aria-hidden": true, "data-icon": "inline-start" }), "Pr\u00E9c\u00E9dente"] }), _jsxs(Button, { variant: "outline", size: "sm", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: ["Suivante", _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, "data-icon": "inline-end" })] })] })] }));
+}
+/**
+ * Une liste de ressources en tableau, avec ses filtres, son tri et sa pagination, tous contrôlés :
+ * l'état vit dans l'URL du produit (tri, page, filtres), le tableau ne fait que l'afficher et
+ * rappeler. Construit sur `table` ; pour une mise en page à part, les pièces de `table` restent
+ * disponibles.
+ *
+ * `rows` à `undefined` : chargement, des lignes squelettes à la forme des vraies. `error` remplace
+ * le tableau (un `ErrorCard`). Aucune ligne : `empty`, ou `filteredEmpty` quand des filtres sont
+ * posés, pour dire que c'est la recherche qui ne trouve rien.
+ *
+ * Deux paginations : `pagination` (pages numérotées) ou `loadMore` (« Charger plus », comme
+ * `usePaginatedQuery` de Convex).
+ */
+export function DataTable({ rows, columns, rowKey, label, sort, onSortChange, filters, filtered = false, empty = "Rien pour l'instant.", filteredEmpty = "Aucun résultat pour ces filtres.", error, pagination, loadMore, skeletonRows = 5, surface = true, className, }) {
+    const failed = error !== undefined && error !== null && error !== false;
+    const showPagination = pagination !== undefined && rows !== undefined && pagination.pageCount > 1;
+    const showLoadMore = loadMore !== undefined && rows !== undefined && (loadMore.hasMore || loadMore.loading === true);
+    return (_jsxs("div", { "data-slot": "data-table", className: cn("grid gap-3", className), children: [filters, failed ? (error) : (_jsxs(Table, { "aria-label": label, "aria-busy": rows === undefined || undefined, surface: surface, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
+                                const direction = sort?.key === column.key ? sort.direction : "none";
+                                return (_jsx(TableHead, { numeric: column.numeric ?? false, className: column.headClassName, ...(column.sortable && onSortChange
+                                        ? {
+                                            sort: direction,
+                                            onSort: () => onSortChange(nextSort(sort, column.key, column.firstDirection)),
+                                        }
+                                        : {}), children: column.header }, column.key));
+                            }) }) }), _jsx(TableBody, { children: rows === undefined ? (_jsx(TableSkeleton, { rows: skeletonRows, columns: columns.length })) : rows.length === 0 ? (_jsx(TableEmpty, { colSpan: columns.length, children: filtered ? filteredEmpty : empty })) : (rows.map((row) => (_jsx(TableRow, { children: columns.map((column) => (_jsx(TableCell, { numeric: column.numeric ?? false, className: column.className, children: column.cell(row) }, column.key))) }, rowKey(row))))) })] })), !failed && showPagination ? _jsx(Pagination, { ...pagination }) : null, !failed && showLoadMore ? (_jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "outline", size: "sm", isLoading: loadMore.loading === true, disabled: !loadMore.hasMore, onClick: loadMore.onLoadMore, children: loadMore.label ?? "Charger plus" }) })) : null] }));
+}

package/dist/destructive-dialog.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+/** Recopié, aux espaces près en début et en fin. */
+export declare function matchesConfirmation(typed: string, name: string): boolean;
+/**
+ * Confirmation d'une action qui ne se rattrape pas (supprimer un domaine, un projet, une clé).
+ * Avec `name`, il faut le recopier avant que le bouton s'active : on ne supprime pas par
+ * réflexe. `Ctrl+Entrée` (`⌘+Entrée` sur Mac) confirme, `Échap` annule.
+ *
+ * `onConfirm` rend une promesse : le bouton tourne, la boîte ne se ferme qu'une fois l'action
+ * faite. Si elle échoue, la boîte reste ouverte et l'erreur s'affiche en toast
+ * (`formatError` pour traduire une erreur du serveur). Pour ce qui se défait, `toastUndo`.
+ */
+export declare function DestructiveDialog({ open, onOpenChange, title, question, consequence, name, confirmLabel, onConfirm, formatError, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** « Supprimer le domaine » */
+    title: string;
+    /** « Tu veux vraiment supprimer acme.ch ? » */
+    question: ReactNode;
+    /** Ce qui disparaît avec, en une phrase. */
+    consequence?: ReactNode;
+    /** À recopier pour confirmer. Sans lui, un simple bouton suffit. */
+    name?: string;
+    /** Libellé du bouton, par défaut le titre. */
+    confirmLabel?: string;
+    onConfirm: () => Promise<unknown>;
+    formatError?: (error: unknown) => string;
+}): React.JSX.Element;

package/dist/destructive-dialog.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Copy01Icon from "@hugeicons/core-free-icons/Copy01Icon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useId, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "./button.js";
+import { useCopy } from "./copy-button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./dialog.js";
+import { Input } from "./input.js";
+import { Kbd, isApplePlatform } from "./kbd.js";
+import { errorMessage } from "./sonner.js";
+/** Le nom à recopier, copiable d'un clic pour qui préfère coller. */
+function NameChip({ name }) {
+    const { copied, copy } = useCopy();
+    return (_jsxs("button", { type: "button", "aria-label": copied ? "Copié" : `Copier ${name}`, title: copied ? "Copié" : "Copier", onClick: () => void copy(name), className: "inline-flex max-w-full items-center gap-1.5 rounded-lg bg-muted px-2 py-0.5 align-middle font-medium text-foreground outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/10 focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "truncate", children: name }), _jsx(HugeiconsIcon, { icon: copied ? Tick02Icon : Copy01Icon, "aria-hidden": true, className: "size-3.5 shrink-0 pop-in" }, copied ? "ok" : "copy")] }));
+}
+/** Recopié, aux espaces près en début et en fin. */
+export function matchesConfirmation(typed, name) {
+    return typed.trim() === name.trim();
+}
+/**
+ * Confirmation d'une action qui ne se rattrape pas (supprimer un domaine, un projet, une clé).
+ * Avec `name`, il faut le recopier avant que le bouton s'active : on ne supprime pas par
+ * réflexe. `Ctrl+Entrée` (`⌘+Entrée` sur Mac) confirme, `Échap` annule.
+ *
+ * `onConfirm` rend une promesse : le bouton tourne, la boîte ne se ferme qu'une fois l'action
+ * faite. Si elle échoue, la boîte reste ouverte et l'erreur s'affiche en toast
+ * (`formatError` pour traduire une erreur du serveur). Pour ce qui se défait, `toastUndo`.
+ */
+/* oxlint-disable react/refs -- `view` vient d'un ref lu au rendu, voulu (voir plus bas). */
+export function DestructiveDialog({ open, onOpenChange, title, question, consequence, name, confirmLabel, onConfirm, formatError = (error) => errorMessage(error), }) {
+    // Le parent vide souvent son état à la fermeture : le dernier contenu ouvert reste affiché le
+    // temps de l'animation de sortie. Seul un ref le garde sans rendu supplémentaire.
+    const shown = useRef({ title, question, consequence, name, confirmLabel });
+    if (open)
+        shown.current = { title, question, consequence, name, confirmLabel };
+    const view = shown.current;
+    const [typed, setTyped] = useState("");
+    const [pending, setPending] = useState(false);
+    const inputId = useId();
+    const ready = !pending && (view.name === undefined || matchesConfirmation(typed, view.name));
+    const [wasOpen, setWasOpen] = useState(open);
+    if (open !== wasOpen) {
+        setWasOpen(open);
+        if (!open)
+            setTyped("");
+    }
+    async function confirm() {
+        if (!ready)
+            return;
+        setPending(true);
+        try {
+            await onConfirm();
+            onOpenChange(false);
+        }
+        catch (error) {
+            toast.error(formatError(error));
+        }
+        finally {
+            setPending(false);
+        }
+    }
+    const mod = isApplePlatform() ? "⌘" : "Ctrl";
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => !pending && onOpenChange(next), children: _jsxs(DialogContent, { "data-slot": "destructive-dialog", onKeyDown: (event) => {
+                if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                    event.preventDefault();
+                    void confirm();
+                }
+            }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: view.title }), _jsxs(DialogDescription, { render: _jsx("div", {}), className: "grid gap-1 text-[15px]", children: [_jsx("p", { children: view.question }), view.consequence ? _jsx("p", { children: view.consequence }) : null, _jsx("p", { className: "font-semibold text-destructive", children: "Impossible de revenir en arri\u00E8re." })] })] }), view.name !== undefined ? (_jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
+                        event.preventDefault();
+                        void confirm();
+                    }, children: [_jsxs("label", { htmlFor: inputId, className: "text-[15px] leading-7 text-muted-foreground", children: ["Tape ", _jsx(NameChip, { name: view.name }), " pour confirmer."] }), _jsx(Input, { id: inputId, autoFocus: true, autoComplete: "off", autoCapitalize: "off", spellCheck: false, value: typed, onChange: (event) => setTyped(event.target.value), placeholder: view.name, "aria-invalid": typed.length > 0 && !view.name.startsWith(typed) ? true : undefined })] })) : null, _jsxs(DialogFooter, { className: "sm:justify-start", children: [_jsxs(Button, { variant: "destructive", isLoading: pending, disabled: !ready, onClick: () => void confirm(), children: [view.confirmLabel ?? view.title, _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden bg-current/10 text-current lg:inline-flex", children: mod }), _jsx(Kbd, { "aria-hidden": true, className: "hidden bg-current/10 text-current lg:inline-flex", children: "\u21B5" })] }), _jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onOpenChange(false), children: ["Annuler", _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden lg:inline-flex", children: "\u00C9chap" })] })] })] }) }));
+}

package/dist/dns-record-table.d.ts

@@ -0,0 +1,30 @@
+/** Où en est un enregistrement : vu chez le fournisseur DNS ou pas encore. */
+export type DnsRecordStatus = "verified" | "pending" | "failed" | "not_started";
+export declare const DNS_RECORD_STATUS_LABEL: Record<DnsRecordStatus, string>;
+export type DnsRecord = {
+    /** Clé de ligne ; à défaut, type, nom et valeur. */
+    id?: string;
+    /** `TXT`, `MX`, `CNAME`… */
+    type: string;
+    /** Tel qu'il se saisit chez le fournisseur : `send`, `resend._domainkey`, `@`. */
+    name: string;
+    value: string;
+    priority?: number;
+    /** « Auto », « 3600 ». */
+    ttl?: string;
+    status?: DnsRecordStatus;
+};
+/**
+ * Les enregistrements à poser chez le fournisseur DNS : type, nom et valeur à copier, et le
+ * statut de chacun (point et libellé). Une valeur longue (DKIM) est coupée au milieu, mais le
+ * bouton copie toujours la valeur entière. Priorité et TTL n'ont leur colonne que si une ligne
+ * en a. Sur téléphone, le tableau défile de côté dans sa carte.
+ */
+export declare function DnsRecordTable({ records, label, surface, className, }: {
+    records: Array<DnsRecord>;
+    /** Nom du tableau pour les lecteurs d'écran. */
+    label?: string;
+    /** `false` dans une carte qui a déjà sa teinte. */
+    surface?: boolean;
+    className?: string;
+}): React.JSX.Element;

package/dist/dns-record-table.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { CopyButton } from "./copy-button.js";
+import { MiddleTruncate } from "./middle-truncate.js";
+import { StatusBadge } from "./status.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+export const DNS_RECORD_STATUS_LABEL = {
+    verified: "Vérifié",
+    pending: "En attente",
+    failed: "Échec",
+    not_started: "À ajouter",
+};
+const STATUS_TONE = {
+    verified: "operational",
+    pending: "degraded",
+    failed: "outage",
+    not_started: "unknown",
+};
+function CopyableValue({ value, label }) {
+    return (_jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [_jsx(MiddleTruncate, { text: value, tail: 10, className: "font-mono text-[13px]" }), _jsx(CopyButton, { value: value, label: label, className: "size-7" })] }));
+}
+/**
+ * Les enregistrements à poser chez le fournisseur DNS : type, nom et valeur à copier, et le
+ * statut de chacun (point et libellé). Une valeur longue (DKIM) est coupée au milieu, mais le
+ * bouton copie toujours la valeur entière. Priorité et TTL n'ont leur colonne que si une ligne
+ * en a. Sur téléphone, le tableau défile de côté dans sa carte.
+ */
+export function DnsRecordTable({ records, label = "Enregistrements DNS", surface = true, className, }) {
+    const hasPriority = records.some((r) => r.priority !== undefined);
+    const hasTtl = records.some((r) => r.ttl !== undefined);
+    const hasStatus = records.some((r) => r.status !== undefined);
+    return (_jsxs(Table, { "aria-label": label, surface: surface, "data-slot": "dns-record-table", className: cn("min-w-[44rem] table-fixed", className), children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-20", children: "Type" }), _jsx(TableHead, { className: "w-[26%]", children: "Nom" }), _jsx(TableHead, { children: "Valeur" }), hasPriority ? (_jsx(TableHead, { numeric: true, className: "w-24", children: "Priorit\u00E9" })) : null, hasTtl ? _jsx(TableHead, { className: "w-20", children: "TTL" }) : null, hasStatus ? _jsx(TableHead, { className: "w-36", children: "Statut" }) : null] }) }), _jsx(TableBody, { children: records.map((record) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono text-[13px] font-medium", children: record.type }), _jsx(TableCell, { children: _jsx(CopyableValue, { value: record.name, label: `Copier le nom ${record.name}` }) }), _jsx(TableCell, { children: _jsx(CopyableValue, { value: record.value, label: `Copier la valeur ${record.type}` }) }), hasPriority ? _jsx(TableCell, { numeric: true, children: record.priority ?? "" }) : null, hasTtl ? _jsx(TableCell, { className: "text-muted-foreground tabular-nums", children: record.ttl ?? "" }) : null, hasStatus ? (_jsx(TableCell, { children: record.status ? (_jsx(StatusBadge, { status: STATUS_TONE[record.status], label: DNS_RECORD_STATUS_LABEL[record.status], live: record.status === "pending" })) : null })) : null] }, record.id ?? `${record.type} ${record.name} ${record.value}`))) })] }));
+}

package/dist/error-card.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+/**
+ * Ce qui a échoué, quoi faire, et de quoi le signaler. À la place du contenu qui n'a pas pu se
+ * charger (une liste, un graphique), pas en plus : l'écran ne reste jamais blanc ni muet.
+ *
+ * Le détail technique (message d'origine, pile) est replié : utile au support, illisible pour
+ * le reste. L'identifiant se copie d'un clic, pour l'e-mail au support. `onRetry` peut rendre une
+ * promesse : le bouton tourne jusqu'à ce qu'elle se règle.
+ */
+export declare function ErrorCard({ title, children, detail, reference, onRetry, retryLabel, action, className, }: {
+    title?: ReactNode;
+    /** Ce que la personne peut faire, en une ou deux phrases. */
+    children?: ReactNode;
+    /** Le message technique, montré sous « Détails » en chasse fixe. */
+    detail?: string;
+    /** Identifiant de la requête ou de l'erreur, à transmettre au support. */
+    reference?: string;
+    onRetry?: () => unknown;
+    retryLabel?: string;
+    /** Une autre issue, à côté de « Réessayer » : un lien vers la page de statut. */
+    action?: ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/error-card.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import AlertCircleIcon from "@hugeicons/core-free-icons/AlertCircleIcon";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useState } from "react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { CopyButton } from "./copy-button.js";
+/**
+ * Ce qui a échoué, quoi faire, et de quoi le signaler. À la place du contenu qui n'a pas pu se
+ * charger (une liste, un graphique), pas en plus : l'écran ne reste jamais blanc ni muet.
+ *
+ * Le détail technique (message d'origine, pile) est replié : utile au support, illisible pour
+ * le reste. L'identifiant se copie d'un clic, pour l'e-mail au support. `onRetry` peut rendre une
+ * promesse : le bouton tourne jusqu'à ce qu'elle se règle.
+ */
+export function ErrorCard({ title = "Le chargement a échoué", children, detail, reference, onRetry, retryLabel = "Réessayer", action, className, }) {
+    const [retrying, setRetrying] = useState(false);
+    async function retry() {
+        if (!onRetry)
+            return;
+        setRetrying(true);
+        try {
+            await onRetry();
+        }
+        finally {
+            setRetrying(false);
+        }
+    }
+    return (_jsxs("div", { role: "alert", "data-slot": "error-card", className: cn("surface flex flex-col gap-4 rounded-3xl p-5 text-sm sm:p-6", className), children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(HugeiconsIcon, { icon: AlertCircleIcon, strokeWidth: 2, "aria-hidden": true, className: "mt-0.5 size-5 shrink-0 text-destructive" }), _jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx("p", { className: "font-heading text-base font-medium text-foreground", children: title }), _jsx("div", { className: "text-pretty text-muted-foreground", children: children ??
+                                    (reference
+                                        ? "Réessaie dans un instant. Si ça continue, écris-nous avec l'identifiant ci-dessous."
+                                        : "Réessaie dans un instant.") })] })] }), reference ? (_jsxs("div", { className: "flex min-w-0 items-center gap-2 pl-8 text-muted-foreground", children: [_jsx("span", { className: "shrink-0", children: "Identifiant" }), _jsx("code", { className: "min-w-0 truncate rounded-md bg-foreground/[0.05] px-1.5 py-0.5 font-mono text-xs text-foreground", children: reference }), _jsx(CopyButton, { value: reference, label: "Copier l'identifiant" })] })) : null, detail ? (_jsxs(Collapsible.Root, { className: "pl-8", children: [_jsxs(Collapsible.Trigger, { className: "group -mx-1.5 inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: [_jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-3.5 transition-transform duration-(--duration-fast) ease-out group-data-panel-open:rotate-90" }), "D\u00E9tails"] }), _jsx(Collapsible.Panel, { className: "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-(--duration-base) ease-out data-ending-style:h-0 data-starting-style:h-0 [&[hidden]:not([hidden='until-found'])]:hidden", children: _jsx("pre", { className: "mt-2 max-h-60 overflow-auto rounded-2xl bg-foreground/[0.05] p-3 font-mono text-xs whitespace-pre-wrap break-all text-foreground", children: detail }) })] })) : null, onRetry || action ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2 pl-8", children: [onRetry ? (_jsx(Button, { variant: "outline", size: "sm", isLoading: retrying, onClick: () => void retry(), children: retryLabel })) : null, action] })) : null] }));
+}

package/dist/filter-bar.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+export type FilterOption = {
+    value: string;
+    label: string;
+};
+export type FilterDefinition = {
+    /** Nom du paramètre d'URL : `status`, `environment`. */
+    key: string;
+    /** « Statut » */
+    label: string;
+    options: Array<FilterOption>;
+    /** Une seule valeur à la fois (période, environnement). Par défaut, plusieurs. */
+    single?: boolean;
+};
+/** Valeurs choisies par filtre, telles qu'elles vivent dans l'URL : `{ status: ["error"] }`. */
+export type FilterValues = Readonly<Record<string, ReadonlyArray<string> | undefined>>;
+/** Le texte de la pastille : « Statut », « Statut : Erreur », « Statut : Erreur +2 ». */
+export declare function filterSummary(filter: FilterDefinition, selected?: ReadonlyArray<string>): string;
+/** Nombre de critères posés, recherche comprise : sert à afficher « Effacer » et l'état vide. */
+export declare function activeFilterCount(values?: FilterValues, search?: string): number;
+/** Ajoute ou retire une valeur d'un filtre à choix multiple, dans l'ordre des options. */
+export declare function toggleFilterValue(filter: FilterDefinition, selected: ReadonlyArray<string> | undefined, value: string, checked: boolean): Array<string>;
+/**
+ * Recherche et filtres en pastilles au-dessus d'une liste. Entièrement contrôlée, sans routeur :
+ * le produit lit les valeurs dans les paramètres d'URL et les y réécrit dans les callbacks, pour
+ * que le partage, le rafraîchissement et le retour arrière gardent la vue.
+ *
+ * La recherche n'écrit qu'après 250 ms de calme (Entrée pour tout de suite, Échap pour vider).
+ * Un filtre à choix multiple reste ouvert pendant qu'on coche ; `single` en fait un choix unique
+ * avec « Tous ». « Effacer » apparaît dès qu'un critère est posé.
+ */
+export declare function FilterBar({ search, filters, values, onFilterChange, onReset, actions, className, }: {
+    search?: {
+        value: string;
+        onChange: (value: string) => void;
+        placeholder?: string;
+        /** Nom du champ pour les lecteurs d'écran, par défaut « Rechercher ». */
+        label?: string;
+        /** Délai avant d'écrire la recherche, en millisecondes. */
+        delay?: number;
+    };
+    filters?: Array<FilterDefinition>;
+    values?: FilterValues;
+    onFilterChange?: (key: string, values: Array<string>) => void;
+    /** Retire tous les critères, recherche comprise. */
+    onReset?: () => void;
+    /** À droite : la période, un bouton d'export. */
+    actions?: ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/filter-bar.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowDown01Icon from "@hugeicons/core-free-icons/ArrowDown01Icon";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
+import Search01Icon from "@hugeicons/core-free-icons/Search01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useRef, useState } from "react";
+import { Button, buttonVariants } from "./button.js";
+import { cn } from "./cn.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { Input } from "./input.js";
+/** Le texte de la pastille : « Statut », « Statut : Erreur », « Statut : Erreur +2 ». */
+export function filterSummary(filter, selected = []) {
+    const labels = filter.options.filter((o) => selected.includes(o.value)).map((o) => o.label);
+    const first = labels[0];
+    if (first === undefined)
+        return filter.label;
+    return labels.length === 1 ? `${filter.label} : ${first}` : `${filter.label} : ${first} +${labels.length - 1}`;
+}
+/** Nombre de critères posés, recherche comprise : sert à afficher « Effacer » et l'état vide. */
+export function activeFilterCount(values = {}, search = "") {
+    const filters = Object.values(values).filter((v) => v !== undefined && v.length > 0).length;
+    return filters + (search.trim() === "" ? 0 : 1);
+}
+/** Ajoute ou retire une valeur d'un filtre à choix multiple, dans l'ordre des options. */
+export function toggleFilterValue(filter, selected = [], value, checked) {
+    const next = new Set(selected);
+    if (checked)
+        next.add(value);
+    else
+        next.delete(value);
+    return filter.options.map((o) => o.value).filter((v) => next.has(v));
+}
+/**
+ * Recherche qui suit la saisie sans écrire dans l'URL à chaque touche : la valeur part après
+ * `delay` ms de calme. Si l'URL change de son côté (retour arrière), le champ la reprend.
+ */
+function useDebouncedSearch(value, onChange, delay) {
+    const [draft, setDraft] = useState(value);
+    const [seen, setSeen] = useState(value);
+    if (value !== seen) {
+        setSeen(value);
+        setDraft(value);
+    }
+    const latest = useRef(onChange);
+    useEffect(() => {
+        latest.current = onChange;
+    });
+    useEffect(() => {
+        if (draft === value)
+            return;
+        const timer = setTimeout(() => latest.current(draft), delay);
+        return () => clearTimeout(timer);
+    }, [draft, value, delay]);
+    const flush = (next) => {
+        setDraft(next);
+        if (next !== value)
+            latest.current(next);
+    };
+    return { draft, setDraft, flush };
+}
+function SearchField({ value, onChange, placeholder = "Rechercher…", label = "Rechercher", delay = 250, }) {
+    const { draft, setDraft, flush } = useDebouncedSearch(value, onChange, delay);
+    return (_jsxs("div", { className: "relative min-w-0 flex-1 basis-full sm:basis-56 sm:max-w-sm", children: [_jsx(HugeiconsIcon, { icon: Search01Icon, strokeWidth: 2, "aria-hidden": true, className: "pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { type: "search", "aria-label": label, placeholder: placeholder, autoComplete: "off", spellCheck: false, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                    if (event.key === "Enter")
+                        flush(draft);
+                    if (event.key === "Escape" && draft !== "") {
+                        event.preventDefault();
+                        flush("");
+                    }
+                }, className: "h-10 pr-9 pl-10 lg:h-9 [&::-webkit-search-cancel-button]:appearance-none" }), draft !== "" ? (_jsx("button", { type: "button", "aria-label": "Vider la recherche", onClick: () => flush(""), className: "absolute top-1/2 right-1.5 grid size-7 -translate-y-1/2 place-items-center rounded-full text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-3.5" }) })) : null] }));
+}
+function FilterPill({ filter, selected = [], onChange, }) {
+    const active = selected.length > 0;
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "data-slot": "filter-pill", "data-active": active || undefined, className: cn(buttonVariants({ variant: "outline", size: "sm" }), "max-w-64 gap-1 pr-2.5 font-normal text-muted-foreground", active && "bg-foreground/[0.06] font-medium text-foreground ring-0 dark:bg-foreground/[0.08]"), children: [_jsx("span", { className: "truncate", children: filterSummary(filter, selected) }), _jsx(HugeiconsIcon, { icon: ArrowDown01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-3.5 opacity-60" })] }), _jsx(DropdownMenuContent, { className: "w-auto", children: filter.single ? (_jsxs(DropdownMenuRadioGroup, { label: filter.label, value: selected[0] ?? "", onValueChange: (value) => onChange(value === "" ? [] : [value]), children: [_jsx(DropdownMenuRadioItem, { value: "", children: "Tous" }), filter.options.map((option) => (_jsx(DropdownMenuRadioItem, { value: option.value, children: option.label }, option.value)))] })) : (_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: filter.label }), filter.options.map((option) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(option.value), onCheckedChange: (checked) => onChange(toggleFilterValue(filter, selected, option.value, checked)), children: option.label }, option.value)))] })) })] }));
+}
+/**
+ * Recherche et filtres en pastilles au-dessus d'une liste. Entièrement contrôlée, sans routeur :
+ * le produit lit les valeurs dans les paramètres d'URL et les y réécrit dans les callbacks, pour
+ * que le partage, le rafraîchissement et le retour arrière gardent la vue.
+ *
+ * La recherche n'écrit qu'après 250 ms de calme (Entrée pour tout de suite, Échap pour vider).
+ * Un filtre à choix multiple reste ouvert pendant qu'on coche ; `single` en fait un choix unique
+ * avec « Tous ». « Effacer » apparaît dès qu'un critère est posé.
+ */
+export function FilterBar({ search, filters = [], values = {}, onFilterChange, onReset, actions, className, }) {
+    const count = activeFilterCount(values, search?.value);
+    return (_jsxs("div", { role: "search", "data-slot": "filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [search ? _jsx(SearchField, { ...search }) : null, filters.map((filter) => (_jsx(FilterPill, { filter: filter, ...(values[filter.key] !== undefined ? { selected: values[filter.key] } : {}), onChange: (next) => onFilterChange?.(filter.key, next) }, filter.key))), onReset && count > 0 ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, className: "text-muted-foreground", children: "Effacer" })) : null, actions ? _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null] }));
+}

package/dist/log-viewer.d.ts

@@ -0,0 +1,39 @@
+export type LogLevel = "debug" | "info" | "warn" | "error";
+export type LogLine = {
+    id: string;
+    /** Millisecondes ou `Date`. */
+    time: number | Date;
+    level?: LogLevel;
+    message: string;
+};
+export declare const LOG_LEVEL_LABEL: Record<LogLevel, string>;
+/** Les lignes qui passent les niveaux choisis (aucun : tous) et contiennent la recherche. */
+export declare function filterLogLines(lines: ReadonlyArray<LogLine>, { levels, query }: {
+    levels?: ReadonlyArray<LogLevel>;
+    query?: string;
+}): ReadonlyArray<LogLine>;
+/** Le texte copié : une ligne par entrée, heure, niveau, message. */
+export declare function formatLogLines(lines: ReadonlyArray<LogLine>, formatTime?: (time: number | Date) => string): string;
+/** Les lignes à rendre pour une position de défilement : `[début, fin)`. */
+export declare function visibleRange(scrollTop: number, viewport: number, count: number): [start: number, end: number];
+/**
+ * Journaux d'un déploiement, d'une fonction, d'un envoi : flux en chasse fixe, heure et niveau
+ * en tête de ligne. Filtre par niveau, recherche (surlignée), copie de ce qui est affiché.
+ *
+ * `live` : le flux grossit encore. « Suivre » garde le bas en vue ; remonter dans le journal
+ * l'arrête, « Suivre » ou le bouton du bas le reprend.
+ *
+ * Seules les lignes visibles sont dans la page (hauteur de ligne fixe, lignes longues défilant
+ * de côté) : dix mille lignes coûtent autant que cinquante.
+ */
+export declare function LogViewer({ lines, label, live, height, formatTime, emptyLabel, className, }: {
+    lines: ReadonlyArray<LogLine>;
+    /** Nom du journal pour les lecteurs d'écran. */
+    label?: string;
+    live?: boolean;
+    /** Hauteur de la zone des lignes, en pixels. */
+    height?: number;
+    formatTime?: (time: number | Date) => string;
+    emptyLabel?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/log-viewer.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import ArrowDownDoubleIcon from "@hugeicons/core-free-icons/ArrowDownDoubleIcon";
+import Copy01Icon from "@hugeicons/core-free-icons/Copy01Icon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useDeferredValue, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { buttonVariants } from "./button.js";
+import { cn } from "./cn.js";
+import { useCopy } from "./copy-button.js";
+import { Input } from "./input.js";
+export const LOG_LEVEL_LABEL = {
+    debug: "Debug",
+    info: "Info",
+    warn: "Alerte",
+    error: "Erreur",
+};
+const LEVELS = ["debug", "info", "warn", "error"];
+const LEVEL_INK = {
+    debug: "text-muted-foreground/70",
+    info: "text-muted-foreground",
+    warn: "text-status-degraded-ink",
+    error: "text-destructive",
+};
+/** Hauteur fixe d'une ligne, en pixels : c'est elle qui permet de n'afficher que la partie visible. */
+const ROW = 24;
+/** Lignes rendues au-delà de la partie visible, en haut et en bas, pour un défilement sans trou. */
+const OVERSCAN = 20;
+const clock = new Intl.DateTimeFormat("fr-CH", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3,
+});
+/** Les lignes qui passent les niveaux choisis (aucun : tous) et contiennent la recherche. */
+export function filterLogLines(lines, { levels = [], query = "" }) {
+    const needle = query.trim().toLocaleLowerCase("fr-CH");
+    if (levels.length === 0 && needle === "")
+        return lines;
+    return lines.filter((line) => (levels.length === 0 || (line.level !== undefined && levels.includes(line.level))) &&
+        (needle === "" || line.message.toLocaleLowerCase("fr-CH").includes(needle)));
+}
+/** Le texte copié : une ligne par entrée, heure, niveau, message. */
+export function formatLogLines(lines, formatTime = (t) => clock.format(t)) {
+    return lines
+        .map((line) => [formatTime(line.time), line.level?.toUpperCase(), line.message].filter(Boolean).join(" "))
+        .join("\n");
+}
+/** Les lignes à rendre pour une position de défilement : `[début, fin)`. */
+export function visibleRange(scrollTop, viewport, count) {
+    const start = Math.max(0, Math.floor(scrollTop / ROW) - OVERSCAN);
+    const end = Math.min(count, Math.ceil((scrollTop + viewport) / ROW) + OVERSCAN);
+    return [start, end];
+}
+function Highlight({ text, query }) {
+    const needle = query.trim().toLocaleLowerCase("fr-CH");
+    if (needle === "")
+        return text;
+    const parts = [];
+    const lower = text.toLocaleLowerCase("fr-CH");
+    let from = 0;
+    let at = lower.indexOf(needle);
+    while (at !== -1) {
+        if (at > from)
+            parts.push(text.slice(from, at));
+        parts.push(_jsx("mark", { className: "rounded-sm bg-status-degraded/30 text-foreground", children: text.slice(at, at + needle.length) }, at));
+        from = at + needle.length;
+        at = lower.indexOf(needle, from);
+    }
+    parts.push(text.slice(from));
+    return parts;
+}
+const CHIP = "inline-flex h-8 items-center rounded-full px-3 text-xs font-medium text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out select-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-pressed:bg-foreground data-pressed:text-background";
+/**
+ * Journaux d'un déploiement, d'une fonction, d'un envoi : flux en chasse fixe, heure et niveau
+ * en tête de ligne. Filtre par niveau, recherche (surlignée), copie de ce qui est affiché.
+ *
+ * `live` : le flux grossit encore. « Suivre » garde le bas en vue ; remonter dans le journal
+ * l'arrête, « Suivre » ou le bouton du bas le reprend.
+ *
+ * Seules les lignes visibles sont dans la page (hauteur de ligne fixe, lignes longues défilant
+ * de côté) : dix mille lignes coûtent autant que cinquante.
+ */
+/* oxlint-disable jsx-a11y/no-noninteractive-tabindex -- zone de défilement focalisable, voulu */
+export function LogViewer({ lines, label = "Journaux", live = false, height = 420, formatTime = (t) => clock.format(t), emptyLabel = "Aucune ligne pour l'instant.", className, }) {
+    const [query, setQuery] = useState("");
+    const [levels, setLevels] = useState([]);
+    const [follow, setFollow] = useState(true);
+    const [scrollTop, setScrollTop] = useState(0);
+    const viewport = useRef(null);
+    const { copied, copy } = useCopy();
+    const deferredQuery = useDeferredValue(query);
+    const shown = useMemo(() => filterLogLines(lines, { levels, query: deferredQuery }), [lines, levels, deferredQuery]);
+    const hasLevels = useMemo(() => lines.some((l) => l.level !== undefined), [lines]);
+    const following = live && follow;
+    const [start, end] = visibleRange(scrollTop, height, shown.length);
+    useLayoutEffect(() => {
+        const el = viewport.current;
+        if (!following || !el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, [following, shown]);
+    function onScroll() {
+        const el = viewport.current;
+        if (!el)
+            return;
+        setScrollTop(el.scrollTop);
+        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= ROW;
+        if (live && follow && !atBottom)
+            setFollow(false);
+    }
+    return (_jsxs("div", { "data-slot": "log-viewer", className: cn("surface flex min-w-0 flex-col overflow-hidden rounded-3xl", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 p-3", children: [_jsx(Input, { type: "search", "aria-label": "Rechercher dans les journaux", placeholder: "Rechercher\u2026", autoComplete: "off", spellCheck: false, value: query, onChange: (event) => setQuery(event.target.value), className: "h-9 min-w-0 flex-1 basis-full sm:max-w-xs sm:basis-48 lg:h-9" }), hasLevels ? (_jsx(ToggleGroup, { multiple: true, "aria-label": "Niveaux", value: levels, onValueChange: (value) => setLevels(LEVELS.filter((l) => value.includes(l))), className: "flex items-center gap-1", children: LEVELS.map((level) => (_jsx(Toggle, { value: level, className: CHIP, children: LOG_LEVEL_LABEL[level] }, level))) })) : null, _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [live ? (_jsx(Toggle, { pressed: follow, onPressedChange: setFollow, className: CHIP, children: "Suivre" })) : null, _jsx("button", { type: "button", "aria-label": copied ? "Copié" : "Copier les lignes affichées", title: copied ? "Copié" : "Copier les lignes affichées", disabled: shown.length === 0, onClick: () => void copy(formatLogLines(shown, formatTime)), className: cn(buttonVariants({ variant: "ghost", size: "icon-sm" }), "text-muted-foreground"), children: _jsx(HugeiconsIcon, { icon: copied ? Tick02Icon : Copy01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4 pop-in" }, copied ? "ok" : "copy") })] })] }), _jsxs("div", { className: "relative", children: [_jsx("div", { ref: viewport, role: "log", "aria-label": label, "aria-live": "off", tabIndex: 0, onScroll: onScroll, style: { height }, className: "overflow-auto border-t border-foreground/5 py-2 font-mono text-[13px] leading-6 outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset", children: shown.length === 0 ? (_jsx("p", { className: "px-4 font-sans text-sm text-muted-foreground", children: lines.length === 0 ? emptyLabel : "Aucune ligne ne correspond." })) : (_jsx("div", { style: { height: shown.length * ROW }, className: "relative w-max min-w-full", children: _jsx("div", { style: { transform: `translateY(${start * ROW}px)` }, children: shown.slice(start, end).map((line) => (_jsxs("div", { "data-slot": "log-line", "data-level": line.level, style: { height: ROW }, className: cn("flex gap-3 px-4 whitespace-pre hover:bg-foreground/[0.03]", line.level === "error" && "bg-destructive/[0.05]"), children: [_jsx("time", { className: "shrink-0 text-muted-foreground tabular-nums select-none", children: formatTime(line.time) }), hasLevels ? (_jsx("span", { className: cn("w-14 shrink-0 uppercase", line.level && LEVEL_INK[line.level]), children: line.level ? LOG_LEVEL_LABEL[line.level] : "" })) : null, _jsx("span", { children: _jsx(Highlight, { text: line.message, query: deferredQuery }) })] }, line.id))) }) })) }), live && !follow ? (_jsxs("button", { type: "button", onClick: () => setFollow(true), className: cn(buttonVariants({ variant: "secondary", size: "xs" }), "absolute bottom-3 left-1/2 -translate-x-1/2 shadow-lg shadow-black/10"), children: [_jsx(HugeiconsIcon, { icon: ArrowDownDoubleIcon, strokeWidth: 2, "aria-hidden": true }), "Revenir en bas"] })) : null] }), _jsx("p", { className: "sr-only", "aria-live": "polite", children: deferredQuery.trim() !== "" || levels.length > 0 ? `${shown.length} lignes sur ${lines.length}` : "" })] }));
+}

package/dist/middle-truncate.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Où couper : la fin gardée entière. Un chemin garde son dernier segment (`…/src/app.tsx`), un
+ * identifiant ses `tail` derniers caractères (`dpl_8f3a…c91e`). La fin d'un identifiant est celle
+ * qu'on compare d'un coup d'œil, comme dans un hash git.
+ */
+export declare function splitForTruncation(text: string, tail?: number): [start: string, end: string];
+/**
+ * Un texte long coupé au milieu quand la place manque : le début s'efface en « … », la fin reste
+ * lisible. Le texte entier reste dans la page (lecteurs d'écran, sélection, copie, recherche du
+ * navigateur) et dans l'infobulle native. Pur CSS : aucune mesure, la coupe suit la largeur.
+ */
+export declare function MiddleTruncate({ text, tail, className, }: {
+    text: string;
+    /** Caractères gardés à la fin quand le texte n'est pas un chemin. */
+    tail?: number;
+    className?: string;
+}): React.JSX.Element;

package/dist/middle-truncate.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/**
+ * Où couper : la fin gardée entière. Un chemin garde son dernier segment (`…/src/app.tsx`), un
+ * identifiant ses `tail` derniers caractères (`dpl_8f3a…c91e`). La fin d'un identifiant est celle
+ * qu'on compare d'un coup d'œil, comme dans un hash git.
+ */
+export function splitForTruncation(text, tail = 8) {
+    if (text.length <= tail * 2)
+        return [text, ""];
+    const slash = text.lastIndexOf("/", text.length - 2);
+    const segment = slash > 0 ? text.length - slash : 0;
+    // Un dernier segment trop long ou trop court ne sert pas de fin : on revient aux caractères.
+    const keep = segment > 2 && segment <= tail * 3 ? segment : tail;
+    return [text.slice(0, text.length - keep), text.slice(text.length - keep)];
+}
+/**
+ * Un texte long coupé au milieu quand la place manque : le début s'efface en « … », la fin reste
+ * lisible. Le texte entier reste dans la page (lecteurs d'écran, sélection, copie, recherche du
+ * navigateur) et dans l'infobulle native. Pur CSS : aucune mesure, la coupe suit la largeur.
+ */
+export function MiddleTruncate({ text, tail = 8, className, }) {
+    const [start, end] = splitForTruncation(text, tail);
+    return (_jsxs("span", { "data-slot": "middle-truncate", title: text, className: cn("inline-flex max-w-full min-w-0", className), children: [_jsx("span", { className: "min-w-0 truncate", children: start }), end ? _jsx("span", { className: "shrink-0 whitespace-pre", children: end }) : null] }));
+}

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/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

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.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",