@hgdc/ui 0.2.1 → 0.3.0

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/kbd.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Une touche de clavier : `<Kbd>Ctrl</Kbd><Kbd>K</Kbd>`. Teinte discrète, chiffres et lettres en
+ * largeur fixe. Dans une infobulle, elle prend l'encre inversée.
+ */
+export declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): React.JSX.Element;
+/** Plusieurs touches d'un même raccourci, espacées et lues comme un groupe. */
+export declare function KbdGroup({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/** « ⌘ » sur Mac, « Ctrl » ailleurs. `false` au rendu serveur, puis corrigé au montage. */
+export declare function isApplePlatform(): boolean;

package/dist/kbd.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/**
+ * Une touche de clavier : `<Kbd>Ctrl</Kbd><Kbd>K</Kbd>`. Teinte discrète, chiffres et lettres en
+ * largeur fixe. Dans une infobulle, elle prend l'encre inversée.
+ */
+export function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-md bg-foreground/[0.07] px-1 font-sans text-[11px] font-medium text-muted-foreground tabular-nums select-none", className), ...props }));
+}
+/** Plusieurs touches d'un même raccourci, espacées et lues comme un groupe. */
+export function KbdGroup({ className, ...props }) {
+    return _jsx("span", { "data-slot": "kbd-group", className: cn("inline-flex items-center gap-1", className), ...props });
+}
+/** « ⌘ » sur Mac, « Ctrl » ailleurs. `false` au rendu serveur, puis corrigé au montage. */
+export function isApplePlatform() {
+    if (typeof navigator === "undefined")
+        return false;
+    return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+}

package/dist/org-switcher.d.ts

@@ -0,0 +1,32 @@
+/** Les trois rôles d'une organisation de la famille. */
+export type OrgRole = "owner" | "admin" | "member";
+export declare const ORG_ROLE_LABEL: Record<OrgRole, string>;
+export type Organization = {
+    id: string;
+    name: string;
+    role?: OrgRole;
+    /** URL d'un logo carré ; sans logo, les deux premières lettres du nom. */
+    logo?: string;
+};
+/** Un lien dans un menu, à l'allure d'un `DropdownMenuItem`. */
+export declare const MENU_LINK_ITEM: string;
+/** Marque d'une organisation : son logo, ou ses deux premières lettres sur un carré arrondi. */
+export declare function OrgMark({ org, className, }: {
+    org: Pick<Organization, "name" | "logo">;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Haut de la barre latérale : l'organisation active, et le menu pour en changer ou en créer une.
+ * Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
+ * l'URL `/o/<slug>/…`), le kit n'appelle rien.
+ */
+export declare function OrgSwitcher({ organizations, activeId, onSelect, createHref, onCreate, className, }: {
+    organizations: Array<Organization>;
+    activeId: string;
+    onSelect: (id: string) => void;
+    /** Lien « Créer une organisation ». */
+    createHref?: string;
+    /** Ou une action, si la création s'ouvre dans une boîte de dialogue. */
+    onCreate?: () => void;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/org-switcher.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PlusSignIcon from "@hugeicons/core-free-icons/PlusSignIcon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import UnfoldMoreIcon from "@hugeicons/core-free-icons/UnfoldMoreIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { cn } from "./cn.js";
+export const ORG_ROLE_LABEL = {
+    owner: "Propriétaire",
+    admin: "Admin",
+    member: "Membre",
+};
+/** Un lien dans un menu, à l'allure d'un `DropdownMenuItem`. */
+export const MENU_LINK_ITEM = "relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-muted focus:text-foreground data-highlighted:bg-muted max-lg:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+/** Marque d'une organisation : son logo, ou ses deux premières lettres sur un carré arrondi. */
+export function OrgMark({ org, className, }) {
+    if (org.logo)
+        return _jsx("img", { src: org.logo, alt: "", className: cn("size-8 shrink-0 rounded-lg object-cover", className) });
+    return (_jsx("span", { "aria-hidden": true, className: cn("grid size-8 shrink-0 place-items-center rounded-lg bg-foreground text-xs font-semibold text-background uppercase", className), children: org.name.slice(0, 2) }));
+}
+/**
+ * Haut de la barre latérale : l'organisation active, et le menu pour en changer ou en créer une.
+ * Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
+ * l'URL `/o/<slug>/…`), le kit n'appelle rien.
+ */
+export function OrgSwitcher({ organizations, activeId, onSelect, createHref, onCreate, className, }) {
+    const active = organizations.find((org) => org.id === activeId);
+    if (!active)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": `Organisation ${active.name}, changer d'organisation`, className: cn("flex h-10 w-full min-w-0 items-center gap-2.5 rounded-xl px-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted", "lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:w-auto lg:rail:justify-center lg:rail:px-1", className) }), children: [_jsx(OrgMark, { org: active }), _jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: active.name }), active.role ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: ORG_ROLE_LABEL[active.role] })) : null] }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground lg:text-shell-muted lg:rail:hidden" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Organisations" }), organizations.map((org) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(org.id), children: [_jsx(OrgMark, { org: org, className: "size-6 rounded-md bg-muted text-[10px] text-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name }), org.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Organisation active", className: "size-4" })) : org.role ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: ORG_ROLE_LABEL[org.role] })) : null] }, org.id)))] }), createHref !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(MenuPrimitive.LinkItem, { href: createHref, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : onCreate !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onCreate, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : null] })] }));
+}

package/dist/page-header.d.ts

@@ -0,0 +1,27 @@
+import type { ReactElement, ReactNode } from "react";
+export type Crumb = {
+    label: string;
+    /** Lien simple. Pour le routeur du produit, passer `render={<Link to="…" />}`. */
+    href?: string;
+    render?: ReactElement;
+};
+/**
+ * Fil d'Ariane court : organisation, projet, ressource. Le dernier élément est la page ouverte,
+ * en texte simple et `aria-current="page"`.
+ */
+export declare function Breadcrumbs({ items, className }: {
+    items: Array<Crumb>;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * En-tête d'une page : fil d'Ariane, titre, description, actions à droite. Une seule action
+ * primaire (`Button` par défaut), les autres dans un menu « … » (`DropdownMenu`). Sous `sm`, les
+ * actions passent sous le titre.
+ */
+export declare function PageHeader({ title, description, actions, breadcrumbs, className, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    breadcrumbs?: Array<Crumb>;
+    className?: string;
+}): React.JSX.Element;

package/dist/page-header.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "./cn.js";
+const crumbLink = "rounded-md text-muted-foreground transition-colors duration-(--duration-fast) ease-out outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50";
+function CrumbLink({ crumb }) {
+    return useRender({
+        defaultTagName: "a",
+        render: crumb.render,
+        props: { href: crumb.href, className: crumbLink, children: crumb.label },
+    });
+}
+/**
+ * Fil d'Ariane court : organisation, projet, ressource. Le dernier élément est la page ouverte,
+ * en texte simple et `aria-current="page"`.
+ */
+export function Breadcrumbs({ items, className }) {
+    return (_jsx("nav", { "aria-label": "Fil d'Ariane", className: cn("min-w-0", className), children: _jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-1 text-sm", children: items.map((crumb, index) => {
+                const last = index === items.length - 1;
+                return (_jsxs("li", { className: "flex min-w-0 items-center gap-1", children: [last || (crumb.href === undefined && crumb.render === undefined) ? (_jsx("span", { "aria-current": last ? "page" : undefined, className: cn("truncate", last ? "text-foreground" : "text-muted-foreground"), children: crumb.label })) : (_jsx(CrumbLink, { crumb: crumb })), last ? null : (_jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground/60" }))] }, `${index}-${crumb.label}`));
+            }) }) }));
+}
+/**
+ * En-tête d'une page : fil d'Ariane, titre, description, actions à droite. Une seule action
+ * primaire (`Button` par défaut), les autres dans un menu « … » (`DropdownMenu`). Sous `sm`, les
+ * actions passent sous le titre.
+ */
+export function PageHeader({ title, description, actions, breadcrumbs, className, }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("mb-8 grid gap-3", className), children: [breadcrumbs?.length ? _jsx(Breadcrumbs, { items: breadcrumbs }) : null, _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight sm:text-[28px]", children: title }), description ? _jsx("p", { className: "mt-1.5 max-w-prose text-sm text-muted-foreground", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null] })] }));
+}

package/dist/popover.d.ts

@@ -0,0 +1,13 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+/**
+ * Bulle ouverte par un clic : une explication (« Qu'est-ce qu'un domaine vérifié ? »), un petit
+ * formulaire, un filtre. Elle garde le focus, se ferme par Échap ou un clic à côté, et rend le
+ * focus à son déclencheur. Même surface que les menus (`floating.ts`).
+ */
+declare const Popover: typeof PopoverPrimitive.Root;
+declare const PopoverTrigger: typeof PopoverPrimitive.Trigger;
+declare const PopoverClose: typeof PopoverPrimitive.Close;
+declare function PopoverContent({ className, side, sideOffset, align, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "side" | "sideOffset" | "align">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverClose, PopoverContent, PopoverTitle, PopoverDescription };

package/dist/popover.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { FLOATING_COLLISION_AVOIDANCE, FLOATING_COLLISION_PADDING, FLOATING_MAX_WIDTH, FLOATING_SURFACE, } from "./floating.js";
+import { cn } from "./cn.js";
+/**
+ * Bulle ouverte par un clic : une explication (« Qu'est-ce qu'un domaine vérifié ? »), un petit
+ * formulaire, un filtre. Elle garde le focus, se ferme par Échap ou un clic à côté, et rend le
+ * focus à son déclencheur. Même surface que les menus (`floating.ts`).
+ */
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverClose = PopoverPrimitive.Close;
+function PopoverContent({ className, side = "bottom", sideOffset = 6, align = "center", ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { className: "isolate z-50 outline-none", side: side, sideOffset: sideOffset, align: align, collisionPadding: FLOATING_COLLISION_PADDING, collisionAvoidance: FLOATING_COLLISION_AVOIDANCE, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn(FLOATING_MAX_WIDTH, FLOATING_SURFACE, "grid w-72 origin-(--transform-origin) gap-2 rounded-2xl p-4 text-sm outline-none", "transition-[scale,opacity] duration-(--duration-fast) ease-ios data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-(--duration-instant) data-starting-style:scale-[0.98] data-starting-style:opacity-0", className), ...props }) }) }));
+}
+function PopoverTitle({ className, ...props }) {
+    return _jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", className: cn("font-medium", className), ...props });
+}
+function PopoverDescription({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
+}
+export { Popover, PopoverTrigger, PopoverClose, PopoverContent, PopoverTitle, PopoverDescription };

package/dist/radio-group.d.ts

@@ -0,0 +1,16 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+/**
+ * Groupe de boutons radio : un seul choix parmi peu d'options, toutes visibles. Les flèches
+ * passent d'une option à l'autre, Tab sort du groupe. Le groupe se nomme par
+ * `aria-labelledby` (un titre) ou un `Fieldset`.
+ *
+ * ```tsx
+ * <RadioGroup aria-labelledby="role" defaultValue="member">
+ *   <label className="flex items-center gap-2.5 text-sm"><RadioGroupItem value="admin" /> Admin</label>
+ *   <label className="flex items-center gap-2.5 text-sm"><RadioGroupItem value="member" /> Membre</label>
+ * </RadioGroup>
+ * ```
+ */
+export declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): React.JSX.Element;
+export declare function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props): React.JSX.Element;

package/dist/radio-group.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "./cn.js";
+/**
+ * Groupe de boutons radio : un seul choix parmi peu d'options, toutes visibles. Les flèches
+ * passent d'une option à l'autre, Tab sort du groupe. Le groupe se nomme par
+ * `aria-labelledby` (un titre) ou un `Fieldset`.
+ *
+ * ```tsx
+ * <RadioGroup aria-labelledby="role" defaultValue="member">
+ *   <label className="flex items-center gap-2.5 text-sm"><RadioGroupItem value="admin" /> Admin</label>
+ *   <label className="flex items-center gap-2.5 text-sm"><RadioGroupItem value="member" /> Membre</label>
+ * </RadioGroup>
+ * ```
+ */
+export function RadioGroup({ className, ...props }) {
+    return _jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
+}
+export function RadioGroupItem({ className, ...props }) {
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("touch-target grid size-5 shrink-0 place-items-center rounded-full border border-foreground/25 bg-background", "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/40 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive data-invalid:border-destructive", "dark:bg-white/[0.04]", className), ...props, children: _jsx(RadioPrimitive.Indicator, { className: "size-2 rounded-full bg-primary-foreground data-unchecked:hidden" }) }));
+}

package/dist/relative-time.d.ts

@@ -0,0 +1,16 @@
+/**
+ * « à l'instant », « il y a 3 min », « il y a 2 h », « hier », « il y a 4 j », puis la date
+ * (« 3 oct. », avec l'année si ce n'est pas celle de `now`). Le futur se dit « dans 5 min ».
+ */
+export declare function formatRelative(date: number | Date, now?: number): string;
+/** Date complète, pour l'infobulle : « jeudi 15 octobre 2026 à 14:32:05 ». */
+export declare function formatFullDate(date: number | Date): string;
+/**
+ * Une date relative qui se met à jour seule (toutes les 30 s), la date exacte au survol.
+ * `now` fixe l'instant de référence (tests, listes qui partagent une horloge).
+ */
+export declare function RelativeTime({ date, now, className, }: {
+    date: number | Date;
+    now?: number;
+    className?: string;
+}): React.JSX.Element;

package/dist/relative-time.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "./cn.js";
+const LOCALE = "fr-CH";
+const relative = new Intl.RelativeTimeFormat(LOCALE, { numeric: "auto", style: "short" });
+const dayMonth = new Intl.DateTimeFormat(LOCALE, { day: "numeric", month: "short" });
+const dayMonthYear = new Intl.DateTimeFormat(LOCALE, { day: "numeric", month: "short", year: "numeric" });
+const full = new Intl.DateTimeFormat(LOCALE, { dateStyle: "full", timeStyle: "medium" });
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+/**
+ * « à l'instant », « il y a 3 min », « il y a 2 h », « hier », « il y a 4 j », puis la date
+ * (« 3 oct. », avec l'année si ce n'est pas celle de `now`). Le futur se dit « dans 5 min ».
+ */
+export function formatRelative(date, now = Date.now()) {
+    const ms = typeof date === "number" ? date : date.getTime();
+    const diff = ms - now;
+    const abs = Math.abs(diff);
+    if (abs < 45_000)
+        return "à l'instant";
+    if (abs < HOUR)
+        return relative.format(Math.round(diff / MINUTE), "minute");
+    if (abs < DAY)
+        return relative.format(Math.round(diff / HOUR), "hour");
+    if (abs < 7 * DAY)
+        return relative.format(Math.round(diff / DAY), "day");
+    const d = new Date(ms);
+    return new Date(now).getFullYear() === d.getFullYear() ? dayMonth.format(d) : dayMonthYear.format(d);
+}
+/** Date complète, pour l'infobulle : « jeudi 15 octobre 2026 à 14:32:05 ». */
+export function formatFullDate(date) {
+    return full.format(typeof date === "number" ? new Date(date) : date);
+}
+function useNow(enabled) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const timer = setInterval(() => setNow(Date.now()), 30_000);
+        return () => clearInterval(timer);
+    }, [enabled]);
+    return now;
+}
+/**
+ * Une date relative qui se met à jour seule (toutes les 30 s), la date exacte au survol.
+ * `now` fixe l'instant de référence (tests, listes qui partagent une horloge).
+ */
+export function RelativeTime({ date, now, className, }) {
+    const ticking = useNow(now === undefined);
+    const ms = typeof date === "number" ? date : date.getTime();
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("time", { dateTime: new Date(ms).toISOString(), suppressHydrationWarning: true, className: cn("tabular-nums", className) }), children: formatRelative(ms, now ?? ticking) }), _jsx(TooltipContent, { children: formatFullDate(ms) })] }));
+}

package/dist/resource-list.d.ts

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode } from "react";
+/**
+ * Liste de ressources (projets, domaines, clés, moniteurs) : une carte `surface`, une ligne par
+ * ressource, séparées d'un filet. La forme des listes de Host, plus lisible qu'un tableau quand
+ * chaque ressource tient en un titre et une ligne de méta.
+ */
+export declare function ResourceList({ className, surface, ...props }: React.ComponentProps<"ul"> & {
+    surface?: boolean;
+}): React.JSX.Element;
+/**
+ * Une ressource : icône, titre, méta, badge, actions. Avec `href` ou `render`, le titre devient
+ * le lien de la ligne, étiré sur toute sa surface ; les actions restent cliquables au-dessus.
+ */
+export declare function ResourceItem({ icon, title, meta, badge, actions, href, render, className, }: {
+    /** Icône, favicon ou marque, dans une tuile de 40 px. */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Une ligne de contexte : adresse, date, auteur. Tronquée si trop longue. */
+    meta?: ReactNode;
+    badge?: ReactNode;
+    /** Boutons-icônes ou menu « … ». */
+    actions?: ReactNode;
+    href?: string;
+    /** Lien du routeur du produit : `render={<Link to="…" />}`. */
+    render?: ReactElement;
+    className?: string;
+}): React.JSX.Element;
+/** Lignes de chargement à la forme d'un `ResourceItem` avec icône. */
+export declare function ResourceListSkeleton({ rows }: {
+    rows?: number;
+}): React.JSX.Element;

package/dist/resource-list.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "./cn.js";
+import { Skeleton } from "./skeleton.js";
+/**
+ * Liste de ressources (projets, domaines, clés, moniteurs) : une carte `surface`, une ligne par
+ * ressource, séparées d'un filet. La forme des listes de Host, plus lisible qu'un tableau quand
+ * chaque ressource tient en un titre et une ligne de méta.
+ */
+export function ResourceList({ className, surface = true, ...props }) {
+    return (_jsx("ul", { "data-slot": "resource-list", className: cn("overflow-hidden", surface && "surface rounded-3xl", className), ...props }));
+}
+/**
+ * Une ressource : icône, titre, méta, badge, actions. Avec `href` ou `render`, le titre devient
+ * le lien de la ligne, étiré sur toute sa surface ; les actions restent cliquables au-dessus.
+ */
+export function ResourceItem({ icon, title, meta, badge, actions, href, render, className, }) {
+    const linked = href !== undefined || render !== undefined;
+    return (_jsxs("li", { "data-slot": "resource-item", className: cn("relative flex min-h-16 items-center gap-3 px-4 py-3 transition-colors duration-(--duration-fast) ease-out not-first:border-t not-first:border-foreground/5 sm:gap-4 sm:px-5", linked && "hover:bg-foreground/[0.03] has-focus-visible:bg-foreground/[0.03]", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-10 shrink-0 place-items-center overflow-hidden rounded-xl bg-background text-muted-foreground dark:bg-muted [&_svg:not([class*='size-'])]:size-5", children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: linked ? (_jsx(ResourceLink, { href: href, render: render, children: title })) : (title) }), meta ? _jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: meta }) : null] }), badge ? _jsx("div", { className: "hidden shrink-0 sm:block", children: badge }) : null, actions ? _jsx("div", { className: "relative z-1 flex shrink-0 items-center gap-1", children: actions }) : null] }));
+}
+function ResourceLink({ href, render, children, }) {
+    return useRender({
+        defaultTagName: "a",
+        render,
+        props: mergeProps({
+            "data-slot": "resource-link",
+            className: "outline-none after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-ring/50 focus-visible:after:ring-inset",
+        }, href !== undefined ? { href, children } : { children }),
+    });
+}
+/** Lignes de chargement à la forme d'un `ResourceItem` avec icône. */
+export function ResourceListSkeleton({ rows = 4 }) {
+    return (_jsx("ul", { "aria-hidden": true, "data-slot": "resource-list-skeleton", className: "surface overflow-hidden rounded-3xl", children: Array.from({ length: rows }, (_, i) => (_jsxs("li", { className: "flex min-h-16 items-center gap-4 px-5 py-3 not-first:border-t not-first:border-foreground/5", children: [_jsx(Skeleton, { className: "size-10 shrink-0" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-4 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-1/2 rounded-md" })] })] }, i))) }));
+}

package/dist/secret-reveal.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Un secret qui ne s'affiche qu'une fois (clé d'API, jeton) : masqué à l'écran tant qu'on ne
+ * demande pas à le voir, copiable sans l'afficher, puis retiré de la page quand la personne
+ * confirme l'avoir mis de côté. Le produit, lui, n'en garde que l'empreinte.
+ */
+export declare function SecretReveal({ value, label, onDismiss, className, }: {
+    value: string;
+    /** Ce qu'est le secret : « Clé d'API », « Jeton de déploiement ». */
+    label?: string;
+    /** Appelé quand la personne confirme l'avoir copié : le produit oublie la valeur en clair. */
+    onDismiss?: () => void;
+    className?: string;
+}): React.JSX.Element;

package/dist/secret-reveal.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ViewIcon from "@hugeicons/core-free-icons/ViewIcon";
+import ViewOffIcon from "@hugeicons/core-free-icons/ViewOffIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useId, useState } from "react";
+import { Alert } from "./alert.js";
+import { Button } from "./button.js";
+import { CopyButton } from "./copy-button.js";
+import { cn } from "./cn.js";
+const MASK = "•".repeat(24);
+/**
+ * Un secret qui ne s'affiche qu'une fois (clé d'API, jeton) : masqué à l'écran tant qu'on ne
+ * demande pas à le voir, copiable sans l'afficher, puis retiré de la page quand la personne
+ * confirme l'avoir mis de côté. Le produit, lui, n'en garde que l'empreinte.
+ */
+export function SecretReveal({ value, label = "Clé secrète", onDismiss, className, }) {
+    const [visible, setVisible] = useState(false);
+    const [dismissed, setDismissed] = useState(false);
+    const id = useId();
+    if (dismissed)
+        return (_jsxs("div", { "data-slot": "secret-reveal", "data-state": "dismissed", className: cn("grid gap-2", className), children: [_jsx("p", { className: "text-sm font-medium", children: label }), _jsxs("p", { className: "rounded-2xl bg-foreground/[0.05] px-4 py-3 font-mono text-[13px] text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, children: MASK }), _jsx("span", { className: "sr-only", children: "Valeur masqu\u00E9e" })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Cette valeur n'est plus affich\u00E9e. Pour en obtenir une nouvelle, cr\u00E9e une autre cl\u00E9." })] }));
+    return (_jsxs("div", { "data-slot": "secret-reveal", "data-state": "shown", className: cn("grid gap-3", className), children: [_jsx(Alert, { tone: "warning", title: "Copie-la maintenant", children: "Tu ne pourras plus la revoir une fois cette fen\u00EAtre ferm\u00E9e." }), _jsxs("div", { className: "grid gap-2", children: [_jsx("p", { id: id, className: "text-sm font-medium", children: label }), _jsxs("div", { className: "flex min-w-0 items-center gap-1 rounded-2xl bg-foreground/[0.05] py-1.5 pr-1.5 pl-4", children: [_jsx("code", { "aria-labelledby": id, className: "min-w-0 flex-1 truncate py-1 font-mono text-[13px]", children: visible ? value : MASK }), _jsx("button", { type: "button", onClick: () => setVisible((v) => !v), "aria-label": visible ? "Masquer" : "Afficher", "aria-pressed": visible, title: visible ? "Masquer" : "Afficher", className: "touch-target grid size-8 shrink-0 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", children: _jsx(HugeiconsIcon, { icon: visible ? ViewOffIcon : ViewIcon, "aria-hidden": true, className: "size-4" }) }), _jsx(CopyButton, { value: value, label: `Copier : ${label}` })] })] }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "outline", onClick: () => {
+                        setDismissed(true);
+                        onDismiss?.();
+                    }, children: "C'est copi\u00E9" }) })] }));
+}

package/dist/skeleton.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+/**
+ * Un bloc de chargement : il prend la forme exacte de ce qu'il remplace (hauteur d'une ligne,
+ * largeur d'un titre), pour que rien ne saute à l'arrivée des données. `bg-foreground/6` plutôt
+ * que `bg-muted` : posé sur une carte `surface`, qui est déjà `muted` en clair, il restait invisible.
+ */
+export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type PendingTiming = {
+    /** Attente avant d'afficher le squelette : une réponse rapide n'en montre aucun (ms). */
+    delay?: number;
+    /** Durée minimale d'affichage d'un squelette apparu, pour qu'il ne clignote pas (ms). */
+    minDuration?: number;
+};
+/**
+ * Faut-il montrer le squelette ? Il n'apparaît qu'après `delay` (200 ms) et, une fois là, reste
+ * au moins `minDuration` (400 ms) : une donnée qui arrive en 250 ms ne fait pas clignoter
+ * l'écran deux fois.
+ */
+export declare function usePendingVisibility(pending: boolean, { delay, minDuration }?: PendingTiming): boolean;
+/**
+ * Le contenu, ou son squelette quand il se fait attendre. Pendant le délai, rien n'est rendu :
+ * une page qui répond vite passe directement du vide au contenu.
+ */
+export declare function Pending({ pending, fallback, children, delay, minDuration, }: PendingTiming & {
+    pending: boolean;
+    fallback: ReactNode;
+    children?: ReactNode;
+}): React.JSX.Element | null;