@hgdc/ui 0.47.0 → 0.47.1

package/dist/shell-assistant.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useId, useRef } from "react";
+import { cn } from "./cn.js";
+import { isApplePlatform, Kbd, KbdGroup } from "./kbd.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+/** Largeur à partir de laquelle la page et l'assistant tiennent côte à côte (`xl`). */
+export const ASSISTANT_SIDE_BY_SIDE = "(min-width: 80rem)";
+const FOCUSABLE = 'textarea, input, [contenteditable="true"], [autofocus]';
+export 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. */
+export 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]);
+}
+export 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 })] }) }));
+}

package/dist/shell-context.d.ts

@@ -0,0 +1,11 @@
+import { type Context } from "react";
+import type { FamilyProduct } from "./family-svg.ts";
+export type ShellContextValue = {
+    closeMobileNav: () => void;
+    product?: FamilyProduct;
+};
+export declare const ShellContext: Context<ShellContextValue>;
+/** Pour fermer le tiroir mobile depuis un élément de la barre (un sélecteur, un bouton). */
+export declare function useAppShell(): {
+    closeMobileNav: () => void;
+};

package/dist/shell-context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+export 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);
+}

package/dist/shell-links.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { type ProductView } from "./addresses.ts";
+import type { FamilyProduct } from "./family-svg.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`.
+ */
+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;
+};
+export declare function ShellCommonLinks({ links, statusPageUrl, otherView, }: {
+    links: AppShellLinks;
+    statusPageUrl: string | null;
+    /** Lien vers l'autre vue du produit (ADR 0014), en dernier ; il ne suffit pas à montrer la liste. */
+    otherView?: ReactNode;
+}): React.JSX.Element | null;
+/**
+ * « 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.
+ */
+export declare function OtherViewLink({ product, view, }: {
+    product: FamilyProduct;
+    view: ProductView;
+}): React.JSX.Element | null;

package/dist/shell-links.js

@@ -0,0 +1,46 @@
+import { 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 LinkSquare02Icon from "@hugeicons/core-free-icons/LinkSquare02Icon";
+import Settings01Icon from "@hugeicons/core-free-icons/Settings01Icon";
+import { soloHref } from "./addresses.js";
+import { otherViewHref, otherViewLabel } from "./products.js";
+import { SidebarNavItem } from "./sidebar-nav.js";
+const COMMON_LINKS = [
+    { key: "documentation", label: "Documentation", icon: BookOpen01Icon },
+    { key: "settings", label: "Réglages", icon: Settings01Icon },
+    { key: "status", label: "État du service", icon: Activity01Icon },
+];
+export 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.
+ */
+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 }) }));
+}

package/dist/sidebar-head.d.ts

@@ -0,0 +1,10 @@
+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.
+ * 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.
+ */
+export declare function SidebarHead({ product }: {
+    product: FamilyProduct;
+}): React.JSX.Element;

package/dist/sidebar-head.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PanelLeftCloseIcon from "@hugeicons/core-free-icons/PanelLeftCloseIcon";
+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 { ProductBadge } from "./product-badge.js";
+import { familyProductName, SIDEBAR_BRAND, SIDEBAR_BRAND_NAME, SIDEBAR_HEAD } from "./shell-frame.js";
+import { toggleSidebar } from "./sidebar-rail.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+// 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.
+ */
+export 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" }) })] })] }));
+}

package/dist/sidebar-nav-group.d.ts

@@ -0,0 +1,33 @@
+import { type IconSvgElement } from "@hugeicons/react";
+import { type ReactNode } from "react";
+/**
+ * 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.
+ *
+ * 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;

package/dist/sidebar-nav-group.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { cn } from "./cn.js";
+import { ShellContext } from "./shell-context.js";
+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 })] }));
+}

package/dist/sidebar-nav.d.ts

@@ -0,0 +1,38 @@
+import { type IconSvgElement } from "@hugeicons/react";
+import type { ReactNode } from "react";
+/**
+ * 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;

package/dist/sidebar-nav.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "./cn.js";
+import { useAppShell } from "./shell-context.js";
+import { useSidebarRail } from "./sidebar-rail.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+/**
+ * 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 })] }) }));
+}

package/dist/sidebar-rail.d.ts

@@ -0,0 +1,12 @@
+/**
+ * À 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;
+/** `Ctrl+B` (`⌘B`) réduit ou déplie la barre latérale, hors des champs de saisie. */
+export declare function useToggleShortcut(): void;

package/dist/sidebar-rail.js

@@ -0,0 +1,53 @@
+import { useEffect, useSyncExternalStore } from "react";
+import { shellBootScript } from "./shell-memory.js";
+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. */
+export 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);
+    }, []);
+}

package/dist/use-content-loading.d.ts

@@ -0,0 +1,13 @@
+import { useLayoutEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+/** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
+export declare function useHydrated(): boolean;
+/**
+ * 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.
+ */
+export declare function useContentLoading({ navigating, pending }: {
+    navigating: boolean;
+    pending: boolean;
+}): boolean;

package/dist/use-content-loading.js

@@ -0,0 +1,42 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { PAGE_PENDING_MIN_MS, PAGE_PENDING_MS } from "./page-pending.js";
+export const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
+export 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.
+ */
+export 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;
+}

package/dist/use-product-leave.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 declare const PRODUCT_LEAVE_DELAY_MS = 100;
+export declare function useProductLeave(): {
+    leaving: boolean;
+    leave: () => void;
+};