@arc-js/core 0.0.57 → 0.0.59

package/README.md

@@ -5,32 +5,33 @@
 ![React](https://img.shields.io/badge/React-18+-61DAFB)
 ![React Router](https://img.shields.io/badge/React%20Router-6+-CA4245)
 
-**@arc-js/core** est un module de routage intelligent et auto-configuré pour les applications React avec TypeScript/Javascript. Il fournit un système de routage basé sur la structure de fichiers, des hooks de navigation avancés et une configuration minimale pour les applications modulaires.
+**@arc-js/core** est un ensemble de hooks et utilitaires de routage avancés pour les applications React avec TypeScript/JavaScript. Il fournit des fonctionnalités de navigation avancées, une gestion automatique des langues et des utilitaires pour simplifier le développement d'applications React Router.
 
 ## ✨ Fonctionnalités Principales
 
-### 🗺️ Routage Auto-Généré
-- **Génération automatique des routes** à partir de la structure du système de fichiers
-- **Support des layouts hiérarchiques** avec héritage automatique
-- **Pages d'erreur spécifiques** par sous-répertoire
-- **Configuration modulaire** avec support des modules indépendants
-
-### 🧭 Hooks de Navigation Avancés
+### 🧭 Navigation Avancée
 - **Navigation type-safe** avec validation des paramètres
 - **Gestion automatique des query strings** avec support multi-langue
 - **Résolution de routes** avec paramètres dynamiques
 - **Navigation avec rechargement** pour les mises à jour critiques
-
-### ⚙️ Configuration Modulaire
-- **Configuration par module** avec fichiers `config.json`
-- **Activation/désactivation** dynamique des modules
-- **Chemins personnalisables** par module
-- **Détection automatique** des fichiers de pages
-
-### 🛡️ Sécurité et Fiabilité
-- **Validation des chemins** avec fallback sécurisé
-- **Gestion des erreurs** avec pages d'erreur hiérarchiques
-- **Logs détaillés** en mode développement seulement
+- **Analyse d'URL** complète avec extraction des données
+
+### 🌍 Support Multi-Langue
+- **Gestion automatique** du paramètre de langue `lang`
+- **Support intégré** pour français et anglais
+- **Fallback sécurisé** vers le français par défaut
+- **Codes de langue** standardisés (fr_FR, en_US)
+
+### ⚡ Utilitaires de Routage
+- **Validation de route actuelle** avec correspondance de chemin
+- **Extraction des paramètres** de query string
+- **Génération d'URL** avec paramètres et queries
+- **Navigation externe** vers des URL spécifiques
+
+### 🛡️ Gestion d'Erreurs
+- **Fallback sécurisé** pour les routes invalides
+- **Validation stricte** des paramètres d'entrée
+- **Logs détaillés** en mode développement
 - **Types TypeScript complets** pour une meilleure autocomplétion
 
 ## 📦 Installation
@@ -38,48 +39,21 @@
 ### Via npm/yarn/pnpm
 
 ```bash
-npm install @arc-js/core react-router-dom react
+npm install @arc-js/core react-router-dom @arc-js/qust react
 # ou
-yarn add @arc-js/core react-router-dom react
+yarn add @arc-js/core react-router-dom @arc-js/qust react
 # ou
-pnpm add @arc-js/core react-router-dom react
+pnpm add @arc-js/core react-router-dom @arc-js/qust react
 ```
 
 ### Dépendances requises
 - React 18+
 - React Router DOM 6+
 - TypeScript 5.0+ (recommandé)
-- @arc-js/qust (pour la manipulation de query strings)
+- @arc-js/qust 1.0.0+ (pour la manipulation de query strings)
 
 ## 🚀 Démarrage Rapide
 
-### Structure de projet recommandée
-
-```
-src/
-├── pages/
-│   ├── _layout.tsx          # Layout racine
-│   ├── _error.tsx           # Page d'erreur racine
-│   ├── index.tsx            # Page d'accueil
-│   ├── about/
-│   │   ├── _layout.tsx      # Layout spécifique à /about
-│   │   ├── _error.tsx       # Erreur spécifique à /about
-│   │   ├── index.tsx        # /about
-│   │   └── team.tsx         # /about/team
-│   └── users/
-│       ├── _layout.tsx      # Layout spécifique à /users
-│       ├── [id].tsx         # /users/:id (paramètre dynamique)
-│       └── index.tsx        # /users
-├── modules/
-│   └── admin/
-│       ├── config.json      # Configuration du module admin
-│       └── pages/
-│           ├── _layout.tsx  # Layout du module admin
-│           ├── dashboard.tsx # /admin/dashboard
-│           └── users.tsx    # /admin/users
-└── main.tsx
-```
-
 ### Configuration de base
 
 ```typescript
@@ -87,33 +61,56 @@ src/
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import getRoutes from '@arc-js/core';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-
-const App = () => {
-  const routes = getRoutes();
-  const router = createBrowserRouter(routes);
-  
-  return <RouterProvider router={router} />;
-};
+import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 ```
 
-### Fichier config.json d'un module
+### Utilisation du hook principal
 
-```json
-{
-  "path": "/admin",
-  "name": "Administration",
-  "description": "Module d'administration",
-  "author": "Votre Équipe",
-  "isEnabled": true
-}
+```typescript
+// App.tsx
+import { useRootingActions } from '@arc-js/core';
+
+const App = () => {
+  const {
+    params,
+    queries,
+    resolveRoute,
+    goToRoute,
+    checkIfIsCurrentRoute
+  } = useRootingActions();
+
+  // Navigation vers une page avec paramètres
+  const navigateToUser = (userId: string) => {
+    goToRoute({
+      path: '/users/:id',
+      params: { id: userId },
+      queries: { lang: 'fr', view: 'profile' }
+    });
+  };
+
+  // Vérifier si on est sur la page d'accueil
+  const isHome = checkIfIsCurrentRoute('/');
+
+  return (
+    <div>
+      <h1>Mon Application</h1>
+      {isHome && <p>Vous êtes sur la page d'accueil</p>}
+      <button onClick={() => navigateToUser('123')}>
+        Voir l'utilisateur 123
+      </button>
+    </div>
+  );
+};
+
+export default App;
 ```
 
 ## 📚 Documentation API
@@ -125,32 +122,29 @@ import { useRootingActions } from '@arc-js/core';
 
 const MyComponent = () => {
   const {
-    params,           // Paramètres de route (ex: { id: "123" })
-    queries,          // Query parameters (ex: { lang: "fr", page: "1" })
-    navigate,         // Fonction navigate de react-router-dom
-    resolveRoute,     // Résoudre une route avec paramètres
+    // Paramètres de l'URL actuelle
+    params,           // { id: "123", slug: "article" }
+    queries,          // { lang: "fr", page: "1" }
+    pathName,         // "/users/123/profile"
+    urlSearch,        // "?lang=fr&page=1"
+    
+    // Fonctions de navigation
+    navigate,         // navigate() de react-router-dom
+    resolveRoute,     // Générer une URL complète
     goToRoute,        // Naviguer vers une route
     goAndReloadRoute, // Naviguer avec rechargement
-    pathName,         // Chemin actuel
-    urlSearch,        // Query string actuelle
+    goToUrl,          // Naviguer vers une URL externe
+    
+    // Utilitaires
+    getParams,        // Obtenir les paramètres d'URL
     getUrlData,       // Analyser une URL
-    checkIfIsCurrentRoute // Vérifier si on est sur une route
+    checkIfIsCurrentRoute // Vérifier la route actuelle
   } = useRootingActions();
   
-  // Exemple d'utilisation
-  const handleClick = () => {
-    goToRoute({
-      path: '/users/:id',
-      params: { id: '123' },
-      queries: { lang: 'fr', view: 'details' }
-    });
-  };
-  
   return (
     <div>
-      <button onClick={handleClick}>
-        Voir l'utilisateur 123
-      </button>
+      <p>ID Utilisateur: {params.id}</p>
+      <p>Langue: {queries.lang || 'fr'}</p>
     </div>
   );
 };
@@ -161,258 +155,194 @@ const MyComponent = () => {
 ```typescript
 // Configuration de navigation
 interface ConfigGoToRoute {
-  path?: string;
-  params?: any;
-  queries?: any;
-  refreshPage?: boolean;
-  replace?: boolean;
-  enableLoader?: boolean;
+  path?: string;           // Chemin de la route (ex: "/users/:id")
+  params?: any;           // Paramètres de route (ex: { id: "123" })
+  queries?: any;          // Query parameters (ex: { lang: "fr" })
+  refreshPage?: boolean;  // Forcer le rechargement
+  replace?: boolean;      // Remplacer l'historique
+  enableLoader?: boolean; // Afficher un loader
 }
 
-// Configuration de résolution de route
+// Configuration de résolution
 interface ConfigResolveRoute {
   path?: string;
   params?: any;
   queries?: any;
 }
 
-// Route générée automatiquement
-interface RouteDefinition {
-  truePath: string;     // Chemin physique du fichier
-  pathParent?: string;  // Chemin parent
-  path: string;         // Chemin de la route
-  component: React.ComponentType<any>;
-  layout?: React.ComponentType<{ children: ReactNode }>;
-  error?: React.ComponentType<{}>;
+// Configuration de navigation externe
+interface ConfigGoToSpecificUrl {
+  path?: string;
+  queries?: any;
+  refreshPage?: boolean;
+  replace?: boolean;
+  enableLoader?: boolean;
 }
 
-// Configuration d'un module
-interface ConfigDatasDefinition {
-  path: string;         // Chemin de base du module
-  name: string | undefined;
-  author: string | undefined;
-  isEnabled: boolean;   // Activation du module
+// Valeur de retour du hook
+interface RootingActionReturns {
+  params: Readonly<Params<string>>;
+  queries: any;
+  getParams: () => URLSearchParams;
+  navigate: NavigateFunction;
+  resolveRoute: (config: ConfigResolveRoute) => string;
+  goToRoute: (config: ConfigGoToRoute) => void;
+  goAndReloadRoute: (config: ConfigGoAndReloadRoute) => void;
+  pathName: string;
+  urlSearch: string;
+  getUrlData: (url: string | URL) => {
+    host: string;
+    hostname: string;
+    pathname: string;
+    search: string;
+    queries: any;
+  } | undefined;
+  goToUrl: (config: ConfigGoToSpecificUrl) => string;
+  checkIfIsCurrentRoute: (path?: string, exact?: boolean, strict?: boolean) => boolean;
 }
 ```
 
 ### Fonctions utilitaires
 
 ```typescript
-import { nativeResolveRoute } from '@arc-js/core';
+import { nativeResolveRoute, getLang, getLangCode } from '@arc-js/core';
 
-// Résoudre une URL sans utiliser le hook
-const url = nativeResolveRoute({
-  path: '/users/:id',
+// Générer une URL sans utiliser le hook
+const userProfileUrl = nativeResolveRoute({
+  path: '/users/:id/profile',
   params: { id: '456' },
-  queries: { lang: 'en', tab: 'profile' }
+  queries: { lang: 'en', tab: 'settings' }
 });
+// Résultat: "/users/456/profile?lang=en&tab=settings"
 
-console.log(url); // "/users/456?lang=en&tab=profile"
+// Gestion des langues
+const currentLang = getLang('fr');    // "fr" (valide)
+const fallbackLang = getLang('es');   // "fr" (fallback)
+const langCode = getLangCode('en');   // "en_US"
 ```
 
 ## 🔧 Utilisation Avancée
 
-### Pages dynamiques avec paramètres
+### Navigation avec gestion de langue
 
 ```typescript
-// src/pages/users/[id].tsx
-import { useRootingActions } from '@arc-js/core';
-
-const UserPage = () => {
-  const { params, queries } = useRootingActions();
-  const userId = params.id;
-  const lang = queries.lang || 'fr';
+const LanguageAwareNavigation = () => {
+  const { goToRoute, queries } = useRootingActions();
+  const currentLang = queries.lang || 'fr';
+  
+  const navigateWithLang = (path: string, params?: any, additionalQueries?: any) => {
+    goToRoute({
+      path,
+      params,
+      queries: {
+        ...additionalQueries,
+        lang: currentLang
+      }
+    });
+  };
   
   return (
     <div>
-      <h1>Utilisateur {userId}</h1>
-      <p>Langue: {lang}</p>
+      <button onClick={() => navigateWithLang('/about', null, { section: 'team' })}>
+        Voir l'équipe
+      </button>
     </div>
   );
 };
-
-export default UserPage;
-```
-
-### Layouts hiérarchiques
-
-```typescript
-// src/pages/_layout.tsx (Layout racine)
-const RootLayout = ({ children }) => (
-  <div className="app">
-    <header>Mon Application</header>
-    <main>{children}</main>
-    <footer>© 2024</footer>
-  </div>
-);
-
-// src/pages/admin/_layout.tsx (Layout admin)
-const AdminLayout = ({ children }) => (
-  <div className="admin">
-    <nav>Menu Admin</nav>
-    <div className="admin-content">{children}</div>
-  </div>
-);
 ```
 
-### Pages d'erreur spécifiques
+### Analyse d'URL externe
 
 ```typescript
-// src/pages/_error.tsx (Erreur globale)
-const GlobalErrorPage = () => (
-  <div>
-    <h1>Une erreur est survenue</h1>
-    <p>Veuillez réessayer plus tard.</p>
-  </div>
-);
-
-// src/pages/admin/_error.tsx (Erreur admin)
-const AdminErrorPage = () => (
-  <div className="admin-error">
-    <h1>Erreur d'administration</h1>
-    <p>Contactez le support technique.</p>
-  </div>
-);
-```
-
-### Configuration de modules
-
-```typescript
-// src/modules/blog/config.json
-{
-  "path": "/blog",
-  "name": "Blog",
-  "description": "Module de blog",
-  "author": "Équipe Rédaction",
-  "isEnabled": true
-}
-
-// src/modules/blog/pages/index.tsx sera accessible à /blog
-// src/modules/blog/pages/[slug].tsx sera accessible à /blog/:slug
-```
-
-## 🎯 Exemples Complets
-
-### Exemple 1 : Application avec authentification
-
-```typescript
-// src/pages/_layout.tsx
-import { useRootingActions } from '@arc-js/core';
-import { Link } from 'react-router-dom';
-
-const AppLayout = ({ children }) => {
-  const { checkIfIsCurrentRoute } = useRootingActions();
-  const isActive = (path: string) => checkIfIsCurrentRoute(path);
-  
-  return (
-    <div>
-      <nav>
-        <Link to="/" className={isActive('/') ? 'active' : ''}>
-          Accueil
-        </Link>
-        <Link to="/about" className={isActive('/about') ? 'active' : ''}>
-          À propos
-        </Link>
-        <Link to="/contact" className={isActive('/contact') ? 'active' : ''}>
-          Contact
-        </Link>
-      </nav>
-      {children}
-    </div>
-  );
-};
-
-// src/pages/protected/_layout.tsx
-import { useEffect } from 'react';
-import { useRootingActions } from '@arc-js/core';
-
-const ProtectedLayout = ({ children }) => {
-  const { goToRoute } = useRootingActions();
+const UrlAnalyzer = () => {
+  const { getUrlData } = useRootingActions();
   
-  useEffect(() => {
-    const token = localStorage.getItem('auth_token');
-    if (!token) {
-      goToRoute({
-        path: '/login',
-        queries: { redirect: window.location.pathname }
-      });
+  const analyzeUrl = () => {
+    const urlData = getUrlData('https://example.com/products/123?color=red&size=L');
+    
+    if (urlData) {
+      console.log('Host:', urlData.host);           // "example.com"
+      console.log('Path:', urlData.pathname);       // "/products/123"
+      console.log('Queries:', urlData.queries);     // { color: "red", size: "L" }
     }
-  }, []);
+  };
   
-  return token ? children : null;
+  return (
+    <button onClick={analyzeUrl}>
+      Analyser l'URL
+    </button>
+  );
 };
 ```
 
-### Exemple 2 : Dashboard avec multi-langue
+### Navigation conditionnelle
 
 ```typescript
-// src/pages/dashboard/index.tsx
-import { useRootingActions } from '@arc-js/core';
-import { useState, useEffect } from 'react';
-
-const DashboardPage = () => {
-  const { queries, goToRoute, resolveRoute } = useRootingActions();
-  const [lang, setLang] = useState(queries.lang || 'fr');
+const SmartNavigation = () => {
+  const { goToRoute, checkIfIsCurrentRoute } = useRootingActions();
   
-  const changeLanguage = (newLang: string) => {
-    goToRoute({
-      path: '/dashboard',
-      queries: { ...queries, lang: newLang }
-    });
-  };
-  
-  const getReportUrl = (reportId: string) => {
-    return resolveRoute({
-      path: '/dashboard/reports/:id',
-      params: { id: reportId },
-      queries: { lang, format: 'pdf' }
-    });
+  const navigateSmartly = (path: string) => {
+    // Si déjà sur la page, ne rien faire
+    if (checkIfIsCurrentRoute(path)) {
+      return;
+    }
+    
+    // Sinon, naviguer
+    goToRoute({ path });
   };
   
   return (
-    <div>
-      <div>
-        Langue: 
-        <button onClick={() => changeLanguage('fr')}>FR</button>
-        <button onClick={() => changeLanguage('en')}>EN</button>
-      </div>
-      
-      <a href={getReportUrl('monthly')}>
-        Télécharger le rapport mensuel
-      </a>
-    </div>
+    <nav>
+      <button onClick={() => navigateSmartly('/')}>
+        Accueil
+      </button>
+      <button onClick={() => navigateSmartly('/about')}>
+        À propos
+      </button>
+    </nav>
   );
 };
 ```
 
-### Exemple 3 : Formulaire avec redirection
+## 🎯 Exemples Complets
+
+### Exemple 1 : Formulaire avec redirection
 
 ```typescript
-// src/pages/contact/index.tsx
 import { useState } from 'react';
 import { useRootingActions } from '@arc-js/core';
 
-const ContactPage = () => {
+const ContactForm = () => {
   const { goToRoute, goAndReloadRoute } = useRootingActions();
-  const [formData, setFormData] = useState({ name: '', email: '' });
+  const [formData, setFormData] = useState({ name: '', email: '', message: '' });
   
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     
-    // Simulation d'envoi
-    const success = await submitContactForm(formData);
-    
-    if (success) {
-      // Redirection simple
-      goToRoute({
-        path: '/contact/success',
-        queries: { ref: 'contact-form' }
+    try {
+      // Envoyer les données
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        body: JSON.stringify(formData)
       });
-    } else {
-      // Redirection avec rechargement pour nettoyer le cache
-      goAndReloadRoute({
+      
+      if (response.ok) {
+        // Redirection simple vers la page de confirmation
+        goToRoute({
+          path: '/contact/success',
+          queries: { ref: 'contact-form' }
+        });
+      } else {
+        // Redirection avec rechargement pour nettoyer les erreurs
+        goAndReloadRoute({
+          path: '/contact',
+          queries: { error: 'submission_failed' }
+        });
+      }
+    } catch (error) {
+      goToRoute({
         path: '/contact',
-        queries: { error: 'submission_failed' }
+        queries: { error: 'network_error' }
       });
     }
   };
@@ -422,166 +352,220 @@ const ContactPage = () => {
       <input
         value={formData.name}
         onChange={e => setFormData({...formData, name: e.target.value})}
-        placeholder="Nom"
+        placeholder="Votre nom"
       />
       <input
+        type="email"
         value={formData.email}
         onChange={e => setFormData({...formData, email: e.target.value})}
-        placeholder="Email"
+        placeholder="Votre email"
+      />
+      <textarea
+        value={formData.message}
+        onChange={e => setFormData({...formData, message: e.target.value})}
+        placeholder="Votre message"
+        rows={4}
       />
-      <button type="submit">Envoyer</button>
+      <button type="submit">
+        Envoyer
+      </button>
     </form>
   );
 };
 ```
 
-## 🔧 Configuration Avancée
+### Exemple 2 : Système de pagination
 
-### Variables d'environnement
-
-```bash
-# .env
-VITE_APP_NAME="Mon Application"
-VITE_API_URL="http://localhost:3000"
+```typescript
+import { useRootingActions } from '@arc-js/core';
 
-# Activation des logs détaillés
-NODE_ENV=development  # Logs complets
-NODE_ENV=production   # Logs minimaux
+const PaginatedList = ({ items, currentPage, totalPages }) => {
+  const { goToRoute, queries } = useRootingActions();
+  
+  const goToPage = (page: number) => {
+    goToRoute({
+      path: '/items',
+      queries: {
+        ...queries,
+        page: page.toString()
+      }
+    });
+  };
+  
+  return (
+    <div>
+      <h2>Liste des éléments</h2>
+      
+      {/* Liste des éléments */}
+      <ul>
+        {items.map(item => (
+          <li key={item.id}>{item.name}</li>
+        ))}
+      </ul>
+      
+      {/* Pagination */}
+      <div className="pagination">
+        <button
+          disabled={currentPage <= 1}
+          onClick={() => goToPage(currentPage - 1)}
+        >
+          Précédent
+        </button>
+        
+        <span>Page {currentPage} sur {totalPages}</span>
+        
+        <button
+          disabled={currentPage >= totalPages}
+          onClick={() => goToPage(currentPage + 1)}
+        >
+          Suivant
+        </button>
+      </div>
+    </div>
+  );
+};
 ```
 
-### Extension de la configuration
+### Exemple 3 : Menu de navigation intelligent
 
 ```typescript
-// custom-routes.ts
-import { getRoutes as getBaseRoutes } from '@arc-js/core';
-import { RouteDefinition } from '@arc-js/core/types';
+import { useRootingActions } from '@arc-js/core';
 
-export async function getRoutes() {
-  const baseRoutes = await getBaseRoutes();
+const NavigationMenu = () => {
+  const { goToRoute, checkIfIsCurrentRoute } = useRootingActions();
   
-  // Ajouter des routes manuelles
-  const customRoutes: RouteDefinition[] = [
-    {
-      truePath: '/src/pages/custom.tsx',
-      path: '/custom-route',
-      component: () => <div>Route personnalisée</div>,
-      layout: undefined,
-      error: undefined
-    }
+  const menuItems = [
+    { path: '/', label: 'Accueil' },
+    { path: '/products', label: 'Produits' },
+    { path: '/about', label: 'À propos' },
+    { path: '/contact', label: 'Contact' }
   ];
   
-  return [...baseRoutes, ...customRoutes];
-}
+  return (
+    <nav className="navigation">
+      {menuItems.map(item => {
+        const isActive = checkIfIsCurrentRoute(item.path);
+        
+        return (
+          <button
+            key={item.path}
+            className={`nav-item \${isActive ? 'active' : ''}`}
+            onClick={() => goToRoute({ path: item.path })}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </nav>
+  );
+};
 ```
 
-### Personnalisation du routage
+### Exemple 4 : Sélecteur de langue
 
 ```typescript
-// custom-router.tsx
 import { useRootingActions } from '@arc-js/core';
-import type { ConfigGoToRoute } from '@arc-js/core';
 
-export const useCustomRooting = () => {
-  const baseActions = useRootingActions();
+const LanguageSelector = () => {
+  const { goToRoute, queries } = useRootingActions();
+  const currentLang = queries.lang || 'fr';
   
-  const goToRouteWithAnalytics = (
-    config: ConfigGoToRoute,
-    analyticsEvent?: string
-  ) => {
-    // Envoyer l'événement analytics
-    if (analyticsEvent) {
-      window.gtag?.('event', analyticsEvent, {
-        path: config.path,
-        params: config.params
-      });
-    }
-    
-    // Utiliser la navigation standard
-    return baseActions.goToRoute(config);
-  };
+  const languages = [
+    { code: 'fr', name: 'Français', flag: '🇫🇷' },
+    { code: 'en', name: 'English', flag: '🇬🇧' },
+    { code: 'es', name: 'Español', flag: '🇪🇸' }
+  ];
   
-  return {
-    ...baseActions,
-    goToRouteWithAnalytics
+  const changeLanguage = (langCode: string) => {
+    goToRoute({
+      path: window.location.pathname,
+      queries: {
+        ...queries,
+        lang: langCode
+      }
+    });
   };
+  
+  return (
+    <div className="language-selector">
+      {languages.map(lang => (
+        <button
+          key={lang.code}
+          className={`lang-btn \${currentLang === lang.code ? 'active' : ''}`}
+          onClick={() => changeLanguage(lang.code)}
+          title={lang.name}
+        >
+          {lang.flag} {lang.name}
+        </button>
+      ))}
+    </div>
+  );
 };
 ```
 
-## 🛡️ Gestion des Erreurs
+## 🔧 Configuration
 
-### Structure d'erreur hiérarchique
+### Configuration des langues
 
+```typescript
+// Configuration par défaut dans @arc-js/core
+export const langs = ['en', 'fr']; // Langues supportées
+export const langCodes = {
+  'fr': 'fr_FR',
+  'en': 'en_US',
+};
 ```
-pages/
-├── _error.tsx                    # Erreur globale
-├── admin/
-│   ├── _error.tsx               # Erreur admin (surcharge globale)
-│   └── dashboard/
-│       └── _error.tsx           # Erreur dashboard (surcharge admin)
-└── public/
-    └── _error.tsx               # Erreur section publique
+
+### Variables d'environnement
+
+```bash
+# .env
+NODE_ENV=development  # development | debug | production
 ```
 
-### Page d'erreur avancée
+## 🛡️ Gestion des Erreurs
 
-```typescript
-// src/pages/_error.tsx
-import { useRouteError, Link } from 'react-router-dom';
-import { useRootingActions } from '@arc-js/core';
+### Fallback sécurisé
 
-const ErrorPage = () => {
-  const error = useRouteError();
-  const { pathName, goToRoute } = useRootingActions();
-  
-  console.error('Route Error:', error);
+```typescript
+const SafeNavigation = () => {
+  const { resolveRoute, goToRoute } = useRootingActions();
   
-  const handleRetry = () => {
-    goToRoute({
-      path: pathName,
-      refreshPage: true  // Forcer le rechargement
-    });
+  const safeGoToRoute = (config: ConfigGoToRoute) => {
+    try {
+      goToRoute(config);
+    } catch (error) {
+      console.error('Navigation error:', error);
+      // Fallback vers la page d'accueil
+      goToRoute({ path: '/' });
+    }
   };
   
   return (
-    <div className="error-container">
-      <h1>Oups ! Une erreur est survenue</h1>
-      <p>Désolé, une erreur inattendue s'est produite.</p>
-      
-      <div className="error-actions">
-        <button onClick={handleRetry}>
-          Réessayer
-        </button>
-        <Link to="/">
-          Retour à l'accueil
-        </Link>
-      </div>
-    </div>
+    <button onClick={() => safeGoToRoute({ path: '/invalid-route' })}>
+      Naviguer en sécurité
+    </button>
   );
 };
 ```
 
 ## 📋 Table des Conventions
 
-### Fichiers spéciaux
+### Paramètres de query string
 
-| Fichier | Chemin de route | Description |
-|---------|----------------|-------------|
-| `index.tsx` | `/` (racine) ou `/dossier/` | Page d'index |
-| `_layout.tsx` | Non accessible | Layout pour le dossier |
-| `_error.tsx` | Non accessible | Page d'erreur pour le dossier |
-| `_404.tsx` | `*` | Page 404 (non trouvé) |
-| `[param].tsx` | `/:param` | Paramètre dynamique |
-| `[...slug].tsx` | `/*` | Catch-all route |
+| Paramètre | Type | Description | Valeur par défaut |
+|-----------|------|-------------|-------------------|
+| `lang` | `fr` \| `en` | Langue de l'application | `fr` |
+| `page` | number | Numéro de page | `1` |
+| `sort` | string | Tri des résultats | `date` |
+| `filter` | string | Filtre appliqué | `all` |
 
-### Paramètres de query string
+### Codes de langue
 
-| Paramètre | Type | Description |
-|-----------|------|-------------|
-| `lang` | `fr` \| `en` | Langue de l'application |
-| `ref` | string | Référence pour le tracking |
-| `modal` | string | Ouvrir un modal spécifique |
-| `page` | number | Numéro de page (pagination) |
-| `sort` | string | Tri des résultats |
+| Code court | Code long | Description |
+|------------|-----------|-------------|
+| `fr` | `fr_FR` | Français (France) |
+| `en` | `en_US` | Anglais (États-Unis) |
 
 ## 🔧 Build et Développement
 
@@ -593,32 +577,11 @@ const ErrorPage = () => {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "type-check": "tsc --noEmit",
-    "generate-routes": "node scripts/generate-routes.js"
+    "type-check": "tsc --noEmit"
   }
 }
 ```
 
-### Configuration Vite
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {}
-  },
-  build: {
-    rollupOptions: {
-      external: ['react', 'react-dom', 'react-router-dom']
-    }
-  }
-});
-```
-
 ### Configuration TypeScript
 
 ```json
@@ -630,7 +593,6 @@ export default defineConfig({
     "skipLibCheck": true,
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
@@ -640,7 +602,7 @@ export default defineConfig({
     "noFallthroughCasesInSwitch": true,
     "types": ["vite/client"]
   },
-  "include": ["src"]
+  "include": ["src", "node_modules/@arc-js/core/**/*"]
 }
 ```
 
@@ -657,6 +619,6 @@ Envoyez nous un mail à l'adresse `contact.inicode@gmail.com` pour :
 
 ---
 
-**@arc-js/core** - Le système de routage intelligent pour React et TypeScript.
+**@arc-js/core** - Les hooks et utilitaires de routage avancés pour React et TypeScript.
 
 *Développé par l'équipe INICODE*