@lastbrain/app 0.1.36 → 0.1.39

package/src/templates/DefaultDoc.tsx

@@ -2,7 +2,7 @@
 // This file is auto-generated from markdown files in docs/
 // Run 'pnpm sync:docs' to regenerate
 import React from "react";
-import { Card, CardBody, CardHeader, Snippet,Alert } from "@lastbrain/ui";
+import { Card, CardBody, CardHeader, Snippet, Alert } from "@lastbrain/ui";
 import {
   FileText,
   Rocket,
@@ -14,13 +14,12 @@ import {
   Zap,
   Palette,
   HardDrive,
-  Link
+  Link,
 } from "lucide-react";
 
 export function DefaultDocumentation() {
   return (
     <div className="space-y-6">
-
       <Card id="section-welcome" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -29,13 +28,20 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-slate-600 dark:text-slate-400">Framework modulaire pour créer rapidement des applications Next.js avec système de modules, authentification et base de données.</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">LastBrain est un framework modulaire pour créer des applications Next.js avec une architecture basée sur des modules réutilisables.</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><strong>Version:</strong> v1.0.0</p>
+          <p className="text-slate-600 dark:text-slate-400">
+            Framework modulaire pour créer rapidement des applications Next.js
+            avec système de modules, authentification et base de données.
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            LastBrain est un framework modulaire pour créer des applications
+            Next.js avec une architecture basée sur des modules réutilisables.
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Version:</strong> v1.0.0
+          </p>
         </CardBody>
       </Card>
 
-
       <Card id="section-quickstart" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -44,102 +50,176 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-slate-600 dark:text-slate-400"><strong>Note importante :</strong> LastBrain est un écosystème de packages interconnectés. L'application générée utilise automatiquement <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/core</code>, <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/ui</code>, et les modules comme <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/module-auth</code> et <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/module-ai</code>. Tous ces packages sont nécessaires pour le bon fonctionnement.</p>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`# 1. Créer une nouvelle application (utilise @latest pour la version la plus récente)`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpx @lastbrain/app@latest init mon-app`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`# 2. Accéder au dossier`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`cd mon-app`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`# 3. Initialiser Supabase`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm db:init`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`# 4. Démarrer l'application`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm dev`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Explication de la commande</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpx @lastbrain/app@latest init mon-app`}
-            </Snippet>
-            <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><strong><code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">pnpx</code></strong> : Exécute un package npm sans l'installer globalement</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><strong><code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/app@latest</code></strong> : Package CLI de LastBrain en version la plus récente</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><strong><code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">init</code></strong> : Commande pour initialiser une nouvelle application</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><strong><code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">mon-app</code></strong> : Nom du dossier de votre application</span>
-              </div>
+          <p className="text-slate-600 dark:text-slate-400">
+            <strong>Note importante :</strong> LastBrain est un écosystème de
+            packages interconnectés. L'application générée utilise
+            automatiquement{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              @lastbrain/core
+            </code>
+            ,{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              @lastbrain/ui
+            </code>
+            , et les modules comme{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              @lastbrain/module-auth
+            </code>{" "}
+            et{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              @lastbrain/module-ai
+            </code>
+            . Tous ces packages sont nécessaires pour le bon fonctionnement.
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`# 1. Créer une nouvelle application (utilise @latest pour la version la plus récente)`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpx @lastbrain/app@latest init mon-app`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`# 2. Accéder au dossier`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`cd mon-app`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`# 3. Initialiser Supabase`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm db:init`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`# 4. Démarrer l'application`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm dev`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Explication de la commande
+          </h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpx @lastbrain/app@latest init mon-app`}
+          </Snippet>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <strong>
+                  <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                    pnpx
+                  </code>
+                </strong>{" "}
+                : Exécute un package npm sans l'installer globalement
+              </span>
             </div>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Cette commande va :</p>
-            <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Créer la structure Next.js complète</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Installer automatiquement tous les packages nécessaires (<code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/core</code>, <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/ui</code>, modules...)</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Configurer Supabase et les migrations</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Générer les routes des modules sélectionnés</span>
-              </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <strong>
+                  <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                    @lastbrain/app@latest
+                  </code>
+                </strong>{" "}
+                : Package CLI de LastBrain en version la plus récente
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <strong>
+                  <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                    init
+                  </code>
+                </strong>{" "}
+                : Commande pour initialiser une nouvelle application
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <strong>
+                  <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                    mon-app
+                  </code>
+                </strong>{" "}
+                : Nom du dossier de votre application
+              </span>
+            </div>
+          </div>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Cette commande va :
+          </p>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Créer la structure Next.js complète</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                Installer automatiquement tous les packages nécessaires (
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  @lastbrain/core
+                </code>
+                ,{" "}
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  @lastbrain/ui
+                </code>
+                , modules...)
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Configurer Supabase et les migrations</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Générer les routes des modules sélectionnés</span>
             </div>
-            <h3 className="text-lg font-semibold mb-2">Création du Compte Admin</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`# Promouvoir votre compte en admin via Supabase`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`update auth.users`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`set raw_app_meta_data = jsonb_set(`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`  coalesce(raw_app_meta_data, '{}'::jsonb),`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`  '{roles}',`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`  '["admin"]'::jsonb`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`)`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`where email = 'votre@email.com';`}
-            </Snippet>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Votre application est maintenant disponible sur <a href="http://localhost:3000" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">http://localhost:3000</a> ! 🎉</p>
+          </div>
+          <h3 className="text-lg font-semibold mb-2">
+            Création du Compte Admin
+          </h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`# Promouvoir votre compte en admin via Supabase`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`update auth.users`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`set raw_app_meta_data = jsonb_set(`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`  coalesce(raw_app_meta_data, '{}'::jsonb),`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`  '{roles}',`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`  '["admin"]'::jsonb`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`)`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`where email = 'votre@email.com';`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Votre application est maintenant disponible sur{" "}
+            <a
+              href="http://localhost:3000"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              http://localhost:3000
+            </a>{" "}
+            ! 🎉
+          </p>
         </CardBody>
       </Card>
 
-
       <Card id="section-architecture" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -148,19 +228,32 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Le projet est organisé en monorepo avec pnpm workspaces :</p>
-            <h3 className="text-lg font-semibold mb-2">@lastbrain/app</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Framework principal et CLI. Contient les layouts, scripts de build, templates et la logique de génération des pages.</p>
-            <h3 className="text-lg font-semibold mb-2">@lastbrain/core</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Utilitaires et types partagés. Contient les helpers Supabase, fonctions serveur et types TypeScript communs.</p>
-            <h3 className="text-lg font-semibold mb-2">@lastbrain/ui</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Composants UI réutilisables basés sur NextUI et Tailwind CSS. Fournit les composants Card, Button, Input, etc.</p>
-            <h3 className="text-lg font-semibold mb-2">@lastbrain/module-\*</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Modules fonctionnels (auth, ai, etc.). Chaque module contient ses pages, APIs, composants, migrations et documentation.</p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le projet est organisé en monorepo avec pnpm workspaces :
+          </p>
+          <h3 className="text-lg font-semibold mb-2">@lastbrain/app</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Framework principal et CLI. Contient les layouts, scripts de build,
+            templates et la logique de génération des pages.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">@lastbrain/core</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Utilitaires et types partagés. Contient les helpers Supabase,
+            fonctions serveur et types TypeScript communs.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">@lastbrain/ui</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Composants UI réutilisables basés sur NextUI et Tailwind CSS.
+            Fournit les composants Card, Button, Input, etc.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">@lastbrain/module-\*</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Modules fonctionnels (auth, ai, etc.). Chaque module contient ses
+            pages, APIs, composants, migrations et documentation.
+          </p>
         </CardBody>
       </Card>
 
-
       <Card id="section-create-module" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -169,13 +262,22 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <h3 className="text-lg font-semibold mb-2">Commande CLI</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm lastbrain create-module mon-module`}
-            </Snippet>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Crée un nouveau module dans <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">packages/module-mon-module</code></p>
-            <h3 className="text-lg font-semibold mb-2">Structure d'un module</h3>
-<Alert hideIcon color="primary" className="p-4 mb-4 whitespace-pre-wrap">{`📁 module-mon-module/
+          <h3 className="text-lg font-semibold mb-2">Commande CLI</h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain create-module mon-module`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Crée un nouveau module dans{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              packages/module-mon-module
+            </code>
+          </p>
+          <h3 className="text-lg font-semibold mb-2">Structure d'un module</h3>
+          <Alert
+            hideIcon
+            color="primary"
+            className="p-4 mb-4 whitespace-pre-wrap"
+          >{`📁 module-mon-module/
 ├── 📄 package.json
 ├── 📄 mon-module.build.config.ts
 └── 📁 src/
@@ -186,10 +288,18 @@ export function DefaultDocumentation() {
     ├── 📁 components/
     └── 📁 supabase/
         └── 📁 migrations/`}</Alert>
-            <h3 className="text-lg font-semibold mb-2">Configuration du module</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Le fichier <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">module-name.build.config.ts</code> définit les pages et APIs :</p>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`export default {
+          <h3 className="text-lg font-semibold mb-2">
+            Configuration du module
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le fichier{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              module-name.build.config.ts
+            </code>{" "}
+            définit les pages et APIs :
+          </p>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`export default {
   name: "Mon Module",
   description: "Description du module",
   pages: [
@@ -206,11 +316,10 @@ export function DefaultDocumentation() {
     },
   ],
 };`}</pre>
-            </Alert>
+          </Alert>
         </CardBody>
       </Card>
 
-
       <Card id="section-database" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -219,26 +328,34 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <h3 className="text-lg font-semibold mb-2">Supabase local</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">LastBrain utilise Supabase pour la base de données et l'authentification.</p>
-            <h4 className="font-medium mb-2">Démarrer Supabase</h4>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm db:init`}
-            </Snippet>
-            <h4 className="font-medium mb-2">Synchroniser les migrations</h4>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm db:migrations:sync`}
-            </Snippet>
-            <h4 className="font-medium mb-2">Créer une migration</h4>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`supabase migration new ma_migration`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Migrations des modules</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Les modules peuvent avoir leurs propres migrations dans <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">supabase/migrations/</code>. Elles sont automatiquement synchronisées lors du build.</p>
+          <h3 className="text-lg font-semibold mb-2">Supabase local</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            LastBrain utilise Supabase pour la base de données et
+            l'authentification.
+          </p>
+          <h4 className="font-medium mb-2">Démarrer Supabase</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm db:init`}
+          </Snippet>
+          <h4 className="font-medium mb-2">Synchroniser les migrations</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm db:migrations:sync`}
+          </Snippet>
+          <h4 className="font-medium mb-2">Créer une migration</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`supabase migration new ma_migration`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">Migrations des modules</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Les modules peuvent avoir leurs propres migrations dans{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              supabase/migrations/
+            </code>
+            . Elles sont automatiquement synchronisées lors du build.
+          </p>
         </CardBody>
       </Card>
 
-
       <Card id="section-admin" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -247,32 +364,52 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <h3 className="text-lg font-semibold mb-2">1. Créer un compte</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Allez sur <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">/signup</code> et créez votre compte</p>
-            <h3 className="text-lg font-semibold mb-2">2. Promouvoir en administrateur</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Exécutez cette requête SQL dans le Studio Supabase (<code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">http://localhost:54323</code>) ou via psql :</p>
-            <Snippet hideSymbol color="primary" className="text-sm mb-2">
-              <span>{`update auth.users
+          <h3 className="text-lg font-semibold mb-2">1. Créer un compte</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Allez sur{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              /signup
+            </code>{" "}
+            et créez votre compte
+          </p>
+          <h3 className="text-lg font-semibold mb-2">
+            2. Promouvoir en administrateur
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Exécutez cette requête SQL dans le Studio Supabase (
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              http://localhost:54323
+            </code>
+            ) ou via psql :
+          </p>
+          <Snippet hideSymbol color="primary" className="text-sm mb-2">
+            <span>{`update auth.users
 `}</span>
-              <span>{`set raw_app_meta_data = jsonb_set(
+            <span>{`set raw_app_meta_data = jsonb_set(
 `}</span>
-              <span>{`  coalesce(raw_app_meta_data, '{}'::jsonb),
+            <span>{`  coalesce(raw_app_meta_data, '{}'::jsonb),
 `}</span>
-              <span>{`  '{roles}',
+            <span>{`  '{roles}',
 `}</span>
-              <span>{`  '["admin"]'::jsonb
+            <span>{`  '["admin"]'::jsonb
 `}</span>
-              <span>{`)
+            <span>{`)
 `}</span>
-              <span>{`where email = 'votre@email.com';
+            <span>{`where email = 'votre@email.com';
 `}</span>
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">3. Accéder à l'interface admin</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Vous pouvez maintenant accéder à <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">/admin</code></p>
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            3. Accéder à l'interface admin
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Vous pouvez maintenant accéder à{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              /admin
+            </code>
+          </p>
         </CardBody>
       </Card>
 
-
       <Card id="section-development" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -281,30 +418,35 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <h3 className="text-lg font-semibold mb-2">Lancer le serveur de développement</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm dev`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Générer les routes des modules</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">À exécuter après avoir ajouté ou modifié des modules</p>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm build:modules`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Build de production</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm build`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Développer un module</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`cd packages/module-auth`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm dev`}
-            </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Lancer le serveur de développement
+          </h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm dev`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Générer les routes des modules
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            À exécuter après avoir ajouté ou modifié des modules
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm build:modules`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">Build de production</h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm build`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">Développer un module</h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`cd packages/module-auth`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm dev`}
+          </Snippet>
         </CardBody>
       </Card>
 
-
       <Card id="section-routes" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -313,27 +455,48 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Le middleware protège automatiquement vos routes selon ces règles :</p>
-            <h3 className="text-lg font-semibold mb-2">Routes</h3>
-            <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">/auth/*</code> → Authentification requise</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">/admin/*</code> → Superadmin uniquement</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">/docs/*</code> → Accès public</span>
-              </div>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le middleware protège automatiquement vos routes selon ces règles :
+          </p>
+          <h3 className="text-lg font-semibold mb-2">Routes</h3>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  /auth/*
+                </code>{" "}
+                → Authentification requise
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  /admin/*
+                </code>{" "}
+                → Superadmin uniquement
+              </span>
             </div>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Le middleware se trouve dans <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">middleware.ts</code></p>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  /docs/*
+                </code>{" "}
+                → Accès public
+              </span>
+            </div>
+          </div>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le middleware se trouve dans{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              middleware.ts
+            </code>
+          </p>
         </CardBody>
       </Card>
 
-
       <Card id="section-workflow" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -342,34 +505,40 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <h3 className="text-lg font-semibold mb-2">1. Modifier un module</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Éditez les fichiers dans <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">packages/module-*/src</code></p>
-            <h3 className="text-lg font-semibold mb-2">2. Compiler le module</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`cd packages/module-auth`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm build`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">3. Régénérer les pages</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`cd apps/my-app`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm build:modules`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">4. Appliquer les migrations</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`supabase migration up`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">5. Tester</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm dev`}
-            </Snippet>
+          <h3 className="text-lg font-semibold mb-2">1. Modifier un module</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Éditez les fichiers dans{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              packages/module-*/src
+            </code>
+          </p>
+          <h3 className="text-lg font-semibold mb-2">2. Compiler le module</h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`cd packages/module-auth`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm build`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">3. Régénérer les pages</h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`cd apps/my-app`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm build:modules`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            4. Appliquer les migrations
+          </h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`supabase migration up`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">5. Tester</h3>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm dev`}
+          </Snippet>
         </CardBody>
       </Card>
 
-
       <Card id="section-ui" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -378,16 +547,35 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <h3 className="text-lg font-semibold mb-2">Composants NextUI</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Le package <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/ui</code> réexporte les composants NextUI avec une configuration Tailwind personnalisée.</p>
-            <h3 className="text-lg font-semibold mb-2">Thèmes</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Le mode sombre/clair est géré par <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">next-themes</code>. Le switch est disponible dans le header de l'application.</p>
-            <h3 className="text-lg font-semibold mb-2">Tailwind CSS v4</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Le projet utilise Tailwind CSS v4 avec un preset personnalisé partagé via <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">@lastbrain/ui/tailwind.preset</code>.</p>
+          <h3 className="text-lg font-semibold mb-2">Composants NextUI</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le package{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              @lastbrain/ui
+            </code>{" "}
+            réexporte les composants NextUI avec une configuration Tailwind
+            personnalisée.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">Thèmes</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le mode sombre/clair est géré par{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              next-themes
+            </code>
+            . Le switch est disponible dans le header de l'application.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">Tailwind CSS v4</h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le projet utilise Tailwind CSS v4 avec un preset personnalisé
+            partagé via{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              @lastbrain/ui/tailwind.preset
+            </code>
+            .
+          </p>
         </CardBody>
       </Card>
 
-
       <Card id="section-storage" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -396,30 +584,49 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">LastBrain intègre un système de proxy pour les fichiers Supabase Storage qui permet d'utiliser des URLs propres avec contrôle d'accès granulaire.</p>
-            <h3 className="text-lg font-semibold mb-2">URLs Proxy vs URLs Supabase</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><strong>❌ URL Supabase classique (longue)</strong></p>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`https://xxx.supabase.co/storage/v1/object/public/avatar/user_128_123456.webp`}
-            </Snippet>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><strong>✅ URL Proxy (propre)</strong></p>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`/api/storage/avatar/user_128_123456.webp`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Configuration des Buckets</h3>
-            <h4 className="font-medium mb-2">📂 avatar (Public)</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Photos de profil et avatars • 10MB max • Types: JPEG, PNG, WebP, GIF</p>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`/api/storage/avatar/user_128_123456.webp`}
-            </Snippet>
-            <h4 className="font-medium mb-2">🔒 app (Privé)</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Fichiers privés des utilisateurs • 100MB max • Authentification requise</p>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`/api/storage/app/user-id/documents/file.pdf`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Utilisation dans le code</h3>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`// Upload d'un fichier
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            LastBrain intègre un système de proxy pour les fichiers Supabase
+            Storage qui permet d'utiliser des URLs propres avec contrôle d'accès
+            granulaire.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">
+            URLs Proxy vs URLs Supabase
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>❌ URL Supabase classique (longue)</strong>
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`https://xxx.supabase.co/storage/v1/object/public/avatar/user_128_123456.webp`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>✅ URL Proxy (propre)</strong>
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`/api/storage/avatar/user_128_123456.webp`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Configuration des Buckets
+          </h3>
+          <h4 className="font-medium mb-2">📂 avatar (Public)</h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Photos de profil et avatars • 10MB max • Types: JPEG, PNG, WebP, GIF
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`/api/storage/avatar/user_128_123456.webp`}
+          </Snippet>
+          <h4 className="font-medium mb-2">🔒 app (Privé)</h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Fichiers privés des utilisateurs • 100MB max • Authentification
+            requise
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`/api/storage/app/user-id/documents/file.pdf`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Utilisation dans le code
+          </h3>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`// Upload d'un fichier
 import { uploadFile } from "@/api/storage";
 
 const proxyUrl = await uploadFile(
@@ -435,32 +642,31 @@ import { storagePathToProxyUrl } from "@/lib/storage";
 
 const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
 // Retourne: "/api/storage/avatar/user_128_123456.webp"`}</pre>
-            </Alert>
-            <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
-            <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <span>✅ URLs plus courtes et lisibles</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Contrôle d'accès granulaire</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Cache optimisé (1 an)</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Sécurité améliorée</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Détection auto des types MIME</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Extensible facilement</span>
-              </div>
+          </Alert>
+          <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span>✅ URLs plus courtes et lisibles</span>
             </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Contrôle d'accès granulaire</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Cache optimisé (1 an)</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Sécurité améliorée</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Détection auto des types MIME</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Extensible facilement</span>
+            </div>
+          </div>
         </CardBody>
       </Card>
 
-
       <Card id="section-realtime" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -469,11 +675,23 @@ const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">LastBrain intègre un système de notifications et de synchronisation en temps réel basé sur Supabase Realtime. Le système est entièrement automatisé et scalable.</p>
-            <h3 className="text-lg font-semibold mb-2">Configuration dans les modules</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Ajoutez la configuration realtime dans votre <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">build.config.ts</code> pour activer la synchronisation en temps réel :</p>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`export default {
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            LastBrain intègre un système de notifications et de synchronisation
+            en temps réel basé sur Supabase Realtime. Le système est entièrement
+            automatisé et scalable.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">
+            Configuration dans les modules
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Ajoutez la configuration realtime dans votre{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              build.config.ts
+            </code>{" "}
+            pour activer la synchronisation en temps réel :
+          </p>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`export default {
   name: "Module Auth",
   description: "Gestion de l'authentification",
 
@@ -502,18 +720,33 @@ const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
     // vos pages...
   ],
 };`}</pre>
-            </Alert>
-            <h3 className="text-lg font-semibold mb-2">Génération automatique de la configuration</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Lors du build des modules, la configuration realtime est automatiquement générée :</p>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm build:modules`}
-            </Snippet>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Cela génère automatiquement <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">config/realtime.ts</code> avec toutes les configurations des modules.</p>
-            <h3 className="text-lg font-semibold mb-2">Utilisation dans les composants</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Utilisez les hooks pré-construits pour écouter les changements :</p>
-            <h4 className="font-medium mb-2">1. Hook générique pour une table</h4>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`import { useTableRealtime } from "@lastbrain/core";
+          </Alert>
+          <h3 className="text-lg font-semibold mb-2">
+            Génération automatique de la configuration
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Lors du build des modules, la configuration realtime est
+            automatiquement générée :
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm build:modules`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Cela génère automatiquement{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              config/realtime.ts
+            </code>{" "}
+            avec toutes les configurations des modules.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">
+            Utilisation dans les composants
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Utilisez les hooks pré-construits pour écouter les changements :
+          </p>
+          <h4 className="font-medium mb-2">1. Hook générique pour une table</h4>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`import { useTableRealtime } from "@lastbrain/core";
 
 function MonComposant() {
   const signal = useTableRealtime("user_notifications");
@@ -526,10 +759,12 @@ function MonComposant() {
     }
   }, [signal.tick]);
 }`}</pre>
-            </Alert>
-            <h4 className="font-medium mb-2">2. Hook spécialisé pour les notifications</h4>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`import { useNotifications } from "../hooks/useNotifications";
+          </Alert>
+          <h4 className="font-medium mb-2">
+            2. Hook spécialisé pour les notifications
+          </h4>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`import { useNotifications } from "../hooks/useNotifications";
 
 function NotificationBell() {
   const { notifications, loading, hasUpdates } = useNotifications();
@@ -541,10 +776,10 @@ function NotificationBell() {
     </div>
   );
 }`}</pre>
-            </Alert>
-            <h4 className="font-medium mb-2">3. Hook bas niveau avec EventBus</h4>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`import { useRealtimeSignal } from "@lastbrain/core";
+          </Alert>
+          <h4 className="font-medium mb-2">3. Hook bas niveau avec EventBus</h4>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`import { useRealtimeSignal } from "@lastbrain/core";
 
 function MonComposant() {
   const signal = useRealtimeSignal("user_notifications_updated");
@@ -557,56 +792,78 @@ function MonComposant() {
     }
   }, [signal.tick]);
 }`}</pre>
-            </Alert>
-            <h3 className="text-lg font-semibold mb-2">Architecture du système</h3>
-            <h4 className="font-medium mb-2">🎯 EventBus Global</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Système central de coordination des événements realtime à travers toute l'application.</p>
-            <h4 className="font-medium mb-2">🔌 RealtimeProvider</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Provider React qui établit les connexions Supabase Realtime basées sur la configuration des modules.</p>
-            <h4 className="font-medium mb-2">⚡ Hooks Scalables</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Collection de hooks React pour écouter des tables ou événements spécifiques avec auto-refresh.</p>
-            <h4 className="font-medium mb-2">🛠️ Build intégré</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Génération automatique de la configuration TypeScript lors du build des modules.</p>
-            <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
-            <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <span>✅ Configuration déclarative dans les modules</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Génération automatique de config</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Hooks React prêts à l'emploi</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Sécurité RLS de Supabase</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ Scalable pour n'importe quelle table</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span>✅ TypeScript avec types générés</span>
-              </div>
+          </Alert>
+          <h3 className="text-lg font-semibold mb-2">
+            Architecture du système
+          </h3>
+          <h4 className="font-medium mb-2">🎯 EventBus Global</h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Système central de coordination des événements realtime à travers
+            toute l'application.
+          </p>
+          <h4 className="font-medium mb-2">🔌 RealtimeProvider</h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Provider React qui établit les connexions Supabase Realtime basées
+            sur la configuration des modules.
+          </p>
+          <h4 className="font-medium mb-2">⚡ Hooks Scalables</h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Collection de hooks React pour écouter des tables ou événements
+            spécifiques avec auto-refresh.
+          </p>
+          <h4 className="font-medium mb-2">🛠️ Build intégré</h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Génération automatique de la configuration TypeScript lors du build
+            des modules.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span>✅ Configuration déclarative dans les modules</span>
             </div>
-            <h3 className="text-lg font-semibold mb-2">Exemples d'utilisation</h3>
-            <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><strong>🔔 Notifications</strong>: Affichage en temps réel des nouvelles notifications avec badge et auto-refresh</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><strong>👥 Utilisateurs en ligne</strong>: Suivi des connexions/déconnexions des utilisateurs en direct</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span><strong>📊 Données collaboratives</strong>: Synchronisation automatique des modifications de données entre utilisateurs</span>
-              </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Génération automatique de config</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Hooks React prêts à l'emploi</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Sécurité RLS de Supabase</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Scalable pour n'importe quelle table</span>
             </div>
+            <div className="flex items-start gap-2">
+              <span>✅ TypeScript avec types générés</span>
+            </div>
+          </div>
+          <h3 className="text-lg font-semibold mb-2">Exemples d'utilisation</h3>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <strong>🔔 Notifications</strong>: Affichage en temps réel des
+                nouvelles notifications avec badge et auto-refresh
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <strong>👥 Utilisateurs en ligne</strong>: Suivi des
+                connexions/déconnexions des utilisateurs en direct
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <strong>📊 Données collaboratives</strong>: Synchronisation
+                automatique des modifications de données entre utilisateurs
+              </span>
+            </div>
+          </div>
         </CardBody>
       </Card>
 
-
       <Card id="section-module-docs" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -615,11 +872,277 @@ function MonComposant() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Chaque module peut exporter un composant de documentation qui sera automatiquement intégré dans cette page.</p>
-            <h3 className="text-lg font-semibold mb-2">Créer une documentation</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Dans votre module, créez <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">src/components/Doc.tsx</code> :</p>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`export function MonModuleDoc() {
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Chaque module peut exporter un composant de documentation qui sera
+            automatiquement intégré dans cette page.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">
+            Documentation auto-générée
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Lorsque vous créez un module, la documentation de base (
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              Doc.tsx
+            </code>
+            ) est automatiquement générée à partir du fichier{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              build.config.ts
+            </code>
+            . Cette documentation inclut :
+          </p>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Les pages disponibles</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Les routes API</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Les tables de base de données</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Les instructions d'installation</span>
+            </div>
+          </div>
+          <h4 className="font-medium mb-2">Régénérer la documentation</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm update:module-docs`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`# ou pour un module spécifique`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm update:module-docs auth`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            ⚠️ <strong>Important</strong> : Le fichier{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              Doc.tsx
+            </code>{" "}
+            est <strong>écrasé</strong> à chaque génération. Ne le modifiez pas
+            directement !
+          </p>
+          <h3 className="text-lg font-semibold mb-2">
+            Personnaliser la section "Utilisation"
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Pour ajouter du contenu personnalisé qui ne sera{" "}
+            <strong>jamais écrasé</strong>, créez un fichier{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              DocUsageCustom.tsx
+            </code>{" "}
+            :
+          </p>
+          <h4 className="font-medium mb-2">
+            Étape 1 : Créer le composant personnalisé
+          </h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Dans{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              packages/votre-module/src/components/DocUsageCustom.tsx
+            </code>{" "}
+            :
+          </p>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`"use client";
+
+import { Card, CardBody, CardHeader, Alert, Tabs, Tab } from "@lastbrain/ui";
+import { Lightbulb } from "lucide-react";
+// Importez vos composants à documenter
+import { MonComposant } from "../web/components/MonComposant";
+
+export function DocUsageCustom() {
+  return (
+    <div className="space-y-6">
+      <Alert color="primary" className="mb-6">
+        <div className="flex items-start gap-2">
+          <Lightbulb size={20} className="mt-0.5 flex-shrink-0" />
+          <div>
+            <p className="font-semibold">Introduction</p>
+            <p className="text-sm mt-1">
+              Description de votre module et de ses fonctionnalités principales.
+            </p>
+          </div>
+        </div>
+      </Alert>
+
+      <Tabs aria-label="Exemples d'utilisation">
+        <Tab key="exemple1" title="Exemple 1">
+          <Card className="mt-4">
+            <CardHeader>
+              <h3 className="text-xl font-semibold">MonComposant</h3>
+            </CardHeader>
+            <CardBody className="space-y-6">
+              <div>
+                <h4 className="text-lg font-semibold mb-2">Description</h4>
+                <p className="text-slate-600 dark:text-slate-400">
+                  Décrivez votre composant et son utilisation.
+                </p>
+              </div>
+
+              <div>
+                <h4 className="text-lg font-semibold mb-3">Exemple interactif</h4>
+                <MonComposant />
+              </div>
+
+              <div>
+                <h4 className="text-lg font-semibold mb-2">Code d'utilisation</h4>
+                <Alert color="default" className="p-4">
+                  <pre className="whitespace-pre-wrap text-sm">{\`import { MonComposant } from "@lastbrain/votre-module";
+
+export function MyApp() {
+  return <MonComposant />;
+}\`}</pre>
+                </Alert>
+              </div>
+
+              <div>
+                <h4 className="text-lg font-semibold mb-2">Props disponibles</h4>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="border-b">
+                      <tr>
+                        <th className="text-left py-2 px-2">Prop</th>
+                        <th className="text-left py-2 px-2">Type</th>
+                        <th className="text-left py-2 px-2">Description</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y">
+                      <tr>
+                        <td className="py-2 px-2 font-mono">prop1</td>
+                        <td className="py-2 px-2">string</td>
+                        <td className="py-2 px-2">Description de la prop</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </Tab>
+
+        <Tab key="exemple2" title="Exemple 2">
+          {/* Autres exemples */}
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}`}</pre>
+          </Alert>
+          <h4 className="font-medium mb-2">
+            Étape 2 : Le générateur l'intègre automatiquement
+          </h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Une fois{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              DocUsageCustom.tsx
+            </code>{" "}
+            créé, lancez la régénération :
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm update:module-docs`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le script détecte automatiquement l'existence de{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              DocUsageCustom.tsx
+            </code>{" "}
+            et l'importe dans{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              Doc.tsx
+            </code>{" "}
+            :
+          </p>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`// Doc.tsx (généré automatiquement)
+import { DocUsageCustom } from "./DocUsageCustom";
+
+// Dans la section Utilisation :
+<Card>
+  <CardHeader>
+    <h2>Utilisation</h2>
+  </CardHeader>
+  <CardBody>
+    <DocUsageCustom />
+  </CardBody>
+</Card>`}</pre>
+          </Alert>
+          <h4 className="font-medium mb-2">
+            Étape 3 : Mettre à jour sans perdre vos modifications
+          </h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Vous pouvez maintenant régénérer la documentation autant de fois que
+            vous voulez, votre fichier{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              DocUsageCustom.tsx
+            </code>{" "}
+            ne sera <strong>jamais écrasé</strong> :
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm update:module-docs`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Exemple concret : Module AI
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Le module AI utilise cette approche pour documenter ses composants
+            de génération :
+          </p>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`// packages/module-ai/src/components/DocUsageCustom.tsx
+import { TextareaGenerative } from "../web/components/TextareaGenerative";
+import { ImageGenerative } from "../web/components/ImageGenerative";
+
+export function DocUsageCustom() {
+  return (
+    <Tabs>
+      <Tab key="textarea" title="Génération de Texte">
+        <TextareaGenerative
+          prompt="Écris une courte description..."
+          model="gpt-4o-mini"
+        />
+      </Tab>
+      <Tab key="image" title="Génération d'Images">
+        <ImageGenerative
+          prompt="Un chat astronaute..."
+          model="dall-e-3"
+        />
+      </Tab>
+    </Tabs>
+  );
+}`}</pre>
+          </Alert>
+          <h3 className="text-lg font-semibold mb-2">Structure recommandée</h3>
+          <Alert
+            hideIcon
+            color="primary"
+            className="p-4 mb-4 whitespace-pre-wrap"
+          >{`packages/votre-module/
+├── src/
+│   ├── components/
+│   │   ├── Doc.tsx              # ⚠️ AUTO-GÉNÉRÉ - Ne pas modifier
+│   │   └── DocUsageCustom.tsx   # ✅ Votre contenu personnalisé
+│   ├── web/
+│   │   └── components/
+│   │       └── MonComposant.tsx # Vos composants à documenter
+│   └── votre-module.build.config.ts`}</Alert>
+          <h3 className="text-lg font-semibold mb-2">
+            Créer une documentation
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Si vous préférez créer une documentation complètement manuelle,
+            créez{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              src/components/Doc.tsx
+            </code>{" "}
+            :
+          </p>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`export function MonModuleDoc() {
   return (
     <div>
       <h1>Mon Module</h1>
@@ -627,16 +1150,23 @@ function MonComposant() {
     </div>
   );
 }`}</pre>
-            </Alert>
-            <h3 className="text-lg font-semibold mb-2">Exporter la documentation</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Dans <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">src/index.ts</code> :</p>
-            <Alert hideIcon color="primary" className="p-4 mb-4">
-              <pre className="whitespace-pre-wrap">{`export { MonModuleDoc } from "./components/Doc.js";`}</pre>
-            </Alert>
+          </Alert>
+          <h3 className="text-lg font-semibold mb-2">
+            Exporter la documentation
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Dans{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              src/index.ts
+            </code>{" "}
+            :
+          </p>
+          <Alert hideIcon color="primary" className="p-4 mb-4">
+            <pre className="whitespace-pre-wrap">{`export { MonModuleDoc } from "./components/Doc.js";`}</pre>
+          </Alert>
         </CardBody>
       </Card>
 
-
       <Card id="section-links" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -646,53 +1176,118 @@ function MonComposant() {
         </CardHeader>
         <CardBody>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <Card className="hover:shadow-lg transition-shadow" isPressable as="a" href="https://nextjs.org/docs" target="_blank" rel="noopener noreferrer">
+            <Card
+              className="hover:shadow-lg transition-shadow"
+              isPressable
+              as="a"
+              href="https://nextjs.org/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <CardBody>
                 <h3 className="text-lg font-semibold mb-2">Next.js</h3>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">Documentation officielle</p>
-                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">https://nextjs.org/docs</p>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+                  Documentation officielle
+                </p>
+                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">
+                  https://nextjs.org/docs
+                </p>
               </CardBody>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow" isPressable as="a" href="https://supabase.com/docs" target="_blank" rel="noopener noreferrer">
+            <Card
+              className="hover:shadow-lg transition-shadow"
+              isPressable
+              as="a"
+              href="https://supabase.com/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <CardBody>
                 <h3 className="text-lg font-semibold mb-2">Supabase</h3>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">Documentation officielle</p>
-                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">https://supabase.com/docs</p>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+                  Documentation officielle
+                </p>
+                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">
+                  https://supabase.com/docs
+                </p>
               </CardBody>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow" isPressable as="a" href="https://www.heroui.com/docs" target="_blank" rel="noopener noreferrer">
+            <Card
+              className="hover:shadow-lg transition-shadow"
+              isPressable
+              as="a"
+              href="https://www.heroui.com/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <CardBody>
                 <h3 className="text-lg font-semibold mb-2">Heroui</h3>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">Composants UI</p>
-                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">https://www.heroui.com/docs</p>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+                  Composants UI
+                </p>
+                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">
+                  https://www.heroui.com/docs
+                </p>
               </CardBody>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow" isPressable as="a" href="https://tailwindcss.com/docs" target="_blank" rel="noopener noreferrer">
+            <Card
+              className="hover:shadow-lg transition-shadow"
+              isPressable
+              as="a"
+              href="https://tailwindcss.com/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <CardBody>
                 <h3 className="text-lg font-semibold mb-2">Tailwind CSS</h3>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">Framework CSS</p>
-                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">https://tailwindcss.com/docs</p>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+                  Framework CSS
+                </p>
+                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">
+                  https://tailwindcss.com/docs
+                </p>
               </CardBody>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow" isPressable as="a" href="https://lucide.dev/" target="_blank" rel="noopener noreferrer">
+            <Card
+              className="hover:shadow-lg transition-shadow"
+              isPressable
+              as="a"
+              href="https://lucide.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <CardBody>
                 <h3 className="text-lg font-semibold mb-2">Lucide Icons</h3>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">Icones SVG</p>
-                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">https://lucide.dev/</p>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+                  Icones SVG
+                </p>
+                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">
+                  https://lucide.dev/
+                </p>
               </CardBody>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow" isPressable as="a" href="https://stripe.com/docs" target="_blank" rel="noopener noreferrer">
+            <Card
+              className="hover:shadow-lg transition-shadow"
+              isPressable
+              as="a"
+              href="https://stripe.com/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <CardBody>
                 <h3 className="text-lg font-semibold mb-2">Stripe</h3>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">Système de paiement</p>
-                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">https://stripe.com/docs</p>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+                  Système de paiement
+                </p>
+                <p className="text-xs text-blue-600 dark:text-blue-400 truncate">
+                  https://stripe.com/docs
+                </p>
               </CardBody>
             </Card>
           </div>
         </CardBody>
       </Card>
 
-
       <Card id="section-modules" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -701,60 +1296,190 @@ function MonComposant() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Les modules LastBrain permettent d'ajouter des fonctionnalités complètes à votre application de manière modulaire.</p>
-            <h3 className="text-lg font-semibold mb-2">Modules Disponibles</h3>
-            <h4 className="font-medium mb-2">[module-ai](../packages/module-ai/README.md)</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">@lastbrain/module-ai</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><strong>Pages</strong>: 1 auth, 2 admin</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><strong>Tables</strong>: user_token_ledger, user_prompts</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><a href="../packages/module-ai/README.md" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">📖 Documentation complète →</a></p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-            <h4 className="font-medium mb-2">[module-auth](../packages/module-auth/README.md)</h4>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">@lastbrain/module-auth</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><strong>Pages</strong>: 3 publique(s), 3 auth, 2 admin</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><strong>Tables</strong>: user_profil, user_address, user_notifications</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2"><a href="../packages/module-auth/README.md" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">📖 Documentation complète →</a></p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-            <h3 className="text-lg font-semibold mb-2">Commandes</h3>
-            <h4 className="font-medium mb-2">Installer un module</h4>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm lastbrain add-module nom-du-module`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm build:modules`}
-            </Snippet>
-            <h4 className="font-medium mb-2">Créer un nouveau module</h4>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm lastbrain create-module nom-du-module`}
-            </Snippet>
-            <h4 className="font-medium mb-2">Générer la documentation des modules</h4>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm generate:module-docs`}
-            </Snippet>
-            <h4 className="font-medium mb-2">Supprimer un module</h4>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm lastbrain remove-module nom-du-module`}
-            </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              {`pnpm build:modules`}
-            </Snippet>
-            <h3 className="text-lg font-semibold mb-2">Développement de modules</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Pour créer un nouveau module, consultez la <a href="./004_CREATE_MODULE.md" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">documentation de création de modules</a>.</p>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">La documentation de chaque module est générée automatiquement depuis :</p>
-            <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Le fichier <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">module-name.build.config.ts</code> pour les pages et APIs</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Les fichiers de migration SQL pour les tables</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Le README.md est auto-généré avec <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">pnpm generate:module-docs</code></span>
-              </div>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Les modules LastBrain permettent d'ajouter des fonctionnalités
+            complètes à votre application de manière modulaire.
+          </p>
+          <h3 className="text-lg font-semibold mb-2">Modules Disponibles</h3>
+          <h4 className="font-medium mb-2">
+            [module-ai](../packages/module-ai/README.md)
+          </h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            @lastbrain/module-ai
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Pages</strong>: 1 auth, 1 admin
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Tables</strong>: user_token_ledger, user_prompts
+          </p>
+          <h4 className="font-medium mb-2">Installation du module ai</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain add-module ai`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <a
+              href="../packages/module-ai/README.md"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              📖 Documentation complète →
+            </a>
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
+          <h4 className="font-medium mb-2">
+            [module-auth](../packages/module-auth/README.md)
+          </h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            @lastbrain/module-auth
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Pages</strong>: 3 publique(s), 4 auth, 2 admin
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Tables</strong>: user_profil, user_address,
+            user_notifications
+          </p>
+          <h4 className="font-medium mb-2">Installation du module auth</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain add-module auth`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <a
+              href="../packages/module-auth/README.md"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              📖 Documentation complète →
+            </a>
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
+          <h4 className="font-medium mb-2">
+            [module-recipes](../packages/module-recipes/README.md)
+          </h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            @lastbrain/module-recipes
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Pages</strong>: 4 auth
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Tables</strong>: recipes, recipe_favorites, recipe_comments,
+            recipe_image_queue, recipe_embeddings
+          </p>
+          <h4 className="font-medium mb-2">Installation du module recipes</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain add-module recipes`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <a
+              href="../packages/module-recipes/README.md"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              📖 Documentation complète →
+            </a>
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
+          <h4 className="font-medium mb-2">
+            [module-tasks](../packages/module-tasks/README.md)
+          </h4>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            @lastbrain/module-tasks
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Pages</strong>: 2 auth, 1 admin
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <strong>Tables</strong>: tasks, tasks_logs
+          </p>
+          <h4 className="font-medium mb-2">Installation du module tasks</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain add-module tasks`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            <a
+              href="../packages/module-tasks/README.md"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              📖 Documentation complète →
+            </a>
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
+          <h3 className="text-lg font-semibold mb-2">Commandes</h3>
+          <h4 className="font-medium mb-2">Installer un module</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain add-module nom-du-module`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm build:modules`}
+          </Snippet>
+          <h4 className="font-medium mb-2">Créer un nouveau module</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain create-module nom-du-module`}
+          </Snippet>
+          <h4 className="font-medium mb-2">
+            Générer la documentation des modules
+          </h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm generate:module-docs`}
+          </Snippet>
+          <h4 className="font-medium mb-2">Supprimer un module</h4>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm lastbrain remove-module nom-du-module`}
+          </Snippet>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm build:modules`}
+          </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Développement de modules
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Pour créer un nouveau module, consultez la{" "}
+            <a
+              href="./004_CREATE_MODULE.md"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              documentation de création de modules
+            </a>
+            .
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            La documentation de chaque module est générée automatiquement depuis
+            :
+          </p>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                Le fichier{" "}
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  module-name.build.config.ts
+                </code>{" "}
+                pour les pages et APIs
+              </span>
             </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>Les fichiers de migration SQL pour les tables</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                Le README.md est auto-généré avec{" "}
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  pnpm generate:module-docs
+                </code>
+              </span>
+            </div>
+          </div>
         </CardBody>
       </Card>
     </div>