canvasframework 0.4.6 → 0.4.8

package/core/CanvasFramework.js

@@ -81,7 +81,6 @@ import DevTools from '../utils/DevTools.js';
 import InspectionOverlay from '../utils/InspectionOverlay.js';
 import DevToolsConsole from '../utils/DevToolsConsole.js';
 
-
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
 import Skeleton from '../features/Skeleton.js';
@@ -104,46 +103,29 @@ import FeatureFlags from '../manager/FeatureFlags.js';
 
 // WebGL Adapter
 import WebGLCanvasAdapter from './WebGLCanvasAdapter.js';
-import ui, { createRef } from './UIBuilder.js';
-
-// theme
-export const lightTheme = {
-  background: '#FFFFFF',
-  text: '#000000',
-  primary: '#6200EE',
-  secondary: '#03DAC6',
-  buttonText: '#FFFFFF',
-  buttonBackground: '#6200EE',
-  border: '#E0E0E0'
-};
-
-export const darkTheme = {
-  background: '#121212',
-  text: '#FFFFFF',
-  primary: '#BB86FC',
-  secondary: '#03DAC6',
-  buttonText: '#000000',
-  buttonBackground: '#BB86FC',
-  border: '#333333'
-};
+import ui, {
+    createRef
+} from './UIBuilder.js';
+import ThemeManager from './ThemeManager.js';
+
 
 const FIXED_COMPONENT_TYPES = new Set([
-  AppBar,
-  BottomNavigationBar,
-  Drawer,
-  Dialog,
-  Modal,
-  Tabs,
-  FAB,
-  Toast,
-  Camera,
-  QRCodeReader,
-  Banner,
-  SliverAppBar,
-  BottomSheet,
-  ContextMenu,
-  OpenStreetMap,
-  SelectDialog
+    AppBar,
+    BottomNavigationBar,
+    Drawer,
+    Dialog,
+    Modal,
+    Tabs,
+    FAB,
+    Toast,
+    Camera,
+    QRCodeReader,
+    Banner,
+    SliverAppBar,
+    BottomSheet,
+    ContextMenu,
+    OpenStreetMap,
+    SelectDialog
 ]);
 
 /**
@@ -166,295 +148,513 @@ const FIXED_COMPONENT_TYPES = new Set([
  * @property {number} scrollFriction - Friction du défilement
  */
 class CanvasFramework {
-  /**
-   * Crée une instance de CanvasFramework
-   * @param {string} canvasId - ID de l'élément canvas
-   */
-  constructor(canvasId, options = {}) {
-    this.canvas = document.getElementById(canvasId);
-    this.ctx = this.canvas.getContext('2d');
-    this.width = window.innerWidth;
-    this.height = window.innerHeight;
-    this.dpr = window.devicePixelRatio || 1;
-    
-    this.platform = this.detectPlatform();
-    
-    // Thèmes
-    this.lightTheme = lightTheme;
-    this.darkTheme = darkTheme;
-     // État actuel + préférence
-    this.themeMode = options.themeMode || 'system'; // 'light', 'dark', 'system'
-    this.userThemeOverride = null; // null = suit system, sinon 'light' ou 'dark'
-
-    // Applique le thème initial
-    this.setupSystemThemeListener();
-	
-	// Récupère override utilisateur
-    const savedOverride = localStorage.getItem('themeOverride');
-    if (savedOverride && ['light', 'dark'].includes(savedOverride)) {
-      this.userThemeOverride = savedOverride;
-      this.themeMode = savedOverride;
-    } 
-
-	this.components = [];
-	this.theme = lightTheme; // thème par défaut
-	// ✅ AJOUTER ICI :
-	this._cachedMaxScroll = 0;
-	this._maxScrollDirty = true;
-	this.resizeTimeout = null;
-	
-	//this.applyThemeFromSystem();
-    this.state = {};
-    // NOUVELLE OPTION: choisir entre Canvas 2D et WebGL
-    this.useWebGL = options.useWebGL !== false; // true par défaut
-	// Initialiser le contexte approprié
-    if (this.useWebGL) {
-      try {
-        this.ctx = new WebGLCanvasAdapter(this.canvas);
-      } catch (e) {
+    /**
+     * Crée une instance de CanvasFramework
+     * @param {string} canvasId - ID de l'élément canvas
+     */
+    constructor(canvasId, options = {}) {
+        // ✅ AJOUTER: Démarrer le chronomètre
+        const startTime = performance.now();
+        this.canvas = document.getElementById(canvasId);
         this.ctx = this.canvas.getContext('2d');
-        this.useWebGL = false;
-      }
-    } else {
-      this.ctx = this.canvas.getContext('2d');
-    }
-	// Calcule FPS
-	this.fps = 0;
-	this._frames = 0;
-	this._lastFpsTime = performance.now();
-	this.showFps = options.showFps || false; // false par défaut
-	this.debbug = options.debug || false; // false par défaut (et correction de la faute de frappe)
-    
-	// Worker pour multithreading Canvas Worker
-    this.worker = this.createCanvasWorker();
-	this.worker.onmessage = this.handleWorkerMessage.bind(this);
-	this.worker.postMessage({ type: 'INIT', payload: { components: [] } });
-	
-	// Logic Worker
-	this.logicWorker = this.createLogicWorker();
-	this.logicWorker.onmessage = this.handleLogicWorkerMessage.bind(this);
-	this.logicWorkerState = {};
-	this.logicWorker.postMessage({ type: 'SET_STATE', payload: this.state });
-
-    // Envoyer l'état initial au worker
-    this.logicWorker.postMessage({ type: 'SET_STATE', payload: this.state });
-
-    // Gestion des événements
-    this.isDragging = false;
-    this.lastTouchY = 0;
-    this.scrollOffset = 0;
-    this.scrollVelocity = 0;
-    this.scrollFriction = 0.95;
-    
-    // Optimisation
-    this.dirtyComponents = new Set();
-    this.optimizationEnabled = false;
-    
-	// AJOUTER CETTE LIGNE
-    this.animator = new AnimationEngine();
-	
-    // ===== NOUVEAU SYSTÈME DE ROUTING =====
-    this.routes = new Map();
-    this.currentRoute = '/';
-    this.currentParams = {};
-    this.currentQuery = {};
-    this.history = [];
-    this.historyIndex = -1;
-    
-    // Animation de transition
-    this.transitionState = {
-      isTransitioning: false,
-      progress: 0,
-      duration: 300,
-      type: 'slide', // 'slide', 'fade', 'none'
-      direction: 'forward', // 'forward', 'back'
-      oldComponents: [],
-      newComponents: []
-    };
-    
-    this.setupCanvas();
-    this.setupEventListeners();
-    this.setupHistoryListener();
-    this.startRenderLoop();
-	
-	this.devTools = new DevTools(this);
-    this.inspectionOverlay = new InspectionOverlay(this);
-    
-    // MODIFICATION: Vérifier explicitement l'option enableDevTools
-    const shouldEnableDevTools = options.enableDevTools === true;
-    
-    if (shouldEnableDevTools) {
-        this.enableDevTools();
-        console.log('DevTools enabled. Press Ctrl+Shift+D to toggle.');
-    }
-  }
-  
-  /**
-   * Détecte le thème système et applique si mode = 'system'
-   */
-  applyThemeFromSystem() {
-	  // ✅ Vérifier que tout est initialisé
-	  if (!this.lightTheme || !this.darkTheme) {
-		console.warn('Thèmes non initialisés');
-		return;
-	  }
-
-	  if (this.themeMode === 'system') {
-		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		const newTheme = prefersDark ? this.darkTheme : this.lightTheme;
-		this.setTheme(newTheme);
-	  } else {
-		// Mode forcé
-		this.setTheme(
-		  this.themeMode === 'dark' ? this.darkTheme : this.lightTheme
-		);
-	  }
-	}
-
-  /**
-   * Écoute les changements système (ex: utilisateur bascule dark mode)
-   */
-  setupSystemThemeListener() {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  
-    // Ancienne méthode (compatibilité large)
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener('change', (e) => {
-        if (this.themeMode === 'system') {
-          this.applyThemeFromSystem();
+        this.width = window.innerWidth;
+        this.height = window.innerHeight;
+        this.dpr = window.devicePixelRatio || 1;
+        this.splashOptions = {
+            enabled: options.splash?.enabled === true, // false par défaut
+            duration: options.splash?.duration || 700,
+            fadeOutDuration: options.splash?.fadeOutDuration || 500,
+            backgroundColor: options.splash?.backgroundColor || ['#667eea', '#764ba2'], // Gradient ou couleur unie
+            spinnerColor: options.splash?.spinnerColor || 'white',
+            spinnerBackground: options.splash?.spinnerBackground || 'rgba(255, 255, 255, 0.3)',
+            textColor: options.splash?.textColor || 'white',
+            text: options.splash?.text || 'Chargement...',
+            textSize: options.splash?.textSize || 20,
+            textFont: options.splash?.textFont || 'Arial',
+            progressBarColor: options.splash?.progressBarColor || 'white',
+            progressBarBackground: options.splash?.progressBarBackground || 'rgba(255, 255, 255, 0.3)',
+            showProgressBar: options.splash?.showProgressBar !== false, // true par défaut
+            logo: options.splash?.logo || null, // URL d'une image (optionnel)
+            logoWidth: options.splash?.logoWidth || 100,
+            logoHeight: options.splash?.logoHeight || 100
+        };
+        // ✅ MODIFIER : Vérifier si le splash est activé
+        if (this.splashOptions.enabled) {
+            this.showSplashScreen();
+        } else {
+            this._splashFinished = true; // Passer directement au rendu
         }
-      });
-    } else {
-      // Anciens navigateurs (rare en 2026)
-      mediaQuery.addListener((e) => {
-        if (this.themeMode === 'system') {
-          this.applyThemeFromSystem();
+
+        this.platform = this.detectPlatform();
+
+
+        // État actuel + préférence
+        this.themeMode = options.themeMode || 'system'; // 'light', 'dark', 'system'
+        this.userThemeOverride = null; // null = suit system, sinon 'light' ou 'dark'
+
+        // Applique le thème initial
+        this.setupSystemThemeListener();
+
+        // Récupère override utilisateur
+        const savedOverride = localStorage.getItem('themeOverride');
+        if (savedOverride && ['light', 'dark'].includes(savedOverride)) {
+            this.userThemeOverride = savedOverride;
+            this.themeMode = savedOverride;
         }
-      });
-    }
-  }
-  
-  /**
-   * Change le mode thème
-   * @param {'light'|'dark'|'system'} mode - Mode à appliquer
-   * @param {boolean} [save=true] - Sauvegarder le choix utilisateur ?
-   */
-  setThemeMode(mode, save = true) {
-    if (!['light', 'dark', 'system'].includes(mode)) {
-      console.warn('Mode invalide, valeurs acceptées: light, dark, system');
-      return;
-    }
-
-    this.themeMode = mode;
-
-    if (save && mode !== 'system') {
-      this.userThemeOverride = mode;
-      // Sauvegarde (ex: localStorage ou ton SecureStorage)
-      localStorage.setItem('themeOverride', mode);
-    } else if (mode === 'system') {
-      this.userThemeOverride = null;
-      localStorage.removeItem('themeOverride');
-    }
-
-    this.applyThemeFromSystem();
-  }
-  
-  /**
-   * Active ou désactive les DevTools
-   * @param {boolean} enabled - true pour activer, false pour désactiver
-   */
-  enableDevTools(enabled = true) {
-	if (enabled) {
-		// Créer le DevTools s'il n'existe pas
-		if (!this.devTools) {
-			this.devTools = new DevTools(this);
-		}
-			
-		// Attacher seulement si pas déjà fait
-		if (!this.devTools._isAttached) {
-			this.devTools.attachToFramework();
-			this.devTools._isAttached = true;
-		}
-		
-		// Afficher le bouton
-		if (this.devTools.toggleBtn) {
-			this.devTools.toggleBtn.style.display = 'block';
-		}
-	} else {
-		// Désactiver complètement
-		if (this.devTools) {
-			// Détacher du framework
-			if (this.devTools.detachFromFramework) {
-				this.devTools.detachFromFramework();
-			} else if (this.devTools.cleanup) {
-				this.devTools.cleanup();
-			}
-				
-			// Supprimer de la page DOM
-			if (this.devTools.container && this.devTools.container.parentNode) {
-				this.devTools.container.parentNode.removeChild(this.devTools.container);
-			}
-				
-			if (this.devTools.toggleBtn && this.devTools.toggleBtn.parentNode) {
-				this.devTools.toggleBtn.parentNode.removeChild(this.devTools.toggleBtn);
-			}
-			
-			this.devTools._isAttached = false;
-		}
-	 }
-  }
-  
-  /**
-   * Bascule l'overlay d'inspection
-   */
-  toggleInspection() {
-    this.inspectionOverlay.toggle();
-  }
-  
-  /**
-   * Exécute une commande DevTools
-   */
-  devToolsCommand(command, ...args) {
-    switch (command) {
-      case 'inspect':
-        this.inspectionOverlay.enable();
-        break;
-      case 'performance':
-        this.devTools.switchTab('performance');
-        this.devTools.toggle();
-        break;
-      case 'components':
-        this.devTools.switchTab('components');
-        this.devTools.toggle();
-        break;
-      case 'highlight':
-        if (args[0]) {
-          this.devTools.highlightComponent(args[0]);
+
+        this.components = [];
+        // ✅ AJOUTER ICI :
+        this._cachedMaxScroll = 0;
+        this._maxScrollDirty = true;
+        this.resizeTimeout = null;
+
+        //this.applyThemeFromSystem();
+        this.state = {};
+        // NOUVELLE OPTION: choisir entre Canvas 2D et WebGL
+        this.useWebGL = options.useWebGL !== false; // true par défaut
+        // Initialiser le contexte approprié
+        if (this.useWebGL) {
+            try {
+                this.ctx = new WebGLCanvasAdapter(this.canvas);
+            } catch (e) {
+                this.ctx = this.canvas.getContext('2d');
+                this.useWebGL = false;
+            }
+        } else {
+            this.ctx = this.canvas.getContext('2d');
         }
-        break;
-      case 'reflow':
-        this.components.forEach(comp => comp.markDirty());
-        break;
-    }
-  }
-
-  wrapContext(ctx, theme) {
-    const originalFillStyle = Object.getOwnPropertyDescriptor(CanvasRenderingContext2D.prototype, 'fillStyle');
-    Object.defineProperty(ctx, 'fillStyle', {
-      set: (value) => {
-        // Si value est blanc/noir ou une couleur “neutre”, tu remplaces par theme
-        if (value === '#FFFFFF' || value === '#000000') {
-          originalFillStyle.set.call(ctx, value); 
+        // Calcule FPS
+        this.fps = 0;
+        this._frames = 0;
+        this._lastFpsTime = performance.now();
+        this.showFps = options.showFps || false; // false par défaut
+        this.debbug = options.debug || false; // false par défaut (et correction de la faute de frappe)
+
+        // Worker pour multithreading Canvas Worker
+        this.worker = this.createCanvasWorker();
+        this.worker.onmessage = this.handleWorkerMessage.bind(this);
+        this.worker.postMessage({
+            type: 'INIT',
+            payload: {
+                components: []
+            }
+        });
+
+        // Logic Worker
+        this.logicWorker = this.createLogicWorker();
+        this.logicWorker.onmessage = this.handleLogicWorkerMessage.bind(this);
+        this.logicWorkerState = {};
+        this.logicWorker.postMessage({
+            type: 'SET_STATE',
+            payload: this.state
+        });
+
+        // Envoyer l'état initial au worker
+        this.logicWorker.postMessage({
+            type: 'SET_STATE',
+            payload: this.state
+        });
+
+        // Gestion des événements
+        this.isDragging = false;
+        this.lastTouchY = 0;
+        this.scrollOffset = 0;
+        this.scrollVelocity = 0;
+        this.scrollFriction = 0.95;
+
+        // Optimisation
+        this.dirtyComponents = new Set();
+        this.optimizationEnabled = false;
+
+        // AJOUTER CETTE LIGNE
+        this.animator = new AnimationEngine();
+
+        // ===== NOUVEAU SYSTÈME DE ROUTING =====
+        this.routes = new Map();
+        this.currentRoute = '/';
+        this.currentParams = {};
+        this.currentQuery = {};
+        this.history = [];
+        this.historyIndex = -1;
+
+        // Animation de transition
+        this.transitionState = {
+            isTransitioning: false,
+            progress: 0,
+            duration: 300,
+            type: 'slide', // 'slide', 'fade', 'none'
+            direction: 'forward', // 'forward', 'back'
+            oldComponents: [],
+            newComponents: []
+        };
+
+        this.setupCanvas();
+        this.setupEventListeners();
+        this.setupHistoryListener();
+
+
+        this.startRenderLoop();
+
+        this.devTools = new DevTools(this);
+        this.inspectionOverlay = new InspectionOverlay(this);
+
+        // MODIFICATION: Vérifier explicitement l'option enableDevTools
+        const shouldEnableDevTools = options.enableDevTools === true;
+
+        if (shouldEnableDevTools) {
+            this.enableDevTools();
+            console.log('DevTools enabled. Press Ctrl+Shift+D to toggle.');
+        }
+
+        // Initialiser le ThemeManager
+        this.themeManager = new ThemeManager(this, {
+            lightTheme: options.lightTheme,
+            darkTheme: options.darkTheme,
+            storageKey: options.themeStorageKey || 'app-theme-mode'
+        });
+
+        // Raccourci pour accéder au thème actuel
+        this.theme = this.themeManager.getTheme();
+
+        // ✅ AJOUTER: Mesurer le temps d'init
+        const initTime = performance.now() - startTime;
+
+        // ✅ AJOUTER: Stocker les métriques
+        this.metrics = {
+            initTime: initTime,
+            firstRenderTime: null,
+            firstInteractionTime: null,
+            totalStartupTime: null
+        };
+
+        // ✅ AJOUTER: Logger si debug
+        if (options.debug || options.showMetrics) {
+            console.log(`⚡ Framework initialisé en ${initTime.toFixed(2)}ms`);
+        }
+
+        // ✅ AJOUTER: Marquer le premier rendu
+        this._firstRenderDone = false;
+        this._startupStartTime = startTime;
+    }
+
+    /**
+     * Affiche un écran de chargement animé
+     * @private
+     */
+    showSplashScreen() {
+        const startTime = performance.now();
+        const opts = this.splashOptions;
+
+        // ✅ Charger le logo si présent
+        let logoImage = null;
+        if (opts.logo) {
+            logoImage = new Image();
+            logoImage.src = opts.logo;
+        }
+
+        const animate = () => {
+            const elapsed = performance.now() - startTime;
+            const progress = Math.min(elapsed / opts.duration, 1);
+
+            // Clear
+            this.ctx.clearRect(0, 0, this.width, this.height);
+
+            // ✅ Background (gradient ou couleur unie)
+            if (Array.isArray(opts.backgroundColor) && opts.backgroundColor.length >= 2) {
+                // Gradient
+                const gradient = this.ctx.createLinearGradient(0, 0, this.width, this.height);
+                gradient.addColorStop(0, opts.backgroundColor[0]);
+                gradient.addColorStop(1, opts.backgroundColor[1]);
+                this.ctx.fillStyle = gradient;
+            } else {
+                // Couleur unie
+                this.ctx.fillStyle = opts.backgroundColor;
+            }
+            this.ctx.fillRect(0, 0, this.width, this.height);
+
+            const centerX = this.width / 2;
+            const centerY = this.height / 2;
+
+            // ✅ Logo (si présent et chargé)
+            if (logoImage && logoImage.complete) {
+                const logoX = centerX - opts.logoWidth / 2;
+                const logoY = centerY - opts.logoHeight - 80;
+                this.ctx.drawImage(logoImage, logoX, logoY, opts.logoWidth, opts.logoHeight);
+            }
+
+            // ✅ Spinner animé
+            const radius = 40;
+            const rotation = (elapsed / 1000) * Math.PI * 2;
+
+            // Cercle de fond
+            this.ctx.beginPath();
+            this.ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+            this.ctx.strokeStyle = opts.spinnerBackground;
+            this.ctx.lineWidth = 4;
+            this.ctx.stroke();
+
+            // Arc animé
+            this.ctx.beginPath();
+            this.ctx.arc(centerX, centerY, radius, rotation, rotation + Math.PI * 1.5);
+            this.ctx.strokeStyle = opts.spinnerColor;
+            this.ctx.lineWidth = 4;
+            this.ctx.lineCap = 'round';
+            this.ctx.stroke();
+
+            // ✅ Texte personnalisé
+            this.ctx.fillStyle = opts.textColor;
+            this.ctx.font = `${opts.textSize}px ${opts.textFont}`;
+            this.ctx.textAlign = 'center';
+            this.ctx.fillText(opts.text, centerX, centerY + radius + 40);
+
+            // ✅ Barre de progression (optionnelle)
+            if (opts.showProgressBar) {
+                const barWidth = 200;
+                const barHeight = 4;
+                const barX = centerX - barWidth / 2;
+                const barY = centerY + radius + 70;
+
+                // Fond de la barre
+                this.ctx.fillStyle = opts.progressBarBackground;
+                this.ctx.fillRect(barX, barY, barWidth, barHeight);
+
+                // Progression
+                this.ctx.fillStyle = opts.progressBarColor;
+                this.ctx.fillRect(barX, barY, barWidth * progress, barHeight);
+            }
+
+            // Continuer ou fade out
+            if (progress < 1) {
+                requestAnimationFrame(animate);
+            } else {
+                this.fadeOutSplash();
+            }
+        };
+
+        animate();
+    }
+
+    /**
+     * Fade out du splash screen
+     * @private
+     */
+    fadeOutSplash() {
+        const opts = this.splashOptions;
+        const duration = opts.fadeOutDuration;
+        const startTime = performance.now();
+
+        const fade = () => {
+            const elapsed = performance.now() - startTime;
+            const progress = elapsed / duration;
+            const alpha = 1 - Math.min(progress, 1);
+
+            if (alpha > 0) {
+                this.ctx.clearRect(0, 0, this.width, this.height);
+                this.ctx.globalAlpha = alpha;
+
+                // Redessiner le background
+                if (Array.isArray(opts.backgroundColor) && opts.backgroundColor.length >= 2) {
+                    const gradient = this.ctx.createLinearGradient(0, 0, this.width, this.height);
+                    gradient.addColorStop(0, opts.backgroundColor[0]);
+                    gradient.addColorStop(1, opts.backgroundColor[1]);
+                    this.ctx.fillStyle = gradient;
+                } else {
+                    this.ctx.fillStyle = opts.backgroundColor;
+                }
+                this.ctx.fillRect(0, 0, this.width, this.height);
+
+                // Spinner pendant le fade
+                const centerX = this.width / 2;
+                const centerY = this.height / 2;
+                const radius = 40;
+
+                this.ctx.beginPath();
+                this.ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+                this.ctx.strokeStyle = opts.spinnerBackground;
+                this.ctx.lineWidth = 4;
+                this.ctx.stroke();
+
+                this.ctx.globalAlpha = 1;
+                requestAnimationFrame(fade);
+            } else {
+                this._splashFinished = true;
+                this.ctx.clearRect(0, 0, this.width, this.height);
+            }
+        };
+
+        fade();
+    }
+
+    // ✅ AJOUTER: Méthode pour mesurer le premier rendu
+    _markFirstRender() {
+        if (!this._firstRenderDone) {
+            this._firstRenderDone = true;
+            const firstRenderTime = performance.now() - this._startupStartTime - this.metrics.initTime;
+            this.metrics.firstRenderTime = firstRenderTime;
+            this.metrics.totalStartupTime = performance.now() - this._startupStartTime;
+
+            if (this.showMetrics) {
+                console.log(`🎨 Premier rendu en ${firstRenderTime.toFixed(2)}ms`);
+                console.log(`🚀 Temps total de démarrage: ${this.metrics.totalStartupTime.toFixed(2)}ms`);
+                this.displayMetrics();
+            }
+        }
+    }
+
+    /**
+     * Écoute les changements système (ex: utilisateur bascule dark mode)
+     */
+    setupSystemThemeListener() {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+        // Ancienne méthode (compatibilité large)
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', (e) => {
+                if (this.themeMode === 'system') {
+                    this.applyThemeFromSystem();
+                }
+            });
+        } else {
+            // Anciens navigateurs (rare en 2026)
+            mediaQuery.addListener((e) => {
+                if (this.themeMode === 'system') {
+                    this.applyThemeFromSystem();
+                }
+            });
+        }
+    }
+
+    /**
+     * Change le mode thème
+     * @param {'light'|'dark'|'system'} mode - Mode à appliquer
+     * @param {boolean} [save=true] - Sauvegarder le choix utilisateur ?
+     */
+    setThemeMode(mode) {
+        this.themeManager.setMode(mode);
+        this.theme = this.themeManager.getTheme();
+    }
+
+    /**
+     * Obtient une couleur du thème
+     */
+    getColor(colorName) {
+        return this.themeManager.getColor(colorName);
+    }
+
+    /**
+     * Ajoute un listener de changement de thème
+     */
+    onThemeChange(callback) {
+        this.themeManager.addListener((theme) => {
+            this.theme = theme;
+            callback(theme);
+        });
+    }
+
+    /**
+     * Bascule entre light et dark
+     */
+    toggleTheme() {
+        this.themeManager.toggle();
+        this.theme = this.themeManager.getTheme();
+    }
+
+    /**
+     * Active ou désactive les DevTools
+     * @param {boolean} enabled - true pour activer, false pour désactiver
+     */
+    enableDevTools(enabled = true) {
+        if (enabled) {
+            // Créer le DevTools s'il n'existe pas
+            if (!this.devTools) {
+                this.devTools = new DevTools(this);
+            }
+
+            // Attacher seulement si pas déjà fait
+            if (!this.devTools._isAttached) {
+                this.devTools.attachToFramework();
+                this.devTools._isAttached = true;
+            }
+
+            // Afficher le bouton
+            if (this.devTools.toggleBtn) {
+                this.devTools.toggleBtn.style.display = 'block';
+            }
         } else {
-          originalFillStyle.set.call(ctx, value);
+            // Désactiver complètement
+            if (this.devTools) {
+                // Détacher du framework
+                if (this.devTools.detachFromFramework) {
+                    this.devTools.detachFromFramework();
+                } else if (this.devTools.cleanup) {
+                    this.devTools.cleanup();
+                }
+
+                // Supprimer de la page DOM
+                if (this.devTools.container && this.devTools.container.parentNode) {
+                    this.devTools.container.parentNode.removeChild(this.devTools.container);
+                }
+
+                if (this.devTools.toggleBtn && this.devTools.toggleBtn.parentNode) {
+                    this.devTools.toggleBtn.parentNode.removeChild(this.devTools.toggleBtn);
+                }
+
+                this.devTools._isAttached = false;
+            }
+        }
+    }
+
+    /**
+     * Bascule l'overlay d'inspection
+     */
+    toggleInspection() {
+        this.inspectionOverlay.toggle();
+    }
+
+    /**
+     * Exécute une commande DevTools
+     */
+    devToolsCommand(command, ...args) {
+        switch (command) {
+            case 'inspect':
+                this.inspectionOverlay.enable();
+                break;
+            case 'performance':
+                this.devTools.switchTab('performance');
+                this.devTools.toggle();
+                break;
+            case 'components':
+                this.devTools.switchTab('components');
+                this.devTools.toggle();
+                break;
+            case 'highlight':
+                if (args[0]) {
+                    this.devTools.highlightComponent(args[0]);
+                }
+                break;
+            case 'reflow':
+                this.components.forEach(comp => comp.markDirty());
+                break;
         }
-      },
-      get: () => originalFillStyle.get.call(ctx)
-    });
-  }	
-  
-  createCanvasWorker() {
-    const workerCode = `
+    }
+
+    wrapContext(ctx, theme) {
+        const originalFillStyle = Object.getOwnPropertyDescriptor(CanvasRenderingContext2D.prototype, 'fillStyle');
+        Object.defineProperty(ctx, 'fillStyle', {
+            set: (value) => {
+                // Si value est blanc/noir ou une couleur “neutre”, tu remplaces par theme
+                if (value === '#FFFFFF' || value === '#000000') {
+                    originalFillStyle.set.call(ctx, value);
+                } else {
+                    originalFillStyle.set.call(ctx, value);
+                }
+            },
+            get: () => originalFillStyle.get.call(ctx)
+        });
+    }
+
+    createCanvasWorker() {
+        const workerCode = `
       let components = [];
       
       self.onmessage = function(e) {
@@ -486,13 +686,15 @@ class CanvasFramework {
         }
       };
     `;
-  
-    const blob = new Blob([workerCode], { type: 'application/javascript' });
-    return new Worker(URL.createObjectURL(blob));
-  }
 
-  createLogicWorker() {
-    const workerCode = `
+        const blob = new Blob([workerCode], {
+            type: 'application/javascript'
+        });
+        return new Worker(URL.createObjectURL(blob));
+    }
+
+    createLogicWorker() {
+        const workerCode = `
       let state = {};
     
       self.onmessage = async function(e) {
@@ -516,1122 +718,1209 @@ class CanvasFramework {
         }
       };
     `;
-  
-    const blob = new Blob([workerCode], { type: 'application/javascript' });
-    return new Worker(URL.createObjectURL(blob));
-  }
-
-  // Set Theme dynamique
-  setTheme(theme) {
-    this.theme = theme;
-
-    if (!this.useWebGL) {
-      this.wrapContext(this.ctx, theme);
-    }
-
-    // Protège la boucle
-    if (this.components && Array.isArray(this.components)) {
-      this.components.forEach(comp => comp.markDirty());
-    } else {
-      console.warn('[setTheme] components pas encore initialisé');
-    }
-  }
-	
-  // Switch Theme
-  toggleDarkMode() {
-    if (this.theme === lightTheme) {
-      this.setTheme(darkTheme);
-    } else {
-      this.setTheme(lightTheme);
-    }
-  }
-	
-  enableFpsDisplay(enable = true) {
-    this.showFps = enable;
-  }
-
-  // AJOUTER CETTE MÉTHODE (optionnel - pour faciliter l'accès)
-  animate(component, options) {
-    return this.animator.animate(component, options);
-  }
-
-  // ----- Worker UI -----
-  handleWorkerMessage(e) {
-    const { type, payload } = e.data;
-    switch(type) {
-      case 'LAYOUT_DONE':
-        for (let update of payload) {
-          const comp = this.components.find(c => c.id === update.id);
-          if (comp) comp.height = update.height;
+
+        const blob = new Blob([workerCode], {
+            type: 'application/javascript'
+        });
+        return new Worker(URL.createObjectURL(blob));
+    }
+
+    // Set Theme dynamique
+    setTheme(theme) {
+        this.theme = theme;
+
+        if (!this.useWebGL) {
+            this.wrapContext(this.ctx, theme);
         }
-        break;
-      case 'SCROLL_UPDATED':
-        this.scrollOffset = payload.offset;
-        this.scrollVelocity = payload.velocity;
-        break;
-    }
-  }
-
-  updateLayoutAsync() {
-    this.worker.postMessage({ type: 'UPDATE_LAYOUT' });
-  }
-
-  updateScrollInertia() {
-    const maxScroll = this.getMaxScroll();
-    this.worker.postMessage({
-      type: 'SCROLL_INERTIA',
-      payload: {
-        offset: this.scrollOffset,
-        velocity: this.scrollVelocity,
-        friction: this.scrollFriction,
-        maxScroll
-      }
-    });
-  }
-
-  // ------ Logic Worker --------
-  handleLogicWorkerMessage(e) {
-    const { type, payload } = e.data;
-    switch(type) {
-        case 'STATE_UPDATED':
-        // Le worker a renvoyé le nouvel état global
-        this.logicWorkerState = payload;
-        break;
-
-        case 'EXECUTION_RESULT':
-        // Résultat d'une tâche spécifique envoyée au worker
-        if (this.onWorkerResult) this.onWorkerResult(payload);
-        break;
-
-        case 'EXECUTION_ERROR':
-        console.error('Logic Worker Error:', payload);
-        break;
-    }
-  }
-
-  runLogicTask(taskName, taskData) {
-    this.logicWorker.postMessage({
-        type: 'EXECUTE_TASK',
-        payload: { taskName, taskData }
-    });
-  }
-
-  updateLogicWorkerState(newState) {
-    this.logicWorkerState = { ...this.logicWorkerState, ...newState };
-    this.logicWorker.postMessage({ type: 'SET_STATE', payload: this.logicWorkerState });
-  }
-
-  detectPlatform() {
-    const ua = navigator.userAgent.toLowerCase();
-    if (/android/.test(ua)) return 'material';
-    if (/iphone|ipad|ipod/.test(ua)) return 'cupertino';
-    return 'material';
-  }
-
-  setupCanvas() {
-    this.canvas.width = this.width * this.dpr;
-    this.canvas.height = this.height * this.dpr;
-    this.canvas.style.width = this.width + 'px';
-    this.canvas.style.height = this.height + 'px';
-    
-	// Échelle uniquement pour Canvas 2D
-    if (!this.useWebGL) {
-      this.ctx.scale(this.dpr, this.dpr);
-    } else {
-      // WebGL gère le DPR automatiquement via la matrice de projection
-      this.ctx.updateProjectionMatrix();
-    }
-  }
-
-  setupEventListeners() {
-    this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
-    this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
-    this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
-    this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
-    this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
-    this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
-    window.addEventListener('resize', this.handleResize.bind(this));
-  }
-
-  /**
-   * Configure l'écoute de l'historique du navigateur
-   * @private
-   */
-  setupHistoryListener() {
-    window.addEventListener('popstate', (e) => {
-      if (e.state && e.state.route) {
-        this.navigateTo(e.state.route, {
-          replace: true,
-          animate: true,
-          direction: 'back'
+
+        // Protège la boucle
+        if (this.components && Array.isArray(this.components)) {
+            this.components.forEach(comp => comp.markDirty());
+        } else {
+            console.warn('[setTheme] components pas encore initialisé');
+        }
+    }
+
+    // Switch Theme
+    toggleDarkMode() {
+        if (this.theme === lightTheme) {
+            this.setTheme(darkTheme);
+        } else {
+            this.setTheme(lightTheme);
+        }
+    }
+
+    enableFpsDisplay(enable = true) {
+        this.showFps = enable;
+    }
+
+    // AJOUTER CETTE MÉTHODE (optionnel - pour faciliter l'accès)
+    animate(component, options) {
+        return this.animator.animate(component, options);
+    }
+
+    // ----- Worker UI -----
+    handleWorkerMessage(e) {
+        const {
+            type,
+            payload
+        } = e.data;
+        switch (type) {
+            case 'LAYOUT_DONE':
+                for (let update of payload) {
+                    const comp = this.components.find(c => c.id === update.id);
+                    if (comp) comp.height = update.height;
+                }
+                break;
+            case 'SCROLL_UPDATED':
+                this.scrollOffset = payload.offset;
+                this.scrollVelocity = payload.velocity;
+                break;
+        }
+    }
+
+    updateLayoutAsync() {
+        this.worker.postMessage({
+            type: 'UPDATE_LAYOUT'
         });
-      }
-    });
-  }
-
-  // ===== MÉTHODES DE ROUTING =====
-
-  /**
-   * Définit une route avec pattern de paramètres
-   * @param {string} pattern - Pattern de la route (ex: '/user/:id', '/posts/:category/:id')
-   * @param {Function} component - Fonction qui crée les composants
-   * @param {Object} options - Options de la route
-   * @returns {CanvasFramework}
-   */
-  route(pattern, component, options = {}) {
-    const route = {
-      pattern,
-      component,
-      regex: this.patternToRegex(pattern),
-      paramNames: this.extractParamNames(pattern),
-      beforeEnter: options.beforeEnter,
-      afterEnter: options.afterEnter,
-      beforeLeave: options.beforeLeave,
-	  afterLeave: options.afterLeave,        // ✅ NOUVEAU
-      onEnter: options.onEnter,              // ✅ NOUVEAU (alias de afterEnter)
-      onLeave: options.onLeave,              // ✅ NOUVEAU (alias de beforeLeave)
-      transition: options.transition || 'slide'
-    };
-    
-    this.routes.set(pattern, route);
-    return this;
-  }
-
-  /**
-   * Convertit un pattern de route en regex
-   * @private
-   */
-  patternToRegex(pattern) {
-    const regexPattern = pattern
-      .replace(/\//g, '\\/')
-      .replace(/:([^\/]+)/g, '([^\\/]+)');
-    return new RegExp(`^${regexPattern}$`);
-  }
-
-  /**
-   * Extrait les noms des paramètres d'un pattern
-   * @private
-   */
-  extractParamNames(pattern) {
-    const matches = pattern.match(/:([^\/]+)/g);
-    return matches ? matches.map(m => m.slice(1)) : [];
-  }
-
-  /**
-   * Trouve la route correspondant à un path
-   * @private
-   */
-  matchRoute(path) {
-    // Séparer le path et la query string
-    const [pathname, queryString] = path.split('?');
-    
-    for (let [pattern, route] of this.routes) {
-      const match = pathname.match(route.regex);
-      if (match) {
-        const params = {};
-        route.paramNames.forEach((name, index) => {
-          params[name] = match[index + 1];
+    }
+
+    updateScrollInertia() {
+        const maxScroll = this.getMaxScroll();
+        this.worker.postMessage({
+            type: 'SCROLL_INERTIA',
+            payload: {
+                offset: this.scrollOffset,
+                velocity: this.scrollVelocity,
+                friction: this.scrollFriction,
+                maxScroll
+            }
         });
-        
-        const query = this.parseQueryString(queryString);
-        
-        return { route, params, query, pathname };
-      }
     }
-    return null;
-  }
 
-  /**
-   * Parse une query string
-   * @private
-   */
-  parseQueryString(queryString) {
-    if (!queryString) return {};
-    
-    const params = {};
-    queryString.split('&').forEach(param => {
-      const [key, value] = param.split('=');
-      params[decodeURIComponent(key)] = decodeURIComponent(value || '');
-    });
-    return params;
-  }
-
-  /**
-   * Navigue vers une route
-   * @param {string} path - Chemin de destination (ex: '/user/123', '/posts/tech/456?sort=date')
-   * @param {Object} options - Options de navigation
-   */
-  navigate(path, options = {}) {
-    this.navigateTo(path, options);
-  }
-
-  /**
-   * Méthode interne de navigation
-   * @private
-   */
-  async navigateTo(path, options = {}) {
-    const {
-      replace = false,
-      animate = true,
-      direction = 'forward',
-      transition = null,
-      state = {}
-    } = options;
-
-    const match = this.matchRoute(path);
-    if (!match) {
-      console.warn(`Route not found: ${path}`);
-      return;
-    }
-
-    const { route, params, query, pathname } = match;
-
-    // ===== LIFECYCLE: AVANT DE QUITTER L'ANCIENNE ROUTE =====
-  
-    // Hook beforeLeave de la route actuelle (peut bloquer la navigation)
-    const currentRouteData = this.routes.get(this.currentRoute);
-    if (currentRouteData?.beforeLeave) {
-      const canLeave = await currentRouteData.beforeLeave(this.currentParams, this.currentQuery);
-      if (canLeave === false) {
-        console.log('Navigation cancelled by beforeLeave hook');
-        return;
-      }
+    // ------ Logic Worker --------
+    handleLogicWorkerMessage(e) {
+        const {
+            type,
+            payload
+        } = e.data;
+        switch (type) {
+            case 'STATE_UPDATED':
+                // Le worker a renvoyé le nouvel état global
+                this.logicWorkerState = payload;
+                break;
+
+            case 'EXECUTION_RESULT':
+                // Résultat d'une tâche spécifique envoyée au worker
+                if (this.onWorkerResult) this.onWorkerResult(payload);
+                break;
+
+            case 'EXECUTION_ERROR':
+                console.error('Logic Worker Error:', payload);
+                break;
+        }
     }
-  
-    // ✅ NOUVEAU : Hook onLeave (alias plus intuitif de beforeLeave, mais ne bloque pas)
-    if (currentRouteData?.onLeave) {
-      await currentRouteData.onLeave(this.currentParams, this.currentQuery);
+
+    runLogicTask(taskName, taskData) {
+        this.logicWorker.postMessage({
+            type: 'EXECUTE_TASK',
+            payload: {
+                taskName,
+                taskData
+            }
+        });
     }
 
-    // ===== LIFECYCLE: AVANT D'ENTRER DANS LA NOUVELLE ROUTE =====
-  
-    // Hook beforeEnter de la nouvelle route (peut bloquer la navigation)
-    if (route.beforeEnter) {
-      const canEnter = await route.beforeEnter(params, query);
-      if (canEnter === false) {
-        console.log('Navigation cancelled by beforeEnter hook');
-        return;
-      }
+    updateLogicWorkerState(newState) {
+        this.logicWorkerState = {
+            ...this.logicWorkerState,
+            ...newState
+        };
+        this.logicWorker.postMessage({
+            type: 'SET_STATE',
+            payload: this.logicWorkerState
+        });
     }
-  
-    // ✅ NOUVEAU : Hook onEnter (appelé juste avant de créer les composants)
-    if (route.onEnter) {
-      await route.onEnter(params, query);
+
+    detectPlatform() {
+        const ua = navigator.userAgent.toLowerCase();
+        if (/android/.test(ua)) return 'material';
+        if (/iphone|ipad|ipod/.test(ua)) return 'cupertino';
+        return 'material';
     }
 
-    // ===== SAUVEGARDER L'ÉTAT ACTUEL =====
-  
-    // Sauvegarder l'ancienne route pour l'animation et les hooks
-    const oldComponents = [...this.components];
-    const oldRoute = this.currentRoute;
-    const oldParams = { ...this.currentParams };
-    const oldQuery = { ...this.currentQuery };
+    setupCanvas() {
+        this.canvas.width = this.width * this.dpr;
+        this.canvas.height = this.height * this.dpr;
+        this.canvas.style.width = this.width + 'px';
+        this.canvas.style.height = this.height + 'px';
 
-    // ===== METTRE À JOUR L'ÉTAT =====
-  
-    this.currentRoute = pathname;
-    this.currentParams = params;
-    this.currentQuery = query;
+        // Échelle uniquement pour Canvas 2D
+        if (!this.useWebGL) {
+            this.ctx.scale(this.dpr, this.dpr);
+        } else {
+            // WebGL gère le DPR automatiquement via la matrice de projection
+            this.ctx.updateProjectionMatrix();
+        }
+    }
 
-    // ===== GÉRER L'HISTORIQUE =====
-    
-    if (!replace) {
-      this.historyIndex++;
-      this.history = this.history.slice(0, this.historyIndex);
-      this.history.push({ path, params, query, state });
-      
-      // Mettre à jour l'historique du navigateur
-      window.history.pushState(
-        { route: path, params, query, state },
-        '',
-        path
-      );
-    } else {
-      this.history[this.historyIndex] = { path, params, query, state };
-      window.history.replaceState(
-      { route: path, params, query, state },
-        '',
-        path
-      );
-    }
-
-    // ===== CRÉER LES NOUVEAUX COMPOSANTS =====
-  
-    this.components = [];
-    if (typeof route.component === 'function') {
-      route.component(this, params, query);
-    }
-
-    // ===== LANCER L'ANIMATION DE TRANSITION =====
-  
-    if (animate && !this.transitionState.isTransitioning) {
-      const transitionType = transition || route.transition || 'slide';
-      this.startTransition(oldComponents, this.components, transitionType, direction);
-    }
-
-    // ===== LIFECYCLE: APRÈS ÊTRE ENTRÉ DANS LA NOUVELLE ROUTE =====
-  
-    // Hook afterEnter (appelé immédiatement après la création des composants)
-    if (route.afterEnter) {
-      route.afterEnter(params, query);
-    }
-  
-    // ✅ NOUVEAU : Hook afterLeave de l'ancienne route (après transition complète)
-    if (currentRouteData?.afterLeave) {
-      // Si animation, attendre la fin de la transition
-      if (animate && this.transitionState.isTransitioning) {
-        setTimeout(() => {
-          currentRouteData.afterLeave(oldParams, oldQuery);
-        }, this.transitionState.duration || 300);
-      } else {
-        // Pas d'animation, appeler immédiatement
-        currentRouteData.afterLeave(oldParams, oldQuery);
-      }
+    setupEventListeners() {
+        this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
+        this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
+        this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
+        this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
+        this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
+        this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
+        window.addEventListener('resize', this.handleResize.bind(this));
     }
-  
-    // ✅ OPTIONNEL : Marquer les composants comme "dirty" pour forcer le rendu
-    this._maxScrollDirty = true;
-  }
-
-  /**
-   * Démarre une animation de transition
-   * @private
-   */
-  startTransition(oldComponents, newComponents, type, direction) {
-    this.transitionState = {
-      isTransitioning: true,
-      progress: 0,
-      duration: 300,
-      type,
-      direction,
-      oldComponents: [...oldComponents],
-      newComponents: [...newComponents],
-      startTime: Date.now()
-    };
-  }
-
-  /**
-   * Met à jour l'animation de transition
-   * @private
-   */
-  updateTransition() {
-    if (!this.transitionState.isTransitioning) return;
-
-    const elapsed = Date.now() - this.transitionState.startTime;
-    this.transitionState.progress = Math.min(elapsed / this.transitionState.duration, 1);
-
-    // Fonction d'easing (ease-in-out)
-    const eased = this.easeInOutCubic(this.transitionState.progress);
-
-    // Appliquer la transformation selon le type
-    this.ctx.save();
-    this.applyTransitionTransform(eased);
-    this.ctx.restore();
-
-    // Terminer la transition
-    if (this.transitionState.progress >= 1) {
-      this.transitionState.isTransitioning = false;
-      this.transitionState.oldComponents = [];
-    }
-  }
-
-  /**
-   * Applique la transformation de transition
-   * @private
-   */
-  applyTransitionTransform(progress) {
-    const { type, direction, oldComponents, newComponents } = this.transitionState;
-    const directionMultiplier = direction === 'forward' ? 1 : -1;
-
-    switch (type) {
-      case 'slide':
-        // Dessiner l'ancienne vue qui sort
-        this.ctx.save();
-        this.ctx.translate(-this.width * progress * directionMultiplier, 0);
-        this.ctx.globalAlpha = 1 - progress * 0.3;
-        for (let comp of oldComponents) {
-          if (comp.visible) comp.draw(this.ctx);
+
+    /**
+     * Configure l'écoute de l'historique du navigateur
+     * @private
+     */
+    setupHistoryListener() {
+        window.addEventListener('popstate', (e) => {
+            if (e.state && e.state.route) {
+                this.navigateTo(e.state.route, {
+                    replace: true,
+                    animate: true,
+                    direction: 'back'
+                });
+            }
+        });
+    }
+
+    // ===== MÉTHODES DE ROUTING =====
+
+    /**
+     * Définit une route avec pattern de paramètres
+     * @param {string} pattern - Pattern de la route (ex: '/user/:id', '/posts/:category/:id')
+     * @param {Function} component - Fonction qui crée les composants
+     * @param {Object} options - Options de la route
+     * @returns {CanvasFramework}
+     */
+    route(pattern, component, options = {}) {
+        const route = {
+            pattern,
+            component,
+            regex: this.patternToRegex(pattern),
+            paramNames: this.extractParamNames(pattern),
+            beforeEnter: options.beforeEnter,
+            afterEnter: options.afterEnter,
+            beforeLeave: options.beforeLeave,
+            afterLeave: options.afterLeave, // ✅ NOUVEAU
+            onEnter: options.onEnter, // ✅ NOUVEAU (alias de afterEnter)
+            onLeave: options.onLeave, // ✅ NOUVEAU (alias de beforeLeave)
+            transition: options.transition || 'slide'
+        };
+
+        this.routes.set(pattern, route);
+        return this;
+    }
+
+    /**
+     * Convertit un pattern de route en regex
+     * @private
+     */
+    patternToRegex(pattern) {
+        const regexPattern = pattern
+            .replace(/\//g, '\\/')
+            .replace(/:([^\/]+)/g, '([^\\/]+)');
+        return new RegExp(`^${regexPattern}$`);
+    }
+
+    /**
+     * Extrait les noms des paramètres d'un pattern
+     * @private
+     */
+    extractParamNames(pattern) {
+        const matches = pattern.match(/:([^\/]+)/g);
+        return matches ? matches.map(m => m.slice(1)) : [];
+    }
+
+    /**
+     * Trouve la route correspondant à un path
+     * @private
+     */
+    matchRoute(path) {
+        // Séparer le path et la query string
+        const [pathname, queryString] = path.split('?');
+
+        for (let [pattern, route] of this.routes) {
+            const match = pathname.match(route.regex);
+            if (match) {
+                const params = {};
+                route.paramNames.forEach((name, index) => {
+                    params[name] = match[index + 1];
+                });
+
+                const query = this.parseQueryString(queryString);
+
+                return {
+                    route,
+                    params,
+                    query,
+                    pathname
+                };
+            }
         }
-        this.ctx.restore();
+        return null;
+    }
 
-        // Dessiner la nouvelle vue qui entre
-        this.ctx.save();
-        this.ctx.translate(this.width * (1 - progress) * directionMultiplier, 0);
-        for (let comp of newComponents) {
-          if (comp.visible) comp.draw(this.ctx);
+    /**
+     * Parse une query string
+     * @private
+     */
+    parseQueryString(queryString) {
+        if (!queryString) return {};
+
+        const params = {};
+        queryString.split('&').forEach(param => {
+            const [key, value] = param.split('=');
+            params[decodeURIComponent(key)] = decodeURIComponent(value || '');
+        });
+        return params;
+    }
+
+    /**
+     * Navigue vers une route
+     * @param {string} path - Chemin de destination (ex: '/user/123', '/posts/tech/456?sort=date')
+     * @param {Object} options - Options de navigation
+     */
+    navigate(path, options = {}) {
+        this.navigateTo(path, options);
+    }
+
+    /**
+     * Méthode interne de navigation
+     * @private
+     */
+    async navigateTo(path, options = {}) {
+        const {
+            replace = false,
+                animate = true,
+                direction = 'forward',
+                transition = null,
+                state = {}
+        } = options;
+
+        const match = this.matchRoute(path);
+        if (!match) {
+            console.warn(`Route not found: ${path}`);
+            return;
         }
-        this.ctx.restore();
-        break;
 
-      case 'fade':
-        // Dessiner l'ancienne vue qui fade out
-        this.ctx.save();
-        this.ctx.globalAlpha = 1 - progress;
-        for (let comp of oldComponents) {
-          if (comp.visible) comp.draw(this.ctx);
+        const {
+            route,
+            params,
+            query,
+            pathname
+        } = match;
+
+        // ===== LIFECYCLE: AVANT DE QUITTER L'ANCIENNE ROUTE =====
+
+        // Hook beforeLeave de la route actuelle (peut bloquer la navigation)
+        const currentRouteData = this.routes.get(this.currentRoute);
+        if (currentRouteData?.beforeLeave) {
+            const canLeave = await currentRouteData.beforeLeave(this.currentParams, this.currentQuery);
+            if (canLeave === false) {
+                console.log('Navigation cancelled by beforeLeave hook');
+                return;
+            }
         }
-        this.ctx.restore();
 
-        // Dessiner la nouvelle vue qui fade in
-        this.ctx.save();
-        this.ctx.globalAlpha = progress;
-        for (let comp of newComponents) {
-          if (comp.visible) comp.draw(this.ctx);
+        // ✅ NOUVEAU : Hook onLeave (alias plus intuitif de beforeLeave, mais ne bloque pas)
+        if (currentRouteData?.onLeave) {
+            await currentRouteData.onLeave(this.currentParams, this.currentQuery);
+        }
+
+        // ===== LIFECYCLE: AVANT D'ENTRER DANS LA NOUVELLE ROUTE =====
+
+        // Hook beforeEnter de la nouvelle route (peut bloquer la navigation)
+        if (route.beforeEnter) {
+            const canEnter = await route.beforeEnter(params, query);
+            if (canEnter === false) {
+                console.log('Navigation cancelled by beforeEnter hook');
+                return;
+            }
         }
-        this.ctx.restore();
-        break;
 
-      case 'none':
-        // Pas d'animation, juste afficher la nouvelle vue
-        for (let comp of newComponents) {
-          if (comp.visible) comp.draw(this.ctx);
+        // ✅ NOUVEAU : Hook onEnter (appelé juste avant de créer les composants)
+        if (route.onEnter) {
+            await route.onEnter(params, query);
         }
-        break;
-    }
-  }
-
-  /**
-   * Fonction d'easing
-   * @private
-   */
-  easeInOutCubic(t) {
-    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-  }
-
-  /**
-   * Retour en arrière dans l'historique
-   */
-  goBack() {
-    if (this.historyIndex > 0) {
-      this.historyIndex--;
-      const historyEntry = this.history[this.historyIndex];
-      this.navigateTo(historyEntry.path, {
-        replace: true,
-        animate: true,
-        direction: 'back'
-      });
-      window.history.back();
-    }
-  }
-
-  /**
-   * Avancer dans l'historique
-   */
-  goForward() {
-    if (this.historyIndex < this.history.length - 1) {
-      this.historyIndex++;
-      const historyEntry = this.history[this.historyIndex];
-      this.navigateTo(historyEntry.path, {
-        replace: true,
-        animate: true,
-        direction: 'forward'
-      });
-      window.history.forward();
-    }
-  }
-
-  /**
-   * Obtient les paramètres de la route actuelle
-   * @returns {Object}
-   */
-  getParams() {
-    return { ...this.currentParams };
-  }
-
-  /**
-   * Obtient la query string de la route actuelle
-   * @returns {Object}
-   */
-  getQuery() {
-    return { ...this.currentQuery };
-  }
-
-  /**
-   * Obtient un paramètre spécifique
-   * @param {string} name
-   * @returns {string|undefined}
-   */
-  getParam(name) {
-    return this.currentParams[name];
-  }
-
-  /**
-   * Obtient un paramètre de query spécifique
-   * @param {string} name
-   * @returns {string|undefined}
-   */
-  getQueryParam(name) {
-    return this.currentQuery[name];
-  }
-
-  // ===== FIN DES MÉTHODES DE ROUTING =====
-
-  handleTouchStart(e) {
-    e.preventDefault();
-    this.isDragging = false;
-    const touch = e.touches[0];
-    const pos = this.getTouchPos(touch);
-    this.lastTouchY = pos.y;
-    this.checkComponentsAtPosition(pos.x, pos.y, 'start');
-  }
-
-  handleTouchMove(e) {
-    e.preventDefault();
-    const touch = e.touches[0];
-    const pos = this.getTouchPos(touch);
-    
-    if (!this.isDragging) {
-      const deltaY = Math.abs(pos.y - this.lastTouchY);
-      if (deltaY > 5) {
-        this.isDragging = true;
-      }
+
+        // ===== SAUVEGARDER L'ÉTAT ACTUEL =====
+
+        // Sauvegarder l'ancienne route pour l'animation et les hooks
+        const oldComponents = [...this.components];
+        const oldRoute = this.currentRoute;
+        const oldParams = {
+            ...this.currentParams
+        };
+        const oldQuery = {
+            ...this.currentQuery
+        };
+
+        // ===== METTRE À JOUR L'ÉTAT =====
+
+        this.currentRoute = pathname;
+        this.currentParams = params;
+        this.currentQuery = query;
+
+        // ===== GÉRER L'HISTORIQUE =====
+
+        if (!replace) {
+            this.historyIndex++;
+            this.history = this.history.slice(0, this.historyIndex);
+            this.history.push({
+                path,
+                params,
+                query,
+                state
+            });
+
+            // Mettre à jour l'historique du navigateur
+            window.history.pushState({
+                    route: path,
+                    params,
+                    query,
+                    state
+                },
+                '',
+                path
+            );
+        } else {
+            this.history[this.historyIndex] = {
+                path,
+                params,
+                query,
+                state
+            };
+            window.history.replaceState({
+                    route: path,
+                    params,
+                    query,
+                    state
+                },
+                '',
+                path
+            );
+        }
+
+        // ===== CRÉER LES NOUVEAUX COMPOSANTS =====
+
+        this.components = [];
+        if (typeof route.component === 'function') {
+            route.component(this, params, query);
+        }
+
+        // ===== LANCER L'ANIMATION DE TRANSITION =====
+
+        if (animate && !this.transitionState.isTransitioning) {
+            const transitionType = transition || route.transition || 'slide';
+            this.startTransition(oldComponents, this.components, transitionType, direction);
+        }
+
+        // ===== LIFECYCLE: APRÈS ÊTRE ENTRÉ DANS LA NOUVELLE ROUTE =====
+
+        // Hook afterEnter (appelé immédiatement après la création des composants)
+        if (route.afterEnter) {
+            route.afterEnter(params, query);
+        }
+
+        // ✅ NOUVEAU : Hook afterLeave de l'ancienne route (après transition complète)
+        if (currentRouteData?.afterLeave) {
+            // Si animation, attendre la fin de la transition
+            if (animate && this.transitionState.isTransitioning) {
+                setTimeout(() => {
+                    currentRouteData.afterLeave(oldParams, oldQuery);
+                }, this.transitionState.duration || 300);
+            } else {
+                // Pas d'animation, appeler immédiatement
+                currentRouteData.afterLeave(oldParams, oldQuery);
+            }
+        }
+
+        // ✅ OPTIONNEL : Marquer les composants comme "dirty" pour forcer le rendu
+        this._maxScrollDirty = true;
     }
-    
-    if (this.isDragging) {
-      const deltaY = pos.y - this.lastTouchY;
-      this.scrollOffset += deltaY;
-      const maxScroll = this.getMaxScroll();
-      this.scrollOffset = Math.max(Math.min(this.scrollOffset, 0), -maxScroll);
-      this.scrollVelocity = deltaY;
-      this.lastTouchY = pos.y;
-    } else {
-      this.checkComponentsAtPosition(pos.x, pos.y, 'move');
-    }
-  }
-
-  handleTouchEnd(e) {
-    e.preventDefault();
-    const touch = e.changedTouches[0];
-    const pos = this.getTouchPos(touch);
-    
-    if (!this.isDragging) {
-      this.checkComponentsAtPosition(pos.x, pos.y, 'end');
-    } else {
-      this.isDragging = false;
-    }
-  }
-
-  handleMouseDown(e) {
-    this.isDragging = false;
-    this.lastTouchY = e.clientY;
-    this.checkComponentsAtPosition(e.clientX, e.clientY, 'start');
-  }
-
-  handleMouseMove(e) {
-    if (!this.isDragging) {
-      const deltaY = Math.abs(e.clientY - this.lastTouchY);
-      if (deltaY > 5) {
-        this.isDragging = true;
-      }
+
+    /**
+     * Démarre une animation de transition
+     * @private
+     */
+    startTransition(oldComponents, newComponents, type, direction) {
+        this.transitionState = {
+            isTransitioning: true,
+            progress: 0,
+            duration: 300,
+            type,
+            direction,
+            oldComponents: [...oldComponents],
+            newComponents: [...newComponents],
+            startTime: Date.now()
+        };
     }
-    
-    if (this.isDragging) {
-      const deltaY = e.clientY - this.lastTouchY;
-      this.scrollOffset += deltaY;
-      const maxScroll = this.getMaxScroll();
-      this.scrollOffset = Math.max(Math.min(this.scrollOffset, 0), -maxScroll);
-      this.scrollVelocity = deltaY;
-      this.lastTouchY = e.clientY;
-    } else {
-      this.checkComponentsAtPosition(e.clientX, e.clientY, 'move');
-    }
-  }
-
-  handleMouseUp(e) {
-    if (!this.isDragging) {
-      this.checkComponentsAtPosition(e.clientX, e.clientY, 'end');
-    } else {
-      this.isDragging = false;
-    }
-  }
-
-  getTouchPos(touch) {
-    const rect = this.canvas.getBoundingClientRect();
-    return {
-      x: touch.clientX - rect.left,
-      y: touch.clientY - rect.top
-    };
-  }
-
-  checkComponentsAtPosition(x, y, eventType) {
-    const isFixedComponent = (comp) =>
-    FIXED_COMPONENT_TYPES.has(comp.constructor);
-    
-    for (let i = this.components.length - 1; i >= 0; i--) {
-      const comp = this.components[i];
-      
-      if (comp.visible) {
-        const adjustedY = isFixedComponent(comp) ? y : y - this.scrollOffset;
-        
-        if (comp instanceof Card && comp.clickableChildren && comp.children && comp.children.length > 0) {
-          if (comp.isPointInside(x, adjustedY)) {
-            const cardAdjustedY = adjustedY - comp.y - comp.padding;
-            const cardAdjustedX = x - comp.x - comp.padding;
-            
-            for (let j = comp.children.length - 1; j >= 0; j--) {
-              const child = comp.children[j];
-              
-              if (child.visible && 
-                  cardAdjustedY >= child.y && 
-                  cardAdjustedY <= child.y + child.height &&
-                  cardAdjustedX >= child.x && 
-                  cardAdjustedX <= child.x + child.width) {
-                
-                const relativeX = cardAdjustedX - child.x;
-                const relativeY = cardAdjustedY - child.y;
-                
-                switch (eventType) {
-                  case 'start':
-                    child.pressed = true;
-                    if (child.onPress) child.onPress?.(relativeX, relativeY);
-                    break;
-                    
-                  case 'move':
-                    if (!child.hovered) {
-                      child.hovered = true;
-                      if (child.onHover) child.onHover();
-                    }
-                    if (child.onMove) child.onMove?.(relativeX, relativeY);
-                    break;
-                    
-                  case 'end':
-                    if (child.pressed) {
-                      child.pressed = false;
-                      
-                      if (child instanceof Input || child instanceof PasswordInput || child instanceof InputTags || child instanceof InputDatalist) {
-                        for (let other of this.components) {
-                          if (
-							  (other instanceof Input ||
-							   other instanceof PasswordInput ||
-							   other instanceof InputTags ||
-							   other instanceof InputDatalist) &&
-							  other !== child &&
-							  other.focused
-							) {
-							  other.focused = false;
-							  other.cursorVisible = false;
-							  other.onBlur?.();
-							}
-                        }
-                        
-                        child.focused = true;
-                        child.cursorVisible = true;
-                        if (child.onFocus) child.onFocus();
-                      } else if (child.onClick) {
-                        child.onClick();
-                      } else if (child.onPress) {
-                        child.onPress?.(relativeX, relativeY);
-                      }
-                    }
-                    break;
+
+    /**
+     * Met à jour l'animation de transition
+     * @private
+     */
+    updateTransition() {
+        if (!this.transitionState.isTransitioning) return;
+
+        const elapsed = Date.now() - this.transitionState.startTime;
+        this.transitionState.progress = Math.min(elapsed / this.transitionState.duration, 1);
+
+        // Fonction d'easing (ease-in-out)
+        const eased = this.easeInOutCubic(this.transitionState.progress);
+
+        // Appliquer la transformation selon le type
+        this.ctx.save();
+        this.applyTransitionTransform(eased);
+        this.ctx.restore();
+
+        // Terminer la transition
+        if (this.transitionState.progress >= 1) {
+            this.transitionState.isTransitioning = false;
+            this.transitionState.oldComponents = [];
+        }
+    }
+
+    /**
+     * Applique la transformation de transition
+     * @private
+     */
+    applyTransitionTransform(progress) {
+        const {
+            type,
+            direction,
+            oldComponents,
+            newComponents
+        } = this.transitionState;
+        const directionMultiplier = direction === 'forward' ? 1 : -1;
+
+        switch (type) {
+            case 'slide':
+                // Dessiner l'ancienne vue qui sort
+                this.ctx.save();
+                this.ctx.translate(-this.width * progress * directionMultiplier, 0);
+                this.ctx.globalAlpha = 1 - progress * 0.3;
+                for (let comp of oldComponents) {
+                    if (comp.visible) comp.draw(this.ctx);
                 }
-                
-                return;
-              }
+                this.ctx.restore();
+
+                // Dessiner la nouvelle vue qui entre
+                this.ctx.save();
+                this.ctx.translate(this.width * (1 - progress) * directionMultiplier, 0);
+                for (let comp of newComponents) {
+                    if (comp.visible) comp.draw(this.ctx);
+                }
+                this.ctx.restore();
+                break;
+
+            case 'fade':
+                // Dessiner l'ancienne vue qui fade out
+                this.ctx.save();
+                this.ctx.globalAlpha = 1 - progress;
+                for (let comp of oldComponents) {
+                    if (comp.visible) comp.draw(this.ctx);
+                }
+                this.ctx.restore();
+
+                // Dessiner la nouvelle vue qui fade in
+                this.ctx.save();
+                this.ctx.globalAlpha = progress;
+                for (let comp of newComponents) {
+                    if (comp.visible) comp.draw(this.ctx);
+                }
+                this.ctx.restore();
+                break;
+
+            case 'none':
+                // Pas d'animation, juste afficher la nouvelle vue
+                for (let comp of newComponents) {
+                    if (comp.visible) comp.draw(this.ctx);
+                }
+                break;
+        }
+    }
+
+    /**
+     * Fonction d'easing
+     * @private
+     */
+    easeInOutCubic(t) {
+        return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+    }
+
+    /**
+     * Retour en arrière dans l'historique
+     */
+    goBack() {
+        if (this.historyIndex > 0) {
+            this.historyIndex--;
+            const historyEntry = this.history[this.historyIndex];
+            this.navigateTo(historyEntry.path, {
+                replace: true,
+                animate: true,
+                direction: 'back'
+            });
+            window.history.back();
+        }
+    }
+
+    /**
+     * Avancer dans l'historique
+     */
+    goForward() {
+        if (this.historyIndex < this.history.length - 1) {
+            this.historyIndex++;
+            const historyEntry = this.history[this.historyIndex];
+            this.navigateTo(historyEntry.path, {
+                replace: true,
+                animate: true,
+                direction: 'forward'
+            });
+            window.history.forward();
+        }
+    }
+
+    /**
+     * Obtient les paramètres de la route actuelle
+     * @returns {Object}
+     */
+    getParams() {
+        return {
+            ...this.currentParams
+        };
+    }
+
+    /**
+     * Obtient la query string de la route actuelle
+     * @returns {Object}
+     */
+    getQuery() {
+        return {
+            ...this.currentQuery
+        };
+    }
+
+    /**
+     * Obtient un paramètre spécifique
+     * @param {string} name
+     * @returns {string|undefined}
+     */
+    getParam(name) {
+        return this.currentParams[name];
+    }
+
+    /**
+     * Obtient un paramètre de query spécifique
+     * @param {string} name
+     * @returns {string|undefined}
+     */
+    getQueryParam(name) {
+        return this.currentQuery[name];
+    }
+
+    // ===== FIN DES MÉTHODES DE ROUTING =====
+
+    handleTouchStart(e) {
+        e.preventDefault();
+        this.isDragging = false;
+        const touch = e.touches[0];
+        const pos = this.getTouchPos(touch);
+        this.lastTouchY = pos.y;
+        this.checkComponentsAtPosition(pos.x, pos.y, 'start');
+    }
+
+    handleTouchMove(e) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const pos = this.getTouchPos(touch);
+
+        if (!this.isDragging) {
+            const deltaY = Math.abs(pos.y - this.lastTouchY);
+            if (deltaY > 5) {
+                this.isDragging = true;
             }
-          }
         }
-        
-        if (comp.isPointInside(x, adjustedY)) {
-          switch (eventType) {
-            case 'start':
-              comp.pressed = true;
-              if (comp.onPress) comp.onPress(x, adjustedY);
-              break;
-              
-            case 'move':
-              if (!comp.hovered) {
-                comp.hovered = true;
-                if (comp.onHover) comp.onHover();
-              }
-              if (comp.onMove) comp.onMove(x, adjustedY);
-              break;
-              
-            case 'end':
-              if (comp.pressed) {
-                comp.pressed = false;
-                
-                if (comp instanceof Input || comp instanceof PasswordInput || comp instanceof InputTags || comp instanceof InputDatalist) {
-                  for (let other of this.components) {
-                    if (
-						  (other instanceof Input ||
-						   other instanceof PasswordInput ||
-						   other instanceof InputTags ||
-						   other instanceof InputDatalist) &&
-						  other !== comp &&
-						  other.focused
-						) {
-						  other.focused = false;
-						  other.cursorVisible = false;
-						  other.onBlur?.();
-						}
-                  }
-                  
-                  comp.focused = true;
-                  comp.cursorVisible = true;
-                  if (comp.onFocus) comp.onFocus();
-                } else if (comp.onClick) {
-                  comp.onClick();
-                } else if (comp.onPress) {
-                  comp.onPress(x, adjustedY);
-                }
-              }
-              break;
-          }
-          
-          return;
+
+        if (this.isDragging) {
+            const deltaY = pos.y - this.lastTouchY;
+            this.scrollOffset += deltaY;
+            const maxScroll = this.getMaxScroll();
+            this.scrollOffset = Math.max(Math.min(this.scrollOffset, 0), -maxScroll);
+            this.scrollVelocity = deltaY;
+            this.lastTouchY = pos.y;
         } else {
-          comp.hovered = false;
+            this.checkComponentsAtPosition(pos.x, pos.y, 'move');
         }
-      }
     }
-  }
-  
-  getMaxScroll() {
-    if (!this._maxScrollDirty) return this._cachedMaxScroll;
-  
-    let maxY = 0;
-    for (const comp of this.components) {
-      if (this.isFixedComponent(comp) || !comp.visible) continue;
-      const bottom = comp.y + comp.height;
-      if (bottom > maxY) maxY = bottom;
-    }
-  
-    this._cachedMaxScroll = Math.max(0, maxY - this.height + 50);
-    this._maxScrollDirty = false;
-    return this._cachedMaxScroll;
-  }
-	
-  /*getMaxScroll() {
-    let maxY = 0;
-    for (let comp of this.components) {
-      if (!this.isFixedComponent(comp)) {
-        maxY = Math.max(maxY, comp.y + comp.height);
-      }
+
+    handleTouchEnd(e) {
+        e.preventDefault();
+        const touch = e.changedTouches[0];
+        const pos = this.getTouchPos(touch);
+
+        if (!this.isDragging) {
+            this.checkComponentsAtPosition(pos.x, pos.y, 'end');
+        } else {
+            this.isDragging = false;
+        }
     }
-    return Math.max(0, maxY - this.height + 50);
-  }*/
 
-  handleResize() {
-    if (this.resizeTimeout) clearTimeout(this.resizeTimeout); // ✅ AJOUTER
-  
-    this.resizeTimeout = setTimeout(() => { // ✅ AJOUTER
-      if (!this.useWebGL) {
-        this.width = window.innerWidth;
-        this.height = window.innerHeight;
-        this.setupCanvas();
-    
-        for (const comp of this.components) {
-          if (comp._resize) {
-            comp._resize(this.width, this.height);
-          }
+    handleMouseDown(e) {
+        this.isDragging = false;
+        this.lastTouchY = e.clientY;
+        this.checkComponentsAtPosition(e.clientX, e.clientY, 'start');
+    }
+
+    handleMouseMove(e) {
+        if (!this.isDragging) {
+            const deltaY = Math.abs(e.clientY - this.lastTouchY);
+            if (deltaY > 5) {
+                this.isDragging = true;
+            }
         }
-        this._maxScrollDirty = true; // ✅ AJOUTER
-      }
-    }, 150); // ✅ AJOUTER (throttle 150ms)
-  }
-
-  add(component) {
-    this.components.push(component);
-    component._mount();
-    this._maxScrollDirty = true; // ✅ AJOUTER CETTE LIGNE
-    return component;
-  }
-
-  remove(component) {
-    const index = this.components.indexOf(component);
-    if (index > -1) {
-      component._unmount();
-      this.components.splice(index, 1);
-      this._maxScrollDirty = true; // ✅ AJOUTER CETTE LIGNE
-    }
-  }
-  
-  markComponentDirty(component) {
-    if (this.optimizationEnabled) {
-      this.dirtyComponents.add(component);
-    }
-  }
-
-  enableOptimization() {
-    this.optimizationEnabled = true;
-  }
-
-  /**
-  * Dessine un petit triangle rouge pour indiquer overflow (style Flutter)
-  */
-  drawOverflowIndicators() {
-    const ctx = this.ctx;
-  
-    // Pour chaque composant
-    for (let comp of this.components) {
-      if (!comp.visible) continue;
-    
-      // Position réelle à l'écran
-      const isFixed = this.isFixedComponent(comp);
-      const screenY = isFixed ? comp.y : comp.y + this.scrollOffset;
-      const screenX = comp.x;
-    
-      // Vérifier si le composant TEXT a une largeur/hauteur incorrecte
-      let actualWidth = comp.width;
-      let actualHeight = comp.height;
-    
-      // Si c'est un Text, vérifier la taille réelle du texte
-      if (comp instanceof Text && comp.text && ctx.measureText) {
-        try {
-          // Sauvegarder le style actuel
-          ctx.save();
-        
-          // Appliquer le style du texte
-          if (comp.fontSize) {
-            ctx.font = `${comp.fontSize}px ${comp.fontFamily || 'Arial'}`;
-          }
-        
-          // Mesurer la taille réelle
-          const metrics = ctx.measureText(comp.text);
-          actualWidth = metrics.width + (comp.padding || 0) * 2;
-          actualHeight = (comp.fontSize || 16) + (comp.padding || 0) * 2;
-        
-          ctx.restore();
-        } catch (e) {
-          // En cas d'erreur, garder les dimensions par défaut
+
+        if (this.isDragging) {
+            const deltaY = e.clientY - this.lastTouchY;
+            this.scrollOffset += deltaY;
+            const maxScroll = this.getMaxScroll();
+            this.scrollOffset = Math.max(Math.min(this.scrollOffset, 0), -maxScroll);
+            this.scrollVelocity = deltaY;
+            this.lastTouchY = e.clientY;
+        } else {
+            this.checkComponentsAtPosition(e.clientX, e.clientY, 'move');
         }
-      }
-    
-      // Calculer les limites RÉELLES du composant
-      const compLeft = screenX;
-      const compRight = screenX + actualWidth;
-      const compTop = screenY;
-      const compBottom = screenY + actualHeight;
-    
-      // Vérifier les débordements avec les dimensions RÉELLES
-      const overflow = {
-        left: compLeft < 0,
-        right: compRight > this.width,
-        top: compTop < 0,
-        bottom: compBottom > this.height
-      };
-    
-      // Si aucun débordement, passer au suivant
-      if (!overflow.left && !overflow.right && !overflow.top && !overflow.bottom) {
-        continue;
-      }
-    
-      // DEBUG: Afficher les infos du composant
-      if (this.debbug) {
-		console.table({
-		  type: comp.constructor?.name,
-		  x: comp.x,
-		  y: comp.y,
-		  declaredSize: `${comp.width}x${comp.height}`,
-		  actualSize: `${actualWidth}x${actualHeight}`,
-		  screenPos: `(${screenX}, ${screenY})`,
-	   	  overflow
-	    });
-	  }
-    
-      // Dessiner les indicateurs
-      ctx.save();
-    
-      // 1. Bordures rouges sur les parties qui débordent
-      ctx.strokeStyle = 'red';
-      ctx.lineWidth = 2;
-      ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
-    
-      // Gauche
-      if (overflow.left) {
-        const overflowWidth = Math.min(actualWidth, -compLeft);
-        ctx.fillRect(compLeft, compTop, overflowWidth, actualHeight);
-        ctx.strokeRect(compLeft, compTop, overflowWidth, actualHeight);
-      }
-    
-      // Droite
-      if (overflow.right) {
-        const overflowStart = Math.max(0, this.width - compLeft);
-        const overflowWidth = Math.min(actualWidth, compRight - this.width);
-        ctx.fillRect(this.width - overflowWidth, compTop, overflowWidth, actualHeight);
-        ctx.strokeRect(this.width - overflowWidth, compTop, overflowWidth, actualHeight);
-      }
-    
-      // Haut
-      if (overflow.top) {
-        const overflowHeight = Math.min(actualHeight, -compTop);
-        ctx.fillRect(compLeft, compTop, actualWidth, overflowHeight);
-        ctx.strokeRect(compLeft, compTop, actualWidth, overflowHeight);
-      }
-    
-      // Bas
-      if (overflow.bottom) {
-        const overflowStart = Math.max(0, this.height - compTop);
-        const overflowHeight = Math.min(actualHeight, compBottom - this.height);
-        ctx.fillRect(compLeft, this.height - overflowHeight, actualWidth, overflowHeight);
-        ctx.strokeRect(compLeft, this.height - overflowHeight, actualWidth, overflowHeight);
-      }
-    
-      // 2. Points rouges aux coins
-      ctx.fillStyle = 'red';
-      const markerSize = 6;
-    
-      // Coin supérieur gauche
-      if (overflow.left || overflow.top) {
-        ctx.fillRect(compLeft, compTop, markerSize, markerSize);
-      }
-    
-      // Coin supérieur droit
-      if (overflow.right || overflow.top) {
-        ctx.fillRect(compRight - markerSize, compTop, markerSize, markerSize);
-      }
-    
-      // Coin inférieur gauche
-      if (overflow.left || overflow.bottom) {
-        ctx.fillRect(compLeft, compBottom - markerSize, markerSize, markerSize);
-      }
-    
-      // Coin inférieur droit
-      if (overflow.right || overflow.bottom) {
-        ctx.fillRect(compRight - markerSize, compBottom - markerSize, markerSize, markerSize);
-      }
-    
-      // 3. Texte d'information (optionnel)
-      if (this.debbug && comp.text) {
-        ctx.fillStyle = 'red';
-        ctx.font = '10px monospace';
-        ctx.textAlign = 'left';
-      
-        const overflowText = [];
-        if (overflow.left) overflowText.push('←');
-        if (overflow.right) overflowText.push('→');
-        if (overflow.top) overflowText.push('↑');
-        if (overflow.bottom) overflowText.push('↓');
-      
-        if (overflowText.length > 0) {
-          ctx.fillText(
-            `"${comp.text.substring(0, 10)}${comp.text.length > 10 ? '...' : ''}" ${overflowText.join('')}`,
-            compLeft + 5,
-            compTop - 5
-          );
+    }
+
+    handleMouseUp(e) {
+        if (!this.isDragging) {
+            this.checkComponentsAtPosition(e.clientX, e.clientY, 'end');
+        } else {
+            this.isDragging = false;
+        }
+    }
+
+    getTouchPos(touch) {
+        const rect = this.canvas.getBoundingClientRect();
+        return {
+            x: touch.clientX - rect.left,
+            y: touch.clientY - rect.top
+        };
+    }
+
+    checkComponentsAtPosition(x, y, eventType) {
+        const isFixedComponent = (comp) =>
+            FIXED_COMPONENT_TYPES.has(comp.constructor);
+
+        for (let i = this.components.length - 1; i >= 0; i--) {
+            const comp = this.components[i];
+
+            if (comp.visible) {
+                const adjustedY = isFixedComponent(comp) ? y : y - this.scrollOffset;
+
+                if (comp instanceof Card && comp.clickableChildren && comp.children && comp.children.length > 0) {
+                    if (comp.isPointInside(x, adjustedY)) {
+                        const cardAdjustedY = adjustedY - comp.y - comp.padding;
+                        const cardAdjustedX = x - comp.x - comp.padding;
+
+                        for (let j = comp.children.length - 1; j >= 0; j--) {
+                            const child = comp.children[j];
+
+                            if (child.visible &&
+                                cardAdjustedY >= child.y &&
+                                cardAdjustedY <= child.y + child.height &&
+                                cardAdjustedX >= child.x &&
+                                cardAdjustedX <= child.x + child.width) {
+
+                                const relativeX = cardAdjustedX - child.x;
+                                const relativeY = cardAdjustedY - child.y;
+
+                                switch (eventType) {
+                                    case 'start':
+                                        child.pressed = true;
+                                        if (child.onPress) child.onPress?.(relativeX, relativeY);
+                                        break;
+
+                                    case 'move':
+                                        if (!child.hovered) {
+                                            child.hovered = true;
+                                            if (child.onHover) child.onHover();
+                                        }
+                                        if (child.onMove) child.onMove?.(relativeX, relativeY);
+                                        break;
+
+                                    case 'end':
+                                        if (child.pressed) {
+                                            child.pressed = false;
+
+                                            if (child instanceof Input || child instanceof PasswordInput || child instanceof InputTags || child instanceof InputDatalist) {
+                                                for (let other of this.components) {
+                                                    if (
+                                                        (other instanceof Input ||
+                                                            other instanceof PasswordInput ||
+                                                            other instanceof InputTags ||
+                                                            other instanceof InputDatalist) &&
+                                                        other !== child &&
+                                                        other.focused
+                                                    ) {
+                                                        other.focused = false;
+                                                        other.cursorVisible = false;
+                                                        other.onBlur?.();
+                                                    }
+                                                }
+
+                                                child.focused = true;
+                                                child.cursorVisible = true;
+                                                if (child.onFocus) child.onFocus();
+                                            } else if (child.onClick) {
+                                                child.onClick();
+                                            } else if (child.onPress) {
+                                                child.onPress?.(relativeX, relativeY);
+                                            }
+                                        }
+                                        break;
+                                }
+
+                                return;
+                            }
+                        }
+                    }
+                }
+
+                if (comp.isPointInside(x, adjustedY)) {
+                    switch (eventType) {
+                        case 'start':
+                            comp.pressed = true;
+                            if (comp.onPress) comp.onPress(x, adjustedY);
+                            break;
+
+                        case 'move':
+                            if (!comp.hovered) {
+                                comp.hovered = true;
+                                if (comp.onHover) comp.onHover();
+                            }
+                            if (comp.onMove) comp.onMove(x, adjustedY);
+                            break;
+
+                        case 'end':
+                            if (comp.pressed) {
+                                comp.pressed = false;
+
+                                if (comp instanceof Input || comp instanceof PasswordInput || comp instanceof InputTags || comp instanceof InputDatalist) {
+                                    for (let other of this.components) {
+                                        if (
+                                            (other instanceof Input ||
+                                                other instanceof PasswordInput ||
+                                                other instanceof InputTags ||
+                                                other instanceof InputDatalist) &&
+                                            other !== comp &&
+                                            other.focused
+                                        ) {
+                                            other.focused = false;
+                                            other.cursorVisible = false;
+                                            other.onBlur?.();
+                                        }
+                                    }
+
+                                    comp.focused = true;
+                                    comp.cursorVisible = true;
+                                    if (comp.onFocus) comp.onFocus();
+                                } else if (comp.onClick) {
+                                    comp.onClick();
+                                } else if (comp.onPress) {
+                                    comp.onPress(x, adjustedY);
+                                }
+                            }
+                            break;
+                    }
+
+                    return;
+                } else {
+                    comp.hovered = false;
+                }
+            }
+        }
+    }
+
+    getMaxScroll() {
+        if (!this._maxScrollDirty) return this._cachedMaxScroll;
+
+        let maxY = 0;
+        for (const comp of this.components) {
+            if (this.isFixedComponent(comp) || !comp.visible) continue;
+            const bottom = comp.y + comp.height;
+            if (bottom > maxY) maxY = bottom;
+        }
+
+        this._cachedMaxScroll = Math.max(0, maxY - this.height + 50);
+        this._maxScrollDirty = false;
+        return this._cachedMaxScroll;
+    }
+
+    /*getMaxScroll() {
+      let maxY = 0;
+      for (let comp of this.components) {
+        if (!this.isFixedComponent(comp)) {
+          maxY = Math.max(maxY, comp.y + comp.height);
         }
       }
-    
-      ctx.restore();
-    }
-  }
- 
-  startRenderLoop() {
-    const render = () => {
-      // 1️⃣ Scroll inertia
-      if (Math.abs(this.scrollVelocity) > 0.1 && !this.isDragging) {
-        this.scrollOffset += this.scrollVelocity;
-        this.scrollOffset = Math.max(Math.min(this.scrollOffset, 0), -this.getMaxScroll());
-        this.scrollVelocity *= this.scrollFriction;
-      } else {
-        this.scrollVelocity = 0;
-      }
+      return Math.max(0, maxY - this.height + 50);
+    }*/
 
-      // 2️⃣ Clear canvas
-      this.ctx.clearRect(0, 0, this.width, this.height);
+    handleResize() {
+        if (this.resizeTimeout) clearTimeout(this.resizeTimeout); // ✅ AJOUTER
 
-      // 3️⃣ Transition handling
-      if (this.transitionState.isTransitioning) {
-        this.updateTransition();
-      } else if (this.optimizationEnabled && this.dirtyComponents.size > 0) {
-        // Dirty components redraw
-        for (let comp of this.dirtyComponents) {
-          if (comp.visible) {
-            const isFixed = this.isFixedComponent(comp);
-            const y = isFixed ? comp.y : comp.y + this.scrollOffset;
+        this.resizeTimeout = setTimeout(() => { // ✅ AJOUTER
+            if (!this.useWebGL) {
+                this.width = window.innerWidth;
+                this.height = window.innerHeight;
+                this.setupCanvas();
 
-            this.ctx.clearRect(comp.x - 2, y - 2, comp.width + 4, comp.height + 4);
+                for (const comp of this.components) {
+                    if (comp._resize) {
+                        comp._resize(this.width, this.height);
+                    }
+                }
+                this._maxScrollDirty = true; // ✅ AJOUTER
+            }
+        }, 150); // ✅ AJOUTER (throttle 150ms)
+    }
 
-            this.ctx.save();
-            if (!isFixed) this.ctx.translate(0, this.scrollOffset);
-            comp.draw(this.ctx);
-            this.ctx.restore();
+    add(component) {
+        this.components.push(component);
+        component._mount();
+        this._maxScrollDirty = true; // ✅ AJOUTER CETTE LIGNE
+        return component;
+    }
 
-            // Overflow indicator style Flutter
-            const overflow = comp.getOverflow?.();
-            if (comp.markClean) comp.markClean();
-          }
+    remove(component) {
+        const index = this.components.indexOf(component);
+        if (index > -1) {
+            component._unmount();
+            this.components.splice(index, 1);
+            this._maxScrollDirty = true; // ✅ AJOUTER CETTE LIGNE
         }
-        this.dirtyComponents.clear();
-      } else {
-        // Full redraw
-        const scrollableComponents = [];
-        const fixedComponents = [];
+    }
 
-        for (let comp of this.components) {
-          if (this.isFixedComponent(comp)) fixedComponents.push(comp);
-          else scrollableComponents.push(comp);
+    markComponentDirty(component) {
+        if (this.optimizationEnabled) {
+            this.dirtyComponents.add(component);
         }
+    }
+
+    enableOptimization() {
+        this.optimizationEnabled = true;
+    }
+
+    /**
+     * Dessine un petit triangle rouge pour indiquer overflow (style Flutter)
+     */
+    drawOverflowIndicators() {
+        const ctx = this.ctx;
+
+        // Pour chaque composant
+        for (let comp of this.components) {
+            if (!comp.visible) continue;
+
+            // Position réelle à l'écran
+            const isFixed = this.isFixedComponent(comp);
+            const screenY = isFixed ? comp.y : comp.y + this.scrollOffset;
+            const screenX = comp.x;
+
+            // Vérifier si le composant TEXT a une largeur/hauteur incorrecte
+            let actualWidth = comp.width;
+            let actualHeight = comp.height;
+
+            // Si c'est un Text, vérifier la taille réelle du texte
+            if (comp instanceof Text && comp.text && ctx.measureText) {
+                try {
+                    // Sauvegarder le style actuel
+                    ctx.save();
+
+                    // Appliquer le style du texte
+                    if (comp.fontSize) {
+                        ctx.font = `${comp.fontSize}px ${comp.fontFamily || 'Arial'}`;
+                    }
+
+                    // Mesurer la taille réelle
+                    const metrics = ctx.measureText(comp.text);
+                    actualWidth = metrics.width + (comp.padding || 0) * 2;
+                    actualHeight = (comp.fontSize || 16) + (comp.padding || 0) * 2;
+
+                    ctx.restore();
+                } catch (e) {
+                    // En cas d'erreur, garder les dimensions par défaut
+                }
+            }
+
+            // Calculer les limites RÉELLES du composant
+            const compLeft = screenX;
+            const compRight = screenX + actualWidth;
+            const compTop = screenY;
+            const compBottom = screenY + actualHeight;
+
+            // Vérifier les débordements avec les dimensions RÉELLES
+            const overflow = {
+                left: compLeft < 0,
+                right: compRight > this.width,
+                top: compTop < 0,
+                bottom: compBottom > this.height
+            };
+
+            // Si aucun débordement, passer au suivant
+            if (!overflow.left && !overflow.right && !overflow.top && !overflow.bottom) {
+                continue;
+            }
+
+            // DEBUG: Afficher les infos du composant
+            if (this.debbug) {
+                console.table({
+                    type: comp.constructor?.name,
+                    x: comp.x,
+                    y: comp.y,
+                    declaredSize: `${comp.width}x${comp.height}`,
+                    actualSize: `${actualWidth}x${actualHeight}`,
+                    screenPos: `(${screenX}, ${screenY})`,
+                    overflow
+                });
+            }
+
+            // Dessiner les indicateurs
+            ctx.save();
+
+            // 1. Bordures rouges sur les parties qui débordent
+            ctx.strokeStyle = 'red';
+            ctx.lineWidth = 2;
+            ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
+
+            // Gauche
+            if (overflow.left) {
+                const overflowWidth = Math.min(actualWidth, -compLeft);
+                ctx.fillRect(compLeft, compTop, overflowWidth, actualHeight);
+                ctx.strokeRect(compLeft, compTop, overflowWidth, actualHeight);
+            }
+
+            // Droite
+            if (overflow.right) {
+                const overflowStart = Math.max(0, this.width - compLeft);
+                const overflowWidth = Math.min(actualWidth, compRight - this.width);
+                ctx.fillRect(this.width - overflowWidth, compTop, overflowWidth, actualHeight);
+                ctx.strokeRect(this.width - overflowWidth, compTop, overflowWidth, actualHeight);
+            }
+
+            // Haut
+            if (overflow.top) {
+                const overflowHeight = Math.min(actualHeight, -compTop);
+                ctx.fillRect(compLeft, compTop, actualWidth, overflowHeight);
+                ctx.strokeRect(compLeft, compTop, actualWidth, overflowHeight);
+            }
 
-        // Scrollable
-		this.ctx.save();
-		this.ctx.translate(0, this.scrollOffset);
-		for (let comp of scrollableComponents) {
-		  if (comp.visible) {
-			// ✅ Viewport culling : ne dessiner que ce qui est visible
-			const screenY = comp.y + this.scrollOffset;
-			const isInViewport = screenY + comp.height >= -100 && screenY <= this.height + 100;
-			
-			if (isInViewport) {
-			  comp.draw(this.ctx);
-			}
-		  }
-		}
-		this.ctx.restore();
-
-        // Fixed
-        for (let comp of fixedComponents) {
-          if (comp.visible) {
-            comp.draw(this.ctx);
-          }
+            // Bas
+            if (overflow.bottom) {
+                const overflowStart = Math.max(0, this.height - compTop);
+                const overflowHeight = Math.min(actualHeight, compBottom - this.height);
+                ctx.fillRect(compLeft, this.height - overflowHeight, actualWidth, overflowHeight);
+                ctx.strokeRect(compLeft, this.height - overflowHeight, actualWidth, overflowHeight);
+            }
+
+            // 2. Points rouges aux coins
+            ctx.fillStyle = 'red';
+            const markerSize = 6;
+
+            // Coin supérieur gauche
+            if (overflow.left || overflow.top) {
+                ctx.fillRect(compLeft, compTop, markerSize, markerSize);
+            }
+
+            // Coin supérieur droit
+            if (overflow.right || overflow.top) {
+                ctx.fillRect(compRight - markerSize, compTop, markerSize, markerSize);
+            }
+
+            // Coin inférieur gauche
+            if (overflow.left || overflow.bottom) {
+                ctx.fillRect(compLeft, compBottom - markerSize, markerSize, markerSize);
+            }
+
+            // Coin inférieur droit
+            if (overflow.right || overflow.bottom) {
+                ctx.fillRect(compRight - markerSize, compBottom - markerSize, markerSize, markerSize);
+            }
+
+            // 3. Texte d'information (optionnel)
+            if (this.debbug && comp.text) {
+                ctx.fillStyle = 'red';
+                ctx.font = '10px monospace';
+                ctx.textAlign = 'left';
+
+                const overflowText = [];
+                if (overflow.left) overflowText.push('←');
+                if (overflow.right) overflowText.push('→');
+                if (overflow.top) overflowText.push('↑');
+                if (overflow.bottom) overflowText.push('↓');
+
+                if (overflowText.length > 0) {
+                    ctx.fillText(
+                        `"${comp.text.substring(0, 10)}${comp.text.length > 10 ? '...' : ''}" ${overflowText.join('')}`,
+                        compLeft + 5,
+                        compTop - 5
+                    );
+                }
+            }
+
+            ctx.restore();
         }
-      }
+    }
 
-      // 4️⃣ FPS
-      this._frames++;
-      const now = performance.now();
-      if (now - this._lastFpsTime >= 1000) {
-        this.fps = this._frames;
-        this._frames = 0;
-        this._lastFpsTime = now;
-      }
+    startRenderLoop() {
+        const render = () => {
+            if (!this._splashFinished) {
+                requestAnimationFrame(render);
+                return;
+            }
+            // 1️⃣ Scroll inertia
+            if (Math.abs(this.scrollVelocity) > 0.1 && !this.isDragging) {
+                this.scrollOffset += this.scrollVelocity;
+                this.scrollOffset = Math.max(Math.min(this.scrollOffset, 0), -this.getMaxScroll());
+                this.scrollVelocity *= this.scrollFriction;
+            } else {
+                this.scrollVelocity = 0;
+            }
 
-      if (this.showFps) {
-        this.ctx.save();
-        this.ctx.fillStyle = 'lime';
-        this.ctx.font = '16px monospace';
-        this.ctx.fillText(`FPS: ${this.fps}`, 10, 20);
-        this.ctx.restore();
-      }
-	  
-	  if(this.debbug) {
-		  this.drawOverflowIndicators();
-	  }
-
-      requestAnimationFrame(render);
-    };
-
-    render();
-  }
-	
-  isFixedComponent(comp) {
-  	return FIXED_COMPONENT_TYPES.has(comp.constructor);
-  }
-  
-  showToast(message, duration = 3000) {
-    const toast = new Toast(this, {
-      text: message,
-      duration: duration,
-      x: this.width / 2,
-      y: this.height - 100
-    });
-    this.add(toast);
-    toast.show();
-  }
-}
+            // 2️⃣ Clear canvas
+            this.ctx.clearRect(0, 0, this.width, this.height);
+
+            // 3️⃣ Transition handling
+            if (this.transitionState.isTransitioning) {
+                this.updateTransition();
+            } else if (this.optimizationEnabled && this.dirtyComponents.size > 0) {
+                // Dirty components redraw
+                for (let comp of this.dirtyComponents) {
+                    if (comp.visible) {
+                        const isFixed = this.isFixedComponent(comp);
+                        const y = isFixed ? comp.y : comp.y + this.scrollOffset;
+
+                        this.ctx.clearRect(comp.x - 2, y - 2, comp.width + 4, comp.height + 4);
+
+                        this.ctx.save();
+                        if (!isFixed) this.ctx.translate(0, this.scrollOffset);
+                        comp.draw(this.ctx);
+                        this.ctx.restore();
+
+                        // Overflow indicator style Flutter
+                        const overflow = comp.getOverflow?.();
+                        if (comp.markClean) comp.markClean();
+                    }
+                }
+                this.dirtyComponents.clear();
+            } else {
+                // Full redraw
+                const scrollableComponents = [];
+                const fixedComponents = [];
+
+                for (let comp of this.components) {
+                    if (this.isFixedComponent(comp)) fixedComponents.push(comp);
+                    else scrollableComponents.push(comp);
+                }
 
-export default CanvasFramework;
+                // Scrollable
+                this.ctx.save();
+                this.ctx.translate(0, this.scrollOffset);
+                for (let comp of scrollableComponents) {
+                    if (comp.visible) {
+                        // ✅ Viewport culling : ne dessiner que ce qui est visible
+                        const screenY = comp.y + this.scrollOffset;
+                        const isInViewport = screenY + comp.height >= -100 && screenY <= this.height + 100;
+
+                        if (isInViewport) {
+                            comp.draw(this.ctx);
+                        }
+                    }
+                }
+                this.ctx.restore();
+
+                // Fixed
+                for (let comp of fixedComponents) {
+                    if (comp.visible) {
+                        comp.draw(this.ctx);
+                    }
+                }
+            }
+
+            // 4️⃣ FPS
+            this._frames++;
+            const now = performance.now();
+            if (now - this._lastFpsTime >= 1000) {
+                this.fps = this._frames;
+                this._frames = 0;
+                this._lastFpsTime = now;
+            }
+
+            if (this.showFps) {
+                this.ctx.save();
+                this.ctx.fillStyle = 'lime';
+                this.ctx.font = '16px monospace';
+                this.ctx.fillText(`FPS: ${this.fps}`, 10, 20);
+                this.ctx.restore();
+            }
+
+            if (this.debbug) {
+                this.drawOverflowIndicators();
+            }
+
+            // ✅ AJOUTER: Marquer le premier rendu
+            if (!this._firstRenderDone && this.components.length > 0) {
+                this._markFirstRender();
+            }
+
+            requestAnimationFrame(render);
+        };
+
+        render();
+    }
+
+    // ✅ AJOUTER: Afficher les métriques à l'écran
+    displayMetrics() {
+        const metrics = this.metrics;
+
+        console.table({
+            '⚙️ Initialisation Framework': `${metrics.initTime.toFixed(2)}ms`,
+            '🎨 Premier Rendu': `${metrics.firstRenderTime.toFixed(2)}ms`,
+            '🚀 Temps Total Startup': `${metrics.totalStartupTime.toFixed(2)}ms`,
+            '📊 FPS Actuel': this.fps
+        });
+    }
+
+    // ✅ AJOUTER: Obtenir les métriques
+    getMetrics() {
+        return {
+            ...this.metrics,
+            currentFPS: this.fps,
+            componentsCount: this.components.length
+        };
+    }
 
+    isFixedComponent(comp) {
+        return FIXED_COMPONENT_TYPES.has(comp.constructor);
+    }
 
+    showToast(message, duration = 3000) {
+        const toast = new Toast(this, {
+            text: message,
+            duration: duration,
+            x: this.width / 2,
+            y: this.height - 100
+        });
+        this.add(toast);
+        toast.show();
+    }
+}
 
+export default CanvasFramework;