@hgdc/ui 0.10.2 → 0.11.0

package/README.md

@@ -41,7 +41,7 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 
 | Import         | Exemple                                                                                                                                                                                                                         |
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `app-shell`    | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                                                                                    |
+| `app-shell`    | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>} onSearch={() => setOpen(true)}>`                                                     |
 |                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                               |
 | `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                     |
 | `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché                                                                        |
@@ -49,9 +49,22 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 | `products`     | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, pastille `badge`, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010) |
 | `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                                                                              |
 | `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`                                                                    |
+| `page-header`  | `<Page title="Réglages">…</Page>` (colonne de lecture de 768 px), `<Page title="Projets" wide actions={…}>…</Page>` (tableaux, listes, tableaux de bord)                                                                        |
+| `member-item`  | `<ResourceList><MemberItem name={m.name} email={m.email} orgRole={m.role} isMe={m.isMe} /></ResourceList>` : avatar à initiales, « (toi) », `RoleBadge`                                                                         |
+| `initials`     | `initials("Test vérif")` donne « TV » : la même règle pour une personne et une organisation (`OrgMark`, `AccountMenu`, `MemberItem`)                                                                                            |
 
 Le menu « Produits » et la palette (`badge` d'une commande) montrent la pastille de chaque produit.
 
+### Mise en page (ADR 0012)
+
+Une seule règle dans les sept produits, posée par la coque :
+
+- **Barre du haut** : sur téléphone, menu puis marque du produit (pastille et mot), toujours. Puis le contexte du produit (`header`, à gauche : sélecteur de projet). La recherche passe par `onSearch` : toujours à droite, 384 px sur ordinateur, la loupe seule sous `lg`. Ne pas poser `CommandMenuButton` dans `header`.
+- **Contenu** : la même boîte partout (`max-w-6xl`, marges `px-4`, `sm:px-6`, `lg:px-10`), donc le titre au même endroit. Pas de `mainClassName` (déprécié).
+- **Largeur d'une page** : `Page`, alignée à gauche. Par défaut une colonne de lecture de 768 px (formulaires, réglages, fiches, membres) ; `wide` pour les tableaux, listes à colonnes, tableaux de bord et grilles de cartes.
+- **États vides** : `<Empty variant="card">` pour une page vide, icône monochrome (`EmptyMedia variant="icon"`), sans teinte de couleur.
+- **Rôles et initiales** : `RoleBadge` (neutre), `MemberItem`, `initials`. Jamais une fonction d'initiales ou un badge de rôle dans un produit.
+
 ## Identité H family
 
 | Import                         | Rôle                                                                                                                                       |

package/dist/account-menu.js

@@ -12,19 +12,12 @@ 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 { initials } from "./initials.js";
 import { MENU_LINK_ITEM } from "./org-switcher.js";
 import { ProductBadge } from "./product-badge.js";
 import { productMenuEntries } from "./products.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` :
@@ -38,7 +31,7 @@ function initials(name) {
 export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
     const { theme, setTheme } = useTheme();
     const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
-    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) => {
+    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, user.email) })] }), 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);

package/dist/app-shell.d.ts

@@ -44,7 +44,7 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
  * 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({ product, organization, productRail, accountHref, nav, sidebarFooter, header, children, mainClassName, }: {
+export declare function AppShell({ product, organization, productRail, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, mainClassName, }: {
     /** Le produit affiché (`"host"`) : sa marque en haut de la barre, « vous êtes ici » dans la barre des produits. */
     product: FamilyProduct;
     /** `OrgSwitcher` : en haut de la barre des produits, en haut du tiroir sur téléphone. */
@@ -60,9 +60,22 @@ export declare function AppShell({ product, organization, productRail, accountHr
     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`). */
+    /**
+     * Barre du haut, à gauche, après la marque sur téléphone : le contexte de la page (sélecteur de
+     * projet, rappel). Jamais la recherche : elle passe par `onSearch`.
+     */
     header?: ReactNode;
+    /**
+     * Ouvre la palette (`CommandMenu`). La coque pose la recherche toujours au même endroit : à
+     * droite de la barre du haut, 384 px sur ordinateur, la loupe seule sur téléphone.
+     */
+    onSearch?: () => void;
+    /** Texte du champ de recherche : « Rechercher » par défaut. */
+    searchLabel?: string;
     children: ReactNode;
-    /** Largeur et marges du contenu : `max-w-6xl` par défaut. */
+    /**
+     * @deprecated La largeur du contenu est la même dans toute la famille (`max-w-6xl`, ADR 0012) :
+     * une page étroite passe par `Page` (`@hgdc/ui/page-header`), pas par la coque.
+     */
     mainClassName?: string;
 }): React.JSX.Element;

package/dist/app-shell.js

@@ -5,6 +5,7 @@ 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 { CommandMenuButton } from "./command-menu.js";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
 import { isApplePlatform, Kbd, KbdGroup } from "./kbd.js";
 import { ProductBadge } from "./product-badge.js";
@@ -128,8 +129,8 @@ function SidebarHead({ product }) {
  * 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({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, children, mainClassName, }) {
+export function AppShell({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, mainClassName, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     useToggleShortcut();
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsxs("div", { "data-slot": "app-shell", className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)]" : "lg:grid-cols-[auto_minmax(0,1fr)]"), 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" }), productRail ? _jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref }) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "group/sidebar 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: [_jsx(SidebarHead, { product: product }), !productRail && organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null, 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" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : 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] }) })] }) }));
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsxs("div", { "data-slot": "app-shell", className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)]" : "lg:grid-cols-[auto_minmax(0,1fr)]"), 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" }), productRail ? _jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref }) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "group/sidebar 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: [_jsx(SidebarHead, { product: product }), !productRail && organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null, 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" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: productName(product) })] }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null] }), _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" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : 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/checkbox.js

@@ -15,5 +15,7 @@ import { cn } from "./cn.js";
  * ```
  */
 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" }) }) }));
+    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", 
+        // Le fond sombre de la case vide ne doit jamais recouvrir le fond coché (même spécificité).
+        "dark:bg-white/[0.04] dark:data-checked:bg-primary dark:data-indeterminate:bg-primary", 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/copy-button.js

@@ -45,5 +45,7 @@ export function CopyButton({ value, label = "Copier", showLabel = false, classNa
  * qu'il soit copié.
  */
 export function Snippet({ value, prompt = false, label, className, }) {
-    return (_jsxs("div", { "data-slot": "snippet", className: cn("flex min-w-0 items-center gap-2 rounded-2xl bg-foreground/[0.05] py-1.5 pr-1.5 pl-4", className), children: [_jsxs("pre", { className: "min-w-0 flex-1 overflow-x-auto py-1 font-mono text-[13px] [scrollbar-width:thin]", children: [prompt ? (_jsx("span", { "aria-hidden": true, className: "mr-2 text-muted-foreground select-none", children: "$" })) : null, _jsx("code", { children: value })] }), _jsx(CopyButton, { value: value, ...(label !== undefined ? { label } : {}) })] }));
+    return (_jsxs("div", { "data-slot": "snippet", className: cn(
+        // `max-w-full` : dans une colonne centrée (état vide), la commande défile au lieu de déborder.
+        "flex max-w-full min-w-0 items-center gap-2 rounded-2xl bg-foreground/[0.05] py-1.5 pr-1.5 pl-4", className), children: [_jsxs("pre", { className: "min-w-0 flex-1 overflow-x-auto py-1 font-mono text-[13px] [scrollbar-width:thin]", children: [prompt ? (_jsx("span", { "aria-hidden": true, className: "mr-2 text-muted-foreground select-none", children: "$" })) : null, _jsx("code", { children: value })] }), _jsx(CopyButton, { value: value, ...(label !== undefined ? { label } : {}) })] }));
 }

package/dist/empty.d.ts

@@ -1,6 +1,14 @@
 import { type VariantProps } from "class-variance-authority";
 import { type Variants } from "./cn.ts";
-declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * État vide. `variant="card"` : la carte commune d'une page sans contenu (liste, tableau, tableau
+ * de bord vides), la même dans tous les produits. `plain` (défaut) : sans fond, dans une carte
+ * existante ou un panneau. L'icône (`EmptyMedia variant="icon"`) reste monochrome : l'accent
+ * violet est réservé au focus, aux liens et à l'élément actif.
+ */
+declare function Empty({ className, variant, ...props }: React.ComponentProps<"div"> & {
+    variant?: "plain" | "card";
+}): React.JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const emptyMediaVariants: Variants<{
     variant: "default" | "icon";

package/dist/empty.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "./cn.js";
-function Empty({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl p-12 text-center text-balance", className), ...props }));
+/**
+ * État vide. `variant="card"` : la carte commune d'une page sans contenu (liste, tableau, tableau
+ * de bord vides), la même dans tous les produits. `plain` (défaut) : sans fond, dans une carte
+ * existante ou un panneau. L'icône (`EmptyMedia variant="icon"`) reste monochrome : l'accent
+ * violet est réservé au focus, aux liens et à l'élément actif.
+ */
+function Empty({ className, variant = "plain", ...props }) {
+    return (_jsx("div", { "data-slot": "empty", "data-variant": variant, className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl p-12 text-center text-balance", variant === "card" && "surface rounded-3xl px-6 py-14", className), ...props }));
 }
 function EmptyHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2", className), ...props }));

package/dist/initials.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Les initiales d'un nom, pour un avatar ou une marque sans image : la première lettre des deux
+ * premiers mots (« Ada Lovelace » donne « AL », « Test vérif » donne « TV »), la première lettre
+ * seule pour un mot unique (« Acme » donne « A »). La même règle pour une personne et une
+ * organisation, dans tous les produits. Sans nom, la partie locale de `fallback` (une adresse
+ * e-mail : « jean.dupont@… » donne « JD »), puis « ? ».
+ */
+export declare function initials(name: string | null | undefined, fallback?: string | null): string;

package/dist/initials.js

@@ -0,0 +1,23 @@
+function firstLetters(value, separator) {
+    return value
+        .trim()
+        .split(separator)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((word) => Array.from(word)[0] ?? "")
+        .join("")
+        .toLocaleUpperCase("fr-CH");
+}
+/**
+ * Les initiales d'un nom, pour un avatar ou une marque sans image : la première lettre des deux
+ * premiers mots (« Ada Lovelace » donne « AL », « Test vérif » donne « TV »), la première lettre
+ * seule pour un mot unique (« Acme » donne « A »). La même règle pour une personne et une
+ * organisation, dans tous les produits. Sans nom, la partie locale de `fallback` (une adresse
+ * e-mail : « jean.dupont@… » donne « JD »), puis « ? ».
+ */
+export function initials(name, fallback) {
+    const fromName = firstLetters(name ?? "", /\s+/);
+    if (fromName)
+        return fromName;
+    return firstLetters((fallback ?? "").split("@")[0] ?? "", /[\s._+-]+/) || "?";
+}

package/dist/member-item.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { type OrgRole } from "./org-switcher.tsx";
+/**
+ * Une personne d'une organisation, dans une `ResourceList` : avatar (photo ou initiales),
+ * nom, « (toi) », adresse e-mail et rôle. La même ligne dans tous les produits ; le rôle reste
+ * visible sur téléphone.
+ *
+ * ```tsx
+ * <ResourceList>
+ *   {members.map((m) => (
+ *     <MemberItem key={m.id} name={m.name} email={m.email} orgRole={m.role} isMe={m.isMe} />
+ *   ))}
+ * </ResourceList>
+ * ```
+ */
+export declare function MemberItem({ name, email, orgRole: role, image, isMe, roleHint, actions, className, }: {
+    name: string;
+    email?: string;
+    /** Rôle dans l'organisation (`role` est réservé à ARIA). */
+    orgRole?: OrgRole | null;
+    image?: string | null;
+    isMe?: boolean;
+    /** Ce que le rôle permet, au survol du badge. */
+    roleHint?: string;
+    /** Menu « … » ou boutons-icônes. */
+    actions?: ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/member-item.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { initials } from "./initials.js";
+import { RoleBadge } from "./org-switcher.js";
+import { ResourceItem } from "./resource-list.js";
+/**
+ * Une personne d'une organisation, dans une `ResourceList` : avatar (photo ou initiales),
+ * nom, « (toi) », adresse e-mail et rôle. La même ligne dans tous les produits ; le rôle reste
+ * visible sur téléphone.
+ *
+ * ```tsx
+ * <ResourceList>
+ *   {members.map((m) => (
+ *     <MemberItem key={m.id} name={m.name} email={m.email} orgRole={m.role} isMe={m.isMe} />
+ *   ))}
+ * </ResourceList>
+ * ```
+ */
+export function MemberItem({ name, email, orgRole: role, image, isMe = false, roleHint, actions, className, }) {
+    const shown = name.trim() || email || "Sans nom";
+    return (_jsx(ResourceItem, { className: className, icon: _jsxs(Avatar, { className: "size-10", children: [image ? _jsx(AvatarImage, { src: image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold", children: initials(name, email) })] }), title: _jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate", children: shown }), isMe ? _jsx("span", { className: "shrink-0 font-normal text-muted-foreground", children: "(toi)" }) : null] }), meta: email && email !== shown ? email : undefined, badge: role ? _jsx(RoleBadge, { orgRole: role, ...(roleHint !== undefined ? { title: roleHint } : {}) }) : undefined, actions: actions }));
+}

package/dist/org-switcher.d.ts

@@ -1,16 +1,25 @@
 /** Les trois rôles d'une organisation de la famille. */
 export type OrgRole = "owner" | "admin" | "member";
 export declare const ORG_ROLE_LABEL: Record<OrgRole, string>;
+/**
+ * Le rôle d'une personne dans l'organisation, le même badge dans tous les produits : neutre,
+ * monochrome (l'accent violet ne marque pas un rôle). `title` : ce que le rôle permet.
+ */
+export declare function RoleBadge({ orgRole: role, title, className, }: {
+    orgRole: OrgRole;
+    title?: string;
+    className?: string;
+}): React.JSX.Element;
 export type Organization = {
     id: string;
     name: string;
     role?: OrgRole;
-    /** URL d'un logo carré ; sans logo, les deux premières lettres du nom. */
+    /** URL d'un logo carré ; sans logo, les initiales du nom (`initials`). */
     logo?: string;
 };
 /** Un lien dans un menu, à l'allure d'un `DropdownMenuItem`. */
 export declare const MENU_LINK_ITEM: string;
-/** Marque d'une organisation : son logo, ou ses deux premières lettres sur un carré arrondi. */
+/** Marque d'une organisation : son logo, ou ses initiales (`initials`) sur un carré arrondi. */
 export declare function OrgMark({ org, className, }: {
     org: Pick<Organization, "name" | "logo">;
     className?: string;

package/dist/org-switcher.js

@@ -4,7 +4,9 @@ import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
 import UnfoldMoreIcon from "@hugeicons/core-free-icons/UnfoldMoreIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Badge } from "./badge.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { initials } from "./initials.js";
 import { useShellPlacement } from "./shell-placement.js";
 import { cn } from "./cn.js";
 export const ORG_ROLE_LABEL = {
@@ -12,13 +14,20 @@ export const ORG_ROLE_LABEL = {
     admin: "Admin",
     member: "Membre",
 };
+/**
+ * Le rôle d'une personne dans l'organisation, le même badge dans tous les produits : neutre,
+ * monochrome (l'accent violet ne marque pas un rôle). `title` : ce que le rôle permet.
+ */
+export function RoleBadge({ orgRole: role, title, className, }) {
+    return (_jsx(Badge, { tone: "neutral", "data-role": role, title: title, className: className, children: ORG_ROLE_LABEL[role] }));
+}
 /** Un lien dans un menu, à l'allure d'un `DropdownMenuItem`. */
 export const MENU_LINK_ITEM = "relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-muted focus:text-foreground data-highlighted:bg-muted max-lg:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
-/** Marque d'une organisation : son logo, ou ses deux premières lettres sur un carré arrondi. */
+/** Marque d'une organisation : son logo, ou ses initiales (`initials`) sur un carré arrondi. */
 export function OrgMark({ org, className, }) {
     if (org.logo)
         return _jsx("img", { src: org.logo, alt: "", className: cn("size-8 shrink-0 rounded-lg object-cover", className) });
-    return (_jsx("span", { "aria-hidden": true, className: cn("grid size-8 shrink-0 place-items-center rounded-lg bg-foreground text-xs font-semibold text-background uppercase", className), children: org.name.slice(0, 2) }));
+    return (_jsx("span", { "aria-hidden": true, className: cn("grid size-8 shrink-0 place-items-center rounded-lg bg-foreground text-xs font-semibold text-background uppercase", className), children: initials(org.name) }));
 }
 /**
  * L'organisation active, et le menu pour en changer ou en créer une. En haut de la barre des

package/dist/page-header.d.ts

@@ -25,3 +25,23 @@ export declare function PageHeader({ title, description, actions, breadcrumbs, c
     breadcrumbs?: Array<Crumb>;
     className?: string;
 }): React.JSX.Element;
+/**
+ * Une page de console, dans la coque (`AppShell`) : `PageHeader`, puis les sections empilées.
+ * La règle de largeur de la famille (ADR 0012) : la coque pose la même boîte partout, le titre
+ * commence donc au même endroit dans tous les produits ; la page choisit sa colonne.
+ *
+ * - par défaut, une colonne de lecture de 768 px (`max-w-3xl`), alignée à gauche : formulaires,
+ *   réglages, fiches, membres ;
+ * - `wide` : toute la largeur (1152 px au plus) pour les tableaux, les listes à colonnes, les
+ *   tableaux de bord et les grilles de cartes.
+ */
+export declare function Page({ title, description, actions, breadcrumbs, wide, className, children, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    breadcrumbs?: Array<Crumb>;
+    /** Tableaux, listes, tableaux de bord : toute la largeur plutôt que la colonne de lecture. */
+    wide?: boolean;
+    className?: string;
+    children?: ReactNode;
+}): React.JSX.Element;

package/dist/page-header.js

@@ -29,3 +29,16 @@ export function Breadcrumbs({ items, className }) {
 export function PageHeader({ title, description, actions, breadcrumbs, className, }) {
     return (_jsxs("header", { "data-slot": "page-header", className: cn("mb-8 grid gap-3", className), children: [breadcrumbs?.length ? _jsx(Breadcrumbs, { items: breadcrumbs }) : null, _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight sm:text-[28px]", children: title }), description ? _jsx("p", { className: "mt-1.5 max-w-prose text-sm text-muted-foreground", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null] })] }));
 }
+/**
+ * Une page de console, dans la coque (`AppShell`) : `PageHeader`, puis les sections empilées.
+ * La règle de largeur de la famille (ADR 0012) : la coque pose la même boîte partout, le titre
+ * commence donc au même endroit dans tous les produits ; la page choisit sa colonne.
+ *
+ * - par défaut, une colonne de lecture de 768 px (`max-w-3xl`), alignée à gauche : formulaires,
+ *   réglages, fiches, membres ;
+ * - `wide` : toute la largeur (1152 px au plus) pour les tableaux, les listes à colonnes, les
+ *   tableaux de bord et les grilles de cartes.
+ */
+export function Page({ title, description, actions, breadcrumbs, wide = false, className, children, }) {
+    return (_jsxs("div", { "data-slot": "page", "data-width": wide ? "wide" : "default", className: cn("w-full", !wide && "max-w-3xl", className), children: [_jsx(PageHeader, { title: title, ...(description !== undefined ? { description } : {}), ...(actions !== undefined ? { actions } : {}), ...(breadcrumbs !== undefined ? { breadcrumbs } : {}) }), children !== undefined ? _jsx("div", { className: "grid gap-6", children: children }) : null] }));
+}

package/dist/radio-group.js

@@ -18,5 +18,5 @@ export function RadioGroup({ className, ...props }) {
     return _jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
 }
 export function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("touch-target grid size-5 shrink-0 place-items-center rounded-full border border-foreground/25 bg-background", "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/40 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive data-invalid:border-destructive", "dark:bg-white/[0.04]", className), ...props, children: _jsx(RadioPrimitive.Indicator, { className: "size-2 rounded-full bg-primary-foreground data-unchecked:hidden" }) }));
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("touch-target grid size-5 shrink-0 place-items-center rounded-full border border-foreground/25 bg-background", "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out outline-none", "hover:border-foreground/40 focus-visible:ring-3 focus-visible:ring-ring/50", "data-checked:border-primary data-checked:bg-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "aria-invalid:border-destructive data-invalid:border-destructive", "dark:bg-white/[0.04] dark:data-checked:bg-primary", className), ...props, children: _jsx(RadioPrimitive.Indicator, { className: "size-2 rounded-full bg-primary-foreground data-unchecked:hidden" }) }));
 }

package/dist/resource-list.js

@@ -17,7 +17,7 @@ export function ResourceList({ className, surface = true, ...props }) {
  */
 export function ResourceItem({ icon, title, meta, badge, actions, href, render, className, }) {
     const linked = href !== undefined || render !== undefined;
-    return (_jsxs("li", { "data-slot": "resource-item", className: cn("relative flex min-h-16 items-center gap-3 px-4 py-3 transition-colors duration-(--duration-fast) ease-out not-first:border-t not-first:border-foreground/5 sm:gap-4 sm:px-5", linked && "hover:bg-foreground/[0.03] has-focus-visible:bg-foreground/[0.03]", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-10 shrink-0 place-items-center overflow-hidden rounded-xl bg-background text-muted-foreground dark:bg-muted [&_svg:not([class*='size-'])]:size-5", children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: linked ? (_jsx(ResourceLink, { href: href, render: render, children: title })) : (title) }), meta ? _jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: meta }) : null] }), badge ? _jsx("div", { className: "hidden shrink-0 sm:block", children: badge }) : null, actions ? _jsx("div", { className: "relative z-1 flex shrink-0 items-center gap-1", children: actions }) : null] }));
+    return (_jsxs("li", { "data-slot": "resource-item", className: cn("relative flex min-h-16 items-center gap-3 px-4 py-3 transition-colors duration-(--duration-fast) ease-out not-first:border-t not-first:border-foreground/5 sm:gap-4 sm:px-5", linked && "hover:bg-foreground/[0.03] has-focus-visible:bg-foreground/[0.03]", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-10 shrink-0 place-items-center overflow-hidden rounded-xl bg-background text-muted-foreground dark:bg-muted [&_svg:not([class*='size-'])]:size-5", children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: linked ? (_jsx(ResourceLink, { href: href, render: render, children: title })) : (title) }), meta ? _jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: meta }) : null] }), badge ? _jsx("div", { className: "shrink-0", children: badge }) : null, actions ? _jsx("div", { className: "relative z-1 flex shrink-0 items-center gap-1", children: actions }) : null] }));
 }
 function ResourceLink({ href, render, children, }) {
     return useRender({

package/package.json

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