@lastbrain/app 0.1.34 → 0.1.36

package/src/templates/DefaultDoc.tsx

@@ -1,38 +1,41 @@
+// 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() {
   return (
     <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>
 
+
       <Card id="section-quickstart" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -41,68 +44,102 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Installation</h3>
+            <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">
-              pnpm install
+              {`# 1. Créer une nouvelle application (utilise @latest pour la version la plus récente)`}
             </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
+              {`pnpx @lastbrain/app@latest init mon-app`}
             </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
+              {`# 2. Accéder au dossier`}
             </Snippet>
             <Snippet symbol="" hideSymbol className="text-sm mb-2">
-              pnpm lastbrain add-module auth
+              {`cd mon-app`}
             </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
+              {`# 3. Initialiser Supabase`}
             </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>
-          </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
+              {`pnpm db:init`}
             </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>
-          </div>
+            <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>
+            <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>
 
+
       <Card id="section-architecture" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -111,62 +148,19 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400">
-            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>
+            <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">
@@ -175,74 +169,48 @@ 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
+              {`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 {
+            <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>
 
+
       <Card id="section-database" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -251,108 +219,60 @@ 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>
+            <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>
 
+
       <Card id="section-development" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -361,43 +281,30 @@ 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
+            <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>
-          </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
+            <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>
-          </div>
-          <div>
             <h3 className="text-lg font-semibold mb-2">Build de production</h3>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm build
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              {`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
+              {`cd packages/module-auth`}
             </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm dev
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              {`pnpm dev`}
             </Snippet>
-          </div>
         </CardBody>
       </Card>
 
+
       <Card id="section-routes" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -406,36 +313,27 @@ export function DefaultDocumentation() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400 mb-4">
-            Le middleware protège automatiquement vos routes selon ces règles :
-          </p>
-          <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>
-            <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>
-            <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>
+            <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>
             </div>
-          </div>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mt-4">
-            Le middleware se trouve dans{" "}
-            <code className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">
-              middleware.ts
-            </code>
-          </p>
+            <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">
@@ -444,56 +342,34 @@ 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>
+            <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
+              {`cd packages/module-auth`}
             </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm build
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              {`pnpm build`}
             </Snippet>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold mb-2">
-              3. Régénérer les pages
-            </h3>
+            <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
+              {`cd apps/my-app`}
             </Snippet>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm build:modules
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              {`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
+            <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>
-          </div>
-          <div>
             <h3 className="text-lg font-semibold mb-2">5. Tester</h3>
-            <Snippet symbol="" hideSymbol className="text-sm">
-              pnpm dev
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              {`pnpm dev`}
             </Snippet>
-          </div>
         </CardBody>
       </Card>
 
+
       <Card id="section-ui" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -502,127 +378,55 @@ 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>
+            <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>
-          </div>
-
-          <div>
+            <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">
-              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>
+            <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">
-            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
+            <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(
-  "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,41 +435,32 @@ import { storagePathToProxyUrl } from "@/lib/storage";
 
 const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
 // Retourne: "/api/storage/avatar/user_128_123456.webp"`}</pre>
-            </div>
-          </div>
-
-          <div>
+            </Alert>
             <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="space-y-2">
               <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>URLs plus courtes et lisibles</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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <span>✅ Extensible facilement</span>
               </div>
             </div>
-          </div>
         </CardBody>
       </Card>
 
+
       <Card id="section-realtime" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -674,28 +469,14 @@ const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400">
-            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 {
+            <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",
-  
+
   // Configuration realtime
   realtime: {
     moduleId: "module-auth",
@@ -705,63 +486,38 @@ 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
+  ],
+};`}</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">
-              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";
+            <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 +526,14 @@ 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 +541,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,126 +557,56 @@ function MonComposant() {
     }
   }, [signal.tick]);
 }`}</pre>
-                </div>
-              </div>
-            </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>
+            </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="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 className="flex items-start gap-2">
+                <span>✅ Génération automatique de config</span>
               </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 className="flex items-start gap-2">
+                <span>✅ Hooks React prêts à l'emploi</span>
               </div>
-            </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>
+                <span>✅ Sécurité RLS de Supabase</span>
               </div>
               <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Génération automatique de config</span>
+                <span>✅ Scalable pour n'importe quelle table</span>
               </div>
               <div className="flex items-start gap-2">
-                <span className="text-green-600">✅</span>
-                <span>Hooks React prêts à l'emploi</span>
+                <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>Sécurité RLS de Supabase</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>Scalable pour n'importe quelle table</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>TypeScript avec types générés</span>
-              </div>
-            </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>
+                <span><strong>📊 Données collaboratives</strong>: Synchronisation automatique des modifications de données entre utilisateurs</span>
               </div>
             </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">
@@ -939,24 +615,11 @@ function MonComposant() {
           </h2>
         </CardHeader>
         <CardBody className="space-y-4">
-          <p className="text-slate-600 dark:text-slate-400">
-            Chaque module peut exporter un composant de documentation qui sera
-            automatiquement intégré dans cette page.
-          </p>
-
-          <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>
-            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
-              <pre>{`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">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() {
   return (
     <div>
       <h1>Mon Module</h1>
@@ -964,84 +627,134 @@ 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
-              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>
-
-            <a
-              href="https://supabase.com/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">Supabase</h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Documentation officielle
-              </p>
-            </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">
+              <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>
 
-            <a
-              href="https://nextui.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">NextUI</h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Composants UI
-              </p>
-            </a>
 
-            <a
-              href="https://tailwindcss.com/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">Tailwind CSS</h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">
-                Framework CSS
-              </p>
-            </a>
-          </div>
+      <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, 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>
+            </div>
         </CardBody>
       </Card>
     </div>