Feature/improve cpc plus mode0 hue diversity (#311)

* feat(quantization): improve hue diversity for CPC Plus mode 0

- Reduce hue bucket size from 45° to 30° (12 families instead of 8)
- Lower minimum hue distance from 35° to 25° for more nuances
- Remove mega-family grouping to allow one representative per bucket
- Update tests to reflect new behavior

This allows mode 0 (16 colors) to use a much more diverse palette
covering all major hues: red, orange, yellow, chartreuse, green,
cyan-green, cyan, blue-cyan, blue, violet, magenta, and pink.

* feat(resize): add Cover (crop to fill) resize mode

- Add new 'cover' resize mode that scales image to fill target dimensions
  while cropping excess (like CSS object-fit: cover)
- Image is centered, cropping is symmetric on both sides
- Preserves source image aspect ratio
- Update quantization to use croppedImageAtom for all modes
  (better color sampling at high resolution)
- Support cover mode in EGX and Mode R pipelines
- Update UI with new radio button option

Author: IIIvan37

src/app/store/config/resize-types.ts

@@ -16,6 +16,7 @@ export type CPCMode = 0 | 1 | 2
 export type ResizeMode =
   | 'auto' // Smart resize with CPC aspect ratio correction (RECOMMENDED)
   | 'origin' // Keep original selection size (pixel-perfect, no scaling)
+  | 'cover' // Scale to fill target dimensions, cropping excess (crop cover)
 
 /**
  * Resize configuration (simplified - no manual dimensions)

src/app/store/preview/egx/egx-image.ts

@@ -78,8 +78,8 @@ export const egxNormalizedImageAtom = atom(async (get) => {
   // 2. Resize based on mode
   let resizedImageData: ImageData
 
-  if (resizeMode === 'origin') {
-    // Mode origin: use applyResize which handles the pixel ratio
+  if (resizeMode === 'origin' || resizeMode === 'cover') {
+    // Mode origin/cover: use applyResize which handles the pixel ratio
     const relativeSelection: Selection = {
       sx: 0,
       sy: 0,

src/app/store/preview/mode-r/mode-r-image.ts

@@ -169,7 +169,7 @@ export const modeRSourceImageAtom = atom(async (get) => {
   // In 'origin' mode, use the cropped image BEFORE the standard resize pipeline
   // because the standard pipeline compresses to Mode 0 dimensions (160×200)
   // but Mode R needs the full 320×200 resolution
-  // In 'auto' mode, use resizedImageAtom (NOT smoothedImageAtom) to skip horizontal smoothing
+  // In 'auto' and 'cover' modes, use resizedImageAtom (NOT smoothedImageAtom) to skip horizontal smoothing
   // Mode R has its own sub-pixel resolution, horizontal smoothing would blur it
   const sourceImage =
     resizeMode === 'origin'
@@ -200,7 +200,7 @@ export const modeRSourceImageAtom = atom(async (get) => {
   // Resize to Mode R target dimensions
   // Use different resize strategy based on resize mode:
   // - origin: pixel-perfect 1:1 mapping (like Mode 1)
-  // - auto: fit with aspect ratio preservation
+  // - auto/cover: fit with aspect ratio preservation (cover already cropped by resizedImageAtom)
   const modeRImage =
     resizeMode === 'origin'
       ? resizeForModeROrigin(

src/app/store/preview/pipeline/preview-image.ts

@@ -41,10 +41,10 @@ export const normalizedImageAtom = atom(async (get) => {
 
   if (!processed) return null
 
-  // In origin mode, image is already at correct CPC dimensions
+  // In origin and cover modes, image is already at correct CPC dimensions
   // In auto mode, normalize to CPC dimensions
   const normalized =
-    resizeMode === 'origin'
+    resizeMode === 'origin' || resizeMode === 'cover'
       ? processed
       : getVisualRegionNormalized(processed, modeConfig)
 
@@ -162,7 +162,7 @@ export const previewImageAtom = atom(async (get) => {
     normalized.height
   )
 
-  // Positioning for auto mode (origin handles its own centering)
+  // Positioning for auto mode (origin and cover handle their own positioning)
   // In auto mode, getVisualRegionNormalized returns variable-sized ImageData (scaledW × scaledH)
   // that must be placed in canvas at target size (160x200 or 320x200)
   if (resizeMode === 'auto') {

src/app/store/preview/pipeline/quantization-source.spec.ts

@@ -48,16 +48,34 @@ describe('quantizationSourceImageAtom', () => {
       }
     })
 
-    it('should use smoothedImageAtom in auto mode', async () => {
+    it('should use croppedImageAtom in auto mode for better color sampling', async () => {
+      // All modes now use croppedImageAtom for consistent high-resolution
+      // color sampling. This ensures auto and cover modes produce
+      // identical palettes for images that fit CPC proportions.
       store.set(resizeModeAtom, 'auto')
 
       const sourceImage = await store.get(quantizationSourceImageAtom)
 
-      // In auto mode, we expect the full smoothed image (160x200)
+      // In auto mode, we now use the cropped image (same as origin)
+      // for better color sampling at high resolution
       expect(sourceImage).toBeDefined()
       if (sourceImage) {
-        expect(sourceImage.width).toBe(160)
-        expect(sourceImage.height).toBe(200)
+        expect(sourceImage.width).toBe(2)
+        expect(sourceImage.height).toBe(5)
+      }
+    })
+
+    it('should use croppedImageAtom in cover mode for consistent palette', async () => {
+      // Cover mode should produce the same palette as auto for images
+      // that exactly match CPC proportions
+      store.set(resizeModeAtom, 'cover')
+
+      const sourceImage = await store.get(quantizationSourceImageAtom)
+
+      expect(sourceImage).toBeDefined()
+      if (sourceImage) {
+        expect(sourceImage.width).toBe(2)
+        expect(sourceImage.height).toBe(5)
       }
     })
   })

src/app/store/preview/pipeline/quantization.ts

@@ -20,14 +20,13 @@ import {
   autoDistinctMappingAtom,
   cpcHardwareAtom,
   effectiveModeConfigAtom,
-  paletteStrategyAtom,
-  resizeModeAtom
+  paletteStrategyAtom
 } from '../../config/config'
 import {
   lockedEmptySlotsCountAtom,
   lockedVectorsAtom
 } from '../../palette/palette'
-import { croppedImageAtom, smoothedImageAtom } from './image-pipeline'
+import { croppedImageAtom } from './image-pipeline'
 
 // ============================================================================
 // BUFFER EXTRACTION
@@ -38,19 +37,14 @@ import { croppedImageAtom, smoothedImageAtom } from './image-pipeline'
  *
  * IMPORTANT: In 'origin' mode, we use croppedImageAtom (before resize/padding)
  * to avoid the black padding pixels from dominating the palette.
- * In 'auto' mode, we use smoothedImageAtom (post-resize, post-smooth).
+ * In 'auto' and 'cover' modes, we also use croppedImageAtom for better color sampling
+ * at high resolution. This ensures consistent palette extraction regardless of resize mode.
  */
 export const quantizationSourceImageAtom = atom(async (get) => {
-  const resizeMode = get(resizeModeAtom)
-
-  // In origin mode, use cropped image BEFORE padding to get true colors
-  // This prevents black padding from dominating the palette
-  if (resizeMode === 'origin') {
-    return await get(croppedImageAtom)
-  }
-
-  // In auto mode, use smoothed image (standard behavior)
-  return await get(smoothedImageAtom)
+  // Use cropped image (before resize) for all modes
+  // This provides better color sampling at high resolution
+  // and ensures consistent results between auto/cover for images that fit perfectly
+  return await get(croppedImageAtom)
 })
 
 /**

src/components/settings-panel/sections/resize-settings/resize-settings-view.tsx

@@ -38,9 +38,9 @@ export function ResizeSettingsView({
         </h3>
         <p className={styles.description}>
           <Trans>
-            Auto: redimensionnement intelligent avec correction du ratio CPC
-            (recommandé). Origin: conserve la taille de sélection originale
-            (pixel-perfect, pas de mise à l'échelle).
+            Auto: redimensionne pour que l'image tienne entièrement
+            (recommandé). Cover: remplit les dimensions cibles en rognant
+            l'excédent. Origin: conserve la taille originale (pixel-perfect).
           </Trans>
         </p>
 
@@ -60,6 +60,13 @@ export function ResizeSettingsView({
             onChange={() => onResizeModeChange('auto')}
             label={t`Auto (Smart CPC adapt)`}
           />
+          <Radio
+            name='resizeMode'
+            value='cover'
+            checked={resizeMode === 'cover'}
+            onChange={() => onResizeModeChange('cover')}
+            label={t`Cover (Crop to fill)`}
+          />
           <Radio
             name='resizeMode'
             value='origin'

src/libs/pixsaur-adapter/adapters/__tests__/regl-quantizer-mode0-selection.spec.ts

@@ -31,13 +31,13 @@ vi.mock('@/core', async (importOriginal) => {
   }
 })
 
-// Constantes de regl-quantizer.ts (version c244923)
+// Constantes de color-selection-helpers.ts
 const CPC_MODE_1_MAX_COLORS = 4
 const SATURATION_THRESHOLD_FOR_HUE = 0.2
 const SATURATION_THRESHOLD_HIGH = 0.3
 const DELTA_MIN_FOR_HUE = 0.01
-const HUE_BUCKET_SIZE_DEGREES = 45
-const MIN_HUE_DISTANCE_MODE_0 = 30
+const HUE_BUCKET_SIZE_DEGREES = 30 // 12 familles pour plus de diversité
+const MIN_HUE_DISTANCE_MODE_0 = 25 // Réduit pour permettre plus de nuances
 const MIN_RGB_DISTANCE_MODE_0 = 20
 const MIN_RGB_DISTANCE_MODE_1_2 = 80
 const HUE_HALF_RANGE = 180

src/libs/pixsaur-adapter/adapters/color-selection-helpers.spec.ts

@@ -58,8 +58,8 @@ describe('color-selection-helpers', () => {
       expect(MIN_RGB_DISTANCE_MODE_1_2).toBe(200)
     })
 
-    it('should export MIN_HUE_DISTANCE_MODE_0 as 35', () => {
-      expect(MIN_HUE_DISTANCE_MODE_0).toBe(35)
+    it('should export MIN_HUE_DISTANCE_MODE_0 as 25', () => {
+      expect(MIN_HUE_DISTANCE_MODE_0).toBe(25)
     })
 
     it('should export SATURATION_THRESHOLD_FOR_HUE as 0.2', () => {
@@ -70,8 +70,8 @@ describe('color-selection-helpers', () => {
       expect(DELTA_MIN_FOR_HUE).toBe(0.01)
     })
 
-    it('should export HUE_BUCKET_SIZE_DEGREES as 45', () => {
-      expect(HUE_BUCKET_SIZE_DEGREES).toBe(45)
+    it('should export HUE_BUCKET_SIZE_DEGREES as 30', () => {
+      expect(HUE_BUCKET_SIZE_DEGREES).toBe(30)
     })
   })
 
@@ -389,11 +389,12 @@ describe('color-selection-helpers', () => {
   // selectBucketRepresentativesWithLightness
   // ============================================================================
   describe('selectBucketRepresentativesWithLightness', () => {
-    it('should limit representatives per mega-family', () => {
-      // Buckets 0 and 1 are in mega-family 0
+    it('should select one representative per bucket for maximum hue diversity', () => {
+      // Each bucket now gets its own representative (no mega-families)
+      // With 12 buckets (30° each), this provides better hue coverage for mode 0
       const buckets: HueBucket[] = [
         {
-          bucket: 0, // Mega-family 0
+          bucket: 0, // Rouge
           colors: [
             {
               index: 0,
@@ -405,7 +406,7 @@ describe('color-selection-helpers', () => {
           totalFreq: 0.5
         },
         {
-          bucket: 1, // Mega-family 0 (same as bucket 0)
+          bucket: 1, // Orange
           colors: [
             {
               index: 1,
@@ -417,13 +418,13 @@ describe('color-selection-helpers', () => {
           totalFreq: 0.4
         },
         {
-          bucket: 2, // Mega-family 1
+          bucket: 2, // Jaune
           colors: [
             {
               index: 2,
               frequency: 0.3,
-              color: [0, 255, 0],
-              converted: [0, 255, 0]
+              color: [255, 255, 0],
+              converted: [255, 255, 0]
             }
           ],
           totalFreq: 0.3
@@ -432,11 +433,11 @@ describe('color-selection-helpers', () => {
 
       const reps = selectBucketRepresentativesWithLightness(buckets, 10)
 
-      // Should skip bucket 1 because mega-family 0 is already represented
-      expect(reps.length).toBe(2)
+      // All three buckets should be represented (no mega-family restrictions)
+      expect(reps.length).toBe(3)
       expect(reps.map((r) => r.index)).toContain(0)
+      expect(reps.map((r) => r.index)).toContain(1)
       expect(reps.map((r) => r.index)).toContain(2)
-      expect(reps.map((r) => r.index)).not.toContain(1)
     })
 
     it('should allow gray bucket to have representatives', () => {

src/libs/pixsaur-adapter/adapters/color-selection-helpers.ts

@@ -40,8 +40,8 @@ export const MIN_RGB_DISTANCE_MODE_0 = 100
 /** Distance RGB minimale pour modes 1-2 (2-4 couleurs) - contraste plus élevé */
 export const MIN_RGB_DISTANCE_MODE_1_2 = 200
 
-/** Distance de teinte minimale pour mode 0 (degrés) - augmenté pour plus de diversité */
-export const MIN_HUE_DISTANCE_MODE_0 = 35
+/** Distance de teinte minimale pour mode 0 (degrés) - réduit pour permettre plus de nuances */
+export const MIN_HUE_DISTANCE_MODE_0 = 25
 
 /** Seuil de saturation pour considérer une couleur comme "saturée" */
 export const SATURATION_THRESHOLD_FOR_HUE = 0.2
@@ -52,8 +52,8 @@ export const SATURATION_THRESHOLD_HIGH = 0.3
 /** Delta minimum pour calcul de teinte (évite les erreurs sur les gris) */
 export const DELTA_MIN_FOR_HUE = 0.01
 
-/** Taille des buckets de teinte en degrés (~8 familles: 360/45 = 8) */
-export const HUE_BUCKET_SIZE_DEGREES = 45
+/** Taille des buckets de teinte en degrés (~12 familles: 360/30 = 12) */
+export const HUE_BUCKET_SIZE_DEGREES = 30
 
 /** Demi-range de teinte pour normalisation */
 export const HUE_HALF_RANGE = 180
@@ -367,37 +367,26 @@ export function selectBucketRepresentativesWithLightness(
 ): ColorFrequencyItem[] {
   const representatives: ColorFrequencyItem[] = []
   const bucketIndices: number[] = [] // Pour savoir de quel bucket vient chaque rep
-  const usedMegaFamilies = new Set<number>() // Méga-familles déjà utilisées
-
-  // Définir les méga-familles (regroupement de 2 buckets adjacents = 90°)
-  // Bucket 0-1 (0-90°) = rouge/orange/jaune
-  // Bucket 2-3 (90-180°) = vert/cyan
-  // Bucket 4-5 (180-270°) = cyan/bleu
-  // Bucket 6-7 (270-360°) = violet/magenta/rouge
-  const getMegaFamily = (bucket: number | 'gray'): number => {
-    if (bucket === 'gray') return -1 // Gray est sa propre famille
-    return Math.floor(bucket / 2) // 0-1→0, 2-3→1, 4-5→2, 6-7→3
-  }
+  const usedBuckets = new Set<number | 'gray'>() // Buckets déjà utilisés
 
-  // Phase 1: Sélectionner le plus fréquent de chaque bucket, mais limiter les méga-familles
+  // Phase 1: Sélectionner le plus fréquent de chaque bucket distinct
+  // Avec 12 buckets (30° chacun), on couvre bien les 16 couleurs du mode 0
+  // Buckets: 0=rouge, 1=orange, 2=jaune, 3=chartreuse, 4=vert, 5=cyan-vert,
+  //          6=cyan, 7=bleu-cyan, 8=bleu, 9=violet, 10=magenta, 11=rose
   for (let i = 0; i < sortedBuckets.length; i++) {
     const { bucket, colors } = sortedBuckets[i]
     if (representatives.length >= maxRepresentatives || colors.length === 0)
       continue
 
-    const megaFamily = getMegaFamily(bucket)
-
-    // Gray peut avoir plusieurs représentants (nuances de gris importantes)
-    // Les autres méga-familles : max 1 représentant dans les 8 premiers
-    if (megaFamily !== -1 && usedMegaFamilies.has(megaFamily)) {
+    // Un représentant par bucket (pas de méga-familles)
+    // Cela permet plus de diversité de teintes
+    if (usedBuckets.has(bucket)) {
       continue
     }
 
     representatives.push(colors[0])
     bucketIndices.push(i)
-    if (megaFamily !== -1) {
-      usedMegaFamilies.add(megaFamily)
-    }
+    usedBuckets.add(bucket)
   }
 
   // Compter les couleurs claires parmi les représentants