Allow editing RGB/HSL/OKLCH values by clicking them

Author: bjarneo

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

@@ -8,6 +8,7 @@
         gradient,
         disabled = false,
         onchange,
+        oncommit,
     }: {
         label: string;
         value: number;
@@ -17,9 +18,45 @@
         gradient: string;
         disabled?: boolean;
         onchange: (value: number) => void;
+        oncommit: (raw: string) => void;
     } = $props();
 
     let percent = $derived((value / max) * 100);
+
+    let editing = $state(false);
+    let editValue = $state('');
+    let inputEl = $state<HTMLInputElement | null>(null);
+
+    $effect(() => {
+        if (editing && inputEl) {
+            inputEl.focus();
+            inputEl.select();
+        }
+    });
+
+    function startEdit() {
+        if (disabled) return;
+        editValue = display;
+        editing = true;
+    }
+
+    // Guarded so Enter's commit() doesn't double-fire when the subsequent
+    // onblur (from the unmounting input) would otherwise run commit again.
+    function commit() {
+        if (!editing) return;
+        oncommit(editValue);
+        editing = false;
+    }
+
+    function handleKey(e: KeyboardEvent) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            commit();
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            editing = false;
+        }
+    }
 </script>
 
 <div class="flex items-center gap-2">
@@ -41,17 +78,30 @@
             aria-label={label}
             aria-valuetext={display}
         />
-        <!-- Thumb: white bar with subtle dark ring + drop shadow so it's legible
-             on any gradient. Offset by half its width so the value position is
-             dead-center of the bar, not at its left edge. -->
         <div
             class="pointer-events-none absolute inset-y-[-1px] w-[3px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.4),0_1px_3px_rgba(0,0,0,0.35)] transition-[width] group-hover:w-1"
             style:left="calc({percent}% - 1.5px)"
         ></div>
     </div>
 
-    <span
-        class="text-fg-dimmed w-12 text-right font-mono text-[10px] tabular-nums"
-        >{display}</span
-    >
+    {#if editing}
+        <input
+            type="text"
+            bind:this={inputEl}
+            bind:value={editValue}
+            onblur={commit}
+            onkeydown={handleKey}
+            spellcheck={false}
+            class="text-fg-primary bg-bg-secondary border-accent w-12 border px-1 text-right font-mono text-[10px] tabular-nums outline-none"
+        />
+    {:else}
+        <button
+            type="button"
+            class="text-fg-dimmed w-12 text-right font-mono text-[10px] tabular-nums transition-colors
+                {disabled ? 'cursor-default' : 'hover:text-fg-primary'}"
+            onclick={startEdit}
+            {disabled}
+            aria-label="Edit {label} value">{display}</button
+        >
+    {/if}
 </div>

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

@@ -46,6 +46,7 @@
     import ShadeGrid from './ShadeGrid.svelte';
     import ChannelSlider from './ChannelSlider.svelte';
     import LockIcon from '$lib/components/shared/LockIcon.svelte';
+    import {clamp} from '$lib/utils/math';
 
     const ROLE_LABELS: Record<string, string> = {
         background: 'Background',
@@ -205,6 +206,26 @@
     };
     let activeModel = $derived(getColorPickerModel());
 
+    function parseEditedNumber(raw: string): number | null {
+        const n = parseFloat(raw.replace(/[°%]/g, '').trim());
+        return Number.isFinite(n) ? n : null;
+    }
+
+    // Builds an `oncommit` handler for a ChannelSlider: parse → clamp → dispatch.
+    // `transform` lets OKLCH C map its 0..0.4 display value onto the 0..40 slider.
+    function makeCommitHandler<C extends string>(
+        channel: C,
+        handle: (c: C, value: number) => void,
+        max: number,
+        transform: (n: number) => number = n => n
+    ): (raw: string) => void {
+        return raw => {
+            const n = parseEditedNumber(raw);
+            if (n === null) return;
+            handle(channel, clamp(transform(n), 0, max));
+        };
+    }
+
     let harmonyColors = $derived(
         HARMONY.map(h => ({
             ...h,
@@ -567,6 +588,12 @@
                         gradient={channelGradient(channel)}
                         disabled={locked}
                         onchange={v => handleRgbChange(channel, Math.round(v))}
+                        oncommit={makeCommitHandler(
+                            channel,
+                            handleRgbChange,
+                            255,
+                            Math.round
+                        )}
                     />
                 {/each}
             {:else if activeModel === 'hsl'}
@@ -579,6 +606,11 @@
                         gradient={hslChannelGradient(channel)}
                         disabled={locked}
                         onchange={v => handleHslChange(channel, v)}
+                        oncommit={makeCommitHandler(
+                            channel,
+                            handleHslChange,
+                            HSL_MAX[channel]
+                        )}
                     />
                 {/each}
             {:else}
@@ -591,6 +623,13 @@
                         gradient={oklchChannelGradient(channel)}
                         disabled={locked}
                         onchange={v => handleOklchChange(channel, v)}
+                        oncommit={makeCommitHandler(
+                            channel,
+                            handleOklchChange,
+                            OKLCH_MAX[channel],
+                            // C displays 0..0.4 but slider is 0..40.
+                            channel === 'c' ? n => n * 100 : undefined
+                        )}
                     />
                 {/each}
             {/if}

frontend/src/lib/utils/math.ts

@@ -0,0 +1,3 @@
+export function clamp(n: number, lo: number, hi: number): number {
+    return Math.max(lo, Math.min(hi, n));
+}