@sia-ui/cli 0.4.0 → 0.6.0

package/dist/registry/package/components/CrudPage/styles.css

@@ -13,12 +13,13 @@
   min-width: 0;
 }
 
-/* La pagination se détache du tableau sans ligne supplémentaire : le tableau
-   en a déjà une sous sa dernière ligne. */
-.sia-crud-page > .sia-pagination {
-  align-self: center;
-  margin-top: .25rem;
-}
+/* L'en-tête perd sa marge de page : l'écart entre les blocs est le `gap`
+   ci-dessus, et les deux s'additionnaient — plus de trois lignes vides entre
+   la description et la recherche. */
+.sia-crud-page > .sia-page-header { margin-bottom: 0; }
+
+/* La pagination dispose elle-même ses groupes sur toute la largeur. */
+.sia-crud-page > .sia-pagination { margin-top: .25rem; }
 
 @media (max-width: 47.9375rem) {
   .sia-crud-page { gap: 1rem; }

package/dist/registry/package/components/DataTable/index.tsx

@@ -54,6 +54,7 @@ export function DataTable<T>({
   searchKeys,
   searchPlaceholder,
   onSearch,
+  searchDelay = 0,
   layout = "auto",
   maxHeight,
   stickyHeader = false,
@@ -210,9 +211,12 @@ export function DataTable<T>({
               <SearchInput
                 value={recherche}
                 placeholder={searchPlaceholder ?? locale.search}
+                // Avec un délai, c'est le champ qui temporise : il sait aussi
+                // déclencher tout de suite sur Entrée et à l'effacement.
+                {...(onSearch && searchDelay > 0 ? { onSearch, searchDelay } : {})}
                 onValueChange={(v) => {
                   setRecherche(v);
-                  onSearch?.(v);
+                  if (searchDelay <= 0) onSearch?.(v);
                 }}
               />
             )}

package/dist/registry/package/components/DataTable/query.ts

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import {
   useTableQuery,
+  type TableParamsMapping,
   type TableQuery,
   type TableQueryState,
   type TableQueryStorage,
@@ -40,6 +41,17 @@ export interface UseDataTableQueryOptions {
   history?: "replace" | "push";
   /** Préfixe des clés, pour deux tableaux sur la même page. */
   prefix?: string;
+  /**
+   * Un autre endroit où ranger l'état — le plus souvent le routeur.
+   *
+   * La barre d'adresse écrite directement passe sous le nez d'un routeur qui
+   * tient ses propres paramètres (TanStack Router, React Router) : il ne voit
+   * pas le changement, et le réécrit au prochain rendu. Fourni, ce stockage
+   * remplace celui de l'URL, et `syncUrl` / `history` sont ignorés.
+   */
+  storage?: TableQueryStorage;
+  /** Les noms des paramètres serveur — `limit`, `sort` + `order`… */
+  serverParams?: TableParamsMapping;
 }
 
 /**
@@ -51,18 +63,26 @@ export interface UseDataTableQueryOptions {
 export function useDataTableQuery(
   options: UseDataTableQueryOptions = {},
 ): TableQuery {
-  const { defaultState, syncUrl = true, history = "replace", prefix } = options;
+  const {
+    defaultState,
+    syncUrl = true,
+    history = "replace",
+    prefix,
+    storage: fourni,
+    serverParams,
+  } = options;
 
   // Créé une fois : un objet reconstruit à chaque rendu réabonnerait
   // l'écouteur `popstate` en boucle.
   const storage = useMemo(
-    () => (syncUrl ? createUrlTableStorage(history) : undefined),
-    [history, syncUrl],
+    () => fourni ?? (syncUrl ? createUrlTableStorage(history) : undefined),
+    [fourni, history, syncUrl],
   );
 
   return useTableQuery({
     ...(defaultState ? { defaultState } : {}),
     ...(storage ? { storage } : {}),
     ...(prefix ? { prefix } : {}),
+    ...(serverParams ? { serverParams } : {}),
   });
 }

package/dist/registry/package/components/DataTable/row-actions.tsx

@@ -83,9 +83,9 @@ export function RowActions<T>({
             size="sm"
             {...(action.tone ? { tone: action.tone } : {})}
             disabled={desactivee}
+            {...(action.icon ? { leftIcon: action.icon } : {})}
             onClick={() => declencher(action)}
           >
-            {action.icon}
             {action.label}
           </Button>
         );

package/dist/registry/package/components/DataTable/types.ts

@@ -107,6 +107,14 @@ export interface DataTableProps<T> {
   searchPlaceholder?: string;
   /** Recherche déléguée. Fournie, le tableau cesse de filtrer lui-même. */
   onSearch?: (query: string) => void;
+  /**
+   * Millisecondes d'inactivité avant d'appeler `onSearch`.
+   *
+   * `0` — le défaut — l'appelle à chaque frappe, ce qui convient à un
+   * filtrage local. Pour une recherche serveur, 300 évite une requête par
+   * lettre ; Entrée et l'effacement déclenchent sans attendre.
+   */
+  searchDelay?: number;
 
   /* ─────────────────────────────────────────────────────── mise en page */
 

package/dist/registry/package/components/Drawer/index.tsx

@@ -79,6 +79,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       phase: state,
       open: doOpen,
       close: doClose,
+      toggle,
     } = useDisclosureState({
       ...(open !== undefined ? { open } : {}),
       defaultOpen,
@@ -88,6 +89,11 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
 
     const drawerRef = useRef<HTMLDivElement | null>(null);
     const zIndexRef = useRef<number | null>(null);
+    // Lue par l'écouteur d'Échap : la mettre dans ses dépendances le
+    // réabonnerait — et rebasculerait le verrou du body — à chaque rendu où
+    // `onOpenChange` est une fonction en ligne.
+    const fermer = useRef(doClose);
+    fermer.current = doClose;
 
     /* 🔌 API IMPÉRATIVE */
     useImperativeHandle(
@@ -95,10 +101,10 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       () => ({
         open: doOpen,
         close: doClose,
-        toggle: () => (isOpen ? doClose() : doOpen()),
+        toggle,
         isOpen: () => isOpen,
       }),
-      [isOpen, open],
+      [isOpen, doOpen, doClose, toggle],
     );
 
     /* Overlay stack */
@@ -123,7 +129,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       const onKeyDown = (e: KeyboardEvent) => {
         if (!closeOnEsc || e.key !== "Escape") return;
         if (overlayStack.isTop(zIndexRef.current)) {
-          doClose();
+          fermer.current();
         }
       };
 

package/dist/registry/package/components/Form/index.tsx

@@ -1,10 +1,15 @@
-import { type CSSProperties, type ReactNode } from "react";
+import { useState, type CSSProperties, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
 import {
+  readSubmitError,
   useLocalForm,
+  useSiaLocale,
   type FormAdapter,
+  type FormErrors,
+  type FormSubmitResult,
   type FormValidator,
 } from "@sia-ui/headless";
+import { Alert } from "../Alert";
 import { Button, type ButtonProps } from "../Button";
 import { Field, type FieldProps, type FieldValue } from "../Field";
 import "./styles.css";
@@ -32,6 +37,16 @@ function isGroup(entry: FormEntry): entry is FormFieldGroup {
   return "group" in entry;
 }
 
+/** Les noms de champs, groupes aplatis. */
+export function formFieldNames(fields: FormEntry[]): string[] {
+  const noms: string[] = [];
+  for (const entree of fields) {
+    if (isGroup(entree)) noms.push(...entree.fields.map((f) => f.name));
+    else noms.push(entree.name);
+  }
+  return noms;
+}
+
 /**
  * Les valeurs qu'un formulaire déclaratif peut porter.
  *
@@ -54,7 +69,16 @@ export interface FormProps<TValues extends FormShape = FormShape> {
   defaultValues?: TValues;
   /** La validation. Un schéma Zod s'y branche en cinq lignes. */
   validate?: FormValidator<TValues>;
-  onSubmit?: (values: TValues) => void | Promise<void>;
+  /**
+   * L'envoi.
+   *
+   * Rendre des erreurs par champ les pose sous les champs. Lever une erreur
+   * l'affiche dans une alerte en tête des boutons — et une `HttpError` de
+   * `@sia-ui/api` voit en plus ses erreurs de champ posées à leur place.
+   */
+  onSubmit?: (
+    values: TValues,
+  ) => FormSubmitResult<TValues> | Promise<FormSubmitResult<TValues>>;
   columns?: number;
   submitText?: ReactNode;
   clearText?: ReactNode;
@@ -118,6 +142,38 @@ export function Form<TValues extends FormShape = FormShape>({
     ...(onSubmit ? { onSubmit } : {}),
   });
   const form = adapter ?? interne;
+  const locale = useSiaLocale();
+
+  /**
+   * L'échec du dernier envoi, quand il ne se range pas sous un champ.
+   *
+   * Sans lui, un 409 ou un 500 devenait une promesse rejetée que personne ne
+   * lisait : le bouton se relâchait, et rien ne disait pourquoi.
+   */
+  const [echec, setEchec] = useState<string | null>(null);
+
+  const envoyer = () => {
+    setEchec(null);
+    form.submit().catch((error: unknown) => {
+      const { fields: erreurs, message } = readSubmitError(error);
+      const connus = new Set(formFieldNames(fields));
+      const sousLesChamps: Record<string, string> = {};
+      const ailleurs: string[] = [];
+
+      for (const [nom, texte] of Object.entries(erreurs)) {
+        if (connus.has(nom)) sousLesChamps[nom] = texte;
+        else ailleurs.push(texte);
+      }
+
+      form.setErrors(sousLesChamps as FormErrors<TValues>);
+      // Ce que les champs affichent déjà n'est pas répété dans l'alerte ; ce
+      // qui vise un champ absent du formulaire, si.
+      if (ailleurs.length > 0) setEchec(ailleurs.join(" "));
+      else if (Object.keys(sousLesChamps).length === 0) {
+        setEchec(message ?? locale.submitError);
+      }
+    });
+  };
 
   const busy = loading || form.state.isSubmitting;
   const submitDisabled =
@@ -157,7 +213,7 @@ export function Form<TValues extends FormShape = FormShape>({
       noValidate
       onSubmit={(event) => {
         event.preventDefault();
-        void form.submit();
+        envoyer();
       }}
     >
       <div className="sia-form-grid" style={grille(columns)}>
@@ -184,6 +240,16 @@ export function Form<TValues extends FormShape = FormShape>({
         )}
       </div>
 
+      {echec && (
+        <Alert
+          tone="danger"
+          className="sia-form-error"
+          onDismiss={() => setEchec(null)}
+        >
+          {echec}
+        </Alert>
+      )}
+
       {actions ?? (
         <div className="sia-form-actions">
           {showClear && (

package/dist/registry/package/components/Icons/index.tsx

@@ -7,10 +7,11 @@
  * `aria-hidden` d'office. Une icône ne porte jamais de sens à elle seule;
  * c'est le libellé à côté qui le porte.
  *
- * Ce jeu couvre ce dont la bibliothèque a besoin, et rien de plus. Un produit
- * qui veut sa propre iconographie passe ses icônes en props plutôt que
- * d'étendre celle-ci : embarquer trois cents dessins pour en servir douze
- * pèserait sur tous les projets.
+ * Ce jeu couvre ce dont la bibliothèque a besoin, plus la navigation d'une
+ * console de gestion — dossier, serveur, utilisateurs, activité, clé, compte,
+ * déconnexion : ce que chaque application redessinait. Au-delà, un produit
+ * passe ses propres icônes en props plutôt que d'étendre celui-ci. Chaque
+ * icône est un export nommé, donc écartée du bundle quand on ne l'importe pas.
  */
 
 import type { SVGProps } from "react";
@@ -207,3 +208,86 @@ export function EyeOffIcon(props: IconProps) {
     </IconBase>
   );
 }
+
+/* ── Navigation d'une console ──────────────────────────────────────────── */
+
+export function HomeIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9v11h14V9" />
+      <path d="M10 20v-6h4v6" />
+    </IconBase>
+  );
+}
+export function FolderIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.3l2 2.5h8.7A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5Z" />
+    </IconBase>
+  );
+}
+export function ServerIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <rect x="3.5" y="4" width="17" height="7" rx="1.5" />
+      <rect x="3.5" y="13" width="17" height="7" rx="1.5" />
+      <path d="M7.5 7.5h.01M7.5 16.5h.01" />
+    </IconBase>
+  );
+}
+export function UserIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="8" r="4" />
+      <path d="M4.5 20.5a7.5 7.5 0 0 1 15 0" />
+    </IconBase>
+  );
+}
+export function UsersIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="9" cy="8" r="3.5" />
+      <path d="M2.5 20a6.5 6.5 0 0 1 13 0" />
+      <path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.2a6.5 6.5 0 0 1 3.5 5.8" />
+    </IconBase>
+  );
+}
+export function ActivityIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M3 12h4l3-8 4 16 3-8h4" />
+    </IconBase>
+  );
+}
+export function KeyIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="8" cy="15" r="4.5" />
+      <path d="m11.2 11.8 8.8-8.8M16.5 6.5l2.5 2.5M14 9l2 2" />
+    </IconBase>
+  );
+}
+export function LockIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <rect x="4.5" y="10.5" width="15" height="10" rx="2" />
+      <path d="M8 10.5V7a4 4 0 0 1 8 0v3.5" />
+    </IconBase>
+  );
+}
+export function LogOutIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M9.5 20.5H5A1.5 1.5 0 0 1 3.5 19V5A1.5 1.5 0 0 1 5 3.5h4.5" />
+      <path d="m15.5 16.5 4.5-4.5-4.5-4.5M20 12H9.5" />
+    </IconBase>
+  );
+}
+export function PencilIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M4 20h4l10-10a2.5 2.5 0 0 0-3.5-3.5L4.5 16.5 4 20Z" />
+    </IconBase>
+  );
+}

package/dist/registry/package/components/PageHeader/index.tsx

@@ -7,6 +7,14 @@ export interface PageHeaderProps {
   description?: ReactNode;
   eyebrow?: ReactNode;
   actions?: ReactNode;
+  /**
+   * Le niveau du titre. `1` — le défaut — pour l'en-tête d'un écran.
+   *
+   * `2` ou `3` pour une section dans un écran qui a déjà son `<h1>` : la
+   * liste des environnements dans la fiche d'un projet. Le titre y est plus
+   * petit et l'espace sous l'en-tête plus court.
+   */
+  level?: 1 | 2 | 3;
   className?: string;
 }
 
@@ -15,14 +23,30 @@ export interface PageHeaderProps {
  *
  * Un seul `<h1>` par page, rendu ici : la hiérarchie des titres est ce qui
  * permet de parcourir un écran au lecteur d'écran, et deux `<h1>` la
- * cassent sans que rien ne se voie.
+ * cassent sans que rien ne se voie. Une section imbriquée passe donc
+ * `level={2}`.
  */
-export function PageHeader({ title, description, eyebrow, actions, className }: PageHeaderProps) {
+export function PageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+  level = 1,
+  className,
+}: PageHeaderProps) {
+  const Titre = `h${level}` as const;
+
   return (
-    <header className={cn("sia-page-header", className)}>
+    <header
+      className={cn(
+        "sia-page-header",
+        level > 1 && "sia-page-header--section",
+        className,
+      )}
+    >
       <div className="sia-page-header__content">
         {eyebrow && <div className="sia-page-header__eyebrow">{eyebrow}</div>}
-        <h1 className="sia-page-header__title">{title}</h1>
+        <Titre className="sia-page-header__title">{title}</Titre>
         {description && <p className="sia-page-header__description">{description}</p>}
       </div>
       {actions && <div className="sia-page-header__actions">{actions}</div>}

package/dist/registry/package/components/PageHeader/styles.css

@@ -1,5 +1,17 @@
-.sia-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
+/* Le repli suit la place réellement disponible, pas la largeur de l'écran :
+   à côté d'une barre latérale, la zone de contenu est étroite sur un grand
+   écran. Le titre réclame 18rem ; quand les actions n'y tiennent plus à côté,
+   elles passent dessous d'un bloc — jamais écrasées, jamais sur deux lignes. */
+.sia-page-header { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem 1.5rem; margin-bottom:2rem; }
+.sia-page-header__content { flex:1 1 18rem; min-width:0; }
 .sia-page-header__title { margin:0; font-size:clamp(1.5rem,3vw,2.25rem); }
 .sia-page-header__description { margin:.5rem 0 0; color:var(--sia-muted); }
 .sia-page-header__eyebrow { color:var(--sia-primary); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
-.sia-page-header__actions { display:flex; gap:.75rem; flex-wrap:wrap; }
+.sia-page-header__actions { display:flex; flex:none; max-width:100%; gap:.75rem; flex-wrap:wrap; }
+.sia-page-header__actions > * { flex:none; white-space:nowrap; }
+
+/* Une section dans un écran : titre à la taille d'un intertitre, actions
+   alignées sur lui plutôt que sur un titre de page absent. */
+.sia-page-header--section { align-items: center; gap: 1rem; margin-bottom: 1rem; }
+.sia-page-header--section .sia-page-header__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
+.sia-page-header--section .sia-page-header__description { margin-top: .25rem; font-size: .875rem; }