odoro 0.1.0

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

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+
+import { Reveal, Stagger, useAnimate } from '@odoro-cli/libs/motion'
+import { Link } from '@odoro-cli/libs/router'
+import { Button } from '@odoro-cli/libs/ui'
+
+/** Trois arguments mis en avant sur la page d'accueil. */
+const FEATURES = [
+  {
+    title: 'Routeur',
+    body: 'Segments dynamiques, routes imbriquees, chargement paresseux et transitions de page.',
+  },
+  {
+    title: 'Animations',
+    body: "Une couche mince sur le moteur du navigateur. Les animations reduites sont respectees d'office.",
+  },
+  {
+    title: 'Styles',
+    body: 'Des tokens en source de verite, une feuille statique, aucun scan a l execution.',
+  },
+]
+
+/** Page d'accueil. */
+export function Home() {
+  const [ref, controls] = useAnimate<HTMLSpanElement>()
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="o-flex o-flex-col o-gap-12">
+      <Reveal>
+        <h1 className="o-text-4xl o-font-bold o-tracking-tight">
+          Un point de depart maitrise.
+        </h1>
+        <p className="o-mt-4 o-text-lg o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
+          Ce projet a ete genere par <code className="o-font-mono">odoro create</code>. Le
+          routeur, le moteur d animation et le systeme de style viennent tous de la meme
+          librairie.
+        </p>
+      </Reveal>
+
+      <Stagger step={80} className="o-grid o-grid-cols-1 md:o-grid-cols-3 o-gap-4">
+        {FEATURES.map((feature) => (
+          <article
+            key={feature.title}
+            className="o-rounded-lg o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-5"
+          >
+            <h2 className="o-font-semibold">{feature.title}</h2>
+            <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+              {feature.body}
+            </p>
+          </article>
+        ))}
+      </Stagger>
+
+      <div className="o-flex o-items-center o-gap-4">
+        <Button
+          onClick={() => {
+            setCount((value) => value + 1)
+            void controls.play(
+              [
+                { transform: 'translateY(0)' },
+                { transform: 'translateY(-0.4rem)' },
+                { transform: 'translateY(0)' },
+              ],
+              { duration: 'fast', easing: 'emphasized' },
+            )
+          }}
+        >
+          Compter
+        </Button>
+        <span ref={ref} className="o-inline-block o-text-lg o-tabular-nums">
+          {count}
+        </span>
+        <Link to="/a-propos" className="o-text-sm">
+          En savoir plus
+        </Link>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+import { Link } from '@odoro-cli/libs/router'
+
+/** Page affichee pour toute route inconnue. */
+export function NotFound() {
+  return (
+    <div className="o-flex o-flex-col o-gap-4" role="alert">
+      <h1 className="o-text-3xl o-font-bold">404</h1>
+      <p className="o-text-zinc-500 dark:o-text-zinc-400">Cette page n existe pas.</p>
+      <p>
+        <Link to="/">Retour a l accueil</Link>
+      </p>
+    </div>
+  )
+}

package/templates/react-ts/src/styles.css

@@ -0,0 +1,13 @@
+/* Styles propres a l'application.
+   Tout le reste vient des tokens Odoro : surcharger une variable ci-dessous
+   suffit a rethemer l'ensemble, composants de la librairie compris. */
+
+:root {
+  --o-color-primary: oklch(52.4% 0.212 275);
+}
+
+.app-shell {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}

package/templates/react-ts/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "baseUrl": "."
+  },
+  "include": ["src", "odoro.config.ts"]
+}

package/templates/react-ts-server/Dockerfile

@@ -0,0 +1,51 @@
+# syntax=docker/dockerfile:1
+
+# --- Etape 1 : dependances -----------------------------------------------
+# Isolee pour que le cache de couches survive a toute modification du code :
+# seule une modification du manifeste relance l'installation.
+FROM node:22-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json* pnpm-lock.yaml* yarn.lock* ./
+RUN if [ -f pnpm-lock.yaml ]; then \
+      corepack enable && pnpm install --frozen-lockfile; \
+    elif [ -f yarn.lock ]; then \
+      corepack enable && yarn install --immutable; \
+    else \
+      npm ci; \
+    fi
+
+# --- Etape 2 : compilation ------------------------------------------------
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+# --- Etape 3 : dependances de production ----------------------------------
+# Reinstallees a part : l'image finale ne doit pas embarquer la chaine de
+# compilation, qui pese souvent plus que l'application elle-meme.
+FROM node:22-alpine AS runtime-deps
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci --omit=dev || npm install --omit=dev
+
+# --- Etape 4 : image finale -----------------------------------------------
+FROM node:22-alpine AS runtime
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=3001
+
+# Un processus applicatif n'a aucune raison de tourner en root.
+RUN addgroup -S odoro && adduser -S odoro -G odoro
+
+COPY --from=runtime-deps --chown=odoro:odoro /app/node_modules ./node_modules
+COPY --from=build --chown=odoro:odoro /app/dist ./dist
+COPY --chown=odoro:odoro package.json ./
+
+USER odoro
+EXPOSE 3001
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "fetch('http://localhost:'+(process.env.PORT||3001)+'/api/health').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"
+
+CMD ["node", "dist/server/main.js"]

package/templates/react-ts-server/README.md

@@ -0,0 +1,87 @@
+# Application Odoro — client et serveur
+
+Une application monopage React et une API bâtie sur `@odoro-cli/server`, dans le
+même dépôt.
+
+```
+client/            interface, servie par Odoro en developpement
+server/
+  src/main.ts      assemble les modules, rien d'autre
+  src/modules/     un dossier par module — commencez par `health/`
+```
+
+## Demarrer
+
+```sh
+cp .env.example .env
+npm install
+npm run dev
+```
+
+Le client ecoute sur <http://localhost:5180> et transmet au serveur tout appel
+commencant par `/api`. Le navigateur ne voit donc qu'une seule origine, et
+aucune question de CORS ne se pose en developpement.
+
+## La base de donnees
+
+**PostgreSQL, heberge, et rien d'autre.** Il n'y a pas de base locale : l'URL
+pointe sur une base joignable par le reseau.
+
+```sh
+odoro db:create            # provisionne une base et ecrit .env
+# ou collez votre propre URL dans .env :
+DATABASE_URL=postgres://utilisateur:motdepasse@hote:5432/base?sslmode=require
+```
+
+Tant qu'elle est absente, **le client demarre quand meme** et le serveur repond
+`503` sur `/api/ready` en disant precisement ce qui manque. On voit donc
+l'interface des la premiere minute, et on sait ce qu'il reste a faire.
+
+## Ecrire un module
+
+`server/src/modules/health/` est l'exemple. Un module declare son nom, ce dont
+il a besoin, les services qu'il enregistre et les routes qu'il expose — et
+`main.ts` ne fait que dire lesquels sont actifs.
+
+```ts
+export const billingModule = defineModule({
+  name: 'billing',
+  requires: ['auth'],
+  register: (c) => c.register('billingService', createBillingService),
+  routes: billingRoutes,
+})
+```
+
+Le noyau resout l'ordre de chargement depuis `requires`, detecte les cycles, et
+refuse de demarrer si une dependance manque. Activer ou desactiver un module
+tient donc en une ligne dans `main.ts`.
+
+## Deux points de controle, qui ne disent pas la meme chose
+
+| Route         | Question                        | Qui l'interroge                                  |
+| ------------- | ------------------------------- | ------------------------------------------------ |
+| `/api/health` | Le processus vit-il ?           | L'orchestrateur, pour decider de redemarrer      |
+| `/api/ready`  | Le service peut-il travailler ? | Le repartiteur, pour decider d'envoyer du trafic |
+
+Les confondre donne l'un des deux defauts : un service qui redemarre en boucle
+pendant un incident de base, ou un repartiteur qui envoie du trafic a un
+service incapable de repondre.
+
+## Compiler et deployer
+
+```sh
+npm run build      # client dans dist/client, serveur dans dist/server
+npm start          # sert les deux depuis un seul processus
+```
+
+Le `Dockerfile` est multi-etapes : les dependances de compilation ne se
+retrouvent pas dans l'image finale, qui tourne sous un utilisateur sans
+privileges.
+
+## Variables d'environnement
+
+Voir `.env.example`, commente ligne par ligne. En production, ce qui manque
+arrete le demarrage avec un message qui **liste tout d'un coup** — plutot
+qu'une suite de redemarrages, une variable a la fois.
+
+`.env` n'est jamais versionne.

package/templates/react-ts-server/_dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.env
+.env.*
+*.log
+Dockerfile
+.dockerignore

package/templates/react-ts-server/_env.example

@@ -0,0 +1,78 @@
+# Copier ce fichier en `.env` et ajuster les valeurs.
+#
+# Toute variable manquante ou invalide arrete le serveur au demarrage, avec un
+# message qui les liste toutes d'un coup : mieux vaut un echec immediat qu'une
+# panne a la centieme requete.
+#
+# Ce fichier est versionne. `.env` ne l'est jamais.
+
+# ---------------------------------------------------------------------------
+# Base de donnees
+# ---------------------------------------------------------------------------
+
+# PostgreSQL, et rien d'autre. Aucune base locale : l'URL pointe sur une base
+# hebergee, la votre ou celle provisionnee par `odoro db:create`.
+#
+#   postgres://utilisateur:motdepasse@hote:5432/base?sslmode=require
+#
+# Tant qu'elle est absente, le client demarre et le serveur repond 503 sur
+# /api/ready en disant ce qui manque.
+DATABASE_URL=
+
+# Replica de lecture, optionnel. Le routage vers lui reste explicite : jamais
+# de bascule automatique, le decalage de replication produit des defauts
+# incomprehensibles.
+# DATABASE_REPLICA_URL=
+
+# Taille du pool de connexions. Laisser vide pour le defaut de l'environnement.
+# DATABASE_POOL_MAX=
+
+# Desactive TLS. A ne poser que sur une base strictement locale a la machine,
+# jamais sur une base joignable par le reseau.
+# DATABASE_TLS_DISABLED=false
+
+# ---------------------------------------------------------------------------
+# Session
+# ---------------------------------------------------------------------------
+
+# Au moins 32 caracteres. Un secret court se retrouve par force brute, et le
+# jour ou c'est arrive, toutes les sessions emises depuis le premier jour sont
+# forgeables.
+#
+#   node -e "console.log(require('node:crypto').randomBytes(32).toString('hex'))"
+SESSION_SECRET=
+
+# ---------------------------------------------------------------------------
+# Serveur
+# ---------------------------------------------------------------------------
+
+# Environnement : development | test | production
+NODE_ENV=development
+
+# Port d'ecoute de l'API. Le client de developpement ecoute sur 5180 et lui
+# transmet les appels commencant par /api.
+PORT=3001
+
+# URL publique du serveur, employee dans les liens des courriels.
+APP_URL=http://localhost:3001
+
+# Origines autorisees, separees par des virgules. Vide = aucune origine
+# tierce. Jamais `*` avec des identifiants.
+ALLOWED_ORIGINS=
+
+# Plafond de la taille des corps de requete.
+BODY_LIMIT=1mb
+
+# Delai au-dela duquel l'arret propre cesse d'attendre les requetes en cours.
+SHUTDOWN_TIMEOUT=15s
+
+# Niveau de journalisation : fatal | error | warn | info | debug | trace
+LOG_LEVEL=info
+
+# ---------------------------------------------------------------------------
+# Files d'attente et cache
+# ---------------------------------------------------------------------------
+
+# Optionnel. Absente, le cache vit en memoire et les taches s'executent en
+# ligne — ce qui convient a une instance unique, et pas au-dela.
+# REDIS_URL=

package/templates/react-ts-server/_gitignore

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

package/templates/react-ts-server/client/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-server/client/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-server/client/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-server/client/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-server/client/src/odoro-env.d.ts

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

package/templates/react-ts-server/client/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>
+  )
+}

package/templates/react-ts-server/client/src/routes/Home.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from 'react'
+
+import { Reveal, Stagger } from '@odoro-cli/libs/motion'
+import { Link } from '@odoro-cli/libs/router'
+import { Button } from '@odoro-cli/libs/ui'
+
+/** Reponse de la route de sante du serveur. */
+interface Health {
+  status: string
+  environment: string
+  uptime: number
+  timestamp: string
+}
+
+/** Etat de l'appel a l'API. */
+type Fetching =
+  | { state: 'inactif' }
+  | { state: 'en-cours' }
+  | { state: 'ok'; health: Health }
+  | { state: 'echec'; message: string }
+
+/**
+ * Interroge la route de sante du serveur.
+ *
+ * L'URL est relative : en developpement le moteur transmet l'appel au serveur,
+ * en production c'est le meme serveur qui repond. Il n'y a donc jamais d'URL
+ * d'API a configurer cote client.
+ */
+async function fetchHealth(signal: AbortSignal): Promise<Health> {
+  const response = await fetch('/api/health', { signal })
+  if (!response.ok) throw new Error(`Le serveur a repondu ${response.status}.`)
+  return (await response.json()) as Health
+}
+
+/** Panneau montrant l'etat de la liaison avec l'API. */
+function ApiStatus() {
+  const [result, setResult] = useState<Fetching>({ state: 'inactif' })
+  const [attempt, setAttempt] = useState(0)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    setResult({ state: 'en-cours' })
+
+    fetchHealth(controller.signal).then(
+      (health) => setResult({ state: 'ok', health }),
+      (cause: unknown) => {
+        if (controller.signal.aborted) return
+        setResult({
+          state: 'echec',
+          message: cause instanceof Error ? cause.message : String(cause),
+        })
+      },
+    )
+
+    return () => controller.abort()
+  }, [attempt])
+
+  return (
+    <section className="o-rounded-lg o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-5">
+      <div className="o-flex o-items-center o-justify-between o-gap-4">
+        <h2 className="o-font-semibold">Liaison avec l&rsquo;API</h2>
+        <Button
+          size="sm"
+          tone="secondary"
+          loading={result.state === 'en-cours'}
+          onClick={() => setAttempt((value) => value + 1)}
+        >
+          Reinterroger
+        </Button>
+      </div>
+
+      <div className="o-mt-3 o-text-sm" role="status">
+        {result.state === 'inactif' || result.state === 'en-cours' ? (
+          <p className="o-text-zinc-500 dark:o-text-zinc-400">
+            Interrogation de /api/health...
+          </p>
+        ) : result.state === 'echec' ? (
+          <p className="o-text-red-600 dark:o-text-red-400">
+            Serveur injoignable : {result.message}. Verifiez qu&rsquo;il tourne bien sur
+            le port 3001.
+          </p>
+        ) : (
+          <dl className="o-grid o-grid-cols-2 o-gap-2 o-tabular-nums">
+            <dt className="o-text-zinc-500 dark:o-text-zinc-400">Etat</dt>
+            <dd className="o-text-emerald-600 dark:o-text-emerald-400">
+              {result.health.status}
+            </dd>
+            <dt className="o-text-zinc-500 dark:o-text-zinc-400">Environnement</dt>
+            <dd>{result.health.environment}</dd>
+            <dt className="o-text-zinc-500 dark:o-text-zinc-400">En ligne depuis</dt>
+            <dd>{result.health.uptime} s</dd>
+          </dl>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/** Trois arguments mis en avant sur la page d'accueil. */
+const FEATURES = [
+  {
+    title: 'Une seule origine',
+    body: 'Les appels /api sont transmis au serveur : aucune question de CORS, aucune URL a configurer.',
+  },
+  {
+    title: 'Un seul deploiement',
+    body: 'En production, le serveur sert l API et le client compile. Une image, un processus.',
+  },
+  {
+    title: 'Un environnement verifie',
+    body: 'Les variables sont validees au demarrage. Une configuration incomplete arrete le serveur tout de suite.',
+  },
+]
+
+/** Page d'accueil. */
+export function Home() {
+  return (
+    <div className="o-flex o-flex-col o-gap-12">
+      <Reveal>
+        <h1 className="o-text-4xl o-font-bold o-tracking-tight">Client et serveur.</h1>
+        <p className="o-mt-4 o-text-lg o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
+          Ce projet reunit une application React et une API Express dans un seul depot. Le
+          panneau ci-dessous interroge le serveur pour de vrai.
+        </p>
+      </Reveal>
+
+      <ApiStatus />
+
+      <Stagger step={80} className="o-grid o-grid-cols-1 md:o-grid-cols-3 o-gap-4">
+        {FEATURES.map((feature) => (
+          <article
+            key={feature.title}
+            className="o-rounded-lg o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-5"
+          >
+            <h2 className="o-font-semibold">{feature.title}</h2>
+            <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+              {feature.body}
+            </p>
+          </article>
+        ))}
+      </Stagger>
+
+      <p>
+        <Link to="/a-propos">En savoir plus</Link>
+      </p>
+    </div>
+  )
+}

package/templates/react-ts-server/client/src/routes/NotFound.tsx

@@ -0,0 +1,14 @@
+import { Link } from '@odoro-cli/libs/router'
+
+/** Page affichee pour toute route inconnue. */
+export function NotFound() {
+  return (
+    <div className="o-flex o-flex-col o-gap-4" role="alert">
+      <h1 className="o-text-3xl o-font-bold">404</h1>
+      <p className="o-text-zinc-500 dark:o-text-zinc-400">Cette page n existe pas.</p>
+      <p>
+        <Link to="/">Retour a l accueil</Link>
+      </p>
+    </div>
+  )
+}

package/templates/react-ts-server/client/src/styles.css

@@ -0,0 +1,13 @@
+/* Styles propres a l'application.
+   Tout le reste vient des tokens Odoro : surcharger une variable ci-dessous
+   suffit a rethemer l'ensemble, composants de la librairie compris. */
+
+:root {
+  --o-color-primary: oklch(52.4% 0.212 275);
+}
+
+.app-shell {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}