@starterlib/ui 0.2.0 → 0.4.0

package/README.md

@@ -14,29 +14,60 @@ des dependances de pair : c'est l'application qui les installe, et elles doivent
 etre **identiques dans l'hote et dans chaque remote**. Deux versions du socle
 dans le meme navigateur, ce sont deux jeux de jetons d'injection.
 
-## Deux points d'entree
+## Quatre points d'entree
 
-Decoupes par **dependance**, jamais par famille : un composant sort du tronc
-quand il traine un pair lourd, et seulement alors.
+Un composant sort du tronc quand il traine un pair lourd, et seulement alors ;
+le point d'entree secondaire ou il va se choisit ensuite par ce qu'il EST pour
+qui l'emploie.
 
-| Point d'entree            | Contenu                             | Ce qu'il traine                                   |
-| ------------------------- | ----------------------------------- | ------------------------------------------------- |
-| `@starterlib/ui`          | 22 composants                       | rien de lourd                                     |
-| `@starterlib/ui/surfaces` | ce qui se pose AU-DESSUS de la page | `@angular/cdk` overlay et portal, `@angular/aria` |
+| Point d'entree                | Contenu                                                                                              | Ce qu'il traine a l'execution                      | Gzippe  |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
+| `@starterlib/ui`              | le tronc : etats, texte, actions, structure, transverses, saisie native, calendrier                  | `@angular/router`, deja exige par `core`           | 40,6 Ko |
+| `@starterlib/ui/surfaces`     | ce qui se pose AU-DESSUS de la page : menu, dialogues, tiroirs, messages ephemeres                   | `@angular/cdk`, `@angular/aria/menu`               | 9,7 Ko  |
+| `@starterlib/ui/interactions` | ce qui fait PARTIE de la page et traine Aria ou une surface : onglets, navigation laterale, combobox | `@angular/aria`, qui exige lui-meme `@angular/cdk` | 6,9 Ko  |
+| `@starterlib/ui/formulaires`  | les champs qui LISENT leur saisie : montant, date, plage de dates                                    | le code d'`@angular/forms` (`transformedValue`)    | 4,5 Ko  |
 
 ```ts
-import { StButton, StIcon } from '@starterlib/ui';
-import { StMenu, StMenuItem, StMenuTrigger } from '@starterlib/ui/surfaces';
+import { StButton, StInput, StSelect } from '@starterlib/ui';
+import { StDialog, StToast } from '@starterlib/ui/surfaces';
+import { StTabs, StCombobox, StMultiselect } from '@starterlib/ui/interactions';
+import { StAmountField, StDateField } from '@starterlib/ui/formulaires';
 ```
 
 ⚠️ Un paquet partage en federation **ne s'elague pas** : declare singleton, il
 est charge en entier des qu'un remote le reference. La separation n'a donc pas
-pour but le poids — 16,8 Ko gzippes pour le tronc — mais le **train de
-singletons** : une application qui n'affiche ni menu ni dialogue ne charge pas
-le CDK, et n'a pas a se redeployer quand celui-ci monte de version.
+pour but le poids, mais le **train de singletons** : une application qui
+n'affiche ni menu, ni dialogue, ni onglets ne charge ni le CDK ni Aria, et n'a
+pas a se redeployer quand ils montent de version.
+
+`@angular/cdk`, `@angular/aria` et `@angular/forms` sont des pairs
+**optionnels** : le tronc n'en importe que des TYPES. Ils deviennent obligatoires
+des le premier import d'un point d'entree secondaire qui les emploie, et leur
+absence se voit alors a la resolution, pas a l'execution. ⚠️ `@angular/aria`
+exige `@angular/cdk` a la version EXACTE : les deux montent ensemble.
+
+Ce que chaque point d'entree importe a l'execution est verifie sur le paquet
+construit (`pnpm paquets:check`) : un import de trop dans le tronc echoue avant
+la publication.
+
+⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont quatre
+specificateurs de module distincts : partager `@starterlib/ui` ne couvre aucun
+des trois autres. Omis de la configuration, chaque remote en embarque sa propre
+copie — et la regle `singleton: true, strictVersion: true` qui protege le tronc
+ne protege plus rien au-dessus.
+
+```js
+// federation.config.mjs de l'hote ET de chaque remote
+shared: {
+  '@starterlib/ui': { singleton: true, strictVersion: true },
+  '@starterlib/ui/surfaces': { singleton: true, strictVersion: true },
+  '@starterlib/ui/interactions': { singleton: true, strictVersion: true },
+  '@starterlib/ui/formulaires': { singleton: true, strictVersion: true },
+  // ...
+}
+```
 
-`@angular/cdk` reste declare en pair du paquet, mais n'est importe que par
-`ui/surfaces`. Voir `docs/adr/0003-points-d-entree-decoupes-par-dependance.md`.
+Voir `docs/adr/0003-points-d-entree-decoupes-par-dependance.md`.
 
 ## Configuration — une fois, dans l'hote
 
@@ -111,9 +142,45 @@ Vague 1 : etats (`st-spinner`, `st-skeleton`, `st-empty`, `st-error`,
 `st-heading`), donnees (`st-money`, `st-date`, `st-relative-time`, `st-masked`,
 `st-code`, `st-count`), actions (`st-button`, `st-icon-button`, `st-link`,
 `st-button-group`), indicateurs (`st-badge`, `st-status-pill`, `st-tag`,
-`st-avatar`), iconographie (`st-icon`).
+`st-avatar`), iconographie (`st-icon`). `st-menu` est passe sous `ui/surfaces`.
+
+Vague 2 :
+
+- **Tronc** — structure (`st-app-shell`, `st-header`, `st-skip-link`, `st-page-title`,
+  `st-breadcrumb`, `st-section`, `st-card`, `st-divider`), retour (`st-banner`,
+  `st-inline-message`), transverses (`st-theme-toggle`,
+  `st-lang-switch`, `st-copy-button`, `st-timer`, `st-logo`).
+- **`ui/surfaces`** — `StDialog` (dialogue, tiroir, feuille inferieure),
+  `StConfirmDialog`, `StToast`, `st-idle-warning`, `stTooltip`, `st-popover`.
+- **`ui/interactions`** — `st-tabs`, `st-tab-panel`, `stTabContent`, `st-sidenav`,
+  `stSidenavToggle`.
+
+Vague 3 — la saisie, sur Signal Forms :
+
+- **Tronc** — `st-form-field`, `st-input`, `st-textarea`, `st-fieldset`,
+  `st-checkbox`, `st-radio-group`, `st-switch`, `st-error-summary`,
+  `st-password-field`, `st-otp-field`, `st-search-field`, `st-iban-field`,
+  `st-phone-field`, `st-select` (natif), `st-file-upload`, `st-calendar` ;
+  messages d'erreur traduits et fonctions de schema (`erreurIban`,
+  `erreurTelephone`, `erreurDate`, `erreurPlageDeDates`, `erreursDeFichiers`).
+- **`ui/interactions`** — `st-combobox`, `st-multiselect`.
+- **`ui/formulaires`** — `st-amount-field`, `st-date-field`, `st-date-range`.
+
+Un champ s'emploie avec un formulaire, par `[formField]`, ou seul, par
+`[(value)]`. Les regles d'un schema sont des fonctions PURES du socle, a brancher
+par `validate` : les fournir toutes faites importerait `@angular/forms` a
+l'execution dans le tronc.
+
+```ts
+readonly virement = form(this.modele, (chemin) => {
+  required(chemin.beneficiaire);
+  validate(chemin.iban, ({ value }) => erreurIban(value()));
+  validate(chemin.execution, ({ value }) => erreurDate(value(), { min: aujourdHui }));
+});
+```
 
-Inventaire des vagues suivantes : `docs/plan-librairie.md` du depot.
+Inventaire et regles de la suite : `docs/plan-librairie.md`,
+`docs/audit-vague-2-2026-09-17.md` et `docs/audit-vague-3-2026-09-17.md` du depot.
 
 ## Regles tenues par les composants
 

package/assets/icones/sprite.svg

@@ -6,6 +6,7 @@
      color, jamais par un attribut de gabarit. -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
   <symbol id="boite-vide" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></symbol>
+  <symbol id="calendrier" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></symbol>
   <symbol id="cercle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></symbol>
   <symbol id="cercle-coche" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></symbol>
   <symbol id="cercle-croix" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></symbol>
@@ -18,6 +19,7 @@
   <symbol id="copie" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></symbol>
   <symbol id="corbeille" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></symbol>
   <symbol id="croix" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></symbol>
+  <symbol id="fichier" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></symbol>
   <symbol id="hors-ligne" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></symbol>
   <symbol id="lien-externe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></symbol>
   <symbol id="menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></symbol>
@@ -27,6 +29,7 @@
   <symbol id="rafraichir" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></symbol>
   <symbol id="recherche" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol>
   <symbol id="serveur" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></symbol>
+  <symbol id="televerser" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></symbol>
   <symbol id="triangle-alerte" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></symbol>
   <symbol id="utilisateur" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
 </svg>