canvasframework 0.3.6

package/features/Stack.js

@@ -0,0 +1,21 @@
+import LayoutComponent from './LayoutComponent.js';
+
+class Stack extends LayoutComponent {
+  constructor(framework, options = {}) {
+    super(framework, options);
+  }
+
+  layoutRecursive() {
+    for (const child of this.children) {
+      child.layoutRecursive ? child.layoutRecursive() : child.layout?.();
+    }
+  }
+
+  draw(ctx) {
+    for (const child of this.children) {
+      child.draw(ctx);
+    }
+  }
+}
+
+export default Stack;

package/index.js

@@ -0,0 +1,101 @@
+// framework/index.js
+
+// Core
+export { default as CanvasFramework } from './core/CanvasFramework.js';
+export { default as Component } from './core/Component.js';
+
+// Components
+export { default as Button } from './components/Button.js';
+export { default as SegmentedControl } from './components/SegmentedControl.js';
+export { default as Input } from './components/Input.js';
+export { default as Slider } from './components/Slider.js';
+export { default as Text } from './components/Text.js';
+export { default as View } from './components/View.js';
+export { default as Card } from './components/Card.js';
+export { default as FAB } from './components/FAB.js';
+export { default as CircularProgress } from './components/CircularProgress.js';
+export { default as ImageComponent } from './components/ImageComponent.js';
+export { default as DatePicker } from './components/DatePicker.js';
+export { default as IOSDatePickerWheel } from './components/IOSDatePickerWheel.js';
+export { default as AndroidDatePickerDialog } from './components/AndroidDatePickerDialog.js';
+export { default as Avatar } from './components/Avatar.js';
+export { default as Snackbar } from './components/Snackbar.js';
+export { default as BottomNavigationBar } from './components/BottomNavigationBar.js';
+export { default as Video } from './components/Video.js';
+export { default as Modal } from './components/Modal.js';
+export { default as Drawer } from './components/Drawer.js';
+export { default as AppBar } from './components/AppBar.js';
+export { default as Chip } from './components/Chip.js';
+export { default as Stepper } from './components/Stepper.js';
+export { default as Accordion } from './components/Accordion.js';
+export { default as Tabs } from './components/Tabs.js';
+export { default as Switch } from './components/Switch.js';
+export { default as ListItem } from './components/ListItem.js';
+export { default as SwipeableListItem } from './components/SwipeableListItem.js';
+export { default as List } from './components/List.js';
+export { default as VirtualList } from './components/VirtualList.js';
+export { default as BottomSheet } from './components/BottomSheet.js';
+export { default as ProgressBar } from './components/ProgressBar.js';
+export { default as RadioButton } from './components/RadioButton.js';
+export { default as Dialog } from './components/Dialog.js';
+export { default as ContextMenu } from './components/ContextMenu.js';
+export { default as Checkbox } from './components/Checkbox.js';
+export { default as Toast } from './components/Toast.js';
+export { default as NumberInput } from './components/NumberInput.js';
+export { default as TextField } from './components/TextField.js';
+export { default as SelectDialog } from './components/SelectDialog.js';
+export { default as Select } from './components/Select.js';
+export { default as MultiSelectDialog } from './components/MultiSelectDialog.js';
+export { default as Divider } from './components/Divider.js';
+export { default as FileUpload } from './components/FileUpload.js';
+export { default as Table } from './components/Table.js';
+export { default as TreeView } from './components/TreeView.js';
+export { default as SearchInput } from './components/SearchInput.js';
+export { default as ImageCarousel } from './components/ImageCarousel.js';
+
+// Utils
+export { default as SafeArea } from './utils/SafeArea.js';
+export { default as StateManager } from './utils/StateManager.js';
+export { default as I18n } from './utils/I18n.js';
+export { default as SecureStorage } from './utils/SecureStorage.js';
+export { default as FormValidator } from './utils/FormValidator.js';
+export { default as DataStore } from './utils/DataStore.js';
+export { default as EventBus } from './utils/EventBus.js';
+export { default as IndexedDBManager } from './utils/IndexedDBManager.js';
+export { default as QueryBuilder } from './utils/QueryBuilder.js';
+export { default as OfflineSyncManager } from './utils/OfflineSyncManager.js';
+export { default as FetchClient } from './utils/FetchClient.js';
+export { default as GeoLocationService } from './utils/GeoLocationService.js';
+export { default as WebSocketClient } from './utils/WebSocketClient.js';
+export { default as AnimationEngine } from './utils/AnimationEngine.js';
+
+// Features
+export { default as PullToRefresh } from './features/PullToRefresh.js';
+export { default as Skeleton } from './features/Skeleton.js';
+export { default as SignaturePad } from './features/SignaturePad.js';
+export { default as OpenStreetMap } from './features/OpenStreetMap.js';
+export { default as LayoutComponent } from './features/LayoutComponent.js';
+export { default as Grid } from './features/Grid.js';
+export { default as Row } from './features/Row.js';
+export { default as Column } from './features/Column.js';
+export { default as Positioned } from './features/Positioned.js';
+export { default as Stack } from './features/Stack.js';
+
+// Manager
+export { default as ErrorHandler } from './manager/ErrorHandler.js';
+export { default as PerformanceMonitor } from './manager/PerformanceMonitor.js';
+export { default as AccessibilityManager } from './manager/AccessibilityManager.js';
+export { default as MemoryManager } from './manager/MemoryManager.js';
+export { default as SecurityManager } from './manager/SecurityManager.js';
+export { default as FeatureFlags } from './manager/FeatureFlags.js';
+
+// Version du framework
+
+export const VERSION = '0.3.6';
+
+
+
+
+
+
+

package/manager/AccessibilityManager.js

@@ -0,0 +1,107 @@
+// ==========================================
+// 3. ACCESSIBILITY (A11Y)
+// ==========================================
+
+class AccessibilityManager {
+  constructor(framework) {
+    this.framework = framework;
+    this.focusedComponent = null;
+    this.ariaLiveRegion = null;
+    this.setupAccessibility();
+  }
+
+  setupAccessibility() {
+    // Créer une région ARIA live pour les annonces
+    this.ariaLiveRegion = document.createElement('div');
+    this.ariaLiveRegion.setAttribute('role', 'status');
+    this.ariaLiveRegion.setAttribute('aria-live', 'polite');
+    this.ariaLiveRegion.setAttribute('aria-atomic', 'true');
+    this.ariaLiveRegion.style.position = 'absolute';
+    this.ariaLiveRegion.style.left = '-10000px';
+    this.ariaLiveRegion.style.width = '1px';
+    this.ariaLiveRegion.style.height = '1px';
+    this.ariaLiveRegion.style.overflow = 'hidden';
+    document.body.appendChild(this.ariaLiveRegion);
+
+    // Rendre le canvas accessible au clavier
+    this.framework.canvas.setAttribute('tabindex', '0');
+    this.framework.canvas.setAttribute('role', 'application');
+    this.framework.canvas.setAttribute('aria-label', 'Interactive canvas application');
+
+    // Navigation au clavier
+    this.framework.canvas.addEventListener('keydown', this.handleKeyDown.bind(this));
+  }
+
+  announce(message) {
+    this.ariaLiveRegion.textContent = message;
+    
+    // Clear après 100ms pour permettre de ré-annoncer le même message
+    setTimeout(() => {
+      this.ariaLiveRegion.textContent = '';
+    }, 100);
+  }
+
+  handleKeyDown(e) {
+    const components = this.framework.components.filter(c => c.visible);
+    const currentIndex = components.indexOf(this.focusedComponent);
+
+    switch (e.key) {
+      case 'Tab':
+        e.preventDefault();
+        const nextIndex = e.shiftKey 
+          ? (currentIndex - 1 + components.length) % components.length
+          : (currentIndex + 1) % components.length;
+        
+        this.focusComponent(components[nextIndex]);
+        break;
+
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (this.focusedComponent && this.focusedComponent.onClick) {
+          this.focusedComponent.onClick();
+          this.announce(`Activated: ${this.getComponentLabel(this.focusedComponent)}`);
+        }
+        break;
+
+      case 'Escape':
+        e.preventDefault();
+        this.blur();
+        break;
+    }
+  }
+
+  focusComponent(component) {
+    if (this.focusedComponent) {
+      this.focusedComponent.focused = false;
+    }
+
+    this.focusedComponent = component;
+    component.focused = true;
+
+    // Annoncer le composant focalisé
+    this.announce(`Focused: ${this.getComponentLabel(component)}`);
+  }
+
+  blur() {
+    if (this.focusedComponent) {
+      this.focusedComponent.focused = false;
+      this.focusedComponent = null;
+    }
+  }
+
+  getComponentLabel(component) {
+    return component.text || 
+           component.label || 
+           component.ariaLabel || 
+           component.constructor.name;
+  }
+
+  destroy() {
+    if (this.ariaLiveRegion) {
+      this.ariaLiveRegion.remove();
+    }
+  }
+}
+
+export default AccessibilityManager;

package/manager/ErrorHandler.js

@@ -0,0 +1,59 @@
+// ==========================================
+// 1. ERROR HANDLING & LOGGING
+// ==========================================
+
+class ErrorHandler {
+  constructor(options = {}) {
+    this.sentryDsn = options.sentryDsn;
+    this.environment = options.environment || 'production';
+    this.logLevel = options.logLevel || 'error';
+    this.errors = [];
+  }
+
+  captureError(error, context = {}) {
+    const errorLog = {
+      message: error.message,
+      stack: error.stack,
+      context,
+      timestamp: Date.now(),
+      userAgent: navigator.userAgent,
+      url: window.location.href
+    };
+
+    this.errors.push(errorLog);
+    
+    // Log to console in dev
+    if (this.environment === 'development') {
+      console.error('🚨 Error captured:', errorLog);
+    }
+
+    // Send to Sentry in production
+    if (this.sentryDsn && this.environment === 'production') {
+      this.sendToSentry(errorLog);
+    }
+
+    return errorLog;
+  }
+
+  sendToSentry(errorLog) {
+    // Integration avec Sentry
+    if (window.Sentry) {
+      window.Sentry.captureException(new Error(errorLog.message), {
+        extra: errorLog.context
+      });
+    }
+  }
+
+  wrap(fn, context = '') {
+    return (...args) => {
+      try {
+        return fn(...args);
+      } catch (error) {
+        this.captureError(error, { context, args });
+        throw error;
+      }
+    };
+  }
+}
+
+export default ErrorHandler;

package/manager/FeatureFlags.js

@@ -0,0 +1,60 @@
+// ==========================================
+// 6. FEATURE FLAGS & AB TESTING
+// ==========================================
+
+class FeatureFlags {
+  constructor(config = {}) {
+    this.flags = config.flags || {};
+    this.userId = config.userId;
+    this.experiments = {};
+  }
+
+  isEnabled(flagName) {
+    const flag = this.flags[flagName];
+    
+    if (typeof flag === 'boolean') {
+      return flag;
+    }
+
+    if (typeof flag === 'object') {
+      // Percentage rollout
+      if (flag.percentage && this.userId) {
+        const hash = this.hashUserId(this.userId);
+        return hash < flag.percentage;
+      }
+
+      // A/B test
+      if (flag.variants) {
+        return this.getVariant(flagName, flag.variants);
+      }
+    }
+
+    return false;
+  }
+
+  getVariant(experimentName, variants) {
+    if (!this.userId) return variants[0];
+
+    const hash = this.hashUserId(this.userId + experimentName);
+    const variantIndex = hash % variants.length;
+    
+    this.experiments[experimentName] = variants[variantIndex];
+    return variants[variantIndex];
+  }
+
+  hashUserId(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = ((hash << 5) - hash) + str.charCodeAt(i);
+      hash = hash & hash;
+    }
+    return Math.abs(hash) % 100;
+  }
+
+  trackExperiment(experimentName) {
+    // Envoyer à analytics
+    console.log('Experiment:', experimentName, this.experiments[experimentName]);
+  }
+}
+
+export default FeatureFlags;

package/manager/MemoryManager.js

@@ -0,0 +1,107 @@
+// ==========================================
+// 4. MEMORY MANAGEMENT
+// ==========================================
+
+class MemoryManager {
+  constructor(framework) {
+    this.framework = framework;
+    this.imageCache = new Map();
+    this.maxCacheSize = 50 * 1024 * 1024; // 50MB
+    this.currentCacheSize = 0;
+    this.componentRegistry = new WeakMap();
+  }
+
+  cacheImage(url, image) {
+    const size = this.estimateImageSize(image);
+    
+    // Éviction si dépassement
+    if (this.currentCacheSize + size > this.maxCacheSize) {
+      this.evictOldest();
+    }
+
+    this.imageCache.set(url, {
+      image,
+      size,
+      lastAccessed: Date.now(),
+      accessCount: 0
+    });
+
+    this.currentCacheSize += size;
+  }
+
+  getImage(url) {
+    const cached = this.imageCache.get(url);
+    if (cached) {
+      cached.lastAccessed = Date.now();
+      cached.accessCount++;
+      return cached.image;
+    }
+    return null;
+  }
+
+  evictOldest() {
+    let oldest = null;
+    let oldestTime = Infinity;
+
+    for (let [url, data] of this.imageCache) {
+      if (data.lastAccessed < oldestTime) {
+        oldestTime = data.lastAccessed;
+        oldest = url;
+      }
+    }
+
+    if (oldest) {
+      const data = this.imageCache.get(oldest);
+      this.currentCacheSize -= data.size;
+      this.imageCache.delete(oldest);
+    }
+  }
+
+  estimateImageSize(image) {
+    // Estimation approximative
+    return image.width * image.height * 4; // 4 bytes per pixel (RGBA)
+  }
+
+  registerComponent(component) {
+    this.componentRegistry.set(component, {
+      created: Date.now(),
+      listeners: []
+    });
+  }
+
+  unregisterComponent(component) {
+    const data = this.componentRegistry.get(component);
+    if (data) {
+      // Nettoyer tous les event listeners
+      data.listeners.forEach(({ element, event, handler }) => {
+        element.removeEventListener(event, handler);
+      });
+    }
+    this.componentRegistry.delete(component);
+  }
+
+  trackListener(component, element, event, handler) {
+    const data = this.componentRegistry.get(component);
+    if (data) {
+      data.listeners.push({ element, event, handler });
+    }
+  }
+
+  clearAll() {
+    this.imageCache.clear();
+    this.currentCacheSize = 0;
+  }
+
+  getMemoryReport() {
+    return {
+      imageCacheSize: `${(this.currentCacheSize / 1024 / 1024).toFixed(2)} MB`,
+      imageCacheCount: this.imageCache.size,
+      componentCount: this.framework.components.length,
+      heapSize: performance.memory 
+        ? `${(performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)} MB`
+        : 'N/A'
+    };
+  }
+}
+
+export default MemoryManager;

package/manager/PerformanceMonitor.js

@@ -0,0 +1,84 @@
+// ==========================================
+// 2. PERFORMANCE MONITORING
+// ==========================================
+
+class PerformanceMonitor {
+  constructor() {
+    this.metrics = {
+      fps: 60,
+      frameTime: 0,
+      memoryUsage: 0,
+      renderTime: 0,
+      componentCount: 0
+    };
+    
+    this.fpsHistory = [];
+    this.frameCount = 0;
+    this.lastTime = performance.now();
+    this.isMonitoring = false;
+  }
+
+  startMonitoring() {
+    this.isMonitoring = true;
+    this.updateMetrics();
+  }
+
+  stopMonitoring() {
+    this.isMonitoring = false;
+  }
+
+  updateMetrics() {
+    if (!this.isMonitoring) return;
+
+    const now = performance.now();
+    const deltaTime = now - this.lastTime;
+    
+    // Calculer FPS
+    this.frameCount++;
+    if (deltaTime >= 1000) {
+      this.metrics.fps = Math.round((this.frameCount * 1000) / deltaTime);
+      this.fpsHistory.push(this.metrics.fps);
+      
+      // Garder seulement les 60 dernières secondes
+      if (this.fpsHistory.length > 60) {
+        this.fpsHistory.shift();
+      }
+      
+      this.frameCount = 0;
+      this.lastTime = now;
+      
+      // Alerter si FPS < 30
+      if (this.metrics.fps < 30) {
+        console.warn('⚠️ Low FPS detected:', this.metrics.fps);
+      }
+    }
+
+    // Mémoire (si disponible)
+    if (performance.memory) {
+      this.metrics.memoryUsage = Math.round(
+        performance.memory.usedJSHeapSize / 1048576
+      ); // MB
+    }
+
+    requestAnimationFrame(() => this.updateMetrics());
+  }
+
+  measureRender(fn) {
+    const start = performance.now();
+    fn();
+    const end = performance.now();
+    this.metrics.renderTime = end - start;
+    return this.metrics.renderTime;
+  }
+
+  getReport() {
+    return {
+      current: this.metrics,
+      averageFPS: this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length,
+      minFPS: Math.min(...this.fpsHistory),
+      maxFPS: Math.max(...this.fpsHistory)
+    };
+  }
+}
+
+export default PerformanceMonitor;

package/manager/SecurityManager.js

@@ -0,0 +1,54 @@
+// ==========================================
+// 5. SECURITY
+// ==========================================
+
+class SecurityManager {
+  static sanitizeInput(input) {
+    if (typeof input !== 'string') return input;
+    
+    // Échapper les caractères HTML dangereux
+    return input
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#x27;')
+      .replace(/\//g, '&#x2F;');
+  }
+
+  static validateUrl(url) {
+    try {
+      const parsed = new URL(url);
+      // Autoriser seulement http(s)
+      if (!['http:', 'https:'].includes(parsed.protocol)) {
+        throw new Error('Invalid protocol');
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  static rateLimit(fn, limit = 100, window = 1000) {
+    const calls = [];
+    
+    return function(...args) {
+      const now = Date.now();
+      
+      // Nettoyer les appels trop anciens
+      while (calls.length && calls[0] < now - window) {
+        calls.shift();
+      }
+
+      if (calls.length >= limit) {
+        console.warn('⚠️ Rate limit exceeded');
+        return null;
+      }
+
+      calls.push(now);
+      return fn.apply(this, args);
+    };
+  }
+}
+
+export default SecurityManager;

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "canvasframework",
+  "version": "0.3.6",
+  "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
+  "type": "module",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "components",
+    "core",
+    "features",
+    "manager",
+    "layout",
+    "utils"
+  ],
+  "keywords": [
+    "canvas",
+    "ui",
+    "framework",
+    "material",
+    "cupertino",
+    "mobile"
+  ],
+  "license": "MIT"
+}