@hgdc/ui 0.63.1 → 0.64.0

package/dist/org-switcher.d.ts

@@ -31,10 +31,8 @@ export declare function OrgMark({ org, className, }: {
     className?: string;
 }): React.JSX.Element;
 /**
- * L'organisation active, et le menu pour en changer ou en créer une. En haut de la barre des
- * produits d'`AppShell` (la marque seule, le nom quand la barre s'élargit), dans le tiroir sur
- * téléphone, ou en haut de la barre latérale quand le produit coupe la barre des produits.
- * Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
+ * L'organisation active, et le menu pour en changer ou en créer une. En haut de la barre latérale
+ * d'`AppShell` (la marque seule en rail) et du tiroir sur téléphone. Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
  * l'URL `/o/<slug>/…`), le kit n'appelle rien.
  */
 export declare function OrgSwitcher({ organizations, activeId, onSelect, createHref, onCreate, className, }: {

package/dist/org-switcher.js

@@ -9,7 +9,6 @@ import { Badge } from "./badge.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { AVATAR_TONE_CLASSES, initials, orgTone } from "./initials.js";
 import { rememberShellOrganization } from "./shell-memory.js";
-import { useShellPlacement } from "./shell-placement.js";
 import { cn } from "./cn.js";
 export const ORG_ROLE_LABEL = {
     owner: "Propriétaire",
@@ -36,14 +35,11 @@ export function OrgMark({ org, className, }) {
     return (_jsx("span", { "aria-hidden": true, className: cn("grid size-8 shrink-0 place-items-center rounded-lg text-xs font-semibold uppercase", AVATAR_TONE_CLASSES[orgTone(org)], 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
- * produits d'`AppShell` (la marque seule, le nom quand la barre s'élargit), dans le tiroir sur
- * téléphone, ou en haut de la barre latérale quand le produit coupe la barre des produits.
- * Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
+ * L'organisation active, et le menu pour en changer ou en créer une. En haut de la barre latérale
+ * d'`AppShell` (la marque seule en rail) et du tiroir sur téléphone. Présentationnel : le produit passe la liste, l'active et ce qu'il faut faire au choix (changer
  * l'URL `/o/<slug>/…`), le kit n'appelle rien.
  */
 export function OrgSwitcher({ organizations, activeId, onSelect, createHref, onCreate, className, }) {
-    const placement = useShellPlacement();
     const active = organizations.find((org) => org.id === activeId);
     // Retenue pour la première image du prochain produit ouvert sous la même origine (ADR 0020).
     const activeName = active?.name;
@@ -54,13 +50,5 @@ export function OrgSwitcher({ organizations, activeId, onSelect, createHref, onC
     }, [activeId, activeName, activeLogo]);
     if (!active)
         return null;
-    // En haut de la barre des produits : la marque seule dans 40 px, le nom quand la barre s'élargit.
-    const inRail = placement === "product-rail";
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": `Organisation ${active.name}, changer d'organisation`, title: active.name, className: cn("flex min-h-10 w-full min-w-0 items-center gap-2.5 rounded-xl px-1.5 py-1 text-left coarse:min-h-11 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", inRail
-                        ? "h-10 shrink-0 gap-3 px-1 py-0 hover:bg-shell-hover aria-expanded:bg-shell-hover coarse:h-11"
-                        : "lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:w-auto lg:rail:justify-center lg:rail:px-1", className) }), children: [_jsx(OrgMark, { org: active }), _jsxs("span", { className: cn("min-w-0 flex-1", inRail
-                            ? "opacity-0 transition-opacity duration-(--duration-fast) ease-out group-data-expanded/rail:opacity-100 motion-reduce:transition-none"
-                            : "lg:rail:hidden"), children: [_jsx("span", { className: cn("block text-sm font-medium", inRail ? "truncate" : "line-clamp-2 break-words"), children: active.name }), active.role ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: ORG_ROLE_LABEL[active.role] })) : null] }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: cn("size-4 shrink-0 text-muted-foreground lg:text-shell-muted", inRail
-                            ? "opacity-0 transition-opacity duration-(--duration-fast) group-data-expanded/rail:opacity-100"
-                            : "lg:rail:hidden") })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Organisations" }), organizations.map((org) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(org.id), children: [_jsx(OrgMark, { org: org, className: "size-6 rounded-md text-[10px]" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name }), org.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Organisation active", className: "size-4" })) : org.role ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: ORG_ROLE_LABEL[org.role] })) : null] }, org.id)))] }), createHref !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(MenuPrimitive.LinkItem, { href: createHref, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : onCreate !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onCreate, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : null] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": `Organisation ${active.name}, changer d'organisation`, title: active.name, className: cn("flex min-h-10 w-full min-w-0 items-center gap-2.5 rounded-xl px-1.5 py-1 text-left coarse:min-h-11 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:w-auto lg:rail:justify-center lg:rail:px-1", className) }), children: [_jsx(OrgMark, { org: active }), _jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "line-clamp-2 block text-sm font-medium break-words", children: active.name }), active.role ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: ORG_ROLE_LABEL[active.role] })) : null] }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground lg:text-shell-muted lg:rail:hidden" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Organisations" }), organizations.map((org) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(org.id), children: [_jsx(OrgMark, { org: org, className: "size-6 rounded-md text-[10px]" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name }), org.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Organisation active", className: "size-4" })) : org.role ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: ORG_ROLE_LABEL[org.role] })) : null] }, org.id)))] }), createHref !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(MenuPrimitive.LinkItem, { href: createHref, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : onCreate !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onCreate, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : null] })] }));
 }

package/dist/product-name.d.ts

@@ -0,0 +1,3 @@
+import type { FamilyProduct } from "./family-svg.ts";
+/** Nom affiché d'un produit de la famille (« E-mails » pour `mail`), Account compris. */
+export declare function familyProductName(product: FamilyProduct): string;

package/dist/product-name.js

@@ -0,0 +1,7 @@
+import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
+/** Nom affiché d'un produit de la famille (« E-mails » pour `mail`), Account compris. */
+export function familyProductName(product) {
+    if (product === HGDC_ACCOUNT.badge)
+        return HGDC_ACCOUNT.name;
+    return HGDC_PRODUCTS.find((item) => item.badge === product)?.name ?? product;
+}

package/dist/products.d.ts

@@ -9,7 +9,7 @@ export declare const PRODUCT_STAGE_LABEL: Readonly<Record<ProductStage, string>>
 export type HgdcCatalogProduct = {
     /** Le mot du produit, qui sert de sous-domaine : « Host ». */
     word: string;
-    /** Nom affiché, le mot seul (« Mail », « Basalte » pour `host`) : la famille ne se répète pas devant chaque produit. */
+    /** Nom affiché : celui du module de Basalte (« Déploiements » pour `host`), sinon le mot seul. */
     name: string;
     /** « host.hgdc.ch ». */
     subdomain: string;
@@ -108,7 +108,7 @@ export declare function productMenuEntries(options?: {
  */
 export declare function sameOriginPath(href: string, pageOrigin: string | undefined): string | null;
 /** Une entrée de la barre des produits d'`AppShell`. */
-export type ProductRailEntry = {
+export type ShellProductEntry = {
     name: string;
     href: string;
     badge: FamilyProduct;
@@ -132,14 +132,14 @@ export type ProductRailEntry = {
  * (`PRODUCT_ORIGINS`, `app.hgdc.ch/<produit>`) reçoit un lien relatif et `sameOrigin` (ADR 0020),
  * et le produit courant sa base (`/mail/`) plutôt que `/`.
  */
-export declare function productRailEntries(options?: {
+export declare function shellProductEntries(options?: {
     current?: string | undefined;
     accountHref?: string | undefined;
     catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
     pageOrigin?: string | undefined;
 }): {
-    products: Array<ProductRailEntry>;
-    account: ProductRailEntry;
+    products: Array<ShellProductEntry>;
+    account: ShellProductEntry;
 };
 /**
  * Lien vers l'autre vue du même produit (ADR 0014) : depuis `app.hgdc.ch/<mot>`, « Ouvrir seul » vers

package/dist/products.js

@@ -48,7 +48,7 @@ export function productEntryHref(word, origins = PRODUCT_ORIGINS) {
  */
 export const PRODUCT_ENTRY_REFRESH_QUERY = "refresh=background&next=/";
 function product(word, pitch, icon, stage, 
-/** Nom affiché quand il diffère du mot de l'adresse (Basalte, servi sous `host`). */
+/** Nom affiché quand il diffère du mot de l'adresse : le nom du module (« Déploiements » pour `host`). */
 name = word) {
     const badge = word.toLowerCase();
     if (!isFamilyProduct(badge))
@@ -76,21 +76,21 @@ export const HGDC_ACCOUNT = { ...account, entryHref: account.href };
 export const HGDC_MANAGER = product("Manager", "Tes organisations, leurs membres et leurs rôles.", UserGroupIcon, "live");
 /** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
 export const HGDC_PRODUCTS = [
-    // Basalte est le nom affiché de Host depuis le 2026-11-03 ; adresses, pastille et clés restent en `host`.
-    product("Host", "Ton site en ligne, déployé à chaque modification.", Rocket01Icon, "live", "Basalte"),
-    product("Mail", "Tes e-mails, newsletters et formulaires, envoyés depuis ton adresse.", Mail01Icon, "live"),
+    // Basalte est le produit ; chacun de ceux-ci y est un module, sous son nom de fonction. Adresses, pastille et clés gardent le mot.
+    product("Host", "Ton site en ligne, déployé à chaque modification.", Rocket01Icon, "live", "Déploiements"),
+    product("Mail", "Tes e-mails, newsletters et formulaires, envoyés depuis ton adresse.", Mail01Icon, "live", "E-mails"),
     // Masqué temporairement le 2026-11-03 ; la console reste en ligne.
     product("Portal", "Un espace partagé où ton client suit son projet, signe et paie.", Briefcase01Icon, "soon"),
-    product("Status", "La surveillance de tes sites et ta page de statut.", Activity01Icon, "live"),
-    product("Analytics", "Tes visiteurs mesurés, sans cookies ni bannière.", Analytics01Icon, "live"),
-    product("Docs", "Ta documentation en ligne, avec un assistant qui y répond.", BookOpen01Icon, "live"),
-    product("IAssistant", "Une bulle de chat IA sur ton site, qui répond à tes visiteurs.", BubbleChatIcon, "preview"),
+    product("Status", "La surveillance de tes sites et ta page de statut.", Activity01Icon, "live", "Surveillance"),
+    product("Analytics", "Tes visiteurs mesurés, sans cookies ni bannière.", Analytics01Icon, "live", "Statistiques"),
+    product("Docs", "Ta documentation en ligne, avec un assistant qui y répond.", BookOpen01Icon, "live", "Documentation"),
+    product("IAssistant", "Une bulle de chat IA sur ton site, qui répond à tes visiteurs.", BubbleChatIcon, "preview", "Assistant IA"),
     id(),
     HGDC_MANAGER,
 ];
 /** ID, le compte de connexion ouvert aux applications tierces : pas d'entrée `/auth/hgdc`, sa racine. */
 function id() {
-    const item = product("ID", "Ton compte pour te connecter à tes applications.", UserCircleIcon, "live");
+    const item = product("ID", "Ton compte pour te connecter à tes applications.", UserCircleIcon, "live", "Connexion");
     return { ...item, entryHref: item.href };
 }
 /** Vrai si le produit répond déjà (en service ou en préversion). */
@@ -141,7 +141,7 @@ export function sameOriginPath(href, pageOrigin) {
  * (`PRODUCT_ORIGINS`, `app.hgdc.ch/<produit>`) reçoit un lien relatif et `sameOrigin` (ADR 0020),
  * et le produit courant sa base (`/mail/`) plutôt que `/`.
  */
-export function productRailEntries(options = {}) {
+export function shellProductEntries(options = {}) {
     const current = options.current?.toLowerCase();
     const { pageOrigin } = options;
     const entry = (item, href, product) => {

package/dist/shell-frame.d.ts

@@ -1,6 +1,4 @@
-import { type FamilyProduct } from "./family-svg.ts";
-/** Nom affiché d'un produit de la famille (« Mail »), Account compris. */
-export declare function familyProductName(product: FamilyProduct): string;
+export { familyProductName } from "./product-name.ts";
 /** Haut de la barre latérale (marque du produit) : le même dans la coque et dans le cadre. */
 export declare const SIDEBAR_HEAD = "mt-2 flex h-14 shrink-0 items-center gap-1 px-3";
 export declare const SIDEBAR_BRAND = "flex min-w-0 flex-1 items-center gap-2.5 pl-2.25";
@@ -9,13 +7,12 @@ export declare const SIDEBAR_BRAND_NAME = "truncate font-heading text-[0.9375rem
 export declare const SIDEBAR_RAIL_BOX = "grid h-9 w-10 shrink-0 place-items-center rounded-xl";
 /**
  * Le cadre de la coque, dessiné par le chargeur du document (`FamilyLoaderRoot`) quand une page
- * attend hors de la coque : barre des produits complète (organisation retenue, pastilles, produit
- * courant), barre latérale du produit (sa marque, la navigation en squelette à sa hauteur
- * retenue), carte du contenu et sa barre du haut. Mêmes boîtes que la coque, au pixel : la
- * transition de vue d'un produit à l'autre n'a rien à faire bouger, et la coque qui monte ensuite
- * prend la place sans saut.
+ * attend hors de la coque : organisation retenue, Manager, retour aux modules, nom du module,
+ * navigation en squelette à sa hauteur retenue, carte du contenu et sa barre du haut. Mêmes boîtes
+ * que la coque, au pixel : la transition de vue d'un module à l'autre n'a rien à faire bouger, et
+ * la coque qui monte ensuite prend la place sans saut.
  *
  * Le produit vient de l'adresse (`<html data-hgdc-product>`, `sidebarInitScript`) : le rendu
- * serveur dessine toutes les marques, le CSS montre la bonne.
+ * serveur dessine tous les noms, le CSS montre le bon.
  */
 export declare function ShellFrame(): React.JSX.Element;

package/dist/shell-frame.js

@@ -1,14 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FAMILY_PRODUCTS } from "./family-svg.js";
+import { OrgPlaceholder } from "./org-placeholder.js";
 import { ProductBadge } from "./product-badge.js";
-import { ProductRailFrame } from "./product-rail.js";
-import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
-/** Nom affiché d'un produit de la famille (« Mail »), Account compris. */
-export function familyProductName(product) {
-    if (product === HGDC_ACCOUNT.badge)
-        return HGDC_ACCOUNT.name;
-    return HGDC_PRODUCTS.find((item) => item.badge === product)?.name ?? `HGDC ${product}`;
-}
+import { familyProductName } from "./product-name.js";
+export { familyProductName } from "./product-name.js";
 /** Haut de la barre latérale (marque du produit) : le même dans la coque et dans le cadre. */
 export const SIDEBAR_HEAD = "mt-2 flex h-14 shrink-0 items-center gap-1 px-3";
 export const SIDEBAR_BRAND = "flex min-w-0 flex-1 items-center gap-2.5 pl-2.25";
@@ -17,17 +12,18 @@ export const SIDEBAR_BRAND_NAME = "truncate font-heading text-[0.9375rem] font-s
 export const SIDEBAR_RAIL_BOX = "grid h-9 w-10 shrink-0 place-items-center rounded-xl";
 /** Lignes de squelette de la navigation, coupées à la hauteur retenue (`--hgdc-nav-height`). */
 const SKELETON_ROWS = 12;
+/** Une ligne de la barre sans lien : même boîte qu'une entrée. */
+const FRAME_ROW = "flex h-9 shrink-0 items-center gap-2.5 px-3 text-sm font-medium text-shell-muted";
 /**
  * Le cadre de la coque, dessiné par le chargeur du document (`FamilyLoaderRoot`) quand une page
- * attend hors de la coque : barre des produits complète (organisation retenue, pastilles, produit
- * courant), barre latérale du produit (sa marque, la navigation en squelette à sa hauteur
- * retenue), carte du contenu et sa barre du haut. Mêmes boîtes que la coque, au pixel : la
- * transition de vue d'un produit à l'autre n'a rien à faire bouger, et la coque qui monte ensuite
- * prend la place sans saut.
+ * attend hors de la coque : organisation retenue, Manager, retour aux modules, nom du module,
+ * navigation en squelette à sa hauteur retenue, carte du contenu et sa barre du haut. Mêmes boîtes
+ * que la coque, au pixel : la transition de vue d'un module à l'autre n'a rien à faire bouger, et
+ * la coque qui monte ensuite prend la place sans saut.
  *
  * Le produit vient de l'adresse (`<html data-hgdc-product>`, `sidebarInitScript`) : le rendu
- * serveur dessine toutes les marques, le CSS montre la bonne.
+ * serveur dessine tous les noms, le CSS montre le bon.
  */
 export function ShellFrame() {
-    return (_jsxs("div", { "data-slot": "shell-frame", "aria-hidden": true, className: "hidden h-full lg:flex", children: [_jsx(ProductRailFrame, {}), _jsxs("div", { "data-slot": "shell-frame-sidebar", className: "flex w-64 shrink-0 flex-col overflow-hidden rail:w-16", children: [_jsx("div", { className: SIDEBAR_HEAD, children: FAMILY_PRODUCTS.map((product) => (_jsxs("div", { "data-product": product, className: "contents", children: [_jsxs("div", { className: `${SIDEBAR_BRAND} rail:hidden`, children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: SIDEBAR_BRAND_NAME, children: familyProductName(product) })] }), _jsx("div", { className: `${SIDEBAR_RAIL_BOX} hidden rail:grid`, children: _jsx(ProductBadge, { product: product, className: "size-6" }) })] }, product))) }), _jsx("div", { className: "px-3 py-2", children: _jsx("div", { "data-slot": "shell-frame-nav", className: "grid gap-0.5 overflow-hidden", children: Array.from({ length: SKELETON_ROWS }, (_, index) => (_jsxs("div", { className: "flex h-9 shrink-0 items-center gap-2.5 px-3 rail:justify-center rail:px-0", children: [_jsx("span", { className: "size-[1.125rem] shrink-0 rounded-md bg-shell-hover" }), _jsx("span", { className: "h-2.5 w-24 rounded-full bg-shell-hover rail:hidden" })] }, index))) }) })] }), _jsx("div", { className: "min-w-0 flex-1 py-2 pr-2", children: _jsx("div", { className: "h-full overflow-hidden rounded-xl bg-background", children: _jsx("div", { "data-slot": "shell-frame-header", className: "min-h-14 border-b border-foreground/5 bg-background" }) }) })] }));
+    return (_jsxs("div", { "data-slot": "shell-frame", "aria-hidden": true, className: "hidden h-full lg:flex", children: [_jsxs("div", { "data-slot": "shell-frame-sidebar", className: "flex w-64 shrink-0 flex-col overflow-hidden rail:w-16", children: [_jsx("div", { className: SIDEBAR_HEAD, children: _jsx(OrgPlaceholder, {}) }), _jsxs("div", { className: "px-3 pt-1", children: [_jsxs("div", { className: FRAME_ROW, children: [_jsx("span", { className: "size-[1.125rem] shrink-0 rounded-md bg-shell-hover" }), _jsx("span", { className: "rail:hidden", children: "Manager" })] }), _jsx("div", { className: "mx-2 mt-2 h-px bg-foreground/8" })] }), _jsxs("div", { className: "px-3 pt-2", children: [_jsxs("div", { className: `${FRAME_ROW} mb-2 rounded-xl bg-shell-hover text-shell-foreground`, children: [_jsx("span", { className: "size-4 shrink-0" }), _jsx("span", { className: "rail:hidden", children: "Retour aux modules" })] }), FAMILY_PRODUCTS.map((product) => (_jsx("div", { "data-product": product, className: "contents", children: _jsxs("div", { className: `${FRAME_ROW} font-semibold text-shell-foreground rail:hidden`, children: [_jsx(ProductBadge, { product: product, className: "size-[1.125rem] shrink-0" }), _jsx("span", { className: "truncate font-heading", children: familyProductName(product) })] }) }, product)))] }), _jsx("div", { className: "px-3 py-2", children: _jsx("div", { "data-slot": "shell-frame-nav", className: "grid gap-0.5 overflow-hidden", children: Array.from({ length: SKELETON_ROWS }, (_, index) => (_jsxs("div", { className: "flex h-9 shrink-0 items-center gap-2.5 px-3 rail:justify-center rail:px-0", children: [_jsx("span", { className: "size-[1.125rem] shrink-0 rounded-md bg-shell-hover" }), _jsx("span", { className: "h-2.5 w-24 rounded-full bg-shell-hover rail:hidden" })] }, index))) }) })] }), _jsx("div", { className: "min-w-0 flex-1 py-2 pr-2", children: _jsx("div", { className: "h-full overflow-hidden rounded-xl bg-background", children: _jsx("div", { "data-slot": "shell-frame-header", className: "min-h-14 border-b border-foreground/5 bg-background" }) }) })] }));
 }

package/dist/shell-links.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { type ProductView } from "./addresses.ts";
 import type { FamilyProduct } from "./family-svg.ts";
+import type { ShellMenuLinks } from "./shell-placement.ts";
 /**
  * Un accès commun de la barre : une adresse, ou un lien du routeur (`{ render: <Link to="/settings" /> }`,
  * dont le `data-status="active"` marque la page ouverte), ou une adresse avec `active`.
@@ -10,7 +11,7 @@ export type ShellLink = string | {
     render?: React.ReactElement;
     active?: boolean;
 };
-/** Les trois accès que la coque pose juste au-dessus du compte, toujours dans cet ordre. */
+/** Les trois accès communs : au-dessus du compte ou dans son menu, selon la coque (`AppShell`). */
 export type AppShellLinks = {
     /** Documentation du produit. */
     documentation?: ShellLink;
@@ -25,6 +26,8 @@ export declare function ShellCommonLinks({ links, statusPageUrl, otherView, }: {
     /** Lien vers l'autre vue du produit (ADR 0014), en dernier ; il ne suffit pas à montrer la liste. */
     otherView?: ReactNode;
 }): React.JSX.Element | null;
+/** L'autre vue, pour le menu du compte. `undefined` pour un produit qui n'en a pas. */
+export declare function otherViewMenuLink(product: FamilyProduct, view: ProductView): ShellMenuLinks["otherView"];
 /**
  * « Ouvrir seul » (vers `<mot>.hgdc.ch`) ou « Ouvrir dans app.hgdc.ch », discret, sous les accès communs.
  * Le chemin courant n'est lu qu'au clic : le lien rendu par le serveur mène à l'accueil.

package/dist/shell-links.js

@@ -30,6 +30,17 @@ export function ShellCommonLinks({ links, statusPageUrl, otherView, }) {
         return null;
     return (_jsx("nav", { "aria-label": "Acc\u00E8s communs", children: _jsxs("ul", { "data-slot": "app-shell-links", className: "grid gap-0.5", children: [items, otherView] }) }));
 }
+function otherViewClick(product, view, fallback) {
+    return (event) => {
+        const path = soloHref(`/${product}`, `${window.location.pathname}${window.location.search}`);
+        event.currentTarget.href = otherViewHref(product, view, path) ?? fallback;
+    };
+}
+/** L'autre vue, pour le menu du compte. `undefined` pour un produit qui n'en a pas. */
+export function otherViewMenuLink(product, view) {
+    const href = otherViewHref(product, view);
+    return href ? { label: otherViewLabel(view), href, onClick: otherViewClick(product, view, href) } : undefined;
+}
 /**
  * « Ouvrir seul » (vers `<mot>.hgdc.ch`) ou « Ouvrir dans app.hgdc.ch », discret, sous les accès communs.
  * Le chemin courant n'est lu qu'au clic : le lien rendu par le serveur mène à l'accueil.
@@ -38,9 +49,5 @@ export function OtherViewLink({ product, view, }) {
     const href = otherViewHref(product, view);
     if (!href)
         return null;
-    const onClick = (event) => {
-        const path = soloHref(`/${product}`, `${window.location.pathname}${window.location.search}`);
-        event.currentTarget.href = otherViewHref(product, view, path) ?? href;
-    };
-    return (_jsx(SidebarNavItem, { icon: LinkSquare02Icon, label: otherViewLabel(view), render: _jsx("a", { href: href, onClick: onClick }) }));
+    return (_jsx(SidebarNavItem, { icon: LinkSquare02Icon, label: otherViewLabel(view), render: _jsx("a", { href: href, onClick: otherViewClick(product, view, href) }) }));
 }

package/dist/shell-memory.d.ts

@@ -4,10 +4,6 @@ export declare const SHELL_ORG_KEY = "hgdc-shell:org";
 export declare const SHELL_NAV_KEY_PREFIX = "hgdc-shell:nav:";
 /** Dernier produit ouvert (son mot), en `localStorage` : l'accueil d'`app.hgdc.ch` y renvoie. */
 export declare const SHELL_LAST_PRODUCT_KEY = "hgdc-shell:last";
-/** Passage d'un produit à l'autre (horodatage), en `sessionStorage`. */
-export declare const SHELL_SWITCH_KEY = "hgdc-shell:switch";
-/** Au-delà, un passage noté n'est plus celui qu'on vit (onglet laissé, retour bien plus tard). */
-export declare const SHELL_SWITCH_MAX_AGE_MS = 10000;
 export type ShellOrganization = {
     initials: string;
     logo?: string;
@@ -67,8 +63,4 @@ export declare function forgetShellOrganization(): void;
 export declare function rememberShellNavHeight(product: string, height: number): void;
 /** Retient le produit affiché (`AppShell` le fait), pour que l'accueil d'`app.hgdc.ch` y renvoie. */
 export declare function rememberLastProduct(product: string): void;
-/** Note le départ vers un autre produit (clic dans la barre des produits). */
-export declare function markProductSwitch(now?: number): void;
-/** Lit et efface la note : vrai si la page vient d'un passage depuis la barre, il y a peu. */
-export declare function takeProductSwitch(now?: number): boolean;
 export {};

package/dist/shell-memory.js

@@ -3,13 +3,11 @@ import { FAMILY_PRODUCTS } from "./family-svg.js";
 import { PRODUCT_ORIGINS } from "./products.js";
 /*
  * Mémoire de la coque, partagée par les produits servis sous la même origine (`app.hgdc.ch/<produit>`,
- * ADR 0020) : ce qu'il faut pour que la première image d'un produit ait déjà la barre des produits
- * complète et la barre latérale à sa taille, avant que ses données n'arrivent.
+ * ADR 0020) : ce qu'il faut pour que la première image d'un produit ait déjà l'organisation
+ * et la barre latérale à sa taille, avant que ses données n'arrivent.
  *
  * - l'organisation affichée en dernier : ses initiales et son logo (rien d'autre, pas le nom) ;
  * - la hauteur de la navigation de chaque produit, pour un squelette à la bonne taille ;
- * - le passage en cours d'un produit à l'autre (session de l'onglet), pour que la barre d'arrivée
- *   ne s'élargisse pas sous une souris restée immobile.
  *
  * `shellBoot` applique la mémoire sur `<html>` avant la première peinture : il tourne en ligne
  * dans le `<head>` (`sidebarInitScript`), donc il ne dépend de rien d'autre que de ses arguments.
@@ -20,10 +18,6 @@ export const SHELL_ORG_KEY = "hgdc-shell:org";
 export const SHELL_NAV_KEY_PREFIX = "hgdc-shell:nav:";
 /** Dernier produit ouvert (son mot), en `localStorage` : l'accueil d'`app.hgdc.ch` y renvoie. */
 export const SHELL_LAST_PRODUCT_KEY = "hgdc-shell:last";
-/** Passage d'un produit à l'autre (horodatage), en `sessionStorage`. */
-export const SHELL_SWITCH_KEY = "hgdc-shell:switch";
-/** Au-delà, un passage noté n'est plus celui qu'on vit (onglet laissé, retour bien plus tard). */
-export const SHELL_SWITCH_MAX_AGE_MS = 10_000;
 /**
  * Applique la mémoire de la coque sur `<html>` : `data-sidebar="rail"`, `data-hgdc-product`
  * (le produit de l'adresse), `data-hgdc-org` et les variables `--hgdc-org-initials`,
@@ -127,12 +121,12 @@ export function shellBootScript(config = SHELL_BOOT_CONFIG) {
 function browser() {
     return typeof window === "undefined" ? null : window;
 }
-function storageSet(storage, key, value) {
+function storageSet(key, value) {
     try {
         if (value === null)
-            window[storage].removeItem(key);
+            window.localStorage.removeItem(key);
         else
-            window[storage].setItem(key, value);
+            window.localStorage.setItem(key, value);
     }
     catch {
         // Stockage bloqué : la première image d'un autre produit montrera un squelette, rien de plus.
@@ -147,7 +141,7 @@ export function rememberShellOrganization(org) {
     const win = browser();
     if (!win)
         return;
-    storageSet("localStorage", SHELL_ORG_KEY, JSON.stringify(shellOrganization(org)));
+    storageSet(SHELL_ORG_KEY, JSON.stringify(shellOrganization(org)));
     shellBoot(SHELL_BOOT_CONFIG, win);
 }
 /** Oublie l'organisation (déconnexion) : la page suivante montre un squelette. */
@@ -155,39 +149,18 @@ export function forgetShellOrganization() {
     const win = browser();
     if (!win)
         return;
-    storageSet("localStorage", SHELL_ORG_KEY, null);
+    storageSet(SHELL_ORG_KEY, null);
     shellBoot(SHELL_BOOT_CONFIG, win);
 }
 /** Retient la hauteur de la navigation d'un produit (`AppShell` le fait après l'affichage). */
 export function rememberShellNavHeight(product, height) {
     if (!browser() || !(height > 0))
         return;
-    storageSet("localStorage", SHELL_NAV_KEY_PREFIX + product, String(Math.round(height)));
+    storageSet(SHELL_NAV_KEY_PREFIX + product, String(Math.round(height)));
 }
 /** Retient le produit affiché (`AppShell` le fait), pour que l'accueil d'`app.hgdc.ch` y renvoie. */
 export function rememberLastProduct(product) {
     if (!browser())
         return;
-    storageSet("localStorage", SHELL_LAST_PRODUCT_KEY, product);
-}
-/** Note le départ vers un autre produit (clic dans la barre des produits). */
-export function markProductSwitch(now = Date.now()) {
-    if (!browser())
-        return;
-    storageSet("sessionStorage", SHELL_SWITCH_KEY, String(now));
-}
-/** Lit et efface la note : vrai si la page vient d'un passage depuis la barre, il y a peu. */
-export function takeProductSwitch(now = Date.now()) {
-    if (!browser())
-        return false;
-    let value = null;
-    try {
-        value = window.sessionStorage.getItem(SHELL_SWITCH_KEY);
-        window.sessionStorage.removeItem(SHELL_SWITCH_KEY);
-    }
-    catch {
-        return false;
-    }
-    const at = Number(value);
-    return value !== null && at > 0 && now - at >= 0 && now - at < SHELL_SWITCH_MAX_AGE_MS;
+    storageSet(SHELL_LAST_PRODUCT_KEY, product);
 }

package/dist/shell-placement.d.ts

@@ -1,16 +1,22 @@
+import type { ShellLink } from "./shell-links.tsx";
 /**
- * Où `AppShell` pose un élément du produit (le sélecteur d'organisation) : dans la barre latérale
- * ou le tiroir mobile, ou en haut de la barre des produits, où il n'a qu'une colonne de 56 px.
+ * Vrai quand la coque montre la barre de Basalte (Manager et modules) : le menu du compte ne répète
+ * pas les produits et reprend les accès d'aide (`ShellMenuLinksContext`).
  */
-export type ShellPlacement = "sidebar" | "product-rail";
-export declare const ShellPlacementContext: React.Context<ShellPlacement>;
-export declare function useShellPlacement(): ShellPlacement;
-/**
- * Vrai quand la coque affiche la barre des produits (sur ordinateur) : les produits y sont déjà,
- * le menu du compte ne les répète pas au-delà de `lg`.
- */
-export declare const ProductRailShownContext: React.Context<boolean>;
-export declare function useProductRailShown(): boolean;
+export declare const ModuleBarShownContext: React.Context<boolean>;
+export declare function useModuleBarShown(): boolean;
+/** Les accès que le menu du compte porte dans la barre de Basalte. */
+export type ShellMenuLinks = {
+    documentation?: ShellLink | undefined;
+    status?: ShellLink | undefined;
+    otherView?: {
+        label: string;
+        href: string;
+        onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    } | undefined;
+};
+export declare const ShellMenuLinksContext: React.Context<ShellMenuLinks>;
+export declare function useShellMenuLinks(): ShellMenuLinks;
 /**
  * Prévient la coque qu'un lien vers un autre produit (ou une autre adresse servie en document
  * complet) vient d'être suivi : elle couvre aussitôt la zone de contenu du H de chargement, le

package/dist/shell-placement.js

@@ -1,15 +1,15 @@
 import { createContext, useContext } from "react";
-export const ShellPlacementContext = createContext("sidebar");
-export function useShellPlacement() {
-    return useContext(ShellPlacementContext);
-}
 /**
- * Vrai quand la coque affiche la barre des produits (sur ordinateur) : les produits y sont déjà,
- * le menu du compte ne les répète pas au-delà de `lg`.
+ * Vrai quand la coque montre la barre de Basalte (Manager et modules) : le menu du compte ne répète
+ * pas les produits et reprend les accès d'aide (`ShellMenuLinksContext`).
  */
-export const ProductRailShownContext = createContext(false);
-export function useProductRailShown() {
-    return useContext(ProductRailShownContext);
+export const ModuleBarShownContext = createContext(false);
+export function useModuleBarShown() {
+    return useContext(ModuleBarShownContext);
+}
+export const ShellMenuLinksContext = createContext({});
+export function useShellMenuLinks() {
+    return useContext(ShellMenuLinksContext);
 }
 /**
  * Prévient la coque qu'un lien vers un autre produit (ou une autre adresse servie en document

package/dist/sidebar-head.d.ts

@@ -1,6 +1,14 @@
+import type { ReactNode } from "react";
 import type { FamilyProduct } from "./family-svg.ts";
 /**
- * Haut de la barre latérale. Dépliée : la marque du produit, et le bouton « Réduire » à droite.
+ * Haut de la barre de Basalte : l'organisation et le bouton « Réduire ». En rail, l'organisation
+ * se réduit à sa marque et le bouton « Déplier » passe dessous.
+ */
+export declare function ShellOrganizationHead({ organization }: {
+    organization: ReactNode;
+}): React.JSX.Element;
+/**
+ * Haut de la barre latérale d'une vue seule, sans barre de Basalte. Dépliée : la marque du produit, et le bouton « Réduire » à droite.
  * En rail : la marque seule, qui devient le bouton « Déplier » au survol de la barre ou au focus,
  * à la même place : le bouton ne descend jamais sous le logo. Les deux états sont dans la page et
  * choisis par la variante CSS `rail:`, donc justes dès la première peinture.

package/dist/sidebar-head.js

@@ -4,6 +4,7 @@ import PanelLeftOpenIcon from "@hugeicons/core-free-icons/PanelLeftOpenIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { cn } from "./cn.js";
 import { isApplePlatform, Kbd, KbdGroup } from "./kbd.js";
+import { OrgPlaceholder } from "./org-placeholder.js";
 import { ProductBadge } from "./product-badge.js";
 import { familyProductName, SIDEBAR_BRAND, SIDEBAR_BRAND_NAME, SIDEBAR_HEAD } from "./shell-frame.js";
 import { toggleSidebar } from "./sidebar-rail.js";
@@ -18,7 +19,14 @@ function ShortcutHint({ label }) {
     return (_jsxs("span", { className: "flex items-center gap-2", children: [label, _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: isApplePlatform() ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: "B" })] })] }));
 }
 /**
- * Haut de la barre latérale. Dépliée : la marque du produit, et le bouton « Réduire » à droite.
+ * Haut de la barre de Basalte : l'organisation et le bouton « Réduire ». En rail, l'organisation
+ * se réduit à sa marque et le bouton « Déplier » passe dessous.
+ */
+export function ShellOrganizationHead({ organization }) {
+    return (_jsxs("div", { "data-slot": "shell-organization", className: "mt-2 flex min-h-14 shrink-0 items-center gap-1 px-3 lg:rail:flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center lg:rail:flex-none", children: organization === undefined ? _jsx(OrgPlaceholder, {}) : organization }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-collapse", onClick: toggleSidebar, "aria-label": "R\u00E9duire la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "rail:hidden") }), children: _jsx(HugeiconsIcon, { icon: COLLAPSE_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "R\u00E9duire" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", "data-slot": "sidebar-expand", onClick: toggleSidebar, "aria-label": "D\u00E9plier la barre lat\u00E9rale", "aria-keyshortcuts": "Control+B Meta+B", className: cn(TOGGLE, "hidden rail:grid") }), children: _jsx(HugeiconsIcon, { icon: EXPAND_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "D\u00E9plier" }) })] })] }));
+}
+/**
+ * Haut de la barre latérale d'une vue seule, sans barre de Basalte. Dépliée : la marque du produit, et le bouton « Réduire » à droite.
  * En rail : la marque seule, qui devient le bouton « Déplier » au survol de la barre ou au focus,
  * à la même place : le bouton ne descend jamais sous le logo. Les deux états sont dans la page et
  * choisis par la variante CSS `rail:`, donc justes dès la première peinture.

package/dist/sidebar-nav.d.ts

@@ -1,5 +1,7 @@
 import { type IconSvgElement } from "@hugeicons/react";
 import type { ReactNode } from "react";
+/** Une entrée de la barre : la même pour un onglet et pour un module. */
+export declare const SIDEBAR_ITEM: string;
 /**
  * La navigation du produit : 4 à 7 entrées, à plat. Une navigation imbriquée (l'espace d'une page,
  * d'un projet) commence par `SidebarNavBack` et range ses entrées dans des `SidebarNavGroup`.
@@ -29,10 +31,12 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
  * groupes. Une pastille teintée, flèche à gauche, jamais « vous êtes ici ». En rail, la flèche seule
  * et le texte en infobulle.
  */
-export declare function SidebarNavBack({ label, href, render, }: {
+export declare function SidebarNavBack({ label, href, render, keepMenuOpen, }: {
     /** « Retour aux pages » */
     label: string;
     href?: string;
     /** Lien du routeur : `render={<Link to="…" />}`. */
     render?: React.ReactElement;
+    /** Sur téléphone, le tiroir reste ouvert : le retour change la liste sans changer de page. */
+    keepMenuOpen?: boolean;
 }): React.JSX.Element;

package/dist/sidebar-nav.js

@@ -6,6 +6,8 @@ import { cn } from "./cn.js";
 import { useAppShell } from "./shell-context.js";
 import { useSidebarRail } from "./sidebar-rail.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+/** Une entrée de la barre : la même pour un onglet et pour un module. */
+export const SIDEBAR_ITEM = cn("flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "aria-[current=page]:bg-muted aria-[current=page]:text-foreground data-[status=active]:bg-muted data-[status=active]:text-foreground", "min-h-11 lg:min-h-9 coarse:min-h-11 lg:gap-2.5 lg:py-2 lg:text-shell-muted lg:hover:bg-shell-hover lg:hover:text-shell-foreground", "lg:aria-[current=page]:bg-shell-active lg:aria-[current=page]:text-shell-foreground lg:data-[status=active]:bg-shell-active lg:data-[status=active]:text-shell-foreground", "lg:rail:justify-center lg:rail:px-0");
 /**
  * La navigation du produit : 4 à 7 entrées, à plat. Une navigation imbriquée (l'espace d'une page,
  * d'un projet) commence par `SidebarNavBack` et range ses entrées dans des `SidebarNavGroup`.
@@ -28,7 +30,7 @@ export function SidebarNavItem({ icon, label, active, href, render, }) {
             href,
             "aria-current": active ? "page" : undefined,
             onClick: closeMobileNav,
-            className: cn("flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "aria-[current=page]:bg-muted aria-[current=page]:text-foreground data-[status=active]:bg-muted data-[status=active]:text-foreground", "min-h-11 lg:min-h-9 coarse:min-h-11 lg:gap-2.5 lg:py-2 lg:text-shell-muted lg:hover:bg-shell-hover lg:hover:text-shell-foreground", "lg:aria-[current=page]:bg-shell-active lg:aria-[current=page]:text-shell-foreground lg:data-[status=active]:bg-shell-active lg:data-[status=active]:text-shell-foreground", "lg:rail:justify-center lg:rail:px-0"),
+            className: SIDEBAR_ITEM,
             children: (_jsxs(_Fragment, { children: [_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" }), _jsx("span", { className: "truncate lg:rail:sr-only", children: label })] })),
         },
     });
@@ -40,7 +42,7 @@ export function SidebarNavItem({ icon, label, active, href, render, }) {
  * groupes. Une pastille teintée, flèche à gauche, jamais « vous êtes ici ». En rail, la flèche seule
  * et le texte en infobulle.
  */
-export function SidebarNavBack({ label, href, render, }) {
+export function SidebarNavBack({ label, href, render, keepMenuOpen = false, }) {
     const rail = useSidebarRail();
     const { closeMobileNav } = useAppShell();
     const link = useRender({
@@ -48,7 +50,7 @@ export function SidebarNavBack({ label, href, render, }) {
         render,
         props: {
             href,
-            onClick: closeMobileNav,
+            ...(keepMenuOpen ? {} : { onClick: closeMobileNav }),
             "data-slot": "sidebar-nav-back",
             className: cn(
             // Jamais marqué actif : le lien du routeur pose `data-status="active"` sur un parent ouvert.

package/dist/use-product-leave.js

@@ -20,7 +20,6 @@ export function useProductLeave() {
                 return;
             window.clearTimeout(leaveTimer.current);
             setLeaving(false);
-            delete document.documentElement.dataset.hgdcSwitching;
         };
         window.addEventListener("pageshow", onPageShow);
         return () => {

package/package.json

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