@hgdc/ui 0.47.0 → 0.48.0

package/dist/app-shell.d.ts

@@ -1,131 +1,26 @@
-import { type IconSvgElement } from "@hugeicons/react";
 import { type ReactNode } from "react";
+import type { ProductView } from "./addresses.ts";
 import type { FamilyProduct } from "./family-svg.ts";
-import { type ProductView } from "./addresses.ts";
+import { type AppShellAssistant } from "./shell-assistant.tsx";
+import { type AppShellLinks } from "./shell-links.tsx";
+export { sidebarInitScript, toggleSidebar, useSidebarRail } from "./sidebar-rail.ts";
+export { PRODUCT_LEAVE_DELAY_MS } from "./use-product-leave.ts";
+export { useAppShell } from "./shell-context.ts";
+export { SidebarNav, SidebarNavBack, SidebarNavItem } from "./sidebar-nav.tsx";
+export { SidebarNavGroup } from "./sidebar-nav-group.tsx";
+export type { AppShellLinks, ShellLink } from "./shell-links.tsx";
+export type { AppShellAssistant } from "./shell-assistant.tsx";
 /**
- * À poser dans le `<head>`, avec `themeInitScript` : avant la première peinture, il remet le
- * rail (la variante CSS `rail:` le lit, rien ne saute au chargement) et la mémoire de la coque
- * partagée sous la même origine (`shell-memory` : produit de l'adresse, dernière organisation,
- * hauteur de la navigation), que le cadre du chargeur et `OrgPlaceholder` lisent (ADR 0020).
- */
-export declare const sidebarInitScript: string;
-/** La barre latérale est-elle réduite en rail ? L'état vit sur `<html data-sidebar="rail">`. */
-export declare function useSidebarRail(): boolean;
-export declare function toggleSidebar(): void;
-/** Pour fermer le tiroir mobile depuis un élément de la barre (un sélecteur, un bouton). */
-export declare function useAppShell(): {
-    closeMobileNav: () => void;
-};
-/**
- * La navigation du produit : 4 à 7 entrées, à plat. Une navigation imbriquée (l'espace d'une page,
- * d'un projet) commence par `SidebarNavBack` et range ses entrées dans des `SidebarNavGroup`.
- */
-export declare function SidebarNav({ label, className, children, }: {
-    /** Nom de la navigation pour les lecteurs d'écran : « Projet », « Organisation ». */
-    label: string;
-    className?: string;
-    children: ReactNode;
-}): React.JSX.Element;
-/**
- * Une entrée de la barre. « Vous êtes ici » par `active` (ou `data-status="active"`, que pose le
- * `Link` de TanStack Router) : teinte de la coque, jamais l'accent. En rail, l'icône seule, et le
- * nom en infobulle.
- */
-export declare function SidebarNavItem({ icon, label, active, href, render, }: {
-    icon: IconSvgElement;
-    label: string;
-    active?: boolean;
-    href?: string;
-    /** Lien du routeur : `render={<Link to="…" />}`. */
-    render?: React.ReactElement;
-}): React.JSX.Element;
-/**
- * Retour au niveau du dessus, en tête d'une navigation imbriquée : « Retour aux pages » quand la
- * barre montre l'espace d'une page, d'un projet. Premier enfant de `SidebarNav`, au-dessus des
- * groupes. Une pastille teintée, flèche à gauche, jamais « vous êtes ici ». En rail, la flèche seule
- * et le texte en infobulle.
- */
-export declare function SidebarNavBack({ label, href, render, }: {
-    /** « Retour aux pages » */
-    label: string;
-    href?: string;
-    /** Lien du routeur : `render={<Link to="…" />}`. */
-    render?: React.ReactElement;
-}): React.JSX.Element;
-/**
- * Un groupe titré de la barre : « Suivi », « Réglages ». Ses `SidebarNavItem` en enfants. Le titre
- * nomme la liste pour les lecteurs d'écran ; en rail, il cède la place à un trait.
+ * 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.
  *
- * Avec `collapsible`, le titre devient une entrée à flèche qui déroule ses rubriques : fermé par
- * défaut, ouvert dès qu'une de ses rubriques est la page ouverte, puis tel que la personne l'a
- * laissé (mémorisé par navigateur). En rail, ses rubriques restent visibles, sous un trait.
- */
-export declare function SidebarNavGroup(props: {
-    label: string;
-    children: ReactNode;
-    /** Le titre déroule ou replie le groupe. */
-    collapsible?: false;
-}): React.JSX.Element;
-export declare function SidebarNavGroup(props: {
-    label: string;
-    children: ReactNode;
-    collapsible: true;
-    /** Icône de l'entrée qui déroule le groupe, comme une rubrique. */
-    icon?: IconSvgElement;
-    /**
-     * Une rubrique du groupe est la page ouverte : le groupe s'ouvre, dès le rendu serveur. Sans cette
-     * valeur, la coque le lit dans les liens (`aria-current="page"`, `data-status="active"`) après
-     * l'hydratation.
-     */
-    active?: boolean;
-    /** Ouvert tant que la personne n'a rien choisi. Fermé par défaut. */
-    defaultOpen?: boolean;
-    /** Clé de mémorisation, par défaut le titre, propre au produit de la coque : à donner quand deux groupes portent le même. */
-    storageKey?: string;
-}): React.JSX.Element;
-/**
- * Un accès commun de la barre : une adresse, ou un lien du routeur (`{ render: <Link to="/settings" /> }`,
- * dont le `data-status="active"` marque la page ouverte), ou une adresse avec `active`.
- */
-export type ShellLink = string | {
-    href?: string;
-    render?: React.ReactElement;
-    active?: boolean;
-};
-/** Les trois accès que la coque pose juste au-dessus du compte, toujours dans cet ordre. */
-export type AppShellLinks = {
-    /** Documentation du produit. */
-    documentation?: ShellLink;
-    /** Réglages du produit ou de l'organisation. */
-    settings?: ShellLink;
-    /** État du service : la page de statut de la coque (`statusPage`) par défaut, `false` pour le retirer. */
-    status?: ShellLink | false;
-};
-/**
- * L'assistant IA du produit. La coque pose son bouton juste à côté de la recherche et l'ouvre dans
- * une colonne à droite de la page, sur le fond de l'application : la page se rétrécit et se
- * réorganise, jamais recouverte. Sous 1280 px, là où les deux ne tiennent plus côte à côte, une
- * vue dédiée plein écran avec « Retour à la page ». La page reste montée dans les deux cas, et le
- * panneau, une fois ouvert, aussi : rien ne se perd en fermant ou en changeant de largeur.
- */
-export type AppShellAssistant = {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    /**
-     * Le corps de l'assistant : conversation et saisie (`@hgdc/ui/assistant-chat`). La coque pose le
-     * titre, la fermeture et le retour à la page ; le panneau occupe la hauteur restante et défile.
-     */
-    panel: ReactNode;
-    /** Nom du bouton et titre du panneau : « Assistant » par défaut. */
-    label?: string;
-    /** Lettre du raccourci `Ctrl` (`⌘`) + lettre qui ouvre et ferme l'assistant (`"j"`). Aucun par défaut. */
-    shortcut?: string;
-};
-/**
- * Délai entre le clic vers un autre produit et le H : une page prérendue s'affiche avant (une ou
- * deux images), le H n'apparaît alors jamais ; une page à charger le montre aussitôt après.
+ * 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 const PRODUCT_LEAVE_DELAY_MS = 100;
 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. */
     product: FamilyProduct;

package/dist/app-shell.js

@@ -1,379 +1,33 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
-import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
-import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
-import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
-import BookOpen01Icon from "@hugeicons/core-free-icons/BookOpen01Icon";
-import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
-import LinkSquare02Icon from "@hugeicons/core-free-icons/LinkSquare02Icon";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
-import PanelLeftCloseIcon from "@hugeicons/core-free-icons/PanelLeftCloseIcon";
-import PanelLeftOpenIcon from "@hugeicons/core-free-icons/PanelLeftOpenIcon";
-import Settings01Icon from "@hugeicons/core-free-icons/Settings01Icon";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { useRender } from "@base-ui/react/use-render";
-import { createContext, Suspense, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { Suspense, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { CommandMenuButton } from "./command-menu.js";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
 import { FamilyLoaderHost, FamilyLoaderRootContext } from "./family-loader.js";
-import { isApplePlatform, Kbd, KbdGroup } from "./kbd.js";
-import { CONTENT_LOADING_LAYER, ContentLoadingContext, PAGE_PENDING_MIN_MS, PAGE_PENDING_MS, PagePending, } from "./page-pending.js";
-import { soloHref } from "./addresses.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 { otherViewHref, otherViewLabel } from "./products.js";
 import { ProductRail } from "./product-rail.js";
 import { useProductSwitch } from "./product-switch.js";
-import { ProductRailShownContext, ShellLeaveContext, StatusPageContext } from "./shell-placement.js";
-import { familyProductName, SIDEBAR_BRAND, SIDEBAR_BRAND_NAME, SIDEBAR_HEAD } from "./shell-frame.js";
-import { rememberShellNavHeight, shellBootScript } from "./shell-memory.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.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 { rememberShellNavHeight } from "./shell-memory.js";
+import { ProductRailShownContext, ShellLeaveContext, StatusPageContext } from "./shell-placement.js";
+import { 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";
 import { useMediaQuery } from "./use-media-query.js";
-// ── Rail : la barre latérale réduite aux icônes, mémorisée par navigateur ──────────────
-const RAIL_KEY = "sidebar";
-const RAIL_EVENT = "sidebarchange";
-/**
- * À poser dans le `<head>`, avec `themeInitScript` : avant la première peinture, il remet le
- * rail (la variante CSS `rail:` le lit, rien ne saute au chargement) et la mémoire de la coque
- * partagée sous la même origine (`shell-memory` : produit de l'adresse, dernière organisation,
- * hauteur de la navigation), que le cadre du chargeur et `OrgPlaceholder` lisent (ADR 0020).
- */
-export const sidebarInitScript = shellBootScript();
-function subscribeRail(onChange) {
-    window.addEventListener(RAIL_EVENT, onChange);
-    return () => window.removeEventListener(RAIL_EVENT, onChange);
-}
-/** La barre latérale est-elle réduite en rail ? L'état vit sur `<html data-sidebar="rail">`. */
-export function useSidebarRail() {
-    return useSyncExternalStore(subscribeRail, () => document.documentElement.dataset.sidebar === "rail", () => false);
-}
-export function toggleSidebar() {
-    const root = document.documentElement;
-    const rail = root.dataset.sidebar !== "rail";
-    if (rail)
-        root.dataset.sidebar = "rail";
-    else
-        delete root.dataset.sidebar;
-    try {
-        if (rail)
-            localStorage.setItem(RAIL_KEY, "rail");
-        else
-            localStorage.removeItem(RAIL_KEY);
-    }
-    catch {
-        // Stockage bloqué : le choix vaut pour cette page seulement.
-    }
-    window.dispatchEvent(new Event(RAIL_EVENT));
-}
-/** `Ctrl+B` (`⌘B`) réduit ou déplie la barre latérale, hors des champs de saisie. */
-function useToggleShortcut() {
-    useEffect(() => {
-        const onKey = (event) => {
-            if (event.key.toLowerCase() !== "b" || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey)
-                return;
-            const target = event.target;
-            if (target instanceof Element && target.closest("input, textarea, select, [contenteditable=true]"))
-                return;
-            event.preventDefault();
-            toggleSidebar();
-        };
-        document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
-    }, []);
-}
-// ── Navigation ──────────────────────────────────────────────────────────────────────
-const ShellContext = createContext({
-    closeMobileNav: () => { },
-});
-/** Pour fermer le tiroir mobile depuis un élément de la barre (un sélecteur, un bouton). */
-export function useAppShell() {
-    return useContext(ShellContext);
-}
-/**
- * La navigation du produit : 4 à 7 entrées, à plat. Une navigation imbriquée (l'espace d'une page,
- * d'un projet) commence par `SidebarNavBack` et range ses entrées dans des `SidebarNavGroup`.
- */
-export function SidebarNav({ label, className, children, }) {
-    return (_jsx("nav", { "aria-label": label, className: cn("min-h-0 flex-1 overflow-y-auto px-3 py-2", className), children: _jsx("ul", { className: "grid gap-0.5", children: children }) }));
-}
-/**
- * Une entrée de la barre. « Vous êtes ici » par `active` (ou `data-status="active"`, que pose le
- * `Link` de TanStack Router) : teinte de la coque, jamais l'accent. En rail, l'icône seule, et le
- * nom en infobulle.
- */
-export function SidebarNavItem({ icon, label, active, href, render, }) {
-    const rail = useSidebarRail();
-    const { closeMobileNav } = useAppShell();
-    const link = useRender({
-        defaultTagName: "a",
-        render,
-        props: {
-            href,
-            "aria-current": active ? "page" : undefined,
-            onClick: closeMobileNav,
-            className: cn("flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "aria-[current=page]:bg-muted aria-[current=page]:text-foreground data-[status=active]:bg-muted data-[status=active]:text-foreground", "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"),
-            children: (_jsxs(_Fragment, { children: [_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" }), _jsx("span", { className: "truncate lg:rail:sr-only", children: label })] })),
-        },
-    });
-    return (_jsx("li", { children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
-}
-/**
- * Retour au niveau du dessus, en tête d'une navigation imbriquée : « Retour aux pages » quand la
- * barre montre l'espace d'une page, d'un projet. Premier enfant de `SidebarNav`, au-dessus des
- * groupes. Une pastille teintée, flèche à gauche, jamais « vous êtes ici ». En rail, la flèche seule
- * et le texte en infobulle.
- */
-export function SidebarNavBack({ label, href, render, }) {
-    const rail = useSidebarRail();
-    const { closeMobileNav } = useAppShell();
-    const link = useRender({
-        defaultTagName: "a",
-        render,
-        props: {
-            href,
-            onClick: closeMobileNav,
-            "data-slot": "sidebar-nav-back",
-            className: cn(
-            // Jamais marqué actif : le lien du routeur pose `data-status="active"` sur un parent ouvert.
-            "group/back flex items-center gap-2 rounded-xl bg-muted/70 px-3 py-2.5 text-sm font-medium whitespace-nowrap text-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50", "min-h-11 lg:min-h-9 coarse:min-h-11 lg:py-2 lg:bg-shell-hover lg:text-shell-foreground lg:hover:bg-shell-active", "lg:rail:justify-center lg:rail:px-0"),
-            children: (_jsxs(_Fragment, { children: [_jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground transition-transform duration-(--duration-fast) ease-out group-hover/back:-translate-x-0.5 motion-reduce:transition-none lg:size-4 lg:text-shell-muted" }), _jsx("span", { className: "truncate lg:rail:sr-only", children: label })] })),
-        },
-    });
-    return (_jsx("li", { className: "pb-2", children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
-}
-// ── Groupes repliables : ouverts ou fermés par la personne, mémorisés par navigateur ──────
-const GROUP_KEY_PREFIX = "sidebar-group:";
-const GROUP_EVENT = "sidebargroupchange";
-function subscribeGroups(onChange) {
-    window.addEventListener(GROUP_EVENT, onChange);
-    window.addEventListener("storage", onChange);
-    return () => {
-        window.removeEventListener(GROUP_EVENT, onChange);
-        window.removeEventListener("storage", onChange);
-    };
-}
-function readGroup(key) {
-    try {
-        const value = localStorage.getItem(GROUP_KEY_PREFIX + key);
-        return value === "open" ? true : value === "closed" ? false : null;
-    }
-    catch {
-        return null;
-    }
-}
-function writeGroup(key, open) {
-    try {
-        localStorage.setItem(GROUP_KEY_PREFIX + key, open ? "open" : "closed");
-    }
-    catch {
-        // Stockage bloqué : le choix vaut pour cette page seulement.
-    }
-    window.dispatchEvent(new Event(GROUP_EVENT));
-}
-/** Une entrée de la liste est-elle la page ouverte ? Suit les attributs que pose le routeur. */
-function useActiveDescendant(ref) {
-    const [active, setActive] = useState(false);
-    useLayoutEffect(() => {
-        const element = ref.current;
-        if (!element)
-            return;
-        const read = () => setActive(element.querySelector('[aria-current="page"], [data-status="active"]') !== null);
-        read();
-        const observer = new MutationObserver(read);
-        observer.observe(element, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            attributeFilter: ["aria-current", "data-status"],
-        });
-        return () => observer.disconnect();
-    }, [ref]);
-    return active;
-}
-export function SidebarNavGroup(props) {
-    if (props.collapsible)
-        return _jsx(CollapsibleNavGroup, { ...props });
-    return _jsx(TitledNavGroup, { label: props.label, children: props.children });
-}
-function CollapsibleNavGroup({ label, children, icon, active, defaultOpen = false, storageKey, }) {
-    // Propre au produit : sous une origine partagée (`app.hgdc.ch/<produit>`), `localStorage` est
-    // commun à tous. Le thème et la barre réduite le sont volontairement (`theme`, `sidebar`), un
-    // groupe « Réglages » de Mail et de Host ne l'est pas (ADR 0020).
-    const { product } = useContext(ShellContext);
-    const key = product ? `${product}:${storageKey ?? label}` : (storageKey ?? label);
-    const buttonId = useId();
-    const listId = useId();
-    const listRef = useRef(null);
-    const stored = useSyncExternalStore(subscribeGroups, () => readGroup(key), () => null);
-    const activeInDom = useActiveDescendant(listRef);
-    const current = active ?? activeInDom;
-    // Refermé par la personne alors qu'une de ses rubriques est ouverte : il le reste jusqu'à ce
-    // qu'elle en sorte. La navigation suivante vers une rubrique du groupe le rouvre.
-    const [dismissed, setDismissed] = useState(false);
-    const [wasCurrent, setWasCurrent] = useState(current);
-    if (wasCurrent !== current) {
-        setWasCurrent(current);
-        setDismissed(false);
-    }
-    const open = current ? !dismissed : (stored ?? defaultOpen);
-    // Pas d'animation au premier rendu : l'état lu dans le navigateur s'applique sans glisser.
-    const [ready, setReady] = useState(false);
-    useEffect(() => {
-        const frame = requestAnimationFrame(() => setReady(true));
-        return () => cancelAnimationFrame(frame);
-    }, []);
-    const toggle = () => {
-        const next = !open;
-        if (current)
-            setDismissed(!next);
-        writeGroup(key, next);
-    };
-    return (_jsxs("li", { "data-slot": "sidebar-nav-group", "data-collapsible": "", "data-open": open ? "" : undefined, className: "pt-1 first:pt-0", children: [_jsx("span", { "aria-hidden": true, className: "mx-auto mt-3 mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsxs("button", { type: "button", id: buttonId, "aria-expanded": open, "aria-controls": listId, onClick: toggle, className: cn("group/disclosure flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left 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", "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", 
-                // Une rubrique du groupe est ouverte et le groupe est replié : l'entrée le dit, sans fond.
-                current && !open && "text-foreground lg:text-shell-foreground", "lg:rail:hidden"), children: [icon ? (_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" })) : null, _jsx("span", { className: "truncate", children: label }), _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, className: cn("ml-auto size-4 shrink-0 opacity-70 transition-transform duration-(--duration-base) ease-ios motion-reduce:transition-none lg:size-3.5", open && "rotate-90") })] }), _jsx("div", { "data-slot": "sidebar-nav-group-panel", className: cn("grid", open ? "visible grid-rows-[1fr]" : "invisible grid-rows-[0fr]", ready &&
-                    "transition-[grid-template-rows,visibility] duration-(--duration-base) ease-ios motion-reduce:transition-none", 
-                // En rail, les rubriques restent là, sous le trait : seules leurs icônes se voient.
-                "lg:rail:visible lg:rail:grid-rows-[1fr]"), children: _jsx("ul", { ref: listRef, id: listId, "aria-labelledby": buttonId, className: cn("grid min-h-0 gap-0.5 overflow-hidden", 
-                    // Rubriques en retrait, sous un filet aligné sur l'icône du titre.
-                    icon ? "ml-[1.375rem] border-l border-border pl-2 lg:ml-5" : "pl-2", "pt-0.5 lg:rail:ml-0 lg:rail:border-l-0 lg:rail:pt-0 lg:rail:pl-0"), children: children }) })] }));
-}
-function TitledNavGroup({ label, children }) {
-    const id = useId();
-    return (_jsxs("li", { "data-slot": "sidebar-nav-group", className: "pt-4 first:pt-0", children: [_jsx("p", { id: id, className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground lg:text-shell-muted lg:rail:sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-auto mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsx("ul", { "aria-labelledby": id, className: "grid gap-0.5", children: children })] }));
-}
-const COMMON_LINKS = [
-    { key: "documentation", label: "Documentation", icon: BookOpen01Icon },
-    { key: "settings", label: "Réglages", icon: Settings01Icon },
-    { key: "status", label: "État du service", icon: Activity01Icon },
-];
-function ShellCommonLinks({ links, statusPageUrl, otherView, }) {
-    const resolved = {
-        documentation: links.documentation,
-        settings: links.settings,
-        status: links.status === false ? undefined : (links.status ?? statusPageUrl ?? undefined),
-    };
-    const items = COMMON_LINKS.flatMap(({ key, label, icon }) => {
-        const link = resolved[key];
-        if (link === undefined)
-            return [];
-        const props = typeof link === "string" ? { href: link } : link;
-        return [
-            _jsx(SidebarNavItem, { icon: icon, label: label, ...(props.href !== undefined ? { href: props.href } : {}), ...(props.render !== undefined ? { render: props.render } : {}), ...(props.active !== undefined ? { active: props.active } : {}) }, key),
-        ];
-    });
-    if (!items.length)
-        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] }) }));
-}
-/**
- * « 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.
- */
-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 }) }));
-}
-/** Largeur à partir de laquelle la page et l'assistant tiennent côte à côte (`xl`). */
-const ASSISTANT_SIDE_BY_SIDE = "(min-width: 80rem)";
-const FOCUSABLE = 'textarea, input, [contenteditable="true"], [autofocus]';
-function AssistantButton({ assistant, panelId, buttonRef, }) {
-    const label = assistant.label ?? "Assistant";
-    const letter = assistant.shortcut?.toUpperCase();
-    return (_jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx("button", { ref: buttonRef, type: "button", "data-slot": "app-shell-assistant-button", "aria-expanded": assistant.open, "aria-controls": panelId, ...(letter ? { "aria-keyshortcuts": `Control+${letter} Meta+${letter}` } : {}), onClick: () => assistant.onOpenChange(!assistant.open), className: cn("touch-target flex h-9 shrink-0 items-center gap-2 rounded-xl px-3 text-sm font-medium text-muted-foreground outline-none", "transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/[0.05] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "aria-expanded:bg-foreground/[0.08] aria-expanded:text-foreground", "max-lg:w-9 max-lg:justify-center max-lg:px-0") }), children: [_jsx(HugeiconsIcon, { icon: AiMagicIcon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem] shrink-0" }), _jsx("span", { className: "max-lg:sr-only", children: label })] }), _jsx(TooltipContent, { children: _jsxs("span", { className: "flex items-center gap-2", children: [assistant.open ? `Fermer ${label.toLocaleLowerCase("fr-CH")}` : label, letter ? (_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: isApplePlatform() ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: letter })] })) : null] }) })] }));
-}
-/** `Ctrl` (`⌘`) + la lettre de l'assistant : l'ouvre ou le ferme, où que soit le focus. */
-function useAssistantShortcut(assistant) {
-    const latest = useRef(assistant);
-    useEffect(() => {
-        latest.current = assistant;
-    });
-    const letter = assistant?.shortcut?.toLowerCase();
-    useEffect(() => {
-        if (!letter)
-            return undefined;
-        const onKey = (event) => {
-            if (event.key.toLowerCase() !== letter || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey)
-                return;
-            const current = latest.current;
-            if (!current)
-                return;
-            event.preventDefault();
-            current.onOpenChange(!current.open);
-        };
-        document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
-    }, [letter]);
-}
-function AssistantPanel({ assistant, panelId, wide, openAtShellMount, buttonRef, }) {
-    const { open, onOpenChange } = assistant;
-    const label = assistant.label ?? "Assistant";
-    const titleId = useId();
-    const panelRef = useRef(null);
-    // Ouvert dès le premier rendu de la coque (état restauré) : le focus reste où le navigateur le met.
-    const wasOpen = useRef(openAtShellMount);
-    // Ouvert : le focus entre dans le panneau (sa saisie, sinon le panneau). Fermé : il revient au
-    // bouton, s'il était dans le panneau ou perdu sur la page.
-    useEffect(() => {
-        const panel = panelRef.current;
-        if (open && !wasOpen.current && panel && !panel.contains(document.activeElement)) {
-            const target = panel.querySelector(FOCUSABLE) ?? panel;
-            target.focus({ preventScroll: true });
-        }
-        if (!open && wasOpen.current) {
-            const active = document.activeElement;
-            if (!active || active === document.body || panel?.contains(active))
-                buttonRef.current?.focus();
-        }
-        wasOpen.current = open;
-    }, [open, buttonRef]);
-    // Échap, le focus dans le panneau : il se ferme (sauf si un élément du panneau l'a déjà traité).
-    useEffect(() => {
-        const panel = panelRef.current;
-        if (!open || !panel)
-            return undefined;
-        const onKey = (event) => {
-            if (event.key !== "Escape" || event.defaultPrevented)
-                return;
-            event.preventDefault();
-            onOpenChange(false);
-        };
-        panel.addEventListener("keydown", onKey);
-        return () => panel.removeEventListener("keydown", onKey);
-    }, [open, onOpenChange]);
-    const close = () => onOpenChange(false);
-    return (_jsx("section", { ref: panelRef, id: panelId, tabIndex: -1, "data-slot": "app-shell-assistant", "data-open": open ? "" : undefined, "aria-labelledby": titleId, inert: !open || undefined, ...(open && !wide ? { role: "dialog", "aria-modal": true } : {}), className: cn("outline-none", 
-        // Vue dédiée, sous 1280 px : plein écran, la page reste montée dessous.
-        "hidden data-open:max-xl:fixed data-open:max-xl:inset-0 data-open:max-xl:z-40 data-open:max-xl:flex data-open:max-xl:flex-col data-open:max-xl:bg-background", "data-open:max-xl:pt-[env(safe-area-inset-top,0px)] data-open:max-xl:soft-in motion-reduce:animate-none", 
-        // Côte à côte : une colonne de la grille, qui s'ouvre en largeur ; la page se réorganise.
-        "xl:invisible xl:flex xl:w-0 xl:flex-col xl:overflow-hidden xl:transition-[width,visibility] xl:duration-(--duration-slow) xl:ease-ios motion-reduce:transition-none", "xl:data-open:visible xl:data-open:w-[26rem] 2xl:data-open:w-[28rem]"), children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col xl:w-[26rem] xl:py-2 xl:pr-2 2xl:w-[28rem]", children: [_jsxs("div", { className: "flex min-h-14 shrink-0 items-center gap-1 border-b border-foreground/5 px-2 sm:px-4 xl:border-0 xl:pr-1 xl:pl-3", children: [_jsxs("button", { type: "button", onClick: close, className: "touch-target flex h-9 shrink-0 items-center gap-1.5 rounded-xl pr-3 pl-2 text-sm font-medium text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 xl:hidden", children: [_jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4" }), "Retour \u00E0 la page"] }), _jsxs("h2", { id: titleId, className: "flex min-w-0 flex-1 items-center gap-2 truncate font-heading text-[0.9375rem] font-semibold max-xl:justify-end max-xl:pr-2", children: [_jsx(HugeiconsIcon, { icon: AiMagicIcon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem] shrink-0" }), label] }), _jsx("button", { type: "button", onClick: close, "aria-label": `Fermer ${label.toLocaleLowerCase("fr-CH")}`, className: "touch-target grid size-9 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-shell-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 max-xl:hidden", children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) })] }), _jsx("div", { "data-slot": "app-shell-assistant-body", className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: assistant.panel })] }) }));
-}
-// ── Coque ─────────────────────────────────────────────────────────────────────────────
-// Les noms de Hugeicons disent l'état du panneau, pas le geste : « Open » dessine la flèche vers la
-// gauche (réduire), « Close » vers la droite (déplier).
-const COLLAPSE_ICON = PanelLeftOpenIcon;
-const EXPAND_ICON = PanelLeftCloseIcon;
-/** Même boîte qu'une entrée de la barre en rail : 40 × 36 px, icône de 18 px centrée. */
-const TOGGLE = "touch-target relative grid h-9 w-10 shrink-0 place-items-center rounded-xl text-shell-muted outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-shell-hover hover:text-shell-foreground focus-visible:ring-2 focus-visible:ring-ring/50";
-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.
- * 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.
- */
-function SidebarHead({ product }) {
-    return (_jsxs("div", { className: SIDEBAR_HEAD, children: [_jsxs("div", { "data-slot": "sidebar-brand", className: cn(SIDEBAR_BRAND, "rail:hidden"), children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: SIDEBAR_BRAND_NAME, children: familyProductName(product) })] }), _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: [_jsxs(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, "group/toggle hidden rail:grid") }), children: [_jsx(ProductBadge, { product: product, className: "col-start-1 row-start-1 size-6 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-0 group-focus-visible/toggle:opacity-0 motion-reduce:transition-none" }), _jsx(HugeiconsIcon, { icon: EXPAND_ICON, strokeWidth: 1.8, "aria-hidden": true, className: "col-start-1 row-start-1 size-[1.125rem] opacity-0 transition-opacity duration-(--duration-fast) ease-out group-hover/sidebar:opacity-100 group-focus-visible/toggle:opacity-100 motion-reduce:transition-none" })] }), _jsx(TooltipContent, { side: "right", children: _jsx(ShortcutHint, { label: "D\u00E9plier" }) })] })] }));
-}
+export { sidebarInitScript, toggleSidebar, useSidebarRail } from "./sidebar-rail.js";
+export { PRODUCT_LEAVE_DELAY_MS } from "./use-product-leave.js";
+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
@@ -385,51 +39,6 @@ function SidebarHead({ product }) {
  * Le kit ne connaît ni le routeur ni l'authentification : le produit passe ses éléments
  * (`OrgSwitcher`, `SidebarNav`, `AccountMenu`) et ses liens.
  */
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-/** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
-function useHydrated() {
-    const [hydrated, setHydrated] = useState(false);
-    useIsomorphicLayoutEffect(() => setHydrated(true), []);
-    return hydrated;
-}
-/**
- * Le chargement de la zone de contenu : `navigating` après 50 ms, `pending` aussitôt, puis au
- * moins 300 ms. Effets de mise en page : une page qui passe en attente est couverte avant d'être
- * peinte, jamais une image vide entre les deux.
- */
-function useContentLoading({ navigating, pending }) {
-    const [navigatingLong, setNavigatingLong] = useState(false);
-    useEffect(() => {
-        if (!navigating)
-            return undefined;
-        const timer = window.setTimeout(() => setNavigatingLong(true), PAGE_PENDING_MS);
-        return () => {
-            window.clearTimeout(timer);
-            setNavigatingLong(false);
-        };
-    }, [navigating]);
-    const active = pending || (navigating && navigatingLong);
-    const [visible, setVisible] = useState(false);
-    const shownAt = useRef(0);
-    useIsomorphicLayoutEffect(() => {
-        if (active && !visible) {
-            shownAt.current = performance.now();
-            setVisible(true);
-            return undefined;
-        }
-        if (!active && visible) {
-            const timer = window.setTimeout(() => setVisible(false), Math.max(0, shownAt.current + PAGE_PENDING_MIN_MS - performance.now()));
-            return () => window.clearTimeout(timer);
-        }
-        return undefined;
-    }, [active, visible]);
-    return visible;
-}
-/**
- * Délai entre le clic vers un autre produit et le H : une page prérendue s'affiche avant (une ou
- * deux images), le H n'apparaît alors jamais ; une page à charger le montre aussitôt après.
- */
-export const PRODUCT_LEAVE_DELAY_MS = 100;
 export function AppShell({ product, organization, productRail: productRailOption, view: viewOption, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating = false, mainClassName, statusPage, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     const preference = useProductBarPreference();
@@ -445,34 +54,12 @@ export function AppShell({ product, organization, productRail: productRailOption
     // qui attend (`PagePending`, aussitôt : le routeur a déjà attendu), ou le départ vers un autre
     // produit (aussitôt). Une fois montré, au moins 300 ms. Le H est celui du document, en position
     // fixe : il ne bouge pas d'un état à l'autre et n'est jamais démonté.
-    const [leaving, setLeaving] = useState(false);
     const [pagePending, setPagePending] = useState(0);
     const registerPagePending = useCallback(() => {
         setPagePending((count) => count + 1);
         return () => setPagePending((count) => count - 1);
     }, []);
-    // Après `PRODUCT_LEAVE_DELAY_MS` seulement : une page prérendue au survol s'affiche avant, sans
-    // que le H apparaisse (ADR 0020). Sinon le H couvre le contenu jusqu'au départ de la page.
-    const leaveTimer = useRef(undefined);
-    const leave = useCallback(() => {
-        window.clearTimeout(leaveTimer.current);
-        leaveTimer.current = window.setTimeout(() => setLeaving(true), PRODUCT_LEAVE_DELAY_MS);
-    }, []);
-    useEffect(() => {
-        // Retour arrière depuis l'autre produit (cache de page) : la page revient telle quelle.
-        const onPageShow = (event) => {
-            if (!event.persisted)
-                return;
-            window.clearTimeout(leaveTimer.current);
-            setLeaving(false);
-            delete document.documentElement.dataset.hgdcSwitching;
-        };
-        window.addEventListener("pageshow", onPageShow);
-        return () => {
-            window.removeEventListener("pageshow", onPageShow);
-            window.clearTimeout(leaveTimer.current);
-        };
-    }, []);
+    const { leaving, leave } = useProductLeave();
     const statusPageUrl = statusPage === false ? null : (statusPage ?? statusPageUrlFor(product));
     const loading = useContentLoading({ navigating, pending: pagePending > 0 || leaving });
     // Avant l'hydratation, le CSS montre le calque et le H dès qu'une page attend (`:has`) ; ensuite