@sia-ui/cli 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @sia-ui/cli
 
+## 0.7.0
+
+### Minor Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.0 afin que les huit packages restent sur une version commune.
+
+## 0.6.0
+
+### Minor Changes
+
+- `sia-ui update`, la feuille commune suivie, et des erreurs HTTP en français.
+  - **`sia-ui update [nom...]`** — met à jour les entrées en retard sans perdre
+    de retouche : un fichier intact est remplacé, un fichier modifié depuis son
+    installation est gardé et signalé (`sia-ui diff`, puis `--force` pour
+    l'écraser). Les dépendances de registre apparues sont installées, les
+    paquets npm annoncés. `--dry-run` montre sans rien écrire. Une entrée dont
+    un fichier a été gardé reste « en retard » dans le verrou.
+  - **`sia-ui.css` suivie** — son empreinte est notée dans `sia-ui.lock.json`.
+    `update` la met à jour comme un composant ; `add` aussi, si elle n'a pas
+    été retouchée. `init` ne fait plus qu'initialiser. Elle est lue au même
+    registre que les composants, HTTP compris. `doctor` signale une feuille en
+    retard, modifiée ou copiée avant le suivi.
+  - `list --outdated` et `doctor` conseillent `sia-ui update` au lieu de
+    `add --overwrite`, qui écrasait aussi les retouches.
+  - **`statusMessages`** (`@sia-ui/api`) — option du client, avec
+    `FRENCH_STATUS_MESSAGES`. Remplace les messages génériques du serveur
+    (« Conflict », « Forbidden resource », « Cannot GET /x »,
+    `ThrottlerException`) et l'échec réseau de `fetch`, jamais un message métier
+    ni une erreur de champs.
+
 ## 0.5.0
 
 ### Patch Changes

package/README.md

@@ -68,6 +68,36 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 <!-- sia:changelog:start -->
 # @sia-ui/cli
 
+## 0.7.0
+
+### Minor Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.0 afin que les huit packages restent sur une version commune.
+
+## 0.6.0
+
+### Minor Changes
+
+- `sia-ui update`, la feuille commune suivie, et des erreurs HTTP en français.
+  - **`sia-ui update [nom...]`** — met à jour les entrées en retard sans perdre
+    de retouche : un fichier intact est remplacé, un fichier modifié depuis son
+    installation est gardé et signalé (`sia-ui diff`, puis `--force` pour
+    l'écraser). Les dépendances de registre apparues sont installées, les
+    paquets npm annoncés. `--dry-run` montre sans rien écrire. Une entrée dont
+    un fichier a été gardé reste « en retard » dans le verrou.
+  - **`sia-ui.css` suivie** — son empreinte est notée dans `sia-ui.lock.json`.
+    `update` la met à jour comme un composant ; `add` aussi, si elle n'a pas
+    été retouchée. `init` ne fait plus qu'initialiser. Elle est lue au même
+    registre que les composants, HTTP compris. `doctor` signale une feuille en
+    retard, modifiée ou copiée avant le suivi.
+  - `list --outdated` et `doctor` conseillent `sia-ui update` au lieu de
+    `add --overwrite`, qui écrasait aussi les retouches.
+  - **`statusMessages`** (`@sia-ui/api`) — option du client, avec
+    `FRENCH_STATUS_MESSAGES`. Remplace les messages génériques du serveur
+    (« Conflict », « Forbidden resource », « Cannot GET /x »,
+    `ThrottlerException`) et l'échec réseau de `fetch`, jamais un message métier
+    ni une erreur de champs.
+
 ## 0.5.0
 
 ### Patch Changes

package/dist/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { access, cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import { access, mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, join, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import {
@@ -10,8 +10,9 @@ import {
   lireLock,
   noter,
 } from "./lock.mjs";
-import { diff, doctor, outdated, remove } from "./lifecycle.mjs";
+import { diff, doctor, outdated, remove, update } from "./lifecycle.mjs";
 import { choisirSource } from "./source.mjs";
+import { synchroniserStyles } from "./styles.mjs";
 
 const here = dirname(fileURLToPath(import.meta.url));
 const registryRoot = resolve(here, "registry");
@@ -163,13 +164,15 @@ async function init(cwd) {
   }
 
   const config = await readConfig(cwd);
-  const styleTarget = join(cwd, config.styles);
-  await mkdir(dirname(styleTarget), { recursive: true });
-
-  if (!(await exists(styleTarget))) {
-    await cp(join(registryRoot, "styles/sia-ui.css"), styleTarget);
-    console.log(`add  ${config.styles}`);
-  }
+  const source = await ouvrirSource(config);
+  // `init` initialise, et c'est tout : une feuille déjà là n'est pas
+  // touchée. La mettre à jour est le travail de `update`.
+  const lock = await lireLock(cwd);
+  await synchroniserStyles(
+    { cwd, config, lock, lireStyles: source.lireStyles },
+    { mode: "creer" },
+  );
+  await ecrireLock(cwd, lock);
 
   console.log("SIA UI initialisé.");
 }
@@ -228,6 +231,14 @@ async function add(cwd, names) {
     if (copieComplete) noter(lock, item, empreintes);
   }
 
+  // La feuille commune suit les composants : un composant à jour peut
+  // dépendre d'une règle qu'elle vient de gagner. Jamais écrasée ici si elle
+  // a été retouchée — `--overwrite` ne vise que les composants nommés.
+  await synchroniserStyles(
+    { cwd, config, lock, lireStyles: source.lireStyles },
+    { mode: "sur" },
+  );
+
   await ecrireLock(cwd, lock);
   console.log(`\nlock ${LOCK_FILE}`);
 
@@ -268,13 +279,16 @@ function help() {
       "  list                      lister les composants disponibles",
       "  list --outdated           lister ce qui a une version plus récente",
       "  add <nom...>              installer des composants et leurs dépendances",
+      "  update [nom...]           mettre à jour ce qui est en retard, feuille comprise",
       "  diff [nom...]             comparer les fichiers installés au registre",
       "  remove <nom...>           retirer des composants installés",
       "  doctor                    vérifier l'état de ce qui est installé",
       "",
       "Options :",
-      "  --overwrite               écraser les fichiers déjà présents",
-      "  --force                   passer outre les avertissements de remove",
+      "  --overwrite               add : écraser les fichiers déjà présents",
+      "  --force                   update : écraser aussi les fichiers retouchés",
+      "                            remove : passer outre les avertissements",
+      "  --dry-run                 update : montrer sans rien écrire",
       "  --registry <url>          lire un registre servi en HTTP",
       "",
       "Les chemins d'installation viennent de sia-ui.json,",
@@ -304,6 +318,8 @@ async function contexteProjet(cwd) {
     // faire dans la même écriture, sinon aucun fichier ne se retrouve sous
     // Windows.
     cibleDe: (fichier, conf) => cheminUnix(targetFor(fichier, conf)),
+    lireStyles: source.lireStyles,
+    resoudre: (noms) => resolveItems(source.registre, noms),
   };
 }
 
@@ -320,6 +336,9 @@ try {
   else if (command === "remove") {
     await remove(await contexteProjet(cwd), args, flags);
   } else if (command === "doctor") await doctor(await contexteProjet(cwd));
+  else if (command === "update") {
+    await update(await contexteProjet(cwd), args, flags);
+  }
   else help();
 } catch (error) {
   console.error(error instanceof Error ? error.message : error);

package/dist/lifecycle.mjs

@@ -1,7 +1,8 @@
-import { readFile, rm } from "node:fs/promises";
-import { join } from "node:path";
+import { access, mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
 import { lignesDiff } from "./diff.mjs";
 import { LOCK_FILE, ecrireLock, empreinte, lireLock, oublier } from "./lock.mjs";
+import { etatStyles, synchroniserStyles } from "./styles.mjs";
 
 /**
  * Ce qu'on peut faire d'un composant **après** l'avoir copié.
@@ -180,6 +181,18 @@ export async function doctor(contexte) {
 
   const problemes = [];
 
+  const { etat: feuille } = await etatStyles({
+    ...contexte,
+    lock: await lireLock(contexte.cwd),
+  });
+  const conseil = {
+    absente: "absente — sia-ui init la recopie",
+    "en retard": "en retard sur le registre — sia-ui update la met à jour",
+    "non suivie": "différente de celle du registre — sia-ui update --force la remplace",
+    modifiée: "modifiée localement — sia-ui update --force écraserait la modification",
+  }[feuille];
+  if (conseil) problemes.push(`${contexte.config.styles} — ${conseil}`);
+
   for (const etat of liste) {
     if (etat.inconnu) {
       problemes.push(`${etat.nom} — absent du registre de cette CLI`);
@@ -204,7 +217,7 @@ export async function doctor(contexte) {
         problemes.push(`${etat.nom} — ${fichier.relatif} a disparu`);
       } else if (fichier.etat === "modifié") {
         // Ce n'est pas une erreur : posséder le code, c'est le droit de le
-        // modifier. Mais `add --overwrite` écraserait la modification.
+        // modifier. Mais `update --force` écraserait la modification.
         problemes.push(
           `${etat.nom} — ${fichier.relatif} modifié depuis l'installation`,
         );
@@ -238,5 +251,177 @@ export async function outdated(contexte) {
       `${etat.nom.padEnd(largeur)}  ${etat.verrou.version} → ${etat.item.version}`,
     );
   }
-  console.log(`\nMettre à jour :\n  sia-ui add ${enRetard.map((e) => e.nom).join(" ")} --overwrite`);
+  console.log("\nMettre à jour, sans écraser ce qui a été retouché :\n  sia-ui update");
+}
+
+/**
+ * Met à jour ce qui a une version plus récente, sans perdre de retouche.
+ *
+ * Pour chaque fichier, le verrou dit s'il a été modifié depuis son
+ * installation. Intact, il est remplacé ; retouché, il est gardé et signalé —
+ * `sia-ui diff` montre l'écart, `--force` l'écrase. `add --overwrite`, seul
+ * recours jusqu'ici, écrasait tout sans distinction.
+ *
+ * Une entrée n'est notée à sa nouvelle version que si tous ses fichiers l'ont
+ * rejointe : un fichier gardé la laisse « en retard », et la question se
+ * reposera au prochain `update` plutôt que de disparaître.
+ */
+export async function update(contexte, noms, flags) {
+  const { cwd, config, cibleDe, lireSource, resoudre } = contexte;
+  const dryRun = flags.has("--dry-run");
+  const force = flags.has("--force");
+  const { lock, etats: liste } = await etats(contexte, noms);
+
+  const npm = new Set();
+  const gardes = new Map();
+  const avertissements = [];
+  let misesAJour = 0;
+
+  if (dryRun) console.log("Simulation : rien ne sera écrit.\n");
+
+  /** Écrit un fichier et rend son empreinte, ou rien en simulation. */
+  const ecrire = async (relatif, contenu) => {
+    if (!dryRun) {
+      await mkdir(dirname(join(cwd, relatif)), { recursive: true });
+      await writeFile(join(cwd, relatif), contenu);
+    }
+    return empreinte(contenu);
+  };
+
+  const enRetard = [];
+  for (const etat of liste) {
+    if (etat.inconnu) {
+      avertissements.push(`${etat.nom} — absent de ce registre, laissé tel quel`);
+    } else if (etat.retire) {
+      avertissements.push(
+        `${etat.nom} — retiré du registre${etat.item.replacedBy ? ` ; le remplacer par ${etat.item.replacedBy}` : ""}`,
+      );
+    } else if (etat.desynchronise) {
+      if (etat.deprecie) {
+        avertissements.push(
+          `${etat.nom} — déprécié${etat.item.replacedBy ? `, préférer ${etat.item.replacedBy}` : ""}`,
+        );
+      }
+      enRetard.push(etat);
+    }
+  }
+
+  for (const etat of enRetard) {
+    const { item, verrou } = etat;
+    console.log(`${etat.nom}  ${verrou.version} → ${item.version}`);
+    for (const dependance of item.dependencies ?? []) npm.add(dependance);
+
+    const empreintes = {};
+    let complet = true;
+
+    for (const fichier of item.files) {
+      const relatif = cibleDe(fichier, config);
+      const installe = etat.fichiers.find((f) => f.relatif === relatif);
+      const contenu = await lireSource(fichier);
+
+      // Retouché depuis l'installation : le travail de quelqu'un.
+      if (installe?.etat === "modifié" && !force) {
+        console.log(`  keep   ${relatif} (modifié localement)`);
+        empreintes[relatif] = verrou.files[relatif];
+        complet = false;
+        const liste = gardes.get(etat.nom) ?? [];
+        liste.push(relatif);
+        gardes.set(etat.nom, liste);
+        continue;
+      }
+
+      // Un fichier nouveau dans cette version, mais déjà présent sur le disque
+      // sans que le verrou le connaisse : il n'est pas à nous.
+      if (!installe && !force && (await existe(join(cwd, relatif)))) {
+        console.log(`  keep   ${relatif} (présent mais non suivi)`);
+        complet = false;
+        continue;
+      }
+
+      empreintes[relatif] = await ecrire(relatif, contenu);
+      console.log(`  ${installe ? "update" : "add   "} ${relatif}`);
+    }
+
+    // Un fichier que la nouvelle version ne fournit plus reste chez
+    // l'utilisateur : le supprimer d'office pourrait casser un import local.
+    for (const ancien of Object.keys(verrou.files ?? {})) {
+      if (!(ancien in empreintes) && !item.files.some((f) => cibleDe(f, config) === ancien)) {
+        console.log(`  note   ${ancien} n'est plus fourni — à retirer à la main s'il ne sert plus`);
+      }
+    }
+
+    if (!dryRun) {
+      lock.items[etat.nom] = {
+        // Incomplète, l'entrée garde sa version : elle reste « en retard ».
+        version: complet ? item.version : verrou.version,
+        installedAt: complet ? new Date().toISOString() : verrou.installedAt,
+        files: Object.fromEntries(
+          Object.keys(empreintes).sort().map((f) => [f, empreintes[f]]),
+        ),
+      };
+    }
+    if (complet) misesAJour += 1;
+  }
+
+  // Les dépendances de registre apparues avec les nouvelles versions.
+  if (enRetard.length > 0) {
+    for (const item of resoudre(enRetard.map((e) => e.nom))) {
+      if (lock.items[item.name]) continue;
+      console.log(`${item.name}  nouvelle dépendance`);
+      for (const dependance of item.dependencies ?? []) npm.add(dependance);
+
+      const empreintes = {};
+      for (const fichier of item.files) {
+        const relatif = cibleDe(fichier, config);
+        if (!force && (await existe(join(cwd, relatif)))) {
+          console.log(`  keep   ${relatif} (présent mais non suivi)`);
+          continue;
+        }
+        empreintes[relatif] = await ecrire(relatif, await lireSource(fichier));
+        console.log(`  add    ${relatif}`);
+      }
+      if (!dryRun) {
+        lock.items[item.name] = {
+          version: item.version,
+          installedAt: new Date().toISOString(),
+          files: empreintes,
+        };
+      }
+    }
+  }
+
+  // La feuille commune, qu'une entrée à jour peut supposer à jour aussi.
+  await synchroniserStyles(
+    { ...contexte, lock },
+    { mode: force ? "forcer" : "sur", dryRun },
+  );
+
+  if (!dryRun) await ecrireLock(cwd, lock);
+
+  console.log("");
+  if (enRetard.length === 0) console.log("Composants : tout est à jour.");
+  else {
+    console.log(
+      `${misesAJour} entrée(s) mise(s) à jour sur ${enRetard.length}${dryRun ? " (simulation)" : ""}.`,
+    );
+  }
+
+  if (gardes.size > 0) {
+    console.log(
+      `\nFichiers retouchés gardés — comparer, puis reprendre ou forcer :\n  sia-ui diff ${[...gardes.keys()].join(" ")}\n  sia-ui update ${[...gardes.keys()].join(" ")} --force`,
+    );
+  }
+  for (const avertissement of avertissements) console.warn(`\n⚠  ${avertissement}`);
+  if (npm.size > 0) {
+    console.log(`\nÀ installer :\n  pnpm add ${[...npm].sort().join(" ")}`);
+  }
+}
+
+async function existe(chemin) {
+  try {
+    await access(chemin);
+    return true;
+  } catch {
+    return false;
+  }
 }

package/dist/lock.mjs

@@ -44,7 +44,13 @@ export async function lireLock(cwd) {
       );
     }
 
-    return { format: FORMAT, items: lock.items ?? {} };
+    return {
+      format: FORMAT,
+      items: lock.items ?? {},
+      // La feuille commune, suivie depuis qu'`add` la met à jour. Absente
+      // d'un verrou plus ancien : un champ en plus, pas un nouveau format.
+      ...(lock.styles ? { styles: lock.styles } : {}),
+    };
   } catch (error) {
     if (error.code === "ENOENT") return structuredClone(VIDE);
     if (error instanceof SyntaxError) {
@@ -67,7 +73,15 @@ export async function ecrireLock(cwd, lock) {
 
   await writeFile(
     join(cwd, LOCK_FILE),
-    `${JSON.stringify({ format: FORMAT, items }, null, 2)}\n`,
+    `${JSON.stringify(
+      {
+        format: FORMAT,
+        ...(lock.styles ? { styles: lock.styles } : {}),
+        items,
+      },
+      null,
+      2,
+    )}\n`,
   );
 }
 

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

@@ -0,0 +1,241 @@
+import { useMemo, type Key, type ReactNode } from "react";
+import { cn, formatDateTime } from "@sia-ui/utils";
+import type { TableQuery } from "@sia-ui/headless";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { DataTable } from "../DataTable";
+import type { DataTableColumn, DataTableProps } from "../DataTable/types";
+import { FiltersBar } from "../FiltersBar";
+import { PageHeader } from "../PageHeader";
+import { Pagination } from "../Pagination";
+import { SearchInput } from "../SearchInput";
+import { Select, type SelectOption } from "../Select";
+import { StatusBadge } from "../Badge";
+import "./styles.css";
+
+/** Une entrée de journal, dans sa forme la plus courante. */
+export interface ActivityEntry {
+  id: string | number;
+  /** Quand : une date ISO, un horodatage ou une `Date`. */
+  at: string | number | Date;
+  /** Qui : un nom lisible. */
+  actor: string;
+  /** Quoi : un code — `create`, `delete`, `login`. */
+  action: string;
+  /** Sur quoi : « Projet Atlas », « Compte ovh-prod ». */
+  target?: string | undefined;
+  /** Le type de la cible : `project`, `account`. */
+  targetType?: string | undefined;
+  /** Une phrase de contexte, facultative. */
+  summary?: ReactNode;
+}
+
+/** Un filtre déclaré : une clé de requête et ses choix. */
+export interface ActivityLogFilter {
+  /** La clé envoyée au serveur : `actor`, `action`, `targetType`. */
+  key: string;
+  label: string;
+  options: SelectOption[];
+  /** Cherchable au-delà d'une dizaine de choix. */
+  searchable?: boolean;
+}
+
+export interface ActivityLogProps<T = ActivityEntry> {
+  entries: T[];
+  /**
+   * L'état de la requête : page, taille, recherche, filtres.
+   *
+   * `useDataTableQuery()` le fournit, synchronisé avec l'URL ou le routeur ;
+   * `query.params` part tel quel au serveur. Le journal ne filtre rien
+   * lui-même : un journal se compte en milliers de lignes.
+   */
+  query: TableQuery;
+  totalPages?: number;
+  filters?: ActivityLogFilter[];
+  /** Absente, la recherche n'est pas proposée. */
+  searchPlaceholder?: string;
+
+  /** Par défaut, les colonnes d'une `ActivityEntry`. */
+  columns?: Array<DataTableColumn<T>>;
+  getRowKey?: (row: T, index: number) => Key;
+  /** Le ton de chaque action dans les colonnes par défaut. */
+  actionTones?: Record<string, ComponentTone>;
+  /** Le libellé de chaque action — « Suppression » pour `delete`. */
+  actionLabels?: Record<string, ReactNode>;
+
+  title?: ReactNode;
+  description?: ReactNode;
+  headingLevel?: 1 | 2 | 3;
+
+  loading?: boolean;
+  error?: ReactNode;
+  onRetry?: () => void;
+  empty?: DataTableProps<T>["empty"];
+  className?: string;
+}
+
+/** Les colonnes d'une `ActivityEntry` : quand, qui, quoi, sur quoi. */
+export function activityColumns(
+  options: {
+    actionTones?: Record<string, ComponentTone> | undefined;
+    actionLabels?: Record<string, ReactNode> | undefined;
+  } = {},
+): Array<DataTableColumn<ActivityEntry>> {
+  return [
+    {
+      key: "at",
+      header: "Date",
+      width: "11rem",
+      cell: (entry) => (
+        <time className="sia-activity__date" dateTime={new Date(entry.at).toISOString()}>
+          {formatDateTime(entry.at)}
+        </time>
+      ),
+      card: "meta",
+    },
+    { key: "actor", header: "Acteur", card: "title" },
+    {
+      key: "action",
+      header: "Action",
+      cell: (entry) => (
+        <StatusBadge
+          value={entry.action}
+          {...(options.actionTones ? { tones: options.actionTones } : {})}
+          {...(options.actionLabels ? { labels: options.actionLabels } : {})}
+        />
+      ),
+      card: "meta",
+    },
+    {
+      key: "target",
+      header: "Cible",
+      cell: (entry) =>
+        entry.target || entry.summary ? (
+          <span className="sia-activity__target">
+            {entry.target && <span>{entry.target}</span>}
+            {entry.summary && <small>{entry.summary}</small>}
+          </span>
+        ) : null,
+      card: "meta",
+    },
+  ];
+}
+
+/**
+ * Un journal d'activité, filtrable et paginé par le serveur.
+ *
+ * `AuditMeta` et `Timeline` racontent l'histoire d'un objet ; ce bloc sert
+ * l'autre question — qui a fait quoi, sur tout le système, cette semaine.
+ * Filtres déclarés, recherche temporisée, pagination et taille de page : tout
+ * passe par la requête, rien n'est filtré dans le navigateur.
+ */
+export function ActivityLog<T = ActivityEntry>({
+  entries,
+  query,
+  totalPages,
+  filters = [],
+  searchPlaceholder,
+  columns,
+  getRowKey,
+  actionTones,
+  actionLabels,
+  title,
+  description,
+  headingLevel,
+  loading = false,
+  error,
+  onRetry,
+  empty,
+  className,
+}: ActivityLogProps<T>) {
+  const colonnes = useMemo(
+    () =>
+      columns ??
+      (activityColumns({ actionTones, actionLabels }) as unknown as Array<
+        DataTableColumn<T>
+      >),
+    [actionLabels, actionTones, columns],
+  );
+
+  const actifs =
+    filters.filter((filtre) => query.state.filters[filtre.key]).length +
+    (query.state.search ? 1 : 0);
+
+  const cle =
+    getRowKey ??
+    ((row: T, index: number) => (row as { id?: Key }).id ?? index);
+
+  return (
+    <section className={cn("sia-activity", className)}>
+      {title && (
+        <PageHeader
+          title={title}
+          {...(description ? { description } : {})}
+          {...(headingLevel ? { level: headingLevel } : {})}
+        />
+      )}
+
+      {(filters.length > 0 || searchPlaceholder) && (
+        <FiltersBar
+          {...(searchPlaceholder
+            ? {
+                search: (
+                  <SearchInput
+                    // Remonté à la réinitialisation : le champ reprend la
+                    // recherche en vigueur plutôt que sa saisie d'avant.
+                    key={query.state.search === "" ? "vide" : "saisie"}
+                    defaultValue={query.state.search}
+                    placeholder={searchPlaceholder}
+                    searchDelay={300}
+                    onSearch={query.setSearch}
+                  />
+                ),
+              }
+            : {})}
+          filters={filters.map((filtre) => (
+            <div className="sia-activity__filter" key={filtre.key}>
+              <Select
+                aria-label={filtre.label}
+                placeholder={filtre.label}
+                options={filtre.options}
+                value={query.state.filters[filtre.key] ?? ""}
+                clearable
+                searchable={filtre.searchable ?? filtre.options.length > 10}
+                onValueChange={(valeur) => query.setFilter(filtre.key, valeur)}
+              />
+            </div>
+          ))}
+          activeCount={actifs}
+          onReset={query.reset}
+        />
+      )}
+
+      <DataTable<T>
+        columns={colonnes}
+        data={entries}
+        getRowKey={cle}
+        loading={loading}
+        {...(error ? { error } : {})}
+        {...(onRetry ? { onRetry } : {})}
+        empty={
+          empty ?? {
+            title: actifs > 0 ? "Aucune activité pour ces filtres" : "Aucune activité",
+            ...(actifs > 0
+              ? { description: "Élargissez la période ou retirez un filtre." }
+              : {}),
+          }
+        }
+      />
+
+      {totalPages !== undefined && (
+        <Pagination
+          page={query.state.page}
+          totalPages={totalPages}
+          onPageChange={query.setPage}
+          pageSize={query.state.perPage}
+          onPageSizeChange={query.setPerPage}
+          showTotal
+        />
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,31 @@
+/* Même rythme vertical que la page de liste : en-tête, filtres, tableau,
+   pagination, séparés d'un seul écart. */
+.sia-activity {
+  container: sia-activity / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+.sia-activity > .sia-page-header { margin-bottom: 0; }
+
+/* Un filtre a une largeur de lecture, pas toute la barre : quatre filtres
+   tiennent côte à côte avant de passer à la ligne. */
+.sia-activity__filter { width: 12rem; max-width: 100%; }
+
+/* Étroit : chaque filtre prend la ligne, comme la recherche au-dessus —
+   des champs de largeurs différentes empilés donnent un bord droit en
+   escalier. */
+@container sia-activity (max-width: 34rem) {
+  .sia-activity .sia-filters-bar__filters { width: 100%; }
+  .sia-activity__filter { width: 100%; }
+}
+
+.sia-activity__date {
+  color: var(--sia-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sia-activity__target { display: grid; gap: .1rem; min-width: 0; }
+.sia-activity__target small { color: var(--sia-muted); font-size: .78rem; }