canvasframework 0.3.19 → 0.3.21

package/components/Chart.js

@@ -0,0 +1,700 @@
+import Component from '../core/Component.js';
+
+/**
+ * Composant de graphiques avec support Line, Bar, Pie, Doughnut
+ * @class
+ * @extends Component
+ */
+class Chart extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+    
+    this.type = options.type || 'line'; // 'line', 'bar', 'pie', 'doughnut', 'area'
+    this.data = options.data || { labels: [], datasets: [] };
+    this.title = options.title || '';
+    this.showLegend = options.showLegend !== false;
+    this.showGrid = options.showGrid !== false;
+    this.showValues = options.showValues || false;
+    this.animated = options.animated !== false;
+    this.colors = options.colors || this.getDefaultColors();
+    
+    // Marges et padding
+    this.padding = options.padding || 40;
+    this.legendHeight = this.showLegend ? 60 : 0;
+    this.titleHeight = this.title ? 40 : 0;
+    
+    // Zone de dessin du graphique
+    this.chartArea = {
+      x: this.padding,
+      y: this.padding + this.titleHeight,
+      width: this.width - this.padding * 2,
+      height: this.height - this.padding * 2 - this.legendHeight - this.titleHeight
+    };
+    
+    // Animation
+    this.animationProgress = this.animated ? 0 : 1;
+    this.animationDuration = 1000;
+    this.animationStartTime = null;
+    
+    // Interaction
+    this.hoveredIndex = -1;
+    this.hoveredDatasetIndex = -1;
+    
+    // Options spécifiques par type
+    this.lineOptions = {
+      tension: options.tension || 0.4, // Courbure des lignes
+      pointRadius: options.pointRadius || 4,
+      lineWidth: options.lineWidth || 2,
+      fill: options.fill || false
+    };
+    
+    this.barOptions = {
+      barWidth: options.barWidth || null, // Auto si null
+      groupGap: options.groupGap || 10,
+      barGap: options.barGap || 4
+    };
+    
+    this.pieOptions = {
+      innerRadius: options.innerRadius || 0, // >0 pour doughnut
+      startAngle: options.startAngle || -Math.PI / 2,
+      labelDistance: options.labelDistance || 1.3
+    };
+    
+    // Calculer les échelles
+    this.calculateScales();
+    
+    // Démarrer l'animation si activée
+    if (this.animated) {
+      this.startAnimation();
+    }
+  }
+  
+  /**
+   * Couleurs par défaut
+   */
+  getDefaultColors() {
+    return [
+      '#6200EE', '#03DAC6', '#FF6F00', '#E91E63',
+      '#2196F3', '#4CAF50', '#FFC107', '#9C27B0',
+      '#00BCD4', '#FF5722', '#795548', '#607D8B'
+    ];
+  }
+  
+  /**
+   * Calcule les échelles min/max pour les axes
+   */
+  calculateScales() {
+    if (this.type === 'pie' || this.type === 'doughnut') {
+      // Pas d'échelles pour les graphiques circulaires
+      this.totalValue = this.data.datasets[0]?.data.reduce((a, b) => a + b, 0) || 0;
+      return;
+    }
+    
+    let allValues = [];
+    this.data.datasets.forEach(dataset => {
+      allValues = allValues.concat(dataset.data);
+    });
+    
+    this.minValue = Math.min(0, ...allValues);
+    this.maxValue = Math.max(...allValues);
+    
+    // Ajouter une marge de 10%
+    const range = this.maxValue - this.minValue;
+    this.minValue -= range * 0.1;
+    this.maxValue += range * 0.1;
+  }
+  
+  /**
+   * Démarre l'animation
+   */
+  startAnimation() {
+    this.animationStartTime = Date.now();
+    this.animationProgress = 0;
+    
+    const animate = () => {
+      const elapsed = Date.now() - this.animationStartTime;
+      this.animationProgress = Math.min(elapsed / this.animationDuration, 1);
+      
+      // Easing
+      this.animationProgress = this.easeOutCubic(this.animationProgress);
+      
+      this.requestRender();
+      
+      if (this.animationProgress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  }
+  
+  /**
+   * Fonction d'easing
+   */
+  easeOutCubic(t) {
+    return 1 - Math.pow(1 - t, 3);
+  }
+  
+  /**
+   * Convertit une valeur en coordonnée Y
+   */
+  valueToY(value) {
+    const range = this.maxValue - this.minValue;
+    const ratio = (value - this.minValue) / range;
+    return this.chartArea.y + this.chartArea.height - (ratio * this.chartArea.height);
+  }
+  
+  /**
+   * Convertit un index en coordonnée X
+   */
+  indexToX(index, total) {
+    const step = this.chartArea.width / (total - 1 || 1);
+    return this.chartArea.x + index * step;
+  }
+  
+  /**
+   * Dessine le titre
+   */
+  drawTitle(ctx) {
+    if (!this.title) return;
+    
+    ctx.save();
+    ctx.fillStyle = this.platform === 'material' ? '#000000' : '#000000';
+    ctx.font = 'bold 18px -apple-system, Roboto, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.title, this.x + this.width / 2, this.y + this.titleHeight / 2);
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine la grille
+   */
+  drawGrid(ctx) {
+    if (!this.showGrid || this.type === 'pie' || this.type === 'doughnut') return;
+    
+    ctx.save();
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
+    ctx.lineWidth = 1;
+    
+    // Lignes horizontales
+    const steps = 5;
+    for (let i = 0; i <= steps; i++) {
+      const y = this.y + this.chartArea.y + (this.chartArea.height / steps) * i;
+      
+      ctx.beginPath();
+      ctx.moveTo(this.x + this.chartArea.x, y);
+      ctx.lineTo(this.x + this.chartArea.x + this.chartArea.width, y);
+      ctx.stroke();
+      
+      // Labels
+      const value = this.maxValue - (this.maxValue - this.minValue) * (i / steps);
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
+      ctx.font = '12px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(value.toFixed(1), this.x + this.chartArea.x - 5, y);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un graphique en ligne
+   */
+  drawLineChart(ctx) {
+    const numPoints = this.data.labels.length;
+    
+    this.data.datasets.forEach((dataset, datasetIndex) => {
+      const color = dataset.color || this.colors[datasetIndex % this.colors.length];
+      
+      ctx.save();
+      
+      // Zone remplie (area chart)
+      if (this.lineOptions.fill || this.type === 'area') {
+        ctx.beginPath();
+        ctx.moveTo(
+          this.x + this.indexToX(0, numPoints),
+          this.y + this.valueToY(0)
+        );
+        
+        dataset.data.forEach((value, index) => {
+          const x = this.x + this.indexToX(index, numPoints);
+          const y = this.y + this.valueToY(value * this.animationProgress);
+          
+          if (index === 0) {
+            ctx.lineTo(x, y);
+          } else {
+            // Courbe de Bézier pour lisser
+            const prevX = this.x + this.indexToX(index - 1, numPoints);
+            const prevY = this.y + this.valueToY(dataset.data[index - 1] * this.animationProgress);
+            const cpX = prevX + (x - prevX) * this.lineOptions.tension;
+            
+            ctx.bezierCurveTo(cpX, prevY, cpX, y, x, y);
+          }
+        });
+        
+        ctx.lineTo(
+          this.x + this.indexToX(numPoints - 1, numPoints),
+          this.y + this.valueToY(0)
+        );
+        ctx.closePath();
+        
+        ctx.fillStyle = color + '33'; // 20% opacité
+        ctx.fill();
+      }
+      
+      // Ligne
+      ctx.beginPath();
+      dataset.data.forEach((value, index) => {
+        const x = this.x + this.indexToX(index, numPoints);
+        const y = this.y + this.valueToY(value * this.animationProgress);
+        
+        if (index === 0) {
+          ctx.moveTo(x, y);
+        } else {
+          const prevX = this.x + this.indexToX(index - 1, numPoints);
+          const prevY = this.y + this.valueToY(dataset.data[index - 1] * this.animationProgress);
+          const cpX = prevX + (x - prevX) * this.lineOptions.tension;
+          
+          ctx.bezierCurveTo(cpX, prevY, cpX, y, x, y);
+        }
+      });
+      
+      ctx.strokeStyle = color;
+      ctx.lineWidth = this.lineOptions.lineWidth;
+      ctx.stroke();
+      
+      // Points
+      dataset.data.forEach((value, index) => {
+        const x = this.x + this.indexToX(index, numPoints);
+        const y = this.y + this.valueToY(value * this.animationProgress);
+        
+        const isHovered = this.hoveredIndex === index && 
+                         this.hoveredDatasetIndex === datasetIndex;
+        const radius = isHovered ? this.lineOptions.pointRadius * 1.5 : 
+                                  this.lineOptions.pointRadius;
+        
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fill();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        
+        // Valeur au survol
+        if (isHovered && this.showValues) {
+          ctx.fillStyle = color;
+          ctx.font = 'bold 12px -apple-system, Roboto, sans-serif';
+          ctx.textAlign = 'center';
+          ctx.fillText(value.toFixed(1), x, y - 15);
+        }
+      });
+      
+      ctx.restore();
+    });
+    
+    // Labels X
+    this.drawXLabels(ctx);
+  }
+  
+  /**
+   * Dessine un graphique en barres
+   */
+  drawBarChart(ctx) {
+    const numBars = this.data.labels.length;
+    const numDatasets = this.data.datasets.length;
+    const groupWidth = this.chartArea.width / numBars;
+    const barWidth = this.barOptions.barWidth || 
+                     (groupWidth - this.barOptions.groupGap * 2) / numDatasets - 
+                     this.barOptions.barGap;
+    
+    this.data.datasets.forEach((dataset, datasetIndex) => {
+      const color = dataset.color || this.colors[datasetIndex % this.colors.length];
+      
+      dataset.data.forEach((value, index) => {
+        const groupX = this.x + this.chartArea.x + index * groupWidth;
+        const barX = groupX + this.barOptions.groupGap + 
+                    datasetIndex * (barWidth + this.barOptions.barGap);
+        
+        const barHeight = Math.abs(this.valueToY(value) - this.valueToY(0)) * 
+                         this.animationProgress;
+        const barY = this.y + this.valueToY(value * this.animationProgress);
+        
+        const isHovered = this.hoveredIndex === index && 
+                         this.hoveredDatasetIndex === datasetIndex;
+        
+        ctx.fillStyle = isHovered ? this.adjustColor(color, 20) : color;
+        ctx.fillRect(barX, barY, barWidth, barHeight);
+        
+        // Bordure
+        if (this.platform === 'material') {
+          ctx.strokeStyle = this.adjustColor(color, -20);
+          ctx.lineWidth = 1;
+          ctx.strokeRect(barX, barY, barWidth, barHeight);
+        }
+        
+        // Valeur
+        if (this.showValues || isHovered) {
+          ctx.fillStyle = '#000000';
+          ctx.font = '11px -apple-system, Roboto, sans-serif';
+          ctx.textAlign = 'center';
+          ctx.fillText(
+            value.toFixed(1),
+            barX + barWidth / 2,
+            barY - 5
+          );
+        }
+      });
+    });
+    
+    // Labels X
+    this.drawXLabels(ctx);
+  }
+  
+  /**
+   * Dessine un graphique circulaire (Pie/Doughnut)
+   */
+  drawPieChart(ctx) {
+    const centerX = this.x + this.width / 2;
+    const centerY = this.y + this.chartArea.y + this.chartArea.height / 2;
+    const radius = Math.min(this.chartArea.width, this.chartArea.height) / 2 - 20;
+    const innerRadius = this.type === 'doughnut' ? 
+                       (this.pieOptions.innerRadius || radius * 0.5) : 0;
+    
+    let currentAngle = this.pieOptions.startAngle;
+    const dataset = this.data.datasets[0];
+    
+    dataset.data.forEach((value, index) => {
+      const sliceAngle = (value / this.totalValue) * Math.PI * 2 * this.animationProgress;
+      const color = dataset.colors?.[index] || this.colors[index % this.colors.length];
+      
+      const isHovered = this.hoveredIndex === index;
+      const displayRadius = isHovered ? radius + 10 : radius;
+      
+      // Slice
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, displayRadius, currentAngle, currentAngle + sliceAngle);
+      ctx.arc(centerX, centerY, innerRadius, currentAngle + sliceAngle, currentAngle, true);
+      ctx.closePath();
+      
+      ctx.fillStyle = color;
+      ctx.fill();
+      
+      // Bordure
+      ctx.strokeStyle = '#FFFFFF';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      ctx.restore();
+      
+      // Label
+      if (this.animationProgress > 0.8) {
+        const labelAngle = currentAngle + sliceAngle / 2;
+        const labelRadius = displayRadius * this.pieOptions.labelDistance;
+        const labelX = centerX + Math.cos(labelAngle) * labelRadius;
+        const labelY = centerY + Math.sin(labelAngle) * labelRadius;
+        
+        ctx.fillStyle = '#000000';
+        ctx.font = '12px -apple-system, Roboto, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        
+        const percentage = ((value / this.totalValue) * 100).toFixed(1);
+        ctx.fillText(`${percentage}%`, labelX, labelY);
+        
+        if (this.data.labels[index]) {
+          ctx.font = 'bold 11px -apple-system, Roboto, sans-serif';
+          ctx.fillText(this.data.labels[index], labelX, labelY + 15);
+        }
+      }
+      
+      currentAngle += sliceAngle;
+    });
+    
+    // Valeur centrale pour doughnut
+    if (this.type === 'doughnut' && this.animationProgress > 0.8) {
+      ctx.fillStyle = '#000000';
+      ctx.font = 'bold 24px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.totalValue.toFixed(0), centerX, centerY);
+    }
+  }
+  
+  /**
+   * Dessine les labels de l'axe X
+   */
+  drawXLabels(ctx) {
+    ctx.save();
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+    ctx.font = '12px -apple-system, Roboto, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'top';
+    
+    this.data.labels.forEach((label, index) => {
+      const x = this.x + this.indexToX(index, this.data.labels.length);
+      const y = this.y + this.chartArea.y + this.chartArea.height + 10;
+      ctx.fillText(label, x, y);
+    });
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine la légende
+   */
+  drawLegend(ctx) {
+    if (!this.showLegend) return;
+    
+    const legendY = this.y + this.height - this.legendHeight + 10;
+    const itemWidth = 120;
+    const itemsPerRow = Math.floor(this.width / itemWidth);
+    
+    ctx.save();
+    
+    this.data.datasets.forEach((dataset, index) => {
+      const color = dataset.color || this.colors[index % this.colors.length];
+      const row = Math.floor(index / itemsPerRow);
+      const col = index % itemsPerRow;
+      
+      const x = this.x + col * itemWidth + 20;
+      const y = legendY + row * 25;
+      
+      // Carré de couleur
+      ctx.fillStyle = color;
+      ctx.fillRect(x, y, 12, 12);
+      
+      // Label
+      ctx.fillStyle = '#000000';
+      ctx.font = '12px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(dataset.label || `Dataset ${index + 1}`, x + 18, y + 6);
+    });
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Ajuste la luminosité d'une couleur
+   */
+  adjustColor(color, amount) {
+    const num = parseInt(color.replace('#', ''), 16);
+    const r = Math.min(255, Math.max(0, (num >> 16) + amount));
+    const g = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + amount));
+    const b = Math.min(255, Math.max(0, (num & 0x0000FF) + amount));
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+  }
+  
+  /**
+   * Gère le survol
+   */
+  handleHover(x, y) {
+    const relativeX = x - this.x;
+    const relativeY = y - this.y;
+    
+    if (this.type === 'pie' || this.type === 'doughnut') {
+      this.handlePieHover(relativeX, relativeY);
+    } else if (this.type === 'line' || this.type === 'area') {
+      this.handleLineHover(relativeX, relativeY);
+    } else if (this.type === 'bar') {
+      this.handleBarHover(relativeX, relativeY);
+    }
+  }
+  
+  /**
+   * Gère le survol pour les graphiques circulaires
+   */
+  handlePieHover(x, y) {
+    const centerX = this.width / 2;
+    const centerY = this.chartArea.y + this.chartArea.height / 2;
+    
+    const dx = x - centerX;
+    const dy = y - centerY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx);
+    
+    const radius = Math.min(this.chartArea.width, this.chartArea.height) / 2 - 20;
+    const innerRadius = this.type === 'doughnut' ? (this.pieOptions.innerRadius || radius * 0.5) : 0;
+    
+    if (distance >= innerRadius && distance <= radius) {
+      let currentAngle = this.pieOptions.startAngle;
+      const dataset = this.data.datasets[0];
+      
+      for (let i = 0; i < dataset.data.length; i++) {
+        const sliceAngle = (dataset.data[i] / this.totalValue) * Math.PI * 2;
+        
+        let normalizedAngle = angle - this.pieOptions.startAngle;
+        if (normalizedAngle < 0) normalizedAngle += Math.PI * 2;
+        
+        if (normalizedAngle >= (currentAngle - this.pieOptions.startAngle) && 
+            normalizedAngle <= (currentAngle - this.pieOptions.startAngle + sliceAngle)) {
+          this.hoveredIndex = i;
+          this.requestRender();
+          return;
+        }
+        
+        currentAngle += sliceAngle;
+      }
+    }
+    
+    this.hoveredIndex = -1;
+    this.requestRender();
+  }
+  
+  /**
+   * Gère le survol pour les graphiques en ligne
+   */
+  handleLineHover(x, y) {
+    let closestIndex = -1;
+    let closestDataset = -1;
+    let closestDistance = Infinity;
+    
+    this.data.datasets.forEach((dataset, datasetIndex) => {
+      dataset.data.forEach((value, index) => {
+        const pointX = this.indexToX(index, this.data.labels.length);
+        const pointY = this.valueToY(value);
+        
+        const dx = x - pointX;
+        const dy = y - pointY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < closestDistance && distance < 20) {
+          closestDistance = distance;
+          closestIndex = index;
+          closestDataset = datasetIndex;
+        }
+      });
+    });
+    
+    if (this.hoveredIndex !== closestIndex || this.hoveredDatasetIndex !== closestDataset) {
+      this.hoveredIndex = closestIndex;
+      this.hoveredDatasetIndex = closestDataset;
+      this.requestRender();
+    }
+  }
+  
+  /**
+   * Gère le survol pour les graphiques en barres
+   */
+  handleBarHover(x, y) {
+    const numBars = this.data.labels.length;
+    const numDatasets = this.data.datasets.length;
+    const groupWidth = this.chartArea.width / numBars;
+    const barWidth = this.barOptions.barWidth || 
+                     (groupWidth - this.barOptions.groupGap * 2) / numDatasets - 
+                     this.barOptions.barGap;
+    
+    let found = false;
+    
+    this.data.datasets.forEach((dataset, datasetIndex) => {
+      dataset.data.forEach((value, index) => {
+        const groupX = this.chartArea.x + index * groupWidth;
+        const barX = groupX + this.barOptions.groupGap + 
+                    datasetIndex * (barWidth + this.barOptions.barGap);
+        const barY = this.valueToY(value);
+        const barHeight = Math.abs(this.valueToY(value) - this.valueToY(0));
+        
+        if (x >= barX && x <= barX + barWidth && 
+            y >= barY && y <= barY + barHeight) {
+          this.hoveredIndex = index;
+          this.hoveredDatasetIndex = datasetIndex;
+          found = true;
+        }
+      });
+    });
+    
+    if (!found) {
+      this.hoveredIndex = -1;
+      this.hoveredDatasetIndex = -1;
+    }
+    
+    this.requestRender();
+  }
+  
+  /**
+   * Vérifie si un point est dans le composant
+   */
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.height;
+  }
+  
+  /**
+   * Gère le mouvement de la souris
+   */
+  onMove(x, y) {
+    this.handleHover(x, y);
+  }
+  
+  /**
+   * Demande un nouveau rendu
+   */
+  requestRender() {
+    if (this.framework && this.framework.requestRender) {
+      this.framework.requestRender();
+    }
+  }
+  
+  /**
+   * Met à jour les données du graphique
+   */
+  updateData(newData) {
+    this.data = newData;
+    this.calculateScales();
+    
+    if (this.animated) {
+      this.startAnimation();
+    } else {
+      this.requestRender();
+    }
+  }
+  
+  /**
+   * Dessine le composant
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Background
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    
+    // Bordure
+    if (this.platform === 'material') {
+      ctx.strokeStyle = '#E0E0E0';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(this.x, this.y, this.width, this.height);
+    }
+    
+    // Titre
+    this.drawTitle(ctx);
+    
+    // Grille
+    this.drawGrid(ctx);
+    
+    // Graphique selon le type
+    switch (this.type) {
+      case 'line':
+      case 'area':
+        this.drawLineChart(ctx);
+        break;
+      case 'bar':
+        this.drawBarChart(ctx);
+        break;
+      case 'pie':
+      case 'doughnut':
+        this.drawPieChart(ctx);
+        break;
+    }
+    
+    // Légende
+    this.drawLegend(ctx);
+    
+    ctx.restore();
+  }
+}
+
+export default Chart;

package/components/Tabs.js

@@ -8,248 +8,408 @@ import Component from '../core/Component.js';
 class Tabs extends Component {
   constructor(framework, options = {}) {
     super(framework, options);
+    
     this.tabs = options.tabs || [];
     this.selectedIndex = options.selectedIndex || 0;
     this.onChange = options.onChange;
     this.platform = framework.platform;
-    this.height = options.height || 48;
-    this.indicatorColor = options.indicatorColor || (framework.platform === 'material' ? '#6200EE' : '#007AFF');
-    this.textColor = options.textColor || '#000000';
+    this.height = options.height || 56;
+    
+    this.indicatorColor = options.indicatorColor || 
+      (this.platform === 'material' ? '#6200EE' : '#007AFF');
+    this.textColor = options.textColor || 
+      (this.platform === 'material' ? '#000000' : '#8E8E93');
     this.selectedTextColor = options.selectedTextColor || this.indicatorColor;
     
-    // 🔹 Système de ripples amélioré
+    // Ripple pour Material
     this.ripples = [];
     this.animationFrame = null;
     this.lastAnimationTime = 0;
     
-    // 🔹 Pour détecter les doubles événements
-    this.lastEventTime = 0;
-    this.lastEventCoords = { x: -1, y: -1 };
+    // Animation pour Cupertino
+    this.pressedTabIndex = -1;
+    this.pressAnimation = 0;
+    
+    // ✅ Structure: tableau de tableaux d'enfants
+    // tabChildren[0] = [enfants du tab 0]
+    // tabChildren[1] = [enfants du tab 1]
+    this.tabChildren = this.tabs.map(() => []);
     
+    // ✅ Configuration: nombre d'enfants par tab
+    // Si défini, distribue automatiquement les enfants
+    // Ex: childrenPerTab = [3, 2] => 3 enfants pour tab 0, 2 pour tab 1
+    this.childrenPerTab = options.childrenPerTab || null;
+    this.currentTabIndex = 0;
+    this.childAddCount = 0; // Compteur d'enfants ajoutés
+    
+    // Gestionnaire de clic
     this.onPress = this.handlePress.bind(this);
+    
+    // Position par défaut
+    this.position = options.position || (this.platform === 'cupertino' ? 'bottom' : 'top');
+    
+    if (this.position === 'bottom' && !options.y) {
+      this.y = framework.height - this.height;
+    } else if (this.position === 'top' && !options.y) {
+      this.y = options.appbar || 0;
+    }
+    
+    // Zone de contenu (sous les tabs)
+    this.contentY = this.y + this.height;
+    this.contentHeight = framework.height - this.height;
   }
 
   /**
-   * Démarre l'animation des ripples
-   * @private
+   * ✅ Définit le tab actuel pour l'ajout d'enfants (appelé par UIBuilder)
+   * @param {number} tabIndex - Index du tab
    */
-  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;
-        }
-      }
+  setCurrentTab(tabIndex) {
+    if (tabIndex >= 0 && tabIndex < this.tabChildren.length) {
+      this.currentTabIndex = tabIndex;
+    }
+  }
 
-      // Redessiner si nécessaire
-      if (needsUpdate) {
-        this.requestRender();
+  /**
+   * ✅ Ajoute un enfant au tab en cours
+   * Distribution automatique: divise les enfants équitablement entre les tabs
+   * @param {Component} child - Composant enfant
+   * @returns {Component} L'enfant ajouté
+   */
+  add(child) {
+    // Coordonnées relatives à la zone de contenu
+    child.x = child.x || 0;
+    child.y = child.y || 0;
+    
+    // Dimensions par défaut
+    if (!child.width) child.width = this.framework.width;
+    
+    // Marquer l'enfant comme appartenant à ce Tabs
+    child.parentTabs = this;
+    
+    // ✅ Calculer quel tab doit recevoir cet enfant
+    // On distribue équitablement les enfants entre les tabs
+    const totalChildren = this.tabChildren.reduce((sum, arr) => sum + arr.length, 0);
+    const childrenPerTab = Math.ceil(totalChildren / this.tabs.length);
+    
+    // Trouver le premier tab qui n'est pas encore plein
+    let targetTabIndex = 0;
+    for (let i = 0; i < this.tabChildren.length; i++) {
+      if (this.tabChildren[i].length < childrenPerTab) {
+        targetTabIndex = i;
+        break;
       }
-
-      // Continuer l'animation
-      if (this.ripples.length > 0) {
-        this.animationFrame = requestAnimationFrame(animate);
-      } else {
-        this.animationFrame = null;
-        this.lastAnimationTime = 0;
+      // Si tous les tabs ont childrenPerTab enfants, recommencer à 0
+      if (i === this.tabChildren.length - 1) {
+        targetTabIndex = totalChildren % this.tabs.length;
       }
-    };
-
-    if (this.ripples.length > 0 && !this.animationFrame) {
-      this.animationFrame = requestAnimationFrame(animate);
     }
+    
+    // Ajouter au tableau du tab calculé
+    this.tabChildren[targetTabIndex].push(child);
+    
+    // Visibilité selon le tab sélectionné
+    child.visible = (targetTabIndex === this.selectedIndex);
+    
+    return child;
   }
 
   /**
-   * Demander un redessin
-   * @private
+   * ✅ Met à jour la visibilité des enfants selon l'onglet sélectionné
    */
-  requestRender() {
-    if (this.framework && this.framework.requestRender) {
-      this.framework.requestRender();
-    }
+  updateChildrenVisibility() {
+    this.tabChildren.forEach((children, tabIdx) => {
+      const isVisible = (tabIdx === this.selectedIndex);
+      children.forEach(child => {
+        child.visible = isVisible;
+      });
+    });
   }
 
   /**
-   * Nettoyer l'animation lors de la destruction
+   * ✅ Retourne tous les enfants du tab sélectionné
    */
-  destroy() {
-    if (this.animationFrame) {
-      cancelAnimationFrame(this.animationFrame);
-      this.animationFrame = null;
-    }
-    if (super.destroy) {
-      super.destroy();
-    }
+  getActiveChildren() {
+    return this.tabChildren[this.selectedIndex] || [];
   }
 
   handlePress(x, y) {
-    const now = performance.now();
+    // D'abord vérifier les clics sur les enfants
+    if (y > this.y + this.height && this.checkChildClick(x, y)) {
+      return;
+    }
+    
+    // Ensuite vérifier les clics sur la barre de tabs
+    if (!this.isPointInside(x, y)) return;
     
-    // 🔹 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 tabWidth = this.width / this.tabs.length;
+    const index = Math.floor((x - this.x) / tabWidth);
     
-    const isDoubleEvent = deltaX < 2 && deltaY < 2 && deltaTime < 50;
+    if (index < 0 || index >= this.tabs.length) return;
     
-    if (isDoubleEvent) {
-      return; // Ignorer le double événement
+    // Ripple pour Material
+    if (this.platform === 'material') {
+      const rippleCenterX = this.x + index * tabWidth + tabWidth / 2;
+      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
+      });
+      
+      if (!this.animationFrame) this.startRippleAnimation();
+    }
+    // Animation Cupertino
+    else if (this.platform === 'cupertino') {
+      this.pressedTabIndex = index;
+      this.pressAnimation = 1;
+      this.requestRender();
+      setTimeout(() => this.animatePressRelease(), 100);
     }
     
-    // 🔹 Enregistrer cet événement
-    this.lastEventTime = now;
-    this.lastEventCoords = { x, y };
+    // Changement d'onglet
+    if (index !== this.selectedIndex) {
+      this.selectedIndex = index;
+      this.updateChildrenVisibility();
+      if (this.onChange) this.onChange(index, this.tabs[index]);
+    }
     
-    const tabWidth = this.width / this.tabs.length;
-    const index = Math.floor((x - this.x) / tabWidth);
+    this.requestRender();
+  }
+
+  /**
+   * ✅ Vérifie les clics sur les enfants du tab actif
+   */
+  checkChildClick(x, y) {
+    const adjustedY = y - (this.framework.scrollOffset || 0);
+    const activeChildren = this.getActiveChildren();
     
-    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
-        });
+    // Parcourir en ordre inverse (derniers ajoutés = au dessus)
+    for (let i = activeChildren.length - 1; i >= 0; i--) {
+      const child = activeChildren[i];
+      
+      if (!child.visible) continue;
+      
+      // Calculer les coordonnées absolues de l'enfant
+      const childX = this.x + child.x;
+      const childY = this.contentY + child.y;
+      
+      // Vérifier si le clic est dans l'enfant
+      if (adjustedY >= childY && 
+          adjustedY <= childY + child.height &&
+          x >= childX && 
+          x <= childX + child.width) {
         
-        // Démarrer l'animation si elle n'est pas en cours
-        if (!this.animationFrame) {
-          this.startRippleAnimation();
+        // Si l'enfant a un onClick ou onPress, le déclencher
+        if (child.onClick) {
+          child.onClick();
+          return true;
+        } else if (child.onPress) {
+          child.onPress(x, adjustedY);
+          return true;
         }
-        
-        // Forcer un redessin
-        this.requestRender();
       }
+    }
+    
+    return false;
+  }
 
-      // Changement d'onglet
-      if (index !== this.selectedIndex) {
-        this.selectedIndex = index;
-        if (this.onChange) this.onChange(index, this.tabs[index]);
-      }
+  animatePressRelease() {
+    let startTime = null;
+    const duration = 150;
+    
+    const animate = (timestamp) => {
+      if (!startTime) startTime = timestamp;
+      const progress = Math.min((timestamp - startTime) / duration, 1);
       
+      this.pressAnimation = 1 - progress;
       this.requestRender();
-    }
+      
+      if (progress < 1) requestAnimationFrame(animate);
+      else {
+        this.pressAnimation = 0;
+        this.pressedTabIndex = -1;
+      }
+    };
+    
+    requestAnimationFrame(animate);
   }
 
   isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
+    return x >= this.x && x <= this.x + this.width && 
            y >= this.y && y <= this.y + this.height;
   }
 
+  startRippleAnimation() {
+    const animate = (timestamp) => {
+      if (!this.lastAnimationTime) this.lastAnimationTime = timestamp;
+      const deltaTime = timestamp - this.lastAnimationTime;
+      this.lastAnimationTime = timestamp;
+      
+      let needsUpdate = false;
+      
+      for (let i = this.ripples.length - 1; i >= 0; i--) {
+        const ripple = this.ripples[i];
+        
+        if (ripple.radius < ripple.maxRadius) 
+          ripple.radius += (ripple.maxRadius / 300) * deltaTime;
+        
+        if (ripple.radius >= ripple.maxRadius * 0.4) {
+          ripple.opacity -= (0.003 * deltaTime);
+          if (ripple.opacity < 0) ripple.opacity = 0;
+        }
+        
+        if (ripple.opacity <= 0 && ripple.radius >= ripple.maxRadius * 0.95) 
+          this.ripples.splice(i, 1);
+        
+        needsUpdate = true;
+      }
+      
+      if (needsUpdate) this.requestRender();
+      
+      if (this.ripples.length > 0) 
+        this.animationFrame = requestAnimationFrame(animate);
+      else 
+        this.animationFrame = null;
+    };
+    
+    if (this.ripples.length && !this.animationFrame) 
+      this.animationFrame = requestAnimationFrame(animate);
+  }
+
+  requestRender() {
+    if (this.framework && this.framework.requestRender) 
+      this.framework.requestRender();
+  }
+
+  /**
+   * ✅ Dessine les tabs et les enfants du tab actif
+   */
   draw(ctx) {
     ctx.save();
     
+    // ===== DESSINER LA BARRE DE TABS =====
+    
     // Background
-    ctx.fillStyle = '#FFFFFF';
+    ctx.fillStyle = this.platform === 'material' ? '#FFF' : '#F2F2F7';
     ctx.fillRect(this.x, this.y, this.width, this.height);
     
-    // 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();
-
-    const tabWidth = this.width / this.tabs.length;
-
-    // 🔹 Dessiner les ripples Material EN PREMIER
     if (this.platform === 'material') {
-      this.drawRipples(ctx, tabWidth);
+      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();
     }
-
-    // Dessiner les onglets
+    
+    const tabWidth = this.width / this.tabs.length;
+    
+    // Ripples
+    if (this.platform === 'material') this.drawRipples(ctx, tabWidth);
+    
     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;
+      
+      // Cupertino pressed effect
+      if (this.platform === 'cupertino' && i === this.pressedTabIndex) {
+        ctx.fillStyle = `rgba(0,122,255,${0.1 * this.pressAnimation})`;
+        ctx.fillRect(tabX, this.y, tabWidth, this.height);
+      }
+      
+      // Indicators
+      if (this.platform === 'cupertino' && isSelected) {
+        ctx.fillStyle = '#007AFF';
+        ctx.fillRect(tabX + tabWidth/2 - 15, this.y + this.height - 2, 30, 2);
+      }
+      
       const color = isSelected ? this.selectedTextColor : this.textColor;
-
-      // Icône (facultative)
+      
+      // Icon
       if (tab.icon) {
-        ctx.font = '20px sans-serif';
+        ctx.font = '24px -apple-system, sans-serif';
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
         ctx.fillStyle = color;
-        ctx.fillText(tab.icon, tabX + tabWidth / 2, this.y + 16);
+        const iconY = this.platform === 'material' ? this.y + 18 : this.y + 20;
+        ctx.fillText(tab.icon, tabX + tabWidth/2, iconY);
       }
-
+      
       // Label
-      ctx.font = `${isSelected ? 'bold ' : ''}14px -apple-system, Roboto, sans-serif`;
+      const fontSize = this.platform === 'material' ? 14 : 12;
+      const fontWeight = isSelected ? '600' : '400';
+      ctx.font = `${fontWeight} ${fontSize}px -apple-system, Roboto, sans-serif`;
       ctx.fillStyle = color;
       ctx.textAlign = 'center';
       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)
+      
+      const labelY = this.platform === 'material' 
+        ? (tab.icon ? this.y + 36 : this.y + this.height / 2)
+        : (tab.icon ? this.y + 42 : this.y + this.height / 2);
+      
+      ctx.fillText(tab.label, tabX + tabWidth/2, labelY);
+      
+      // Material indicator
       if (isSelected && this.platform === 'material') {
         ctx.fillStyle = this.indicatorColor;
-        ctx.fillRect(tabX, this.y + this.height - 2, tabWidth, 2);
+        ctx.fillRect(tabX, this.y + this.height - 3, tabWidth, 3);
       }
     }
-
+    
     ctx.restore();
+    
+    // ===== DESSINER LES ENFANTS DU TAB ACTIF =====
+    const activeChildren = this.getActiveChildren();
+    
+    for (let child of activeChildren) {
+      if (child.visible) {
+        ctx.save();
+        
+        // Sauvegarder les coordonnées originales
+        const originalX = child.x;
+        const originalY = child.y;
+        
+        // Ajuster les coordonnées pour être absolues
+        child.x = this.x + originalX;
+        child.y = this.contentY + originalY;
+        
+        // Dessiner l'enfant
+        child.draw(ctx);
+        
+        // Restaurer les coordonnées originales
+        child.x = originalX;
+        child.y = originalY;
+        
+        ctx.restore();
+      }
+    }
   }
 
-  /**
-   * Dessine les ripples (Material)
-   * @private
-   */
   drawRipples(ctx, tabWidth) {
-    // Sauvegarder le contexte
     ctx.save();
-    
-    // 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.fillStyle = this.indicatorColor;
       ctx.beginPath();
-      ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2);
+      ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI*2);
       ctx.fill();
     }
     
-    // Restaurer le contexte
     ctx.restore();
   }
+
+  destroy() {
+    if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
+    if (super.destroy) super.destroy();
+  }
 }
 
 export default Tabs;

package/core/CanvasFramework.js

@@ -51,6 +51,7 @@ import PasswordInput from '../components/PasswordInput.js';
 import InputTags from '../components/InputTags.js';
 import InputDatalist from '../components/InputDatalist.js';
 import Banner from '../components/Banner.js';
+import Chart from '../components/Chart.js';
 
 // Utils
 import SafeArea from '../utils/SafeArea.js';
@@ -121,6 +122,7 @@ const FIXED_COMPONENT_TYPES = new Set([
   Drawer,
   Dialog,
   Modal,
+  Tabs,
   FAB,
   Toast,
   Banner,

package/core/UIBuilder.js

@@ -52,6 +52,7 @@ import PasswordInput from '../components/PasswordInput.js';
 import InputTags from '../components/InputTags.js';
 import InputDatalist from '../components/InputDatalist.js';
 import Banner from '../components/Banner.js';
+import Chart from '../components/Chart.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -131,6 +132,8 @@ const Components = {
   Column,
   Positioned,
   Banner,
+  Chart,
+  QRCode,
   Stack
 };
 

package/index.js

@@ -59,6 +59,7 @@ 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';
+export { default as Chart } from './components/Chart.js';
 
 // Utils
 export { default as SafeArea } from './utils/SafeArea.js';
@@ -100,7 +101,7 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.3.19';
+export const VERSION = '0.3.21';
 
 
 

package/package.json

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