@sia-ui/cli 0.5.0 → 0.7.0

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

@@ -67,3 +67,61 @@ export function Badge({
     </span>
   );
 }
+
+/**
+ * Le ton d'une valeur, lu dans une table de correspondance.
+ *
+ * Un statut, une action de journal, un environnement : chaque écran tenait
+ * sa propre table et sa propre fonction pour la lire. Celle-ci est la seule.
+ *
+ * ```ts
+ * const TONS = { payee: "success", attente: "warning", annulee: "danger" };
+ * toneOf(TONS, facture.statut); // "success" | … | "neutral"
+ * ```
+ */
+export function toneOf(
+  tones: Readonly<Record<string, ComponentTone>> | undefined,
+  value: unknown,
+  fallback: ComponentTone = "neutral",
+): ComponentTone {
+  if (value === null || value === undefined) return fallback;
+  return tones?.[String(value)] ?? fallback;
+}
+
+export interface StatusBadgeProps extends Omit<BadgeProps, "tone" | "children"> {
+  /** La valeur brute : `"payee"`, `"prod"`, `"delete"`. */
+  value: string | number | null | undefined;
+  /** Le ton de chaque valeur. */
+  tones?: Readonly<Record<string, ComponentTone>>;
+  /** Le libellé de chaque valeur. À défaut, la valeur elle-même. */
+  labels?: Readonly<Record<string, ReactNode>>;
+  /** Le ton d'une valeur absente de `tones`. `neutral` par défaut. */
+  fallbackTone?: ComponentTone;
+  /** Ce qui s'affiche sans valeur. Rien par défaut. */
+  empty?: ReactNode;
+}
+
+/**
+ * Une valeur rendue en pastille, ton et libellé tirés de deux tables.
+ *
+ * Déclarées une fois par domaine — les statuts de facture, les actions du
+ * journal — puis passées partout où la valeur s'affiche : colonne libre,
+ * détail, carte. Une valeur inconnue garde une pastille neutre plutôt que de
+ * disparaître.
+ */
+export function StatusBadge({
+  value,
+  tones,
+  labels,
+  fallbackTone = "neutral",
+  empty = null,
+  ...props
+}: StatusBadgeProps) {
+  if (value === null || value === undefined || value === "") return <>{empty}</>;
+  const brut = String(value);
+  return (
+    <Badge tone={toneOf(tones, brut, fallbackTone)} {...props}>
+      {labels?.[brut] ?? brut}
+    </Badge>
+  );
+}

package/dist/registry/package/components/CrudPage/dialogs.tsx

@@ -77,6 +77,13 @@ export interface CrudDialogsProps<T> {
   columns: Array<DataTableColumn<T>>;
   fields?: FormEntry[] | undefined;
   validate?: FormValidator<FormShape> | undefined;
+  /**
+   * Les champs et la validation de la modification, quand ils diffèrent de
+   * la création — un mot de passe exigé à la création seulement. À défaut,
+   * `fields` et `validate` servent aux deux.
+   */
+  editFields?: FormEntry[] | undefined;
+  editValidate?: FormValidator<FormShape> | undefined;
   onSubmit?:
     | ((
         values: FormShape,
@@ -104,8 +111,10 @@ export function CrudDialogs<T>({
   state,
   onClose,
   columns,
-  fields,
-  validate,
+  fields: champsCreation,
+  validate: validationCreation,
+  editFields,
+  editValidate,
   onSubmit,
   createDefaults,
   toFormValues,
@@ -116,6 +125,10 @@ export function CrudDialogs<T>({
   const creation = state?.mode === "create";
   const modification = state?.mode === "edit";
   const consultation = state?.mode === "view";
+  const fields = modification ? (editFields ?? champsCreation) : champsCreation;
+  const validate = modification
+    ? (editValidate ?? validationCreation)
+    : validationCreation;
 
   /*
     Une clé qui change d'une ouverture à l'autre.

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

@@ -9,7 +9,7 @@ import { PageHeader } from "../PageHeader";
 import { Button } from "../Button";
 import { Pagination } from "../Pagination";
 import { DataTable } from "../DataTable";
-import { EyeIcon, PlusIcon, TrashIcon } from "../Icons";
+import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "../Icons";
 import type {
   DataTableColumn,
   DataTableProps,
@@ -69,6 +69,12 @@ interface CrudPageBase<T> {
   title?: ReactNode;
   description?: ReactNode;
   eyebrow?: ReactNode;
+  /**
+   * Le niveau du titre. `1` pour un écran ; `2` quand la liste est une
+   * section d'une fiche — les comptes d'un fournisseur — qui a déjà son
+   * `<h1>`.
+   */
+  headingLevel?: 1 | 2 | 3;
 
   data: T[];
   getRowKey?: (row: T, index: number) => Key;
@@ -229,21 +235,6 @@ export type CrudPageProps<T> = CrudPageBase<T> &
       }
   );
 
-/** Une icône de crayon. Dessinée ici : le jeu commun n'en a pas. */
-function EditIcon() {
-  return (
-    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-      <path
-        d="M4 20h4l10-10a2.5 2.5 0 0 0-3.5-3.5L4.5 16.5 4 20Z"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.7"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
 /**
  * Une page de liste, avec ses quatre opérations.
  *
@@ -259,6 +250,7 @@ export function CrudPage<T>({
   title,
   description,
   eyebrow,
+  headingLevel,
   columns: colonnesFournies,
   data,
   getRowKey: cleFournie,
@@ -313,8 +305,10 @@ export function CrudPage<T>({
         ? {
             columns: resourceColumns(resource),
             detailColumns: resourceDetailColumns(resource),
-            fields: resourceFormFields(resource),
-            validate: resourceValidator(resource),
+            fields: resourceFormFields(resource, "create"),
+            validate: resourceValidator(resource, "create"),
+            editFields: resourceFormFields(resource, "edit"),
+            editValidate: resourceValidator(resource, "edit"),
             searchKeys: resourceSearchKeys(resource),
             defaults: resourceDefaults(resource),
             getRowKey: resourceRowKey(resource),
@@ -413,7 +407,7 @@ export function CrudPage<T>({
     };
 
     ajouter("view", consulter, { label: "Consulter", icon: <EyeIcon /> });
-    ajouter("edit", modifier, { label: "Modifier", icon: <EditIcon /> });
+    ajouter("edit", modifier, { label: "Modifier", icon: <PencilIcon /> });
     ajouter("delete", onDelete, {
       label: "Supprimer",
       icon: <TrashIcon />,
@@ -464,8 +458,11 @@ export function CrudPage<T>({
 
   const boutonCreer =
     creer && creation && creationAutorisee ? (
-      <Button onClick={creer} disabled={creation.disabled ?? false}>
-        {creation.icon ?? <PlusIcon />}
+      <Button
+        onClick={creer}
+        disabled={creation.disabled ?? false}
+        leftIcon={creation.icon ?? <PlusIcon />}
+      >
         {creation.label ?? derive?.label?.create ?? "Créer"}
       </Button>
     ) : null;
@@ -485,6 +482,7 @@ export function CrudPage<T>({
           ? { description: description ?? resource?.description }
           : {})}
         {...(eyebrow ? { eyebrow } : {})}
+        {...(headingLevel ? { level: headingLevel } : {})}
         {...(enTeteActions ? { actions: enTeteActions } : {})}
       />
 
@@ -512,12 +510,12 @@ export function CrudPage<T>({
                     size="sm"
                     variant="outline"
                     tone="danger"
+                    leftIcon={<TrashIcon />}
                     onClick={async () => {
                       await onBulkDelete(keys, rows);
                       clear();
                     }}
                   >
-                    <TrashIcon />
                     Supprimer
                   </Button>
                 ),
@@ -540,6 +538,10 @@ export function CrudPage<T>({
         columns={derive?.detailColumns ?? columns}
         fields={fields}
         validate={validate}
+        // Les champs fournis à la main servent aux deux modes ; ceux de la
+        // ressource suivent `inForm` et `required` mode par mode.
+        editFields={champsFournis ?? derive?.editFields}
+        editValidate={validationFournie ?? derive?.editValidate}
         onSubmit={onSubmit}
         createDefaults={createDefaults ?? derive?.defaults}
         toFormValues={toFormValues}

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

@@ -19,8 +19,10 @@ import { renduCellule, valeurDe } from "./values";
 import "./styles.css";
 
 export {
+  createTanStackRouterStorage,
   createUrlTableStorage,
   useDataTableQuery,
+  type TanStackRouterLike,
   type UseDataTableQueryOptions,
 } from "./query";
 

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,
@@ -32,6 +33,74 @@ export function createUrlTableStorage(
   };
 }
 
+/**
+ * Ce que l'adaptateur demande d'un routeur : la forme du `router` de
+ * TanStack Router, sans en dépendre. Méthodes écrites en syntaxe de méthode :
+ * leurs paramètres se comparent alors de façon bivariante, et le routeur typé
+ * de l'application s'y passe sans transtypage.
+ */
+export interface TanStackRouterLike {
+  state: { location: { search: object } };
+  navigate(options: {
+    to: string;
+    search: Record<string, unknown>;
+    replace: boolean;
+  }): unknown;
+  subscribe(event: "onResolved", listener: () => void): () => void;
+}
+
+/** `"2"` → `2`, mais jamais `"007"`, `"1e5"` ni `""` : la conversion est sans perte. */
+function nombreCanonique(valeur: string): string | number {
+  const nombre = Number(valeur);
+  return valeur !== "" && Number.isFinite(nombre) && String(nombre) === valeur
+    ? nombre
+    : valeur;
+}
+
+/**
+ * L'état du tableau dans les paramètres de TanStack Router.
+ *
+ * Deux pièges de la recette qu'on écrivait à la main :
+ *
+ * - TanStack Router sérialise les paramètres en JSON. Une chaîne qui a l'air
+ *   d'un nombre y est mise entre guillemets — `page=2` devenait
+ *   `page=%222%22`. L'adaptateur passe donc de vrais nombres ; les autres
+ *   valeurs restent des chaînes, que le routeur relit à l'identique.
+ * - La lecture part de l'objet déjà décodé par le routeur, jamais de la chaîne
+ *   brute, qui porte ces guillemets.
+ *
+ * Les paramètres étrangers au tableau sont gardés par `useTableQuery`, qui
+ * n'écrit que ses propres clés.
+ */
+export function createTanStackRouterStorage(
+  router: TanStackRouterLike,
+  mode: "replace" | "push" = "replace",
+): TableQueryStorage {
+  return {
+    read: () => {
+      const params = new URLSearchParams();
+      for (const [cle, valeur] of Object.entries(router.state.location.search)) {
+        if (valeur === undefined || valeur === null) continue;
+        for (const v of Array.isArray(valeur) ? valeur : [valeur]) {
+          params.append(cle, typeof v === "object" ? JSON.stringify(v) : String(v));
+        }
+      }
+      return params.toString();
+    },
+    write: (value) => {
+      const search: Record<string, unknown> = {};
+      for (const [cle, brut] of new URLSearchParams(value)) {
+        const valeur = nombreCanonique(brut);
+        const deja = search[cle];
+        search[cle] =
+          deja === undefined ? valeur : [...(Array.isArray(deja) ? deja : [deja]), valeur];
+      }
+      router.navigate({ to: ".", search, replace: mode === "replace" });
+    },
+    subscribe: (listener) => router.subscribe("onResolved", listener),
+  };
+}
+
 export interface UseDataTableQueryOptions {
   defaultState?: Partial<TableQueryState>;
   /** `false` garde l'état en mémoire — utile dans une modale. */
@@ -40,6 +109,22 @@ 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;
+  /**
+   * Le routeur TanStack Router de l'application. Raccourci de
+   * `storage: createTanStackRouterStorage(router)` ; `history` s'applique.
+   */
+  router?: TanStackRouterLike;
+  /** Les noms des paramètres serveur — `limit`, `sort` + `order`… */
+  serverParams?: TableParamsMapping;
 }
 
 /**
@@ -51,18 +136,33 @@ 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,
+    router,
+    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 ??
+      (router
+        ? createTanStackRouterStorage(router, history)
+        : syncUrl
+          ? createUrlTableStorage(history)
+          : undefined),
+    [fourni, history, router, 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/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; }