Add OKLCH extraction modes and grouped mode picker

- New color-theory modes (complementary, triadic, split-complementary,
  tetradic), mood modes (fire, ocean, forest, earthtone, neon, sunset,
  vaporwave, midnight, aurora), and practical modes (high-contrast, duotone)
- Refactor pastel/colorful/muted/bright from HSL to OKLCH so lightness is
  perceptually uniform; widen monochromatic chroma + analogous lightness
  alternation past JND so slots stay distinguishable
- Replace mode dropdown with grouped collapsible list (Auto + Style open
  by default; Color Theory / Mood / Practical collapsed, show active mode
  inline when collapsed)
- Bump cache version to 5; LoadCachedPalette now validates version

Author: bjarneo

cli/cli.go

@@ -217,6 +217,12 @@ var validModes = map[string]bool{
 	"normal": true, "monochromatic": true, "analogous": true,
 	"pastel": true, "material": true, "colorful": true,
 	"muted": true, "bright": true,
+	"complementary": true, "triadic": true,
+	"split-complementary": true, "tetradic": true,
+	"fire": true, "ocean": true, "forest": true,
+	"earthtone": true, "neon": true, "sunset": true, "vaporwave": true,
+	"midnight": true, "aurora": true,
+	"high-contrast": true, "duotone": true,
 }
 
 func expandHome(path string) string {

cli/inspect.go

@@ -67,11 +67,26 @@ func runListModes(args []string) int {
 		{"normal", "Auto-detect: monochrome or chromatic based on image analysis"},
 		{"monochromatic", "Single-hue palette with varying lightness"},
 		{"analogous", "Colors within ±30° hue range in OKLCH space"},
-		{"pastel", "Soft, desaturated colors with high lightness"},
+		{"pastel", "Soft, low-chroma, high-lightness palette in OKLCH"},
 		{"material", "Material Design-inspired palette with balanced saturation"},
-		{"colorful", "High-saturation, vibrant colors"},
-		{"muted", "Low-saturation, subdued colors"},
-		{"bright", "High-lightness colors with moderate saturation"},
+		{"colorful", "High-chroma, vibrant palette in OKLCH"},
+		{"muted", "Low-chroma, subdued palette with widened lightness stagger"},
+		{"bright", "High-lightness palette with healthy chroma"},
+		{"complementary", "Base hue and 180° opposite alternating across slots"},
+		{"triadic", "Three hues at 120° spacing"},
+		{"split-complementary", "Base hue plus 150°/210° (softer than complementary)"},
+		{"tetradic", "Four hues at 90° spacing (rectangle on the wheel)"},
+		{"fire", "Bonfire mood: deep dark bg, warm-shifted ANSI hues"},
+		{"ocean", "Ocean mood: blue-black bg, cool-shifted ANSI hues"},
+		{"forest", "Forest mood: green-black bg, sage-shifted ANSI hues"},
+		{"earthtone", "Earth mood: warm dark brown bg, very low chroma ANSI"},
+		{"neon", "Cyberpunk mood: very dark bg, max chroma narrow lightness band"},
+		{"sunset", "Sunset mood: warm dark with magenta cast, peach fg"},
+		{"vaporwave", "Vaporwave mood: pinks/purples/cyans on a soft dark"},
+		{"midnight", "Midnight mood: deep indigo, subdued, peaceful"},
+		{"aurora", "Aurora mood: shimmery green-cyan glow on deep blue-night"},
+		{"high-contrast", "WCAG AAA (7:1) contrast against a hard-extreme background"},
+		{"duotone", "Two hues only (base + complement) at varying lightness"},
 	}
 
 	if jsonOut {

frontend/src/lib/components/sidebar/ExtractionModeSelect.svelte

@@ -9,21 +9,46 @@
         setAdjustments,
     } from '$lib/stores/theme.svelte';
     import {showToast} from '$lib/stores/ui.svelte';
-    import {EXTRACTION_MODES} from '$lib/constants/colors';
+    import {
+        EXTRACTION_MODES,
+        EXTRACTION_MODE_GROUPS,
+        type ExtractionMode,
+        type ExtractionModeGroup,
+    } from '$lib/constants/colors';
     import {DEFAULT_ADJUSTMENTS} from '$lib/types/theme';
+    import ExpandableSection from '$lib/components/shared/ExpandableSection.svelte';
+
+    let expanded = $state(true);
+
+    const openGroups: Record<ExtractionModeGroup, boolean> = $state(
+        Object.fromEntries(
+            EXTRACTION_MODE_GROUPS.map(g => [g.id, g.defaultOpen])
+        ) as Record<ExtractionModeGroup, boolean>
+    );
+
+    const grouped = $derived.by(() => {
+        const out: Record<string, ExtractionMode[]> = {};
+        for (const g of EXTRACTION_MODE_GROUPS) out[g.id] = [];
+        for (const m of EXTRACTION_MODES) out[m.group].push(m);
+        return out;
+    });
+
+    function activeInGroup(groupId: ExtractionModeGroup) {
+        return grouped[groupId]?.find(m => m.value === getExtractionMode());
+    }
 
     async function handleModeChange(mode: string) {
+        if (mode === getExtractionMode()) return;
+
         setExtractionMode(mode);
 
-        // Tell the Go backend about the mode change
         try {
             const {SetExtractionMode} = await import(
                 '../../../../wailsjs/go/main/App'
             );
             await SetExtractionMode(mode);
         } catch {}
 
-        // Re-extract colors if a wallpaper is loaded
         const path = getWallpaperPath();
         if (path) {
             setIsExtracting(true);
@@ -44,19 +69,48 @@
     }
 </script>
 
-<div>
-    <h3
-        class="text-fg-dimmed mb-2 text-[10px] font-medium uppercase tracking-wider"
-    >
-        Extraction Mode
-    </h3>
-    <select
-        class="bg-bg-surface border-border text-fg-primary focus:border-border-focus w-full border px-2 py-1.5 text-[11px] outline-none transition-colors duration-100"
-        value={getExtractionMode()}
-        onchange={e => handleModeChange(e.currentTarget.value)}
-    >
-        {#each EXTRACTION_MODES as mode}
-            <option value={mode.value}>{mode.label}</option>
+{#snippet modeList(items: ExtractionMode[])}
+    <ul class="flex flex-col">
+        {#each items as mode}
+            {@const isActive = getExtractionMode() === mode.value}
+            <li>
+                <button
+                    type="button"
+                    onclick={() => handleModeChange(mode.value)}
+                    title={mode.description}
+                    aria-pressed={isActive}
+                    class="hover:bg-bg-hover flex w-full items-center justify-between px-2 py-1.5 text-left text-[11px] transition-colors duration-100 {isActive
+                        ? 'bg-bg-elevated text-accent border-border-focus border-l-2'
+                        : 'text-fg-primary border-l-2 border-transparent'}"
+                >
+                    <span class="truncate">{mode.label}</span>
+                    {#if isActive}
+                        <span
+                            class="text-accent ml-2 text-[10px]"
+                            aria-hidden="true">●</span
+                        >
+                    {/if}
+                </button>
+            </li>
+        {/each}
+    </ul>
+{/snippet}
+
+<ExpandableSection title="Extraction Mode" bind:expanded>
+    <div class="flex flex-col gap-3">
+        {#each EXTRACTION_MODE_GROUPS as group}
+            {@const items = grouped[group.id]}
+            {#if items?.length}
+                {@const isOpen = openGroups[group.id]}
+                {@const active = activeInGroup(group.id)}
+                <ExpandableSection
+                    title={group.label}
+                    suffix={!isOpen && active ? active.label : ''}
+                    bind:expanded={openGroups[group.id]}
+                >
+                    {@render modeList(items)}
+                </ExpandableSection>
+            {/if}
         {/each}
-    </select>
-</div>
+    </div>
+</ExpandableSection>

frontend/src/lib/constants/colors.ts

@@ -733,13 +733,173 @@ export const EXTENDED_COLOR_LABELS: Record<string, string> = Object.fromEntries(
     EXTENDED_COLOR_ROLES.map(r => [r.key, r.label])
 );
 
-export const EXTRACTION_MODES = [
-    {value: 'normal', label: 'Auto Detect'},
-    {value: 'monochromatic', label: 'Monochromatic'},
-    {value: 'analogous', label: 'Analogous'},
-    {value: 'pastel', label: 'Pastel'},
-    {value: 'material', label: 'Material'},
-    {value: 'colorful', label: 'Colorful'},
-    {value: 'muted', label: 'Muted'},
-    {value: 'bright', label: 'Bright'},
+export type ExtractionModeGroup =
+    | 'auto'
+    | 'theory'
+    | 'style'
+    | 'mood'
+    | 'practical';
+
+export interface ExtractionMode {
+    value: string;
+    label: string;
+    group: ExtractionModeGroup;
+    description: string;
+}
+
+export const EXTRACTION_MODES: ExtractionMode[] = [
+    {
+        value: 'normal',
+        label: 'Auto Detect',
+        group: 'auto',
+        description: 'Picks monochrome or chromatic based on image analysis',
+    },
+
+    {
+        value: 'monochromatic',
+        label: 'Monochromatic',
+        group: 'theory',
+        description: 'Single hue across all slots, varying lightness',
+    },
+    {
+        value: 'analogous',
+        label: 'Analogous',
+        group: 'theory',
+        description: 'Hues within ±30° of the dominant color',
+    },
+    {
+        value: 'complementary',
+        label: 'Complementary',
+        group: 'theory',
+        description: 'Base hue alternating with its 180° opposite',
+    },
+    {
+        value: 'triadic',
+        label: 'Triadic',
+        group: 'theory',
+        description: 'Three hues evenly spaced at 120°',
+    },
+    {
+        value: 'split-complementary',
+        label: 'Split-Complementary',
+        group: 'theory',
+        description: 'Base hue plus 150° and 210° (softer complement)',
+    },
+    {
+        value: 'tetradic',
+        label: 'Tetradic',
+        group: 'theory',
+        description: 'Four hues at 90° on the color wheel',
+    },
+
+    {
+        value: 'pastel',
+        label: 'Pastel',
+        group: 'style',
+        description: 'Soft, low chroma, high lightness',
+    },
+    {
+        value: 'muted',
+        label: 'Muted',
+        group: 'style',
+        description: 'Subdued, low chroma, lightness-staggered',
+    },
+    {
+        value: 'bright',
+        label: 'Bright',
+        group: 'style',
+        description: 'High lightness with healthy chroma',
+    },
+    {
+        value: 'colorful',
+        label: 'Colorful',
+        group: 'style',
+        description: 'Vivid, high chroma, mid lightness',
+    },
+    {
+        value: 'material',
+        label: 'Material',
+        group: 'style',
+        description: 'Material Design-inspired with fixed bg/fg',
+    },
+
+    {
+        value: 'fire',
+        label: 'Fire',
+        group: 'mood',
+        description: 'Bonfire warmth — deep dark, warm ANSI',
+    },
+    {
+        value: 'ocean',
+        label: 'Ocean',
+        group: 'mood',
+        description: 'Deep blue-black, cool-shifted ANSI',
+    },
+    {
+        value: 'forest',
+        label: 'Forest',
+        group: 'mood',
+        description: 'Dark green-black, sage-shifted ANSI',
+    },
+    {
+        value: 'earthtone',
+        label: 'Earthtone',
+        group: 'mood',
+        description: 'Warm browns and beiges, very low chroma',
+    },
+    {
+        value: 'neon',
+        label: 'Neon',
+        group: 'mood',
+        description: 'Cyberpunk: very dark bg, max chroma',
+    },
+    {
+        value: 'sunset',
+        label: 'Sunset',
+        group: 'mood',
+        description: 'Warm dark with magenta cast, peach fg',
+    },
+    {
+        value: 'vaporwave',
+        label: 'Vaporwave',
+        group: 'mood',
+        description: 'Pinks, purples, cyans on a soft dark',
+    },
+    {
+        value: 'midnight',
+        label: 'Midnight',
+        group: 'mood',
+        description: 'Peaceful deep indigo, subdued silver',
+    },
+    {
+        value: 'aurora',
+        label: 'Aurora',
+        group: 'mood',
+        description: 'Shimmery green-cyan glow on deep blue-night',
+    },
+
+    {
+        value: 'high-contrast',
+        label: 'High Contrast',
+        group: 'practical',
+        description: 'WCAG AAA (7:1) for maximum readability',
+    },
+    {
+        value: 'duotone',
+        label: 'Duotone',
+        group: 'practical',
+        description: 'Two hues only at varying lightness',
+    },
+];
+
+export const EXTRACTION_MODE_GROUPS: {
+    id: ExtractionModeGroup;
+    label: string;
+    defaultOpen: boolean;
+}[] = [
+    {id: 'auto', label: 'Auto', defaultOpen: true},
+    {id: 'style', label: 'Style', defaultOpen: true},
+    {id: 'theory', label: 'Color Theory', defaultOpen: false},
+    {id: 'mood', label: 'Mood', defaultOpen: false},
+    {id: 'practical', label: 'Practical', defaultOpen: false},
 ];

internal/extraction/cache.go

@@ -103,6 +103,11 @@ func LoadCachedPalette(cacheKey string) ([16]string, bool) {
 		return [16]string{}, false
 	}
 
+	// Discard caches written by older algorithm versions
+	if data.Version != CacheVersion {
+		return [16]string{}, false
+	}
+
 	// Validate that we got a complete palette
 	for _, c := range data.Palette {
 		if c == "" {

internal/extraction/constants.go

@@ -2,7 +2,7 @@ package extraction
 
 const (
 	ANSIPaletteSize   = 16
-	CacheVersion      = 3 // Bumped: OKLab-based extraction
+	CacheVersion      = 5 // Bumped: mood iteration (stronger character per mood) + midnight/aurora
 	ImageScaleSize    = 400
 	MinPixelsToSample = 1000
 	MaxPixelsToSample = 50000
@@ -34,6 +34,7 @@ const (
 	VeryDarkBgLightness  = 0.25 // OKLab L: very dark background
 	VeryLightBgLightness = 0.82 // OKLab L: very light background
 	MinContrastRatio     = 4.5  // WCAG AA minimum for normal text
+	MinHighContrastRatio = 7.0  // WCAG AAA target for the high-contrast mode
 	MinCommentContrast   = 3.0  // Minimum for color8 (comments)
 	MinFgBgContrast      = 7.0  // Target contrast for fg/bg pair