@hgdc/ui 0.63.1 → 0.64.0

package/styles.css

@@ -19,11 +19,8 @@
 
 @custom-variant dark (&:is(.dark *));
 /* Barre latérale réduite en rail : `data-sidebar="rail"` sur <html>, posé avant la première
-   peinture par `sidebarInitScript` (`@hgdc/ui/app-shell`), ou `data-rail-peek` sur la coque le
-   temps que la barre des produits est élargie (ADR 0011). */
-@custom-variant rail (&:where([data-sidebar="rail"] *, [data-rail-peek] *));
-/* Pliée par la personne seulement (pas le temps du survol de la barre des produits). */
-@custom-variant folded (&:where([data-sidebar="rail"] *));
+   peinture par `sidebarInitScript` (`@hgdc/ui/app-shell`). */
+@custom-variant rail (&:where([data-sidebar="rail"] *));
 /* Écran tactile, quelle que soit la largeur : `coarse:min-h-11` rend ses 44 px à une entrée que
    `lg:` avait resserrée pour la souris. Déclarée après les points de rupture, elle les emporte. */
 @custom-variant coarse (@media (pointer: coarse));
@@ -772,10 +769,9 @@
 
 /* Scène du chargement (ADR 0015) : la zone de contenu de la coque, calculée depuis l'écran, pour
    que le H soit au même pixel dans la coque, avant elle (rendu serveur, page d'entrée) et d'un
-   produit à l'autre. Téléphone : sous l'en-tête de 56 px. Ordinateur : barre des produits (56 px),
-   barre latérale (256 px, 64 en rail), marge de 8 px, en-tête de 56 px. */
+   produit à l'autre. Téléphone : sous l'en-tête de 56 px. Ordinateur : barre latérale
+   (256 px, 64 en rail), marge de 8 px, en-tête de 56 px. */
 :root {
-  --hgdc-rail-w: 0px;
   --hgdc-content-left: 0px;
   --hgdc-stage-top: calc(env(safe-area-inset-top, 0px) + 3.5rem);
   --hgdc-stage-right: 0px;
@@ -784,9 +780,8 @@
 }
 @media (width >= 64rem) {
   :root {
-    --hgdc-rail-w: 3.5rem;
     --hgdc-sidebar-w: 16rem;
-    --hgdc-content-left: calc(var(--hgdc-rail-w) + var(--hgdc-sidebar-w));
+    --hgdc-content-left: var(--hgdc-sidebar-w);
     --hgdc-stage-top: 4rem;
     --hgdc-stage-right: 0.5rem;
     --hgdc-stage-bottom: 0.5rem;
@@ -795,9 +790,6 @@
   :root[data-sidebar="rail"] {
     --hgdc-sidebar-w: 4rem;
   }
-  :root:has([data-slot="app-shell"]:not([data-product-rail])) {
-    --hgdc-rail-w: 0px;
-  }
 }
 
 /* Le chargeur du document (`FamilyLoaderRoot`) : un seul H par page, en position fixe sur la scène.
@@ -844,21 +836,17 @@
 :root:not(:has([data-slot="app-shell"])) [data-slot="family-loader-root"] > [data-frame] {
   display: block;
 }
-/* Sur ordinateur, le cadre est la coque elle-même (`ShellFrame`) : barre des produits complète,
-   marque du produit, navigation en squelette, carte du contenu (ADR 0020). */
+/* Sur ordinateur, le cadre est la coque elle-même (`ShellFrame`) : organisation retenue,
+   nom du module, navigation en squelette, carte du contenu (ADR 0020). */
 @media (width >= 64rem) {
   [data-slot="family-loader-root"] > [data-frame] {
     background: var(--shell);
   }
 }
-/* La marque du produit de l'adresse (`<html data-hgdc-product>`, `sidebarInitScript`), seule ; le
-   produit courant marqué dans la barre, comme `aria-current` dans la coque. */
+/* Le nom du module de l'adresse (`<html data-hgdc-product>`, `sidebarInitScript`), seul. */
 [data-slot="shell-frame"] [data-product] {
   display: none;
 }
-[data-slot="shell-frame-rail"] [data-product] {
-  display: flex;
-}
 :root[data-hgdc-product="account"] [data-slot="shell-frame"] [data-product="account"],
 :root[data-hgdc-product="host"] [data-slot="shell-frame"] [data-product="host"],
 :root[data-hgdc-product="mail"] [data-slot="shell-frame"] [data-product="mail"],
@@ -871,20 +859,6 @@
 :root[data-hgdc-product="manager"] [data-slot="shell-frame"] [data-product="manager"] {
   display: contents;
 }
-:root[data-hgdc-product="account"] [data-slot="shell-frame-rail"] [data-product="account"],
-:root[data-hgdc-product="host"] [data-slot="shell-frame-rail"] [data-product="host"],
-:root[data-hgdc-product="mail"] [data-slot="shell-frame-rail"] [data-product="mail"],
-:root[data-hgdc-product="portal"] [data-slot="shell-frame-rail"] [data-product="portal"],
-:root[data-hgdc-product="status"] [data-slot="shell-frame-rail"] [data-product="status"],
-:root[data-hgdc-product="analytics"] [data-slot="shell-frame-rail"] [data-product="analytics"],
-:root[data-hgdc-product="docs"] [data-slot="shell-frame-rail"] [data-product="docs"],
-:root[data-hgdc-product="iassistant"] [data-slot="shell-frame-rail"] [data-product="iassistant"],
-:root[data-hgdc-product="id"] [data-slot="shell-frame-rail"] [data-product="id"],
-:root[data-hgdc-product="manager"] [data-slot="shell-frame-rail"] [data-product="manager"] {
-  display: flex;
-  background: var(--shell-active);
-  color: var(--shell-foreground);
-}
 /* Navigation en squelette, à la hauteur retenue pour ce produit (`--hgdc-nav-height`). */
 [data-slot="shell-frame-nav"] {
   max-height: var(--hgdc-nav-height, 7.5rem);
@@ -922,7 +896,7 @@
 }
 
 /* Passage d'un produit à l'autre sous la même origine (`app.hgdc.ch/<produit>`, ADR 0020) : une
-   transition de vue entre documents. La barre des produits, la barre latérale et la barre du haut
+   transition de vue entre documents. La barre latérale et la barre du haut
    gardent leur place (même nom des deux côtés : elles ne bougent pas, leur contenu passe en
    fondu) ; le reste de la page passe en fondu court. Le navigateur garde l'ancienne page à l'écran
    jusqu'à ce que la nouvelle soit prête : pas de page blanche. Chrome, Edge et Safari 18.2+ ;
@@ -934,9 +908,6 @@
     navigation: auto;
   }
 }
-[data-slot="product-rail"] {
-  view-transition-name: hgdc-product-rail;
-}
 [data-slot="app-shell-sidebar"] {
   view-transition-name: hgdc-sidebar;
 }
@@ -946,9 +917,6 @@
 /* Le cadre du chargeur (hors de la coque) et le H lui-même portent les mêmes noms, seulement quand
    ils sont à l'écran : mêmes conditions que l'affichage du chargeur, plus haut. */
 :root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])) {
-  & [data-slot="shell-frame-rail"] {
-    view-transition-name: hgdc-product-rail;
-  }
   & [data-slot="shell-frame-sidebar"] {
     view-transition-name: hgdc-sidebar;
   }
@@ -963,12 +931,6 @@
     view-transition-name: hgdc-loader;
   }
 }
-/* Un clic dans la barre des produits : la barre se replie et la barre latérale revient d'un coup,
-   pour que l'image de départ soit déjà celle de l'arrivée (`ProductRail`). */
-:root[data-hgdc-switching] [data-slot="product-rail"],
-:root[data-hgdc-switching] [data-slot="app-shell-sidebar"] {
-  transition: none;
-}
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation-duration: var(--duration-fast);
@@ -985,27 +947,21 @@
   animation-duration: var(--duration-base);
   animation-timing-function: var(--ease-ios);
 }
-/* Barre des produits et H : identiques des deux côtés (la barre ne change que d'indicateur, le H
-   est à la même phase, calé sur l'horloge). Ni fondu ni mouvement : l'ancienne image est masquée,
-   la nouvelle, vivante, s'affiche telle quelle. Présents d'un seul côté (une page sans coque,
-   une page prête sans H), ils apparaissent ou s'effacent en fondu court. */
-::view-transition-group(hgdc-product-rail),
+/* Le H : identique des deux côtés, à la même phase, calé sur l'horloge. Ni fondu ni mouvement :
+   l'ancienne image est masquée, la nouvelle, vivante, s'affiche telle quelle. Présent d'un seul côté
+   (une page prête sans H), il apparaît ou s'efface en fondu court. */
 ::view-transition-group(hgdc-loader),
-::view-transition-new(hgdc-product-rail),
 ::view-transition-new(hgdc-loader) {
   animation: none;
 }
-::view-transition-old(hgdc-product-rail),
 ::view-transition-old(hgdc-loader) {
   animation: none;
   opacity: 0;
 }
-::view-transition-old(hgdc-product-rail):only-child,
 ::view-transition-old(hgdc-loader):only-child {
   opacity: 1;
   animation: hgdc-view-out var(--duration-fast) var(--ease-out) both;
 }
-::view-transition-new(hgdc-product-rail):only-child,
 ::view-transition-new(hgdc-loader):only-child {
   animation: hgdc-view-in var(--duration-fast) var(--ease-out) both;
 }

package/dist/product-rail.d.ts

@@ -1,41 +0,0 @@
-import { type ReactNode } from "react";
-import { type HgdcCatalogProduct } from "./products.ts";
-/** Délai d'intention avant d'élargir la barre au survol : un passage de souris ne l'ouvre pas. */
-export declare const PRODUCT_RAIL_OPEN_DELAY = 150;
-/**
- * La place de l'organisation tant que le produit ne l'a pas (ses données arrivent) : la marque de
- * la dernière organisation affichée sous cette origine, au pixel près de celle d'`OrgSwitcher`
- * (initiales ou logo, posés sur `<html>` par `sidebarInitScript` avant la première peinture),
- * sinon un carré de squelette de la même taille. Rien ne bouge quand la vraie arrive.
- */
-export declare function OrgPlaceholder(): React.JSX.Element;
-/**
- * La barre des produits du cadre de chargement (`FamilyLoaderRoot`, hors de la coque) : la même
- * colonne que `ProductRail` repliée, `OrgPlaceholder` en haut, les mêmes pastilles, sans liens. Le
- * produit courant est marqué par le CSS (`<html data-hgdc-product>`, posé par
- * `sidebarInitScript`) : au rendu serveur, le kit ne connaît pas l'adresse.
- */
-export declare function ProductRailFrame(): React.JSX.Element;
-/**
- * La barre des produits de la famille, tout à gauche de la coque sur ordinateur : organisation en
- * haut, Account, puis les pastilles des produits. 56 px de large ; au survol (après un court délai
- * d'intention) ou au focus clavier, elle s'élargit et écrit le nom de chaque produit. Elle ne
- * recouvre jamais la page : `AppShell` plie la barre latérale du produit le temps du survol, la
- * barre prend exactement la place libérée (248 px) ; si la barre latérale est déjà pliée, elle
- * pousse la page (220 px). Un menu ouvert depuis la barre (sélecteur d'organisation) la garde
- * élargie ; tout revient quand la souris est sortie et que le menu est fermé.
- */
-export declare function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }: {
-    /** Le mot du produit affiché (« host ») : marqué en teinte. */
-    current?: string | undefined;
-    /**
-     * `OrgSwitcher`, rendu compact. Absent (`undefined` : les données du produit arrivent), sa
-     * place est tenue par `OrgPlaceholder`. `null` : pas d'organisation, rien en haut.
-     */
-    organization?: ReactNode;
-    /** Adresse d'Account (un Account local en développement). */
-    accountHref?: string | undefined;
-    catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
-    /** Prévenu à chaque ouverture et fermeture : `AppShell` y plie sa barre latérale. */
-    onExpandedChange?: ((expanded: boolean) => void) | undefined;
-}): React.JSX.Element;

package/dist/product-rail.js

@@ -1,183 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { ProductBadge } from "./product-badge.js";
-import { PRODUCT_PRERENDER_ATTRIBUTE } from "./product-switch.js";
-import { productRailEntries } from "./products.js";
-import { markProductSwitch, takeProductSwitch } from "./shell-memory.js";
-import { ShellPlacementContext, useLeaveOnClick } from "./shell-placement.js";
-import { cn } from "./cn.js";
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-const noSubscription = () => () => { };
-/** `location.origin` après l'hydratation, `undefined` au rendu serveur (liens absolus d'abord). */
-function usePageOrigin() {
-    return useSyncExternalStore(noSubscription, () => window.location.origin, () => undefined);
-}
-/** Délai d'intention avant d'élargir la barre au survol : un passage de souris ne l'ouvre pas. */
-export const PRODUCT_RAIL_OPEN_DELAY = 150;
-/** Boîte d'une entrée de la barre : la même pour un lien et pour sa place dans le cadre de chargement. */
-const PRODUCT_ITEM = "flex h-10 items-center gap-3 rounded-xl px-2 text-shell-muted coarse:h-11";
-/** Colonne de la barre (56 px) et son contenu : les mêmes pour la barre et pour le cadre de chargement. */
-const RAIL_COLUMN = "hidden w-14 shrink-0 overflow-hidden lg:block";
-const RAIL_INNER = "group/rail flex h-full w-full flex-col gap-2 overflow-hidden bg-shell-rail px-2 py-3 text-shell-foreground";
-const RAIL_LIST = "grid min-h-0 gap-1 overflow-x-hidden overflow-y-auto";
-function ProductLabel({ entry }) {
-    return (_jsxs(_Fragment, { children: [_jsx(ProductBadge, { product: entry.badge, className: "size-6" }), _jsxs("span", { className: "min-w-0 flex-1 truncate opacity-0 transition-opacity duration-(--duration-fast) ease-out group-data-expanded/rail:opacity-100 motion-reduce:transition-none", children: [_jsx("span", { className: "font-heading text-sm font-medium", children: entry.name }), entry.hint ? _jsx("span", { className: "sr-only", children: ", " }) : null, entry.hint ? _jsx("span", { className: "ml-1.5 text-xs text-shell-muted", children: entry.hint }) : null] })] }));
-}
-function ProductLink({ entry }) {
-    // Chaque produit s'ouvre en document complet : la coque montre le H dès le clic.
-    const leaveOnClick = useLeaveOnClick();
-    return (_jsx("li", { children: _jsx("a", { href: entry.href, onClick: leaveOnClick, ...(entry.sameOrigin ? { [PRODUCT_PRERENDER_ATTRIBUTE]: "" } : {}), "aria-current": entry.current ? "page" : undefined, className: cn(PRODUCT_ITEM, "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", "aria-[current=page]:bg-shell-active aria-[current=page]:text-shell-foreground"), children: _jsx(ProductLabel, { entry: entry }) }) }));
-}
-/**
- * La place de l'organisation tant que le produit ne l'a pas (ses données arrivent) : la marque de
- * la dernière organisation affichée sous cette origine, au pixel près de celle d'`OrgSwitcher`
- * (initiales ou logo, posés sur `<html>` par `sidebarInitScript` avant la première peinture),
- * sinon un carré de squelette de la même taille. Rien ne bouge quand la vraie arrive.
- */
-export function OrgPlaceholder() {
-    return (_jsx("div", { "data-slot": "org-placeholder", "aria-hidden": true, className: "flex h-10 w-full shrink-0 items-center px-1 coarse:h-11", children: _jsx("span", { "data-slot": "org-placeholder-mark", className: "grid size-8 shrink-0 place-items-center rounded-lg text-xs font-semibold uppercase" }) }));
-}
-function RailDivider() {
-    return _jsx("div", { "aria-hidden": true, className: "mx-2 h-px shrink-0 bg-foreground/8" });
-}
-/**
- * La barre des produits du cadre de chargement (`FamilyLoaderRoot`, hors de la coque) : la même
- * colonne que `ProductRail` repliée, `OrgPlaceholder` en haut, les mêmes pastilles, sans liens. Le
- * produit courant est marqué par le CSS (`<html data-hgdc-product>`, posé par
- * `sidebarInitScript`) : au rendu serveur, le kit ne connaît pas l'adresse.
- */
-export function ProductRailFrame() {
-    const { products, account } = productRailEntries();
-    return (_jsx("div", { "data-slot": "shell-frame-rail", className: RAIL_COLUMN, children: _jsxs("div", { className: RAIL_INNER, children: [_jsx(OrgPlaceholder, {}), _jsx(RailDivider, {}), _jsx("ul", { className: RAIL_LIST, children: [account, ...products].map((entry) => (_jsx("li", { children: _jsx("span", { "data-product": entry.badge, className: PRODUCT_ITEM, children: _jsx(ProductLabel, { entry: entry }) }) }, entry.badge))) })] }) }));
-}
-/**
- * La barre des produits de la famille, tout à gauche de la coque sur ordinateur : organisation en
- * haut, Account, puis les pastilles des produits. 56 px de large ; au survol (après un court délai
- * d'intention) ou au focus clavier, elle s'élargit et écrit le nom de chaque produit. Elle ne
- * recouvre jamais la page : `AppShell` plie la barre latérale du produit le temps du survol, la
- * barre prend exactement la place libérée (248 px) ; si la barre latérale est déjà pliée, elle
- * pousse la page (220 px). Un menu ouvert depuis la barre (sélecteur d'organisation) la garde
- * élargie ; tout revient quand la souris est sortie et que le menu est fermé.
- */
-export function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }) {
-    // Trois raisons de rester élargie : le survol (après le délai d'intention), le focus clavier, et
-    // un menu ouvert depuis la barre (sélecteur d'organisation ou tout autre) : la souris qui quitte
-    // la barre pour aller dans le menu ne doit pas la replier sous elle.
-    const [hovered, setHovered] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const expanded = hovered || focused || menuOpen;
-    // Avant la peinture : la barre latérale se plie dans la même image que la barre s'élargit, les
-    // deux transitions partent ensemble et la page ne bouge pas.
-    useIsomorphicLayoutEffect(() => {
-        onExpandedChange?.(expanded);
-    }, [expanded, onExpandedChange]);
-    const ref = useRef(null);
-    const pageOrigin = usePageOrigin();
-    const { products, account } = productRailEntries({ current, accountHref, catalog, pageOrigin });
-    // Écouteurs natifs : la barre est un repère `nav`, pas un contrôle ; c'est son survol, le focus
-    // de ses liens et les menus qu'elle ouvre qui l'élargissent.
-    useEffect(() => {
-        const rail = ref.current;
-        if (!rail)
-            return;
-        let timer;
-        // Arrivée depuis la barre d'un autre produit, la souris restée dessus : la barre ne s'élargit
-        // pas sous elle, il faut d'abord en sortir (ADR 0020).
-        let arrivedUnderPointer = takeProductSwitch();
-        const cancel = () => {
-            window.clearTimeout(timer);
-            timer = undefined;
-        };
-        const onEnter = (event) => {
-            if (event.pointerType !== "mouse" || arrivedUnderPointer)
-                return;
-            cancel();
-            timer = window.setTimeout(() => setHovered(true), PRODUCT_RAIL_OPEN_DELAY);
-        };
-        const onLeave = () => {
-            arrivedUnderPointer = false;
-            cancel();
-            setHovered(false);
-        };
-        // Au clavier seulement : un clic de souris ne laisse pas la barre ouverte, ni le focus rendu au
-        // déclencheur quand un menu ouvert à la souris se ferme. La dernière interaction fait foi.
-        let keyboard = false;
-        const onDocKey = () => {
-            keyboard = true;
-        };
-        const onDocPointer = () => {
-            keyboard = false;
-        };
-        const onFocusIn = (event) => {
-            if (keyboard && event.target && focusVisible(event.target))
-                setFocused(true);
-        };
-        const onFocusOut = (event) => {
-            if (!(event.relatedTarget instanceof Node) || !rail.contains(event.relatedTarget))
-                setFocused(false);
-        };
-        // Un produit choisi : la barre se replie comme un menu qui se ferme, pendant que l'autre produit
-        // s'ouvre. La page d'arrivée la montre repliée : rien ne bouge au passage (ADR 0020).
-        const onClick = (event) => {
-            if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
-                return;
-            if (!(event.target instanceof Element) || !event.target.closest("a[href]"))
-                return;
-            // Repliée d'un coup, sans transition (`data-hgdc-switching`) : l'image de départ de la
-            // transition de vue montre déjà la barre telle que la page d'arrivée la peint.
-            document.documentElement.dataset.hgdcSwitching = "";
-            markProductSwitch();
-            cancel();
-            setHovered(false);
-            setFocused(false);
-        };
-        const onKey = (event) => {
-            if (event.key !== "Escape")
-                return;
-            cancel();
-            setHovered(false);
-            setFocused(false);
-        };
-        // Un menu ouvert depuis la barre : son déclencheur porte `aria-expanded="true"` (Base UI, Radix,
-        // natif). Le menu lui-même vit dans un portail, hors de la barre : on suit donc le déclencheur.
-        const syncMenu = () => setMenuOpen(rail.querySelector('[aria-expanded="true"]') !== null);
-        const observer = new MutationObserver(syncMenu);
-        observer.observe(rail, { subtree: true, attributes: true, attributeFilter: ["aria-expanded"], childList: true });
-        syncMenu();
-        document.addEventListener("keydown", onDocKey, true);
-        document.addEventListener("pointerdown", onDocPointer, true);
-        rail.addEventListener("pointerenter", onEnter);
-        rail.addEventListener("pointerleave", onLeave);
-        rail.addEventListener("focusin", onFocusIn);
-        rail.addEventListener("focusout", onFocusOut);
-        rail.addEventListener("keydown", onKey);
-        rail.addEventListener("click", onClick);
-        return () => {
-            cancel();
-            observer.disconnect();
-            document.removeEventListener("keydown", onDocKey, true);
-            document.removeEventListener("pointerdown", onDocPointer, true);
-            rail.removeEventListener("pointerenter", onEnter);
-            rail.removeEventListener("pointerleave", onLeave);
-            rail.removeEventListener("focusin", onFocusIn);
-            rail.removeEventListener("focusout", onFocusOut);
-            rail.removeEventListener("keydown", onKey);
-            rail.removeEventListener("click", onClick);
-        };
-    }, []);
-    return (_jsx("div", { "data-slot": "product-rail", "data-expanded": expanded ? "" : undefined, className: cn(RAIL_COLUMN, 
-        // Même durée et même courbe que la barre latérale qui se plie : la somme des deux largeurs
-        // reste constante (56 + 256 = 248 + 64), la page ne bouge pas.
-        "transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none", "data-expanded:w-62 folded:data-expanded:w-55"), children: _jsxs("nav", { ref: ref, "aria-label": "Produits", "data-expanded": expanded ? "" : undefined, className: RAIL_INNER, children: [organization === undefined ? (_jsxs(_Fragment, { children: [_jsx(OrgPlaceholder, {}), _jsx(RailDivider, {})] })) : organization ? (_jsxs(_Fragment, { children: [_jsx(ShellPlacementContext, { value: "product-rail", children: organization }), _jsx(RailDivider, {})] })) : null, _jsxs("ul", { className: RAIL_LIST, children: [_jsx(ProductLink, { entry: account }), products.map((entry) => (_jsx(ProductLink, { entry: entry }, entry.badge)))] })] }) }));
-}
-function focusVisible(target) {
-    if (!(target instanceof Element))
-        return false;
-    try {
-        return target.matches(":focus-visible");
-    }
-    catch {
-        return true;
-    }
-}