@hgdc/ui 0.30.1 → 0.32.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="Réglages">…</SidebarNavGroup>` (titre muet, trait en rail)                                                                                                                                                                                                                                                                                                                                                                                               |
 | `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 `?`                                                                                                                                                                                                                               |
@@ -109,26 +110,28 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 | `rank-bar`       | `<RankBar label="Pages les plus vues" items={[{ key, label: "/tarifs", value: 640, render: <Link … /> }]} limit={5} />`                                                                                                                                                                                                                                                                                                                                 |
 | `secret-reveal`  | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                                                                                                                                                                                                                                                                        |
 | `assistant-chat` | `<AssistantConversation><AssistantUserMessage>…</AssistantUserMessage><AssistantReply tools={chips} waiting={pending} actions={<AssistantActionCard title=… status="pending" onConfirm={…} onCancel={…} />}><Markdown>{text}</Markdown></AssistantReply></AssistantConversation>`, `<AssistantComposer value={v} onValueChange={setV} onSubmit={send} busy={busy} />`, `<AssistantExamples examples={…} onPick={setV} />` : le produit rend le Markdown |
+| `assistant-view` | `<AssistantView status={status} threads={threads} threadId={id} onThreadChange={setId} thread={thread} renderText={(t) => <Markdown>{t}</Markdown>} onSend={send} onConfirm={confirm} onCancel={cancel} />` : le panneau complet pour `AppShell` (`assistant.panel`), aux formes de `@hgdc/assistant/convex` ; `subject` (page ouverte), `request` (demande venue de la page), `labels` (vouvoiement)                                                   |
 | `family-loader`  | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : le seul H d'un chargement de page, fixe sur la zone de contenu de la coque, rendu par le serveur, calé sur l'horloge (même pixel et même phase d'une page et d'un produit à l'autre, ADR 0015). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner`                                   |
 | `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : la zone de contenu se couvre dès qu'une navigation attend, la coque reste ; `PagePending` : marque la place d'une page qui attend, le H du document s'affiche                                                                       |
 | `skeleton`       | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                                                                                                                                                                                                                                                |
 
 ## 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,27 @@ 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.
+ */
+export declare function SidebarNavGroup({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): 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

@@ -81,7 +81,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 +109,38 @@ 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 })] }) }));
+}
+/**
+ * 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.
+ */
+export function SidebarNavGroup({ 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/assistant-chat.d.ts

@@ -35,7 +35,7 @@ export declare function AssistantReply({ tools, waiting, waitingLabel, error, ac
  * Une écriture proposée par l'assistant, qui n'a lieu qu'au clic sur « Confirmer ». Une fois
  * traitée, la carte garde son état (fait, annulé, échec et sa raison).
  */
-export declare function AssistantActionCard({ title, details, status, result, onConfirm, onCancel, confirming, cancelling, confirmLabel, cancelLabel, }: {
+export declare function AssistantActionCard({ title, details, status, result, onConfirm, onCancel, confirming, cancelling, confirmLabel, cancelLabel, pendingLabel, }: {
     title: ReactNode;
     details?: ReadonlyArray<{
         label: string;
@@ -50,6 +50,8 @@ export declare function AssistantActionCard({ title, details, status, result, on
     cancelling?: boolean;
     confirmLabel?: string;
     cancelLabel?: string;
+    /** Au-dessus du titre tant que la carte attend. */
+    pendingLabel?: string;
 }): React.JSX.Element;
 /** Des demandes d'exemple, pour une conversation vide : un clic remplit la saisie. */
 export declare function AssistantExamples({ examples, onPick, disabled, label, }: {

package/dist/assistant-chat.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon";
 import ArrowUp02Icon from "@hugeicons/core-free-icons/ArrowUp02Icon";
 import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
 import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon";
@@ -22,7 +23,7 @@ export function AssistantUserMessage({ children }) {
 export function AssistantToolChips({ tools, label = "Ce que l'assistant a consulté", }) {
     if (!tools.length)
         return null;
-    return (_jsx("ul", { className: "flex flex-wrap gap-1.5", "aria-label": label, children: tools.map((tool) => (_jsx("li", { children: _jsxs(Badge, { tone: tool.status === "error" ? "destructive" : "neutral", children: [tool.status === "running" ? _jsx(Spinner, { size: 3 }) : null, tool.label] }) }, tool.id))) }));
+    return (_jsx("ul", { className: "flex flex-wrap gap-1.5", "aria-label": label, children: tools.map((tool) => (_jsx("li", { children: _jsxs(Badge, { tone: tool.status === "error" ? "destructive" : "neutral", "data-status": tool.status, children: [tool.status === "running" ? (_jsx(Spinner, { size: 3 })) : (_jsx(HugeiconsIcon, { icon: tool.status === "done" ? CheckmarkCircle02Icon : Alert02Icon, "aria-hidden": true, className: cn("size-3.5", tool.status === "done" && "text-success") })), tool.label, tool.status === "error" ? _jsx("span", { className: "sr-only", children: " (\u00E9chec)" }) : null] }) }, tool.id))) }));
 }
 /**
  * Une réponse : pastilles, puis le texte rendu par le produit (`children`), puis les cartes.
@@ -40,9 +41,9 @@ const ACTION_BADGE = {
  * Une écriture proposée par l'assistant, qui n'a lieu qu'au clic sur « Confirmer ». Une fois
  * traitée, la carte garde son état (fait, annulé, échec et sa raison).
  */
-export function AssistantActionCard({ title, details = [], status, result, onConfirm, onCancel, confirming = false, cancelling = false, confirmLabel = "Confirmer", cancelLabel = "Annuler", }) {
+export function AssistantActionCard({ title, details = [], status, result, onConfirm, onCancel, confirming = false, cancelling = false, confirmLabel = "Confirmer", cancelLabel = "Annuler", pendingLabel = "À confirmer", }) {
     const badge = status === "pending" ? null : ACTION_BADGE[status];
-    return (_jsxs(Card, { "data-slot": "assistant-action-card", className: "max-w-xl", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: title }) }), details.length ? (_jsx(CardContent, { children: _jsx("dl", { className: "grid gap-2 text-sm", children: details.map((row) => (_jsxs("div", { className: "grid gap-0.5", children: [_jsx("dt", { className: "text-muted-foreground", children: row.label }), _jsx("dd", { className: "break-words whitespace-pre-wrap", children: row.value })] }, row.label))) }) })) : null, _jsx(CardFooter, { className: "justify-start", children: badge ? (_jsx(Badge, { tone: badge.tone, children: status === "failed" && result ? `${badge.label} : ${result}` : badge.label })) : (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", isLoading: confirming, disabled: cancelling, onClick: onConfirm, children: [_jsx(HugeiconsIcon, { icon: CheckmarkCircle02Icon, "data-icon": "inline-start" }), confirmLabel] }), _jsxs(Button, { size: "sm", variant: "ghost", isLoading: cancelling, disabled: confirming, onClick: onCancel, children: [_jsx(HugeiconsIcon, { icon: Cancel01Icon, "data-icon": "inline-start" }), cancelLabel] })] })) })] }));
+    return (_jsxs(Card, { "data-slot": "assistant-action-card", "data-status": status, className: "max-w-xl card-in rounded-2xl motion-reduce:animate-none", children: [_jsxs(CardHeader, { className: "gap-0.5 px-4 pt-3.5 sm:px-4 sm:pt-3.5", children: [status === "pending" ? _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: pendingLabel }) : null, _jsx(CardTitle, { className: "text-[0.9375rem] leading-snug", children: title })] }), details.length ? (_jsx(CardContent, { className: "px-4 py-3 sm:px-4 sm:py-3 [[data-slot=card-header]+&]:pt-2", children: _jsx("dl", { className: "grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1 text-sm", children: details.map((row) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-muted-foreground", children: row.label }), _jsx("dd", { className: "break-words whitespace-pre-wrap", children: row.value })] }, row.label))) }) })) : (_jsx("div", { "aria-hidden": true, className: "h-3" })), _jsx(CardFooter, { className: "justify-start px-4 py-2.5 sm:px-4", children: badge ? (_jsx(Badge, { tone: badge.tone, children: status === "failed" && result ? `${badge.label} : ${result}` : badge.label })) : (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", isLoading: confirming, disabled: cancelling, onClick: onConfirm, children: [_jsx(HugeiconsIcon, { icon: CheckmarkCircle02Icon, "data-icon": "inline-start" }), confirmLabel] }), _jsxs(Button, { size: "sm", variant: "ghost", isLoading: cancelling, disabled: confirming, onClick: onCancel, children: [_jsx(HugeiconsIcon, { icon: Cancel01Icon, "data-icon": "inline-start" }), cancelLabel] })] })) })] }));
 }
 /** Des demandes d'exemple, pour une conversation vide : un clic remplit la saisie. */
 export function AssistantExamples({ examples, onPick, disabled = false, label = "Par exemple :", }) {

package/dist/assistant-view.d.ts

@@ -0,0 +1,157 @@
+import { type IconSvgElement } from "@hugeicons/react";
+import { type ReactNode } from "react";
+import { type AssistantActionStatus, type AssistantTool } from "./assistant-chat.tsx";
+/** État de l'assistant pour l'organisation (`readStatus`). */
+export type AssistantStatus = {
+    ready: boolean;
+    ownKey: {
+        hint: string;
+    } | null;
+    credits: {
+        used: number;
+        limit: number;
+    };
+};
+export type AssistantThreadSummary = {
+    _id: string;
+    title: string;
+    updatedAt: number;
+};
+export type AssistantMessageStatus = "pending" | "streaming" | "done" | "error";
+export type AssistantMessage = {
+    _id: string;
+    role: "user" | "assistant";
+    text: string;
+    status: AssistantMessageStatus;
+    tools: ReadonlyArray<AssistantTool>;
+};
+export type AssistantAction = {
+    _id: string;
+    messageId: string;
+    summary: string;
+    details?: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    status: AssistantActionStatus;
+    result?: string | null;
+};
+/** Une conversation ouverte (`readThread`). */
+export type AssistantThread = {
+    /** L'historique a atteint sa taille maximale : une nouvelle conversation s'impose. */
+    full?: boolean;
+    messages: ReadonlyArray<AssistantMessage>;
+    actions: ReadonlyArray<AssistantAction>;
+};
+/** La page ouverte, que l'assistant prend comme sujet tant que la personne ne la retire pas. */
+export type AssistantSubject = {
+    /** « Campagne « Octobre » », « Déploiement abc123 ». */
+    label: string;
+    icon?: IconSvgElement;
+    attached: boolean;
+    onAttachedChange: (attached: boolean) => void;
+    /** Bouton pour la rattacher : « Parler de ce déploiement ». */
+    attachLabel: string;
+};
+/** Une demande venue d'un bouton de la page (« Écrire avec l'assistant ») : part une seule fois par `nonce`. */
+export type AssistantRequest = {
+    prompt?: string;
+    nonce: number;
+};
+export type AssistantLabels = {
+    welcomeTitle: string;
+    welcomeDescription: string;
+    notReadyTitle: string;
+    notReadyDescription: string;
+    exhaustedTitle: string;
+    exhaustedDescription: string;
+    placeholder: string;
+    placeholderBusy: string;
+    composerLabel: string;
+    history: string;
+    noHistory: string;
+    newThread: string;
+    deleteThread: string;
+    deleteConfirm: string;
+    deleteYes: string;
+    deleteNo: string;
+    loadError: string;
+    full: string;
+    sendError: string;
+    creditsLeft: (remaining: number) => string;
+    ownKey: (hint: string) => string;
+    notReadyShort: string;
+    detach: string;
+};
+/** Tutoiement de la console ; un produit qui vouvoie (clients de Portal) remplace ce qu'il faut. */
+export declare const ASSISTANT_LABELS: AssistantLabels;
+/** Le message d'une erreur Convex (`ConvexError` avec un texte) ; sinon `fallback`. */
+export declare function assistantErrorText(error: unknown, fallback: string): string;
+/**
+ * Un lien écrit par l'assistant. Un chemin de l'application (`/…`) reste un lien interne ; une
+ * adresse `https:` s'ouvre dans un nouvel onglet, sans référent ni accès à la page, avec son domaine
+ * affiché à côté du texte (un texte trompeur ne cache pas la destination) ; tout le reste
+ * (`javascript:`, `http:`, `data:`…) devient du texte. À passer au rendu Markdown du produit
+ * (`components={{ a: AssistantLink }}`) ; `renderInternal` pour le lien du routeur.
+ */
+export declare function AssistantLink({ href, children, renderInternal, }: {
+    href?: string | undefined;
+    children?: ReactNode;
+    renderInternal?: (href: string, children: ReactNode) => ReactNode;
+}): React.JSX.Element;
+/** Le rendu par défaut : texte brut en paragraphes, adresses https en liens sûrs. Aucun HTML. */
+export declare function renderPlainText(text: string): ReactNode;
+/** La ligne sous la barre : crédits restants, ou la clé de l'organisation. */
+export declare function AssistantCredits({ status, labels, }: {
+    status: AssistantStatus | undefined;
+    labels?: Pick<AssistantLabels, "creditsLeft" | "ownKey" | "notReadyShort">;
+}): React.JSX.Element;
+/** Les conversations précédentes et « Nouvelle conversation ». */
+export declare function AssistantHistory({ threads, threadId, onThreadChange, now, labels, }: {
+    threads: ReadonlyArray<AssistantThreadSummary> | undefined;
+    threadId: string | null;
+    onThreadChange: (threadId: string | null) => void;
+    now?: number;
+    labels?: Pick<AssistantLabels, "history" | "noHistory" | "newThread">;
+}): React.JSX.Element;
+/** La page ouverte en pastille au-dessus de la saisie, ou le lien pour la rattacher. */
+export declare function AssistantSubjectChip({ subject, labels, }: {
+    subject: AssistantSubject;
+    labels?: Pick<AssistantLabels, "detach">;
+}): React.JSX.Element;
+export type AssistantViewProps = {
+    /** `undefined` pendant le chargement. */
+    status: AssistantStatus | undefined;
+    threads: ReadonlyArray<AssistantThreadSummary> | undefined;
+    /** Conversation ouverte ; `null` : une nouvelle. */
+    threadId: string | null;
+    onThreadChange: (threadId: string | null) => void;
+    /** La conversation ouverte ; `undefined` pendant son chargement, `null` si elle ne se lit pas. */
+    thread: AssistantThread | null | undefined;
+    /**
+     * Le texte d'une réponse, rendu par le produit (Markdown avec `AssistantLink` pour les liens,
+     * sans image). Par défaut : texte brut, paragraphes, adresses https en liens sûrs.
+     */
+    renderText?: (text: string) => ReactNode;
+    /** Envoie la demande ; une erreur remet le texte dans la saisie et s'affiche au-dessus. */
+    onSend: (text: string) => Promise<void>;
+    onConfirm: (actionId: string) => Promise<void>;
+    onCancel: (actionId: string) => Promise<void>;
+    onDeleteThread?: (threadId: string) => Promise<void>;
+    examples?: ReadonlyArray<string>;
+    /** Remplace le titre et le texte d'accueil (une page ouverte appelle un autre accueil). */
+    welcome?: {
+        title?: string;
+        description?: ReactNode;
+    };
+    /** Sous l'état « non branché » ou « crédits épuisés » : un lien vers les réglages, pour un admin. */
+    setup?: ReactNode;
+    subject?: AssistantSubject | null;
+    request?: AssistantRequest | null;
+    labels?: Partial<AssistantLabels>;
+    /** Instant de référence des dates relatives (tests, captures). */
+    now?: number;
+    className?: string;
+};
+/** Le panneau de l'assistant, prêt pour la colonne de `AppShell`. */
+export declare function AssistantView({ status, threads, threadId, onThreadChange, thread, renderText, onSend, onConfirm, onCancel, onDeleteThread, examples, welcome, setup, subject, request, labels: overrides, now, className, }: AssistantViewProps): React.JSX.Element;

package/dist/assistant-view.js

@@ -0,0 +1,232 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Add01Icon from "@hugeicons/core-free-icons/Add01Icon";
+import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
+import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
+import Clock01Icon from "@hugeicons/core-free-icons/Clock01Icon";
+import Delete02Icon from "@hugeicons/core-free-icons/Delete02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { AssistantActionCard, AssistantComposer, AssistantConversation, AssistantExamples, AssistantReply, AssistantUserMessage, } from "./assistant-chat.js";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { formatRelative } from "./relative-time.js";
+import { Spinner } from "./spinner.js";
+/** Tutoiement de la console ; un produit qui vouvoie (clients de Portal) remplace ce qu'il faut. */
+export const ASSISTANT_LABELS = {
+    welcomeTitle: "Qu'est-ce que je fais pour toi ?",
+    welcomeDescription: "Je lis ce que tu vois dans l'application et je t'aide à t'y retrouver. Je te demande toujours avant de modifier ou d'envoyer quoi que ce soit.",
+    notReadyTitle: "L'assistant n'est pas encore branché",
+    notReadyDescription: "Il manque une clé pour le modèle. Un administrateur peut l'ajouter dans les réglages.",
+    exhaustedTitle: "Les crédits du mois sont utilisés",
+    exhaustedDescription: "Le compteur repart le 1er du mois. Un administrateur peut aussi ajouter la clé de l'organisation dans les réglages.",
+    placeholder: "Demande-moi quelque chose",
+    placeholderBusy: "L'assistant répond…",
+    composerLabel: "Message pour l'assistant",
+    history: "Conversations précédentes",
+    noHistory: "Aucune conversation pour l'instant",
+    newThread: "Nouvelle conversation",
+    deleteThread: "Effacer cette conversation",
+    deleteConfirm: "Effacer pour de bon ?",
+    deleteYes: "Effacer",
+    deleteNo: "Garder",
+    loadError: "Cette conversation ne s'affiche pas. Réessaie dans un instant.",
+    full: "Cette conversation est pleine. Ouvre une nouvelle conversation pour continuer.",
+    sendError: "Le message n'est pas parti. Réessaie dans un instant.",
+    creditsLeft: (remaining) => remaining <= 0
+        ? "Plus de crédits ce mois-ci"
+        : `${remaining} crédit${remaining > 1 ? "s" : ""} restant${remaining > 1 ? "s" : ""} ce mois-ci`,
+    ownKey: (hint) => `Clé de l'organisation ••••${hint}`,
+    notReadyShort: "Pas encore branché",
+    detach: "Ne plus parler de cette page",
+};
+/** Le message d'une erreur Convex (`ConvexError` avec un texte) ; sinon `fallback`. */
+export function assistantErrorText(error, fallback) {
+    if (typeof error === "object" && error !== null && "data" in error) {
+        const data = error.data;
+        if (typeof data === "string" && data.trim())
+            return data;
+        if (typeof data === "object" && data !== null && "message" in data) {
+            const message = data.message;
+            if (typeof message === "string" && message.trim())
+                return message;
+        }
+    }
+    return fallback;
+}
+/**
+ * Un lien écrit par l'assistant. Un chemin de l'application (`/…`) reste un lien interne ; une
+ * adresse `https:` s'ouvre dans un nouvel onglet, sans référent ni accès à la page, avec son domaine
+ * affiché à côté du texte (un texte trompeur ne cache pas la destination) ; tout le reste
+ * (`javascript:`, `http:`, `data:`…) devient du texte. À passer au rendu Markdown du produit
+ * (`components={{ a: AssistantLink }}`) ; `renderInternal` pour le lien du routeur.
+ */
+export function AssistantLink({ href, children, renderInternal, }) {
+    const value = (href ?? "").trim();
+    const className = "font-medium underline underline-offset-2";
+    if (value.startsWith("/") && !value.startsWith("//") && !value.startsWith("/\\")) {
+        return renderInternal ? (_jsx(_Fragment, { children: renderInternal(value, children) })) : (_jsx("a", { href: value, className: className, children: children }));
+    }
+    let url = null;
+    try {
+        url = new URL(value);
+    }
+    catch {
+        url = null;
+    }
+    if (!url || url.protocol !== "https:" || url.username || url.password)
+        return _jsx("span", { children: children });
+    return (_jsxs("a", { href: url.href, target: "_blank", rel: "noopener noreferrer nofollow", className: className, children: [children, _jsxs("span", { className: "ml-1 text-xs font-normal text-muted-foreground no-underline", children: ["(", url.hostname, ")"] })] }));
+}
+const URL_IN_TEXT = /(https:\/\/[^\s<>"')]+)/g;
+/** Le rendu par défaut : texte brut en paragraphes, adresses https en liens sûrs. Aucun HTML. */
+export function renderPlainText(text) {
+    return text.split(/\n{2,}/).map((paragraph, i) => (_jsx("p", { className: "my-2 whitespace-pre-wrap first:mt-0 last:mb-0", children: paragraph.split(URL_IN_TEXT).map((part, j) => j % 2 === 1 ? (_jsx(AssistantLink, { href: part, children: part }, j)) : (part)) }, i)));
+}
+function remainingCredits(status) {
+    return Math.max(0, Math.floor(status.credits.limit - status.credits.used));
+}
+/** La ligne sous la barre : crédits restants, ou la clé de l'organisation. */
+export function AssistantCredits({ status, labels = ASSISTANT_LABELS, }) {
+    return (_jsx("p", { "data-slot": "assistant-credits", className: "min-w-0 truncate text-xs text-muted-foreground", "aria-live": "polite", children: status === undefined
+            ? " "
+            : status.ownKey
+                ? labels.ownKey(status.ownKey.hint)
+                : !status.ready
+                    ? labels.notReadyShort
+                    : labels.creditsLeft(remainingCredits(status)) }));
+}
+/** Les conversations précédentes et « Nouvelle conversation ». */
+export function AssistantHistory({ threads, threadId, onThreadChange, now, labels = ASSISTANT_LABELS, }) {
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": labels.history, title: labels.history, disabled: !threads?.length }), children: _jsx(HugeiconsIcon, { icon: Clock01Icon, "aria-hidden": true }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-72 max-w-[calc(100vw-2rem)]", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: labels.history }), threads?.length ? (threads.map((thread) => (_jsxs(DropdownMenuItem, { onClick: () => onThreadChange(thread._id), "aria-current": thread._id === threadId ? "true" : undefined, className: "aria-[current]:font-medium", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: thread.title }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatRelative(thread.updatedAt, now) })] }, thread._id)))) : (_jsx("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: labels.noHistory }))] }) })] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": labels.newThread, title: labels.newThread, disabled: threadId === null, onClick: () => onThreadChange(null), children: _jsx(HugeiconsIcon, { icon: Add01Icon, "aria-hidden": true }) })] }));
+}
+/** Un état sans conversation : accueil, non branché, crédits épuisés. */
+function AssistantState({ title, description, tone = "neutral", children, }) {
+    return (_jsxs("div", { "data-slot": "assistant-state", className: "grid gap-4 py-4", children: [_jsx("span", { "aria-hidden": true, className: cn("grid size-10 place-items-center rounded-2xl", tone === "warning" ? "bg-status-paused/15 text-status-paused-ink" : "bg-muted text-foreground"), children: _jsx(HugeiconsIcon, { icon: tone === "warning" ? Alert02Icon : AiMagicIcon, strokeWidth: 1.8, className: "size-5" }) }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx("p", { className: "font-heading text-lg leading-snug font-semibold text-balance", children: title }), _jsx("div", { className: "text-sm text-pretty text-muted-foreground", children: description })] }), children] }));
+}
+/** La page ouverte en pastille au-dessus de la saisie, ou le lien pour la rattacher. */
+export function AssistantSubjectChip({ subject, labels = ASSISTANT_LABELS, }) {
+    if (!subject.attached) {
+        return (_jsx("button", { type: "button", onClick: () => subject.onAttachedChange(true), className: "touch-target w-fit rounded-lg text-xs text-muted-foreground underline-offset-2 outline-none hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring/50", children: subject.attachLabel }));
+    }
+    return (_jsxs("span", { "data-slot": "assistant-subject", className: "flex w-fit max-w-full min-w-0 soft-in items-center gap-1.5 rounded-full bg-muted py-1 pr-1 pl-2.5 text-xs font-medium motion-reduce:animate-none", children: [subject.icon ? _jsx(HugeiconsIcon, { icon: subject.icon, "aria-hidden": true, className: "size-3.5 shrink-0" }) : null, _jsx("span", { className: "truncate", children: subject.label }), _jsx("button", { type: "button", "aria-label": labels.detach, title: labels.detach, onClick: () => subject.onAttachedChange(false), className: "grid size-6 shrink-0 place-items-center rounded-full text-muted-foreground outline-none hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, "aria-hidden": true, className: "size-3" }) })] }));
+}
+function DeleteThread({ onDelete, labels, }) {
+    const [asking, setAsking] = useState(false);
+    const [busy, setBusy] = useState(false);
+    if (!asking) {
+        return (_jsxs("button", { type: "button", onClick: () => setAsking(true), className: "touch-target flex w-fit items-center gap-1 rounded-lg text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: [_jsx(HugeiconsIcon, { icon: Delete02Icon, "aria-hidden": true, className: "size-3.5" }), labels.deleteThread] }));
+    }
+    return (_jsxs("div", { role: "group", "aria-label": labels.deleteThread, className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: labels.deleteConfirm }), _jsx(Button, { size: "xs", variant: "destructive", isLoading: busy, onClick: async () => {
+                    setBusy(true);
+                    try {
+                        await onDelete();
+                    }
+                    finally {
+                        setBusy(false);
+                        setAsking(false);
+                    }
+                }, children: labels.deleteYes }), _jsx(Button, { size: "xs", variant: "ghost", disabled: busy, onClick: () => setAsking(false), children: labels.deleteNo })] }));
+}
+/** Le panneau de l'assistant, prêt pour la colonne de `AppShell`. */
+export function AssistantView({ status, threads, threadId, onThreadChange, thread, renderText = renderPlainText, onSend, onConfirm, onCancel, onDeleteThread, examples = [], welcome, setup, subject, request, labels: overrides, now, className, }) {
+    const labels = { ...ASSISTANT_LABELS, ...overrides };
+    const [draft, setDraft] = useState("");
+    const [sending, setSending] = useState(false);
+    const [sendError, setSendError] = useState(null);
+    const [actionBusy, setActionBusy] = useState(null);
+    const scroller = useRef(null);
+    const messages = threadId && thread ? thread.messages : [];
+    const last = messages.at(-1);
+    const answering = last?.status === "pending" || last?.status === "streaming";
+    const busy = sending || answering;
+    const exhausted = Boolean(status && status.ready && !status.ownKey && remainingCredits(status) <= 0);
+    const full = Boolean(threadId && thread?.full);
+    const blocked = status === undefined || !status.ready || exhausted || full;
+    // Le fil suit la réponse en cours, sauf si la personne remonte pour relire.
+    useEffect(() => {
+        const el = scroller.current;
+        if (!el)
+            return;
+        if (el.scrollHeight - el.scrollTop - el.clientHeight < 160)
+            el.scrollTo({ top: el.scrollHeight });
+    }, [thread]);
+    async function submit(text) {
+        const value = text.trim();
+        if (!value || busy || blocked)
+            return;
+        setSending(true);
+        setSendError(null);
+        setDraft("");
+        try {
+            await onSend(value);
+            requestAnimationFrame(() => {
+                const el = scroller.current;
+                if (el)
+                    el.scrollTo({ top: el.scrollHeight });
+            });
+        }
+        catch (error) {
+            setDraft(value);
+            setSendError(assistantErrorText(error, labels.sendError));
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    async function act(id, kind) {
+        setActionBusy({ id, kind });
+        try {
+            await (kind === "confirm" ? onConfirm(id) : onCancel(id));
+        }
+        catch (error) {
+            setSendError(assistantErrorText(error, labels.sendError));
+        }
+        finally {
+            setActionBusy(null);
+        }
+    }
+    // Une demande venue de la page part une seule fois ; sans texte, elle met le curseur dans la saisie.
+    const handled = useRef(null);
+    const onRequest = useEffectEvent((next) => {
+        if (handled.current === next.nonce)
+            return;
+        handled.current = next.nonce;
+        if (next.prompt)
+            void submit(next.prompt);
+    });
+    useEffect(() => {
+        // oxlint-disable-next-line react/set-state-in-effect -- la demande est un clic sur la page, transmis par prop : exécutée une seule fois par nonce.
+        if (request)
+            onRequest(request);
+    }, [request]);
+    let body;
+    if (status === undefined) {
+        body = (_jsx("div", { className: "grid place-items-center py-16", children: _jsx(Spinner, { size: 5, label: "Chargement" }) }));
+    }
+    else if (!status.ready) {
+        body = (_jsx(AssistantState, { title: labels.notReadyTitle, description: labels.notReadyDescription, tone: "warning", children: setup }));
+    }
+    else if (!threadId) {
+        body = exhausted ? (_jsx(AssistantState, { title: labels.exhaustedTitle, description: labels.exhaustedDescription, tone: "warning", children: setup })) : (_jsx(AssistantState, { title: welcome?.title ?? labels.welcomeTitle, description: welcome?.description ?? labels.welcomeDescription, children: examples.length ? _jsx(AssistantExamples, { examples: examples, onPick: (e) => void submit(e) }) : null }));
+    }
+    else if (thread === undefined) {
+        body = (_jsx("div", { className: "grid place-items-center py-16", children: _jsx(Spinner, { size: 5, label: "Chargement de la conversation" }) }));
+    }
+    else if (thread === null) {
+        body = (_jsx("p", { role: "alert", className: "py-8 text-sm text-destructive", children: labels.loadError }));
+    }
+    else {
+        body = (_jsx(AssistantConversation, { className: "gap-5", children: thread.messages.map((message) => message.role === "user" ? (_jsx(AssistantUserMessage, { children: message.text }, message._id)) : (_jsx(AssistantReply, { tools: message.tools, waiting: !message.text && (message.status === "pending" || message.status === "streaming"), error: message.status === "error", actions: thread.actions
+                    .filter((action) => action.messageId === message._id)
+                    .map((action) => (_jsx(AssistantActionCard, { title: action.summary, details: action.details ?? [], status: action.status, result: action.result ?? null, confirming: actionBusy?.id === action._id && actionBusy.kind === "confirm", cancelling: actionBusy?.id === action._id && actionBusy.kind === "cancel", onConfirm: () => void act(action._id, "confirm"), onCancel: () => void act(action._id, "cancel") }, action._id))), children: message.text ? renderText(message.text) : null }, message._id))) }));
+    }
+    return (_jsxs("div", { "data-slot": "assistant-view", className: cn("flex min-h-0 flex-1 flex-col", className), children: [_jsxs("div", { className: "flex min-h-11 shrink-0 items-center gap-2 px-4 xl:pr-2 xl:pl-5", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(AssistantCredits, { status: status, labels: labels }) }), _jsx(AssistantHistory, { threads: threads, threadId: threadId, onThreadChange: (id) => {
+                            setSendError(null);
+                            onThreadChange(id);
+                        }, labels: labels, ...(now === undefined ? {} : { now }) })] }), _jsx("div", { ref: scroller, "data-slot": "assistant-scroller", className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pt-2 pb-4 xl:pr-3 xl:pl-5", children: body }), _jsxs("div", { className: "grid shrink-0 gap-2 border-t border-foreground/5 px-4 pt-3 pb-[max(env(safe-area-inset-bottom),0.75rem)] xl:pr-3 xl:pl-5", children: [sendError ? (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: sendError })) : null, full ? _jsx("p", { className: "text-sm text-muted-foreground", children: labels.full }) : null, subject ? _jsx(AssistantSubjectChip, { subject: subject, labels: labels }) : null, _jsx(AssistantComposer, { value: draft, onValueChange: setDraft, onSubmit: () => void submit(draft), disabled: blocked, busy: answering, sending: sending, label: labels.composerLabel, placeholder: answering ? labels.placeholderBusy : labels.placeholder, hint: null }), threadId && onDeleteThread && thread ? (_jsx(DeleteThread, { labels: labels, onDelete: async () => {
+                            await onDeleteThread(threadId);
+                            onThreadChange(null);
+                        } })) : null] })] }));
+}

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.30.1",
+  "version": "0.32.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",