odoro 0.1.0

package/dist/registry/index.d.ts

@@ -0,0 +1,316 @@
+import * as z from 'zod/mini';
+
+/**
+ * Format d'une entree de registre.
+ *
+ * ## Pourquoi le schema vit ici
+ *
+ * Le format est un **contrat** entre le registre qui publie et le client qui
+ * telecharge. Le placer du cote client n'est pas arbitraire : c'est la ou la
+ * validation compte le plus. Le registre valide ce qu'il produit avant de le
+ * publier ; le client, lui, valide ce qu'il recoit d'un serveur qu'il ne
+ * controle pas, juste avant d'ecrire des fichiers dans le projet de
+ * l'utilisateur.
+ *
+ * Une seule definition, donc, employee aux deux bouts.
+ *
+ * ## Le poids de la validation
+ *
+ * Deux decisions, mesurees plutot que supposees.
+ *
+ * La bibliotheque est **integree a la compilation** plutot que declaree en
+ * dependance : installee, elle pese pres de six megaoctets, alors que la
+ * surface reellement employee en represente une fraction.
+ *
+ * Et c'est sa variante concue pour le decoupage qui est employee, non son API
+ * usuelle : la premiere produit treize kilo-octets minifies, la seconde quatre
+ * cent vingt-sept. Un facteur trente-trois pour la meme validation. L'ecriture
+ * y est plus verbeuse — les controles sont des fonctions plutot que des
+ * methodes chainees — mais plaider le poids pour le moteur graphique et
+ * l'ignorer ici serait incoherent.
+ *
+ * @module
+ */
+
+/** Categories de composants du registre. */
+declare const CATEGORIES: readonly ["text", "background", "effect", "hero", "image", "ui", "section", "hooks"];
+/** Niveaux de cout d'un composant. */
+declare const PERF_TIERS: readonly ["light", "medium", "heavy"];
+/** Backends graphiques declarables. */
+declare const GL_BACKENDS: readonly ["ogl", "three"];
+/** Nature du repli visuel d'un composant. */
+declare const FALLBACKS: readonly ["poster", "gradient", "static", "none"];
+/** Forme d'une entree, avant les regles qui croisent plusieurs champs. */
+declare const baseSchema: z.ZodMiniObject<{
+    name: z.ZodMiniString<string>;
+    category: z.ZodMiniEnum<{
+        text: "text";
+        background: "background";
+        effect: "effect";
+        hero: "hero";
+        image: "image";
+        ui: "ui";
+        section: "section";
+        hooks: "hooks";
+    }>;
+    title: z.ZodMiniString<string>;
+    description: z.ZodMiniString<string>;
+    engine: z.ZodMiniDefault<z.ZodMiniObject<{
+        gsap: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+        gl: z.ZodMiniDefault<z.ZodMiniUnion<readonly [z.ZodMiniLiteral<false>, z.ZodMiniEnum<{
+            ogl: "ogl";
+            three: "three";
+        }>]>>;
+    }, z.core.$strip>>;
+    files: z.ZodMiniArray<z.ZodMiniObject<{
+        path: z.ZodMiniString<string>;
+        target: z.ZodMiniString<string>;
+    }, z.core.$strip>>;
+    dependencies: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    registryDependencies: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    tokens: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    props: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniObject<{
+        name: z.ZodMiniString<string>;
+        type: z.ZodMiniString<string>;
+        required: z.ZodMiniDefault<z.ZodMiniBoolean<boolean>>;
+        default: z.ZodMiniOptional<z.ZodMiniUnion<readonly [z.ZodMiniString<string>, z.ZodMiniNumber<number>, z.ZodMiniBoolean<boolean>]>>;
+        unit: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        description: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        min: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
+        max: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
+        step: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
+        options: z.ZodMiniOptional<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    }, z.core.$strip>>>;
+    perf: z.ZodMiniObject<{
+        tier: z.ZodMiniEnum<{
+            light: "light";
+            medium: "medium";
+            heavy: "heavy";
+        }>;
+        backend: z.ZodMiniDefault<z.ZodMiniUnion<readonly [z.ZodMiniLiteral<false>, z.ZodMiniEnum<{
+            ogl: "ogl";
+            three: "three";
+        }>]>>;
+        notes: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        fallback: z.ZodMiniOptional<z.ZodMiniEnum<{
+            static: "static";
+            poster: "poster";
+            gradient: "gradient";
+            none: "none";
+        }>>;
+    }, z.core.$strip>;
+}, z.core.$strip>;
+/** Une entree telle qu'elle sort de la validation. */
+type RegistryMeta = z.infer<typeof baseSchema>;
+/** Entree telle qu'elle est ecrite dans un `meta.json`, avant valeurs par defaut. */
+type RegistryMetaInput = z.input<typeof baseSchema>;
+/**
+ * Description complete d'une entree de registre.
+ *
+ * Les regles qui croisent plusieurs champs sont verifiees ici plutot que dans
+ * le script de validation : elles font partie du format, et un registre tiers
+ * qui reutiliserait ce schema doit les subir aussi.
+ */
+declare const metaSchema: z.ZodMiniObject<{
+    name: z.ZodMiniString<string>;
+    category: z.ZodMiniEnum<{
+        text: "text";
+        background: "background";
+        effect: "effect";
+        hero: "hero";
+        image: "image";
+        ui: "ui";
+        section: "section";
+        hooks: "hooks";
+    }>;
+    title: z.ZodMiniString<string>;
+    description: z.ZodMiniString<string>;
+    engine: z.ZodMiniDefault<z.ZodMiniObject<{
+        gsap: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+        gl: z.ZodMiniDefault<z.ZodMiniUnion<readonly [z.ZodMiniLiteral<false>, z.ZodMiniEnum<{
+            ogl: "ogl";
+            three: "three";
+        }>]>>;
+    }, z.core.$strip>>;
+    files: z.ZodMiniArray<z.ZodMiniObject<{
+        path: z.ZodMiniString<string>;
+        target: z.ZodMiniString<string>;
+    }, z.core.$strip>>;
+    dependencies: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    registryDependencies: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    tokens: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    props: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniObject<{
+        name: z.ZodMiniString<string>;
+        type: z.ZodMiniString<string>;
+        required: z.ZodMiniDefault<z.ZodMiniBoolean<boolean>>;
+        default: z.ZodMiniOptional<z.ZodMiniUnion<readonly [z.ZodMiniString<string>, z.ZodMiniNumber<number>, z.ZodMiniBoolean<boolean>]>>;
+        unit: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        description: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        min: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
+        max: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
+        step: z.ZodMiniOptional<z.ZodMiniNumber<number>>;
+        options: z.ZodMiniOptional<z.ZodMiniArray<z.ZodMiniString<string>>>;
+    }, z.core.$strip>>>;
+    perf: z.ZodMiniObject<{
+        tier: z.ZodMiniEnum<{
+            light: "light";
+            medium: "medium";
+            heavy: "heavy";
+        }>;
+        backend: z.ZodMiniDefault<z.ZodMiniUnion<readonly [z.ZodMiniLiteral<false>, z.ZodMiniEnum<{
+            ogl: "ogl";
+            three: "three";
+        }>]>>;
+        notes: z.ZodMiniOptional<z.ZodMiniString<string>>;
+        fallback: z.ZodMiniOptional<z.ZodMiniEnum<{
+            static: "static";
+            poster: "poster";
+            gradient: "gradient";
+            none: "none";
+        }>>;
+    }, z.core.$strip>;
+}, z.core.$strip>;
+/** Identifiant complet d'une entree, sous la forme `categorie/nom`. */
+declare function entryId(meta: Pick<RegistryMeta, 'category' | 'name'>): string;
+/** Une entree publiee, code source inline. */
+interface PublishedEntry extends RegistryMeta {
+    /** Identifiant complet. */
+    readonly id: string;
+    /** Contenu des fichiers, indexe par leur chemin dans le composant. */
+    readonly sources: Readonly<Record<string, string>>;
+}
+/** Resume d'une entree, tel qu'il figure dans l'index. */
+interface IndexEntry {
+    readonly id: string;
+    readonly name: string;
+    readonly category: (typeof CATEGORIES)[number];
+    readonly title: string;
+    readonly description: string;
+    readonly tier: (typeof PERF_TIERS)[number];
+    readonly backend: false | (typeof GL_BACKENDS)[number];
+    readonly registryDependencies: readonly string[];
+}
+/** Index du registre, servi a la racine. */
+interface RegistryIndex {
+    /** Version du format, pour que le client sache s'il sait lire. */
+    readonly version: 1;
+    /** Date de generation, en ISO 8601. */
+    readonly generatedAt: string;
+    /** Resume de chaque entree, sans le code source. */
+    readonly entries: readonly IndexEntry[];
+}
+/**
+ * Valide une entree et rend des messages lisibles en cas d'echec.
+ *
+ * Les messages bruts sont exacts mais arides : ils sont reformates en chemin
+ * plus explication, pour qu'un auteur de composant sache quoi corriger sans
+ * avoir a lire le schema.
+ *
+ * @example
+ * const result = parseMeta(JSON.parse(raw), 'text/split-reveal')
+ * if (!result.ok) console.error(result.problems.join('\n'))
+ */
+declare function parseMeta(value: unknown, origin: string): {
+    ok: true;
+    meta: RegistryMeta;
+} | {
+    ok: false;
+    problems: string[];
+};
+
+/**
+ * Resolution du graphe de dependances du registre.
+ *
+ * Une entree peut en reclamer d'autres — un hook partage, un utilitaire. Il
+ * faut donc, avant d'ecrire quoi que ce soit chez l'utilisateur, savoir
+ * exactement quelles entrees installer et dans quel ordre.
+ *
+ * ## Les cycles
+ *
+ * Rien n'interdit structurellement a deux entrees de se reclamer l'une
+ * l'autre, et un parcours naif s'y perdrait indefiniment. Le cycle est donc
+ * detecte, et **signale avec le chemin qui le compose** : une erreur qui dit
+ * seulement « cycle detecte » oblige a le chercher a la main.
+ *
+ * ## L'ordre
+ *
+ * Les dependances sont installees avant ce qui les reclame. Cela n'a pas
+ * d'importance pour l'ecriture de fichiers, qui est independante, mais cela en
+ * a pour ce que l'utilisateur voit defiler : une liste ou les dependances
+ * apparaissent apres leur consommateur se lit comme une erreur.
+ *
+ * @module
+ */
+
+/** Ce qu'il faut savoir d'une entree pour resoudre le graphe. */
+interface ResolvableEntry {
+    /** Identifiant complet, sous la forme `categorie/nom`. */
+    readonly id: string;
+    /** Entrees reclamees par celle-ci. */
+    readonly registryDependencies: readonly string[];
+}
+/** Resultat d'une resolution reussie. */
+interface ResolvedGraph {
+    /** Entrees a installer, dependances d'abord. */
+    readonly order: readonly string[];
+    /** Entrees ajoutees qui n'avaient pas ete demandees. */
+    readonly implied: readonly string[];
+}
+/** Ce qui a empeche la resolution. */
+type ResolutionProblem = {
+    readonly kind: 'introuvable';
+    readonly id: string;
+    readonly requiredBy: string | null;
+} | {
+    readonly kind: 'cycle';
+    readonly path: readonly string[];
+};
+/** Resultat d'une resolution. */
+type ResolutionResult = {
+    readonly ok: true;
+    readonly graph: ResolvedGraph;
+} | {
+    readonly ok: false;
+    readonly problems: readonly ResolutionProblem[];
+};
+/**
+ * Met un probleme de resolution en phrase lisible.
+ *
+ * @example
+ * describeProblem({ kind: 'cycle', path: ['a', 'b', 'a'] })
+ * // 'Cycle de dependances : a → b → a'
+ */
+declare function describeProblem(problem: ResolutionProblem): string;
+/**
+ * Resout les dependances d'un ensemble d'entrees demandees.
+ *
+ * @param requested Identifiants demandes par l'utilisateur.
+ * @param available Toutes les entrees connues, indexees par identifiant.
+ *
+ * @example
+ * const result = resolveGraph(['hero/canopy'], catalogue)
+ * if (result.ok) install(result.graph.order)
+ */
+declare function resolveGraph(requested: readonly string[], available: ReadonlyMap<string, ResolvableEntry>): ResolutionResult;
+/**
+ * Verifie l'integrite d'un catalogue entier.
+ *
+ * Emploi typique : la validation du registre avant publication, ou toutes les
+ * entrees sont resolues d'un coup plutot qu'une par une.
+ *
+ * @example
+ * const problems = validateCatalogue(catalogue)
+ * if (problems.length > 0) process.exit(1)
+ */
+declare function validateCatalogue(available: ReadonlyMap<string, ResolvableEntry>): readonly ResolutionProblem[];
+/**
+ * Construit un catalogue a partir d'entrees completes.
+ *
+ * @example
+ * const catalogue = toCatalogue(metas)
+ */
+declare function toCatalogue(entries: readonly (RegistryMeta & {
+    id: string;
+})[]): Map<string, ResolvableEntry>;
+
+export { CATEGORIES, FALLBACKS, GL_BACKENDS, type IndexEntry, PERF_TIERS, type PublishedEntry, type RegistryIndex, type RegistryMeta, type RegistryMetaInput, type ResolutionProblem, type ResolutionResult, type ResolvableEntry, type ResolvedGraph, describeProblem, entryId, metaSchema, parseMeta, resolveGraph, toCatalogue, validateCatalogue };

package/dist/registry/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export { CATEGORIES, FALLBACKS, GL_BACKENDS, PERF_TIERS, describeProblem, entryId, metaSchema, parseMeta, resolveGraph, toCatalogue, validateCatalogue } from '../chunk-G2WW7N4C.js';

package/dist/server-MZ76LPAG.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export { extractEntries, injectClient, startDevServer } from './chunk-G5QXVBYT.js';
+import './chunk-JMEHF3KN.js';

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "odoro",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "author": "BouBouw",
+  "description": "Moteur de developpement et echafaudage Odoro : odoro create, dev, build, preview.",
+  "engines": {
+    "node": ">=20"
+  },
+  "bin": {
+    "odoro": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "client.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./client": {
+      "types": "./client.d.ts"
+    },
+    "./cli": {
+      "types": "./dist/cli.d.ts",
+      "import": "./dist/cli.js"
+    },
+    "./registry": {
+      "types": "./dist/registry/index.d.ts",
+      "import": "./dist/registry/index.js"
+    }
+  },
+  "dependencies": {
+    "@babel/core": "^8.0.1",
+    "@clack/prompts": "^0.11.0",
+    "esbuild": "^0.28.2",
+    "picocolors": "^1.1.1",
+    "react-refresh": "^0.18.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.18.8",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4",
+    "zod": "^4.5.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/templates/react-ts/README.md

@@ -0,0 +1,52 @@
+# Odoro — application monopage
+
+Projet genere par `odoro create`. Le routeur, le moteur d'animation, le systeme
+de style et les composants d'interface viennent tous de `@odoro-cli/libs` ; le
+serveur de developpement et la compilation viennent du moteur `odoro`.
+
+## Structure
+
+```
+index.html          Document et point d'entree : la balise <script type="module">
+                    designe le fichier a compiler.
+odoro.config.ts     Configuration du moteur : alias, port, proxy, build.
+public/             Fichiers copies tels quels a la racine du site.
+src/
+  main.tsx          Montage de React et imports de feuilles de style.
+  App.tsx           Declaration des routes et enveloppe commune.
+  routes/           Une page par route.
+  styles.css        Styles propres au projet et surcharges de tokens.
+  odoro-env.d.ts    Types ambiants (import.meta.env, imports de ressources).
+```
+
+## Scripts
+
+| Commande    | Effet                                               |
+| ----------- | --------------------------------------------------- |
+| `dev`       | Serveur de developpement avec rechargement a chaud. |
+| `build`     | Compilation de production dans `dist/`.             |
+| `preview`   | Sert `dist/` comme le ferait un hebergeur statique. |
+| `typecheck` | Verification des types, sans emission.              |
+
+## Personnalisation
+
+Toutes les valeurs visuelles passent par des variables CSS. Surcharger
+`--o-palette-brand-600` dans `src/styles.css` retheme l'application **et** les
+composants de la librairie, sans toucher a leur code.
+
+Deux feuilles de style sont disponibles :
+
+- `@odoro-cli/libs/styles.css` — structure et couleurs semantiques ;
+- `@odoro-cli/libs/styles.full.css` — la meme, plus les utilitaires de couleur sur
+  la palette complete.
+
+Importer l'une **ou** l'autre, jamais les deux.
+
+## Rechargement a chaud
+
+Modifier un composant remplace son code sans demonter l'arbre : la valeur d'un
+compteur, le texte saisi dans un champ, l'onglet ouvert survivent a l'edition.
+Une feuille de style est echangee sans rechargement.
+
+Un module qui n'exporte pas que des composants recharge la page, et c'est
+correct : rien ne permettrait d'en propager le changement sans risque.

package/templates/react-ts/_gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+*.local
+.DS_Store
+*.log
+.env
+.env.*
+!.env.example

package/templates/react-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Odoro</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-ts/odoro.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'odoro'
+
+export default defineConfig({
+  alias: {
+    '@': 'src',
+  },
+  server: {
+    port: 5180,
+  },
+})

package/templates/react-ts/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "odoro-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "odoro dev",
+    "build": "odoro build",
+    "preview": "odoro preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@odoro-cli/libs": "^0.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "odoro": "^0.0.0",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/react-ts/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#5b62f4" />
+  <circle cx="16" cy="16" r="7" fill="none" stroke="#fff" stroke-width="3" />
+</svg>

package/templates/react-ts/src/App.tsx

@@ -0,0 +1,66 @@
+import { Link, Outlet, Route, Router, Routes, useLocation } from '@odoro-cli/libs/router'
+
+import { About } from '@/routes/About'
+import { Home } from '@/routes/Home'
+import { NotFound } from '@/routes/NotFound'
+
+/** Barre de navigation, avec mise en valeur de la route courante. */
+function Nav() {
+  const { pathname } = useLocation()
+
+  const links = [
+    { to: '/', label: 'Accueil' },
+    { to: '/a-propos', label: 'A propos' },
+  ]
+
+  return (
+    <nav className="o-flex o-items-center o-gap-4 o-px-6 o-py-4 o-border-b o-border-zinc-200 dark:o-border-zinc-800">
+      <span className="o-font-semibold o-text-brand-600 dark:o-text-brand-400">
+        Odoro
+      </span>
+      {links.map((link) => (
+        <Link
+          key={link.to}
+          to={link.to}
+          className={
+            pathname === link.to
+              ? 'o-text-zinc-900 dark:o-text-zinc-50 o-font-medium o-no-underline'
+              : 'o-text-zinc-500 dark:o-text-zinc-400 o-no-underline hover:o-text-zinc-900 dark:hover:o-text-zinc-50 o-transition'
+          }
+        >
+          {link.label}
+        </Link>
+      ))}
+    </nav>
+  )
+}
+
+/** Enveloppe commune a toutes les pages. */
+function Layout() {
+  return (
+    <div className="app-shell">
+      <Nav />
+      <main className="o-view-transition-page o-mx-auto o-w-full o-max-w-3xl o-px-6 o-py-12">
+        <Outlet />
+      </main>
+      <footer className="o-px-6 o-py-6 o-text-sm o-text-zinc-500 dark:o-text-zinc-400 o-border-t o-border-zinc-200 dark:o-border-zinc-800">
+        Construit avec Odoro.
+      </footer>
+    </div>
+  )
+}
+
+/** Racine de l'application. */
+export function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="a-propos" element={<About />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
+      </Routes>
+    </Router>
+  )
+}

package/templates/react-ts/src/main.tsx

@@ -0,0 +1,18 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { App } from '@/App'
+
+import '@odoro-cli/libs/styles.css'
+import '@/styles.css'
+
+const container = document.getElementById('root')
+if (container === null) {
+  throw new Error('Element racine "#root" introuvable dans index.html.')
+}
+
+createRoot(container).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/react-ts/src/odoro-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="odoro/client" />

package/templates/react-ts/src/routes/About.tsx

@@ -0,0 +1,19 @@
+import { Reveal } from '@odoro-cli/libs/motion'
+import { Link } from '@odoro-cli/libs/router'
+
+/** Page « a propos », qui demontre la navigation entre routes. */
+export function About() {
+  return (
+    <Reveal className="o-flex o-flex-col o-gap-6">
+      <h1 className="o-text-3xl o-font-bold o-tracking-tight">A propos</h1>
+      <p className="o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
+        Cette page est servie par le routeur d Odoro. La navigation ne recharge pas le
+        document : elle passe par l historique du navigateur, restaure la position de
+        defilement et joue une transition de page quand le navigateur la prend en charge.
+      </p>
+      <p>
+        <Link to="/">Retour a l accueil</Link>
+      </p>
+    </Reveal>
+  )
+}