@hgdc/ui 0.27.0 → 0.28.0

package/README.md

@@ -31,27 +31,32 @@ Un sous-chemin par composant, sans fichier d'index. Les primitives viennent tout
 | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | `@hgdc/ui/styles.css`      | Jetons OKLCH, thèmes (`.dark` sur `<html>`), variante `rail:`, polices, utilitaires `surface`, `pressable`, `skeleton-pulse`… |
 | `@hgdc/ui/theme`           | `ThemeProvider`, `useTheme`, `themeInitScript` (dans le `<head>`, contre le flash de thème)                                   |
+| `@hgdc/ui/theme-switch`    | `ThemeSwitch` : Système, Clair, Sombre en trois icônes ; déjà dans `AccountMenu`, à poser seul ailleurs                       |
 | `@hgdc/ui/cn`              | `cn()` (clsx + tailwind-merge)                                                                                                |
 | `@hgdc/ui/use-media-query` | `useMediaQuery`, `useIsMobile`                                                                                                |
 | `@hgdc/ui/floating`        | Classes des surfaces flottantes                                                                                               |
 
+Sur écran tactile (pointeur grossier), les cibles font 44 px (variante `coarse:`, classes `touch-target` et `touch-field`) et les champs 16 px, pour qu'iOS ne zoome pas à la saisie ; `ResourceItem` et la barre du haut d'`AppShell` passent à la ligne sur un écran étroit ou à texte agrandi.
+
 Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-menu` `empty` `field` `input` `input-otp` `label` `segmented-control` `select` `separator` `sonner` `spinner` `switch` `textarea`.
 
 ## Coque des consoles
 
-| Import         | Exemple                                                                                                                                                                                                                         |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `app-shell`    | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>} onSearch={() => setOpen(true)}>`                                                     |
-|                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                               |
-| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                     |
-| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché                                                                        |
-| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>`                                                          |
-| `products`     | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, pastille `badge`, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010) |
-| `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                                                                              |
-| `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`                                                                    |
-| `page-header`  | `<Page title="Réglages">…</Page>` (colonne de lecture de 768 px), `<Page title="Projets" wide actions={…}>…</Page>` (tableaux, listes, tableaux de bord)                                                                        |
-| `member-item`  | `<ResourceList><MemberItem name={m.name} email={m.email} orgRole={m.role} isMe={m.isMe} /></ResourceList>` : avatar à initiales, « (toi) », `RoleBadge`                                                                         |
-| `initials`     | `initials("Test vérif")` donne « TV » : la même règle pour une personne et une organisation (`OrgMark`, `AccountMenu`, `MemberItem`)                                                                                            |
+| Import             | Exemple                                                                                                                                                                                                                                                                                                            |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `app-shell`        | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>} onSearch={() => setOpen(true)}>`                                                                                                                                        |
+|                    | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                                                                                                                  |
+| `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é, thème en trois icônes (`ThemeSwitch`), entrée « État du service » vers la page de statut du produit (`statusPage` d'`AppShell`, `false` pour la retirer) |
+| `command-menu`     | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>`                                                                                                                                             |
+| `products`         | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, pastille `badge`, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010)                                                                                    |
+| `service-status`   | Bandeau d'incident ou de maintenance posé par `AppShell` en tête du contenu (ADR 0018) : `useServiceStatus(pageUrl)`, `ServiceStatusBanner`. `statusPage={false}` pour ne rien lire                                                                                                                                |
+| `kbd`              | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                                                                                                                                                                 |
+| `page-header`      | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`                                                                                                                                                       |
+| `page-header`      | `<Page title="Réglages">…</Page>` (colonne de lecture de 768 px), `<Page title="Projets" wide actions={…}>…</Page>` (tableaux, listes, tableaux de bord)                                                                                                                                                           |
+| `member-item`      | `<ResourceList><MemberItem name={m.name} email={m.email} orgRole={m.role} isMe={m.isMe} /></ResourceList>` : avatar à initiales, « (toi) », `RoleBadge`                                                                                                                                                            |
+| `initials`         | `initials("Test vérif")` donne « TV » : la même règle pour une personne et une organisation (`OrgMark`, `AccountMenu`, `MemberItem`)                                                                                                                                                                               |
 
 Le menu « Produits » et la palette (`badge` d'une commande) montrent la pastille de chaque produit.
 
@@ -112,6 +117,8 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `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                                                       |

package/dist/cursor-pager.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from "react";
+import type { CursorPageResult, CursorPages } from "./cursor-pages.ts";
+/** « Lignes 201 à 400 », « 1 ligne », « 37 lignes ». */
+export declare function rangeLabel(offset: number, count: number, single: boolean): string;
+/**
+ * Navigation d'une liste paginée par curseur (`useCursorPages`) : Précédent, Suivant et les lignes
+ * affichées. Sous le tableau ou le journal, à la place de `pagination` ou `loadMore` de `DataTable`.
+ *
+ * `result` à `undefined` pendant le chargement : la barre garde sa hauteur, les boutons sont
+ * désactivés, « Chargement… » remplace le décompte. Une seule page : le décompte seul. Aucune
+ * ligne sur la première page : rien, l'état vide de la liste suffit.
+ *
+ * `scrollTarget` : le haut de la liste, ramené à l'écran à chaque changement de page.
+ */
+export declare function CursorPager({ pages, result, scrollTarget, label, className, }: {
+    pages: CursorPages;
+    result: CursorPageResult | undefined;
+    scrollTarget?: RefObject<HTMLElement | null>;
+    /** Nom de la navigation pour les lecteurs d'écran : « Pagination des appels ». */
+    label?: string;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/cursor-pager.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { Spinner } from "./spinner.js";
+const NUMBER = new Intl.NumberFormat("fr-CH");
+/** « Lignes 201 à 400 », « 1 ligne », « 37 lignes ». */
+export function rangeLabel(offset, count, single) {
+    if (single)
+        return `${NUMBER.format(count)} ${count > 1 ? "lignes" : "ligne"}`;
+    return `Lignes ${NUMBER.format(offset + 1)} à ${NUMBER.format(offset + count)}`;
+}
+/**
+ * Navigation d'une liste paginée par curseur (`useCursorPages`) : Précédent, Suivant et les lignes
+ * affichées. Sous le tableau ou le journal, à la place de `pagination` ou `loadMore` de `DataTable`.
+ *
+ * `result` à `undefined` pendant le chargement : la barre garde sa hauteur, les boutons sont
+ * désactivés, « Chargement… » remplace le décompte. Une seule page : le décompte seul. Aucune
+ * ligne sur la première page : rien, l'état vide de la liste suffit.
+ *
+ * `scrollTarget` : le haut de la liste, ramené à l'écran à chaque changement de page.
+ */
+export function CursorPager({ pages, result, scrollTarget, label = "Pagination", className, }) {
+    const loading = result === undefined;
+    const count = result?.page.length ?? 0;
+    const hasNext = result !== undefined && !result.isDone;
+    const single = !pages.hasPrevious && result?.isDone === true;
+    if (!loading && count === 0 && !pages.hasPrevious)
+        return null;
+    const go = (move) => {
+        move();
+        scrollTarget?.current?.scrollIntoView({ block: "start" });
+    };
+    return (_jsxs("nav", { "aria-label": label, "aria-busy": loading || undefined, "data-slot": "cursor-pager", className: cn("flex min-h-10 flex-wrap items-center justify-between gap-x-3 gap-y-2 px-1 text-sm", className), children: [_jsx("p", { className: "flex items-center gap-2 text-muted-foreground tabular-nums", "aria-live": "polite", children: loading ? _jsx(Spinner, { label: "Chargement\u2026" }) : rangeLabel(pages.offset, count, single) }), single ? null : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: !pages.hasPrevious || loading, onClick: () => go(pages.previous), children: [_jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, strokeWidth: 2, "aria-hidden": true, "data-icon": "inline-start" }), "Pr\u00E9c\u00E9dent"] }), _jsxs(Button, { variant: "outline", size: "sm", disabled: !hasNext, onClick: () => {
+                            if (result !== undefined)
+                                go(() => pages.next(result));
+                        }, children: ["Suivant", _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, "data-icon": "inline-end" })] })] }))] }));
+}

package/dist/cursor-pages.d.ts

@@ -0,0 +1,57 @@
+/** La règle commune des grandes listes : 200 lignes par page. */
+export declare const PAGE_SIZE = 200;
+/** Ce que renvoie `paginate` de Convex (`PaginationResult`), réduit à ce dont la pile a besoin. */
+export type CursorPageResult<Item = unknown> = {
+    page: ReadonlyArray<Item>;
+    isDone: boolean;
+    continueCursor: string;
+};
+/**
+ * Pile des curseurs : `cursors[i]` ouvre la page `i` (`null` pour la première), `offsets[i]` compte
+ * les lignes des pages d'avant. La page `i + 1`, si elle est connue, borne la page `i` : revenir en
+ * arrière relit exactement les mêmes lignes, sans perte ni doublon, même si la liste bouge.
+ */
+export type CursorStack = {
+    index: number;
+    cursors: ReadonlyArray<string | null>;
+    offsets: ReadonlyArray<number>;
+};
+export declare const FIRST_PAGE: CursorStack;
+/** Page suivante, depuis le résultat de la page `from` ; rien ne change si l'on n'y est plus (double clic) ou si la liste est finie. */
+export declare function nextPage(stack: CursorStack, from: number, result: CursorPageResult): CursorStack;
+/** Page précédente ; rien ne change sur la première. */
+export declare function previousPage(stack: CursorStack, from: number): CursorStack;
+/** Options à passer telles quelles à une query Convex qui reçoit `paginationOptsValidator`. */
+export type CursorPaginationOpts = {
+    numItems: number;
+    cursor: string | null;
+    endCursor?: string;
+};
+export type CursorPages = {
+    pageSize: number;
+    /** Page affichée, à partir de 0. */
+    pageIndex: number;
+    /** Lignes des pages d'avant : la page commence à la ligne `offset + 1`. */
+    offset: number;
+    cursor: string | null;
+    /** Fin de la page quand la suivante a déjà été ouverte. */
+    endCursor: string | null;
+    paginationOpts: CursorPaginationOpts;
+    hasPrevious: boolean;
+    /** À appeler avec le résultat de la page affichée. */
+    next: (result: CursorPageResult) => void;
+    previous: () => void;
+    /** Retour à la première page. */
+    reset: () => void;
+};
+/**
+ * Pagination par curseur, page par page (Précédent, Suivant), pour une liste paginée côté serveur.
+ * Indépendant de Convex, mais calé sur `paginate({ numItems, cursor, endCursor })` et son résultat
+ * `{ page, isDone, continueCursor }` : `paginationOpts` se passe à la query, le résultat à `next`.
+ *
+ * `filtersKey` résume les filtres (période, statut, recherche, tri) : quand elle change, la liste
+ * revient à la première page, puisque les curseurs d'avant ne valent plus rien.
+ */
+export declare function useCursorPages(filtersKey: string, { pageSize }?: {
+    pageSize?: number;
+}): CursorPages;

package/dist/cursor-pages.js

@@ -0,0 +1,56 @@
+import { useCallback, useState } from "react";
+/** La règle commune des grandes listes : 200 lignes par page. */
+export const PAGE_SIZE = 200;
+export const FIRST_PAGE = { index: 0, cursors: [null], offsets: [0] };
+/** Page suivante, depuis le résultat de la page `from` ; rien ne change si l'on n'y est plus (double clic) ou si la liste est finie. */
+export function nextPage(stack, from, result) {
+    if (stack.index !== from || result.isDone)
+        return stack;
+    const to = from + 1;
+    if (stack.cursors.length > to)
+        return { ...stack, index: to };
+    return {
+        index: to,
+        cursors: [...stack.cursors, result.continueCursor],
+        offsets: [...stack.offsets, (stack.offsets[from] ?? 0) + result.page.length],
+    };
+}
+/** Page précédente ; rien ne change sur la première. */
+export function previousPage(stack, from) {
+    if (stack.index !== from || from === 0)
+        return stack;
+    return { ...stack, index: from - 1 };
+}
+/**
+ * Pagination par curseur, page par page (Précédent, Suivant), pour une liste paginée côté serveur.
+ * Indépendant de Convex, mais calé sur `paginate({ numItems, cursor, endCursor })` et son résultat
+ * `{ page, isDone, continueCursor }` : `paginationOpts` se passe à la query, le résultat à `next`.
+ *
+ * `filtersKey` résume les filtres (période, statut, recherche, tri) : quand elle change, la liste
+ * revient à la première page, puisque les curseurs d'avant ne valent plus rien.
+ */
+export function useCursorPages(filtersKey, { pageSize = PAGE_SIZE } = {}) {
+    const [state, setState] = useState({ key: filtersKey, stack: FIRST_PAGE });
+    // Retour au début pendant le rendu même : aucune requête ne part avec un curseur d'un autre filtre.
+    const stack = state.key === filtersKey ? state.stack : FIRST_PAGE;
+    if (state.key !== filtersKey)
+        setState({ key: filtersKey, stack: FIRST_PAGE });
+    const index = stack.index;
+    const next = useCallback((result) => setState((s) => (s.key === filtersKey ? { key: s.key, stack: nextPage(s.stack, index, result) } : s)), [filtersKey, index]);
+    const previous = useCallback(() => setState((s) => (s.key === filtersKey ? { key: s.key, stack: previousPage(s.stack, index) } : s)), [filtersKey, index]);
+    const reset = useCallback(() => setState({ key: filtersKey, stack: FIRST_PAGE }), [filtersKey]);
+    const cursor = stack.cursors[index] ?? null;
+    const endCursor = stack.cursors[index + 1] ?? null;
+    return {
+        pageSize,
+        pageIndex: index,
+        offset: stack.offsets[index] ?? 0,
+        cursor,
+        endCursor,
+        paginationOpts: endCursor === null ? { numItems: pageSize, cursor } : { numItems: pageSize, cursor, endCursor },
+        hasPrevious: index > 0,
+        next,
+        previous,
+        reset,
+    };
+}

package/dist/project-switcher.d.ts

@@ -0,0 +1,48 @@
+import { type ReactElement } from "react";
+export type SwitcherProject = {
+    id: string;
+    name: string;
+    /** Image carrée du projet (favicon du site, logo). Sans image, ou si elle ne charge pas : `mark`. */
+    iconUrl?: string | null;
+    /** Une ou deux lettres de repli : la marque du framework, l'initiale du produit. Par défaut, la première lettre du nom. */
+    mark?: string;
+    /** Lien vers le projet ; sans lien, le choix passe par `onSelect`. */
+    href?: string;
+};
+/**
+ * Identité visuelle d'un projet : son image, ou sa marque en lettres sur un carré gris. La même
+ * dans le sélecteur, une liste de projets ou un en-tête.
+ */
+export declare function ProjectMark({ project, className, }: {
+    project: Pick<SwitcherProject, "name" | "iconUrl" | "mark">;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Le projet ouvert, ou « Tous les projets » sur les pages de l'organisation, et le menu pour passer
+ * d'un projet à l'autre ou en créer un. Dans la barre du haut d'`AppShell` (`header`), à côté de la
+ * barre latérale. Le même dans tous les produits qui ont des projets (Host, Docs…).
+ *
+ * Présentationnel : le produit passe la liste et dit où mène chaque choix, par lien (`href` sur le
+ * projet, `allHref`, `createHref`, rendus par `renderLink`, par exemple
+ * `(href) => <Link to={href} />`) ou par action (`onSelect`, `onCreate`). `projects` à `undefined`
+ * 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 declare function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, createLabel, className, }: {
+    projects: ReadonlyArray<SwitcherProject> | undefined;
+    /** Le projet ouvert ; `null` ou absent : « Tous les projets ». */
+    activeId?: string | null;
+    /** Nom affiché tant que la liste charge, ou si le projet actif n'y figure pas. */
+    activeName?: string;
+    /** Choix d'un projet sans `href` (`id`), ou de « Tous les projets » sans `allHref` (`null`). */
+    onSelect?: (id: string | null) => void;
+    allHref?: string;
+    /** Lien « Nouveau projet ». */
+    createHref?: string;
+    /** Ou une action, si la création s'ouvre dans une boîte de dialogue. */
+    onCreate?: () => void;
+    /** Rend un lien du routeur du produit ; par défaut un `<a href>`. */
+    renderLink?: (href: string) => ReactElement;
+    createLabel?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/project-switcher.js

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
+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 { useState } from "react";
+import { cn } from "./cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { MENU_LINK_ITEM } from "./org-switcher.js";
+/**
+ * Identité visuelle d'un projet : son image, ou sa marque en lettres sur un carré gris. La même
+ * dans le sélecteur, une liste de projets ou un en-tête.
+ */
+export function ProjectMark({ project, className, }) {
+    const [broken, setBroken] = useState(null);
+    const url = project.iconUrl && project.iconUrl !== broken ? project.iconUrl : null;
+    const base = "grid size-6 shrink-0 place-items-center overflow-hidden rounded-md bg-muted";
+    if (url)
+        return (_jsx("span", { "aria-hidden": true, "data-slot": "project-mark", className: cn(base, className), children: _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setBroken(url), className: "size-[60%] object-contain" }) }));
+    const mark = (project.mark ?? project.name.trim().charAt(0)) || "?";
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "project-mark", className: cn(base, "font-mono text-[10px] font-semibold text-foreground uppercase", className), children: mark }));
+}
+/** Rend une destination du menu : un lien (`href`, par `renderLink`) ou une action. */
+function SwitcherEntry({ href, onSelect, renderLink, children, }) {
+    if (href !== undefined)
+        return (_jsx(MenuPrimitive.LinkItem, { href: href, render: renderLink?.(href), closeOnClick: true, "data-slot": "dropdown-menu-item", className: MENU_LINK_ITEM, children: children }));
+    return _jsx(DropdownMenuItem, { onClick: onSelect, children: children });
+}
+/**
+ * Le projet ouvert, ou « Tous les projets » sur les pages de l'organisation, et le menu pour passer
+ * d'un projet à l'autre ou en créer un. Dans la barre du haut d'`AppShell` (`header`), à côté de la
+ * barre latérale. Le même dans tous les produits qui ont des projets (Host, Docs…).
+ *
+ * Présentationnel : le produit passe la liste et dit où mène chaque choix, par lien (`href` sur le
+ * projet, `allHref`, `createHref`, rendus par `renderLink`, par exemple
+ * `(href) => <Link to={href} />`) ou par action (`onSelect`, `onCreate`). `projects` à `undefined`
+ * 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, createLabel = "Nouveau projet", className, }) {
+    const hasActive = activeId !== undefined && activeId !== null;
+    const current = hasActive ? projects?.find((p) => p.id === activeId) : undefined;
+    const label = hasActive ? (current?.name ?? activeName ?? "") : "Tous les projets";
+    const canCreate = createHref !== undefined || onCreate !== undefined;
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `Projet ${label}, changer de projet` : "Tous les projets, changer de projet", 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: "Tous les projets" }), 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: "Projets" }), 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": "Projet 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.27.0",
+  "version": "0.28.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",