@hgdc/ui 0.2.1 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @hgdc/ui
 
-Interface de la H family : jetons de la DA, thèmes clair et sombre, polices et composants de base, pour une application React 19 + Tailwind v4.
+Interface de la H family : jetons de la DA, thèmes clair et sombre, polices, composants de base et coque des consoles, pour une application React 19 + Tailwind v4.
 
 ```sh
 bun add @hgdc/ui
@@ -19,34 +19,75 @@ bun add @hgdc/ui
 
 ```tsx
 import { Button } from "@hgdc/ui/button"
-import { ThemeProvider, themeInitScript, useTheme } from "@hgdc/ui/theme"
+import { ThemeProvider, themeInitScript } from "@hgdc/ui/theme"
+import { sidebarInitScript } from "@hgdc/ui/app-shell"
 ```
 
-## Contenu
+Un sous-chemin par composant, sans fichier d'index. Les primitives viennent toutes de Base UI ; les graphiques sont en SVG, sans bibliothèque.
 
-| Import                                                                                          | Rôle                                                                                                        |
-| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `@hgdc/ui/styles.css`                                                                           | Jetons OKLCH, thèmes (`.dark` sur `<html>`), Inter et Geist, utilitaires `surface`, `pressable`, `soft-in`… |
-| `@hgdc/ui/theme`                                                                                | `ThemeProvider`, `useTheme`, `themeInitScript` (à poser dans le `<head>` contre le flash de thème)          |
-| `@hgdc/ui/cn`                                                                                   | `cn()` (clsx + tailwind-merge)                                                                              |
-| `@hgdc/ui/use-media-query`                                                                      | `useMediaQuery`, `useIsMobile` (sûrs au rendu serveur)                                                      |
-| `@hgdc/ui/floating`                                                                             | Classes des surfaces flottantes (menus, sélecteurs)                                                         |
-| `avatar` `badge` `button` `dialog` `drawer` `dropdown-menu` `empty` `field` `input` `input-otp` | Primitives sur Base UI                                                                                      |
-| `label` `segmented-control` `select` `separator` `sonner` `spinner` `switch` `textarea`         | Primitives sur Base UI, toasts sonner, icônes Hugeicons                                                     |
+## Fondations
 
-Un sous-chemin par composant, sans fichier d'index : `import { Badge } from "@hgdc/ui/badge"`.
+| Import                     | Rôle                                                                                                                          |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `@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/cn`              | `cn()` (clsx + tailwind-merge)                                                                                                |
+| `@hgdc/ui/use-media-query` | `useMediaQuery`, `useIsMobile`                                                                                                |
+| `@hgdc/ui/floating`        | Classes des surfaces flottantes                                                                                               |
+
+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 sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                               |
+|                | `<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} products={HGDC_PRODUCTS} />`                                                      |
+| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`)                                  |
+| `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>} />` |
+
+La barre se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. Le kit ne connaît ni routeur ni authentification : liens par `render={<Link />}`, actions par callbacks. Rôles d'organisation : `owner`, `admin`, `member` (Propriétaire, Admin, Membre).
+
+## Contenu et données
+
+| Import          | Exemple                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `card`          | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>`                                              |
+| `alert`         | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>`                                                                                |
+| `table`         | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />` |
+| `resource-list` | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>`                                                                    |
+| `stat`          | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`                                                                               |
+| `time-chart`    | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" />`                                                                            |
+| `status`        | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu)                                                                                                             |
+| `uptime-bar`    | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />`                                                                                             |
+| `timeline`      | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />`                                                                                                                      |
+| `relative-time` | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol)                                                                                                         |
+| `copy-button`   | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`                                                                                                                          |
+| `secret-reveal` | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                     |
+| `skeleton`      | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                             |
+
+## Contrôles et surfaces flottantes
+
+| Import        | Exemple                                                                                                                                                      |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `checkbox`    | `<label className="flex items-center gap-2.5"><Checkbox defaultChecked /> Résumé hebdomadaire</label>`                                                       |
+| `radio-group` | `<RadioGroup aria-labelledby="role" defaultValue="member"><RadioGroupItem value="admin" />…</RadioGroup>`                                                    |
+| `tabs`        | `<Tabs defaultValue="apercu"><TabsList><TabsTab value="apercu">Aperçu</TabsTab></TabsList><TabsPanel value="apercu">…</TabsPanel></Tabs>`                    |
+| `tooltip`     | `<TooltipProvider>` autour de l'app, puis `<Tooltip><TooltipTrigger aria-label="Copier">…</TooltipTrigger><TooltipContent>Copier</TooltipContent></Tooltip>` |
+| `popover`     | `<Popover><PopoverTrigger>Aide</PopoverTrigger><PopoverContent><PopoverTitle>…</PopoverTitle></PopoverContent></Popover>`                                    |
 
 ## Règles de la DA
 
-- Chrome monochrome, un seul accent violet : focus, lien, élément actif, un geste principal par écran.
-- Profondeur par la teinte : ni ombre ni bordure dans le flux, ombre réservée à ce qui flotte.
-- Boutons en pilule, champs et menus en `rounded-2xl`, cartes en `rounded-3xl`.
-- Au survol, seule la couleur change : ni ombre, ni zoom. Le rebond est réservé à l'appui.
-- Couleurs de statut : la couleur vive pour les pastilles, son encre (`text-status-active-ink`, `text-info-ink`…) pour le texte. L'information est bleue, le violet reste l'accent.
-- Chargement : l'anneau de la DA, `<Spinner />` dans un bouton, `<Spinner size={8} tone="accent" />` seul sur une page.
-- Un `Button` rendu en lien (`render={<Link />}`) reste un lien pour les lecteurs d'écran.
+- Chrome monochrome, un seul accent violet : focus, lien, un geste principal par écran. « Vous êtes ici » (barre, onglets) reste en teinte.
+- Profondeur par la teinte : cartes `surface` sans ombre ni contour, ombre réservée à ce qui flotte, aucun flou.
+- Au survol, seule la couleur change. Le rebond est réservé à l'appui. La palette de commandes s'ouvre sans animation.
+- Un statut s'écrit toujours (point et libellé), jamais par la couleur seule. Chiffres en `tabular-nums`.
+- Graphiques : `--chart-1` à `--chart-6` dans cet ordre, validées pour le daltonisme dans les deux thèmes ; au-delà de six séries, regrouper en « Autres ».
 - Référence de l'interface : Host. Couleur d'un client : `--brand-accent`.
 
-Mode d'emploi complet : [Adopter le kit](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/guides/adopter-le-kit.md#7-interface). Décisions : [ADR 0005](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0005-ui-css-brute-et-sous-chemins.md).
+Mode d'emploi complet : [Adopter le kit](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/guides/adopter-le-kit.md#7-interface). Décisions : [ADR 0005](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0005-ui-css-brute-et-sous-chemins.md), [ADR 0006](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0006-ui-composants-des-consoles.md).
 
 Tous droits réservés, Hugo Gebel Développement Conseil.

package/dist/account-menu.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+export type HgdcProduct = {
+    /** « HGDC Host ». */
+    name: string;
+    href: string;
+    /** Le produit ouvert : coché, sans lien. */
+    current?: boolean;
+};
+export type AccountUser = {
+    name: string;
+    email: string;
+    image?: string | null;
+};
+/**
+ * Le menu du compte, en bas de la barre latérale : profil, sécurité, thème, raccourcis, autres
+ * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
+ * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
+ * `ThemeProvider`.
+ */
+export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products, children, variant, }: {
+    user: AccountUser;
+    onProfile?: () => void;
+    onSecurity?: () => void;
+    /** Ouvre l'aide des raccourcis clavier. */
+    onShortcuts?: () => void;
+    onSignOut: () => void;
+    /** Les produits de la famille, pour passer de l'un à l'autre. */
+    products?: Array<HgdcProduct>;
+    /** Entrées propres au produit (« Administration »), après le profil. */
+    children?: ReactNode;
+    variant?: "row" | "avatar";
+}): React.JSX.Element;

package/dist/account-menu.js

@@ -0,0 +1,39 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ComputerIcon from "@hugeicons/core-free-icons/ComputerIcon";
+import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
+import KeyboardIcon from "@hugeicons/core-free-icons/KeyboardIcon";
+import Logout01Icon from "@hugeicons/core-free-icons/Logout01Icon";
+import Moon02Icon from "@hugeicons/core-free-icons/Moon02Icon";
+import SecurityLockIcon from "@hugeicons/core-free-icons/SecurityLockIcon";
+import Sun03Icon from "@hugeicons/core-free-icons/Sun03Icon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import UserIcon from "@hugeicons/core-free-icons/UserIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { MENU_LINK_ITEM } from "./org-switcher.js";
+import { useTheme } from "./theme.js";
+const THEMES = ["light", "dark", "system"];
+function initials(name) {
+    return name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0])
+        .join("");
+}
+/**
+ * Le menu du compte, en bas de la barre latérale : profil, sécurité, thème, raccourcis, autres
+ * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
+ * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
+ * `ThemeProvider`.
+ */
+export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products, children, variant = "row", }) {
+    const { theme, setTheme } = useTheme();
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(HugeiconsIcon, { icon: theme === "dark" ? Moon02Icon : theme === "light" ? Sun03Icon : ComputerIcon, "aria-hidden": true }), "Th\u00E8me"] }), _jsx(DropdownMenuSubContent, { children: _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: (value) => {
+                                        const next = THEMES.find((t) => t === value);
+                                        if (next)
+                                            setTheme(next);
+                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Produits HGDC" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true }), product.name] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
+}

package/dist/alert.d.ts

@@ -0,0 +1,19 @@
+import { type IconSvgElement } from "@hugeicons/react";
+import type { ReactNode } from "react";
+export type AlertTone = "info" | "success" | "warning" | "destructive";
+/**
+ * Message posé dans la page, non bloquant : une information, un succès durable, un avertissement,
+ * une erreur. Lavis de la couleur, icône dans son encre, texte en couleur de texte : la couleur
+ * ne porte jamais seule le sens, l'icône et le titre le disent aussi.
+ *
+ * Une erreur s'annonce tout de suite (`role="alert"`), le reste poliment (`role="status"`).
+ * Pour un choix qui bloque, c'est un `Dialog`.
+ */
+export declare function Alert({ tone, title, children, action, icon, className, ...props }: Omit<React.ComponentProps<"div">, "title"> & {
+    tone?: AlertTone;
+    title?: ReactNode;
+    /** Un bouton ou un lien à droite (« Réessayer », « Voir la doc »). */
+    action?: ReactNode;
+    /** Remplace l'icône du ton. */
+    icon?: IconSvgElement;
+}): React.JSX.Element;

package/dist/alert.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon";
+import AlertCircleIcon from "@hugeicons/core-free-icons/AlertCircleIcon";
+import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon";
+import InformationCircleIcon from "@hugeicons/core-free-icons/InformationCircleIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { cn } from "./cn.js";
+const TONES = {
+    info: { box: "bg-info/10", icon: "text-info-ink", glyph: InformationCircleIcon },
+    success: { box: "bg-status-active/12", icon: "text-status-active-ink", glyph: CheckmarkCircle02Icon },
+    warning: { box: "bg-status-paused/14", icon: "text-status-paused-ink", glyph: Alert02Icon },
+    destructive: { box: "bg-destructive/10", icon: "text-destructive", glyph: AlertCircleIcon },
+};
+/**
+ * Message posé dans la page, non bloquant : une information, un succès durable, un avertissement,
+ * une erreur. Lavis de la couleur, icône dans son encre, texte en couleur de texte : la couleur
+ * ne porte jamais seule le sens, l'icône et le titre le disent aussi.
+ *
+ * Une erreur s'annonce tout de suite (`role="alert"`), le reste poliment (`role="status"`).
+ * Pour un choix qui bloque, c'est un `Dialog`.
+ */
+export function Alert({ tone = "info", title, children, action, icon, className, ...props }) {
+    const t = TONES[tone];
+    return (_jsxs("div", { role: tone === "destructive" ? "alert" : "status", "data-slot": "alert", "data-tone": tone, className: cn("flex flex-wrap items-start gap-x-3 gap-y-2 rounded-2xl px-4 py-3 text-sm sm:flex-nowrap", t.box, className), ...props, children: [_jsx(HugeiconsIcon, { icon: icon ?? t.glyph, strokeWidth: 2, "aria-hidden": true, className: cn("mt-0.5 size-4.5 shrink-0", t.icon) }), _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("p", { className: "font-medium text-foreground", children: title }) : null, children ? _jsx("div", { className: cn("text-foreground/80", title ? "mt-0.5" : undefined), children: children }) : null] }), action ? _jsx("div", { className: "flex shrink-0 items-center gap-2 max-sm:w-full max-sm:pl-7.5", children: action }) : null] }));
+}

package/dist/app-shell.d.ts

@@ -0,0 +1,56 @@
+import { type IconSvgElement } from "@hugeicons/react";
+import { type ReactNode } from "react";
+/**
+ * À poser dans le `<head>`, avec `themeInitScript` : il remet le rail avant la première
+ * peinture, et la variante CSS `rail:` le lit, donc rien ne saute au chargement.
+ */
+export declare const sidebarInitScript: string;
+/** La barre latérale est-elle réduite en rail ? L'état vit sur `<html data-sidebar="rail">`. */
+export declare function useSidebarRail(): boolean;
+export declare function toggleSidebar(): void;
+/** Pour fermer le tiroir mobile depuis un élément de la barre (un sélecteur, un bouton). */
+export declare function useAppShell(): {
+    closeMobileNav: () => void;
+};
+/** La navigation du produit : 4 à 7 entrées, à plat. */
+export declare function SidebarNav({ label, className, children, }: {
+    /** Nom de la navigation pour les lecteurs d'écran : « Projet », « Organisation ». */
+    label: string;
+    className?: string;
+    children: ReactNode;
+}): React.JSX.Element;
+/**
+ * Une entrée de la barre. « Vous êtes ici » par `active` (ou `data-status="active"`, que pose le
+ * `Link` de TanStack Router) : teinte de la coque, jamais l'accent. En rail, l'icône seule, et le
+ * nom en infobulle.
+ */
+export declare function SidebarNavItem({ icon, label, active, href, render, }: {
+    icon: IconSvgElement;
+    label: string;
+    active?: boolean;
+    href?: string;
+    /** Lien du routeur : `render={<Link to="…" />}`. */
+    render?: React.ReactElement;
+}): React.JSX.Element;
+/**
+ * La coque commune des consoles HGDC, celle de Host. Sur ordinateur : colonne teintée à gauche
+ * (organisation en haut, navigation, compte en bas), réductible en rail (`Ctrl+B`, mémorisé), et
+ * la page sur une carte à côté. Sur téléphone : une barre en haut, le menu dans un tiroir qui
+ * monte du bas et se referme quand on choisit une page.
+ *
+ * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
+ * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
+ */
+export declare function AppShell({ sidebarHeader, nav, sidebarFooter, header, children, mainClassName, }: {
+    /** Haut de la barre : `OrgSwitcher`. */
+    sidebarHeader?: ReactNode;
+    /** `SidebarNav` et ses `SidebarNavItem`. */
+    nav: ReactNode;
+    /** Bas de la barre : liens secondaires (Docs, Paramètres) et `AccountMenu`. */
+    sidebarFooter?: ReactNode;
+    /** Barre du haut de la page : sélecteur de projet, recherche (`CommandMenuButton`). */
+    header?: ReactNode;
+    children: ReactNode;
+    /** Largeur et marges du contenu : `max-w-6xl` par défaut. */
+    mainClassName?: string;
+}): React.JSX.Element;

package/dist/app-shell.js

@@ -0,0 +1,107 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
+import PanelLeftCloseIcon from "@hugeicons/core-free-icons/PanelLeftCloseIcon";
+import PanelLeftOpenIcon from "@hugeicons/core-free-icons/PanelLeftOpenIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useRender } from "@base-ui/react/use-render";
+import { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
+import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "./cn.js";
+// ── Rail : la barre latérale réduite aux icônes, mémorisée par navigateur ──────────────
+const RAIL_KEY = "sidebar";
+const RAIL_EVENT = "sidebarchange";
+/**
+ * À poser dans le `<head>`, avec `themeInitScript` : il remet le rail avant la première
+ * peinture, et la variante CSS `rail:` le lit, donc rien ne saute au chargement.
+ */
+export const sidebarInitScript = `try{if(localStorage.getItem(${JSON.stringify(RAIL_KEY)})==="rail")document.documentElement.dataset.sidebar="rail"}catch(e){}`;
+function subscribeRail(onChange) {
+    window.addEventListener(RAIL_EVENT, onChange);
+    return () => window.removeEventListener(RAIL_EVENT, onChange);
+}
+/** La barre latérale est-elle réduite en rail ? L'état vit sur `<html data-sidebar="rail">`. */
+export function useSidebarRail() {
+    return useSyncExternalStore(subscribeRail, () => document.documentElement.dataset.sidebar === "rail", () => false);
+}
+export function toggleSidebar() {
+    const root = document.documentElement;
+    const rail = root.dataset.sidebar !== "rail";
+    if (rail)
+        root.dataset.sidebar = "rail";
+    else
+        delete root.dataset.sidebar;
+    try {
+        if (rail)
+            localStorage.setItem(RAIL_KEY, "rail");
+        else
+            localStorage.removeItem(RAIL_KEY);
+    }
+    catch {
+        // Stockage bloqué : le choix vaut pour cette page seulement.
+    }
+    window.dispatchEvent(new Event(RAIL_EVENT));
+}
+/** `Ctrl+B` (`⌘B`) réduit ou déplie la barre latérale, hors des champs de saisie. */
+function useToggleShortcut() {
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key.toLowerCase() !== "b" || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey)
+                return;
+            const target = event.target;
+            if (target instanceof Element && target.closest("input, textarea, select, [contenteditable=true]"))
+                return;
+            event.preventDefault();
+            toggleSidebar();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, []);
+}
+// ── Navigation ──────────────────────────────────────────────────────────────────────
+const ShellContext = createContext({ closeMobileNav: () => { } });
+/** Pour fermer le tiroir mobile depuis un élément de la barre (un sélecteur, un bouton). */
+export function useAppShell() {
+    return useContext(ShellContext);
+}
+/** La navigation du produit : 4 à 7 entrées, à plat. */
+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 }) }));
+}
+/**
+ * Une entrée de la barre. « Vous êtes ici » par `active` (ou `data-status="active"`, que pose le
+ * `Link` de TanStack Router) : teinte de la coque, jamais l'accent. En rail, l'icône seule, et le
+ * nom en infobulle.
+ */
+export function SidebarNavItem({ icon, label, active, href, render, }) {
+    const rail = useSidebarRail();
+    const { closeMobileNav } = useAppShell();
+    const link = useRender({
+        defaultTagName: "a",
+        render,
+        props: {
+            href,
+            "aria-current": active ? "page" : undefined,
+            onClick: closeMobileNav,
+            className: cn("flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "aria-[current=page]:bg-muted aria-[current=page]:text-foreground data-[status=active]:bg-muted data-[status=active]:text-foreground", "lg:min-h-9 lg:gap-2.5 lg:py-2 lg:text-shell-muted lg:hover:bg-shell-hover lg:hover:text-shell-foreground", "lg:aria-[current=page]:bg-shell-active lg:aria-[current=page]:text-shell-foreground lg:data-[status=active]:bg-shell-active lg:data-[status=active]:text-shell-foreground", "lg:rail:justify-center lg:rail:px-0"),
+            children: (_jsxs(_Fragment, { children: [_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" }), _jsx("span", { className: "truncate lg:rail:sr-only", children: label })] })),
+        },
+    });
+    return (_jsx("li", { children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
+}
+// ── Coque ─────────────────────────────────────────────────────────────────────────────
+/**
+ * La coque commune des consoles HGDC, celle de Host. Sur ordinateur : colonne teintée à gauche
+ * (organisation en haut, navigation, compte en bas), réductible en rail (`Ctrl+B`, mémorisé), et
+ * la page sur une carte à côté. Sur téléphone : une barre en haut, le menu dans un tiroir qui
+ * monte du bas et se referme quand on choisit une page.
+ *
+ * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
+ * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
+ */
+export function AppShell({ sidebarHeader, nav, sidebarFooter, header, children, mainClassName, }) {
+    const rail = useSidebarRail();
+    const [menuOpen, setMenuOpen] = useState(false);
+    useToggleShortcut();
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsxs("div", { "data-slot": "app-shell", className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)] lg:bg-shell", children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-drawer) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [_jsxs("div", { className: "mt-2 flex min-h-14 shrink-0 items-center gap-1 px-3 rail:flex-col rail:justify-center rail:px-0 rail:py-1", children: [_jsx("div", { className: "min-w-0 flex-1 rail:flex-none", children: sidebarHeader }), _jsx("button", { type: "button", onClick: toggleSidebar, "aria-label": rail ? "Déplier la barre latérale" : "Réduire la barre latérale", "aria-keyshortcuts": "Control+B Meta+B", title: rail ? "Déplier (Ctrl+B)" : "Réduire (Ctrl+B)", className: "grid size-8 shrink-0 place-items-center rounded-lg text-shell-muted outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-shell-hover hover:text-shell-foreground focus-visible:ring-2 focus-visible:ring-ring/50 active:scale-[0.96]", children: _jsx(HugeiconsIcon, { icon: rail ? PanelLeftCloseIcon : PanelLeftOpenIcon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) })] }), nav, sidebarFooter ? _jsx("div", { className: "grid gap-0.5 px-3 pt-1 pb-3", children: sidebarFooter }) : null] }), _jsx("div", { className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { className: "flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background", children: [_jsxs("header", { className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex h-14 shrink-0 items-center gap-1 border-b border-foreground/5 bg-background px-2 sm:px-4 lg:top-0", children: [_jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: header })] }), _jsx("main", { id: "contenu", tabIndex: -1, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: children })] }) }), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), sidebarHeader ? _jsx("div", { className: "px-3 pt-1", children: sidebarHeader }) : null, nav, sidebarFooter ? (_jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)]", children: sidebarFooter })) : null] }) })] }) }));
+}

package/dist/card.d.ts

@@ -0,0 +1,24 @@
+import { useRender } from "@base-ui/react/use-render";
+type CardProps = useRender.ComponentProps<"section"> & {
+    /** `danger` : la zone des actions irréversibles (supprimer un projet), cerclée de rouge. */
+    tone?: "default" | "danger";
+    /**
+     * Toute la carte est cliquable (`render={<Link to="…" />}`) : le survol fonce la teinte,
+     * l'appui l'enfonce à peine. Jamais d'ombre ni de zoom.
+     */
+    interactive?: boolean;
+};
+/**
+ * Carte de la DA : une teinte (`surface`), ni contour ni ombre, `rounded-3xl`. Un seul niveau
+ * de carte par écran ; ce qui est dedans reste à plat.
+ */
+declare function Card({ className, tone, interactive, render, ...props }: CardProps): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, children, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+/** Action en haut à droite de l'en-tête (un bouton « … », un lien « Tout voir »). */
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Pied d'action, comme celui des réglages de Host : un filet, puis les boutons alignés à droite. */
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps };

package/dist/card.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "./cn.js";
+/**
+ * Carte de la DA : une teinte (`surface`), ni contour ni ombre, `rounded-3xl`. Un seul niveau
+ * de carte par écran ; ce qui est dedans reste à plat.
+ */
+function Card({ className, tone = "default", interactive = false, render, ...props }) {
+    return useRender({
+        defaultTagName: "section",
+        render,
+        props: mergeProps({
+            "data-slot": "card",
+            "data-tone": tone,
+            className: cn("flex flex-col overflow-hidden rounded-3xl text-card-foreground", interactive
+                ? "surface-link pressable-card outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                : "surface", tone === "danger" && "ring-1 ring-destructive/30 ring-inset", className),
+        }, props),
+    });
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("grid auto-rows-min items-start gap-1 px-5 pt-5 sm:px-6 sm:pt-6 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]", className), ...props }));
+}
+function CardTitle({ className, children, ...props }) {
+    return (_jsx("h2", { "data-slot": "card-title", className: cn("text-base font-semibold", className), ...props, children: children }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "card-description", className: cn("max-w-prose text-sm text-muted-foreground", className), ...props }));
+}
+/** Action en haut à droite de l'en-tête (un bouton « … », un lien « Tout voir »). */
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("grid gap-4 px-5 py-5 sm:px-6 sm:py-6 [[data-slot=card-header]+&]:pt-4", className), ...props }));
+}
+/** Pied d'action, comme celui des réglages de Host : un filet, puis les boutons alignés à droite. */
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("mt-auto flex flex-wrap items-center justify-end gap-3 border-t border-foreground/5 bg-foreground/[0.02] px-5 py-3 sm:px-6", className), ...props }));
+}
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/dist/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+/**
+ * Case à cocher. Monochrome : cochée, elle prend l'encre du texte (`primary`), l'accent violet
+ * reste au focus. Le nom accessible vient d'un `<label>` qui l'entoure, ou d'un `Field`.
+ *
+ * ```tsx
+ * <label className="flex items-center gap-2.5 text-sm">
+ *   <Checkbox defaultChecked /> Recevoir le résumé hebdomadaire
+ * </label>
+ * ```
+ */
+export declare function Checkbox({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props): React.JSX.Element;

package/dist/checkbox.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import MinusSignIcon from "@hugeicons/core-free-icons/MinusSignIcon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { cn } from "./cn.js";
+/**
+ * Case à cocher. Monochrome : cochée, elle prend l'encre du texte (`primary`), l'accent violet
+ * reste au focus. Le nom accessible vient d'un `<label>` qui l'entoure, ou d'un `Field`.
+ *
+ * ```tsx
+ * <label className="flex items-center gap-2.5 text-sm">
+ *   <Checkbox defaultChecked /> Recevoir le résumé hebdomadaire
+ * </label>
+ * ```
+ */
+export function Checkbox({ className, indeterminate, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", indeterminate: indeterminate, className: cn("touch-target peer grid size-5 shrink-0 place-items-center rounded-[0.4rem] border border-foreground/25 bg-background text-primary-foreground", "transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/40 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-invalid:border-destructive", "dark:bg-white/[0.04]", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "grid place-items-center data-unchecked:hidden", children: _jsx(HugeiconsIcon, { icon: indeterminate ? MinusSignIcon : Tick02Icon, strokeWidth: 2.5, className: "size-3.5" }) }) }));
+}

package/dist/command-menu.d.ts

@@ -0,0 +1,56 @@
+import { type IconSvgElement } from "@hugeicons/react";
+export type Command = {
+    /** Unique dans toute la palette. */
+    id: string;
+    label: string;
+    icon?: IconSvgElement;
+    /** Autres mots qui trouvent la commande : « dns » pour « Ajouter un domaine ». */
+    keywords?: Array<string>;
+    /** Texte discret à droite : l'organisation d'un projet, « Page ». */
+    hint?: string;
+    /** Touches affichées à droite, par exemple `["G", "P"]`. */
+    shortcut?: Array<string>;
+    onSelect: () => void;
+};
+/** Les groupes de la famille, dans cet ordre : « Aller à », « Créer », « Changer ». */
+export type CommandGroup = {
+    label: string;
+    items: Array<Command>;
+};
+/**
+ * Une commande répond à la recherche si chaque mot tapé figure dans son libellé ou ses mots-clés,
+ * sans tenir compte des accents ni de la casse : « creer dom » trouve « Créer un domaine ».
+ */
+export declare function matchCommand(command: Pick<Command, "label" | "keywords">, query: string): boolean;
+/**
+ * `Ctrl+K` (`⌘K` sur Mac) partout, même dans un champ : c'est le geste qui ouvre tout. Le produit
+ * le pose une fois, autour de sa coque.
+ */
+export declare function useCommandMenuShortcut(onToggle: () => void, key?: string): void;
+/**
+ * Palette de commandes : chercher une page, créer une ressource, changer d'organisation ou de
+ * thème, sans la souris. Bâtie sur l'`Autocomplete` de Base UI rendu dans un `Dialog`, comme
+ * l'exemple « Command palette » de sa documentation : flèches pour choisir, Entrée pour lancer,
+ * Échap pour fermer, focus rendu à l'élément d'origine.
+ *
+ * Sans animation, ni à l'ouverture ni à la fermeture : elle s'ouvre des dizaines de fois par
+ * jour, au clavier, et doit être là à l'instant où la touche est pressée.
+ */
+export declare function CommandMenu({ groups, open: openProp, onOpenChange, placeholder, emptyLabel, shortcut, }: {
+    groups: Array<CommandGroup>;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    emptyLabel?: string;
+    /** Ouvrir et fermer par `Ctrl+K`. `false` si le produit gère le raccourci lui-même. */
+    shortcut?: boolean;
+}): React.JSX.Element;
+/**
+ * Le bouton qui ouvre la palette, pour la souris et le doigt : « Rechercher » et le raccourci.
+ * Dans la barre latérale ou l'en-tête.
+ */
+export declare function CommandMenuButton({ onClick, label, className, }: {
+    onClick: () => void;
+    label?: string;
+    className?: string;
+}): React.JSX.Element;