@hgdc/ui 0.2.1 → 0.4.0

package/dist/command-menu.d.ts

@@ -0,0 +1,56 @@
+import { type IconSvgElement } from "@hugeicons/react";
+export type Command = {
+    /** Unique dans toute la palette. */
+    id: string;
+    label: string;
+    icon?: IconSvgElement;
+    /** Autres mots qui trouvent la commande : « dns » pour « Ajouter un domaine ». */
+    keywords?: Array<string>;
+    /** Texte discret à droite : l'organisation d'un projet, « Page ». */
+    hint?: string;
+    /** Touches affichées à droite, par exemple `["G", "P"]`. */
+    shortcut?: Array<string>;
+    onSelect: () => void;
+};
+/** Les groupes de la famille, dans cet ordre : « Aller à », « Créer », « Changer ». */
+export type CommandGroup = {
+    label: string;
+    items: Array<Command>;
+};
+/**
+ * Une commande répond à la recherche si chaque mot tapé figure dans son libellé ou ses mots-clés,
+ * sans tenir compte des accents ni de la casse : « creer dom » trouve « Créer un domaine ».
+ */
+export declare function matchCommand(command: Pick<Command, "label" | "keywords">, query: string): boolean;
+/**
+ * `Ctrl+K` (`⌘K` sur Mac) partout, même dans un champ : c'est le geste qui ouvre tout. Le produit
+ * le pose une fois, autour de sa coque.
+ */
+export declare function useCommandMenuShortcut(onToggle: () => void, key?: string): void;
+/**
+ * Palette de commandes : chercher une page, créer une ressource, changer d'organisation ou de
+ * thème, sans la souris. Bâtie sur l'`Autocomplete` de Base UI rendu dans un `Dialog`, comme
+ * l'exemple « Command palette » de sa documentation : flèches pour choisir, Entrée pour lancer,
+ * Échap pour fermer, focus rendu à l'élément d'origine.
+ *
+ * Sans animation, ni à l'ouverture ni à la fermeture : elle s'ouvre des dizaines de fois par
+ * jour, au clavier, et doit être là à l'instant où la touche est pressée.
+ */
+export declare function CommandMenu({ groups, open: openProp, onOpenChange, placeholder, emptyLabel, shortcut, }: {
+    groups: Array<CommandGroup>;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    emptyLabel?: string;
+    /** Ouvrir et fermer par `Ctrl+K`. `false` si le produit gère le raccourci lui-même. */
+    shortcut?: boolean;
+}): React.JSX.Element;
+/**
+ * Le bouton qui ouvre la palette, pour la souris et le doigt : « Rechercher » et le raccourci.
+ * Dans la barre latérale ou l'en-tête.
+ */
+export declare function CommandMenuButton({ onClick, label, className, }: {
+    onClick: () => void;
+    label?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/command-menu.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import Search01Icon from "@hugeicons/core-free-icons/Search01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { FLOATING_SURFACE } from "./floating.js";
+import { Kbd, KbdGroup, isApplePlatform } from "./kbd.js";
+import { cn } from "./cn.js";
+function normalize(text) {
+    return text
+        .normalize("NFD")
+        .replace(/\p{Diacritic}/gu, "")
+        .toLowerCase();
+}
+/**
+ * Une commande répond à la recherche si chaque mot tapé figure dans son libellé ou ses mots-clés,
+ * sans tenir compte des accents ni de la casse : « creer dom » trouve « Créer un domaine ».
+ */
+export function matchCommand(command, query) {
+    const words = normalize(query).split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return true;
+    const haystack = normalize([command.label, ...(command.keywords ?? [])].join(" "));
+    return words.every((word) => haystack.includes(word));
+}
+/**
+ * `Ctrl+K` (`⌘K` sur Mac) partout, même dans un champ : c'est le geste qui ouvre tout. Le produit
+ * le pose une fois, autour de sa coque.
+ */
+export function useCommandMenuShortcut(onToggle, key = "k") {
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key.toLowerCase() !== key || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey)
+                return;
+            event.preventDefault();
+            onToggle();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onToggle, key]);
+}
+/**
+ * Palette de commandes : chercher une page, créer une ressource, changer d'organisation ou de
+ * thème, sans la souris. Bâtie sur l'`Autocomplete` de Base UI rendu dans un `Dialog`, comme
+ * l'exemple « Command palette » de sa documentation : flèches pour choisir, Entrée pour lancer,
+ * Échap pour fermer, focus rendu à l'élément d'origine.
+ *
+ * Sans animation, ni à l'ouverture ni à la fermeture : elle s'ouvre des dizaines de fois par
+ * jour, au clavier, et doit être là à l'instant où la touche est pressée.
+ */
+export function CommandMenu({ groups, open: openProp, onOpenChange, placeholder = "Rechercher une page, une action…", emptyLabel = "Aucune commande ne correspond.", shortcut = true, }) {
+    const [openState, setOpenState] = useState(false);
+    const open = openProp ?? openState;
+    const setOpen = useCallback((next) => {
+        if (openProp === undefined)
+            setOpenState(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
+    useCommandMenuShortcut(shortcut ? toggle : noop);
+    const visibleGroups = groups.filter((group) => group.items.length > 0);
+    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: setOpen, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-0 z-50 bg-foreground/30 dark:bg-black/60" }), _jsx(DialogPrimitive.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center px-2 pt-[min(12dvh,6rem)] pb-2", children: _jsx(DialogPrimitive.Popup, { "data-slot": "command-menu", "aria-label": "Palette de commandes", className: cn(FLOATING_SURFACE, "flex max-h-[min(36rem,calc(100dvh-2rem))] w-full max-w-xl flex-col overflow-hidden rounded-3xl shadow-2xl shadow-black/10 outline-none"), children: _jsxs(Autocomplete.Root, { open: true, inline: true, items: visibleGroups, itemToStringValue: (command) => command.label, filter: (command, query) => matchCommand(command, query), autoHighlight: "always", keepHighlight: true, children: [_jsxs(Autocomplete.InputGroup, { className: "flex items-center gap-3 border-b border-foreground/5 px-4", children: [_jsx(HugeiconsIcon, { icon: Search01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" }), _jsx(Autocomplete.Input, { "aria-label": "Rechercher une commande", placeholder: placeholder, className: "h-14 w-full min-w-0 bg-transparent text-base outline-none placeholder:text-muted-foreground" }), _jsx(DialogPrimitive.Close, { className: "sr-only", children: "Fermer la palette" })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5 [scroll-padding-block:0.375rem]", children: [_jsx(Autocomplete.Empty, { className: "px-3 py-10 text-center text-sm text-muted-foreground empty:hidden", children: emptyLabel }), _jsx(Autocomplete.List, { children: (group) => (_jsxs(Autocomplete.Group, { items: group.items, className: "not-last:mb-1.5", children: [_jsx(Autocomplete.GroupLabel, { className: "px-3 pt-2 pb-1.5 text-xs font-medium text-muted-foreground", children: group.label }), _jsx(Autocomplete.Collection, { children: (command) => (_jsxs(Autocomplete.Item, { value: command, onClick: () => {
+                                                                setOpen(false);
+                                                                command.onSelect();
+                                                            }, className: "flex min-h-11 cursor-default items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium outline-none select-none data-highlighted:bg-muted lg:min-h-10", children: [command.icon ? (_jsx(HugeiconsIcon, { icon: command.icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: command.label }), command.hint ? (_jsx("span", { className: "shrink-0 truncate text-xs font-normal text-muted-foreground", children: command.hint })) : null, command.shortcut ? (_jsx(KbdGroup, { className: "hidden shrink-0 sm:inline-flex", children: command.shortcut.map((key) => (_jsx(Kbd, { children: key }, key))) })) : null] }, command.id)) })] }, group.label)) })] }), _jsxs("div", { className: "hidden items-center gap-4 border-t border-foreground/5 px-4 py-2.5 text-xs text-muted-foreground sm:flex", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" })] }), "Choisir"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Kbd, { children: "Entr\u00E9e" }), "Ouvrir"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Kbd, { children: "\u00C9chap" }), "Fermer"] })] })] }) }) })] }) }));
+}
+function noop() { }
+function subscribeNever() {
+    return noop;
+}
+/**
+ * Le bouton qui ouvre la palette, pour la souris et le doigt : « Rechercher » et le raccourci.
+ * Dans la barre latérale ou l'en-tête.
+ */
+export function CommandMenuButton({ onClick, label = "Rechercher", className, }) {
+    const apple = useSyncExternalStore(subscribeNever, isApplePlatform, () => false);
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-keyshortcuts": "Control+K Meta+K", className: cn("touch-target flex h-9 w-full max-w-sm min-w-0 items-center gap-2 rounded-xl bg-foreground/[0.05] px-3 text-sm text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", className), children: [_jsx(HugeiconsIcon, { icon: Search01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: label }), _jsxs(KbdGroup, { "aria-hidden": true, className: "max-lg:hidden", children: [_jsx(Kbd, { children: apple ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: "K" })] })] }));
+}

package/dist/copy-button.d.ts

@@ -0,0 +1,26 @@
+/** Copie dans le presse-papiers, et dit si c'est fait pendant 1,5 s. */
+export declare function useCopy(): {
+    copied: boolean;
+    copy: (value: string) => Promise<boolean>;
+};
+/**
+ * Bouton-icône qui copie une valeur ; l'icône devient une coche, et « Copié » est annoncé aux
+ * lecteurs d'écran.
+ */
+export declare function CopyButton({ value, label, className, }: {
+    value: string;
+    label?: string;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Une commande, une valeur DNS, une URL : en police à chasse fixe, sur une ligne qui défile si
+ * elle est longue, avec son bouton de copie. `prompt` affiche « $ » devant une commande, sans
+ * qu'il soit copié.
+ */
+export declare function Snippet({ value, prompt, label, className, }: {
+    value: string;
+    prompt?: boolean;
+    /** Nom accessible du bouton : « Copier la commande ». */
+    label?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/copy-button.js

@@ -0,0 +1,46 @@
+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 { useEffect, useState } from "react";
+import { cn } from "./cn.js";
+/** Copie dans le presse-papiers, et dit si c'est fait pendant 1,5 s. */
+export function useCopy() {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = setTimeout(() => setCopied(false), 1500);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    return {
+        copied,
+        copy: async (value) => {
+            try {
+                await navigator.clipboard.writeText(value);
+                setCopied(true);
+                return true;
+            }
+            catch {
+                // Presse-papiers refusé (page non sécurisée, permission) : rien n'est annoncé comme copié.
+                return false;
+            }
+        },
+    };
+}
+/**
+ * Bouton-icône qui copie une valeur ; l'icône devient une coche, et « Copié » est annoncé aux
+ * lecteurs d'écran.
+ */
+export function CopyButton({ value, label = "Copier", className, }) {
+    const { copied, copy } = useCopy();
+    return (_jsxs("button", { type: "button", "aria-label": copied ? "Copié" : label, title: copied ? "Copié" : label, onClick: () => void copy(value), className: cn("touch-target grid size-8 shrink-0 pressable place-items-center rounded-lg text-muted-foreground outline-none hover:bg-foreground/[0.06] hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", copied && "text-status-active-ink hover:text-status-active-ink", className), children: [_jsx(HugeiconsIcon, { icon: copied ? Tick02Icon : Copy01Icon, "aria-hidden": true, className: "size-4 pop-in" }, copied ? "ok" : "copy"), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copié" : "" })] }));
+}
+/**
+ * Une commande, une valeur DNS, une URL : en police à chasse fixe, sur une ligne qui défile si
+ * elle est longue, avec son bouton de copie. `prompt` affiche « $ » devant une commande, sans
+ * qu'il soit copié.
+ */
+export function Snippet({ value, prompt = false, label, className, }) {
+    return (_jsxs("div", { "data-slot": "snippet", className: cn("flex min-w-0 items-center gap-2 rounded-2xl bg-foreground/[0.05] py-1.5 pr-1.5 pl-4", className), children: [_jsxs("pre", { className: "min-w-0 flex-1 overflow-x-auto py-1 font-mono text-[13px] [scrollbar-width:thin]", children: [prompt ? (_jsx("span", { "aria-hidden": true, className: "mr-2 text-muted-foreground select-none", children: "$" })) : null, _jsx("code", { children: value })] }), _jsx(CopyButton, { value: value, ...(label !== undefined ? { label } : {}) })] }));
+}

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;