@hgdc/ui 0.54.0 → 0.55.0

package/dist/avatar.js

@@ -2,23 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import * as React from "react";
 import { cn } from "./cn.js";
-import { avatarTone } from "./initials.js";
+import { AVATAR_TONE_CLASSES, avatarTone } from "./initials.js";
 function Avatar({ className, size = "default", ...props }) {
     return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
 }
 function AvatarImage({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
 }
-/** Lavis et encre de chaque teinte (`--avatar-<n>`, `styles.css`), à 4,5:1 en clair et en sombre. */
-const TONE_CLASSES = {
-    1: "bg-avatar-1 text-avatar-1-ink",
-    2: "bg-avatar-2 text-avatar-2-ink",
-    3: "bg-avatar-3 text-avatar-3-ink",
-    4: "bg-avatar-4 text-avatar-4-ink",
-    5: "bg-avatar-5 text-avatar-5-ink",
-    6: "bg-avatar-6 text-avatar-6-ink",
-    7: "bg-avatar-7 text-avatar-7-ink",
-};
 /**
  * Ce qui s'affiche sans photo (la photo, `AvatarImage`, reste prioritaire). Des initiales en
  * texte prennent une teinte de la marque, stable : celle de `colorKey` (identifiant ou adresse
@@ -28,7 +18,7 @@ const TONE_CLASSES = {
 function AvatarFallback({ className, colorKey, children, ...props }) {
     const key = colorKey === undefined ? (typeof children === "string" ? children : "") : (colorKey ?? "");
     const tone = key.trim() ? avatarTone(key) : null;
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", "data-tone": tone ?? undefined, className: cn("flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs", tone ? cn("font-semibold", TONE_CLASSES[tone]) : "bg-muted text-muted-foreground", className), ...props, children: children }));
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", "data-tone": tone ?? undefined, className: cn("flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs", tone ? cn("font-semibold", AVATAR_TONE_CLASSES[tone]) : "bg-muted text-muted-foreground", className), ...props, children: children }));
 }
 function AvatarBadge({ className, ...props }) {
     return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));

package/dist/initials.d.ts

@@ -15,3 +15,10 @@ export type AvatarTone = 1 | 2 | 3 | 4 | 5 | 6 | 7;
  * toujours la même teinte, dans tous les produits. FNV-1a 32 bits, puis modulo 7.
  */
 export declare function avatarTone(key: string): AvatarTone;
+/** Lavis et encre de chaque teinte (`--avatar-<n>`, `styles.css`), à 4,5:1 en clair et en sombre. */
+export declare const AVATAR_TONE_CLASSES: Readonly<Record<AvatarTone, string>>;
+/** Teinte de la marque d'une organisation (`OrgMark`, mémoire de la coque) : celle de son identifiant, sinon de son nom. */
+export declare function orgTone(org: {
+    id?: string | undefined;
+    name: string;
+}): AvatarTone;

package/dist/initials.js

@@ -36,3 +36,17 @@ export function avatarTone(key) {
     }
     return ((hash % AVATAR_TONES) + 1);
 }
+/** Lavis et encre de chaque teinte (`--avatar-<n>`, `styles.css`), à 4,5:1 en clair et en sombre. */
+export const AVATAR_TONE_CLASSES = {
+    1: "bg-avatar-1 text-avatar-1-ink",
+    2: "bg-avatar-2 text-avatar-2-ink",
+    3: "bg-avatar-3 text-avatar-3-ink",
+    4: "bg-avatar-4 text-avatar-4-ink",
+    5: "bg-avatar-5 text-avatar-5-ink",
+    6: "bg-avatar-6 text-avatar-6-ink",
+    7: "bg-avatar-7 text-avatar-7-ink",
+};
+/** Teinte de la marque d'une organisation (`OrgMark`, mémoire de la coque) : celle de son identifiant, sinon de son nom. */
+export function orgTone(org) {
+    return avatarTone(org.id?.trim() ? org.id : org.name);
+}

package/dist/org-switcher.d.ts

@@ -19,9 +19,15 @@ export type Organization = {
 };
 /** Un lien dans un menu, à l'allure d'un `DropdownMenuItem`. */
 export declare const MENU_LINK_ITEM: string;
-/** Marque d'une organisation : son logo, ou ses initiales (`initials`) sur un carré arrondi. */
+/**
+ * Marque d'une organisation : son logo, ou ses initiales (`initials`) sur un carré arrondi, dans la teinte de
+ * son identifiant (`avatarTone`) : deux organisations aux mêmes initiales ne se confondent pas. Sans `id`, la
+ * teinte du nom.
+ */
 export declare function OrgMark({ org, className, }: {
-    org: Pick<Organization, "name" | "logo">;
+    org: Pick<Organization, "name" | "logo"> & {
+        id?: string;
+    };
     className?: string;
 }): React.JSX.Element;
 /**

package/dist/org-switcher.js

@@ -7,7 +7,7 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { useEffect } from "react";
 import { Badge } from "./badge.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
-import { initials } from "./initials.js";
+import { AVATAR_TONE_CLASSES, initials, orgTone } from "./initials.js";
 import { rememberShellOrganization } from "./shell-memory.js";
 import { useShellPlacement } from "./shell-placement.js";
 import { cn } from "./cn.js";
@@ -25,11 +25,15 @@ export function RoleBadge({ orgRole: role, title, className, }) {
 }
 /** Un lien dans un menu, à l'allure d'un `DropdownMenuItem`. */
 export const MENU_LINK_ITEM = "relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-muted focus:text-foreground data-highlighted:bg-muted max-lg:min-h-11 coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
-/** Marque d'une organisation : son logo, ou ses initiales (`initials`) sur un carré arrondi. */
+/**
+ * Marque d'une organisation : son logo, ou ses initiales (`initials`) sur un carré arrondi, dans la teinte de
+ * son identifiant (`avatarTone`) : deux organisations aux mêmes initiales ne se confondent pas. Sans `id`, la
+ * teinte du nom.
+ */
 export function OrgMark({ org, className, }) {
     if (org.logo)
         return _jsx("img", { src: org.logo, alt: "", className: cn("size-8 shrink-0 rounded-lg object-cover", className) });
-    return (_jsx("span", { "aria-hidden": true, className: cn("grid size-8 shrink-0 place-items-center rounded-lg bg-foreground text-xs font-semibold text-background uppercase", className), children: initials(org.name) }));
+    return (_jsx("span", { "aria-hidden": true, className: cn("grid size-8 shrink-0 place-items-center rounded-lg text-xs font-semibold uppercase", AVATAR_TONE_CLASSES[orgTone(org)], className), children: initials(org.name) }));
 }
 /**
  * L'organisation active, et le menu pour en changer ou en créer une. En haut de la barre des
@@ -46,17 +50,17 @@ export function OrgSwitcher({ organizations, activeId, onSelect, createHref, onC
     const activeLogo = active?.logo;
     useEffect(() => {
         if (activeName !== undefined)
-            rememberShellOrganization({ name: activeName, logo: activeLogo });
-    }, [activeName, activeLogo]);
+            rememberShellOrganization({ id: activeId, name: activeName, logo: activeLogo });
+    }, [activeId, activeName, activeLogo]);
     if (!active)
         return null;
     // En haut de la barre des produits : la marque seule dans 40 px, le nom quand la barre s'élargit.
     const inRail = placement === "product-rail";
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": `Organisation ${active.name}, changer d'organisation`, className: cn("flex h-10 w-full min-w-0 items-center gap-2.5 rounded-xl px-1.5 text-left coarse:h-11 outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted", inRail
-                        ? "shrink-0 gap-3 px-1 hover:bg-shell-hover aria-expanded:bg-shell-hover"
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": `Organisation ${active.name}, changer d'organisation`, title: active.name, className: cn("flex min-h-10 w-full min-w-0 items-center gap-2.5 rounded-xl px-1.5 py-1 text-left coarse:min-h-11 outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted", inRail
+                        ? "h-10 shrink-0 gap-3 px-1 py-0 hover:bg-shell-hover aria-expanded:bg-shell-hover coarse:h-11"
                         : "lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:w-auto lg:rail:justify-center lg:rail:px-1", className) }), children: [_jsx(OrgMark, { org: active }), _jsxs("span", { className: cn("min-w-0 flex-1", inRail
                             ? "opacity-0 transition-opacity duration-(--duration-fast) ease-out group-data-expanded/rail:opacity-100 motion-reduce:transition-none"
-                            : "lg:rail:hidden"), children: [_jsx("span", { className: "block truncate text-sm font-medium", children: active.name }), active.role ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: ORG_ROLE_LABEL[active.role] })) : null] }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: cn("size-4 shrink-0 text-muted-foreground lg:text-shell-muted", inRail
+                            : "lg:rail:hidden"), children: [_jsx("span", { className: cn("block text-sm font-medium", inRail ? "truncate" : "line-clamp-2 break-words"), children: active.name }), active.role ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: ORG_ROLE_LABEL[active.role] })) : null] }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: cn("size-4 shrink-0 text-muted-foreground lg:text-shell-muted", inRail
                             ? "opacity-0 transition-opacity duration-(--duration-fast) group-data-expanded/rail:opacity-100"
-                            : "lg:rail:hidden") })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Organisations" }), organizations.map((org) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(org.id), children: [_jsx(OrgMark, { org: org, className: "size-6 rounded-md bg-muted text-[10px] text-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name }), org.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Organisation active", className: "size-4" })) : org.role ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: ORG_ROLE_LABEL[org.role] })) : null] }, org.id)))] }), createHref !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(MenuPrimitive.LinkItem, { href: createHref, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : onCreate !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onCreate, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : null] })] }));
+                            : "lg:rail:hidden") })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Organisations" }), organizations.map((org) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(org.id), children: [_jsx(OrgMark, { org: org, className: "size-6 rounded-md text-[10px]" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name }), org.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Organisation active", className: "size-4" })) : org.role ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: ORG_ROLE_LABEL[org.role] })) : null] }, org.id)))] }), createHref !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(MenuPrimitive.LinkItem, { href: createHref, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : onCreate !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onCreate, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true }), "Cr\u00E9er une organisation"] })] })) : null] })] }));
 }

package/dist/shell-memory.d.ts

@@ -9,6 +9,7 @@ export declare const SHELL_SWITCH_MAX_AGE_MS = 10000;
 export type ShellOrganization = {
     initials: string;
     logo?: string;
+    tone?: number;
 };
 export type ShellBootConfig = {
     /** Clé du rail de la barre latérale (`sidebar`), valeur `rail`. */
@@ -21,6 +22,8 @@ export type ShellBootConfig = {
     origins: ReadonlyArray<readonly [string, string, string]>;
     /** Domaine des produits sur leur sous-domaine (`hgdc.ch` : `mail.hgdc.ch` est Mail). */
     domain: string;
+    /** Nombre de teintes d'avatar (`AVATAR_TONES`) : la teinte retenue de l'organisation est un entier de 1 à `tones`. */
+    tones: number;
 };
 type BootWindow = {
     document: {
@@ -46,11 +49,13 @@ export declare const SHELL_BOOT_CONFIG: ShellBootConfig;
 export declare function shellBootScript(config?: ShellBootConfig): string;
 /** Ce que la coque retient d'une organisation : ses initiales et son logo (`https:` seulement). */
 export declare function shellOrganization(org: {
+    id?: string | undefined;
     name: string;
     logo?: string | undefined;
 }): ShellOrganization;
 /** Retient l'organisation affichée (`OrgSwitcher` le fait) et l'applique à la page. */
 export declare function rememberShellOrganization(org: {
+    id?: string | undefined;
     name: string;
     logo?: string | undefined;
 }): void;

package/dist/shell-memory.js

@@ -1,4 +1,4 @@
-import { initials } from "./initials.js";
+import { AVATAR_TONES, initials, orgTone } from "./initials.js";
 import { FAMILY_PRODUCTS } from "./family-svg.js";
 import { PRODUCT_ORIGINS } from "./products.js";
 /*
@@ -77,11 +77,26 @@ export function shellBoot(config, win) {
             root.style.setProperty("--hgdc-org-logo", `url("${logo}")`);
         else
             root.style.removeProperty("--hgdc-org-logo");
+        // Teinte d'OrgMark (`--avatar-<n>`), un entier de 1 à 7 seulement.
+        const tone = org && Number.isInteger(org.tone) && Number(org.tone) >= 1 && Number(org.tone) <= config.tones
+            ? Number(org.tone)
+            : 0;
+        if (tone) {
+            const token = `--avatar-${tone}`;
+            root.style.setProperty("--hgdc-org-bg", `var(${token})`);
+            root.style.setProperty("--hgdc-org-ink", `var(${token}-ink)`);
+        }
+        else {
+            root.style.removeProperty("--hgdc-org-bg");
+            root.style.removeProperty("--hgdc-org-ink");
+        }
     }
     else {
         delete root.dataset.hgdcOrg;
         root.style.removeProperty("--hgdc-org-initials");
         root.style.removeProperty("--hgdc-org-logo");
+        root.style.removeProperty("--hgdc-org-bg");
+        root.style.removeProperty("--hgdc-org-ink");
     }
     let height = 0;
     try {
@@ -101,6 +116,7 @@ export const SHELL_BOOT_CONFIG = {
     products: FAMILY_PRODUCTS,
     origins: Object.entries(PRODUCT_ORIGINS).map(([word, { origin, basePath }]) => [word, origin, basePath]),
     domain: "hgdc.ch",
+    tones: AVATAR_TONES,
 };
 /** Le script en ligne du `<head>` : `shellBoot` et sa configuration, sans dépendance. */
 export function shellBootScript(config = SHELL_BOOT_CONFIG) {
@@ -122,7 +138,7 @@ function storageSet(storage, key, value) {
 }
 /** Ce que la coque retient d'une organisation : ses initiales et son logo (`https:` seulement). */
 export function shellOrganization(org) {
-    return { initials: initials(org.name), ...(org.logo ? { logo: org.logo } : {}) };
+    return { initials: initials(org.name), ...(org.logo ? { logo: org.logo } : { tone: orgTone(org) }) };
 }
 /** Retient l'organisation affichée (`OrgSwitcher` le fait) et l'applique à la page. */
 export function rememberShellOrganization(org) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.54.0",
+  "version": "0.55.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",

package/styles.css

@@ -896,8 +896,8 @@
   background: var(--shell-hover);
 }
 :root[data-hgdc-org] [data-slot="org-placeholder-mark"] {
-  background: var(--hgdc-org-logo, var(--foreground)) center / cover no-repeat;
-  color: var(--background);
+  background: var(--hgdc-org-logo, var(--hgdc-org-bg, var(--foreground))) center / cover no-repeat;
+  color: var(--hgdc-org-ink, var(--background));
 }
 :root[data-hgdc-org] [data-slot="org-placeholder-mark"]::before {
   content: var(--hgdc-org-initials, "");