@hgdc/ui 0.66.1 → 0.67.0

package/dist/destructive-dialog.js

@@ -38,6 +38,7 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
     const view = shown.current;
     const [typed, setTyped] = useState("");
     const [pending, setPending] = useState(false);
+    const confirmButton = useRef(null);
     const ready = !pending && (view.name === undefined || matchesConfirmation(typed, view.name));
     const [wasOpen, setWasOpen] = useState(open);
     if (open !== wasOpen) {
@@ -55,6 +56,11 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
         }
         catch (error) {
             toast.error(formatError(error));
+            // Le bouton se désactive pendant l'envoi et le focus part sur `body`, hors de la boîte restée ouverte.
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    confirmButton.current?.focus();
+            });
         }
         finally {
             setPending(false);
@@ -69,5 +75,5 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
             }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: view.title }), _jsxs(DialogDescription, { render: _jsx("div", {}), className: "grid gap-1 text-[15px]", children: [_jsx("p", { children: view.question }), view.consequence ? _jsx("p", { children: view.consequence }) : null, _jsx("p", { className: "font-semibold text-destructive", children: "Impossible de revenir en arri\u00E8re." })] })] }), view.name !== undefined ? (_jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
                         event.preventDefault();
                         void confirm();
-                    }, children: [_jsxs("p", { className: "text-[15px] leading-7 text-muted-foreground", children: ["Tape ", _jsx(NameChip, { name: view.name }), " pour confirmer."] }), _jsx(Input, { "aria-label": `Tape ${view.name} pour confirmer`, autoFocus: true, autoComplete: "off", autoCapitalize: "off", spellCheck: false, value: typed, onChange: (event) => setTyped(event.target.value), placeholder: view.name, "aria-invalid": typed.length > 0 && !view.name.startsWith(typed) ? true : undefined })] })) : null, _jsxs(DialogFooter, { className: "sm:justify-start", children: [_jsxs(Button, { variant: "destructive", isLoading: pending, disabled: !ready, onClick: () => void confirm(), children: [view.confirmLabel ?? view.title, _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden bg-current/10 text-current lg:inline-flex", children: mod }), _jsx(Kbd, { "aria-hidden": true, className: "hidden bg-current/10 text-current lg:inline-flex", children: "\u21B5" })] }), _jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onOpenChange(false), children: ["Annuler", _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden lg:inline-flex", children: "\u00C9chap" })] })] })] }) }));
+                    }, children: [_jsxs("p", { className: "text-[15px] leading-7 text-muted-foreground", children: ["Tape ", _jsx(NameChip, { name: view.name }), " pour confirmer."] }), _jsx(Input, { "aria-label": `Tape ${view.name} pour confirmer`, autoFocus: true, autoComplete: "off", autoCapitalize: "off", spellCheck: false, value: typed, onChange: (event) => setTyped(event.target.value), placeholder: view.name, "aria-invalid": typed.length > 0 && !view.name.startsWith(typed) ? true : undefined })] })) : null, _jsxs(DialogFooter, { className: "sm:justify-start", children: [_jsxs(Button, { ref: confirmButton, variant: "destructive", isLoading: pending, disabled: !ready, onClick: () => void confirm(), children: [view.confirmLabel ?? view.title, _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden bg-current/10 text-current lg:inline-flex", children: mod }), _jsx(Kbd, { "aria-hidden": true, className: "hidden bg-current/10 text-current lg:inline-flex", children: "\u21B5" })] }), _jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onOpenChange(false), children: ["Annuler", _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden lg:inline-flex", children: "\u00C9chap" })] })] })] }) }));
 }

package/dist/project-switcher.js

@@ -22,6 +22,8 @@ export function ProjectMark({ project, className, }) {
     const mark = (project.mark ?? project.name.trim().charAt(0)) || "?";
     return (_jsx("span", { "aria-hidden": true, "data-slot": "project-mark", className: cn(base, "font-mono text-[10px] font-semibold text-foreground uppercase", className), children: mark }));
 }
+const startsWithVowel = (word) => /^[aeiouyàâéèêh]/i.test(word);
+const changeLabel = (noun) => `changer ${startsWithVowel(noun) ? "d'" : "de "}${noun}`;
 /** Rend une destination du menu : un lien (`href`, par `renderLink`) ou une action. */
 function SwitcherEntry({ href, onSelect, renderLink, children, }) {
     if (href !== undefined)
@@ -39,12 +41,14 @@ function SwitcherEntry({ href, onSelect, renderLink, children, }) {
  * pendant le chargement : le déclencheur montre déjà `activeName` (le segment de l'URL), le menu
  * reste utilisable pour « Tous les projets » et « Nouveau projet ».
  */
-export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun = { one: "projet", many: "projets" }, createLabel = `${noun.feminine ? "Nouvelle" : "Nouveau"} ${noun.one}`, className, }) {
+export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun = { one: "projet", many: "projets" }, createLabel = `${noun.feminine ? "Nouvelle" : startsWithVowel(noun.one) ? "Nouvel" : "Nouveau"} ${noun.one}`, className, }) {
     const capitalized = (word) => word.charAt(0).toUpperCase() + word.slice(1);
     const all = `${noun.feminine ? "Toutes" : "Tous"} les ${noun.many}`;
     const hasActive = activeId !== undefined && activeId !== null;
     const current = hasActive ? projects?.find((p) => p.id === activeId) : undefined;
     const label = hasActive ? (current?.name ?? activeName ?? "") : all;
     const canCreate = createHref !== undefined || onCreate !== undefined;
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `${capitalized(noun.one)} ${label}, changer de ${noun.one}` : `${all}, changer de ${noun.one}`, className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: all }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: capitalized(noun.many) }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": `${capitalized(noun.one)} ${noun.feminine ? "active" : "actif"}`, className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive
+                        ? `${capitalized(noun.one)} ${label}, ${changeLabel(noun.one)}`
+                        : `${all}, ${changeLabel(noun.one)}`, className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: all }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: capitalized(noun.many) }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": `${capitalized(noun.one)} ${noun.feminine ? "active" : "actif"}`, className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
 }

package/dist/settings-section.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, useRef } from "react";
 import { Button } from "./button.js";
 import { cn } from "./cn.js";
 /**
@@ -26,8 +26,9 @@ import { cn } from "./cn.js";
 export function SettingsSection({ title, description, children, footer, footerNote, tone = "default", onSave, dirty = true, saving = false, saveLabel = "Enregistrer", className, }) {
     const titleId = useId();
     const descriptionId = useId();
+    const heading = useRef(null);
     const hasFooter = Boolean(footer || footerNote || onSave);
-    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 p-5 sm:p-6", children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, className: "text-base font-semibold text-balance", children: title }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 max-w-prose text-sm text-pretty text-muted-foreground", children: description })) : null] }), children] }), hasFooter ? (_jsxs("div", { "data-slot": "settings-section-footer", className: "flex flex-wrap items-center justify-end gap-3 border-t border-border bg-muted/40 px-5 py-3 sm:px-6", children: [footerNote ? _jsx("p", { className: "mr-auto text-sm text-muted-foreground", children: footerNote }) : null, footer, onSave ? (_jsx(Button, { type: "submit", size: "sm", disabled: !dirty, isLoading: saving, children: saveLabel })) : null] })) : null] }));
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 p-5 sm:p-6", children: [_jsxs("div", { children: [_jsx("h2", { ref: heading, id: titleId, tabIndex: -1, className: "text-base font-semibold text-balance outline-none", children: title }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 max-w-prose text-sm text-pretty text-muted-foreground", children: description })) : null] }), children] }), hasFooter ? (_jsxs("div", { "data-slot": "settings-section-footer", className: "flex flex-wrap items-center justify-end gap-3 border-t border-border bg-muted/40 px-5 py-3 sm:px-6", children: [footerNote ? _jsx("p", { className: "mr-auto text-sm text-muted-foreground", children: footerNote }) : null, footer, onSave ? (_jsx(Button, { type: "submit", size: "sm", disabled: !dirty, isLoading: saving, children: saveLabel })) : null] })) : null] }));
     const shared = {
         "data-slot": "settings-section",
         "data-tone": tone,
@@ -41,7 +42,14 @@ export function SettingsSection({ title, description, children, footer, footerNo
         event.preventDefault();
         if (!dirty || saving)
             return;
-        void onSave();
+        // Le bouton se désactive pendant l'envoi et le focus part sur `body` : il revient au titre du bloc.
+        // Un focus resté dans un champ (Entrée) n'y est pas déplacé.
+        void Promise.resolve(onSave()).finally(() => {
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    heading.current?.focus();
+            });
+        });
     };
     // Un `<form>` nommé par son titre a le rôle « form » : il apparaît dans les repères du lecteur d'écran.
     return (_jsx("form", { ...shared, onSubmit: submit, children: body }));

package/dist/shell-project.d.ts

@@ -16,6 +16,30 @@ export declare function shellProjectFrom(project: ShellCoreProject | null, setti
     modules: ReadonlyArray<ModuleWord>;
     settingsHref: string;
 } | undefined;
+/**
+ * Un module montre un seul sélecteur en haut de page : celui de Basalte dès que l'organisation a des
+ * projets, ou le sien sinon (démo, espace pas encore relié). Pendant le chargement, celui de Basalte.
+ */
+export declare function coreSwitcherShown(organizationId: string | null | undefined, projects: ReadonlyArray<ShellCoreProject> | undefined): boolean;
+/** Ce qu'un module a pour un projet : un site, une doc, un assistant, une page de statut. */
+export type ProjectResource = {
+    coreProjectId?: string | null | undefined;
+};
+/**
+ * Où mène un projet choisi dans le sélecteur : sa ressource s'il n'y en a qu'une, sinon la liste du
+ * module, déjà filtrée. `null` : on ne bouge pas (liste en chargement, ou déjà sur la liste).
+ */
+export declare function projectDestination<Resource extends ProjectResource>(resources: ReadonlyArray<Resource> | undefined, projectId: string | null, resourceOpen: boolean): {
+    to: "resource";
+    resource: Resource;
+} | {
+    to: "list";
+} | null;
+/**
+ * Une ressource ouverte par son adresse (lien, palette, liste) : le sélecteur montre son projet. Écrit
+ * à l'ouverture seulement : revenir sur « Tous les projets » n'est pas annulé avant de quitter la page.
+ */
+export declare function useShellProjectOfResource(organizationId: string | null | undefined, coreProjectId: string | null | undefined): void;
 /**
  * Le sélecteur de projet de Basalte, dans `header` d'`AppShell`. Le choix vaut pour toutes les consoles.
  * `onChange` : ce que le module fait en plus, par exemple ouvrir la page du projet. Rien à montrer

package/dist/shell-project.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSyncExternalStore } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 import { ProjectSwitcher } from "./project-switcher.js";
 /**
  * Le projet choisi en haut de page, le même dans toutes les consoles de Basalte : sous `app.hgdc.ch`,
@@ -51,6 +51,37 @@ export function shellProjectFrom(project, settingsHref) {
         return undefined;
     return { name: project.name, modules: project.modules, settingsHref };
 }
+/**
+ * Un module montre un seul sélecteur en haut de page : celui de Basalte dès que l'organisation a des
+ * projets, ou le sien sinon (démo, espace pas encore relié). Pendant le chargement, celui de Basalte.
+ */
+export function coreSwitcherShown(organizationId, projects) {
+    return Boolean(organizationId) && projects?.length !== 0;
+}
+/**
+ * Où mène un projet choisi dans le sélecteur : sa ressource s'il n'y en a qu'une, sinon la liste du
+ * module, déjà filtrée. `null` : on ne bouge pas (liste en chargement, ou déjà sur la liste).
+ */
+export function projectDestination(resources, projectId, resourceOpen) {
+    if (resources === undefined)
+        return null;
+    if (projectId !== null) {
+        const matching = resources.filter((resource) => resource.coreProjectId === projectId);
+        if (matching.length === 1 && matching[0])
+            return { to: "resource", resource: matching[0] };
+    }
+    return resourceOpen ? { to: "list" } : null;
+}
+/**
+ * Une ressource ouverte par son adresse (lien, palette, liste) : le sélecteur montre son projet. Écrit
+ * à l'ouverture seulement : revenir sur « Tous les projets » n'est pas annulé avant de quitter la page.
+ */
+export function useShellProjectOfResource(organizationId, coreProjectId) {
+    useEffect(() => {
+        if (organizationId && coreProjectId)
+            saveShellProject(organizationId, coreProjectId);
+    }, [organizationId, coreProjectId]);
+}
 /**
  * Le sélecteur de projet de Basalte, dans `header` d'`AppShell`. Le choix vaut pour toutes les consoles.
  * `onChange` : ce que le module fait en plus, par exemple ouvrir la page du projet. Rien à montrer

package/package.json

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