@sia-ui/cli 0.5.0 → 0.6.0

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

@@ -29,7 +29,7 @@ import type { SelectOption } from "../Select";
 import type { FormEntry, FormFieldConfig, FormShape } from "../Form";
 import type { ColumnCardRole, DataTableColumn } from "../DataTable/types";
 import { AmountDisplay } from "../AmountDisplay";
-import { Badge } from "../Badge";
+import { Badge, toneOf } from "../Badge";
 
 /**
  * Une propriété d'une ressource.
@@ -40,6 +40,9 @@ import { Badge } from "../Badge";
  * même client finissent toujours par diverger, et c'est le formulaire qui
  * oublie le champ que le tableau affiche.
  */
+/** Le formulaire ouvert : une création, ou la modification d'une ligne. */
+export type ResourceFormMode = "create" | "edit";
+
 export interface ResourceField<T = unknown> {
   /** Le contrôle de saisie et le rendu par défaut. `text` sans précision. */
   type?: FieldType;
@@ -49,7 +52,13 @@ export interface ResourceField<T = unknown> {
   helpText?: ReactNode;
   placeholder?: string;
 
-  required?: boolean;
+  /**
+   * Obligatoire toujours, ou dans un seul mode.
+   *
+   * `"create"` sert au mot de passe initial : exigé à la création, facultatif
+   * ensuite — le laisser vide en modification veut dire « inchangé ».
+   */
+  required?: boolean | ResourceFormMode;
   /** Les règles en plus de `required`. Celles du type sont ajoutées seules. */
   rules?: Array<Rule<never>>;
 
@@ -71,8 +80,11 @@ export interface ResourceField<T = unknown> {
 
   /** Par défaut, tout sauf les types trop longs pour une cellule. */
   inTable?: boolean;
-  /** Par défaut, tout sauf `readOnly`. */
-  inForm?: boolean;
+  /**
+   * Par défaut, tout sauf `readOnly` et les valeurs calculées. `"create"` ou
+   * `"edit"` limitent le champ à l'un des deux formulaires.
+   */
+  inForm?: boolean | ResourceFormMode;
   /** Par défaut, tout. */
   inDetail?: boolean;
   /** Par défaut, les types textuels. */
@@ -105,6 +117,16 @@ export interface ResourceField<T = unknown> {
 
   /** Le rendu en tableau et en détail. Écrase celui déduit du type. */
   render?: (row: T, index: number) => ReactNode;
+
+  /**
+   * Une valeur calculée plutôt que lue sur la ligne.
+   *
+   * La colonne peut alors porter une clé qui n'est pas une propriété de `T`
+   * — un nom complet, un solde — sans élargir le type de la ligne. Le rendu
+   * par défaut, la carte et la recherche locale passent par elle. Une valeur
+   * calculée ne se saisit pas : elle sort du formulaire, sauf `inForm`.
+   */
+  value?: (row: T) => unknown;
 }
 
 export interface ResourceDefinition<T> {
@@ -221,13 +243,29 @@ function libelleParDefaut(cle: string): string {
   return mots.charAt(0).toUpperCase() + mots.slice(1);
 }
 
-function estVisible(champ: ResourceField<never>, ou: "table" | "form" | "detail") {
+function estVisible(
+  champ: ResourceField<never>,
+  ou: "table" | "form" | "detail",
+  mode: ResourceFormMode = "create",
+) {
   const type = champ.type ?? "text";
   if (ou === "table") return champ.inTable ?? !HORS_TABLEAU.has(type);
-  if (ou === "form") return champ.inForm ?? !champ.readOnly;
+  if (ou === "form") {
+    const inForm = champ.inForm ?? (!champ.readOnly && !champ.value);
+    return typeof inForm === "string" ? inForm === mode : inForm;
+  }
   return champ.inDetail ?? true;
 }
 
+function estRequis(champ: ResourceField<never>, mode: ResourceFormMode) {
+  return champ.required === true || champ.required === mode;
+}
+
+/** Comment lire la valeur d'une propriété : calculée, ou sur la ligne. */
+function lecteur<T>(cle: string, champ: ResourceField<T>): (row: T) => unknown {
+  return champ.value ?? ((row) => (row as Record<string, unknown>)[cle]);
+}
+
 /** Les propriétés dans l'ordre de déclaration, avec leur clé. */
 function entrees<T>(resource: ResourceDefinition<T>) {
   return Object.entries(resource.fields) as Array<[string, ResourceField<T>]>;
@@ -247,10 +285,11 @@ function renduParDefaut<T>(
   champ: ResourceField<T>,
 ): ((row: T, index: number) => ReactNode) | undefined {
   const type = champ.type ?? "text";
+  const lire = lecteur(cle, champ);
 
   if (type === "currency") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (typeof valeur !== "number") return null;
       return (
         <AmountDisplay
@@ -263,23 +302,28 @@ function renduParDefaut<T>(
 
   if (type === "select" || type === "radio") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (valeur === null || valeur === undefined || valeur === "") return null;
       const brut = String(valeur);
       const option = champ.options?.find((o) => o.value === brut);
       const libelle = option?.label ?? brut;
-      const ton = champ.tones?.[brut];
-      return ton ? <Badge tone={ton}>{libelle}</Badge> : <>{libelle}</>;
+      // Sans ton déclaré pour cette valeur, un mot plutôt qu'une pastille
+      // neutre : la colonne n'a pas demandé à être lue comme un statut.
+      return champ.tones?.[brut] ? (
+        <Badge tone={toneOf(champ.tones, brut)}>{libelle}</Badge>
+      ) : (
+        <>{libelle}</>
+      );
     };
   }
 
   if (type === "checkbox" || type === "switch") {
-    return (row) => ((row as Record<string, unknown>)[cle] ? "Oui" : "Non");
+    return (row) => (lire(row) ? "Oui" : "Non");
   }
 
   if (type === "date" || type === "datetime") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (typeof valeur !== "string" && !(valeur instanceof Date)) return null;
       return type === "date" ? formatDate(valeur) : formatDateTime(valeur);
     };
@@ -287,7 +331,7 @@ function renduParDefaut<T>(
 
   if (type === "number") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (typeof valeur !== "number") return null;
       return formatNumber(valeur, {
         ...(champ.decimals !== undefined
@@ -302,7 +346,7 @@ function renduParDefaut<T>(
 
   if (type === "multiselect" || type === "tags") {
     return (row) => {
-      const valeur = (row as Record<string, unknown>)[cle];
+      const valeur = lire(row);
       if (!Array.isArray(valeur)) return null;
       return valeur
         .map((v) => {
@@ -345,6 +389,7 @@ export function resourceColumns<T>(
     colonnes.push({
       key: cle,
       header: champ.label ?? libelleParDefaut(cle),
+      ...(champ.value ? { accessor: champ.value } : {}),
       ...(rendu ? { cell: rendu } : {}),
       align: champ.align ?? (NUMERIQUES.has(type) ? "end" : "start"),
       ...(champ.width ? { width: champ.width } : {}),
@@ -376,6 +421,7 @@ export function resourceDetailColumns<T>(
     lignes.push({
       key: cle,
       header: champ.label ?? libelleParDefaut(cle),
+      ...(champ.value ? { accessor: champ.value } : {}),
       ...(rendu ? { cell: rendu } : {}),
     });
   }
@@ -386,18 +432,19 @@ export function resourceDetailColumns<T>(
 /** Les champs du formulaire, groupés si la déclaration les groupe. */
 export function resourceFormFields<T>(
   resource: ResourceDefinition<T>,
+  mode: ResourceFormMode = "create",
 ): FormEntry[] {
   const libres: FormFieldConfig[] = [];
   const groupes = new Map<string, FormFieldConfig[]>();
 
   for (const [cle, champ] of entrees(resource)) {
-    if (!estVisible(champ as ResourceField<never>, "form")) continue;
+    if (!estVisible(champ as ResourceField<never>, "form", mode)) continue;
 
     const config: FormFieldConfig = {
       name: cle,
       label: champ.label ?? libelleParDefaut(cle),
       ...(champ.type ? { type: champ.type } : {}),
-      ...(champ.required ? { required: champ.required } : {}),
+      ...(estRequis(champ as ResourceField<never>, mode) ? { required: true } : {}),
       ...(champ.placeholder ? { placeholder: champ.placeholder } : {}),
       ...(champ.helpText ? { helpText: champ.helpText } : {}),
       ...(champ.description ? { description: champ.description } : {}),
@@ -428,14 +475,17 @@ export function resourceFormFields<T>(
  */
 export function resourceValidator<T>(
   resource: ResourceDefinition<T>,
+  mode: ResourceFormMode = "create",
 ): FormValidator<FormShape> | undefined {
   const schema: Record<string, Array<Rule<never>>> = {};
 
   for (const [cle, champ] of entrees(resource)) {
-    if (!estVisible(champ as ResourceField<never>, "form")) continue;
+    if (!estVisible(champ as ResourceField<never>, "form", mode)) continue;
 
     const regles: Array<Rule<never>> = [];
-    if (champ.required) regles.push(regleRequise() as Rule<never>);
+    if (estRequis(champ as ResourceField<never>, mode)) {
+      regles.push(regleRequise() as Rule<never>);
+    }
 
     const duType = REGLE_DU_TYPE[champ.type ?? "text"];
     if (duType) regles.push(duType());
@@ -459,7 +509,7 @@ export function resourceSearchKeys<T>(
     .map(([cle]) => cle);
 }
 
-/** Les valeurs de départ d'une création. */
+/** Les valeurs de départ d'une création : les champs du mode `create`. */
 export function resourceDefaults<T>(resource: ResourceDefinition<T>): FormShape {
   const valeurs: FormShape = {};
   for (const [cle, champ] of entrees(resource)) {

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

@@ -0,0 +1,193 @@
+import { useId, useMemo, useState, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { Input } from "../Input";
+import { PasswordInput } from "../PasswordInput";
+import { PlusIcon, TrashIcon } from "../Icons";
+import "./styles.css";
+
+/** Une paire nom / valeur. La valeur n'est jamais relue du serveur. */
+export interface SecretEntry {
+  key: string;
+  value: string;
+}
+
+export interface SecretFieldsProps {
+  value?: SecretEntry[];
+  defaultValue?: SecretEntry[];
+  onValueChange?: (entries: SecretEntry[]) => void;
+  /**
+   * Les noms déjà enregistrés côté serveur.
+   *
+   * Affichés, mais leur valeur reste vide : un secret ne revient jamais au
+   * navigateur. Une valeur laissée vide sur l'un d'eux veut dire « inchangé » ;
+   * en saisir une, c'est le remplacer — une rotation.
+   */
+  storedKeys?: string[];
+  /** Des noms proposés d'un clic : `DATABASE_URL`, `API_KEY`… */
+  templates?: string[];
+  /** La forme d'un nom valide. Par défaut, aucune contrainte. */
+  keyPattern?: RegExp;
+  keyPatternMessage?: string;
+  keyLabel?: string;
+  valueLabel?: string;
+  addLabel?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Les valeurs effacées, les noms gardés — ce qu'on affiche après l'envoi. */
+export function clearSecretValues(entries: SecretEntry[]): SecretEntry[] {
+  return entries.map((entry) => ({ ...entry, value: "" }));
+}
+
+/**
+ * Des secrets en écriture seule : les noms se lisent, les valeurs jamais.
+ *
+ * Chaque ligne est un nom et une valeur masquée. Les noms déjà enregistrés
+ * s'affichent sans leur valeur — le serveur ne la renvoie pas, et ne doit pas
+ * la renvoyer. Les champs refusent l'autocomplétion du navigateur, qui
+ * proposerait sinon le mot de passe du compte à la place d'une clé d'API.
+ *
+ * Après l'envoi, `clearSecretValues` vide les valeurs : un secret ne reste pas
+ * affiché dans un formulaire ouvert.
+ */
+export function SecretFields({
+  value,
+  defaultValue,
+  onValueChange,
+  storedKeys = [],
+  templates = [],
+  keyPattern,
+  keyPatternMessage = "Nom invalide",
+  keyLabel = "Nom",
+  valueLabel = "Valeur",
+  addLabel = "Ajouter un secret",
+  disabled = false,
+  className,
+}: SecretFieldsProps) {
+  const id = useId();
+  const [interne, setInterne] = useState<SecretEntry[]>(
+    () => defaultValue ?? storedKeys.map((key) => ({ key, value: "" })),
+  );
+  const lignes = value ?? interne;
+  const enregistres = useMemo(() => new Set(storedKeys), [storedKeys]);
+
+  const changer = (suivantes: SecretEntry[]) => {
+    if (value === undefined) setInterne(suivantes);
+    onValueChange?.(suivantes);
+  };
+
+  /** Un doublon ou un nom mal formé, ligne par ligne. */
+  const erreurs = useMemo(() => {
+    const vus = new Map<string, number>();
+    for (const ligne of lignes) {
+      const nom = ligne.key.trim();
+      if (nom) vus.set(nom, (vus.get(nom) ?? 0) + 1);
+    }
+    return lignes.map((ligne) => {
+      const nom = ligne.key.trim();
+      if (!nom) return undefined;
+      if ((vus.get(nom) ?? 0) > 1) return "Ce nom est déjà utilisé";
+      if (keyPattern && !keyPattern.test(nom)) return keyPatternMessage;
+      return undefined;
+    });
+  }, [keyPattern, keyPatternMessage, lignes]);
+
+  const presents = new Set(lignes.map((ligne) => ligne.key.trim()));
+  const proposes = templates.filter((nom) => !presents.has(nom));
+
+  const modifier = (index: number, patch: Partial<SecretEntry>) =>
+    changer(lignes.map((ligne, i) => (i === index ? { ...ligne, ...patch } : ligne)));
+
+  return (
+    <div className={cn("sia-secrets", className)}>
+      {lignes.length > 0 && (
+        <div className="sia-secrets__head" aria-hidden="true">
+          <span>{keyLabel}</span>
+          <span>{valueLabel}</span>
+        </div>
+      )}
+
+      {lignes.map((ligne, index) => {
+        const erreur = erreurs[index];
+        const garde = enregistres.has(ligne.key.trim());
+        const idErreur = `${id}-erreur-${index}`;
+
+        return (
+          <div className="sia-secrets__row" key={index}>
+            <div className="sia-secrets__key">
+              <Input
+                value={ligne.key}
+                aria-label={`${keyLabel} ${index + 1}`}
+                placeholder="NOM_DU_SECRET"
+                autoComplete="off"
+                spellCheck={false}
+                disabled={disabled}
+                invalid={Boolean(erreur)}
+                {...(erreur ? { "aria-describedby": idErreur } : {})}
+                onChange={(event) => modifier(index, { key: event.target.value })}
+              />
+              {erreur && (
+                <span id={idErreur} className="sia-secrets__error" role="alert">
+                  {erreur}
+                </span>
+              )}
+            </div>
+
+            <PasswordInput
+              value={ligne.value}
+              aria-label={`${valueLabel} ${ligne.key || index + 1}`}
+              placeholder={garde ? "Inchangée si vide" : "Valeur"}
+              // `new-password` : le seul réglage que les navigateurs
+              // respectent pour ne pas proposer un mot de passe enregistré.
+              autoComplete="new-password"
+              spellCheck={false}
+              disabled={disabled}
+              onChange={(event) => modifier(index, { value: event.target.value })}
+            />
+
+            <IconButton
+              label={`Retirer ${ligne.key || "la ligne"}`}
+              icon={<TrashIcon />}
+              variant="ghost"
+              disabled={disabled}
+              onClick={() => changer(lignes.filter((_, i) => i !== index))}
+            />
+          </div>
+        );
+      })}
+
+      <div className="sia-secrets__footer">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={disabled}
+          leftIcon={<PlusIcon />}
+          onClick={() => changer([...lignes, { key: "", value: "" }])}
+        >
+          {addLabel}
+        </Button>
+
+        {proposes.length > 0 && (
+          <div className="sia-secrets__templates">
+            {proposes.map((nom) => (
+              <button
+                key={nom}
+                type="button"
+                className="sia-secrets__template"
+                disabled={disabled}
+                onClick={() => changer([...lignes, { key: nom, value: "" }])}
+              >
+                <PlusIcon aria-hidden="true" />
+                {nom}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+/* Trois colonnes alignées sur toutes les lignes : nom, valeur, retrait. Le
+   nom est en chasse fixe — MAJUSCULES_ET_SOULIGNÉS se relisent mieux, et une
+   faute de frappe s'y voit. */
+.sia-secrets {
+  container: sia-secrets / inline-size;
+  display: grid;
+  gap: .5rem;
+}
+
+.sia-secrets__head,
+.sia-secrets__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 2.5rem;
+  align-items: start;
+  gap: .5rem;
+}
+
+.sia-secrets__head {
+  color: var(--sia-muted);
+  font-size: .75rem;
+  font-weight: 600;
+  letter-spacing: .02em;
+}
+
+.sia-secrets__key { display: grid; gap: .25rem; min-width: 0; }
+.sia-secrets__key input {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: .85rem;
+}
+.sia-secrets__error { color: var(--sia-danger); font-size: .78rem; }
+
+/* Le bouton de retrait a la hauteur d'un champ, pour tomber en face. */
+.sia-secrets__row > .sia-icon-button { width: 2.5rem; height: 2.5rem; }
+
+.sia-secrets__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem .75rem;
+  margin-top: .25rem;
+}
+
+.sia-secrets__templates { display: flex; flex-wrap: wrap; gap: .375rem; }
+.sia-secrets__template {
+  display: inline-flex;
+  align-items: center;
+  gap: .3rem;
+  height: 1.75rem;
+  padding: 0 .6rem;
+  border: 1px dashed var(--sia-border-strong);
+  border-radius: var(--sia-radius-full);
+  color: var(--sia-muted);
+  background: transparent;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: .75rem;
+  cursor: pointer;
+  transition:
+    color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    background-color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-secrets__template:hover:not(:disabled) {
+  border-color: var(--sia-primary);
+  color: var(--sia-primary);
+  background: color-mix(in srgb, var(--sia-primary) 6%, transparent);
+}
+.sia-secrets__template:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--sia-primary) 30%, transparent);
+  outline-offset: 2px;
+}
+.sia-secrets__template:disabled { cursor: not-allowed; opacity: .5; }
+
+/* Étroit : le nom au-dessus, la valeur et le retrait en dessous. Chaque
+   ligne se sépare de la suivante par un filet, sans quoi les paires se
+   confondent. */
+@container sia-secrets (max-width: 30rem) {
+  .sia-secrets__head { display: none; }
+  .sia-secrets__row {
+    grid-template-columns: minmax(0, 1fr) 2.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 1px solid var(--sia-border);
+  }
+  .sia-secrets__key { grid-column: 1 / -1; }
+}

package/dist/registry/registry.json

@@ -22,6 +22,32 @@
         "icons"
       ]
     },
+    {
+      "name": "activity-log",
+      "description": "Server-filtered activity log: declared filters, debounced search, pagination and page size.",
+      "type": "pattern",
+      "version": "0.3.0",
+      "status": "experimental",
+      "source": "package",
+      "files": [
+        "components/ActivityLog/index.tsx",
+        "components/ActivityLog/styles.css"
+      ],
+      "dependencies": [
+        "@sia-ui/headless",
+        "@sia-ui/tokens",
+        "@sia-ui/utils"
+      ],
+      "registryDependencies": [
+        "badge",
+        "data-table",
+        "filters-bar",
+        "page-header",
+        "pagination",
+        "search-input",
+        "select"
+      ]
+    },
     {
       "name": "alert",
       "description": "Semantic feedback alert with tones, action and dismissal.",
@@ -179,7 +205,7 @@
       "name": "badge",
       "description": "Compact semantic status label with side content and loading state.",
       "type": "primitive",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -383,7 +409,7 @@
       "name": "crud-page",
       "description": "List page for a declared resource: create, view, edit and delete open their own dialogs, each removable and permission-aware.",
       "type": "pattern",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -426,7 +452,7 @@
       "name": "data-table",
       "description": "Data table: row actions with permissions and confirmation, selection, card view, density and sorting.",
       "type": "component",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -846,7 +872,7 @@
       "name": "icons",
       "description": "Jeu d'icônes SVG sans dépendance, servi par le package.",
       "type": "primitive",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1080,7 +1106,7 @@
       "name": "page-header",
       "description": "Consistent page title, description and action area.",
       "type": "pattern",
-      "version": "0.1.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1316,7 +1342,7 @@
       "name": "resource",
       "description": "Declare a resource once: table columns, form fields, detail view, validation, search keys and permissions are all derived from it.",
       "type": "pattern",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1385,6 +1411,28 @@
         "icons"
       ]
     },
+    {
+      "name": "secret-fields",
+      "description": "Write-only key/value secrets editor: stored names shown, values never read back.",
+      "type": "component",
+      "version": "0.3.0",
+      "status": "experimental",
+      "source": "package",
+      "files": [
+        "components/SecretFields/index.tsx",
+        "components/SecretFields/styles.css"
+      ],
+      "dependencies": [
+        "@sia-ui/utils"
+      ],
+      "registryDependencies": [
+        "button",
+        "icon-button",
+        "icons",
+        "input",
+        "password-input"
+      ]
+    },
     {
       "name": "select",
       "description": "Accessible searchable select with positioned overlay and async option loading.",

package/dist/registry/styles/sia-ui.css

@@ -209,7 +209,7 @@
 /* Wave 2 business components */
 @media (max-width:900px) { .sia-kpi-grid--3,.sia-kpi-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
 @media (max-width:560px) { .sia-kpi-grid--2,.sia-kpi-grid--3,.sia-kpi-grid--4 { grid-template-columns:1fr; } .sia-filters-bar { align-items:stretch; }.sia-filters-bar__main,.sia-filters-bar__actions { width:100%; } }
-@media (max-width:640px) { .sia-page-header { flex-direction:column; } .sia-page-header__actions { width:100%; } .sia-entity-meta__grid { grid-template-columns:1fr; } }
+@media (max-width:640px) { .sia-entity-meta__grid { grid-template-columns:1fr; } }
 .sia-month-picker,.sia-year-picker,.sia-week-picker { min-height:2.5rem; padding:0 .75rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-foreground); background:var(--sia-background); font:inherit; }
 .sia-picker--invalid { border-color:var(--sia-danger); }
 .sia-tone--neutral { --sia-accent:var(--sia-muted); --sia-accent-foreground:var(--sia-background); }

package/dist/source.mjs

@@ -40,6 +40,7 @@ export async function sourceLocale(racine) {
     origine: "embarqué",
     registre,
     lire: (fichier) => readFile(join(racine, "package", fichier)),
+    lireStyles: () => readFile(join(racine, "styles/sia-ui.css")),
   };
 }
 
@@ -78,6 +79,15 @@ export async function sourceDistante(base) {
       }
       return Buffer.from(await r.arrayBuffer());
     },
+    // La feuille vient du même registre que les composants : servis par une
+    // URL, ils ne doivent pas dépendre de la feuille figée dans la CLI.
+    lireStyles: async () => {
+      const r = await fetch(new URL("styles/sia-ui.css", racine));
+      if (!r.ok) {
+        throw new Error(`styles/sia-ui.css a répondu ${r.status} sur ${racine}`);
+      }
+      return Buffer.from(await r.arrayBuffer());
+    },
   };
 }