canvasframework 0.3.16 → 0.3.17

package/components/Button.js

@@ -93,6 +93,14 @@ class Button extends Component {
         this.rippleColor = this.hexToRgba(baseColor, 0.3);
         this.elevation = 0;
         break;
+		
+	  default :
+		this.bgColor = options.bgColor || '#FFFFFF';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        this.rippleColor = this.hexToRgba(baseColor, 0.2);
+        this.elevation = options.elevation || 4;
+        break;
     }
   }
   
@@ -127,6 +135,12 @@ class Button extends Component {
         this.textColor = options.textColor || baseColor;
         this.borderWidth = 0;
         break;
+		
+	  default :
+		this.bgColor = 'transparent';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        break;
     }
   }
   

package/components/ImageCarousel.js

@@ -3,22 +3,9 @@ import Component from '../core/Component.js';
 /**
  * Carousel / Slider d'images avec swipe horizontal et lazy load
  * Compatible Material et Cupertino
- * @class
- * @extends Component
+ * Tout le scroll est géré par le composant
  */
 class ImageCarousel extends Component {
-  /**
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}]
-   * @param {Array<string>} [options.images=[]] - URLs des images
-   * @param {number} [options.height=200] - Hauteur du carousel
-   * @param {number} [options.spacing=16] - Espacement entre images
-   * @param {number} [options.borderRadius=8] - Coins arrondis
-   * @param {number} [options.pageIndicatorSize=8] - Taille des dots
-   * @param {string} [options.pageIndicatorColor='#6200EE'] - Couleur dot actif
-   * @param {Function} [options.onSwipeEnd] - Callback quand la page change
-   * @param {Function} [options.onImageClick] - Callback clic sur image
-   */
   constructor(framework, options = {}) {
     super(framework, options);
 
@@ -33,8 +20,9 @@ class ImageCarousel extends Component {
     this.pageIndicatorColor = options.pageIndicatorColor || '#6200EE';
 
     this.platform = framework.platform;
-    this.startX = 0;
+
     this.isDragging = false;
+    this.lastX = 0;
     this.velocity = 0;
 
     this.onSwipeEnd = options.onSwipeEnd || null;
@@ -42,98 +30,140 @@ class ImageCarousel extends Component {
 
     this.loadedImages = Array(this.images.length).fill(null);
 
-    // Bind swipe
-    this.framework.addEventListener('touchstart', this.onTouchStart.bind(this));
-    this.framework.addEventListener('touchmove', this.onTouchMove.bind(this));
-    this.framework.addEventListener('touchend', this.onTouchEnd.bind(this));
-
+    this._setupEventHandlers();
     this.animateScroll();
   }
 
-  onTouchStart(e) {
-    const touch = e.touches[0];
-    this.startX = touch.clientX;
-    this.isDragging = true;
-    this.velocity = 0;
-    this.lastTime = performance.now();
-    this.lastX = touch.clientX;
-  }
+  // --------------------------
+  // Event handlers
+  // --------------------------
+  _setupEventHandlers() {
+    const canvas = this.framework.canvas;
+
+    // TOUCH
+    canvas.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 1 && this.isPointInsideTouch(e.touches[0])) {
+        this.isDragging = true;
+        this.lastX = e.touches[0].clientX;
+        this.velocity = 0;
+        e.preventDefault();
+      }
+    });
+
+    canvas.addEventListener('touchmove', (e) => {
+      if (this.isDragging && e.touches.length === 1) {
+        const delta = e.touches[0].clientX - this.lastX;
+        this.scrollX += delta;
+        this.velocity = delta;
+        this.lastX = e.touches[0].clientX;
+
+        this._clampScroll();
+        this._requestRedraw();
+        e.preventDefault();
+      }
+    });
 
-  onTouchMove(e) {
-    if (!this.isDragging) return;
-    const touch = e.touches[0];
-    const delta = touch.clientX - this.startX;
-    this.scrollX = -this.currentIndex * (this.width + this.spacing) + delta;
-
-    // calculer velocity
-    const now = performance.now();
-    const dt = now - this.lastTime;
-    this.velocity = (touch.clientX - this.lastX) / dt * 16; // approximation
-    this.lastTime = now;
-    this.lastX = touch.clientX;
-  }
+    canvas.addEventListener('touchend', () => this._endDrag());
+
+    // MOUSE
+    canvas.addEventListener('mousedown', (e) => {
+      if (this.isPointInside(e)) {
+        this.isDragging = true;
+        this.lastX = e.clientX;
+        this.velocity = 0;
+        e.preventDefault();
+      }
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (this.isDragging) {
+        const delta = e.clientX - this.lastX;
+        this.scrollX += delta;
+        this.velocity = delta;
+        this.lastX = e.clientX;
+
+        this._clampScroll();
+        this._requestRedraw();
+      }
+    });
 
-  onTouchEnd() {
-    if (!this.isDragging) return;
+    canvas.addEventListener('mouseup', () => this._endDrag());
+    canvas.addEventListener('mouseleave', () => this._endDrag());
+  }
 
-    // momentum scroll
-    const momentumThreshold = this.width / 3;
-    let targetIndex = this.currentIndex;
+  _endDrag() {
+    if (this.isDragging) {
+      this.isDragging = false;
+      // Snap à la page la plus proche
+      const targetIndex = Math.round(-this.scrollX / (this.width + this.spacing));
+      this.currentIndex = Math.min(Math.max(targetIndex, 0), this.images.length - 1);
+      this.scrollX = -this.currentIndex * (this.width + this.spacing);
 
-    if (this.velocity < -0.5) targetIndex = Math.min(this.currentIndex + 1, this.images.length - 1);
-    else if (this.velocity > 0.5) targetIndex = Math.max(this.currentIndex - 1, 0);
-    else {
-      const deltaIndex = Math.round(-this.scrollX / (this.width + this.spacing)) - this.currentIndex;
-      if (deltaIndex > 0) targetIndex = Math.min(this.currentIndex + 1, this.images.length - 1);
-      else if (deltaIndex < 0) targetIndex = Math.max(this.currentIndex - 1, 0);
+      if (this.onSwipeEnd) this.onSwipeEnd(this.currentIndex);
     }
+  }
 
-    this.currentIndex = targetIndex;
-    this.scrollX = -this.currentIndex * (this.width + this.spacing);
+  _clampScroll() {
+    const maxScroll = 0;
+    const minScroll = -(this.images.length - 1) * (this.width + this.spacing);
+    if (this.scrollX > maxScroll) this.scrollX = maxScroll;
+    if (this.scrollX < minScroll) this.scrollX = minScroll;
+  }
 
-    this.isDragging = false;
-    this.velocity = 0;
+  isPointInsideTouch(touch) {
+    const rect = this.framework.canvas.getBoundingClientRect();
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    return this.isPointInside(x, y);
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.height;
+  }
 
-    if (this.onSwipeEnd) this.onSwipeEnd(this.currentIndex);
+  _requestRedraw() {
+    if (this.framework.markComponentDirty) this.framework.markComponentDirty(this);
   }
 
+  // --------------------------
+  // Animation / Inertie
+  // --------------------------
   animateScroll() {
     const animate = () => {
       if (!this.isDragging) {
-        // inertia effect
+        // inertia
         if (Math.abs(this.velocity) > 0.1) {
           this.scrollX += this.velocity;
-          this.velocity *= 0.95; // friction
+          this.velocity *= 0.95;
 
-          // clamp
-          if (this.scrollX > 0) this.scrollX = 0;
-          const maxScroll = -(this.images.length - 1) * (this.width + this.spacing);
-          if (this.scrollX < maxScroll) this.scrollX = maxScroll;
+          this._clampScroll();
         } else {
-          // snap to nearest
+          // snap doux vers la page
           const target = -this.currentIndex * (this.width + this.spacing);
           this.scrollX += (target - this.scrollX) * 0.2;
         }
       }
-
       requestAnimationFrame(animate);
     };
     animate();
   }
 
+  // --------------------------
+  // Draw
+  // --------------------------
   draw(ctx) {
     ctx.save();
-
     const startX = this.x + this.scrollX + this.spacing / 2;
 
     for (let i = 0; i < this.images.length; i++) {
       const imgX = startX + i * (this.width + this.spacing);
 
-      // charger lazy image
+      // lazy load
       if (!this.loadedImages[i]) {
         const img = new Image();
         img.src = this.images[i];
-        img.onload = () => { this.loadedImages[i] = img; };
+        img.onload = () => { this.loadedImages[i] = img; this._requestRedraw(); };
       }
 
       ctx.save();
@@ -152,10 +182,11 @@ class ImageCarousel extends Component {
         ctx.textBaseline = 'middle';
         ctx.fillText('🖼', imgX + this.width / 2, this.y + this.height / 2);
       }
+
       ctx.restore();
     }
 
-    // Pagination Material
+    // pagination Material
     if (this.platform === 'material') {
       const dotY = this.y + this.height + 12;
       const totalWidth = this.images.length * this.pageIndicatorSize * 2;
@@ -183,11 +214,6 @@ class ImageCarousel extends Component {
     ctx.lineTo(x, y + radius);
     ctx.quadraticCurveTo(x, y, x + radius, y);
   }
-
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
-           y >= this.y && y <= this.y + this.height;
-  }
 }
 
 export default ImageCarousel;

package/components/InputTags.js

@@ -414,14 +414,44 @@ class InputTags extends Component {
     
     return cursorX;
   }
+  
+  updateHeight() {
+	const maxX = this.x + this.width - 10; // marge droite
+	let currentX = this.x + 10;
+	let currentY = this.y + 10;
+	let lines = 1;
+
+	for (let i = 0; i < this.tags.length; i++) {
+	  const tagWidth = this.measureTagWidth(this.tags[i]);
+
+  	  if (currentX + tagWidth > maxX) {
+	    currentX = this.x + 10;
+	    currentY += this.tagHeight + this.tagSpacing;
+	    lines++;
+	  }
+
+	  currentX += tagWidth + this.tagSpacing;
+	}
+
+	// Ajouter la largeur du texte en cours
+	const textWidth = this.value.length * (this.fontSize * 0.6);
+	if (currentX + textWidth > maxX) {
+	  lines++;
+	}
+
+	// Mettre à jour la hauteur dynamique
+	this.height = Math.max(lines * (this.tagHeight + this.tagSpacing) + 10, 40); // 40 = minHeight
+  }
 
   /**
    * Dessine l'input
    * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
    */
   draw(ctx) {
+    this.updateHeight();
     ctx.save();
-    
+
+    // Dessin du contour
     if (this.platform === 'material') {
       ctx.strokeStyle = this.focused ? '#6200EE' : '#CCCCCC';
       ctx.lineWidth = this.focused ? 2 : 1;
@@ -436,30 +466,38 @@ class InputTags extends Component {
       this.roundRect(ctx, this.x, this.y, this.width, this.height, 8);
       ctx.stroke();
     }
-    
+
     // Position de départ pour dessiner les tags
     let currentX = this.x + 10;
-    const tagY = this.y + 10;
-    
+    let currentY = this.y + 10;
+    const maxX = this.x + this.width - 10;
+
     // Dessiner les tags
     for (let i = 0; i < this.tags.length; i++) {
-      this.drawTag(ctx, this.tags[i], currentX, tagY);
       const tagWidth = this.measureTagWidth(this.tags[i]);
+
+      // Retour à la ligne si dépassement
+      if (currentX + tagWidth > maxX) {
+        currentX = this.x + 10;
+        currentY += this.tagHeight + this.tagSpacing;
+      }
+
+      this.drawTag(ctx, this.tags[i], currentX, currentY);
       currentX += tagWidth + this.tagSpacing;
     }
-    
-    // Dessiner le texte en cours
+
+    // Dessiner le texte en cours ou placeholder
     if (this.value || (this.focused && this.tags.length === 0)) {
       ctx.fillStyle = this.value ? '#000000' : '#999999';
       ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
-      
+
       const displayText = this.value || this.placeholder;
-      const textY = this.y + this.height / 2;
-      
+      const textY = currentY + this.tagHeight / 2;
+
       ctx.fillText(displayText, currentX, textY);
-      
+
       // Curseur
       if (this.focused && this.cursorVisible) {
         const textWidth = ctx.measureText(this.value).width;
@@ -467,7 +505,7 @@ class InputTags extends Component {
         ctx.fillRect(currentX + textWidth, textY - this.fontSize / 2, 2, this.fontSize);
       }
     }
-    
+
     ctx.restore();
   }
 

package/components/List.js

@@ -1,24 +1,12 @@
 import Component from '../core/Component.js';
 import ListItem from '../components/ListItem.js';
+
 /**
  * Conteneur pour les éléments de liste (ListItems) avec défilement automatique
  * @class
  * @extends Component
- * @param {Framework} framework - Instance du framework
- * @param {Object} [options={}] - Options de configuration
- * @param {number} [options.itemHeight=56] - Hauteur de chaque item en pixels
- * @param {Function} [options.onItemClick] - Callback appelé lors du clic sur un item
- * @param {number} [options.y=0] - Position Y de départ
- * @example
- * const list = new List(framework, {
- *   itemHeight: 64,
- *   onItemClick: (index, itemOptions) => console.log('Item clicked:', index)
- * });
  */
 class List extends Component {
-  /**
-   * @constructs List
-   */
   constructor(framework, options = {}) {
     super(framework, options);
     /** @type {ListItem[]} */
@@ -28,37 +16,50 @@ class List extends Component {
     /** @type {Function|undefined} */
     this.onItemClick = options.onItemClick;
     /** @type {number} */
-    this.y = options.y || 0; // Position Y de départ
+    this.y = options.y || 0;
   }
   
   /**
    * Ajoute un item à la liste
-   * @param {Object} itemOptions - Options pour l'item
-   * @param {string} itemOptions.text - Texte à afficher
-   * @param {Function} [itemOptions.onClick] - Callback spécifique à l'item
-   * @param {Object} [itemOptions.style] - Style optionnel pour l'item
-   * @returns {ListItem} L'item créé
+   * @param {Object|Component} itemOptions - Options pour l'item OU instance de Component (ex: SwipeableListItem)
+   * @returns {ListItem|Component} L'item créé ou passé
    */
   addItem(itemOptions) {
-    const item = new ListItem(this.framework, {
-      ...itemOptions,
-      x: this.x,
-      y: this.y + (this.items.length * this.itemHeight),
-      width: this.width,
-      height: this.itemHeight, // IMPORTANT: définir la hauteur
-      onClick: () => {
-        if (this.onItemClick) {
-          this.onItemClick(this.items.length, itemOptions);
-        }
-        if (itemOptions.onClick) {
-          itemOptions.onClick();
+    let item;
+    
+    // 🔹 Vérifier si c'est déjà un composant instancié (SwipeableListItem)
+    if (itemOptions instanceof Component) {
+      item = itemOptions;
+      
+      // 🔹 CRITIQUE : Définir la position et taille de l'item
+      item.x = this.x;
+      item.y = this.y + (this.items.length * this.itemHeight);
+      item.width = this.width;
+      item.height = this.itemHeight;
+      
+      console.log(`📦 SwipeableListItem positionné à y=${item.y}`);
+    } else {
+      // Créer un ListItem standard
+      item = new ListItem(this.framework, {
+        ...itemOptions,
+        x: this.x,
+        y: this.y + (this.items.length * this.itemHeight),
+        width: this.width,
+        height: this.itemHeight,
+        onClick: () => {
+          if (this.onItemClick) {
+            this.onItemClick(this.items.length, itemOptions);
+          }
+          if (itemOptions.onClick) {
+            itemOptions.onClick();
+          }
         }
-      }
-    });
+      });
+    }
     
     this.items.push(item);
-    this.framework.add(item); // Ajouter chaque item au framework
-    this.height = this.items.length * this.itemHeight; // Mettre à jour la hauteur totale
+    this.framework.add(item);
+    this.height = this.items.length * this.itemHeight;
     
     return item;
   }

package/components/SwipeableListItem.js

@@ -4,13 +4,6 @@ import Component from '../core/Component.js';
  * Élément de liste avec support swipe et actions
  * @class
  * @extends Component
- * @property {string} title - Titre
- * @property {string} subtitle - Sous-titre
- * @property {Array<{icon?: string, text: string, color: string, onClick: Function}>} leftActions - Actions swipe gauche
- * @property {Array<{icon?: string, text: string, color: string, onClick: Function}>} rightActions - Actions swipe droite
- * @property {string} bgColor - Couleur de fond
- * @property {string} platform - Plateforme ('material' ou 'cupertino')
- * @property {number} height - Hauteur de l'item
  */
 class SwipeableListItem extends Component {
   constructor(framework, options = {}) {
@@ -29,9 +22,180 @@ class SwipeableListItem extends Component {
     this.dragOffset = 0;
     this.dragging = false;
     this.startX = 0;
+    this.startY = 0;
+    this.hasMoved = false;
 
     this.ripples = [];
-    this.onPress = this.handlePress.bind(this);
+    this.animationFrame = null;
+    this.lastAnimationTime = 0;
+
+    // 🔹 Binding des handlers
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.handleTouchEnd = this.handleTouchEnd.bind(this);
+
+    console.log('🏗️ SwipeableListItem créé', {
+      hasCanvas: !!this.framework.canvas,
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
+    });
+
+    // 🔹 Enregistrer les événements
+    this.setupEventListeners();
+  }
+
+  /**
+   * Configure les écouteurs d'événements
+   * @private
+   */
+  setupEventListeners() {
+    if (!this.framework.canvas) {
+      console.error('❌ Pas de canvas trouvé dans le framework');
+      return;
+    }
+
+    const canvas = this.framework.canvas;
+    console.log('📡 Configuration des événements sur le canvas');
+
+    // Événements souris
+    canvas.addEventListener('mousedown', this.handleMouseDown);
+    canvas.addEventListener('mousemove', this.handleMouseMove);
+    canvas.addEventListener('mouseup', this.handleMouseUp);
+
+    // Événements tactiles
+    canvas.addEventListener('touchstart', this.handleTouchStart, { passive: false });
+    canvas.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+    canvas.addEventListener('touchend', this.handleTouchEnd);
+
+    console.log('✅ Événements configurés');
+  }
+
+  /**
+   * Nettoyer les événements lors de la destruction
+   */
+  destroy() {
+    if (this.framework.canvas) {
+      const canvas = this.framework.canvas;
+      canvas.removeEventListener('mousedown', this.handleMouseDown);
+      canvas.removeEventListener('mousemove', this.handleMouseMove);
+      canvas.removeEventListener('mouseup', this.handleMouseUp);
+      canvas.removeEventListener('touchstart', this.handleTouchStart);
+      canvas.removeEventListener('touchmove', this.handleTouchMove);
+      canvas.removeEventListener('touchend', this.handleTouchEnd);
+    }
+
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+
+    if (super.destroy) {
+      super.destroy();
+    }
+  }
+
+  /**
+   * Obtenir les coordonnées depuis un événement
+   * @private
+   */
+  getCoordinates(event) {
+    const rect = this.framework.canvas.getBoundingClientRect();
+    if (event.touches && event.touches.length > 0) {
+      return {
+        x: event.touches[0].clientX - rect.left,
+        y: event.touches[0].clientY - rect.top
+      };
+    }
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }
+
+  /**
+   * Handler mousedown
+   * @private
+   */
+  handleMouseDown(event) {
+    const coords = this.getCoordinates(event);
+    console.log('🖱️ MouseDown', coords, 'isInside:', this.isPointInside(coords.x, coords.y));
+    this.onDragStart(coords.x, coords.y);
+  }
+
+  /**
+   * Handler mousemove
+   * @private
+   */
+  handleMouseMove(event) {
+    if (!this.dragging) return;
+    const coords = this.getCoordinates(event);
+    console.log('🖱️ MouseMove', coords, 'dragging:', this.dragging);
+    this.onDragMove(coords.x, coords.y);
+    this.requestRender();
+  }
+
+  /**
+   * Handler mouseup
+   * @private
+   */
+  handleMouseUp(event) {
+    if (!this.dragging) return;
+    console.log('🖱️ MouseUp');
+    this.onDragEnd();
+    this.requestRender();
+  }
+
+  /**
+   * Handler touchstart
+   * @private
+   */
+  handleTouchStart(event) {
+    const coords = this.getCoordinates(event);
+    console.log('👆 TouchStart', coords, 'isInside:', this.isPointInside(coords.x, coords.y));
+    if (this.isPointInside(coords.x, coords.y)) {
+      event.preventDefault();
+      this.onDragStart(coords.x, coords.y);
+    }
+  }
+
+  /**
+   * Handler touchmove
+   * @private
+   */
+  handleTouchMove(event) {
+    if (!this.dragging) return;
+    event.preventDefault();
+    const coords = this.getCoordinates(event);
+    console.log('👆 TouchMove', coords);
+    this.onDragMove(coords.x, coords.y);
+    this.requestRender();
+  }
+
+  /**
+   * Handler touchend
+   * @private
+   */
+  handleTouchEnd(event) {
+    if (!this.dragging) return;
+    event.preventDefault();
+    console.log('👆 TouchEnd');
+    this.onDragEnd();
+    this.requestRender();
+  }
+
+  /**
+   * Demander un redessin
+   * @private
+   */
+  requestRender() {
+    if (this.framework && this.framework.requestRender) {
+      this.framework.requestRender();
+    }
   }
 
   /**
@@ -40,21 +204,46 @@ class SwipeableListItem extends Component {
    * @param {number} y
    */
   onDragStart(x, y) {
-    if (this.isPointInside(x, y)) {
+    const inside = this.isPointInside(x, y);
+    console.log('🟢 onDragStart', { x, y, inside, bounds: { x: this.x, y: this.y, w: this.width, h: this.height } });
+    
+    if (inside) {
       this.dragging = true;
       this.startX = x;
+      this.startY = y;
+      this.hasMoved = false;
+      console.log('✅ Swipe démarré');
+    } else {
+      console.log('❌ Point en dehors des limites');
     }
   }
 
   /**
    * Déplacement pendant swipe
    * @param {number} x
+   * @param {number} y
    */
-  onDragMove(x) {
+  onDragMove(x, y) {
     if (this.dragging) {
-      this.dragOffset = x - this.startX;
-      const maxOffset = Math.max(this.leftActions.length, this.rightActions.length) * 80;
-      this.dragOffset = Math.min(Math.max(this.dragOffset, -maxOffset), maxOffset);
+      const deltaX = x - this.startX;
+      const deltaY = Math.abs(y - this.startY);
+
+      console.log('🔄 onDragMove', { deltaX, deltaY, hasMoved: this.hasMoved });
+
+      // Swipe horizontal seulement si déplacement > 5px
+      if (Math.abs(deltaX) > 5 || this.hasMoved) {
+        this.hasMoved = true;
+        this.dragOffset = deltaX;
+
+        // Limiter le déplacement
+        const maxOffset = Math.max(
+          this.leftActions.length * 80,
+          this.rightActions.length * 80
+        );
+        this.dragOffset = Math.min(Math.max(this.dragOffset, -maxOffset), maxOffset);
+
+        console.log('↔️ Offset mis à jour:', this.dragOffset);
+      }
     }
   }
 
@@ -63,51 +252,24 @@ class SwipeableListItem extends Component {
    */
   onDragEnd() {
     if (this.dragging) {
-      if (this.dragOffset > 80 && this.leftActions[0]) {
-        this.leftActions[0].onClick?.();
-      } else if (this.dragOffset < -80 && this.rightActions[0]) {
-        this.rightActions[0].onClick?.();
+      console.log('🔴 onDragEnd', { offset: this.dragOffset, hasMoved: this.hasMoved });
+
+      if (this.hasMoved) {
+        if (this.dragOffset > 80 && this.leftActions[0]) {
+          console.log('✅ Action gauche déclenchée');
+          this.leftActions[0].onClick?.();
+        } else if (this.dragOffset < -80 && this.rightActions[0]) {
+          console.log('✅ Action droite déclenchée');
+          this.rightActions[0].onClick?.();
+        }
       }
+
       this.dragOffset = 0;
       this.dragging = false;
+      this.hasMoved = false;
     }
   }
 
-  /**
-   * Gestion du press pour ripple Material
-   * @param {number} x
-   * @param {number} y
-   */
-  handlePress(x, y) {
-    if (this.platform === 'material') {
-      const adjustedY = y - this.framework.scrollOffset;
-      this.ripples.push({
-        x: x - this.x,
-        y: adjustedY - this.y,
-        radius: 0,
-        maxRadius: Math.max(this.width, this.height) * 1.5,
-        opacity: 1
-      });
-      this.animateRipple();
-    }
-  }
-
-  animateRipple() {
-    const animate = () => {
-      let hasActive = false;
-      for (let ripple of this.ripples) {
-        if (ripple.radius < ripple.maxRadius) {
-          ripple.radius += ripple.maxRadius / 15;
-          hasActive = true;
-        }
-        if (ripple.radius >= ripple.maxRadius * 0.5) ripple.opacity -= 0.05;
-      }
-      this.ripples = this.ripples.filter(r => r.opacity > 0);
-      if (hasActive) requestAnimationFrame(animate);
-    };
-    animate();
-  }
-
   /**
    * Dessine l'item
    * @param {CanvasRenderingContext2D} ctx
@@ -115,12 +277,12 @@ class SwipeableListItem extends Component {
   draw(ctx) {
     ctx.save();
 
-    // Actions swipe
+    // Actions swipe (arrière-plan)
     if (this.dragOffset > 0 && this.leftActions[0]) {
       ctx.fillStyle = this.leftActions[0].color || '#388E3C';
       ctx.fillRect(this.x, this.y, this.dragOffset, this.height);
       ctx.fillStyle = '#FFF';
-      ctx.font = '14px sans-serif';
+      ctx.font = 'bold 14px sans-serif';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText(this.leftActions[0].text, this.x + this.dragOffset / 2, this.y + this.height / 2);
@@ -129,51 +291,57 @@ class SwipeableListItem extends Component {
       ctx.fillStyle = this.rightActions[0].color || '#D32F2F';
       ctx.fillRect(this.x + this.width - offset, this.y, offset, this.height);
       ctx.fillStyle = '#FFF';
+      ctx.font = 'bold 14px sans-serif';
       ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
       ctx.fillText(this.rightActions[0].text, this.x + this.width - offset / 2, this.y + this.height / 2);
     }
 
+    // Déplacement du contenu principal
     ctx.translate(this.dragOffset, 0);
 
     // Background
     ctx.fillStyle = this.bgColor;
     ctx.fillRect(this.x, this.y, this.width, this.height);
 
-    // Ripple
-    if (this.platform === 'material') {
-      ctx.save();
-      ctx.beginPath();
-      ctx.rect(this.x, this.y, this.width, this.height);
-      ctx.clip();
-      for (let ripple of this.ripples) {
-        ctx.globalAlpha = ripple.opacity;
-        ctx.fillStyle = 'rgba(0,0,0,0.1)';
-        ctx.beginPath();
-        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
-        ctx.fill();
-      }
-      ctx.restore();
-    }
-
-    // Texte
+    // Texte principal
     ctx.fillStyle = '#000';
-    ctx.font = '16px sans-serif';
+    ctx.font = '16px -apple-system, Roboto, sans-serif';
     ctx.textAlign = 'left';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(this.title, this.x + 16, this.y + this.height / 2);
+    ctx.textBaseline = this.subtitle ? 'top' : 'middle';
+    const titleY = this.subtitle ? this.y + 16 : this.y + this.height / 2;
+    ctx.fillText(this.title, this.x + 16, titleY);
+
+    // Sous-titre
     if (this.subtitle) {
       ctx.fillStyle = '#757575';
-      ctx.font = '14px sans-serif';
-      ctx.fillText(this.subtitle, this.x + 16, this.y + this.height / 2 + 12);
+      ctx.font = '14px -apple-system, Roboto, sans-serif';
+      ctx.fillText(this.subtitle, this.x + 16, this.y + 38);
     }
 
+    // Bordure inférieure
+    ctx.strokeStyle = '#E0E0E0';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(this.x, this.y + this.height);
+    ctx.lineTo(this.x + this.width, this.y + this.height);
+    ctx.stroke();
+
     ctx.restore();
   }
 
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
-           y >= this.y && y <= this.y + this.height;
-  }
+ isPointInside(x, y) {
+  const inside = x >= this.x && x <= this.x + this.width &&
+                 y >= this.y && y <= this.y + this.height;
+  
+  console.log('🎯 isPointInside check', {
+    point: { x, y },
+    bounds: { x: this.x, y: this.y, width: this.width, height: this.height },
+    inside
+  });
+  
+  return inside;
+}
 }
 
-export default SwipeableListItem;
+export default SwipeableListItem;

package/components/Tabs.js

@@ -1,32 +1,14 @@
 import Component from '../core/Component.js';
+
 /**
- * Onglets de navigation
+ * Onglets de navigation avec support Material & Cupertino
  * @class
  * @extends Component
- * @property {Array} tabs - Onglets [{label, icon}]
- * @property {number} selectedIndex - Onglet sélectionné
- * @property {Function} onChange - Callback au changement
- * @property {string} platform - Plateforme
- * @property {string} indicatorColor - Couleur de l'indicateur
- * @property {string} textColor - Couleur du texte
- * @property {string} selectedTextColor - Couleur du texte sélectionné
  */
 class Tabs extends Component {
-  /**
-   * Crée une instance de Tabs
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {Array} [options.tabs=[]] - Onglets
-   * @param {number} [options.selectedIndex=0] - Onglet sélectionné
-   * @param {Function} [options.onChange] - Callback au changement
-   * @param {number} [options.height=48] - Hauteur
-   * @param {string} [options.indicatorColor] - Couleur indicateur (auto selon platform)
-   * @param {string} [options.textColor='#000000'] - Couleur texte
-   * @param {string} [options.selectedTextColor] - Couleur texte sélectionné (auto selon indicatorColor)
-   */
   constructor(framework, options = {}) {
     super(framework, options);
-    this.tabs = options.tabs || []; // [{label: 'Tab 1', icon: '📱'}, ...]
+    this.tabs = options.tabs || [];
     this.selectedIndex = options.selectedIndex || 0;
     this.onChange = options.onChange;
     this.platform = framework.platform;
@@ -35,13 +17,159 @@ class Tabs extends Component {
     this.textColor = options.textColor || '#000000';
     this.selectedTextColor = options.selectedTextColor || this.indicatorColor;
     
+    // 🔹 Système de ripples amélioré
+    this.ripples = [];
+    this.animationFrame = null;
+    this.lastAnimationTime = 0;
+    
+    // 🔹 Pour détecter les doubles événements
+    this.lastEventTime = 0;
+    this.lastEventCoords = { x: -1, y: -1 };
+    
     this.onPress = this.handlePress.bind(this);
   }
 
   /**
-   * Dessine les onglets
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * Démarre l'animation des ripples
+   * @private
    */
+  startRippleAnimation() {
+    const animate = (timestamp) => {
+      if (!this.lastAnimationTime) this.lastAnimationTime = timestamp;
+      const deltaTime = timestamp - this.lastAnimationTime;
+      this.lastAnimationTime = timestamp;
+
+      let needsUpdate = false;
+
+      // Mettre à jour chaque ripple
+      for (let i = this.ripples.length - 1; i >= 0; i--) {
+        const ripple = this.ripples[i];
+        
+        // Animer le rayon (expansion)
+        if (ripple.radius < ripple.maxRadius) {
+          ripple.radius += (ripple.maxRadius / 300) * deltaTime;
+          needsUpdate = true;
+        }
+
+        // Animer l'opacité (fade out)
+        if (ripple.radius >= ripple.maxRadius * 0.4) {
+          ripple.opacity -= (0.003 * deltaTime);
+          if (ripple.opacity < 0) ripple.opacity = 0;
+          needsUpdate = true;
+        }
+
+        // Supprimer les ripples terminés
+        if (ripple.opacity <= 0 && ripple.radius >= ripple.maxRadius * 0.95) {
+          this.ripples.splice(i, 1);
+          needsUpdate = true;
+        }
+      }
+
+      // Redessiner si nécessaire
+      if (needsUpdate) {
+        this.requestRender();
+      }
+
+      // Continuer l'animation
+      if (this.ripples.length > 0) {
+        this.animationFrame = requestAnimationFrame(animate);
+      } else {
+        this.animationFrame = null;
+        this.lastAnimationTime = 0;
+      }
+    };
+
+    if (this.ripples.length > 0 && !this.animationFrame) {
+      this.animationFrame = requestAnimationFrame(animate);
+    }
+  }
+
+  /**
+   * Demander un redessin
+   * @private
+   */
+  requestRender() {
+    if (this.framework && this.framework.requestRender) {
+      this.framework.requestRender();
+    }
+  }
+
+  /**
+   * Nettoyer l'animation lors de la destruction
+   */
+  destroy() {
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+    if (super.destroy) {
+      super.destroy();
+    }
+  }
+
+  handlePress(x, y) {
+    const now = performance.now();
+    
+    // 🔹 Détecter si c'est le même événement physique (mousedown + click)
+    const deltaTime = now - this.lastEventTime;
+    const deltaX = Math.abs(x - this.lastEventCoords.x);
+    const deltaY = Math.abs(y - this.lastEventCoords.y);
+    
+    const isDoubleEvent = deltaX < 2 && deltaY < 2 && deltaTime < 50;
+    
+    if (isDoubleEvent) {
+      return; // Ignorer le double événement
+    }
+    
+    // 🔹 Enregistrer cet événement
+    this.lastEventTime = now;
+    this.lastEventCoords = { x, y };
+    
+    const tabWidth = this.width / this.tabs.length;
+    const index = Math.floor((x - this.x) / tabWidth);
+    
+    if (index >= 0 && index < this.tabs.length) {
+      // Ripple pour Material
+      if (this.platform === 'material') {
+        const rippleCenterX = this.x + index * tabWidth + tabWidth / 2;
+        
+        // Calculer la taille maximale du ripple
+        const maxRippleRadius = Math.min(tabWidth * 0.6, this.height * 0.8);
+        
+        this.ripples.push({
+          x: rippleCenterX,
+          y: this.y + this.height / 2,
+          radius: 0,
+          maxRadius: maxRippleRadius,
+          opacity: 1,
+          createdAt: now,
+          tabIndex: index
+        });
+        
+        // Démarrer l'animation si elle n'est pas en cours
+        if (!this.animationFrame) {
+          this.startRippleAnimation();
+        }
+        
+        // Forcer un redessin
+        this.requestRender();
+      }
+
+      // Changement d'onglet
+      if (index !== this.selectedIndex) {
+        this.selectedIndex = index;
+        if (this.onChange) this.onChange(index, this.tabs[index]);
+      }
+      
+      this.requestRender();
+    }
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.height;
+  }
+
   draw(ctx) {
     ctx.save();
     
@@ -56,16 +184,22 @@ class Tabs extends Component {
     ctx.moveTo(this.x, this.y + this.height);
     ctx.lineTo(this.x + this.width, this.y + this.height);
     ctx.stroke();
-    
+
     const tabWidth = this.width / this.tabs.length;
-    
+
+    // 🔹 Dessiner les ripples Material EN PREMIER
+    if (this.platform === 'material') {
+      this.drawRipples(ctx, tabWidth);
+    }
+
+    // Dessiner les onglets
     for (let i = 0; i < this.tabs.length; i++) {
       const tab = this.tabs[i];
       const tabX = this.x + i * tabWidth;
       const isSelected = i === this.selectedIndex;
       const color = isSelected ? this.selectedTextColor : this.textColor;
-      
-      // Icône (si présente)
+
+      // Icône (facultative)
       if (tab.icon) {
         ctx.font = '20px sans-serif';
         ctx.textAlign = 'center';
@@ -73,7 +207,7 @@ class Tabs extends Component {
         ctx.fillStyle = color;
         ctx.fillText(tab.icon, tabX + tabWidth / 2, this.y + 16);
       }
-      
+
       // Label
       ctx.font = `${isSelected ? 'bold ' : ''}14px -apple-system, Roboto, sans-serif`;
       ctx.fillStyle = color;
@@ -81,44 +215,40 @@ class Tabs extends Component {
       ctx.textBaseline = 'middle';
       const labelY = tab.icon ? this.y + 36 : this.y + this.height / 2;
       ctx.fillText(tab.label, tabX + tabWidth / 2, labelY);
-      
-      // Indicateur (Material uniquement)
+
+      // Indicateur (Material)
       if (isSelected && this.platform === 'material') {
         ctx.fillStyle = this.indicatorColor;
         ctx.fillRect(tabX, this.y + this.height - 2, tabWidth, 2);
       }
     }
-    
+
     ctx.restore();
   }
 
   /**
-   * Gère la pression (clic)
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
+   * Dessine les ripples (Material)
    * @private
    */
-  handlePress(x, y) {
-    const tabWidth = this.width / this.tabs.length;
-    const index = Math.floor((x - this.x) / tabWidth);
+  drawRipples(ctx, tabWidth) {
+    // Sauvegarder le contexte
+    ctx.save();
     
-    if (index >= 0 && index < this.tabs.length && index !== this.selectedIndex) {
-      this.selectedIndex = index;
-      if (this.onChange) {
-        this.onChange(index, this.tabs[index]);
-      }
+    // Créer un masque de clipping pour limiter les ripples aux onglets
+    ctx.beginPath();
+    ctx.rect(this.x, this.y, this.width, this.height);
+    ctx.clip();
+    
+    for (let ripple of this.ripples) {
+      ctx.globalAlpha = ripple.opacity;
+      ctx.fillStyle = this.indicatorColor || '#6200EE';
+      ctx.beginPath();
+      ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2);
+      ctx.fill();
     }
-  }
-
-  /**
-   * Vérifie si un point est dans les limites
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {boolean} True si le point est dans les onglets
-   */
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width && 
-           y >= this.y && y <= this.y + this.height;
+    
+    // Restaurer le contexte
+    ctx.restore();
   }
 }
 

package/package.json

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