@madojs/mado 0.10.1 → 0.11.0

package/docs/fr/00-the-mado-way.md

@@ -3,118 +3,83 @@
 > Une seule bonne façon. Des contrats stricts. Pas de magie.
 
 Mado est un framework pour les équipes qui construisent des panneaux d'admin,
-des outils internes et des SPA métier — des apps qui doivent être simples à
-créer et ennuyeuses à maintenir. Pour cela, il impose un **ensemble de
-conventions**. Si vous les respectez, le projet reste compréhensible même avec
-200 écrans et 5 développeurs. Si vous les enfreignez — les types et le linter
-vous le diront immédiatement.
+des outils internes et des SPA métier. Ces apps doivent être simples à créer
+et ennuyeuses à maintenir. Mado préfère donc des conventions claires à cinq
+styles équivalents.
 
 ## Principes
 
-1. **Une seule voie.** Pour chaque tâche, il existe un seul chemin correct, pas cinq. Si vous
-   écrivez quelque chose d'inhabituel — demandez-vous si un helper idiomatique n'existe pas déjà.
-2. **L'explicite plutôt que la magie.** Pas de scanners de système de fichiers, pas de globals
-   implicites, pas d'effets de bord cachés. Tout ce que fait le framework peut être lu dans un
-   seul fichier.
-3. **La plateforme d'abord.** Si le navigateur propose déjà une fonctionnalité — utilisez-la
-   directement. Pas d'abstractions personnalisées sur `fetch`, `<form>`, l'History API, ou
-   Shadow DOM.
-4. **Types stricts.** `tsc --strict --noUncheckedIndexedAccess` toujours. Si quelque chose ne
-   peut pas être typé — c'est un signal que l'API est mauvaise.
-5. **Pas de dépendances runtime.** Chaque dépendance est un engagement sur des années ;
-   l'écosystème Web Components n'en a pas besoin.
+1. **Une seule voie.** Si vous écrivez quelque chose d'inhabituel, vérifiez
+   d'abord s'il existe déjà un helper/API canonique.
+2. **L'explicite plutôt que la magie.** Pas de file-system scanners, globals
+   implicites ou side effects cachés.
+3. **La plateforme d'abord.** Web Components, History API, `<form>`, `fetch` et
+   Shadow DOM restent visibles.
+4. **Types stricts.** `tsc --strict --noUncheckedIndexedAccess` toujours.
+5. **Pas de dépendances runtime.** Le tooling dev/build est acceptable ; le
+   runtime Mado reste natif.
 
-## Conventions
+## Structure du projet
 
-### Structure du projet
-
-```
+```txt
 src/
-├── routes.ts         ← manifeste de routes, un fichier par projet
-├── main.ts           ← point d'entrée : providers + montage de <x-app>
-├── pages/            ← une page = un fichier = `export default page({...})`
-├── components/       ← composants réutilisables, enregistrement des effets de bord
-├── lib/              ← contextes, clients API, logique métier sans UI
-└── styles/           ← styles partagés (si nécessaire), fichiers .ts avec css``
-```
-
-C'est **obligatoire**, pas optionnel. Si un projet a 10 développeurs — ils doivent
-tous écrire de la même manière.
-
-### Un composant = un fichier
-
-```ts
-// src/components/user-card.ts
-import { component, html, css } from "@madojs/mado";
-
-component(
-  "x-user-card",
-  () => {
-    return () => html`<div class="card"><slot /></div>`;
-  },
-  {
-    styles: css`
-      .card {
-        padding: 1rem;
-      }
-    `,
-  },
-);
+├── main.ts           ← boot: global CSS/providers + render router
+├── app.routes.ts     ← readable app map, exports `manifest` + default routes()
+├── layouts/          ← app-zone wrappers (`page({ view: ({ child }) => ... })`)
+├── shared/           ← UI bricks, http client, pure lib, global CSS
+└── modules/          ← bounded contexts
+    └── billing/
+        ├── billing.routes.ts
+        ├── billing.public.ts
+        ├── billing.types.ts
+        ├── pages/
+        ├── data/
+        ├── api/
+        └── _contracts/
 ```
 
-`import './components/user-card.js'` **enregistre** le composant via
-`customElements.define`. C'est un effet de bord. Importez là où le composant est nécessaire.
-
-### Une seule façon de charger les données
+Le starter par défaut est la version canonique de cette forme. Si d'anciens
+exemples divergent, le starter et `docs/10-app-architecture.md` gagnent.
 
-❌ N'appelez pas `fetch()` directement depuis un composant. Utilisez toujours :
+## Un composant = un fichier
 
 ```ts
-// lecture → resource
-const user = resource(() => `/api/users/${id()}`, jsonFetcher());
+import { component, css, html } from "@madojs/mado";
 
-// écriture → mutation
-const save = mutation(api.save, { invalidates: ["/api/users*"] });
+component("x-user-card", () => () => html`<div class="card"><slot></slot></div>`, {
+  styles: css`
+    .card { padding: 1rem; }
+  `,
+});
 ```
 
-Cela fournit la mise en cache, l'annulation, la gestion des erreurs et l'invalidation automatique.
+Importer le fichier du composant enregistre l'élément. Importez-le là où le tag
+est utilisé.
 
-### Une seule façon de décrire une page
+## Une seule façon de décrire une page
 
 ```ts
-// src/pages/user-profile.ts
-import { page, html, resource, jsonFetcher } from "@madojs/mado";
+import { html, page, resource, jsonFetcher } from "@madojs/mado";
 
 export default page({
-  title: ({ id }) => `Utilisateur #${id}`,
-  view: ({ params }) => html`...`,
+  title: ({ id }) => `User #${id}`,
+  view: ({ params }) => {
+    const user = resource(() => `/api/users/${params.id}`, jsonFetcher());
+    return html`...`;
+  },
 });
 ```
 
-Trois emplacements — `title`, `load`, `view`. Pas d'autres. Vous voulez autre chose — c'est
-un composant ou un helper.
-
-### Une seule façon de déclarer les routes
-
-Voir [`01-routing.md`](./01-routing.md).
-
-## Ce que nous NE faisons PAS
-
-- ❌ N'écrivez pas de composants sans trait d'union. C'est la règle du navigateur pour
-  les custom elements : `user-card` est correct, `usercard` ne l'est pas.
-- `x-*` n'est qu'une convention pour les exemples et les tests Mado, pas un standard de marque.
-  En production, utilisez un préfixe de domaine : `app-*`, `crm-*`, `ticket-*`, `admin-*`.
-- ❌ N'utilisez pas `innerHTML` directement. Uniquement via `html\`\``.
-- ❌ N'appelez pas `setTimeout`/`setInterval` sans nettoyage. Uniquement à l'intérieur de `effect()`.
-- ❌ Ne stockez pas d'état mutable global. Utilisez les signals et `context`.
-- ❌ N'ajoutez pas de packages sans discussion. Chaque dépendance est un engagement.
-
-## En cas de doute
+Les signals, resources et forms locaux à une page vivent dans `view()`. L'état
+partagé par un module vit dans `*.service.ts`.
 
-Si vous vous demandez "quelle est la meilleure façon ici ?" — c'est un signal que :
+## Ce que nous ne faisons pas
 
-1. Soit il existe un helper intégré que vous ne connaissez pas (consultez `docs/`).
-2. Soit c'est une nouvelle situation — discutez-en et **consignez-la** dans ce document
-   comme une convention supplémentaire.
+- Pas de JSX/Vue/Svelte syntax.
+- Pas de custom elements sans trait d'union.
+- Pas de lecture de signal via `.value`; un signal est une fonction.
+- Pas de `innerHTML` direct.
+- Pas de runtime packages sans discussion.
 
-"Un 'bien' cohérent vaut mieux qu'un 'idéal' varié."
+En cas de doute, documentez une recette claire plutôt que d'ajouter un nouveau
+primitive au core.

package/docs/fr/01-routing.md

@@ -1,202 +1,120 @@
 # Routage
 
-> Un seul fichier manifeste. Pas de scanners de dossiers. Pas de caractères spéciaux.
+> Une seule app map. Pas de folder scanners. Pas de syntaxe magique.
 
-## Pourquoi pas de routes basées sur les fichiers
+Mado ne déduit pas les routes depuis les fichiers. La composition doit rester
+lisible dans un seul endroit.
 
-Dans Next/SvelteKit/SolidStart, les routes apparaissent "magiquement" à partir des noms de
-fichiers. Cela a des avantages (la structure d'URL visible dans `pages/`), mais en production
-cela signifie :
+## App Manifest
 
-- Un plugin-scanner invisible dans le build. Sans lui, les fichiers ne sont que des fichiers.
-- Des caractères spéciaux dans les chemins : `[id]`, `(group)`, `_layout`, `+page.svelte`, `...slug`.
-- Les routes serveur et les routes client se mélangent.
-- Tester le routage est pénible : vous avez besoin d'un émulateur de build-tool.
-
-Mado considère cela comme **trop de magie**. Nous procédons différemment.
-
-## Manifeste
-
-Un seul fichier — `src/routes.ts`. Un seul objet. Lu de haut en bas.
+Utilisez `src/app.routes.ts` comme carte de l'application :
 
 ```ts
-// src/routes.ts
-import { routes } from '@madojs/mado';
-
-export default routes({
-  '/':              () => import('./pages/home.js'),
-  '/about':         () => import('./pages/about.js'),
-  '/users/:id':     () => import('./pages/user-profile.js'),
-  '/users/:id/edit':() => import('./pages/user-edit.js'),
-  '*':              () => import('./pages/not-found.js'),
-});
+import { layout, routes } from "@madojs/mado";
+import { requireAuth } from "./modules/auth/auth.public";
+import { authRoutes } from "./modules/auth/auth.routes";
+import { billingRoutes } from "./modules/billing/billing.routes";
+
+export const manifest = {
+  "/": () => import("./modules/home/home.page.js"),
+  "/login": layout({
+    layout: () => import("./layouts/auth-shell.layout.js"),
+    routes: authRoutes,
+  }),
+  "/billing": layout({
+    layout: () => import("./layouts/app-shell.layout.js"),
+    guard: requireAuth,
+    routes: billingRoutes,
+  }),
+  "*": () => import("./modules/home/not-found.page.js"),
+};
+
+export default routes(manifest);
 ```
 
-Vous voulez voir toutes les routes ? Ouvrez `routes.ts`. Pas de surprises.
+Ouvrez `app.routes.ts` pour voir les zones de l'app : pages publiques, auth,
+zones protégées, guards et shells.
 
-## Ce qui va à droite d'un chemin
+Exportez `manifest` pour `mado bake`.
 
-Chaque entrée est **l'une de ces trois choses** :
+## Module Routes
 
-### 1. Import lazy (recommandé)
+Les modules exportent de simples route maps. Ils n'appellent pas `layout()` et
+ne décident pas quel shell les enveloppe.
 
 ```ts
-'/posts': () => import('./pages/posts.js'),
+export const billingRoutes = {
+  "/invoices": () => import("./pages/invoices-list.page.js"),
+  "/invoices/:id": () => import("./pages/invoice-detail.page.js"),
+};
 ```
 
-- Le navigateur crée son propre chunk lors du bundling (esbuild --bundle --splitting).
-- Le module est chargé uniquement quand l'utilisateur visite la route.
-- Les navigations suivantes utilisent le résultat mis en cache.
+Le prefix est appliqué par `src/app.routes.ts` quand le module est monté sous
+`"/billing"`.
 
-### 2. Page prête (eager)
+## Layout Group
 
 ```ts
-import about from './pages/about.js';
-
-'/about': about,
+"/admin": layout({
+  layout: () => import("./layouts/app-shell.layout.js"),
+  guard: requireAuth,
+  routes: adminRoutes,
+}),
 ```
 
-Dans le bundle immédiatement, sans délai. Utilisez pour les pages critiques (accueil, connexion).
-
-### 3. Imbriqué avec layout
+Un layout est un fichier `page({...})` ordinaire :
 
 ```ts
-import { routes, nested } from '@madojs/mado';
-
-export default routes({
-  '/': () => import('./pages/home.js'),
-
-  '/admin/*': nested({
-    layout: () => import('./layouts/admin.js'),
-    routes: {
-      '':       () => import('./pages/admin/dashboard.js'),
-      'users':  () => import('./pages/admin/users.js'),
-      'logs':   () => import('./pages/admin/logs.js'),
-    },
-  }),
-});
-```
-
-Un layout est juste une `page({...})` ordinaire qui rend `ctx.child` où elle le souhaite :
-
-```ts
-// src/layouts/admin.ts
-import { page, html, css, component } from '@madojs/mado';
+import { html, page } from "@madojs/mado";
 
 export default page({
   view: ({ child }) => html`
-    <div class="admin">
-      <aside><nav>...</nav></aside>
-      <main>${child}</main>
+    <div class="layout layout--app">
+      <main class="app-main">${child}</main>
     </div>
   `,
 });
 ```
 
-## Contrat de page
-
-```ts
-import { page, html, resource, jsonFetcher } from '@madojs/mado';
-
-export default page({
-  title: ({ id }) => `Utilisateur #${id}`,        // string | (params) => string
-  load:  ({ id }) => resource(...),                // optionnel, retourne Resource ou data
-  view:  ({ params, data, path, child }) => html`...`,  // OBLIGATOIRE
-});
-```
+Gardez les layout views stateless. Les signals, resources et forms spécifiques
+à une page vivent dans les pages/components/resources.
 
-Trois emplacements, c'est tout. Si vous exportez autre chose que `page({...})`, une simple
-fonction par exemple — `routes()` génère une erreur claire :
-
-```
-[Mado] La route lazy n'a pas retourné page({...}) comme export par défaut.
-```
-
-## Paramètres d'URL
+## Page Contract
 
 ```ts
-'/users/:id': () => import('./pages/user.js'),
-```
+import { html, page } from "@madojs/mado";
 
-```ts
 export default page<{ id: string }>({
-  title: ({ id }) => `Utilisateur ${id}`,
-  view:  ({ params }) => html`<h1>${params.id}</h1>`,
+  title: ({ id }) => `User ${id}`,
+  view: ({ params }) => html`<h1>${params.id}</h1>`,
 });
 ```
 
-Les types sont passés dans `page<Params>` — `tsc` vérifie que vous n'accédez pas à
-`params.foo` qui n'existe pas dans la route.
-
-## Options globales
-
-```ts
-export default routes(
-  { '/': home, '/about': about, '*': nf },
-  {
-    titleSuffix: ' · MonApp',                      // → "Accueil · MonApp"
-    loading: () => html`<x-spinner/>`,             // pendant le chargement du module
-    error:   (err) => html`<x-fatal-error .err=${err}/>`,
-  },
-);
-```
-
-## Navigation programmatique
+## Navigation
 
 ```ts
-import route from './routes.js';
+import appRoutes from "./app.routes.js";
 
-route.navigate('/posts');
-route.navigate('/posts?page=2');
-route.navigate('/posts', { replace: true });
+appRoutes.navigate("/billing/invoices");
+appRoutes.navigate("/billing/invoices?page=2");
+appRoutes.navigate("/login", { replace: true });
 ```
 
-Les clics sur `<a href="/foo" data-link>` sont interceptés globalement (sans l'attribut —
-le navigateur effectue un rechargement complet, comme prévu pour les liens externes).
-
-## Paramètres de requête
+## Query Parameters
 
 ```ts
-import { queryParam } from '@madojs/mado';
+import { queryParam } from "@madojs/mado";
 
-const page = queryParam('page', '1');
-page();              // '1'
-page.set('2');       // history.replaceState + re-rendu
-page.set(null);      // supprimer le paramètre
-page.set('3', { push: true });   // history.pushState
+const page = queryParam("page", "1");
+page();
+page.set("2");
+page.set(null);
+page.set("3", { push: true });
 ```
 
-`queryParam` est un signal normal. Utilisez-le n'importe où : dans les pages, les composants,
-les computed.
-
-## Ce qui est intentionnellement absent
-
-- ❌ Auto-scan de `pages/`. **Un seul fichier manifeste explicite**.
-- ❌ Caractères spéciaux dans les chemins (`[id]`, `(group)`, `_layout`). **Les paramètres sont
-  uniquement `:name`, rien d'autre**.
-- ❌ Routage côté serveur dans le même manifeste. Mado est un framework côté client.
-- ❌ Auto-préchargement au survol. Si vous en avez vraiment besoin — faites-le manuellement :
-  `link.addEventListener('mouseenter', loader)`. Généralement inutile.
-
-## FAQ
-
-**Et si j'ai 100 routes ? Le fichier ne deviendra-t-il pas énorme ?**
-Il atteindra ~150 lignes. C'est toujours **une seule source de vérité** contre une centaine
-de fichiers dans `pages/` avec des noms magiques. En pratique, même les grands projets (1000+
-pages) peuvent se diviser en manifestes de fonctionnalités :
-
-```ts
-import { routes } from '@madojs/mado';
-import adminRoutes from './features/admin/routes.js';
-import billingRoutes from './features/billing/routes.js';
-
-export default routes({
-  ...adminRoutes,
-  ...billingRoutes,
-  '*': () => import('./pages/not-found.js'),
-});
-```
+## Ce qui est absent volontairement
 
-**Comment tester le routage ?**
-Importez `routes.ts` — c'est juste un objet. Substituez votre router mock. Pas besoin
-d'émulation de build-tool.
+- Pas d'auto-scan des dossiers de pages.
+- Pas de syntaxe filesystem comme `[id]`, `(group)`, `_layout`.
+- Pas de server routes dans le manifest client.
+- Pas de découverte cachée des layouts.

package/docs/fr/02-project-layout.md

@@ -1,65 +1,84 @@
 # Structure du projet
 
-Chaque nouveau projet Mado a la même structure. C'est une convention **obligatoire**.
+Chaque application Mado utilise la même forme canonique. Cette convention
+permet aux humains et aux assistants IA de savoir où placer le code.
 
-```
+```txt
 my-app/
 ├── package.json              # runtime dep: @madojs/mado
 ├── tsconfig.json             # strict TS, ES2022, Bundler resolution
-├── mado.config.json          # configuration dev/build/bake/bundle
-├── index.html                # shell SPA et template pour bake
-├── public/                   # assets statiques (favicon, images, robots.txt)
+├── vite.config.ts            # mado() from @madojs/mado/vite
+├── index.html                # entrée Vite + shell SPA
+├── public/                   # assets statiques: favicon, images, robots.txt
 └── src/
-    ├── main.ts               # entrée : mount router dans #app
-    ├── routes.ts             # route manifest (default + named manifest)
-    ├── pages/                # une page = un fichier = `export default page({...})`
-    ├── components/           # composants réutilisables (x-*)
-    ├── layouts/              # pages de layout (pour nested)
-    └── lib/
-        ├── api.ts            # tous les wrappers fetch
-        ├── contexts.ts       # createContext(...)
-        ├── theme.ts          # thèmes
-        └── ...               # utilitaires, types, règles métier
+    ├── main.ts               # importe le CSS et monte le router dans #app
+    ├── app.routes.ts         # app map: manifest + default routes(...)
+    ├── layouts/              # layouts de zones d'application
+    ├── shared/               # ui, http, lib, styles
+    └── modules/              # bounded contexts
+        └── billing/
+            ├── billing.routes.ts
+            ├── billing.public.ts
+            ├── billing.types.ts
+            ├── pages/
+            ├── data/
+            ├── api/
+            └── _contracts/
 ```
 
 ## États Des Artefacts
 
 | Dossier | Ce que c'est | Écrit par | Déployer ? |
-|---|---|---|---|
+| --- | --- | --- | --- |
 | `src/` | sources TypeScript | vous | non |
-| `dist/` | output `tsc`, native ESM pour dev | `mado build` | non |
-| `public/` | assets statiques écrits par vous | vous | via `out/` |
-| `out/` | artefact déployable : shell SPA + bundles + HTML baked promu | `mado release` | oui |
+| `public/` | assets statiques copiés tels quels | vous | via `out/` |
+| `out/` | artefact déployable: shell SPA + assets + HTML baked | `mado release` | oui |
+
+`mado release` = `typecheck` + build Vite (`out/index.html`, `out/assets/`,
+`public/*`) + `bake` directement dans les chemins de routes + `sitemap.xml` +
+precompression.
 
-`mado release` = `typecheck` + `build` (`dist/`) + `bundle`
-(`out/assets/`) + `bake` (`out/baked/`) + promotion du HTML baked et de
-`sitemap.xml` dans les chemins déployables de `out/` + copie de `public/*`.
+`index.html` reste à la racine car Vite le traite comme entry template. Mettez
+dans `public/` uniquement les fichiers à copier tels quels.
 
 ## Où mettre un nouveau fichier ?
 
 | Quoi | Où |
-|---|---|
-| Page pour une nouvelle URL | `src/pages/foo.ts` + ajouter à `src/routes.ts` |
-| Widget UI réutilisable | `src/components/foo-bar.ts` |
-| Wrapper API | `src/lib/api.ts` (ajouter une méthode) |
-| Contexte global (thème, utilisateur, i18n) | `src/lib/<nom>.ts` |
-| Fonction pure sans UI | `src/lib/util/<nom>.ts` |
+| --- | --- |
+| Page pour une nouvelle URL | `src/modules/<module>/pages/<name>.page.ts` + module routes |
+| Route map de module | `src/modules/<module>/<module>.routes.ts` |
+| App shell/layout | `src/layouts/<zone>.layout.ts` |
+| Widget UI partagé | `src/shared/ui/<x-name>.component.ts` |
+| Widget UI propre à un module | `src/modules/<module>/components/<name>.component.ts` |
+| API connector | `src/modules/<module>/api/<provider>.connector.ts` |
+| Data resource/mutation | `src/modules/<module>/data/<name>.resource.ts` |
+| Auth/session | `src/modules/auth/` |
+| Surface publique de module | `src/modules/<module>/<module>.public.ts` |
+| Fonction pure sans UI | `src/shared/lib/<name>.ts` |
+| Image statique / favicon | `public/<file>` |
+| CSS de shell | `src/shared/styles/shell.css` |
+| CSS de contenu page | `src/shared/styles/content.css` |
 
-Si vous ne savez pas où — c'est un signal que **l'architecture souffre**.
-Consultez l'équipe, **consignez** la réponse dans `docs/`.
+## Vite Config
 
-## Règles de nommage
+```ts
+import { defineConfig } from "vite";
+import { mado } from "@madojs/mado/vite";
+
+export default defineConfig({
+  plugins: [mado()],
+  css: {
+    transformer: "lightningcss",
+  },
+});
+```
 
-| Quoi | Style | Exemple |
-|---|---|---|
-| Fichier | kebab-case | `user-profile.ts` |
-| Tag de composant | `x-` + kebab | `<x-user-profile>` |
-| Context | PascalCase + `Ctx` | `ThemeCtx`, `AuthCtx` |
-| Signal | camelCase | `userId`, `isLoggedIn` |
-| Fonction de page (composant interne) | `x-<route>-page` | `<x-posts-page>` |
+Le starter active le transformer Lightning CSS de Vite. Mado ne possède pas le
+prefixing, le lowering CSS ou la minification.
 
-## Ce qui ne va PAS dans src/
+## Ce qui ne va PAS dans `src/`
 
-- ❌ Configurations de build-tool (webpack, rollup, vite) — nous n'en avons pas.
-- ❌ Fichiers `.env` — les variables d'environnement sont lues depuis `process.env`/`import.meta.env` dans `lib/config.ts`.
-- ❌ Tests mélangés avec le code — tout dans `test/`.
+- Configs de build-tool supplémentaires — utilisez `vite.config.ts`.
+- Fichiers `.env` — lisez l'env dans `src/shared/lib/config.ts` puis importez
+  ce module.
+- Tests mélangés au code — gardez-les dans `test/`.

package/docs/fr/03-static-bake.md

@@ -163,7 +163,7 @@ out/
     {"slug":"mado-mug","name":"Mado Mug","price":12,"..."}
   </script>
 
-  <script type="module" src="/dist/examples/main.js"></script>
+  <script type="module" src="/assets/main-abc123.js"></script>
 </body>
 ```
 

package/docs/fr/05-why-mado.md

@@ -31,11 +31,11 @@ Si votre cas ne tombe pas dans le dernier point — Mado n'est probablement pas
 | Taille | ~6 Ko | ~16 Ko |
 | Âge / support | ~10 ans, Google | 6 mois, auteur unique |
 | Réactivité | décorateurs `@property` + `requestUpdate` manuel | signals (`signal`/`computed`/`effect`) intégrés |
-| Router | aucun, vous devez en trouver un (`@lit-labs/router`, etc.) | inclus : `routes()` + nested + prefetch + sync-cache |
+| Router | aucun, vous devez en trouver un (`@lit-labs/router`, etc.) | inclus : `routes()` + layout groups + prefetch |
 | Chargement de données | aucun, vous devez l'assembler | `resource()` + `mutation()` + invalidation glob |
 | Forms | aucun | `useForm()` avec contraintes proches du HTML |
 | SEO / statique | complexe (`@lit-labs/ssr`) | `bake` (linkedom) + edge-prerender |
-| Build | nécessite esbuild/rollup/webpack | `tsc` suffit |
+| Build | nécessite des plugins spécifiques au framework | Vite transport + runtime natif |
 | Style de code | classes + décorateurs | fonctions + tagged templates |
 | Écosystème | réel (Shoelace, Material Web, etc.) | aucun |
 | Quand choisir | écrire un design system / bibliothèque Web Components pour l'intégration | écrire une application complète, vouloir tout dans une boîte |
@@ -55,14 +55,14 @@ Si votre cas ne tombe pas dans le dernier point — Mado n'est probablement pas
 | Réactivité | signals (même classe d'idées) | signals |
 | Templates | JSX (compilé en expressions réactives) | tagged template `html\`\`` |
 | Modèle de composant | fonctions, nœuds virtuels Solid | Web Components |
-| Build | Vite + babel-plugin-solid requis | `tsc` uniquement |
+| Build | Vite + babel-plugin-solid requis | Vite pour dev/build, aucune dépendance runtime |
 | Router | `@solidjs/router` | inclus |
 | Données | `createResource` | `resource()` |
 | SSR | sérieusement supporté (SolidStart) | intentionnellement absent |
 | Écosystème | en croissance, ~50 packages | aucun |
-| Quand choisir | besoin de top performance + JSX + prêt à configurer le build | vouloir tourner sans build / infrastructure minimale |
+| Quand choisir | besoin de top performance + JSX + prêt à configurer le build | vouloir un runtime browser-native avec tooling simple |
 
-**Pitch honnête :** *"Solid est techniquement plus rapide et plus mature. Mais Solid nécessite Vite + un plugin babel. Mado ne nécessite rien d'autre que `tsc` — c'est 'ouvrir VS Code, F5, et travailler'. Si cette différence n'est pas critique — allez avec Solid."*
+**Pitch honnête :** *"Solid est techniquement plus rapide et plus mature. Mado est plus simple dans son idée : runtime browser-native, Web Components, tagged templates, et Vite fait le travail dev/build ennuyeux. Si vous voulez JSX et un écosystème plus large, allez avec Solid."*
 
 ---
 
@@ -153,7 +153,7 @@ Je ne vais pas m'étendre là-dessus longtemps, car React est dans une **catégo
 
 Pas la taille, pas la performance, pas les signals — tout a de meilleurs concurrents.
 
-> **"Ouvrez le source et lisez-le en une soirée. ~3500 lignes, 12 modules. Si quelque chose casse — vous n'allez pas sur une issue avec 3000 commentaires. Vous allez dans `src/router.ts` et lisez 500 lignes."**
+> **"Ouvrez le source et lisez-le en une soirée. ~3500 lignes, petits modules. Si quelque chose casse — vous n'allez pas sur une issue avec 3000 commentaires. Vous allez dans `src/router/` et lisez le code."**
 
 C'est ce qu'on appelle la **propriété** — vous possédez le code, plutôt que de dépendre de celui de quelqu'un d'autre.