canvasframework 0.3.17 → 0.3.19

package/components/Banner.js

@@ -0,0 +1,342 @@
+// components/Banner.js
+import Component from '../core/Component.js';
+
+export default class Banner extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+
+    this.text = options.text || '';
+    this.type = options.type || 'info';
+    this.actions = options.actions || [];
+    this.dismissible = options.dismissible === true;
+
+    this.platform = framework.platform || 'material';
+
+    this.width = options.width || framework.width || window.innerWidth;
+    this.height = options.height || 64;
+    this.x = options.x || 0;
+    this.y = options.y || 0;
+
+    this.visible = options.visible !== false;
+    this.progress = this.visible ? 1 : 0;
+    this.animSpeed = 0.18;
+
+    this._lastUpdate = performance.now();
+    this._colors = this._resolveColors();
+
+    // Bounds calculées à chaque frame
+    this._actionBounds = [];
+    this._dismissBounds = null;
+    
+    // Pour indiquer qu'on gère nos propres clics
+    this.selfManagedClicks = true;
+
+    // Écouter les événements directement sur le canvas
+    this._setupEventListeners();
+
+    // Ref si fourni
+    if (options.ref) options.ref.current = this;
+  }
+
+  /* ===================== Setup ===================== */
+  _setupEventListeners() {
+    // Stocker les références pour pouvoir les retirer plus tard
+    this._boundHandleClick = this._handleClick.bind(this);
+    
+    // Écouter les événements sur le canvas parent
+    if (this.framework && this.framework.canvas) {
+      this.framework.canvas.addEventListener('click', this._boundHandleClick);
+      this.framework.canvas.addEventListener('touchend', this._boundHandleClick);
+    }
+  }
+
+  _removeEventListeners() {
+    if (this.framework && this.framework.canvas && this._boundHandleClick) {
+      this.framework.canvas.removeEventListener('click', this._boundHandleClick);
+      this.framework.canvas.removeEventListener('touchend', this._boundHandleClick);
+    }
+  }
+
+  /* ===================== Lifecycle ===================== */
+  onMount() {
+    this._setupEventListeners();
+  }
+
+  onUnmount() {
+    this._removeEventListeners();
+  }
+
+  /* ===================== Colors ===================== */
+  _resolveColors() {
+    if (this.platform === 'cupertino') {
+      return {
+        bg: 'rgba(250,250,250,0.95)',
+        fg: '#000',
+        accent: '#007AFF',
+        divider: 'rgba(60,60,67,0.15)'
+      };
+    }
+
+    // Material v3
+    const map = {
+      info: '#E8F0FE',
+      success: '#E6F4EA',
+      warning: '#FEF7E0',
+      error: '#FCE8E6'
+    };
+
+    return {
+      bg: map[this.type] || map.info,
+      fg: '#1F1F1F',
+      accent: '#1A73E8'
+    };
+  }
+
+  /* ===================== Show/Hide ===================== */
+  show() { 
+    this.visible = true; 
+    this.markDirty(); 
+  }
+  
+  hide() { 
+    this.visible = false; 
+    this.markDirty(); 
+  }
+
+  /* ===================== Update ===================== */
+  update() {
+    const now = performance.now();
+    const dt = Math.min((now - this._lastUpdate) / 16.6, 3);
+
+    const target = this.visible ? 1 : 0;
+    this.progress += (target - this.progress) * this.animSpeed * dt;
+    this.progress = Math.max(0, Math.min(1, this.progress));
+
+    if (Math.abs(target - this.progress) > 0.01) this.markDirty();
+
+    this._lastUpdate = now;
+  }
+
+  /* ===================== Draw ===================== */
+  draw(ctx) {
+    this.update();
+    if (this.progress <= 0.01) return;
+
+    const h = this.height * this.progress;
+    const visibleHeight = h;
+
+    ctx.save();
+
+    // Background
+    if (this.platform === 'material') {
+      ctx.shadowColor = 'rgba(0,0,0,0.18)';
+      ctx.shadowBlur = 8;
+      ctx.shadowOffsetY = 2;
+    }
+
+    ctx.fillStyle = this._colors.bg;
+    ctx.fillRect(this.x, this.y, this.width, visibleHeight);
+    ctx.shadowColor = 'transparent';
+
+    // Divider iOS
+    if (this.platform === 'cupertino') {
+      ctx.strokeStyle = this._colors.divider;
+      ctx.beginPath();
+      ctx.moveTo(this.x, this.y + visibleHeight);
+      ctx.lineTo(this.x + this.width, this.y + visibleHeight);
+      ctx.stroke();
+    }
+
+    // Text
+    ctx.fillStyle = this._colors.fg;
+    ctx.font =
+      this.platform === 'cupertino'
+        ? '400 15px -apple-system'
+        : '400 14px Roboto, sans-serif';
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    ctx.fillText(this.text, this.x + 16, this.y + visibleHeight / 2);
+
+    // Actions - calculer et stocker les bounds
+    this._actionBounds = [];
+    let x = this.width - 16;
+    
+    for (let i = this.actions.length - 1; i >= 0; i--) {
+      const action = this.actions[i];
+      const textWidth = ctx.measureText(action.label).width + 20;
+      x -= textWidth;
+
+      ctx.fillStyle = this._colors.accent;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(action.label, this.x + x + textWidth / 2, this.y + visibleHeight / 2);
+
+      // Stocker la hitbox (en coordonnées écran, pas canvas)
+      this._actionBounds.push({
+        action: action,
+        bounds: {
+          x: this.x + x,
+          y: this.y + (visibleHeight - 44) / 2,
+          w: textWidth,
+          h: 44
+        }
+      });
+
+      x -= 12;
+    }
+
+    // Dismiss button
+    if (this.dismissible) {
+      const hitSize = 44;
+      const cx = this.width - 28;
+      const cy = this.y + visibleHeight / 2;
+
+      ctx.fillStyle =
+        this.platform === 'cupertino'
+          ? 'rgba(60,60,67,0.6)'
+          : this._colors.fg;
+
+      ctx.font =
+        this.platform === 'cupertino'
+          ? '600 16px -apple-system'
+          : '500 16px Roboto';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('×', cx, cy);
+
+      this._dismissBounds = {
+        x: cx - hitSize / 2,
+        y: cy - hitSize / 2,
+        w: hitSize,
+        h: hitSize
+      };
+    } else {
+      this._dismissBounds = null;
+    }
+
+    ctx.restore();
+    
+    // DEBUG: Dessiner les hitboxes
+    if (this.framework && this.framework.debbug) {
+      this._drawDebugHitboxes(ctx);
+    }
+  }
+  
+  /* ===================== Debug ===================== */
+  _drawDebugHitboxes(ctx) {
+    ctx.save();
+    ctx.strokeStyle = 'red';
+    ctx.lineWidth = 1;
+    ctx.fillStyle = 'rgba(255, 0, 0, 0.1)';
+    
+    // Dessiner la hitbox principale du banner
+    const h = this.height * this.progress;
+    ctx.strokeRect(this.x, this.y, this.width, h);
+    
+    // Dessiner les hitboxes des actions
+    if (this._actionBounds && this._actionBounds.length > 0) {
+      for (const item of this._actionBounds) {
+        const b = item.bounds;
+        ctx.fillRect(b.x, b.y, b.w, b.h);
+        ctx.strokeRect(b.x, b.y, b.w, b.h);
+        
+        // Texte de debug
+        ctx.fillStyle = 'red';
+        ctx.font = '10px monospace';
+        ctx.fillText(item.action.label, b.x + 5, b.y + 12);
+      }
+    }
+    
+    // Dessiner la hitbox du dismiss button
+    if (this._dismissBounds) {
+      const b = this._dismissBounds;
+      ctx.fillRect(b.x, b.y, b.w, b.h);
+      ctx.strokeRect(b.x, b.y, b.w, b.h);
+      ctx.fillText('X', b.x + 5, b.y + 12);
+    }
+    
+    ctx.restore();
+  }
+
+  /* ===================== Click Handling ===================== */
+  _handleClick(event) {
+    if (this.progress < 0.95) return;
+    
+    // Obtenir les coordonnées du clic/touch
+    let clientX, clientY;
+    
+    if (event.type === 'touchend') {
+      const touch = event.changedTouches[0];
+      clientX = touch.clientX;
+      clientY = touch.clientY;
+    } else {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    }
+    
+    // Convertir en coordonnées canvas SIMPLIFIÉ
+    const canvasRect = this.framework.canvas.getBoundingClientRect();
+    
+    // Coordonnées relatives au canvas (en pixels CSS, pas en pixels canvas)
+    const x = clientX - canvasRect.left;
+    const y = clientY - canvasRect.top;
+    
+    console.log('Click converted:', { 
+      clientX, clientY, 
+      canvasLeft: canvasRect.left, 
+      canvasTop: canvasRect.top,
+      x, y,
+      bannerX: this.x,
+      bannerY: this.y,
+      bannerWidth: this.width,
+      bannerHeight: this.height * this.progress
+    });
+    
+    // Vérifier si on clique sur le banner (en coordonnées CSS)
+    const bannerBottom = this.y + (this.height * this.progress);
+    if (x < this.x || x > this.x + this.width || y < this.y || y > bannerBottom) {
+      console.log('Click outside banner');
+      return;
+    }
+    
+    console.log('Click INSIDE banner!');
+    
+    // Empêcher la propagation
+    event.stopPropagation();
+    
+    // 1️⃣ Dismiss button
+    if (this.dismissible && this._dismissBounds) {
+      const b = this._dismissBounds;
+      console.log('Checking dismiss bounds:', b, 'click:', {x, y});
+      if (x >= b.x && x <= b.x + b.w && 
+          y >= b.y && y <= b.y + b.h) {
+        console.log('Dismiss clicked!');
+        this.hide();
+        return;
+      }
+    }
+    
+    // 2️⃣ Actions
+    if (this._actionBounds && this._actionBounds.length > 0) {
+      console.log('Checking', this._actionBounds.length, 'action bounds');
+      for (const item of this._actionBounds) {
+        const b = item.bounds;
+        console.log('Checking action:', item.action.label, 'bounds:', b);
+        if (x >= b.x && x <= b.x + b.w && 
+            y >= b.y && y <= b.y + b.h) {
+          console.log('Action clicked:', item.action.label);
+          item.action.onClick?.();
+          return;
+        }
+      }
+    }
+    
+    console.log('Click on banner but not on any button');
+  }
+
+  /* ===================== Resize ===================== */
+  _resize(width) {
+    this.width = width;
+    this.markDirty();
+  }
+}

package/components/RadioButton.js

@@ -97,19 +97,27 @@ class RadioButton extends Component {
         ctx.arc(centerX, centerY, 5, 0, Math.PI * 2);
         ctx.fill();
       }
-    } else {
-      // Cupertino
-      ctx.strokeStyle = this.checked ? '#007AFF' : '#C7C7CC';
-      ctx.lineWidth = 2;
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
-      ctx.stroke();
-      
+     } else {
+      // Cupertino (iOS style)
       if (this.checked) {
+        // Cercle bleu rempli
         ctx.fillStyle = '#007AFF';
         ctx.beginPath();
-        ctx.arc(centerX, centerY, 5, 0, Math.PI * 2);
+        ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // Point blanc au centre
+        ctx.fillStyle = '#FFFFFF';
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, 4, 0, Math.PI * 2);
         ctx.fill();
+      } else {
+        // Cercle gris clair
+        ctx.strokeStyle = '#D1D1D6';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+        ctx.stroke();
       }
     }
     

package/core/CanvasFramework.js

@@ -50,6 +50,7 @@ import ImageCarousel from '../components/ImageCarousel.js';
 import PasswordInput from '../components/PasswordInput.js';
 import InputTags from '../components/InputTags.js';
 import InputDatalist from '../components/InputDatalist.js';
+import Banner from '../components/Banner.js';
 
 // Utils
 import SafeArea from '../utils/SafeArea.js';
@@ -67,6 +68,7 @@ import GeoLocationService from '../utils/GeoLocationService.js';
 import WebSocketClient from '../utils/WebSocketClient.js';
 import AnimationEngine from '../utils/AnimationEngine.js';
 import CryptoManager from '../utils/CryptoManager.js';
+import NotificationManager from '../utils/NotificationManager.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -113,6 +115,21 @@ export const darkTheme = {
   border: '#333333'
 };
 
+const FIXED_COMPONENT_TYPES = new Set([
+  AppBar,
+  BottomNavigationBar,
+  Drawer,
+  Dialog,
+  Modal,
+  FAB,
+  Toast,
+  Banner,
+  BottomSheet,
+  ContextMenu,
+  OpenStreetMap,
+  SelectDialog
+]);
+
 /**
  * Framework principal pour créer des interfaces utilisateur basées sur Canvas
  * @class
@@ -172,15 +189,17 @@ class CanvasFramework {
 	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
-    this.worker = new Worker('./CanvasWorker.js', { type: 'module' });
-    this.worker.onmessage = this.handleWorkerMessage.bind(this);
-    this.worker.postMessage({ type: 'INIT', payload: { components: [] } });
-
-    // Worker logique pour calculs séparés
-    this.logicWorker = new Worker('./LogicWorker.js', { type: 'module' });
-    this.logicWorker.onmessage = this.handleLogicWorkerMessage.bind(this);
-    this.logicWorkerState = {};
+    
+	// 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 });
@@ -238,6 +257,74 @@ class CanvasFramework {
       get: () => originalFillStyle.get.call(ctx)
     });
   }	
+  
+  createCanvasWorker() {
+    const workerCode = `
+      let components = [];
+      
+      self.onmessage = function(e) {
+        const { type, payload } = e.data;
+        
+        switch(type) {
+          case 'INIT':
+            components = payload.components;
+            self.postMessage({ type: 'READY' });
+            break;
+            
+          case 'UPDATE_LAYOUT':
+            const updated = components.map(comp => {
+              if (comp.dynamicHeight && comp.calculateHeight) {
+                comp.height = comp.calculateHeight();
+              }
+              return { id: comp.id, height: comp.height };
+            });
+            self.postMessage({ type: 'LAYOUT_DONE', payload: updated });
+            break;
+            
+          case 'SCROLL_INERTIA':
+            let { offset, velocity, friction, maxScroll } = payload;
+            offset += velocity;
+            offset = Math.max(Math.min(offset, 0), -maxScroll);
+            velocity *= friction;
+            self.postMessage({ type: 'SCROLL_UPDATED', payload: { offset, velocity } });
+            break;
+        }
+      };
+    `;
+  
+    const blob = new Blob([workerCode], { type: 'application/javascript' });
+    return new Worker(URL.createObjectURL(blob));
+  }
+
+  createLogicWorker() {
+    const workerCode = `
+      let state = {};
+    
+      self.onmessage = async function(e) {
+        const { type, payload } = e.data;
+      
+        switch(type) {
+          case 'SET_STATE':
+            state = payload;
+            self.postMessage({ type: 'STATE_UPDATED', payload: state });
+            break;
+          
+          case 'EXECUTE':
+            try {
+              const fn = new Function('state', 'args', payload.fnString);
+              const result = await fn(state, payload.args);
+              self.postMessage({ type: 'EXECUTION_RESULT', payload: result });
+            } catch (err) {
+              self.postMessage({ type: 'EXECUTION_ERROR', payload: err.message });
+            }
+            break;
+        }
+      };
+    `;
+  
+    const blob = new Blob([workerCode], { type: 'application/javascript' });
+    return new Worker(URL.createObjectURL(blob));
+  }
 
   // Set Theme dynamique
   setTheme(theme) {
@@ -819,19 +906,8 @@ class CanvasFramework {
   }
 
   checkComponentsAtPosition(x, y, eventType) {
-    const isFixedComponent = (comp) => {
-      return comp instanceof AppBar || 
-             comp instanceof BottomNavigationBar || 
-             comp instanceof Drawer || 
-             comp instanceof Dialog ||
-             comp instanceof Modal ||
-			 comp instanceof FAB ||
-			 comp instanceof Toast ||
-             comp instanceof BottomSheet ||
-             comp instanceof ContextMenu ||
-			 comp instanceof OpenStreetMap ||
-             comp instanceof SelectDialog;
-    };
+    const isFixedComponent = (comp) =>
+    FIXED_COMPONENT_TYPES.has(comp.constructor);
     
     for (let i = this.components.length - 1; i >= 0; i--) {
       const comp = this.components[i];
@@ -859,7 +935,7 @@ class CanvasFramework {
                 switch (eventType) {
                   case 'start':
                     child.pressed = true;
-                    if (child.onPress) child.onPress(relativeX, relativeY);
+                    if (child.onPress) child.onPress?.(relativeX, relativeY);
                     break;
                     
                   case 'move':
@@ -867,7 +943,7 @@ class CanvasFramework {
                       child.hovered = true;
                       if (child.onHover) child.onHover();
                     }
-                    if (child.onMove) child.onMove(relativeX, relativeY);
+                    if (child.onMove) child.onMove?.(relativeX, relativeY);
                     break;
                     
                   case 'end':
@@ -876,11 +952,18 @@ class CanvasFramework {
                       
                       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;
-                            if (other.onBlur) other.onBlur();
-                          }
+                          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;
@@ -889,7 +972,7 @@ class CanvasFramework {
                       } else if (child.onClick) {
                         child.onClick();
                       } else if (child.onPress) {
-                        child.onPress(relativeX, relativeY);
+                        child.onPress?.(relativeX, relativeY);
                       }
                     }
                     break;
@@ -922,11 +1005,18 @@ class CanvasFramework {
                 
                 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;
-                      if (other.onBlur) other.onBlur();
-                    }
+                    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;
@@ -948,8 +1038,18 @@ class CanvasFramework {
       }
     }
   }
-
+  
   getMaxScroll() {
+    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;
+    }
+    return Math.max(0, maxY - this.height + 50);
+  }
+	
+  /*getMaxScroll() {
     let maxY = 0;
     for (let comp of this.components) {
       if (!this.isFixedComponent(comp)) {
@@ -957,7 +1057,7 @@ class CanvasFramework {
       }
     }
     return Math.max(0, maxY - this.height + 50);
-  }
+  }*/
 
   handleResize() {
     // Pour WebGL, NE PAS redimensionner automatiquement
@@ -1251,17 +1351,7 @@ class CanvasFramework {
   }
 	
   isFixedComponent(comp) {
-    return comp instanceof AppBar || 
-           comp instanceof BottomNavigationBar || 
-           comp instanceof Drawer || 
-           comp instanceof Dialog ||
-           comp instanceof Modal ||
-           comp instanceof FAB ||
-		   comp instanceof Toast ||
-		   comp instanceof BottomSheet ||
-           comp instanceof ContextMenu ||
-		   comp instanceof OpenStreetMap ||
-           comp instanceof SelectDialog;
+  	return FIXED_COMPONENT_TYPES.has(comp.constructor);
   }
   
   showToast(message, duration = 3000) {
@@ -1277,3 +1367,6 @@ class CanvasFramework {
 }
 
 export default CanvasFramework;
+
+
+

package/core/UIBuilder.js

@@ -51,6 +51,7 @@ import ImageCarousel from '../components/ImageCarousel.js';
 import PasswordInput from '../components/PasswordInput.js';
 import InputTags from '../components/InputTags.js';
 import InputDatalist from '../components/InputDatalist.js';
+import Banner from '../components/Banner.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -129,6 +130,7 @@ const Components = {
   Row,
   Column,
   Positioned,
+  Banner,
   Stack
 };
 

package/index.js

@@ -58,6 +58,7 @@ export { default as ImageCarousel } from './components/ImageCarousel.js';
 export { default as PasswordInput } from './components/PasswordInput.js';
 export { default as InputTags } from './components/InputTags.js';
 export { default as InputDatalist } from './components/InputDatalist.js';
+export { default as Banner } from './components/Banner.js';
 
 // Utils
 export { default as SafeArea } from './utils/SafeArea.js';
@@ -75,6 +76,7 @@ export { default as GeoLocationService } from './utils/GeoLocationService.js';
 export { default as WebSocketClient } from './utils/WebSocketClient.js';
 export { default as AnimationEngine } from './utils/AnimationEngine.js';
 export { default as CryptoManager } from './utils/CryptoManager.js';
+export { default as NotificationManager } from './utils/NotificationManager.js';
 
 // Features
 export { default as PullToRefresh } from './features/PullToRefresh.js';
@@ -98,7 +100,15 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.3.16';
+export const VERSION = '0.3.19';
+
+
+
+
+
+
+
+
 
 
 

package/package.json

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

package/utils/NotificationManager.js

@@ -0,0 +1,60 @@
+
+// NotificationManager.js
+export default class NotificationManager {
+  constructor(defaults = {}) {
+    this.defaults = {
+      icon: defaults.icon || null,
+      silent: defaults.silent || false,
+      requireInteraction: defaults.requireInteraction || false,
+    };
+
+    // Vérifier si l'API est disponible
+    this.isSupported = "Notification" in window;
+  }
+
+  // Demander la permission si nécessaire
+  async requestPermission() {
+    if (!this.isSupported) return false;
+    if (Notification.permission === "granted") return true;
+    if (Notification.permission !== "denied") {
+      const permission = await Notification.requestPermission();
+      return permission === "granted";
+    }
+    return false;
+  }
+
+  // Créer une notification
+  async notify(title, options = {}) {
+    if (!this.isSupported) {
+      console.warn("Notifications API non supportée");
+      return null;
+    }
+
+    const hasPermission = await this.requestPermission();
+    if (!hasPermission) return null;
+
+    const notifOptions = {
+      ...this.defaults,
+      ...options,
+    };
+
+    const notification = new Notification(title, notifOptions);
+
+    // Callbacks
+    if (options.onClick) {
+      notification.onclick = options.onClick;
+    }
+    if (options.onClose) {
+      notification.onclose = options.onClose;
+    }
+
+    // Auto-close après duration (si défini)
+    if (options.duration && options.duration > 0) {
+      setTimeout(() => {
+        notification.close();
+      }, options.duration);
+    }
+
+    return notification;
+  }
+}

package/core/CanvasWork.js

@@ -1,32 +0,0 @@
-// CanvasWorker.js
-let components = [];
-
-self.onmessage = (e) => {
-  const { type, payload } = e.data;
-
-  switch(type) {
-    case 'INIT':
-      components = payload.components;
-      self.postMessage({ type: 'READY' });
-      break;
-
-    case 'UPDATE_LAYOUT':
-      // Recalculer la hauteur des composants dynamiques
-      const updated = components.map(comp => {
-        if (comp.dynamicHeight && comp.calculateHeight) {
-          comp.height = comp.calculateHeight();
-        }
-        return { id: comp.id, height: comp.height };
-      });
-      self.postMessage({ type: 'LAYOUT_DONE', payload: updated });
-      break;
-
-    case 'SCROLL_INERTIA':
-      let { offset, velocity, friction, maxScroll } = payload;
-      offset += velocity;
-      offset = Math.max(Math.min(offset, 0), -maxScroll);
-      velocity *= friction;
-      self.postMessage({ type: 'SCROLL_UPDATED', payload: { offset, velocity } });
-      break;
-  }
-};

package/core/LogicWorker.js

@@ -1,25 +0,0 @@
-// LogicWorker.js
-let state = {};
-
-self.onmessage = async (e) => {
-  const { type, payload } = e.data;
-
-  switch(type) {
-    case 'SET_STATE':
-      state = payload;
-      self.postMessage({ type: 'STATE_UPDATED', payload: state });
-      break;
-
-    case 'EXECUTE':
-      // payload: { fnString: string, args: array }
-      // Attention : on envoie la fonction en string et on l'exécute ici
-      try {
-        const fn = new Function('state', 'args', payload.fnString);
-        const result = await fn(state, payload.args);
-        self.postMessage({ type: 'EXECUTION_RESULT', payload: result });
-      } catch (err) {
-        self.postMessage({ type: 'EXECUTION_ERROR', payload: err.message });
-      }
-      break;
-  }
-};