@hgdc/ui 0.66.2 → 0.68.0

package/dist/image-file.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Fichier image envoyé ou téléchargé, lu dans ses octets et sans I/O : le type annoncé ne prouve rien.
+ * Un SVG n'y figure jamais : ouvert seul, il exécuterait ses scripts sur l'origine qui le sert.
+ */
+/** Type réel d'une image, d'après ses premiers octets ; `null` si ce n'est ni PNG, ni JPEG, ni WebP. */
+export declare function imageKind(head: Uint8Array): "png" | "jpeg" | "webp" | null;
+export type ImageKind = NonNullable<ReturnType<typeof imageKind>>;
+export declare const IMAGE_MIME: Record<ImageKind, string>;
+/** Dimensions d'un PNG, lues dans son en-tête `IHDR` ; `null` si l'en-tête manque. */
+export declare function pngSize(bytes: Uint8Array): {
+    width: number;
+    height: number;
+} | null;
+/** Dimensions d'un JPEG, lues dans son premier segment SOF ; `null` si aucun n'est trouvé. */
+export declare function jpegSize(bytes: Uint8Array): {
+    width: number;
+    height: number;
+} | null;
+/** Dimensions d'un WebP (VP8, VP8L ou VP8X) ; `null` si l'en-tête manque. */
+export declare function webpSize(bytes: Uint8Array): {
+    width: number;
+    height: number;
+} | null;
+/** Côté le plus long accepté pour une image téléversée : au-delà, rien ne sert et le décodage coûte. */
+export declare const MAX_IMAGE_SIDE = 4096;
+export declare function imageSize(kind: ImageKind, bytes: Uint8Array): {
+    width: number;
+    height: number;
+} | null;
+/**
+ * JPEG sans ses métadonnées : EXIF et XMP (APP1, dont la position GPS), IPTC (APP13), commentaires
+ * et autres segments d'application sont retirés, l'image elle-même n'est pas touchée (pas de
+ * réencodage). Un fichier mal formé est rendu tel quel : `imageProblem` l'a déjà contrôlé.
+ */
+export declare function stripJpegMetadata(bytes: Uint8Array): Uint8Array;

package/dist/image-file.js

@@ -0,0 +1,110 @@
+/**
+ * Fichier image envoyé ou téléchargé, lu dans ses octets et sans I/O : le type annoncé ne prouve rien.
+ * Un SVG n'y figure jamais : ouvert seul, il exécuterait ses scripts sur l'origine qui le sert.
+ */
+/** Type réel d'une image, d'après ses premiers octets ; `null` si ce n'est ni PNG, ni JPEG, ni WebP. */
+export function imageKind(head) {
+    const at = (i) => head[i] ?? -1;
+    if ([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a].every((b, i) => at(i) === b))
+        return "png";
+    if (at(0) === 0xff && at(1) === 0xd8 && at(2) === 0xff)
+        return "jpeg";
+    const ascii = (from, to) => String.fromCharCode(...head.slice(from, to));
+    if (ascii(0, 4) === "RIFF" && ascii(8, 12) === "WEBP")
+        return "webp";
+    return null;
+}
+export const IMAGE_MIME = { png: "image/png", jpeg: "image/jpeg", webp: "image/webp" };
+/** Dimensions d'un PNG, lues dans son en-tête `IHDR` ; `null` si l'en-tête manque. */
+export function pngSize(bytes) {
+    if (bytes.length < 24 || String.fromCharCode(...bytes.slice(12, 16)) !== "IHDR")
+        return null;
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    return { width: view.getUint32(16), height: view.getUint32(20) };
+}
+/** Dimensions d'un JPEG, lues dans son premier segment SOF ; `null` si aucun n'est trouvé. */
+export function jpegSize(bytes) {
+    let i = 2;
+    while (i + 9 < bytes.length) {
+        if (bytes[i] !== 0xff)
+            return null;
+        const marker = bytes[i + 1] ?? 0;
+        if (marker === 0xff) {
+            i++;
+            continue;
+        }
+        // Marqueurs sans longueur : début d'image, redémarrages.
+        if (marker === 0xd8 || marker === 0x01 || (marker >= 0xd0 && marker <= 0xd7)) {
+            i += 2;
+            continue;
+        }
+        const sof = marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc;
+        if (sof)
+            return {
+                height: ((bytes[i + 5] ?? 0) << 8) | (bytes[i + 6] ?? 0),
+                width: ((bytes[i + 7] ?? 0) << 8) | (bytes[i + 8] ?? 0),
+            };
+        i += 2 + (((bytes[i + 2] ?? 0) << 8) | (bytes[i + 3] ?? 0));
+    }
+    return null;
+}
+/** Dimensions d'un WebP (VP8, VP8L ou VP8X) ; `null` si l'en-tête manque. */
+export function webpSize(bytes) {
+    if (bytes.length < 30)
+        return null;
+    const b = (i) => bytes[i] ?? 0;
+    const chunk = String.fromCharCode(...bytes.slice(12, 16));
+    if (chunk === "VP8 ")
+        return { width: (b(26) | (b(27) << 8)) & 0x3fff, height: (b(28) | (b(29) << 8)) & 0x3fff };
+    if (chunk === "VP8L")
+        return {
+            width: 1 + (((b(22) & 0x3f) << 8) | b(21)),
+            height: 1 + (((b(24) & 0x0f) << 10) | (b(23) << 2) | ((b(22) & 0xc0) >> 6)),
+        };
+    if (chunk === "VP8X")
+        return { width: 1 + (b(24) | (b(25) << 8) | (b(26) << 16)), height: 1 + (b(27) | (b(28) << 8) | (b(29) << 16)) };
+    return null;
+}
+/** Côté le plus long accepté pour une image téléversée : au-delà, rien ne sert et le décodage coûte. */
+export const MAX_IMAGE_SIDE = 4096;
+export function imageSize(kind, bytes) {
+    return kind === "png" ? pngSize(bytes) : kind === "jpeg" ? jpegSize(bytes) : webpSize(bytes);
+}
+/** Segments JPEG gardés : JFIF (APP0), profil de couleur (APP2), Adobe (APP14, conversion des couleurs). */
+const KEPT_APP = new Set([0xe0, 0xe2, 0xee]);
+/**
+ * JPEG sans ses métadonnées : EXIF et XMP (APP1, dont la position GPS), IPTC (APP13), commentaires
+ * et autres segments d'application sont retirés, l'image elle-même n'est pas touchée (pas de
+ * réencodage). Un fichier mal formé est rendu tel quel : `imageProblem` l'a déjà contrôlé.
+ */
+export function stripJpegMetadata(bytes) {
+    if (bytes[0] !== 0xff || bytes[1] !== 0xd8)
+        return bytes;
+    const parts = [bytes.slice(0, 2)];
+    let i = 2;
+    while (i + 4 <= bytes.length) {
+        if (bytes[i] !== 0xff)
+            return bytes;
+        const marker = bytes[i + 1] ?? 0;
+        // Début des données compressées : tout le reste est l'image.
+        if (marker === 0xda) {
+            parts.push(bytes.slice(i));
+            break;
+        }
+        const length = ((bytes[i + 2] ?? 0) << 8) | (bytes[i + 3] ?? 0);
+        const end = i + 2 + length;
+        if (length < 2 || end > bytes.length)
+            return bytes;
+        const metadata = (marker >= 0xe1 && marker <= 0xef && !KEPT_APP.has(marker)) || marker === 0xfe;
+        if (!metadata)
+            parts.push(bytes.slice(i, end));
+        i = end;
+    }
+    const out = new Uint8Array(parts.reduce((n, p) => n + p.length, 0));
+    let at = 0;
+    for (const part of parts) {
+        out.set(part, at);
+        at += part.length;
+    }
+    return out;
+}

package/dist/org-switcher.js

@@ -4,7 +4,7 @@ import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
 import UnfoldMoreIcon from "@hugeicons/core-free-icons/UnfoldMoreIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Badge } from "./badge.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { AVATAR_TONE_CLASSES, initials, orgTone } from "./initials.js";
@@ -30,8 +30,10 @@ export const MENU_LINK_ITEM = "relative flex cursor-default items-center gap-2.5
  * 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) });
+    // Image retirée ou serveur muet : les initiales, plutôt qu'une image cassée.
+    const [broken, setBroken] = useState(null);
+    if (org.logo && org.logo !== broken)
+        return (_jsx("img", { src: org.logo, alt: "", onError: () => setBroken(org.logo ?? null), className: cn("size-8 shrink-0 rounded-lg bg-muted object-contain", className) }));
     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) }));
 }
 /**

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/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.2",
+  "version": "0.68.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",