@hgdc/ui 0.63.1 → 0.64.0

package/README.md

@@ -70,8 +70,8 @@ Entre deux produits servis sous la même origine, la coque fait comme une seule
 
 Pendant le passage (0.39) :
 
-- **Barre des produits** : immobile, sans fondu, seul l'indicateur du produit change. La page d'arrivée la peint identique dès sa première image, même quand ses données ne sont pas là : `OrgPlaceholder` tient la place de l'organisation (`organization` absent) avec la marque de la dernière organisation affichée sous l'origine (initiales ou logo, retenus par `OrgSwitcher`, oubliés à la déconnexion par `AccountMenu`), sinon un squelette de la même taille. Le clic la replie sans transition et la page d'arrivée ne l'élargit pas sous la souris restée dessus.
-- **Barre latérale** : la marque du produit et sa navigation passent en fondu de 200 ms. Une page qui attend hors de la coque (`PagePending` sous `FamilyLoaderRoot`) dessine la coque entière : barre des produits, marque du produit de l'adresse, navigation en squelette à la hauteur retenue pour ce produit, barre du haut.
+- **Barre latérale, organisation** : la page d'arrivée la peint identique dès sa première image, même quand ses données ne sont pas là : `OrgPlaceholder` tient la place de l'organisation (`organization` absent) avec la marque de la dernière organisation affichée sous l'origine (initiales ou logo, retenus par `OrgSwitcher`, oubliés à la déconnexion par `AccountMenu`), sinon un squelette de la même taille.
+- **Barre latérale, contenu** : le nom du module et sa navigation passent en fondu de 200 ms. Une page qui attend hors de la coque (`PagePending` sous `FamilyLoaderRoot`) dessine la coque entière : organisation retenue, Manager, retour aux modules, nom du module de l'adresse, navigation en squelette à la hauteur retenue pour ce module, barre du haut.
 - **H** : un seul nom de transition (`hgdc-loader`), sans fondu, calé sur l'horloge : celui de l'arrivée reprend à la même phase.
 - **Contenu** : fondu de 150 ms.
 
@@ -112,7 +112,7 @@ Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)
 - produit : `"build": "hgdc-brand sync mail && vite build"` (et en tête de `dev`), les six fichiers de `family/app/<mot>/` dans `public/`, listés dans le `.gitignore` ; `--email-as <fichier>` y ajoute l'icône d'e-mail du produit sous un ancien nom ;
 - site hgdc.ch : `hgdc-brand emails public/email`, les `<mot>.png` servis à `EMAIL_ICON_BASE`.
 
-Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisation en haut, Manager en tête puis pastilles des produits ouverts, chacun par son entrée `/auth/hgdc?next=/`, le produit courant en teinte. Au survol (150 ms d'intention) ou au focus clavier, elle s'élargit par-dessus la page et écrit les noms. `productRail={false}` la coupe ; `accountHref` pointe vers un Manager local. La barre latérale porte la marque du produit et se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. En rail, la pastille du produit devient le bouton « Déplier » au survol. 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).
+Une seule barre latérale (ADR 0024) : organisation et bouton Réduire en haut, lien Manager, puis les onglets du module ouvert sous « Retour aux modules ». Le retour affiche la liste des modules, sans recharger la page ; « Personnaliser la barre » permet de les ranger, masquer et ajouter (`localStorage`, `hgdc-shell:modules`). Réglages reste au-dessus du compte ; Documentation, État du service et l'autre vue sont dans `AccountMenu`. `productRail={false}` ou une vue seule retire cette barre : marque du produit en haut, organisation dessous, les trois accès au-dessus du compte, « Produits » dans le menu du compte. `accountHref` pointe vers un Manager local. 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
 

package/dist/account-menu.d.ts

@@ -27,11 +27,11 @@ export type AccountUser = {
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
- * Documentation, Réglages et État du service ne sont pas ici : la coque les pose au-dessus du
- * compte (`links` d'`AppShell`). L'aide des raccourcis garde sa touche `?`, sans entrée de menu.
+ * Dans la barre de Basalte, ce menu porte aussi Documentation, État du service et l'autre vue
+ * (`links` d'`AppShell`), et plus la liste des produits : la barre la montre. L'aide des raccourcis
+ * garde sa touche `?`, sans entrée de menu.
  *
- * « Produits » (masquée au-delà de `lg` dans une coque qui affiche la barre des produits, où ils
- * sont déjà ; gardée sur téléphone) liste par défaut Account et les produits ouverts du catalogue
+ * Dans une vue seule, « Produits » liste Manager et les modules ouverts du catalogue
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */

package/dist/account-menu.js

@@ -1,5 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
+import BookOpen01Icon from "@hugeicons/core-free-icons/BookOpen01Icon";
 import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
+import LinkSquare02Icon from "@hugeicons/core-free-icons/LinkSquare02Icon";
 import Logout01Icon from "@hugeicons/core-free-icons/Logout01Icon";
 import SecurityLockIcon from "@hugeicons/core-free-icons/SecurityLockIcon";
 import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
@@ -13,7 +16,7 @@ import { MENU_LINK_ITEM } from "./org-switcher.js";
 import { ProductBadge } from "./product-badge.js";
 import { productMenuEntries } from "./products.js";
 import { forgetShellOrganization } from "./shell-memory.js";
-import { useLeaveOnClick, useProductRailShown } from "./shell-placement.js";
+import { useLeaveOnClick, useModuleBarShown, useShellMenuLinks } from "./shell-placement.js";
 import { ThemeSwitch } from "./theme-switch.js";
 /** L'avatar du compte : la photo, sinon les initiales sur la teinte stable de l'adresse. */
 function AccountAvatar({ user, size }) {
@@ -27,24 +30,39 @@ function AccountAvatar({ user, size }) {
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
- * Documentation, Réglages et État du service ne sont pas ici : la coque les pose au-dessus du
- * compte (`links` d'`AppShell`). L'aide des raccourcis garde sa touche `?`, sans entrée de menu.
+ * Dans la barre de Basalte, ce menu porte aussi Documentation, État du service et l'autre vue
+ * (`links` d'`AppShell`), et plus la liste des produits : la barre la montre. L'aide des raccourcis
+ * garde sa touche `?`, sans entrée de menu.
  *
- * « Produits » (masquée au-delà de `lg` dans une coque qui affiche la barre des produits, où ils
- * sont déjà ; gardée sur téléphone) liste par défaut Account et les produits ouverts du catalogue
+ * Dans une vue seule, « Produits » liste Manager et les modules ouverts du catalogue
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */
 export function AccountMenu({ user, onProfile, onSecurity, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
-    const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
-    const railShown = useProductRailShown();
+    const moduleBar = useModuleBarShown();
+    // La barre de Basalte montre déjà Manager et les modules, au téléphone comme à l'ordinateur.
+    const products = moduleBar ? [] : (productsProp ?? productMenuEntries({ current: currentProduct, accountHref }));
+    const menuLinks = useShellMenuLinks();
     const leaveOnClick = useLeaveOnClick();
-    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: [_jsx(AccountAvatar, { user: user }), 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-72", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { className: "flex items-center gap-2.5 py-2", children: [_jsx(AccountAvatar, { user: user }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium 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, _jsx(ThemeSwitch, {}), children ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), children] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => {
+    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: [_jsx(AccountAvatar, { user: user }), 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-72", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { className: "flex items-center gap-2.5 py-2", children: [_jsx(AccountAvatar, { user: user }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium 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, _jsx(ThemeSwitch, {}), children ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), children] })) : null, _jsx(AccountMenuLinks, { links: menuLinks }), products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => {
                             // La marque de l'organisation retenue pour la coque ne survit pas à la session.
                             forgetShellOrganization();
                             onSignOut();
                         }, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }
+/** Documentation, État du service et l'autre vue, dans le menu du compte de la barre de Basalte. */
+function AccountMenuLinks({ links }) {
+    const documentation = links.documentation;
+    const status = links.status;
+    const { otherView } = links;
+    if (documentation === undefined && status === undefined && otherView === undefined)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [documentation !== undefined ? (_jsx(ShellLinkItem, { link: documentation, icon: BookOpen01Icon, label: "Documentation" })) : null, status !== undefined ? _jsx(ShellLinkItem, { link: status, icon: Activity01Icon, label: "\u00C9tat du service" }) : null, otherView ? (_jsxs(MenuPrimitive.LinkItem, { href: otherView.href, onClick: otherView.onClick, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: LinkSquare02Icon, "aria-hidden": true }), otherView.label] })) : null] })] }));
+}
+function ShellLinkItem({ link, icon, label, }) {
+    const props = typeof link === "string" ? { href: link } : link;
+    return (_jsxs(MenuPrimitive.LinkItem, { ...(props.href !== undefined ? { href: props.href } : {}), ...(props.render !== undefined ? { render: props.render } : {}), className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: icon, "aria-hidden": true }), label] }));
+}
 function ProductMenuIcon({ product }) {
     if (product.badge)
         return _jsx(ProductBadge, { product: product.badge });

package/dist/app-shell.d.ts

@@ -11,28 +11,27 @@ export { SidebarNavGroup } from "./sidebar-nav-group.tsx";
 export type { AppShellLinks, ShellLink } from "./shell-links.tsx";
 export type { AppShellAssistant } from "./shell-assistant.tsx";
 /**
- * La coque commune des consoles HGDC, celle de Host. Sur ordinateur, de gauche à droite : la barre
- * des produits de la famille (organisation, Account, pastilles ; élargie au survol à la place
- * de la barre latérale, qui se plie le temps du survol), la barre latérale du produit (sa marque, sa navigation, le compte en bas),
- * réductible en rail (`Ctrl+B`, mémorisé), et la page sur une carte. 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 ; les
- * produits restent dans le menu de l'avatar.
+ * La coque commune des consoles de Basalte. Sur ordinateur : la barre latérale (l'organisation,
+ * Manager, puis les onglets du module ouvert ou la liste des modules, le compte en bas), réductible
+ * en rail (`Ctrl+B`, mémorisé), et la page sur une carte. Sur téléphone : une barre en haut, la même
+ * navigation dans un tiroir qui monte du bas et se referme quand on choisit une page. Une vue seule
+ * (`<mot>.hgdc.ch`) garde la marque du produit à la place de la barre de Basalte.
  *
  * 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: productRailOption, view: viewOption, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating, mainClassName, statusPage, }: {
-    /** Le produit affiché (`"host"`) : sa marque en haut de la barre, « vous êtes ici » dans la barre des produits. */
+    /** Le produit affiché (`"host"`) : son nom au-dessus de ses onglets, « vous êtes ici » dans la liste des modules. */
     product: FamilyProduct;
     /**
-     * `OrgSwitcher` : en haut de la barre des produits, en haut du tiroir sur téléphone. Absent
+     * `OrgSwitcher` : en haut de la barre latérale et du tiroir sur téléphone. Absent
      * pendant que les données du produit arrivent : la barre lui garde sa place, avec la marque de
      * la dernière organisation affichée (`OrgPlaceholder`, ADR 0020). `null` : aucune organisation.
      */
     organization?: ReactNode;
     /**
-     * `false` : pas de barre des produits (un écran hors de la famille). L'organisation passe alors
-     * sous la marque, dans la barre latérale. Absent : présente, ou, si `view` est donné, selon la vue
+     * `false` : pas de barre de Basalte (un écran hors de la console, une démo) : la marque du produit
+     * en haut, l'organisation dessous. Absent : présente, ou, si `view` est donné, selon la vue
      * et le réglage « Barre des produits » d'Account (ADR 0014), relu par la coque.
      */
     productRail?: boolean;
@@ -42,13 +41,13 @@ export declare function AppShell({ product, organization, productRail: productRa
      * Absent : un produit qui n'a qu'une vue, barre présente et pas de lien vers l'autre vue.
      */
     view?: ProductView | undefined;
-    /** Adresse d'Account dans la barre des produits (un Account local en développement). */
+    /** Adresse de Manager dans la barre (un Manager local en développement). */
     accountHref?: string | undefined;
     /** `SidebarNav` et ses `SidebarNavItem`. */
     nav: ReactNode;
     /**
-     * Documentation, Réglages et État du service, juste au-dessus du compte, dans cet ordre, chacun
-     * optionnel (État du service suit `statusPage` par défaut).
+     * Réglages, juste au-dessus du compte ; Documentation et État du service (qui suit `statusPage` par
+     * défaut) dans le menu du compte. Dans une vue seule, les trois au-dessus du compte.
      */
     links?: AppShellLinks;
     /** `AccountMenu`, tout en bas de la barre latérale (et du tiroir sur téléphone). */
@@ -99,7 +98,7 @@ export declare function AppShell({ product, organization, productRail: productRa
     /**
      * Page de statut du produit, dont le bandeau d'état se pose en tête du contenu (ADR 0018) :
      * `https://status.hgdc.ch/<produit>` par défaut, une autre adresse (prévisualisation sur une page
-     * de test), ou `false` pour ne rien lire. L'accès « État du service », au-dessus du compte, y mène.
+     * de test), ou `false` pour ne rien lire. L'accès « État du service » y mène.
      */
     statusPage?: string | false | undefined;
 }): React.JSX.Element;

package/dist/app-shell.js

@@ -8,17 +8,17 @@ import { FamilyLoaderHost, FamilyLoaderRootContext } from "./family-loader.js";
 import { CONTENT_LOADING_LAYER, ContentLoadingContext, PagePending } from "./page-pending.js";
 import { ProductBadge } from "./product-badge.js";
 import { productBarShown, useProductBarPreference, useProductBarSync } from "./product-bar.js";
-import { ProductRail } from "./product-rail.js";
+import { ShellNavigation } from "./module-bar.js";
 import { useProductSwitch } from "./product-switch.js";
 import { cn } from "./cn.js";
 import { ServiceStatus, statusPageUrlFor } from "./service-status.js";
 import { AssistantButton, AssistantPanel, ASSISTANT_SIDE_BY_SIDE, useAssistantShortcut, } from "./shell-assistant.js";
 import { ShellContext } from "./shell-context.js";
 import { familyProductName } from "./shell-frame.js";
-import { OtherViewLink, ShellCommonLinks } from "./shell-links.js";
+import { OtherViewLink, otherViewMenuLink, ShellCommonLinks } from "./shell-links.js";
 import { rememberLastProduct, rememberShellNavHeight } from "./shell-memory.js";
-import { ProductRailShownContext, ShellLeaveContext, StatusPageContext } from "./shell-placement.js";
-import { SidebarHead } from "./sidebar-head.js";
+import { ModuleBarShownContext, ShellLeaveContext, ShellMenuLinksContext, StatusPageContext, } from "./shell-placement.js";
+import { ShellOrganizationHead, SidebarHead } from "./sidebar-head.js";
 import { useToggleShortcut } from "./sidebar-rail.js";
 import { useContentLoading, useHydrated, useIsomorphicLayoutEffect } from "./use-content-loading.js";
 import { useProductLeave } from "./use-product-leave.js";
@@ -29,12 +29,11 @@ export { useAppShell } from "./shell-context.js";
 export { SidebarNav, SidebarNavBack, SidebarNavItem } from "./sidebar-nav.js";
 export { SidebarNavGroup } from "./sidebar-nav-group.js";
 /**
- * La coque commune des consoles HGDC, celle de Host. Sur ordinateur, de gauche à droite : la barre
- * des produits de la famille (organisation, Account, pastilles ; élargie au survol à la place
- * de la barre latérale, qui se plie le temps du survol), la barre latérale du produit (sa marque, sa navigation, le compte en bas),
- * réductible en rail (`Ctrl+B`, mémorisé), et la page sur une carte. 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 ; les
- * produits restent dans le menu de l'avatar.
+ * La coque commune des consoles de Basalte. Sur ordinateur : la barre latérale (l'organisation,
+ * Manager, puis les onglets du module ouvert ou la liste des modules, le compte en bas), réductible
+ * en rail (`Ctrl+B`, mémorisé), et la page sur une carte. Sur téléphone : une barre en haut, la même
+ * navigation dans un tiroir qui monte du bas et se referme quand on choisit une page. Une vue seule
+ * (`<mot>.hgdc.ch`) garde la marque du produit à la place de la barre de Basalte.
  *
  * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
  * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
@@ -45,8 +44,7 @@ export function AppShell({ product, organization, productRail: productRailOption
     // Relu chez Account seulement par un produit passé aux deux vues (il donne `view`, ADR 0014).
     useProductBarSync(productRailOption === undefined && viewOption !== undefined);
     const productRail = productRailOption ?? (viewOption === undefined || productBarShown(viewOption, preference));
-    // Barre des produits élargie : la barre latérale se plie le temps du survol (ADR 0011).
-    const [railPeek, setRailPeek] = useState(false);
+    const [navLevel, setNavLevel] = useState("tabs");
     useToggleShortcut();
     // Relecture des organisations après un passage depuis la barre, préchargement des autres produits (ADR 0016).
     useProductSwitch(productRail);
@@ -77,7 +75,7 @@ export function AppShell({ product, organization, productRail: productRailOption
     }, [product]);
     const navHeight = useRef(0);
     useEffect(() => {
-        const list = sidebarRef.current?.querySelector(":scope > nav > ul");
+        const list = sidebarRef.current?.querySelector(":scope > nav > ul, [data-slot=shell-navigation] > nav:not([data-slot]) > ul");
         if (!(list instanceof HTMLElement) || list.offsetHeight === navHeight.current)
             return;
         navHeight.current = list.offsetHeight;
@@ -100,6 +98,16 @@ export function AppShell({ product, organization, productRail: productRailOption
     const assistantPanelId = useId();
     const assistantButtonRef = useRef(null);
     useAssistantShortcut(assistant);
-    const footer = (_jsxs(_Fragment, { children: [account !== undefined ? sidebarFooter : null, _jsx(ShellCommonLinks, { links: links ?? {}, statusPageUrl: statusPageUrl, otherView: viewOption === undefined ? null : _jsx(OtherViewLink, { product: product, view: viewOption }) }), account ?? sidebarFooter] }));
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ProductRailShownContext, { value: productRail, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-rail-peek": railPeek ? "" : undefined, "data-product-rail": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)_auto]" : "lg:grid-cols-[auto_minmax(0,1fr)_auto]"), 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("div", { className: "contents", inert: pageBlocked || undefined, children: _jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref, onExpandedChange: setRailPeek }) })) : null, _jsxs("aside", { ref: sidebarRef, "data-slot": "app-shell-sidebar", "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) 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, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { "data-slot": "app-shell-header", className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 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: familyProductName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : null] }), _jsx("div", { "data-slot": "app-shell-loading", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsxs("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? true : undefined, inert: loading || undefined, 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: [_jsx(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, hasRoot ? null : _jsx(FamilyLoaderHost, {}), _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, _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)] empty:hidden", children: footer })] }) })] }) }) }) }) }));
+    const otherView = viewOption === undefined ? null : _jsx(OtherViewLink, { product: product, view: viewOption });
+    // Dans la barre de Basalte, seul Réglages reste au-dessus du compte : le reste passe dans son menu.
+    const footer = (_jsxs(_Fragment, { children: [account !== undefined ? sidebarFooter : null, _jsx(ShellCommonLinks, { links: productRail ? { ...(links?.settings ? { settings: links.settings } : {}), status: false } : (links ?? {}), statusPageUrl: statusPageUrl, otherView: productRail ? null : otherView }), account ?? sidebarFooter] }));
+    const menuLinks = productRail
+        ? {
+            documentation: links?.documentation,
+            status: links?.status === false ? undefined : (links?.status ?? statusPageUrl ?? undefined),
+            otherView: viewOption === undefined ? undefined : otherViewMenuLink(product, viewOption),
+        }
+        : {};
+    const navigation = productRail ? (_jsx(ShellNavigation, { product: product, nav: nav, accountHref: accountHref, level: navLevel, onLevelChange: setNavLevel })) : (nav);
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ModuleBarShownContext, { value: productRail, children: _jsx(ShellMenuLinksContext, { value: menuLinks, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-module-bar": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)_auto] 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", { ref: sidebarRef, "data-slot": "app-shell-sidebar", "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [productRail ? (_jsx(ShellOrganizationHead, { organization: organization })) : (_jsxs(_Fragment, { children: [_jsx(SidebarHead, { product: product }), organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null] })), navigation, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { "data-slot": "app-shell-header", className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 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: familyProductName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : null] }), _jsx("div", { "data-slot": "app-shell-loading", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsxs("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? true : undefined, inert: loading || undefined, 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: [_jsx(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, hasRoot ? null : _jsx(FamilyLoaderHost, {}), _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, navigation, _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)] empty:hidden", children: footer })] }) })] }) }) }) }) }) }));
 }

package/dist/email.js

@@ -81,7 +81,7 @@ export function EmailLayout({ product: ref, preview, children, name, iconSrc, ac
                                     border: `1px solid ${l.border}`,
                                     borderRadius: 16,
                                     padding: "32px 28px",
-                                }, children: children }), _jsxs(Section, { style: { padding: "20px 4px 0" }, children: [footer ? (_jsx(Text, { className: "hg-muted", style: { ...muted, margin: "0 0 12px" }, children: footer })) : null, _jsxs(Text, { className: "hg-muted", style: muted, children: [_jsx(Img, { src: emailIconUrl("mail"), width: 16, height: 16, alt: "", style: { display: "inline-block", verticalAlign: "middle", borderRadius: 8, marginRight: 6 } }), _jsxs("span", { style: { verticalAlign: "middle" }, children: ["Envoy\u00E9 avec", " ", _jsx(Link, { href: MAIL_HREF, className: "hg-muted", style: { color: l.muted, textDecoration: "underline" }, children: "Mail de la H Collection" })] })] }), _jsx(Text, { className: "hg-muted", style: { ...muted, margin: "4px 0 0" }, children: LEGAL })] })] }) }) })] }));
+                                }, children: children }), _jsxs(Section, { style: { padding: "20px 4px 0" }, children: [footer ? (_jsx(Text, { className: "hg-muted", style: { ...muted, margin: "0 0 12px" }, children: footer })) : null, _jsxs(Text, { className: "hg-muted", style: muted, children: [_jsx(Img, { src: emailIconUrl("mail"), width: 16, height: 16, alt: "", style: { display: "inline-block", verticalAlign: "middle", borderRadius: 8, marginRight: 6 } }), _jsxs("span", { style: { verticalAlign: "middle" }, children: ["Envoy\u00E9 avec", " ", _jsx(Link, { href: MAIL_HREF, className: "hg-muted", style: { color: l.muted, textDecoration: "underline" }, children: "Basalte" })] })] }), _jsx(Text, { className: "hg-muted", style: { ...muted, margin: "4px 0 0" }, children: LEGAL })] })] }) }) })] }));
 }
 export function EmailHeading({ children }) {
     return (_jsx(Heading, { as: "h1", className: "hg-ink hg-heading", style: { color: EMAIL_LIGHT.ink, fontSize: 22, fontWeight: 600, lineHeight: "28px", margin: "0 0 12px" }, children: children }));

package/dist/module-bar-store.d.ts

@@ -0,0 +1,9 @@
+import { type ModuleWord } from "./modules.ts";
+/**
+ * L'ordre et le choix des modules de la barre, propres à chaque personne. Sous `app.hgdc.ch`, toutes
+ * les consoles partagent la même origine, donc le même réglage.
+ */
+export declare const MODULE_BAR_KEY = "hgdc-shell:modules";
+export declare function saveModuleBar(order: ReadonlyArray<ModuleWord>): void;
+/** L'ordre retenu ; celui par défaut au rendu serveur. */
+export declare function useModuleBar(): ReadonlyArray<ModuleWord>;

package/dist/module-bar-store.js

@@ -0,0 +1,56 @@
+import { useSyncExternalStore } from "react";
+import { DEFAULT_MODULE_BAR, parseModuleBar } from "./modules.js";
+/**
+ * L'ordre et le choix des modules de la barre, propres à chaque personne. Sous `app.hgdc.ch`, toutes
+ * les consoles partagent la même origine, donc le même réglage.
+ */
+export const MODULE_BAR_KEY = "hgdc-shell:modules";
+const EVENT = "hgdc-module-bar";
+let cachedRaw;
+let cachedOrder = DEFAULT_MODULE_BAR;
+/** Même référence tant que le stockage ne change pas : `useSyncExternalStore` compare par identité. */
+function read() {
+    let raw = null;
+    try {
+        raw = window.localStorage.getItem(MODULE_BAR_KEY);
+    }
+    catch {
+        return DEFAULT_MODULE_BAR;
+    }
+    if (raw === cachedRaw)
+        return cachedOrder;
+    cachedRaw = raw;
+    cachedOrder = decode(raw);
+    return cachedOrder;
+}
+function decode(raw) {
+    if (raw === null)
+        return DEFAULT_MODULE_BAR;
+    try {
+        return parseModuleBar(JSON.parse(raw)) ?? DEFAULT_MODULE_BAR;
+    }
+    catch {
+        return DEFAULT_MODULE_BAR;
+    }
+}
+function subscribe(onChange) {
+    window.addEventListener(EVENT, onChange);
+    window.addEventListener("storage", onChange);
+    return () => {
+        window.removeEventListener(EVENT, onChange);
+        window.removeEventListener("storage", onChange);
+    };
+}
+export function saveModuleBar(order) {
+    try {
+        window.localStorage.setItem(MODULE_BAR_KEY, JSON.stringify(order));
+    }
+    catch {
+        // Stockage bloqué : la barre reprend l'ordre par défaut au prochain chargement.
+    }
+    window.dispatchEvent(new Event(EVENT));
+}
+/** L'ordre retenu ; celui par défaut au rendu serveur. */
+export function useModuleBar() {
+    return useSyncExternalStore(subscribe, read, () => DEFAULT_MODULE_BAR);
+}

package/dist/module-bar.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import type { FamilyProduct } from "./family-svg.ts";
+/** Ce que montre le milieu de la barre : les onglets du module ouvert, la liste des modules, ou son réglage. */
+export type ShellNavLevel = "tabs" | "modules" | "edit";
+/**
+ * Le milieu de la barre de Basalte : Manager, un trait, puis l'un des trois niveaux. Dans un module,
+ * ses onglets (`nav`) sous « Retour aux modules » ; un clic y affiche la liste sans rien recharger ;
+ * un clic sur un autre module ouvre sa console, préchargée au survol sous la même origine.
+ */
+export declare function ShellNavigation({ product, nav, accountHref, level, onLevelChange, }: {
+    product: FamilyProduct;
+    nav: ReactNode;
+    accountHref?: string | undefined;
+    level: ShellNavLevel;
+    onLevelChange: (level: ShellNavLevel) => void;
+}): React.JSX.Element;

package/dist/module-bar.js

@@ -0,0 +1,91 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Add01Icon from "@hugeicons/core-free-icons/Add01Icon";
+import ArrowDown01Icon from "@hugeicons/core-free-icons/ArrowDown01Icon";
+import ArrowUp01Icon from "@hugeicons/core-free-icons/ArrowUp01Icon";
+import DragDropVerticalIcon from "@hugeicons/core-free-icons/DragDropVerticalIcon";
+import Edit02Icon from "@hugeicons/core-free-icons/Edit02Icon";
+import MinusSignIcon from "@hugeicons/core-free-icons/MinusSignIcon";
+import UserGroupIcon from "@hugeicons/core-free-icons/UserGroupIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useState, useSyncExternalStore } from "react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { saveModuleBar, useModuleBar } from "./module-bar-store.js";
+import { hiddenModules, moduleByWord, moveModule, shownModules } from "./modules.js";
+import { ProductBadge } from "./product-badge.js";
+import { PRODUCT_PRERENDER_ATTRIBUTE } from "./product-switch.js";
+import { shellProductEntries } from "./products.js";
+import { familyProductName } from "./product-name.js";
+import { useLeaveOnClick } from "./shell-placement.js";
+import { SIDEBAR_ITEM, SidebarNavBack } from "./sidebar-nav.js";
+import { useSidebarRail } from "./sidebar-rail.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+const noSubscription = () => () => { };
+/** `location.origin` après l'hydratation, `undefined` au rendu serveur (liens absolus d'abord). */
+function usePageOrigin() {
+    return useSyncExternalStore(noSubscription, () => window.location.origin, () => undefined);
+}
+const GROUP_LABEL = "px-3 pt-3 pb-1.5 text-xs font-medium text-muted-foreground lg:text-shell-muted lg:rail:sr-only";
+function ShellEntryLink({ entry, icon, onOpenCurrent, }) {
+    const rail = useSidebarRail();
+    const leaveOnClick = useLeaveOnClick();
+    const onClick = (event) => {
+        const plain = event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+        if (entry.current && onOpenCurrent && plain) {
+            event.preventDefault();
+            onOpenCurrent();
+            return;
+        }
+        leaveOnClick(event);
+    };
+    return (_jsx("li", { children: _jsxs(Tooltip, { disabled: !rail, children: [_jsxs(TooltipTrigger, { render: _jsx("a", { href: entry.href, onClick: onClick, ...(entry.sameOrigin ? { [PRODUCT_PRERENDER_ATTRIBUTE]: "" } : {}), "aria-current": entry.current ? "page" : undefined, className: SIDEBAR_ITEM }), children: [icon ? (_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" })) : (_jsx(ProductBadge, { product: entry.badge, className: "size-5 shrink-0 lg:size-[1.125rem]" })), _jsx("span", { className: "min-w-0 flex-1 truncate lg:rail:sr-only", children: entry.name }), entry.hint ? _jsx("span", { className: "text-xs font-normal lg:rail:hidden", children: entry.hint }) : null] }), _jsx(TooltipContent, { side: "right", children: entry.name })] }) }));
+}
+function ModuleList({ entries, order, onOpenCurrent, onCustomize, }) {
+    const shown = order.flatMap((word) => {
+        const entry = entries.find((item) => item.badge === word);
+        return entry ? [entry] : [];
+    });
+    return (_jsxs("nav", { "data-slot": "shell-modules", "aria-label": "Modules", className: "min-h-0 flex-1 overflow-y-auto px-3 pb-2", children: [_jsx("p", { className: GROUP_LABEL, children: "Modules du projet" }), _jsx("ul", { className: "grid gap-0.5", children: shown.map((entry) => (_jsx(ShellEntryLink, { entry: entry, onOpenCurrent: onOpenCurrent }, entry.badge))) }), _jsxs("button", { type: "button", onClick: onCustomize, className: cn(SIDEBAR_ITEM, "mt-1 w-full text-left font-normal lg:rail:hidden"), children: [_jsx(HugeiconsIcon, { icon: Edit02Icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" }), _jsx("span", { className: "truncate", children: "Personnaliser la barre" })] })] }));
+}
+/** Petit bouton d'une ligne du réglage : 44 px au doigt (`touch-target`), 24 px à la souris. */
+function RowButton({ icon, label, disabled, onClick, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, disabled: disabled, onClick: onClick, className: "touch-target grid size-6 shrink-0 place-items-center rounded-lg 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 disabled:pointer-events-none disabled:opacity-30 lg:text-shell-muted lg:hover:bg-shell-active lg:hover:text-shell-foreground", children: _jsx(HugeiconsIcon, { icon: icon, strokeWidth: 2, "aria-hidden": true, className: "size-3.5" }) }));
+}
+/**
+ * Le réglage de la barre : un brouillon montré tel quel, gardé seulement par « Valider ». Glisser à
+ * la souris ; les flèches servent au clavier et au doigt, le glisser natif n'y fonctionne pas.
+ */
+function ModuleBarEditor({ order, onSave, onCancel, }) {
+    const [draft, setDraft] = useState(order);
+    const [dragged, setDragged] = useState(null);
+    const hidden = hiddenModules(draft);
+    return (_jsxs("div", { "data-slot": "shell-modules-editor", role: "group", "aria-label": "Personnaliser la barre", className: "min-h-0 flex-1 overflow-y-auto px-3 pb-2", children: [_jsx("p", { className: GROUP_LABEL, children: "Dans la barre" }), _jsx("ul", { className: "grid gap-0.5", children: draft.map((word, index) => {
+                    const { name } = moduleByWord(word);
+                    return (_jsxs("li", { draggable: true, onDragStart: (event) => {
+                            event.dataTransfer.effectAllowed = "move";
+                            setDragged(index);
+                        }, onDragOver: (event) => {
+                            if (dragged !== null)
+                                event.preventDefault();
+                        }, onDrop: (event) => {
+                            event.preventDefault();
+                            if (dragged !== null)
+                                setDraft(moveModule(draft, dragged, index));
+                            setDragged(null);
+                        }, onDragEnd: () => setDragged(null), className: "flex min-h-11 cursor-grab items-center gap-1 rounded-xl bg-muted/70 pr-1 pl-1.5 text-sm font-medium lg:min-h-9 lg:bg-shell-hover coarse:min-h-11", children: [_jsx(HugeiconsIcon, { icon: DragDropVerticalIcon, "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground lg:text-shell-muted" }), _jsx(ProductBadge, { product: word, className: "size-[1.125rem] shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: name }), _jsx(RowButton, { icon: ArrowUp01Icon, label: `Monter ${name}`, disabled: index === 0, onClick: () => setDraft(moveModule(draft, index, index - 1)) }), _jsx(RowButton, { icon: ArrowDown01Icon, label: `Descendre ${name}`, disabled: index === draft.length - 1, onClick: () => setDraft(moveModule(draft, index, index + 1)) }), _jsx(RowButton, { icon: MinusSignIcon, label: `Masquer ${name}`, onClick: () => setDraft(draft.filter((other) => other !== word)) })] }, word));
+                }) }), _jsx("p", { className: GROUP_LABEL, children: "Masqu\u00E9s" }), hidden.length ? (_jsx("ul", { className: "grid gap-0.5", children: hidden.map(({ word, name, purpose }) => (_jsxs("li", { className: "flex min-h-11 items-center gap-2.5 rounded-xl pr-1 pl-3 text-sm font-medium lg:min-h-9 coarse:min-h-11", children: [_jsx(ProductBadge, { product: word, className: "size-[1.125rem] shrink-0 opacity-70" }), _jsxs("span", { className: "min-w-0 flex-1 py-1", children: [_jsx("span", { className: "block truncate", children: name }), _jsx("span", { className: "block truncate text-xs font-normal text-muted-foreground lg:text-shell-muted", children: purpose })] }), _jsx(RowButton, { icon: Add01Icon, label: `Ajouter ${name}`, onClick: () => setDraft([...draft, word]) })] }, word))) })) : (_jsx("p", { className: "px-3 py-1 text-xs text-muted-foreground lg:text-shell-muted", children: "Tous les modules sont dans la barre." })), _jsxs("div", { className: "flex gap-2 px-1 pt-3", children: [_jsx(Button, { size: "sm", onClick: () => onSave(draft), children: "Valider" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: onCancel, children: "Annuler" })] })] }));
+}
+/**
+ * Le milieu de la barre de Basalte : Manager, un trait, puis l'un des trois niveaux. Dans un module,
+ * ses onglets (`nav`) sous « Retour aux modules » ; un clic y affiche la liste sans rien recharger ;
+ * un clic sur un autre module ouvre sa console, préchargée au survol sous la même origine.
+ */
+export function ShellNavigation({ product, nav, accountHref, level, onLevelChange, }) {
+    const pageOrigin = usePageOrigin();
+    const order = useModuleBar();
+    const { products, account } = shellProductEntries({ current: product, accountHref, pageOrigin });
+    return (_jsxs("div", { "data-slot": "shell-navigation", className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { "data-slot": "shell-manager", className: "shrink-0 px-3 pt-1", children: [_jsx("ul", { children: _jsx(ShellEntryLink, { entry: account, icon: UserGroupIcon }) }), _jsx("div", { "aria-hidden": true, className: "mx-2 mt-2 h-px bg-foreground/8" })] }), level === "modules" ? (_jsx(ModuleList, { entries: products, order: shownModules(order, product), onOpenCurrent: () => onLevelChange("tabs"), onCustomize: () => onLevelChange("edit") })) : level === "edit" ? (_jsx(ModuleBarEditor, { order: order, onSave: (next) => {
+                    saveModuleBar(next);
+                    onLevelChange("modules");
+                }, onCancel: () => onLevelChange("modules") })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "shrink-0 px-3 pt-2", children: [_jsx("ul", { children: _jsx(SidebarNavBack, { label: "Retour aux modules", keepMenuOpen: true, render: _jsx("button", { type: "button", className: "w-full", onClick: () => onLevelChange("modules") }) }) }), _jsxs("div", { "data-slot": "shell-module-title", className: "flex min-h-9 items-center gap-2.5 px-3 text-sm font-semibold lg:text-shell-foreground lg:rail:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-[1.125rem] shrink-0" }), _jsx("span", { className: "truncate font-heading", children: familyProductName(product) })] })] }), nav] }))] }));
+}

package/dist/modules.d.ts

@@ -0,0 +1,31 @@
+import type { FamilyProduct } from "./family-svg.ts";
+/**
+ * Les modules de Basalte, un produit unique (organisation, projets, modules). Le mot technique
+ * (`host`) reste dans les adresses, les clés et le code ; l'interface n'affiche que le nom du module.
+ * Logique pure : la barre (`module-bar.tsx`) et son stockage (`module-bar-store.ts`) s'y appuient.
+ */
+export type ModuleWord = Extract<FamilyProduct, "host" | "mail" | "status" | "analytics" | "id" | "docs" | "iassistant">;
+export type BasalteModule = {
+    word: ModuleWord;
+    /** Nom affiché : « Déploiements ». */
+    name: string;
+    /** Ce que le module apporte, en quelques mots : montré à côté d'un module masqué. */
+    purpose: string;
+};
+/** Tous les modules, dans leur ordre par défaut. */
+export declare const BASALTE_MODULES: ReadonlyArray<BasalteModule>;
+/** Les modules montrés tant que la personne n'a rien choisi. */
+export declare const DEFAULT_MODULE_BAR: ReadonlyArray<ModuleWord>;
+export declare function isModuleWord(value: unknown): value is ModuleWord;
+export declare function moduleByWord(word: ModuleWord): BasalteModule;
+/** Ordre retenu (stockage, réseau) : les mots connus, sans doublon. `null` si ce n'est pas une liste. */
+export declare function parseModuleBar(value: unknown): Array<ModuleWord> | null;
+/**
+ * La liste à montrer : l'ordre de la personne, plus le module ouvert s'il n'y est pas (on ne perd
+ * jamais de vue où l'on est).
+ */
+export declare function shownModules(order: ReadonlyArray<ModuleWord>, current?: string): Array<ModuleWord>;
+/** Les modules absents de la liste, dans l'ordre par défaut. */
+export declare function hiddenModules(shown: ReadonlyArray<ModuleWord>): Array<BasalteModule>;
+/** Déplace l'entrée `from` à la place `to` ; hors limites, la liste reste telle quelle. */
+export declare function moveModule<T>(list: ReadonlyArray<T>, from: number, to: number): Array<T>;

package/dist/modules.js

@@ -0,0 +1,47 @@
+/** Tous les modules, dans leur ordre par défaut. */
+export const BASALTE_MODULES = [
+    { word: "host", name: "Déploiements", purpose: "Mettre un site en ligne" },
+    { word: "mail", name: "E-mails", purpose: "Envoyer des e-mails" },
+    { word: "status", name: "Surveillance", purpose: "Surveiller un site" },
+    { word: "analytics", name: "Statistiques", purpose: "Compter les visites" },
+    { word: "id", name: "Connexion", purpose: "Connecter tes utilisateurs" },
+    { word: "docs", name: "Documentation", purpose: "Publier une documentation" },
+    { word: "iassistant", name: "Assistant IA", purpose: "Répondre aux visiteurs" },
+];
+/** Les modules montrés tant que la personne n'a rien choisi. */
+export const DEFAULT_MODULE_BAR = ["host", "mail", "status", "analytics"];
+export function isModuleWord(value) {
+    return BASALTE_MODULES.some((item) => item.word === value);
+}
+export function moduleByWord(word) {
+    const found = BASALTE_MODULES.find((item) => item.word === word);
+    if (!found)
+        throw new Error(`@hgdc/ui/modules : module inconnu « ${word} »`);
+    return found;
+}
+/** Ordre retenu (stockage, réseau) : les mots connus, sans doublon. `null` si ce n'est pas une liste. */
+export function parseModuleBar(value) {
+    if (!Array.isArray(value))
+        return null;
+    return [...new Set(value.filter(isModuleWord))];
+}
+/**
+ * La liste à montrer : l'ordre de la personne, plus le module ouvert s'il n'y est pas (on ne perd
+ * jamais de vue où l'on est).
+ */
+export function shownModules(order, current) {
+    return isModuleWord(current) && !order.includes(current) ? [...order, current] : [...order];
+}
+/** Les modules absents de la liste, dans l'ordre par défaut. */
+export function hiddenModules(shown) {
+    return BASALTE_MODULES.filter((item) => !shown.includes(item.word));
+}
+/** Déplace l'entrée `from` à la place `to` ; hors limites, la liste reste telle quelle. */
+export function moveModule(list, from, to) {
+    if (from < 0 || from >= list.length || to < 0 || to >= list.length)
+        return [...list];
+    const next = [...list];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    return next;
+}

package/dist/org-placeholder.d.ts

@@ -0,0 +1,7 @@
+/**
+ * La place de l'organisation tant que le produit ne l'a pas (ses données arrivent) : la marque de
+ * la dernière organisation affichée sous cette origine, au pixel près de celle d'`OrgSwitcher`
+ * (initiales ou logo, posés sur `<html>` par `sidebarInitScript` avant la première peinture),
+ * sinon un carré de squelette de la même taille. Rien ne bouge quand la vraie arrive.
+ */
+export declare function OrgPlaceholder(): React.JSX.Element;

package/dist/org-placeholder.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * La place de l'organisation tant que le produit ne l'a pas (ses données arrivent) : la marque de
+ * la dernière organisation affichée sous cette origine, au pixel près de celle d'`OrgSwitcher`
+ * (initiales ou logo, posés sur `<html>` par `sidebarInitScript` avant la première peinture),
+ * sinon un carré de squelette de la même taille. Rien ne bouge quand la vraie arrive.
+ */
+export function OrgPlaceholder() {
+    return (_jsx("div", { "data-slot": "org-placeholder", "aria-hidden": true, className: "flex h-10 min-w-0 flex-1 items-center px-1.5 coarse:h-11", children: _jsx("span", { "data-slot": "org-placeholder-mark", className: "grid size-8 shrink-0 place-items-center rounded-lg text-xs font-semibold uppercase" }) }));
+}