@hgdc/ui 0.2.1 → 0.4.0

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/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/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/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) })] }));
+}