@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/color-picker/color-picker.svelte

@@ -1,244 +1,213 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status stable
-   * @purpose Interactive saturation, hue, and alpha control for picking an arbitrary color and emitting a normalized hex value.
-   * @tag form
-   * @tag color
-   * @useWhen Letting users pick any color from the full spectrum with optional alpha.
-   * @useWhen Composing a custom color with a fallback palette of preset swatches.
-   * @avoidWhen Constraining selection to a fixed brand palette — use color-swatch-picker instead.
-   * @related color-swatch-picker, input
-   */
-  export type { ColorPickerProps } from './color-picker.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import type { ColorPickerProps } from './color-picker.types.ts';
-  import type {
-    ColorSwatch,
-    ColorSwatchPickerProps,
-  } from '../color-swatch-picker/color-swatch-picker.types.ts';
-  import { untrack } from 'svelte';
-
-  import { classNames } from '../../utilities/class-names.ts';
-  import { parseColor } from '../../utilities/color-luminance.ts';
-  import ColorSwatchPicker from '../color-swatch-picker/color-swatch-picker.svelte';
-
-  const pickerId = $props.id();
-
-  let {
-    value = $bindable(),
-    defaultValue,
-    alpha = false,
-    name,
-    swatches,
-    disabled = false,
-    class: className,
-    label = 'Color picker',
-    onchange,
-    oninput,
-  }: ColorPickerProps = $props();
-
-  const gradientId = `${pickerId}-gradient`;
-  const hueId = `${pickerId}-hue`;
-  const alphaId = `${pickerId}-alpha`;
-  const previewId = `${pickerId}-preview`;
-
-  type Hsla = { h: number; s: number; l: number; a: number };
-
-  // Internal canonical state is HSLA. We only round-trip to RGB/hex at the edges.
-  let hue = $state(0); // 0–360
-  let saturation = $state(100); // 0–100 (HSL saturation at the gradient corner)
-  let lightnessValue = $state(50); // 0–100
-  let alphaValue = $state(1); // 0–1
-
-  let internalValue = $state('');
-  // Plain (non-reactive) coordination var: holds the most recent value the component
-  // wrote out to `value`. The controlled-sync effect uses this to skip its own echo.
-  let lastEmittedHex = '';
-  let isDragging = $state(false);
-
-  function clamp(n: number, min: number, max: number): number {
+import { untrack } from 'svelte';
+import { classNames } from '../../utilities/class-names.ts';
+import { parseColor } from '../../utilities/color-luminance.ts';
+import ColorSwatchPicker from '../color-swatch-picker/color-swatch-picker.svelte';
+const pickerId = $props.id();
+let { value = $bindable(), defaultValue, alpha = false, name, swatches, disabled = false, class: className, label = 'Color picker', onchange, oninput, } = $props();
+const gradientId = `${pickerId}-gradient`;
+const hueId = `${pickerId}-hue`;
+const alphaId = `${pickerId}-alpha`;
+const previewId = `${pickerId}-preview`;
+// Internal canonical state is HSLA. We only round-trip to RGB/hex at the edges.
+let hue = $state(0); // 0–360
+let saturation = $state(100); // 0–100 (HSL saturation at the gradient corner)
+let lightnessValue = $state(50); // 0–100
+let alphaValue = $state(1); // 0–1
+let internalValue = $state('');
+// Plain (non-reactive) coordination var: holds the most recent value the component
+// wrote out to `value`. The controlled-sync effect uses this to skip its own echo.
+let lastEmittedHex = '';
+let isDragging = $state(false);
+function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
-  }
-
-  function toHex2(n: number): string {
+}
+function toHex2(n) {
     return clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
-  }
-
-  function normalizeHue(h: number): number {
+}
+function normalizeHue(h) {
     return Math.min(((h % 360) + 360) % 360, 359);
-  }
-
-  function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
+}
+function rgbToHsl(r, g, b) {
     const rn = r / 255;
     const gn = g / 255;
     const bn = b / 255;
     const max = Math.max(rn, gn, bn);
     const min = Math.min(rn, gn, bn);
     const l = (max + min) / 2;
-    if (max === min) return { h: 0, s: 0, l: l * 100 };
+    if (max === min)
+        return { h: 0, s: 0, l: l * 100 };
     const d = max - min;
     const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
     let h = 0;
-    if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
-    else if (max === gn) h = ((bn - rn) / d + 2) * 60;
-    else h = ((rn - gn) / d + 4) * 60;
+    if (max === rn)
+        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
+    else if (max === gn)
+        h = ((bn - rn) / d + 2) * 60;
+    else
+        h = ((rn - gn) / d + 4) * 60;
     return { h, s: s * 100, l: l * 100 };
-  }
-
-  function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
+}
+function hslToRgb(h, s, l) {
     const sn = clamp(s, 0, 100) / 100;
     const ln = clamp(l, 0, 100) / 100;
     const hn = (((h % 360) + 360) % 360) / 360;
     if (sn === 0) {
-      const v = Math.round(ln * 255);
-      return { r: v, g: v, b: v };
+        const v = Math.round(ln * 255);
+        return { r: v, g: v, b: v };
     }
     const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn;
     const p = 2 * ln - q;
-    const hueToRgb = (t: number): number => {
-      let tn = t;
-      if (tn < 0) tn += 1;
-      if (tn > 1) tn -= 1;
-      if (tn < 1 / 6) return p + (q - p) * 6 * tn;
-      if (tn < 1 / 2) return q;
-      if (tn < 2 / 3) return p + (q - p) * (2 / 3 - tn) * 6;
-      return p;
+    const hueToRgb = (t) => {
+        let tn = t;
+        if (tn < 0)
+            tn += 1;
+        if (tn > 1)
+            tn -= 1;
+        if (tn < 1 / 6)
+            return p + (q - p) * 6 * tn;
+        if (tn < 1 / 2)
+            return q;
+        if (tn < 2 / 3)
+            return p + (q - p) * (2 / 3 - tn) * 6;
+        return p;
     };
     return {
-      r: Math.round(hueToRgb(hn + 1 / 3) * 255),
-      g: Math.round(hueToRgb(hn) * 255),
-      b: Math.round(hueToRgb(hn - 1 / 3) * 255),
+        r: Math.round(hueToRgb(hn + 1 / 3) * 255),
+        g: Math.round(hueToRgb(hn) * 255),
+        b: Math.round(hueToRgb(hn - 1 / 3) * 255),
     };
-  }
-
-  function formatHex(h: number, s: number, l: number, a: number, withAlpha: boolean): string {
+}
+function formatHex(h, s, l, a, withAlpha) {
     const { r, g, b } = hslToRgb(h, s, l);
     const base = `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
-    if (!withAlpha) return base;
+    if (!withAlpha)
+        return base;
     return base + toHex2(a * 255);
-  }
-
-  function parseToHsla(input: string): Hsla | null {
+}
+function parseToHsla(input) {
     const parsed = parseColor(input);
-    if (!parsed) return null;
+    if (!parsed)
+        return null;
     const { h, s, l } = rgbToHsl(parsed.r, parsed.g, parsed.b);
     return { h: normalizeHue(h), s, l, a: parsed.a };
-  }
-
-  function applyHsla(next: Hsla): void {
+}
+function applyHsla(next) {
     hue = next.h;
     saturation = next.s;
     lightnessValue = next.l;
     alphaValue = alpha ? next.a : 1;
-  }
-
-  // Snapshot the seed props once. Initialization reads only the mount-time
-  // values; the controlled-sync effect (below) handles later `value` changes.
-  const initialValue = untrack(() => value);
-  const initialDefaultValue = untrack(() => defaultValue);
-  const initialAlpha = untrack(() => alpha);
-
-  // Initialize from defaultValue (only when uncontrolled).
-  if (initialValue === undefined && initialDefaultValue) {
+}
+// Snapshot the seed props once. Initialization reads only the mount-time
+// values; the controlled-sync effect (below) handles later `value` changes.
+const initialValue = untrack(() => value);
+const initialDefaultValue = untrack(() => defaultValue);
+const initialAlpha = untrack(() => alpha);
+// Initialize from defaultValue (only when uncontrolled).
+if (initialValue === undefined && initialDefaultValue) {
     const parsed = parseToHsla(initialDefaultValue);
     if (parsed) {
-      applyHsla(parsed);
-      internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
-    } else {
-      hue = 0;
-      saturation = 0;
-      lightnessValue = 0;
-      alphaValue = 1;
-      internalValue = '';
-      lastEmittedHex = '';
+        applyHsla(parsed);
+        internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
+    }
+    else {
+        hue = 0;
+        saturation = 0;
+        lightnessValue = 0;
+        alphaValue = 1;
+        internalValue = '';
+        lastEmittedHex = '';
     }
-  } else if (initialValue !== undefined) {
+}
+else if (initialValue !== undefined) {
     const parsed = parseToHsla(initialValue);
     if (parsed) {
-      applyHsla(parsed);
-      internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
-    } else {
-      hue = 0;
-      saturation = 0;
-      lightnessValue = 0;
-      alphaValue = 1;
-      internalValue = '';
-      lastEmittedHex = '';
+        applyHsla(parsed);
+        internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
     }
-  }
-
-  // Sync incoming `value` (controlled) to internal HSLA, but skip the echo of our
-  // own writes. We compare against `lastEmittedHex` rather than using a one-shot
-  // suppression flag so a parent that normalizes or rejects the emitted value
-  // (and writes a different one back) is not ignored.
-  $effect(() => {
-    if (value === undefined) return;
-    if (value !== '' && value === lastEmittedHex) return;
+    else {
+        hue = 0;
+        saturation = 0;
+        lightnessValue = 0;
+        alphaValue = 1;
+        internalValue = '';
+        lastEmittedHex = '';
+    }
+}
+// Sync incoming `value` (controlled) to internal HSLA, but skip the echo of our
+// own writes. We compare against `lastEmittedHex` rather than using a one-shot
+// suppression flag so a parent that normalizes or rejects the emitted value
+// (and writes a different one back) is not ignored.
+$effect(() => {
+    if (value === undefined)
+        return;
+    if (value !== '' && value === lastEmittedHex)
+        return;
     const parsed = value === '' ? null : parseToHsla(value);
     if (parsed === null) {
-      hue = 0;
-      saturation = 0;
-      lightnessValue = 0;
-      alphaValue = 1;
-      internalValue = '';
-      lastEmittedHex = '';
-      return;
+        hue = 0;
+        saturation = 0;
+        lightnessValue = 0;
+        alphaValue = 1;
+        internalValue = '';
+        lastEmittedHex = '';
+        return;
     }
     applyHsla(parsed);
     internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha);
-  });
-
-  // Re-normalize internal value when the `alpha` mode toggles after mount so
-  // hidden input / bound value reflect the new emit format immediately.
-  $effect(() => {
+});
+// Re-normalize internal value when the `alpha` mode toggles after mount so
+// hidden input / bound value reflect the new emit format immediately.
+$effect(() => {
     void alpha;
-    if (internalValue === '') return;
+    if (internalValue === '')
+        return;
     const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
-    if (hex === internalValue) return;
+    if (hex === internalValue)
+        return;
     internalValue = hex;
     lastEmittedHex = hex;
-    if (value !== undefined && value !== hex) value = hex;
-  });
-
-  function emit(reason: 'input' | 'change'): void {
+    if (value !== undefined && value !== hex)
+        value = hex;
+});
+function emit(reason) {
     const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
     internalValue = hex;
     lastEmittedHex = hex;
-    if (value !== undefined) value = hex;
+    if (value !== undefined)
+        value = hex;
     // Every value mutation fires `oninput`; `onchange` additionally fires on commit.
     oninput?.(hex);
-    if (reason === 'change') onchange?.(hex);
-  }
-
-  function commitFromHsla(next: Hsla, reason: 'input' | 'change'): void {
+    if (reason === 'change')
+        onchange?.(hex);
+}
+function commitFromHsla(next, reason) {
     applyHsla(next);
     emit(reason);
-  }
-
-  function commitCurrentValueChange(): void {
+}
+function commitCurrentValueChange() {
     const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
     internalValue = hex;
     lastEmittedHex = hex;
-    if (value !== undefined) value = hex;
+    if (value !== undefined)
+        value = hex;
     onchange?.(hex);
-  }
-
-  // ── Gradient handling ──────────────────────────────────────────────────
-
-  let gradientElement: HTMLDivElement | null = $state(null);
-
-  /**
-   * Map a pointer event to (saturation, lightness) using the HSV-style square
-   * common to color pickers: x = saturation 0→100, y = value 100→0. We convert
-   * HSV to HSL on the way out so internal state stays HSL.
-   */
-  function pointerToHsl(event: PointerEvent): { s: number; l: number } {
+}
+// ── Gradient handling ──────────────────────────────────────────────────
+let gradientElement = $state(null);
+/**
+ * Map a pointer event to (saturation, lightness) using the HSV-style square
+ * common to color pickers: x = saturation 0→100, y = value 100→0. We convert
+ * HSV to HSL on the way out so internal state stays HSL.
+ */
+function pointerToHsl(event) {
     const target = gradientElement;
-    if (!target) return { s: saturation, l: lightnessValue };
+    if (!target)
+        return { s: saturation, l: lightnessValue };
     const rect = target.getBoundingClientRect();
     const x = clamp(event.clientX - rect.left, 0, rect.width);
     const y = clamp(event.clientY - rect.top, 0, rect.height);
@@ -248,315 +217,296 @@
     const l = vv * (1 - sv / 2);
     const s = l === 0 || l === 1 ? 0 : (vv - l) / Math.min(l, 1 - l);
     return { s: s * 100, l: l * 100 };
-  }
-
-  function handleGradientPointerDown(event: PointerEvent): void {
-    if (disabled) return;
+}
+function handleGradientPointerDown(event) {
+    if (disabled)
+        return;
     event.preventDefault();
     gradientElement?.setPointerCapture(event.pointerId);
     isDragging = true;
     const { s, l } = pointerToHsl(event);
     commitFromHsla({ h: hue, s, l, a: alphaValue }, 'input');
-  }
-
-  function handleGradientPointerMove(event: PointerEvent): void {
-    if (!isDragging || disabled) return;
+}
+function handleGradientPointerMove(event) {
+    if (!isDragging || disabled)
+        return;
     const { s, l } = pointerToHsl(event);
     commitFromHsla({ h: hue, s, l, a: alphaValue }, 'input');
-  }
-
-  function handleGradientPointerUp(event: PointerEvent): void {
-    if (!isDragging) return;
+}
+function handleGradientPointerUp(event) {
+    if (!isDragging)
+        return;
     isDragging = false;
     gradientElement?.releasePointerCapture(event.pointerId);
     commitCurrentValueChange();
-  }
-
-  function handleGradientPointerCancel(event: PointerEvent): void {
-    if (!isDragging) return;
+}
+function handleGradientPointerCancel(event) {
+    if (!isDragging)
+        return;
     isDragging = false;
     gradientElement?.releasePointerCapture(event.pointerId);
-  }
-
-  // ── Slider pointer handling ─────────────────────────────────────────────
-
-  // bind:this refs use $state so teardown sees the latest element references;
-  // the drag discriminator is read only inside event handlers.
-  let hueElement = $state<HTMLDivElement | null>(null);
-  let alphaElement = $state<HTMLDivElement | null>(null);
-  let draggingSlider: 'hue' | 'alpha' | null = null;
-
-  function pointerToFraction(event: PointerEvent, element: HTMLElement): number {
+}
+// ── Slider pointer handling ─────────────────────────────────────────────
+// bind:this refs use $state so teardown sees the latest element references;
+// the drag discriminator is read only inside event handlers.
+let hueElement = $state(null);
+let alphaElement = $state(null);
+let draggingSlider = null;
+function pointerToFraction(event, element) {
     const rect = element.getBoundingClientRect();
     const x = clamp(event.clientX - rect.left, 0, rect.width);
     return rect.width === 0 ? 0 : x / rect.width;
-  }
-
-  function handleHuePointerDown(event: PointerEvent): void {
-    if (disabled || !hueElement) return;
+}
+function handleHuePointerDown(event) {
+    if (disabled || !hueElement)
+        return;
     event.preventDefault();
     hueElement.setPointerCapture(event.pointerId);
     draggingSlider = 'hue';
     const fraction = pointerToFraction(event, hueElement);
     commitFromHsla({ h: fraction * 359, s: saturation, l: lightnessValue, a: alphaValue }, 'input');
-  }
-
-  function handleHuePointerMove(event: PointerEvent): void {
-    if (draggingSlider !== 'hue' || disabled || !hueElement) return;
+}
+function handleHuePointerMove(event) {
+    if (draggingSlider !== 'hue' || disabled || !hueElement)
+        return;
     const fraction = pointerToFraction(event, hueElement);
     commitFromHsla({ h: fraction * 359, s: saturation, l: lightnessValue, a: alphaValue }, 'input');
-  }
-
-  function handleHuePointerUp(event: PointerEvent): void {
-    if (draggingSlider !== 'hue') return;
+}
+function handleHuePointerUp(event) {
+    if (draggingSlider !== 'hue')
+        return;
     draggingSlider = null;
     hueElement?.releasePointerCapture(event.pointerId);
     commitCurrentValueChange();
-  }
-
-  function handleHuePointerCancel(event: PointerEvent): void {
-    if (draggingSlider !== 'hue') return;
+}
+function handleHuePointerCancel(event) {
+    if (draggingSlider !== 'hue')
+        return;
     draggingSlider = null;
     hueElement?.releasePointerCapture(event.pointerId);
-  }
-
-  function handleAlphaPointerDown(event: PointerEvent): void {
-    if (disabled || !alphaElement) return;
+}
+function handleAlphaPointerDown(event) {
+    if (disabled || !alphaElement)
+        return;
     event.preventDefault();
     alphaElement.setPointerCapture(event.pointerId);
     draggingSlider = 'alpha';
     const fraction = pointerToFraction(event, alphaElement);
     commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: fraction }, 'input');
-  }
-
-  function handleAlphaPointerMove(event: PointerEvent): void {
-    if (draggingSlider !== 'alpha' || disabled || !alphaElement) return;
+}
+function handleAlphaPointerMove(event) {
+    if (draggingSlider !== 'alpha' || disabled || !alphaElement)
+        return;
     const fraction = pointerToFraction(event, alphaElement);
     commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: fraction }, 'input');
-  }
-
-  function handleAlphaPointerUp(event: PointerEvent): void {
-    if (draggingSlider !== 'alpha') return;
+}
+function handleAlphaPointerUp(event) {
+    if (draggingSlider !== 'alpha')
+        return;
     draggingSlider = null;
     alphaElement?.releasePointerCapture(event.pointerId);
     commitCurrentValueChange();
-  }
-
-  function handleAlphaPointerCancel(event: PointerEvent): void {
-    if (draggingSlider !== 'alpha') return;
+}
+function handleAlphaPointerCancel(event) {
+    if (draggingSlider !== 'alpha')
+        return;
     draggingSlider = null;
     alphaElement?.releasePointerCapture(event.pointerId);
-  }
-
-  // ── Slider keyboard handling ────────────────────────────────────────────
-
-  function adjustHue(delta: number): void {
+}
+// ── Slider keyboard handling ────────────────────────────────────────────
+function adjustHue(delta) {
     const next = (((hue + delta) % 360) + 360) % 360;
     commitFromHsla({ h: next, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
-  }
-
-  function adjustAlpha(delta: number): void {
+}
+function adjustAlpha(delta) {
     const next = clamp(alphaValue + delta, 0, 1);
     commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: next }, 'change');
-  }
-
-  function handleHueKeydown(event: KeyboardEvent): void {
-    if (disabled) return;
+}
+function handleHueKeydown(event) {
+    if (disabled)
+        return;
     const step = event.shiftKey ? 10 : 1;
     switch (event.key) {
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        event.preventDefault();
-        adjustHue(-step);
-        break;
-      case 'ArrowRight':
-      case 'ArrowUp':
-        event.preventDefault();
-        adjustHue(step);
-        break;
-      case 'Home':
-        event.preventDefault();
-        commitFromHsla({ h: 0, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
-        break;
-      case 'End':
-        event.preventDefault();
-        commitFromHsla({ h: 359, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
-        break;
-      case 'PageUp':
-        event.preventDefault();
-        adjustHue(36);
-        break;
-      case 'PageDown':
-        event.preventDefault();
-        adjustHue(-36);
-        break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            event.preventDefault();
+            adjustHue(-step);
+            break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+            event.preventDefault();
+            adjustHue(step);
+            break;
+        case 'Home':
+            event.preventDefault();
+            commitFromHsla({ h: 0, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
+            break;
+        case 'End':
+            event.preventDefault();
+            commitFromHsla({ h: 359, s: saturation, l: lightnessValue, a: alphaValue }, 'change');
+            break;
+        case 'PageUp':
+            event.preventDefault();
+            adjustHue(36);
+            break;
+        case 'PageDown':
+            event.preventDefault();
+            adjustHue(-36);
+            break;
     }
-  }
-
-  function handleAlphaKeydown(event: KeyboardEvent): void {
-    if (disabled) return;
+}
+function handleAlphaKeydown(event) {
+    if (disabled)
+        return;
     const step = event.shiftKey ? 0.1 : 0.01;
     switch (event.key) {
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        event.preventDefault();
-        adjustAlpha(-step);
-        break;
-      case 'ArrowRight':
-      case 'ArrowUp':
-        event.preventDefault();
-        adjustAlpha(step);
-        break;
-      case 'Home':
-        event.preventDefault();
-        commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 0 }, 'change');
-        break;
-      case 'End':
-        event.preventDefault();
-        commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 1 }, 'change');
-        break;
-      case 'PageUp':
-        event.preventDefault();
-        adjustAlpha(0.1);
-        break;
-      case 'PageDown':
-        event.preventDefault();
-        adjustAlpha(-0.1);
-        break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            event.preventDefault();
+            adjustAlpha(-step);
+            break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+            event.preventDefault();
+            adjustAlpha(step);
+            break;
+        case 'Home':
+            event.preventDefault();
+            commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 0 }, 'change');
+            break;
+        case 'End':
+            event.preventDefault();
+            commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 1 }, 'change');
+            break;
+        case 'PageUp':
+            event.preventDefault();
+            adjustAlpha(0.1);
+            break;
+        case 'PageDown':
+            event.preventDefault();
+            adjustAlpha(-0.1);
+            break;
     }
-  }
-
-  // Gradient region keyboard arrow keys also nudge saturation/lightness so the
-  // region is at least partially keyboard-operable, even though the underlying
-  // 2D selection is inherently pointer-friendly. Documented in a11y memo.
-  function handleGradientKeydown(event: KeyboardEvent): void {
-    if (disabled) return;
+}
+// Gradient region keyboard arrow keys also nudge saturation/lightness so the
+// region is at least partially keyboard-operable, even though the underlying
+// 2D selection is inherently pointer-friendly. Documented in a11y memo.
+function handleGradientKeydown(event) {
+    if (disabled)
+        return;
     const step = event.shiftKey ? 10 : 1;
     let nextS = saturation;
     let nextL = lightnessValue;
     let handled = false;
     switch (event.key) {
-      case 'ArrowLeft':
-        nextS = clamp(saturation - step, 0, 100);
-        handled = true;
-        break;
-      case 'ArrowRight':
-        nextS = clamp(saturation + step, 0, 100);
-        handled = true;
-        break;
-      case 'ArrowUp':
-        nextL = clamp(lightnessValue + step, 0, 100);
-        handled = true;
-        break;
-      case 'ArrowDown':
-        nextL = clamp(lightnessValue - step, 0, 100);
-        handled = true;
-        break;
+        case 'ArrowLeft':
+            nextS = clamp(saturation - step, 0, 100);
+            handled = true;
+            break;
+        case 'ArrowRight':
+            nextS = clamp(saturation + step, 0, 100);
+            handled = true;
+            break;
+        case 'ArrowUp':
+            nextL = clamp(lightnessValue + step, 0, 100);
+            handled = true;
+            break;
+        case 'ArrowDown':
+            nextL = clamp(lightnessValue - step, 0, 100);
+            handled = true;
+            break;
     }
     if (handled) {
-      event.preventDefault();
-      commitFromHsla({ h: hue, s: nextS, l: nextL, a: alphaValue }, 'change');
+        event.preventDefault();
+        commitFromHsla({ h: hue, s: nextS, l: nextL, a: alphaValue }, 'change');
     }
-  }
-
-  // ── Swatch composition ──────────────────────────────────────────────────
-
-  /**
-   * Canonicalize a swatch string to the same hex format the picker emits, so
-   * value-matching in ColorSwatchPicker works regardless of input syntax
-   * (#0f0 vs #00ff00 vs rgb()). Returns null when the swatch is unparseable.
-   */
-  function normalizeSwatch(swatch: string): string | null {
+}
+// ── Swatch composition ──────────────────────────────────────────────────
+/**
+ * Canonicalize a swatch string to the same hex format the picker emits, so
+ * value-matching in ColorSwatchPicker works regardless of input syntax
+ * (#0f0 vs #00ff00 vs rgb()). Returns null when the swatch is unparseable.
+ */
+function normalizeSwatch(swatch) {
     const parsed = parseToHsla(swatch);
-    if (!parsed) return null;
+    if (!parsed)
+        return null;
     return formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha).toLowerCase();
-  }
-
-  /**
-   * Pre-normalized swatches mapped to the ColorSwatch shape that ColorSwatchPicker
-   * expects. Entries that fail `normalizeSwatch` keep their original string as the
-   * color: a CSS-valid-but-non-normalizable value still paints its swatch background,
-   * while a truly invalid value (e.g. `not-a-color`) paints nothing — either way it
-   * never matches the selected value, so it can never show as selected or be committed.
-   */
-  const normalizedSwatchColors = $derived<ColorSwatch[]>(
-    (swatches ?? []).map((swatch) => ({
-      color: normalizeSwatch(swatch) ?? swatch,
-    })),
-  );
-
-  const currentHex = $derived(formatHex(hue, saturation, lightnessValue, alphaValue, alpha));
-
-  function handleSwatchChange(
-    selectedColor: Parameters<NonNullable<ColorSwatchPickerProps['onchange']>>[0],
-  ): void {
-    if (disabled) return;
+}
+/**
+ * Pre-normalized swatches mapped to the ColorSwatch shape that ColorSwatchPicker
+ * expects. Entries that fail `normalizeSwatch` keep their original string as the
+ * color: a CSS-valid-but-non-normalizable value still paints its swatch background,
+ * while a truly invalid value (e.g. `not-a-color`) paints nothing — either way it
+ * never matches the selected value, so it can never show as selected or be committed.
+ */
+const normalizedSwatchColors = $derived((swatches ?? []).map((swatch) => ({
+    color: normalizeSwatch(swatch) ?? swatch,
+})));
+const currentHex = $derived(formatHex(hue, saturation, lightnessValue, alphaValue, alpha));
+function handleSwatchChange(selectedColor) {
+    if (disabled)
+        return;
     const parsed = parseToHsla(selectedColor);
-    if (!parsed) return;
+    if (!parsed)
+        return;
     commitFromHsla(parsed, 'change');
-  }
-
-  // ── Form reset ──────────────────────────────────────────────────────────
-
-  let hiddenInput: HTMLInputElement | null = $state(null);
-
-  $effect(() => {
+}
+// ── Form reset ──────────────────────────────────────────────────────────
+let hiddenInput = $state(null);
+$effect(() => {
     const input = hiddenInput;
-    if (input === null) return;
+    if (input === null)
+        return;
     // Use input.form (not closest('form')): HTMLInputElement.form honors the `form`
     // attribute association, so a hidden input linked to a non-ancestor form via
     // <input form="id"> still wires up its reset listener.
     const form = input.form;
-    if (form === null) return;
-
-    function resetToDefault(): void {
-      const fallback = defaultValue ?? '';
-      const parsed = fallback === '' ? null : parseToHsla(fallback);
-      if (parsed === null) {
-        hue = 0;
-        saturation = 0;
-        lightnessValue = 0;
-        alphaValue = 1;
-        internalValue = '';
-        lastEmittedHex = '';
-        if (value !== undefined) value = '';
+    if (form === null)
         return;
-      }
-      applyHsla(parsed);
-      const hex = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha);
-      internalValue = hex;
-      lastEmittedHex = hex;
-      if (value !== undefined) value = hex;
+    function resetToDefault() {
+        const fallback = defaultValue ?? '';
+        const parsed = fallback === '' ? null : parseToHsla(fallback);
+        if (parsed === null) {
+            hue = 0;
+            saturation = 0;
+            lightnessValue = 0;
+            alphaValue = 1;
+            internalValue = '';
+            lastEmittedHex = '';
+            if (value !== undefined)
+                value = '';
+            return;
+        }
+        applyHsla(parsed);
+        const hex = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha);
+        internalValue = hex;
+        lastEmittedHex = hex;
+        if (value !== undefined)
+            value = hex;
     }
-
     form.addEventListener('reset', resetToDefault);
     return () => {
-      form.removeEventListener('reset', resetToDefault);
+        form.removeEventListener('reset', resetToDefault);
     };
-  });
-
-  // ── Visual derived data ─────────────────────────────────────────────────
-
-  const hueColor = $derived(`hsl(${hue}, 100%, 50%)`);
-  const previewColor = $derived(
-    internalValue === ''
-      ? 'transparent'
-      : alpha
+});
+// ── Visual derived data ─────────────────────────────────────────────────
+const hueColor = $derived(`hsl(${hue}, 100%, 50%)`);
+const previewColor = $derived(internalValue === ''
+    ? 'transparent'
+    : alpha
         ? `hsla(${hue}, ${saturation}%, ${lightnessValue}%, ${alphaValue})`
-        : `hsl(${hue}, ${saturation}%, ${lightnessValue}%)`,
-  );
-
-  // HSV position of the gradient handle (x = HSV saturation, y = HSV value).
-  const handlePosition = $derived.by(() => {
+        : `hsl(${hue}, ${saturation}%, ${lightnessValue}%)`);
+// HSV position of the gradient handle (x = HSV saturation, y = HSV value).
+const handlePosition = $derived.by(() => {
     const ln = lightnessValue / 100;
     const sn = saturation / 100;
     const v = ln + sn * Math.min(ln, 1 - ln);
     const svFromHsl = v === 0 ? 0 : 2 * (1 - ln / v);
     return { x: svFromHsl * 100, y: (1 - v) * 100 };
-  });
-
-  const hueAriaValue = $derived(Math.round(hue));
-  const alphaAriaValue = $derived(Math.round(alphaValue * 100));
+});
+const hueAriaValue = $derived(Math.round(hue));
+const alphaAriaValue = $derived(Math.round(alphaValue * 100));
 </script>
 
 <div