canvasframework 0.4.5 → 0.4.7

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';
@@ -105,27 +104,8 @@ import FeatureFlags from '../manager/FeatureFlags.js';
 // WebGL Adapter
 import WebGLCanvasAdapter from './WebGLCanvasAdapter.js';
 import ui, { createRef } from './UIBuilder.js';
+import ThemeManager from './ThemeManager.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'
-};
 
 const FIXED_COMPONENT_TYPES = new Set([
   AppBar,
@@ -179,9 +159,7 @@ class CanvasFramework {
     
     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'
@@ -197,7 +175,6 @@ class CanvasFramework {
     } 
 
 	this.components = [];
-	this.theme = lightTheme; // thème par défaut
 	// ✅ AJOUTER ICI :
 	this._cachedMaxScroll = 0;
 	this._maxScrollDirty = true;
@@ -287,30 +264,18 @@ class CanvasFramework {
         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();
   }
   
-  /**
-   * 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)
    */
@@ -339,24 +304,34 @@ class CanvasFramework {
    * @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();
+  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();
   }
   
   /**
@@ -687,6 +662,9 @@ class CanvasFramework {
       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'
     };
     
@@ -783,28 +761,55 @@ class CanvasFramework {
 
     const { route, params, query, pathname } = match;
 
-    // Hook beforeLeave de la route actuelle
+    // ===== 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) return;
+      if (canLeave === false) {
+        console.log('Navigation cancelled by beforeLeave hook');
+        return;
+      }
+    }
+  
+    // ✅ NOUVEAU : Hook onLeave (alias plus intuitif de beforeLeave, mais ne bloque pas)
+    if (currentRouteData?.onLeave) {
+      await currentRouteData.onLeave(this.currentParams, this.currentQuery);
     }
 
-    // Hook beforeEnter de la nouvelle route
+    // ===== 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) return;
+      if (canEnter === false) {
+        console.log('Navigation cancelled by beforeEnter hook');
+        return;
+      }
+    }
+  
+    // ✅ NOUVEAU : Hook onEnter (appelé juste avant de créer les composants)
+    if (route.onEnter) {
+      await route.onEnter(params, query);
     }
 
-    // Sauvegarder l'ancienne route pour l'animation
+    // ===== 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
+    // ===== METTRE À JOUR L'ÉTAT =====
+  
     this.currentRoute = pathname;
     this.currentParams = params;
     this.currentQuery = query;
 
-    // Gérer l'historique
+    // ===== GÉRER L'HISTORIQUE =====
+    
     if (!replace) {
       this.historyIndex++;
       this.history = this.history.slice(0, this.historyIndex);
@@ -819,28 +824,48 @@ class CanvasFramework {
     } else {
       this.history[this.historyIndex] = { path, params, query, state };
       window.history.replaceState(
-        { route: path, params, query, state },
+      { route: path, params, query, state },
         '',
         path
       );
     }
 
-    // Créer les nouveaux composants
+    // ===== CRÉER LES NOUVEAUX COMPOSANTS =====
+  
     this.components = [];
     if (typeof route.component === 'function') {
       route.component(this, params, query);
     }
 
-    // Lancer l'animation de transition
+    // ===== LANCER L'ANIMATION DE TRANSITION =====
+  
     if (animate && !this.transitionState.isTransitioning) {
       const transitionType = transition || route.transition || 'slide';
       this.startTransition(oldComponents, this.components, transitionType, direction);
     }
 
-    // Hook afterEnter
+    // ===== 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;
   }
 
   /**

package/core/ThemeManager.js

@@ -0,0 +1,358 @@
+/**
+ * Gestionnaire de thèmes indépendant et fiable
+ * Gère automatiquement le light/dark mode avec persistance
+ */
+class ThemeManager {
+  constructor(framework, options = {}) {
+    this.framework = framework;
+    
+    // Thèmes par défaut (peuvent être overridés)
+    this.themes = {
+      light: options.lightTheme || {
+        // Couleurs de base
+        background: '#FFFFFF',
+        surface: '#F5F5F5',
+        surfaceVariant: '#E7E0EC',
+        
+        // Texte
+        text: '#1C1B1F',
+        textSecondary: '#49454F',
+        textDisabled: '#79747E',
+        
+        // Primaire
+        primary: '#6750A4',
+        onPrimary: '#FFFFFF',
+        primaryContainer: '#EADDFF',
+        onPrimaryContainer: '#21005D',
+        
+        // Secondaire
+        secondary: '#625B71',
+        onSecondary: '#FFFFFF',
+        secondaryContainer: '#E8DEF8',
+        onSecondaryContainer: '#1D192B',
+        
+        // Tertiaire
+        tertiary: '#7D5260',
+        onTertiary: '#FFFFFF',
+        tertiaryContainer: '#FFD8E4',
+        onTertiaryContainer: '#31111D',
+        
+        // Erreur
+        error: '#B3261E',
+        onError: '#FFFFFF',
+        errorContainer: '#F9DEDC',
+        onErrorContainer: '#410E0B',
+        
+        // Bordures et dividers
+        border: '#CAC4D0',
+        divider: '#E0E0E0',
+        outline: '#79747E',
+        outlineVariant: '#CAC4D0',
+        
+        // États
+        hover: 'rgba(103, 80, 164, 0.08)',
+        pressed: 'rgba(103, 80, 164, 0.12)',
+        focus: 'rgba(103, 80, 164, 0.12)',
+        disabled: 'rgba(28, 27, 31, 0.12)',
+        
+        // Ombres
+        shadow: 'rgba(0, 0, 0, 0.2)',
+        elevation1: 'rgba(0, 0, 0, 0.05)',
+        elevation2: 'rgba(0, 0, 0, 0.08)',
+        elevation3: 'rgba(0, 0, 0, 0.12)',
+      },
+      
+      dark: options.darkTheme || {
+        // Couleurs de base
+        background: '#1C1B1F',
+        surface: '#2B2930',
+        surfaceVariant: '#49454F',
+        
+        // Texte
+        text: '#E6E1E5',
+        textSecondary: '#CAC4D0',
+        textDisabled: '#938F99',
+        
+        // Primaire
+        primary: '#D0BCFF',
+        onPrimary: '#381E72',
+        primaryContainer: '#4F378B',
+        onPrimaryContainer: '#EADDFF',
+        
+        // Secondaire
+        secondary: '#CCC2DC',
+        onSecondary: '#332D41',
+        secondaryContainer: '#4A4458',
+        onSecondaryContainer: '#E8DEF8',
+        
+        // Tertiaire
+        tertiary: '#EFB8C8',
+        onTertiary: '#492532',
+        tertiaryContainer: '#633B48',
+        onTertiaryContainer: '#FFD8E4',
+        
+        // Erreur
+        error: '#F2B8B5',
+        onError: '#601410',
+        errorContainer: '#8C1D18',
+        onErrorContainer: '#F9DEDC',
+        
+        // Bordures et dividers
+        border: '#938F99',
+        divider: '#3D3D3D',
+        outline: '#938F99',
+        outlineVariant: '#49454F',
+        
+        // États
+        hover: 'rgba(208, 188, 255, 0.08)',
+        pressed: 'rgba(208, 188, 255, 0.12)',
+        focus: 'rgba(208, 188, 255, 0.12)',
+        disabled: 'rgba(230, 225, 229, 0.12)',
+        
+        // Ombres
+        shadow: 'rgba(0, 0, 0, 0.8)',
+        elevation1: 'rgba(0, 0, 0, 0.3)',
+        elevation2: 'rgba(0, 0, 0, 0.4)',
+        elevation3: 'rgba(0, 0, 0, 0.5)',
+      }
+    };
+    
+    // État actuel
+    this.currentMode = null; // 'light', 'dark', ou null (system)
+    this.currentTheme = null;
+    
+    // Callbacks
+    this.listeners = [];
+    
+    // Storage key
+    this.storageKey = options.storageKey || 'app-theme-mode';
+    
+    // Initialisation
+    this.init();
+  }
+  
+  /**
+   * Initialise le ThemeManager
+   */
+  init() {
+    // 1. Charger la préférence sauvegardée
+    const savedMode = this.loadPreference();
+    
+    // 2. Écouter les changements système
+    this.setupSystemListener();
+    
+    // 3. Appliquer le thème
+    if (savedMode) {
+      this.setMode(savedMode, false); // false = ne pas re-sauvegarder
+    } else {
+      this.setMode('system', false);
+    }
+  }
+  
+  /**
+   * Charge la préférence depuis le localStorage
+   */
+  loadPreference() {
+    try {
+      const saved = localStorage.getItem(this.storageKey);
+      if (saved && ['light', 'dark', 'system'].includes(saved)) {
+        return saved;
+      }
+    } catch (e) {
+      console.warn('Impossible de charger les préférences de thème:', e);
+    }
+    return null;
+  }
+  
+  /**
+   * Sauvegarde la préférence dans le localStorage
+   */
+  savePreference(mode) {
+    try {
+      localStorage.setItem(this.storageKey, mode);
+    } catch (e) {
+      console.warn('Impossible de sauvegarder les préférences de thème:', e);
+    }
+  }
+  
+  /**
+   * Configure l'écoute des changements système
+   */
+  setupSystemListener() {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    const handleChange = (e) => {
+      // Ne réagir que si on est en mode 'system'
+      if (this.currentMode === 'system') {
+        this.applySystemTheme();
+      }
+    };
+    
+    // Méthode moderne
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+    } else {
+      // Fallback pour anciens navigateurs
+      mediaQuery.addListener(handleChange);
+    }
+    
+    // Sauvegarder pour cleanup
+    this.systemMediaQuery = mediaQuery;
+    this.systemChangeHandler = handleChange;
+  }
+  
+  /**
+   * Applique le thème système
+   */
+  applySystemTheme() {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = prefersDark ? this.themes.dark : this.themes.light;
+    this.applyTheme(theme);
+  }
+  
+  /**
+   * Définit le mode de thème
+   * @param {'light'|'dark'|'system'} mode
+   * @param {boolean} save - Sauvegarder la préférence
+   */
+  setMode(mode, save = true) {
+    if (!['light', 'dark', 'system'].includes(mode)) {
+      console.warn(`Mode invalide: ${mode}. Utilisez 'light', 'dark' ou 'system'.`);
+      return;
+    }
+    
+    this.currentMode = mode;
+    
+    // Sauvegarder si demandé
+    if (save) {
+      this.savePreference(mode);
+    }
+    
+    // Appliquer le thème correspondant
+    if (mode === 'system') {
+      this.applySystemTheme();
+    } else {
+      const theme = this.themes[mode];
+      this.applyTheme(theme);
+    }
+  }
+  
+  /**
+   * Applique un thème au framework
+   */
+  applyTheme(theme) {
+    this.currentTheme = theme;
+    
+    // Mettre à jour le framework
+    if (this.framework) {
+      this.framework.theme = theme;
+      
+      // Forcer le rendu de tous les composants
+      if (this.framework.components) {
+        this.framework.components.forEach(comp => {
+          if (comp.markDirty) {
+            comp.markDirty();
+          }
+        });
+      }
+    }
+    
+    // Notifier les listeners
+    this.notifyListeners(theme);
+  }
+  
+  /**
+   * Obtient le mode actuel
+   */
+  getMode() {
+    return this.currentMode;
+  }
+  
+  /**
+   * Obtient le thème actuel
+   */
+  getTheme() {
+    return this.currentTheme;
+  }
+  
+  /**
+   * Obtient une couleur spécifique
+   */
+  getColor(colorName) {
+    return this.currentTheme?.[colorName] || '#000000';
+  }
+  
+  /**
+   * Bascule entre light et dark
+   */
+  toggle() {
+    if (this.currentMode === 'system') {
+      // Si en mode system, basculer vers le mode opposé
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      this.setMode(isDark ? 'light' : 'dark');
+    } else {
+      // Basculer entre light et dark
+      this.setMode(this.currentMode === 'light' ? 'dark' : 'light');
+    }
+  }
+  
+  /**
+   * Ajoute un listener de changement de thème
+   */
+  addListener(callback) {
+    if (typeof callback === 'function') {
+      this.listeners.push(callback);
+      // Appeler immédiatement avec le thème actuel
+      callback(this.currentTheme);
+    }
+  }
+  
+  /**
+   * Retire un listener
+   */
+  removeListener(callback) {
+    const index = this.listeners.indexOf(callback);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+  
+  /**
+   * Notifie tous les listeners
+   */
+  notifyListeners(theme) {
+    this.listeners.forEach(callback => {
+      try {
+        callback(theme);
+      } catch (e) {
+        console.error('Erreur dans un listener de thème:', e);
+      }
+    });
+  }
+  
+  /**
+   * Définit un thème personnalisé
+   */
+  setCustomTheme(name, theme) {
+    this.themes[name] = theme;
+  }
+  
+  /**
+   * Nettoie les ressources
+   */
+  destroy() {
+    // Retirer l'écoute système
+    if (this.systemMediaQuery && this.systemChangeHandler) {
+      if (this.systemMediaQuery.removeEventListener) {
+        this.systemMediaQuery.removeEventListener('change', this.systemChangeHandler);
+      } else {
+        this.systemMediaQuery.removeListener(this.systemChangeHandler);
+      }
+    }
+    
+    // Vider les listeners
+    this.listeners = [];
+  }
+}
+
+export default ThemeManager;

package/index.js

@@ -93,7 +93,6 @@ export { default as FirebaseRealtimeDB } from './utils/FirebaseRealtimeDB.js';
 export { default as PayPalPayment } from './utils/PayPalPayment.js';
 export { default as StripePayment } from './utils/StripePayment.js';
 
-
 // Features
 export { default as PullToRefresh } from './features/PullToRefresh.js';
 export { default as Skeleton } from './features/Skeleton.js';
@@ -116,7 +115,7 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.4.4';
+export const VERSION = '0.4.7';
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",