Add harmony swatches, recent colors, and palette variant nudges

Color picker gains a row of 5 harmony swatches (analogous, triad,
complement) that rotate the hue while holding saturation and lightness,
plus a 12-slot recent-colors grid persisted in localStorage across
sessions. Recents are debounced and skip writes when the color is
already most-recent.

Color Adjustments sidebar gains 6 nudge buttons (hue ±15°, saturation
±15%, warmer/cooler) that bump the existing adjustment pipeline.
Rapid clicks coalesce into a single undo entry.

Author: bjarneo

frontend/src/lib/components/color-picker/ColorPickerDialog.svelte

@@ -23,14 +23,20 @@
         ANSI_COLOR_NAMES,
         EXTENDED_COLOR_LABELS,
     } from '$lib/constants/colors';
+    import {onDestroy} from 'svelte';
     import {
         hexToRgb,
         rgbToHex,
         hexToHsl,
         hslToHex,
+        isValidHex,
         relativeLuminance,
         contrastLevel,
     } from '$lib/utils/color';
+    import {
+        getRecentColors,
+        pushRecentColor,
+    } from '$lib/stores/recentColors.svelte';
     import ShadeGrid from './ShadeGrid.svelte';
 
     const ROLE_LABELS: Record<string, string> = {
@@ -176,6 +182,34 @@
         applyColor(hslToHex(next.h, next.s, next.l));
     }
 
+    const HARMONY: {label: string; delta: number; title: string}[] = [
+        {label: 'An−', delta: -30, title: 'Analogous −30°'},
+        {label: 'Tri', delta: 120, title: 'Triad +120°'},
+        {label: 'Comp', delta: 180, title: 'Complement +180°'},
+        {label: 'Tri', delta: 240, title: 'Triad +240°'},
+        {label: 'An+', delta: 30, title: 'Analogous +30°'},
+    ];
+
+    let harmonyColors = $derived(
+        HARMONY.map(h => ({
+            ...h,
+            hex: hslToHex(hsl.h + h.delta, hsl.s, hsl.l),
+        }))
+    );
+
+    // Debounced so slider drags don't flood the recents list with intermediate
+    // hexes; only the value the user settles on is recorded.
+    let recordTimer: ReturnType<typeof setTimeout> | null = null;
+    $effect(() => {
+        const hex = currentColor;
+        if (!isValidHex(hex)) return;
+        if (recordTimer) clearTimeout(recordTimer);
+        recordTimer = setTimeout(() => pushRecentColor(hex), 600);
+    });
+    onDestroy(() => {
+        if (recordTimer) clearTimeout(recordTimer);
+    });
+
     // When editing an app override, prefer the role map's computed bg/fg so
     // the ratio reflects what the target app will actually render against.
     let contrastBg = $derived(
@@ -407,6 +441,32 @@
             </div>
         {/if}
 
+        <div class="space-y-1.5">
+            <span class="text-fg-dimmed text-[9px] uppercase tracking-wider"
+                >Harmony</span
+            >
+            <div class="flex gap-1">
+                {#each harmonyColors as h}
+                    <button
+                        type="button"
+                        class="border-border hover:border-border-focus flex flex-1 flex-col items-stretch border transition-colors disabled:opacity-40"
+                        onclick={() => applyColor(h.hex)}
+                        disabled={locked}
+                        title="{h.title} · {h.hex}"
+                    >
+                        <div
+                            class="h-6 w-full"
+                            style:background-color={h.hex}
+                        ></div>
+                        <span
+                            class="text-fg-dimmed py-0.5 text-center text-[8px] tabular-nums leading-none"
+                            >{h.label}</span
+                        >
+                    </button>
+                {/each}
+            </div>
+        </div>
+
         <div class="space-y-2">
             <span class="text-fg-dimmed text-[9px] uppercase tracking-wider"
                 >RGB Channels</span
@@ -492,6 +552,26 @@
             {/each}
         </div>
 
+        {#if getRecentColors().length > 0}
+            <div class="space-y-1.5">
+                <span class="text-fg-dimmed text-[9px] uppercase tracking-wider"
+                    >Recent</span
+                >
+                <div class="grid grid-cols-12 gap-1">
+                    {#each getRecentColors() as hex}
+                        <button
+                            type="button"
+                            class="border-border hover:border-border-focus aspect-square border transition-colors disabled:opacity-40"
+                            style:background-color={hex}
+                            onclick={() => applyColor(hex)}
+                            disabled={locked}
+                            title={hex}
+                        ></button>
+                    {/each}
+                </div>
+            </div>
+        {/if}
+
         <div>
             <span
                 class="text-fg-dimmed mb-2 block text-[9px] uppercase tracking-wider"

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

@@ -180,6 +180,74 @@
         setPaletteCurvePoints([]);
         setPalette(getBasePalette(), true);
     }
+
+    type AdjustmentKey = (typeof sliderDefs)[number]['key'];
+
+    // Rapid nudge clicks coalesce into a single undo entry — snapshot the
+    // state before the first click in a burst, commit once the user stops.
+    let nudgeSnapshot: {
+        palette: string[];
+        ext: Record<string, string>;
+        adj: Adjustments;
+    } | null = null;
+    let nudgeCommitTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function nudge(key: AdjustmentKey, delta: number) {
+        const current = getAdjustments();
+        const limits = ADJUSTMENT_LIMITS[key];
+        const next = Math.max(
+            limits.min,
+            Math.min(limits.max, current[key] + delta)
+        );
+        if (next === current[key]) return;
+
+        if (!nudgeSnapshot) {
+            nudgeSnapshot = {
+                palette: [...getPalette()],
+                ext: {...getExtendedColors()},
+                adj: {...current},
+            };
+        }
+        if (nudgeCommitTimer) clearTimeout(nudgeCommitTimer);
+        nudgeCommitTimer = setTimeout(() => {
+            if (nudgeSnapshot) {
+                pushState(
+                    nudgeSnapshot.palette,
+                    nudgeSnapshot.ext,
+                    nudgeSnapshot.adj
+                );
+                nudgeSnapshot = null;
+            }
+        }, 500);
+
+        const newAdj = {...current, [key]: next} as Adjustments;
+        setAdjustments(newAdj);
+        applyAdjustments(newAdj);
+    }
+
+    const VARIANTS: {
+        label: string;
+        title: string;
+        key: AdjustmentKey;
+        delta: number;
+    }[] = [
+        {label: '−H', title: 'Shift hue −15°', key: 'hueShift', delta: -15},
+        {label: '+H', title: 'Shift hue +15°', key: 'hueShift', delta: 15},
+        {label: '−S', title: 'Desaturate 15%', key: 'saturation', delta: -15},
+        {label: '+S', title: 'Saturate 15%', key: 'saturation', delta: 15},
+        {
+            label: '❄',
+            title: 'Cooler (temperature −15)',
+            key: 'temperature',
+            delta: -15,
+        },
+        {
+            label: '☀',
+            title: 'Warmer (temperature +15)',
+            key: 'temperature',
+            delta: 15,
+        },
+    ];
 </script>
 
 <ExpandableSection title="Color Adjustments" bind:expanded>
@@ -191,12 +259,25 @@
         />
     </div>
 
-    <button
-        class="text-fg-dimmed hover:text-fg-secondary mb-2 text-[10px]"
-        onclick={resetAll}
-    >
-        Reset All
-    </button>
+    <div class="mb-2 flex items-center justify-between gap-2">
+        <div class="flex gap-1">
+            {#each VARIANTS as v}
+                <button
+                    type="button"
+                    class="text-fg-secondary hover:text-fg-primary border-border hover:bg-bg-surface border px-1.5 py-0.5 text-[10px] tabular-nums transition-colors"
+                    onclick={() => nudge(v.key, v.delta)}
+                    title={v.title}
+                    aria-label={v.title}>{v.label}</button
+                >
+            {/each}
+        </div>
+        <button
+            class="text-fg-dimmed hover:text-fg-secondary text-[10px]"
+            onclick={resetAll}
+        >
+            Reset All
+        </button>
+    </div>
     <div class="flex flex-col gap-1.5">
         {#each sliderDefs as def}
             <AdjustmentSlider

frontend/src/lib/stores/recentColors.svelte.ts

@@ -0,0 +1,47 @@
+import {isValidHex} from '$lib/utils/color';
+
+const STORAGE_KEY = 'aether.recentColors';
+const MAX_RECENT = 12;
+
+function load(): string[] {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw) return [];
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed)) return [];
+        return parsed.filter(isValidHex).slice(0, MAX_RECENT);
+    } catch {
+        return [];
+    }
+}
+
+function persist(colors: string[]) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(colors));
+    } catch {
+        // quota / storage disabled
+    }
+}
+
+let recent = $state<string[]>(load());
+
+export function getRecentColors(): string[] {
+    return recent;
+}
+
+export function pushRecentColor(hex: string): void {
+    if (!isValidHex(hex)) return;
+    const norm = hex.toLowerCase();
+    if (recent[0]?.toLowerCase() === norm) return;
+    const next = [hex, ...recent.filter(c => c.toLowerCase() !== norm)].slice(
+        0,
+        MAX_RECENT
+    );
+    recent = next;
+    persist(next);
+}
+
+export function clearRecentColors(): void {
+    recent = [];
+    persist([]);
+}

frontend/src/lib/utils/color.ts

@@ -12,6 +12,10 @@ export function isLightColor(hex: string): boolean {
     return (r * 299 + g * 587 + b * 114) / 1000 > 128;
 }
 
+export function isValidHex(hex: string): boolean {
+    return typeof hex === 'string' && /^#[0-9a-fA-F]{6}$/.test(hex);
+}
+
 export function hexToRgb(hex: string): {r: number; g: number; b: number} {
     if (!hex || hex.length < 7) return {r: 0, g: 0, b: 0};
     return {