@lastbrain/app 0.1.34 → 0.1.37

package/src/templates/DefaultDoc.tsx

@@ -1,14 +1,20 @@
+// GENERATED FILE - DO NOT EDIT MANUALLY
+// This file is auto-generated from markdown files in docs/
+// Run 'pnpm sync:docs' to regenerate
 import React from "react";
-import { Card, CardBody, CardHeader, Chip, Snippet } from "@lastbrain/ui";
+import { Card, CardBody, CardHeader, Snippet, Alert } from "@lastbrain/ui";
 import {
+  FileText,
   Rocket,
   Building2,
   BookOpen,
   Database,
-  Palette,
-  Link as LinkIcon,
+  User,
   Shield,
   Zap,
+  Palette,
+  HardDrive,
+  Link,
 } from "lucide-react";
 
 export function DefaultDocumentation() {
@@ -16,20 +22,23 @@ export function DefaultDocumentation() {
     <div className="space-y-6">
       <Card id="section-welcome" className="scroll-mt-32">
         <CardHeader>
-          <div className="flex items-center justify-between w-full">
-            <h1 className="text-3xl font-bold">Documentation LastBrain</h1>
-            <Chip color="primary" variant="flat">
-              v1.0.0
-            </Chip>
-          </div>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <FileText size={24} />
+            Documentation LastBrain
+          </h2>
         </CardHeader>
-        <CardBody className="space-y-6">
-          <div>
-            <p className="text-slate-600 dark:text-slate-400 text-lg">
-              LastBrain est un framework modulaire pour créer des applications
-              Next.js avec une architecture basée sur des modules réutilisables.
-            </p>
-          </div>
+        <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>
         </CardBody>
       </Card>
 
@@ -41,65 +50,173 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Installation</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              pnpm install
-            </Snippet>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Initialiser la base de données
-            </h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              pnpm db:init
-            </Snippet>
-            <p className="text-sm text-slate-600 dark:text-slate-400">
-              Démarre Supabase en local et applique les migrations
-            </p>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Ajouter des modules</h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              pnpm lastbrain list-modules
-            </Snippet>
-            <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">
-              Modules disponibles : <strong>auth</strong> (authentification),{" "}
-              <strong>ai</strong> (génération IA)
-            </p>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Construire les modules
-            </h3>
-            <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              pnpm build:modules
-            </Snippet>
-            <p className="text-sm text-slate-600 dark:text-slate-400">
-              Génère les pages et routes à partir des modules installés
-            </p>
+          <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>
           </div>
-
-          <div>
-            <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>
-            <p className="text-sm text-slate-600 dark:text-slate-400">
-              Ouvre l'application sur{" "}
-              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
-                http://localhost:3000
-              </code>
-            </p>
+          <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>
+          <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>
 
@@ -111,59 +228,29 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400">
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             Le projet est organisé en monorepo avec pnpm workspaces :
           </p>
-
-          <div className="space-y-3">
-            <div className="border-l-4 border-blue-500 pl-4">
-              <h3 className="font-semibold text-lg mb-1">
-                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
-                  @lastbrain/app
-                </code>
-              </h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Framework principal et CLI. Contient les layouts, scripts de
-                build, templates et la logique de génération des pages.
-              </p>
-            </div>
-
-            <div className="border-l-4 border-green-500 pl-4">
-              <h3 className="font-semibold text-lg mb-1">
-                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
-                  @lastbrain/core
-                </code>
-              </h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Utilitaires et types partagés. Contient les helpers Supabase,
-                fonctions serveur et types TypeScript communs.
-              </p>
-            </div>
-
-            <div className="border-l-4 border-purple-500 pl-4">
-              <h3 className="font-semibold text-lg mb-1">
-                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
-                  @lastbrain/ui
-                </code>
-              </h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Composants UI réutilisables basés sur NextUI et Tailwind CSS.
-                Fournit les composants Card, Button, Input, etc.
-              </p>
-            </div>
-
-            <div className="border-l-4 border-orange-500 pl-4">
-              <h3 className="font-semibold text-lg mb-1">
-                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
-                  @lastbrain/module-*
-                </code>
-              </h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Modules fonctionnels (auth, ai, etc.). Chaque module contient
-                ses pages, APIs, composants, migrations et documentation.
-              </p>
-            </div>
-          </div>
+          <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>
 
@@ -175,71 +262,61 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div>
-            <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-4">
-              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>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Structure d'un module
-            </h3>
-            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono">
-              <div className="space-y-1">
-                <div>📁 module-mon-module/</div>
-                <div className="ml-4">├── 📄 package.json</div>
-                <div className="ml-4">├── 📄 mon-module.build.config.ts</div>
-                <div className="ml-4">└── 📁 src/</div>
-                <div className="ml-8">├── 📄 index.ts</div>
-                <div className="ml-8">├── 📄 server.ts</div>
-                <div className="ml-8">├── 📁 web/</div>
-                <div className="ml-8">├── 📁 api/</div>
-                <div className="ml-8">├── 📁 components/</div>
-                <div className="ml-8">└── 📁 supabase/</div>
-                <div className="ml-12">└── 📁 migrations/</div>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <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">
-                {"{slug}"}.build.config.ts
-              </code>{" "}
-              définit les pages et APIs :
-            </p>
-            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-              <pre>{`export default {
+          <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/
+    ├── 📄 index.ts
+    ├── 📄 server.ts
+    ├── 📁 web/
+    ├── 📁 api/
+    ├── 📁 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 {
   name: "Mon Module",
   description: "Description du module",
   pages: [
     {
       path: "/ma-page",
       component: "./web/MaPage",
-      layout: "auth"
-    }
+      layout: "auth",
+    },
   ],
   apis: [
     {
       path: "/api/mon-api",
-      handler: "./api/mon-api"
-    }
-  ]
-}`}</pre>
-            </div>
-          </div>
+      handler: "./api/mon-api",
+    },
+  ],
+};`}</pre>
+          </Alert>
         </CardBody>
       </Card>
 
@@ -251,105 +328,85 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Supabase local</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
-              LastBrain utilise Supabase pour la base de données et
-              l'authentification.
-            </p>
-
-            <div className="space-y-3">
-              <div>
-                <p className="text-sm font-medium mb-1">Démarrer Supabase :</p>
-                <Snippet symbol="" hideSymbol className="text-sm">
-                  pnpm db:init
-                </Snippet>
-              </div>
-
-              <div>
-                <p className="text-sm font-medium mb-1">
-                  Synchroniser les migrations :
-                </p>
-                <Snippet symbol="" hideSymbol className="text-sm">
-                  pnpm db:migrations:sync
-                </Snippet>
-              </div>
-
-              <div>
-                <p className="text-sm font-medium mb-1">
-                  Créer une migration :
-                </p>
-                <Snippet symbol="" hideSymbol className="text-sm">
-                  supabase migration new ma_migration
-                </Snippet>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Migrations des modules
-            </h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400">
-              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>
-          </div>
+          <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">
-            👤 Créer un Compte Administrateur
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <User size={24} />
+            Créer un Compte Administrateur
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <ol className="list-decimal list-inside space-y-4">
-            <li className="text-lg">
-              <strong>Créer un compte</strong>
-              <p className="text-slate-600 dark:text-slate-400 ml-6 mb-2">
-                Allez sur{" "}
-                <code className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">
-                  /signup
-                </code>{" "}
-                et créez votre compte
-              </p>
-            </li>
-            <li className="text-lg">
-              <strong>Promouvoir en administrateur</strong>
-              <p className="text-slate-600 dark:text-slate-400 ml-6 mb-2">
-                Exécutez cette requête SQL dans le Studio Supabase (
-                <code className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">
-                  http://localhost:54323
-                </code>
-                ) ou via psql :
-              </p>
-              <div className="ml-6">
-                <Snippet symbol="" hideSymbol className="text-sm">
-                  <span>{`update auth.users`}</span>
-                  <span>{`set raw_app_meta_data = jsonb_set(`}</span>
-                  <span>{`coalesce(raw_app_meta_data, '{}'::jsonb),`}</span>
-                  <span>{`'{roles}',`}</span>
-                  <span>{`'["admin"]'::jsonb`}</span>
-                  <span>{`)`}</span>
-                  <span>{`where email = 'votre@email.com';`}</span>
-                </Snippet>
-              </div>
-            </li>
-            <li className="text-lg">
-              <strong>Accéder à l'interface admin</strong>
-              <p className="text-slate-600 dark:text-slate-400 ml-6">
-                Vous pouvez maintenant accéder à{" "}
-                <code className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">
-                  /admin
-                </code>
-              </p>
-            </li>
-          </ol>
+          <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>
+            <span>{`  coalesce(raw_app_meta_data, '{}'::jsonb),
+`}</span>
+            <span>{`  '{roles}',
+`}</span>
+            <span>{`  '["admin"]'::jsonb
+`}</span>
+            <span>{`)
+`}</span>
+            <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>
         </CardBody>
       </Card>
 
@@ -361,40 +418,32 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Lancer le serveur de développement
-            </h3>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm dev
-            </Snippet>
-          </div>
-          <div>
-            <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">
-              pnpm build:modules
-            </Snippet>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Build de production</h3>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm build
-            </Snippet>
-          </div>
-          <div>
-            <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">
-              pnpm dev
-            </Snippet>
-          </div>
+          <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>
 
@@ -406,30 +455,42 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400 mb-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="p-3 bg-slate-50 dark:bg-slate-900 rounded">
-              <code className="text-blue-600 dark:text-blue-400">/auth/*</code>
-              <span className="ml-2">→ Authentification requise</span>
+            <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="p-3 bg-slate-50 dark:bg-slate-900 rounded">
-              <code className="text-purple-600 dark:text-purple-400">
-                /admin/*
-              </code>
-              <span className="ml-2">→ Superadmin uniquement</span>
+            <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="p-3 bg-slate-50 dark:bg-slate-900 rounded">
-              <code className="text-green-600 dark:text-green-400">
-                /docs/*
-              </code>
-              <span className="ml-2">→ Accès public</span>
+            <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 mt-4">
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             Le middleware se trouve dans{" "}
-            <code className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
               middleware.ts
             </code>
           </p>
@@ -444,53 +505,37 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div>
-            <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="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">
-                packages/module-*/src
-              </code>
-            </p>
-          </div>
-          <div>
-            <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">
-              pnpm build
-            </Snippet>
-          </div>
-          <div>
-            <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">
-              pnpm build:modules
-            </Snippet>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              4. Appliquer les migrations
-            </h3>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              supabase migration up
-            </Snippet>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold mb-2">5. Tester</h3>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm dev
-            </Snippet>
-          </div>
+          <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>
 
@@ -502,127 +547,93 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Composants NextUI</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
-              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>
-          </div>
-
-          <div>
-            <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>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Tailwind CSS v4</h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400">
-              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>
-          </div>
+          <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">
-            <Database size={24} />
+            <HardDrive size={24} />
             Système de Proxy Storage
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400">
+          <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>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              URLs Proxy vs URLs Supabase
-            </h3>
-            <div className="space-y-3">
-              <div className="bg-red-50 dark:bg-red-950 p-3 rounded-lg">
-                <p className="text-sm font-medium text-red-700 dark:text-red-300 mb-1">
-                  ❌ URL Supabase classique (longue)
-                </p>
-                <code className="text-xs text-red-600 dark:text-red-400 break-all">
-                  https://xxx.supabase.co/storage/v1/object/public/avatar/user_128_123456.webp
-                </code>
-              </div>
-              <div className="bg-green-50 dark:bg-green-950 p-3 rounded-lg">
-                <p className="text-sm font-medium text-green-700 dark:text-green-300 mb-1">
-                  ✅ URL Proxy (propre)
-                </p>
-                <code className="text-xs text-green-600 dark:text-green-400">
-                  /api/storage/avatar/user_128_123456.webp
-                </code>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Configuration des Buckets
-            </h3>
-            <div className="space-y-3">
-              <div className="border-l-4 border-green-500 pl-4">
-                <h4 className="font-semibold text-green-600 dark:text-green-400">
-                  📂 avatar (Public)
-                </h4>
-                <p className="text-sm text-slate-600 dark:text-slate-400">
-                  Photos de profil et avatars • 10MB max • Types: JPEG, PNG,
-                  WebP, GIF
-                </p>
-                <code className="text-xs bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
-                  /api/storage/avatar/user_128_123456.webp
-                </code>
-              </div>
-
-              <div className="border-l-4 border-blue-500 pl-4">
-                <h4 className="font-semibold text-blue-600 dark:text-blue-400">
-                  🔒 app (Privé)
-                </h4>
-                <p className="text-sm text-slate-600 dark:text-slate-400">
-                  Fichiers privés des utilisateurs • 100MB max •
-                  Authentification requise
-                </p>
-                <code className="text-xs bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
-                  /api/storage/app/user-id/documents/file.pdf
-                </code>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Utilisation dans le code
-            </h3>
-            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-              <pre>{`// Upload d'un fichier
+          <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(
-  "avatar", 
-  "user_128_123456.webp", 
-  file, 
-  "image/webp"
+  "avatar",
+  "user_128_123456.webp",
+  file,
+  "image/webp",
 );
 // Retourne: "/api/storage/avatar/user_128_123456.webp"
 
@@ -631,36 +642,26 @@ 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>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>URLs plus courtes et lisibles</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Contrôle d'accès granulaire</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Cache optimisé (1 an)</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Sécurité améliorée</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Détection auto des types MIME</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Extensible facilement</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>
@@ -674,28 +675,26 @@ const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400">
+          <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>
-
-          <div>
-            <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-3">
-              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>
-            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-              <pre>{`export default {
+          <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",
-  
+
   // Configuration realtime
   realtime: {
     moduleId: "module-auth",
@@ -705,63 +704,53 @@ const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
         table: "user_notifications",
         event: "*", // INSERT, UPDATE, DELETE ou *
         filter: "owner_id=eq.\${USER_ID}",
-        broadcast: "user_notifications_updated"
+        broadcast: "user_notifications_updated",
       },
       {
-        schema: "public", 
+        schema: "public",
         table: "user_profiles",
         event: "*",
         filter: "owner_id=eq.\${USER_ID}",
-        broadcast: "user_profile_updated"
-      }
-    ]
+        broadcast: "user_profile_updated",
+      },
+    ],
   },
-  
+
   pages: [
     // vos pages...
-  ]
-}`}</pre>
-            </div>
-          </div>
-
-          <div>
-            <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-3">
-              pnpm build:modules
-            </Snippet>
-            <p className="text-sm text-slate-600 dark:text-slate-400">
-              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>
-          </div>
-
-          <div>
-            <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-3">
-              Utilisez les hooks pré-construits pour écouter les changements :
-            </p>
-            <div className="space-y-4">
-              <div>
-                <h4 className="font-medium mb-2">
-                  1. Hook générique pour une table
-                </h4>
-                <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-                  <pre>{`import { useTableRealtime } from "@lastbrain/core";
+  ],
+};`}</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";
 
 function MonComposant() {
   const signal = useTableRealtime("user_notifications");
-  
+
   useEffect(() => {
     if (signal.hasUpdates) {
       console.log("Nouvelle notification!");
@@ -770,19 +759,16 @@ function MonComposant() {
     }
   }, [signal.tick]);
 }`}</pre>
-                </div>
-              </div>
-
-              <div>
-                <h4 className="font-medium mb-2">
-                  2. Hook spécialisé pour les notifications
-                </h4>
-                <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-                  <pre>{`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();
-  
+
   return (
     <div>
       🔔 {notifications.length}
@@ -790,19 +776,14 @@ function NotificationBell() {
     </div>
   );
 }`}</pre>
-                </div>
-              </div>
-
-              <div>
-                <h4 className="font-medium mb-2">
-                  3. Hook bas niveau avec EventBus
-                </h4>
-                <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-                  <pre>{`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");
-  
+
   useEffect(() => {
     if (signal.hasUpdates) {
       // Événement spécifique reçu
@@ -811,121 +792,73 @@ function MonComposant() {
     }
   }, [signal.tick]);
 }`}</pre>
-                </div>
-              </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>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Architecture du système
-            </h3>
-            <div className="space-y-3">
-              <div className="border-l-4 border-blue-500 pl-4">
-                <h4 className="font-semibold text-blue-600 dark:text-blue-400">
-                  🎯 EventBus Global
-                </h4>
-                <p className="text-sm text-slate-600 dark:text-slate-400">
-                  Système central de coordination des événements realtime à
-                  travers toute l'application.
-                </p>
-              </div>
-
-              <div className="border-l-4 border-green-500 pl-4">
-                <h4 className="font-semibold text-green-600 dark:text-green-400">
-                  🔌 RealtimeProvider
-                </h4>
-                <p className="text-sm text-slate-600 dark:text-slate-400">
-                  Provider React qui établit les connexions Supabase Realtime
-                  basées sur la configuration des modules.
-                </p>
-              </div>
-
-              <div className="border-l-4 border-purple-500 pl-4">
-                <h4 className="font-semibold text-purple-600 dark:text-purple-400">
-                  ⚡ Hooks Scalables
-                </h4>
-                <p className="text-sm text-slate-600 dark:text-slate-400">
-                  Collection de hooks React pour écouter des tables ou
-                  événements spécifiques avec auto-refresh.
-                </p>
-              </div>
-
-              <div className="border-l-4 border-orange-500 pl-4">
-                <h4 className="font-semibold text-orange-600 dark:text-orange-400">
-                  🛠️ Build intégré
-                </h4>
-                <p className="text-sm text-slate-600 dark:text-slate-400">
-                  Génération automatique de la configuration TypeScript lors du
-                  build des modules.
-                </p>
-              </div>
+            <div className="flex items-start gap-2">
+              <span>✅ Génération automatique de config</span>
             </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Configuration déclarative dans les modules</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Génération automatique de config</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Hooks React prêts à l'emploi</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Sécurité RLS de Supabase</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Scalable pour n'importe quelle table</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>TypeScript avec types générés</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>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              Exemples d'utilisation
-            </h3>
-            <div className="space-y-3">
-              <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-lg">
-                <h4 className="font-medium text-blue-700 dark:text-blue-300 mb-1">
-                  🔔 Notifications
-                </h4>
-                <p className="text-sm text-blue-600 dark:text-blue-400">
-                  Affichage en temps réel des nouvelles notifications avec badge
-                  et auto-refresh
-                </p>
-              </div>
-
-              <div className="p-3 bg-purple-50 dark:bg-purple-950 rounded-lg">
-                <h4 className="font-medium text-purple-700 dark:text-purple-300 mb-1">
-                  👥 Utilisateurs en ligne
-                </h4>
-                <p className="text-sm text-purple-600 dark:text-purple-400">
-                  Suivi des connexions/déconnexions des utilisateurs en direct
-                </p>
-              </div>
-
-              <div className="p-3 bg-green-50 dark:bg-green-950 rounded-lg">
-                <h4 className="font-medium text-green-700 dark:text-green-300 mb-1">
-                  📊 Données collaboratives
-                </h4>
-                <p className="text-sm text-green-600 dark:text-green-400">
-                  Synchronisation automatique des modifications de données entre
-                  utilisateurs
-                </p>
-              </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>
@@ -939,24 +872,277 @@ function MonComposant() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400">
+          <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>
-            <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 className="font-semibold">Introduction</p>
+            <p className="text-sm mt-1">
+              Description de votre module et de ses fonctionnalités principales.
             </p>
-            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-              <pre>{`export function MonModuleDoc() {
+          </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>
@@ -964,83 +1150,307 @@ function MonComposant() {
     </div>
   );
 }`}</pre>
-            </div>
-          </div>
-
-          <div>
-            <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>
-            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono">
-              <pre>{`export { MonModuleDoc } from "./components/Doc.js";`}</pre>
-            </div>
-          </div>
+          </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">
-            <LinkIcon size={24} />
-            Liens utiles
+            <Link size={24} />
+            Liens utiles & remerciements 🙏
           </h2>
         </CardHeader>
         <CardBody>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <a
+          <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"
-              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
             >
-              <h3 className="font-semibold mb-1">Next.js</h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Documentation officielle
-              </p>
-            </a>
+              <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>
+              </CardBody>
+            </Card>
+            <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>
+              </CardBody>
+            </Card>
+            <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>
+              </CardBody>
+            </Card>
+            <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>
+              </CardBody>
+            </Card>
+            <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>
+              </CardBody>
+            </Card>
+            <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>
+              </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">
+            <FileText size={24} />
+            Modules
+          </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, 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="https://supabase.com/docs"
+              href="../packages/module-ai/README.md"
+              className="text-blue-600 hover:underline"
               target="_blank"
               rel="noopener noreferrer"
-              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
             >
-              <h3 className="font-semibold mb-1">Supabase</h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Documentation officielle
-              </p>
+              📖 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="https://nextui.org/docs"
+              href="../packages/module-auth/README.md"
+              className="text-blue-600 hover:underline"
               target="_blank"
               rel="noopener noreferrer"
-              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
             >
-              <h3 className="font-semibold mb-1">NextUI</h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Composants UI
-              </p>
+              📖 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="https://tailwindcss.com/docs"
+              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"
-              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
             >
-              <h3 className="font-semibold mb-1">Tailwind CSS</h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Framework CSS
-              </p>
+              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>