@hgdc/ui 0.31.0 → 0.33.0

package/README.md

@@ -48,6 +48,7 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `app-shell`        | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} links={{ documentation: "/docs", settings: { render: <Link to="/settings" /> } }} account={<AccountMenu …/>} onSearch={() => setOpen(true)} assistant={{ open, onOpenChange: setOpen, panel: <Conversation /> }}>` : Documentation, Réglages et État du service (la page de statut par défaut) juste au-dessus du compte ; bouton Assistant à côté de la recherche, panneau dans une colonne à droite (la page se rétrécit, vue dédiée sous 1280 px, Échap ferme, `shortcut: "j"` facultatif). `sidebarFooter` est déprécié |
 |                    | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+|                    | Navigation imbriquée (l'espace d'une page, d'un projet) : `<SidebarNavBack label="Retour aux pages" render={<Link to="/pages" />} />` en tête, puis `<SidebarNavGroup label="Suivi">…</SidebarNavGroup>` (titre muet, trait en rail), ou `<SidebarNavGroup label="Réglages" collapsible icon={…} active={…}>` (entrée à flèche qui déroule ses rubriques, fermée par défaut, ouverte sur une rubrique active, mémorisée par navigateur)                                                                                                                                                                                               |
 | `org-switcher`     | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `project-switcher` | `<ProjectSwitcher projects={projects} activeId={project?.id} activeName={params.project} allHref="/o/acme" createHref="/o/acme/new" renderLink={(href) => <Link to={href} />} />` : projet actif ou « Tous les projets », marque du projet (`ProjectMark`), « Nouveau projet »                                                                                                                                                                                                                                                                                                                                                        |
 | `account-menu`     | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché. Dans l'ordre : identité, Profil, Sécurité, Thème (Système, Clair, Sombre, `ThemeSwitch`), entrées du produit, Se déconnecter. Ni « État du service » ni raccourcis : la coque pose le premier au-dessus du compte, l'aide garde sa touche `?`                                                                                                                                                                                                                               |
@@ -116,20 +117,21 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 
 ## Listes, journaux et retours
 
-| Import               | Exemple                                                                                                                                                                                                      |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `filter-bar`         | `<FilterBar search={{ value: q, onChange }} filters={[{ key: "status", label: "Statut", options }]} values={{ status }} onFilterChange={…} onReset={…} />`                                                   |
-| `data-table`         | `<DataTable label="Déploiements" rows={rows} columns={columns} rowKey={(d) => d.id} sort={sort} onSortChange={…} filters={<FilterBar …/>} loadMore={…} />`                                                   |
-| `cursor-pages`       | `const pages = useCursorPages(JSON.stringify(filters))` : pile de curseurs, 200 lignes par page (`PAGE_SIZE`), retour à la page 1 quand la clé change, `pages.paginationOpts` pour `paginate` de Convex      |
-| `cursor-pager`       | `<CursorPager pages={pages} result={result} scrollTarget={topRef} />` : Précédent, Suivant, « Lignes 201 à 400 », chargement sans saut ; règle des grandes listes dans le guide                              |
-| `board`              | `<Board label="Tableau du projet" columns={[{ id, label, title, cards }]} cardKey={(c) => c.id} cardLabel={(c) => c.title} renderCard={(c, { handle }) => …} onMove={…} />` : poignée souris, doigt, clavier |
-| `dns-record-table`   | `<DnsRecordTable records={[{ type: "MX", name: "send", value, priority: 10, status: "pending" }]} />` (Vérifié, En attente, Échec, À ajouter)                                                                |
-| `log-viewer`         | `<LogViewer lines={[{ id, time, level: "error", message }]} live />` : niveaux, recherche, « Suivre », copie ; seules les lignes visibles sont rendues                                                       |
-| `sparkline`          | `<Sparkline label="Envois sur 7 jours" values={[3, 8, 5]} color={2} />`                                                                                                                                      |
-| `middle-truncate`    | `<MiddleTruncate text={deployment.url} />` : « …/routes/index.tsx », texte entier dans la page                                                                                                               |
-| `error-card`         | `<ErrorCard title="Impossible de charger les journaux" detail={message} reference={requestId} onRetry={refetch} />`                                                                                          |
-| `destructive-dialog` | `<DestructiveDialog open={open} onOpenChange={setOpen} title="Supprimer le domaine" question="…" name="acme.ch" onConfirm={remove} />`                                                                       |
-| `sonner`             | `<Toaster />` une fois, puis `toastUndo("Domaine retiré", { onUndo: restore })` ; `errorMessage(error)` pour un toast d'erreur                                                                               |
+| Import               | Exemple                                                                                                                                                                                                                                             |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `filter-bar`         | `<FilterBar search={{ value: q, onChange }} filters={[{ key: "status", label: "Statut", options }]} values={{ status }} onFilterChange={…} onReset={…} />`                                                                                          |
+|                      | `variant="panel"` : un bouton « Filtres » (compteur des filtres posés) ouvre un panneau, bulle sur ordinateur et feuille du bas sur téléphone ; `onResetFilters` garde la recherche, `leading` pose une vue (`SegmentedControl`) avant la recherche |
+| `data-table`         | `<DataTable label="Déploiements" rows={rows} columns={columns} rowKey={(d) => d.id} sort={sort} onSortChange={…} filters={<FilterBar …/>} loadMore={…} />`                                                                                          |
+| `cursor-pages`       | `const pages = useCursorPages(JSON.stringify(filters))` : pile de curseurs, 200 lignes par page (`PAGE_SIZE`), retour à la page 1 quand la clé change, `pages.paginationOpts` pour `paginate` de Convex                                             |
+| `cursor-pager`       | `<CursorPager pages={pages} result={result} scrollTarget={topRef} />` : Précédent, Suivant, « Lignes 201 à 400 », chargement sans saut ; règle des grandes listes dans le guide                                                                     |
+| `board`              | `<Board label="Tableau du projet" columns={[{ id, label, title, cards }]} cardKey={(c) => c.id} cardLabel={(c) => c.title} renderCard={(c, { handle }) => …} onMove={…} />` : poignée souris, doigt, clavier                                        |
+| `dns-record-table`   | `<DnsRecordTable records={[{ type: "MX", name: "send", value, priority: 10, status: "pending" }]} />` (Vérifié, En attente, Échec, À ajouter)                                                                                                       |
+| `log-viewer`         | `<LogViewer lines={[{ id, time, level: "error", message }]} live />` : niveaux, recherche, « Suivre », copie ; seules les lignes visibles sont rendues                                                                                              |
+| `sparkline`          | `<Sparkline label="Envois sur 7 jours" values={[3, 8, 5]} color={2} />`                                                                                                                                                                             |
+| `middle-truncate`    | `<MiddleTruncate text={deployment.url} />` : « …/routes/index.tsx », texte entier dans la page                                                                                                                                                      |
+| `error-card`         | `<ErrorCard title="Impossible de charger les journaux" detail={message} reference={requestId} onRetry={refetch} />`                                                                                                                                 |
+| `destructive-dialog` | `<DestructiveDialog open={open} onOpenChange={setOpen} title="Supprimer le domaine" question="…" name="acme.ch" onConfirm={remove} />`                                                                                                              |
+| `sonner`             | `<Toaster />` une fois, puis `toastUndo("Domaine retiré", { onUndo: restore })` ; `errorMessage(error)` pour un toast d'erreur                                                                                                                      |
 
 Filtres, tri et page vivent dans l'URL du produit : les composants sont contrôlés et ne connaissent pas le routeur.
 

package/dist/app-shell.d.ts

@@ -13,7 +13,10 @@ export declare function toggleSidebar(): void;
 export declare function useAppShell(): {
     closeMobileNav: () => void;
 };
-/** La navigation du produit : 4 à 7 entrées, à plat. */
+/**
+ * La navigation du produit : 4 à 7 entrées, à plat. Une navigation imbriquée (l'espace d'une page,
+ * d'un projet) commence par `SidebarNavBack` et range ses entrées dans des `SidebarNavGroup`.
+ */
 export declare function SidebarNav({ label, className, children, }: {
     /** Nom de la navigation pour les lecteurs d'écran : « Projet », « Organisation ». */
     label: string;
@@ -33,6 +36,50 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
     /** Lien du routeur : `render={<Link to="…" />}`. */
     render?: React.ReactElement;
 }): React.JSX.Element;
+/**
+ * Retour au niveau du dessus, en tête d'une navigation imbriquée : « Retour aux pages » quand la
+ * barre montre l'espace d'une page, d'un projet. Premier enfant de `SidebarNav`, au-dessus des
+ * groupes. Une pastille teintée, flèche à gauche, jamais « vous êtes ici ». En rail, la flèche seule
+ * et le texte en infobulle.
+ */
+export declare function SidebarNavBack({ label, href, render, }: {
+    /** « Retour aux pages » */
+    label: string;
+    href?: string;
+    /** Lien du routeur : `render={<Link to="…" />}`. */
+    render?: React.ReactElement;
+}): React.JSX.Element;
+/**
+ * Un groupe titré de la barre : « Suivi », « Réglages ». Ses `SidebarNavItem` en enfants. Le titre
+ * nomme la liste pour les lecteurs d'écran ; en rail, il cède la place à un trait.
+ *
+ * Avec `collapsible`, le titre devient une entrée à flèche qui déroule ses rubriques : fermé par
+ * défaut, ouvert dès qu'une de ses rubriques est la page ouverte, puis tel que la personne l'a
+ * laissé (mémorisé par navigateur). En rail, ses rubriques restent visibles, sous un trait.
+ */
+export declare function SidebarNavGroup(props: {
+    label: string;
+    children: ReactNode;
+    /** Le titre déroule ou replie le groupe. */
+    collapsible?: false;
+}): React.JSX.Element;
+export declare function SidebarNavGroup(props: {
+    label: string;
+    children: ReactNode;
+    collapsible: true;
+    /** Icône de l'entrée qui déroule le groupe, comme une rubrique. */
+    icon?: IconSvgElement;
+    /**
+     * Une rubrique du groupe est la page ouverte : le groupe s'ouvre, dès le rendu serveur. Sans cette
+     * valeur, la coque le lit dans les liens (`aria-current="page"`, `data-status="active"`) après
+     * l'hydratation.
+     */
+    active?: boolean;
+    /** Ouvert tant que la personne n'a rien choisi. Fermé par défaut. */
+    defaultOpen?: boolean;
+    /** Clé de mémorisation, par défaut le titre : à donner quand deux groupes portent le même. */
+    storageKey?: string;
+}): React.JSX.Element;
 /**
  * Un accès commun de la barre : une adresse, ou un lien du routeur (`{ render: <Link to="/settings" /> }`,
  * dont le `data-status="active"` marque la page ouverte), ou une adresse avec `active`.

package/dist/app-shell.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
 import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
 import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
 import BookOpen01Icon from "@hugeicons/core-free-icons/BookOpen01Icon";
 import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
@@ -81,7 +82,10 @@ const ShellContext = createContext({ closeMobileNav: () => { } });
 export function useAppShell() {
     return useContext(ShellContext);
 }
-/** La navigation du produit : 4 à 7 entrées, à plat. */
+/**
+ * La navigation du produit : 4 à 7 entrées, à plat. Une navigation imbriquée (l'espace d'une page,
+ * d'un projet) commence par `SidebarNavBack` et range ses entrées dans des `SidebarNavGroup`.
+ */
 export function SidebarNav({ label, className, children, }) {
     return (_jsx("nav", { "aria-label": label, className: cn("min-h-0 flex-1 overflow-y-auto px-3 py-2", className), children: _jsx("ul", { className: "grid gap-0.5", children: children }) }));
 }
@@ -106,6 +110,126 @@ export function SidebarNavItem({ icon, label, active, href, render, }) {
     });
     return (_jsx("li", { children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
 }
+/**
+ * Retour au niveau du dessus, en tête d'une navigation imbriquée : « Retour aux pages » quand la
+ * barre montre l'espace d'une page, d'un projet. Premier enfant de `SidebarNav`, au-dessus des
+ * groupes. Une pastille teintée, flèche à gauche, jamais « vous êtes ici ». En rail, la flèche seule
+ * et le texte en infobulle.
+ */
+export function SidebarNavBack({ label, href, render, }) {
+    const rail = useSidebarRail();
+    const { closeMobileNav } = useAppShell();
+    const link = useRender({
+        defaultTagName: "a",
+        render,
+        props: {
+            href,
+            onClick: closeMobileNav,
+            "data-slot": "sidebar-nav-back",
+            className: cn(
+            // Jamais marqué actif : le lien du routeur pose `data-status="active"` sur un parent ouvert.
+            "group/back flex items-center gap-2 rounded-xl bg-muted/70 px-3 py-2.5 text-sm font-medium whitespace-nowrap text-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50", "min-h-11 lg:min-h-9 coarse:min-h-11 lg:py-2 lg:bg-shell-hover lg:text-shell-foreground lg:hover:bg-shell-active", "lg:rail:justify-center lg:rail:px-0"),
+            children: (_jsxs(_Fragment, { children: [_jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground transition-transform duration-(--duration-fast) ease-out group-hover/back:-translate-x-0.5 motion-reduce:transition-none lg:size-4 lg:text-shell-muted" }), _jsx("span", { className: "truncate lg:rail:sr-only", children: label })] })),
+        },
+    });
+    return (_jsx("li", { className: "pb-2", children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
+}
+// ── Groupes repliables : ouverts ou fermés par la personne, mémorisés par navigateur ──────
+const GROUP_KEY_PREFIX = "sidebar-group:";
+const GROUP_EVENT = "sidebargroupchange";
+function subscribeGroups(onChange) {
+    window.addEventListener(GROUP_EVENT, onChange);
+    window.addEventListener("storage", onChange);
+    return () => {
+        window.removeEventListener(GROUP_EVENT, onChange);
+        window.removeEventListener("storage", onChange);
+    };
+}
+function readGroup(key) {
+    try {
+        const value = localStorage.getItem(GROUP_KEY_PREFIX + key);
+        return value === "open" ? true : value === "closed" ? false : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeGroup(key, open) {
+    try {
+        localStorage.setItem(GROUP_KEY_PREFIX + key, open ? "open" : "closed");
+    }
+    catch {
+        // Stockage bloqué : le choix vaut pour cette page seulement.
+    }
+    window.dispatchEvent(new Event(GROUP_EVENT));
+}
+/** Une entrée de la liste est-elle la page ouverte ? Suit les attributs que pose le routeur. */
+function useActiveDescendant(ref) {
+    const [active, setActive] = useState(false);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const read = () => setActive(element.querySelector('[aria-current="page"], [data-status="active"]') !== null);
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(element, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["aria-current", "data-status"],
+        });
+        return () => observer.disconnect();
+    }, [ref]);
+    return active;
+}
+export function SidebarNavGroup(props) {
+    if (props.collapsible)
+        return _jsx(CollapsibleNavGroup, { ...props });
+    return _jsx(TitledNavGroup, { label: props.label, children: props.children });
+}
+function CollapsibleNavGroup({ label, children, icon, active, defaultOpen = false, storageKey, }) {
+    const key = storageKey ?? label;
+    const buttonId = useId();
+    const listId = useId();
+    const listRef = useRef(null);
+    const stored = useSyncExternalStore(subscribeGroups, () => readGroup(key), () => null);
+    const activeInDom = useActiveDescendant(listRef);
+    const current = active ?? activeInDom;
+    // Refermé par la personne alors qu'une de ses rubriques est ouverte : il le reste jusqu'à ce
+    // qu'elle en sorte. La navigation suivante vers une rubrique du groupe le rouvre.
+    const [dismissed, setDismissed] = useState(false);
+    const [wasCurrent, setWasCurrent] = useState(current);
+    if (wasCurrent !== current) {
+        setWasCurrent(current);
+        setDismissed(false);
+    }
+    const open = current ? !dismissed : (stored ?? defaultOpen);
+    // Pas d'animation au premier rendu : l'état lu dans le navigateur s'applique sans glisser.
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => setReady(true));
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const toggle = () => {
+        const next = !open;
+        if (current)
+            setDismissed(!next);
+        writeGroup(key, next);
+    };
+    return (_jsxs("li", { "data-slot": "sidebar-nav-group", "data-collapsible": "", "data-open": open ? "" : undefined, className: "pt-1 first:pt-0", children: [_jsx("span", { "aria-hidden": true, className: "mx-auto mt-3 mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsxs("button", { type: "button", id: buttonId, "aria-expanded": open, "aria-controls": listId, onClick: toggle, className: cn("group/disclosure flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "min-h-11 lg:min-h-9 coarse:min-h-11 lg:gap-2.5 lg:py-2 lg:text-shell-muted lg:hover:bg-shell-hover lg:hover:text-shell-foreground", 
+                // Une rubrique du groupe est ouverte et le groupe est replié : l'entrée le dit, sans fond.
+                current && !open && "text-foreground lg:text-shell-foreground", "lg:rail:hidden"), children: [icon ? (_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" })) : null, _jsx("span", { className: "truncate", children: label }), _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, className: cn("ml-auto size-4 shrink-0 opacity-70 transition-transform duration-(--duration-base) ease-ios motion-reduce:transition-none lg:size-3.5", open && "rotate-90") })] }), _jsx("div", { "data-slot": "sidebar-nav-group-panel", className: cn("grid", open ? "visible grid-rows-[1fr]" : "invisible grid-rows-[0fr]", ready &&
+                    "transition-[grid-template-rows,visibility] duration-(--duration-base) ease-ios motion-reduce:transition-none", 
+                // En rail, les rubriques restent là, sous le trait : seules leurs icônes se voient.
+                "lg:rail:visible lg:rail:grid-rows-[1fr]"), children: _jsx("ul", { ref: listRef, id: listId, "aria-labelledby": buttonId, className: cn("grid min-h-0 gap-0.5 overflow-hidden", 
+                    // Rubriques en retrait, sous un filet aligné sur l'icône du titre.
+                    icon ? "ml-[1.375rem] border-l border-border pl-2 lg:ml-5" : "pl-2", "pt-0.5 lg:rail:ml-0 lg:rail:border-l-0 lg:rail:pt-0 lg:rail:pl-0"), children: children }) })] }));
+}
+function TitledNavGroup({ label, children }) {
+    const id = useId();
+    return (_jsxs("li", { "data-slot": "sidebar-nav-group", className: "pt-4 first:pt-0", children: [_jsx("p", { id: id, className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground lg:text-shell-muted lg:rail:sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-auto mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsx("ul", { "aria-labelledby": id, className: "grid gap-0.5", children: children })] }));
+}
 const COMMON_LINKS = [
     { key: "documentation", label: "Documentation", icon: BookOpen01Icon },
     { key: "settings", label: "Réglages", icon: Settings01Icon },

package/dist/filter-bar.d.ts

@@ -20,6 +20,8 @@ export declare function filterSummary(filter: FilterDefinition, selected?: Reado
 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>;
+/** Nombre de filtres posés, sans la recherche : le compteur du bouton « Filtres ». */
+export declare function activeFilterOnlyCount(values?: FilterValues): number;
 /**
  * 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
@@ -28,8 +30,12 @@ export declare function toggleFilterValue(filter: FilterDefinition, selected: Re
  * 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é.
+ *
+ * `variant="panel"` range les filtres derrière un seul bouton « Filtres » (icône, compteur des
+ * filtres posés) qui ouvre un panneau : bulle sur ordinateur, feuille du bas sur téléphone. La
+ * recherche reste visible. Pour une liste qui a plus de deux filtres, ou un en-tête déjà chargé.
  */
-export declare function FilterBar({ search, filters, values, onFilterChange, onReset, actions, className, }: {
+export declare function FilterBar({ search, filters, values, onFilterChange, onReset, onResetFilters, variant, panelLabel, leading, actions, className, }: {
     search?: {
         value: string;
         onChange: (value: string) => void;
@@ -44,6 +50,14 @@ export declare function FilterBar({ search, filters, values, onFilterChange, onR
     onFilterChange?: (key: string, values: Array<string>) => void;
     /** Retire tous les critères, recherche comprise. */
     onReset?: () => void;
+    /** `panel` : « Réinitialiser » du panneau, qui retire les filtres et garde la recherche. */
+    onResetFilters?: () => void;
+    /** `pills` (par défaut) : une pastille par filtre. `panel` : un bouton « Filtres » et son panneau. */
+    variant?: "pills" | "panel";
+    /** Nom du bouton et du panneau en `panel`, « Filtres » par défaut. */
+    panelLabel?: string;
+    /** Avant la recherche : une vue (`SegmentedControl`) qui choisit la liste plutôt que de la filtrer. */
+    leading?: ReactNode;
     /** À droite : la période, un bouton d'export. */
     actions?: ReactNode;
     className?: string;

package/dist/filter-bar.js

@@ -1,13 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, 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 FilterHorizontalIcon from "@hugeicons/core-free-icons/FilterHorizontalIcon";
 import Search01Icon from "@hugeicons/core-free-icons/Search01Icon";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, 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 { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "./drawer.js";
 import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { useIsMobile } from "./use-media-query.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);
@@ -58,9 +62,9 @@ function useDebouncedSearch(value, onChange, delay) {
     };
     return { draft, setDraft, flush };
 }
-function SearchField({ value, onChange, placeholder = "Rechercher…", label = "Rechercher", delay = 250, }) {
+function SearchField({ value, onChange, placeholder = "Rechercher…", label = "Rechercher", delay = 250, className, }) {
     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) => {
+    return (_jsxs("div", { className: cn("relative min-w-0 flex-1 basis-full sm:basis-56 sm:max-w-sm", className), 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 !== "") {
@@ -73,6 +77,45 @@ 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)))] })) })] }));
 }
+/** Nombre de filtres posés, sans la recherche : le compteur du bouton « Filtres ». */
+export function activeFilterOnlyCount(values = {}) {
+    return activeFilterCount(values, "");
+}
+/** Une option du panneau : une pastille qui se coche (choix multiple) ou se choisit (choix unique). */
+function OptionChip({ label, checked, kind, onClick, }) {
+    return (_jsx("button", { type: "button", role: kind, "aria-checked": checked, onClick: onClick, className: cn("touch-target inline-flex h-9 items-center rounded-full px-3.5 text-sm outline-none transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-out focus-visible:ring-3 focus-visible:ring-ring/50 lg:h-8 lg:px-3", checked
+            ? "bg-foreground font-medium text-background"
+            : "bg-background text-foreground ring-1 ring-border/70 ring-inset hover:bg-muted"), children: label }));
+}
+/** Un filtre du panneau : son nom, puis ses options en pastilles. */
+function PanelFilter({ filter, selected = [], onChange, }) {
+    const id = useId();
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx("p", { id: id, className: "text-xs font-medium text-muted-foreground", children: filter.label }), _jsxs("div", { role: filter.single ? "radiogroup" : "group", "aria-labelledby": id, className: "flex flex-wrap gap-1.5", children: [filter.single ? (_jsx(OptionChip, { label: "Tous", kind: "radio", checked: selected.length === 0, onClick: () => onChange([]) })) : null, filter.options.map((option) => {
+                        const checked = selected.includes(option.value);
+                        return (_jsx(OptionChip, { label: option.label, kind: filter.single ? "radio" : "checkbox", checked: checked, onClick: () => onChange(filter.single
+                                ? checked
+                                    ? []
+                                    : [option.value]
+                                : toggleFilterValue(filter, selected, option.value, !checked)) }, option.value));
+                    })] })] }));
+}
+/**
+ * Le bouton « Filtres » et son panneau : une bulle sous le bouton sur ordinateur, une feuille du
+ * bas sur téléphone. Chaque choix s'applique aussitôt ; « Réinitialiser » retire les filtres, pas
+ * la recherche.
+ */
+function FilterPanel({ filters, values, onFilterChange, onReset, label, }) {
+    const isMobile = useIsMobile();
+    const [open, setOpen] = useState(false);
+    const count = activeFilterOnlyCount(values);
+    const trigger = (_jsx("button", { type: "button", "data-slot": "filter-panel-trigger", "data-active": count > 0 || undefined, "aria-label": count > 0 ? `${label}, ${count} actif${count > 1 ? "s" : ""}` : label, className: cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-2 font-normal", count > 0 && "font-medium") }));
+    const content = (_jsx(_Fragment, { children: filters.map((filter) => (_jsx(PanelFilter, { filter: filter, ...(values[filter.key] !== undefined ? { selected: values[filter.key] } : {}), onChange: (next) => onFilterChange?.(filter.key, next) }, filter.key))) }));
+    const face = (_jsxs(_Fragment, { children: [_jsx(HugeiconsIcon, { icon: FilterHorizontalIcon, strokeWidth: 2, "aria-hidden": true, className: "size-4" }), _jsx("span", { children: label }), count > 0 ? (_jsx("span", { "aria-hidden": true, className: "grid h-5 min-w-5 place-items-center rounded-full bg-foreground px-1.5 text-xs font-medium text-background tabular-nums", children: count })) : null] }));
+    const reset = onReset && count > 0 ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, className: "text-muted-foreground", children: "R\u00E9initialiser" })) : null;
+    if (isMobile)
+        return (_jsxs(Drawer, { side: "bottom", open: open, onOpenChange: setOpen, children: [_jsx(DrawerTrigger, { render: trigger, children: face }), _jsxs(DrawerContent, { children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: label }) }), _jsx(DrawerCloseButton, {}), _jsx(DrawerBody, { className: "grid gap-5 pb-4", children: content }), _jsxs(DrawerFooter, { children: [_jsx(Button, { onClick: () => setOpen(false), children: "Voir les r\u00E9sultats" }), reset] })] })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { render: trigger, children: face }), _jsxs(PopoverContent, { align: "end", className: "w-[22rem] gap-0 p-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-4 pt-3.5 pb-1", children: [_jsx(PopoverTitle, { children: label }), reset ?? _jsx("span", { className: "h-10 lg:h-9", "aria-hidden": true })] }), _jsx("div", { className: "grid max-h-[min(28rem,70svh)] gap-4 overflow-y-auto px-4 pt-1 pb-4", children: content })] })] }));
+}
 /**
  * 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
@@ -81,8 +124,14 @@ function FilterPill({ filter, selected = [], onChange, }) {
  * 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é.
+ *
+ * `variant="panel"` range les filtres derrière un seul bouton « Filtres » (icône, compteur des
+ * filtres posés) qui ouvre un panneau : bulle sur ordinateur, feuille du bas sur téléphone. La
+ * recherche reste visible. Pour une liste qui a plus de deux filtres, ou un en-tête déjà chargé.
  */
-export function FilterBar({ search, filters = [], values = {}, onFilterChange, onReset, actions, className, }) {
+export function FilterBar({ search, filters = [], values = {}, onFilterChange, onReset, onResetFilters, variant = "pills", panelLabel = "Filtres", leading, 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] }));
+    if (variant === "panel")
+        return (_jsxs("div", { role: "search", "data-slot": "filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [leading, search ? _jsx(SearchField, { ...search, className: "basis-40 sm:basis-56" }) : null, filters.length ? (_jsx(FilterPanel, { filters: filters, values: values, onFilterChange: onFilterChange, onReset: onResetFilters, label: panelLabel })) : null, actions ? _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null] }));
+    return (_jsxs("div", { role: "search", "data-slot": "filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [leading, 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/project-switcher.d.ts

@@ -43,10 +43,14 @@ export declare function ProjectSwitcher({ projects, activeId, activeName, onSele
     onCreate?: () => void;
     /** Rend un lien du routeur du produit ; par défaut un `<a href>`. */
     renderLink?: (href: string) => ReactElement;
-    /** Ce que l'on choisit, nom masculin : `{ one: "site", many: "sites" }` pour Analytics. */
+    /**
+     * Ce que l'on choisit : `{ one: "site", many: "sites" }` pour Analytics. Un nom féminin porte
+     * `feminine` : « Toutes les pages », « Page active », « Nouvelle page » (Status).
+     */
     noun?: {
         one: string;
         many: string;
+        feminine?: boolean;
     };
     createLabel?: string;
     className?: string;

package/dist/project-switcher.js

@@ -39,12 +39,12 @@ function SwitcherEntry({ href, onSelect, renderLink, children, }) {
  * pendant le chargement : le déclencheur montre déjà `activeName` (le segment de l'URL), le menu
  * reste utilisable pour « Tous les projets » et « Nouveau projet ».
  */
-export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun = { one: "projet", many: "projets" }, createLabel = `Nouveau ${noun.one}`, className, }) {
+export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun = { one: "projet", many: "projets" }, createLabel = `${noun.feminine ? "Nouvelle" : "Nouveau"} ${noun.one}`, className, }) {
     const capitalized = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-    const all = `Tous les ${noun.many}`;
+    const all = `${noun.feminine ? "Toutes" : "Tous"} les ${noun.many}`;
     const hasActive = activeId !== undefined && activeId !== null;
     const current = hasActive ? projects?.find((p) => p.id === activeId) : undefined;
     const label = hasActive ? (current?.name ?? activeName ?? "") : all;
     const canCreate = createHref !== undefined || onCreate !== undefined;
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `${capitalized(noun.one)} ${label}, changer de ${noun.one}` : `${all}, changer de ${noun.one}`, className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium 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 coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: all }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: capitalized(noun.many) }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": `${capitalized(noun.one)} actif`, className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `${capitalized(noun.one)} ${label}, changer de ${noun.one}` : `${all}, changer de ${noun.one}`, className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium 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 coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: all }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: capitalized(noun.many) }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": `${capitalized(noun.one)} ${noun.feminine ? "active" : "actif"}`, className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",