Colour field

"use client";

import { useId, useRef, useState } from "react";
import type { ComponentProps, CSSProperties, KeyboardEvent, PointerEvent, ReactNode, ToggleEvent } from "react";
import "./color-field.css";

type Hsva = { h: number; s: number; v: number; a: number };
type Drag = "area" | "hue" | "alpha";

export type ColorFieldProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children"> & {
  label: ReactNode;
  /** Hex colour, such as "#ff6a2b", or "#ff6a2b80" with alpha. */
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Hex colours offered as one-press swatches. */
  presets?: string[];
  /** Adds an opacity strip; the value gains two alpha digits when it is not fully opaque. */
  withAlpha?: boolean;
  /** Submits a hidden input holding the hex value. */
  name?: string;
  disabled?: boolean;
};

const HUE_STRIP = "linear-gradient(to right in hsl longer hue, hsl(0 100% 50%), hsl(360 100% 50%))";

const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
const byte = (n: number) => Math.round(clamp(n, 0, 1) * 255).toString(16).padStart(2, "0");

function parseHex(input: string): [number, number, number, number] | null {
  const raw = input.trim().replace(/^#/, "");
  if (!/^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(raw)) return null;
  const full = raw.length <= 4 ? [...raw].map((c) => c + c).join("") : raw;
  const at = (i: number) => parseInt(full.slice(i, i + 2), 16) / 255;
  return [at(0), at(2), at(4), full.length === 8 ? at(6) : 1];
}

/** Keeps the previous hue and saturation where a colour has none (greys and black), so thumbs do not jump. */
function toHsva(hex: string, prev: Hsva): Hsva | null {
  const rgba = parseHex(hex);
  if (!rgba) return null;
  const [r, g, b, a] = rgba;
  const max = Math.max(r, g, b);
  const d = max - Math.min(r, g, b);
  let h = prev.h;
  if (d > 0) {
    if (max === r) h = ((g - b) / d + 6) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h *= 60;
  }
  return { h, s: max === 0 ? prev.s : d / max, v: max, a };
}

function toRgb({ h, s, v }: Hsva): [number, number, number] {
  const f = (n: number) => {
    const k = (n + h / 60) % 6;
    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));
  };
  return [f(5), f(3), f(1)];
}

function toHex(color: Hsva, withAlpha: boolean) {
  const hex = `#${toRgb(color).map(byte).join("")}`;
  return withAlpha && color.a < 1 ? hex + byte(color.a) : hex;
}

const START: Hsva = { h: 0, s: 0, v: 0, a: 1 };

export function ColorField({
  label,
  value,
  defaultValue = "#000000",
  onValueChange,
  presets,
  withAlpha = false,
  name,
  disabled = false,
  className,
  style,
  ...rest
}: ColorFieldProps) {
  const id = useId();
  const anchor = `--eq-color-field-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
  const triggerRef = useRef<HTMLButtonElement>(null);
  const areaRef = useRef<HTMLDivElement>(null);
  const [color, setColor] = useState(() => toHsva(value ?? defaultValue, START) ?? START);
  const [seen, setSeen] = useState(value);
  const [drag, setDrag] = useState<Drag | null>(null);
  const [draft, setDraft] = useState<string | null>(null);

  const hex = toHex(color, withAlpha);
  if (value !== seen) {
    setSeen(value);
    const next = value === undefined ? null : toHsva(value, color);
    if (next && toHex(next, withAlpha) !== hex) setColor(next);
  }

  const opaque = toHex({ ...color, a: 1 }, false);
  const hueColor = `hsl(${Math.round(color.h)} 100% 50%)`;

  function change(next: Hsva) {
    setColor(next);
    const nextHex = toHex(next, withAlpha);
    if (nextHex !== hex) onValueChange?.(nextHex);
  }

  function pick(target: string) {
    const next = toHsva(target, color);
    if (next) change(withAlpha ? next : { ...next, a: 1 });
  }

  function pointAt(event: PointerEvent<HTMLDivElement>) {
    const box = event.currentTarget.getBoundingClientRect();
    return {
      x: clamp((event.clientX - box.left) / box.width, 0, 1),
      y: clamp((event.clientY - box.top) / box.height, 0, 1),
    };
  }

  function moveTo(kind: Drag, x: number, y: number) {
    if (kind === "area") change({ ...color, s: x, v: 1 - y });
    else if (kind === "hue") change({ ...color, h: x * 360 });
    else change({ ...color, a: x });
  }

  function pointerHandlers(kind: Drag) {
    return {
      onPointerDown(event: PointerEvent<HTMLDivElement>) {
        if (event.button !== 0) return;
        event.preventDefault();
        event.currentTarget.setPointerCapture(event.pointerId);
        event.currentTarget.focus();
        const { x, y } = pointAt(event);
        moveTo(kind, x, y);
      },
      onPointerMove(event: PointerEvent<HTMLDivElement>) {
        if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
        // The first click springs the thumb over; from here on it follows the pointer exactly.
        setDrag(kind);
        const { x, y } = pointAt(event);
        moveTo(kind, x, y);
      },
      onPointerUp: () => setDrag(null),
      onPointerCancel: () => setDrag(null),
    };
  }

  function keyStep(event: KeyboardEvent<HTMLDivElement>, kind: Drag) {
    const step = event.shiftKey ? 10 : 1;
    const up = ["ArrowRight", "ArrowUp", "PageUp"].includes(event.key);
    const down = ["ArrowLeft", "ArrowDown", "PageDown"].includes(event.key);
    const by = (event.key.startsWith("Page") ? 10 : step) * (up ? 1 : down ? -1 : 0);
    if (kind === "area") {
      const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
      const s = horizontal ? color.s + by / 100 : color.s;
      const v = !horizontal ? color.v + by / 100 : color.v;
      if (event.key === "Home") return change({ ...color, s: 0 });
      if (event.key === "End") return change({ ...color, s: 1 });
      if (!up && !down) return false;
      return change({ ...color, s: clamp(s, 0, 1), v: clamp(v, 0, 1) });
    }
    const [now, top] = kind === "hue" ? [color.h, 360] : [color.a * 100, 100];
    let next: number;
    if (event.key === "Home") next = 0;
    else if (event.key === "End") next = top;
    else if (up || down) next = clamp(Math.round(now) + by, 0, top);
    else return false;
    if (kind === "hue") change({ ...color, h: next });
    else change({ ...color, a: next / 100 });
  }

  function handleKeyDown(kind: Drag) {
    return (event: KeyboardEvent<HTMLDivElement>) => {
      if (keyStep(event, kind) === false) return;
      event.preventDefault();
    };
  }

  function handleToggle(event: ToggleEvent<HTMLDivElement>) {
    if (event.newState !== "open") return setDraft(null);
    const panel = event.currentTarget;
    // Without anchor positioning, place the panel under the swatch once, as it opens.
    if (!CSS.supports("anchor-name: --a")) {
      const box = triggerRef.current?.getBoundingClientRect();
      if (box) {
        panel.style.top = `${box.bottom + 4}px`;
        panel.style.left = `${Math.max(8, Math.min(box.left, window.innerWidth - panel.offsetWidth - 8))}px`;
      }
    }
    areaRef.current?.focus();
  }

  const percent = (n: number) => `${Math.round(n * 100)}%`;
  const vars = {
    ...style,
    "--_anchor": anchor,
    "--_color": hex,
    "--_opaque": opaque,
  } as CSSProperties;

  return (
    <div
      {...rest}
      className={["eq-color-field", className].filter(Boolean).join(" ")}
      style={vars}
      data-disabled={disabled || undefined}
    >
      <label className="eq-color-field-label" id={`${id}-label`} htmlFor={`${id}-trigger`}>
        {label}
      </label>
      <button
        ref={triggerRef}
        type="button"
        id={`${id}-trigger`}
        className="eq-color-field-trigger"
        popoverTarget={`${id}-panel`}
        aria-labelledby={`${id}-label ${id}-value`}
        aria-haspopup="dialog"
        disabled={disabled}
      >
        <span className="eq-color-field-swatch" aria-hidden="true" />
        <span className="eq-color-field-value" id={`${id}-value`}>
          {hex}
        </span>
      </button>
      <div
        id={`${id}-panel`}
        className="eq-color-field-panel"
        popover="auto"
        role="dialog"
        aria-labelledby={`${id}-label`}
        onToggle={handleToggle}
      >
        <div
          ref={areaRef}
          className="eq-color-field-area"
          role="slider"
          tabIndex={0}
          aria-label="Saturation and brightness"
          aria-roledescription="2D slider"
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={Math.round(color.s * 100)}
          aria-valuetext={`Saturation ${percent(color.s)}, brightness ${percent(color.v)}`}
          data-dragging={drag === "area" || undefined}
          style={{
            backgroundImage: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`,
          }}
          onKeyDown={handleKeyDown("area")}
          {...pointerHandlers("area")}
        >
          <span
            className="eq-color-field-thumb"
            style={{ left: `${color.s * 100}%`, top: `${(1 - color.v) * 100}%` }}
          />
        </div>
        <div
          className="eq-color-field-strip"
          role="slider"
          tabIndex={0}
          aria-label="Hue"
          aria-valuemin={0}
          aria-valuemax={360}
          aria-valuenow={Math.round(color.h)}
          aria-valuetext={`${Math.round(color.h)} degrees`}
          data-strip="hue"
          data-dragging={drag === "hue" || undefined}
          style={{ backgroundImage: HUE_STRIP }}
          onKeyDown={handleKeyDown("hue")}
          {...pointerHandlers("hue")}
        >
          <span
            className="eq-color-field-thumb"
            style={{ left: `${(color.h / 360) * 100}%`, "--_color": hueColor } as CSSProperties}
          />
        </div>
        {withAlpha && (
          <div
            className="eq-color-field-strip"
            role="slider"
            tabIndex={0}
            aria-label="Opacity"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(color.a * 100)}
            aria-valuetext={percent(color.a)}
            data-strip="alpha"
            data-dragging={drag === "alpha" || undefined}
            onKeyDown={handleKeyDown("alpha")}
            {...pointerHandlers("alpha")}
          >
            <span className="eq-color-field-thumb" style={{ left: `${color.a * 100}%` }} />
          </div>
        )}
        <input
          className="eq-color-field-hex"
          aria-label="Hex"
          spellCheck={false}
          autoComplete="off"
          value={draft ?? hex}
          aria-invalid={draft !== null && parseHex(draft) === null ? true : undefined}
          onChange={(event) => {
            const text = event.currentTarget.value;
            setDraft(text);
            if (parseHex(text)) pick(text);
          }}
          onBlur={() => setDraft(null)}
          onKeyDown={(event) => {
            if (event.key !== "Enter") return;
            event.preventDefault();
            setDraft(null);
          }}
        />
        {presets && presets.length > 0 && (
          <div className="eq-color-field-presets" role="group" aria-label="Presets">
            {presets.map((preset) => {
              const parsed = toHsva(preset, color);
              const presetHex = parsed ? toHex(withAlpha ? parsed : { ...parsed, a: 1 }, withAlpha) : preset;
              return (
                <button
                  key={preset}
                  type="button"
                  className="eq-color-field-preset"
                  aria-label={presetHex}
                  aria-pressed={presetHex === hex}
                  style={{ "--_color": presetHex } as CSSProperties}
                  onClick={() => pick(preset)}
                />
              );
            })}
          </div>
        )}
      </div>
      {name && <input type="hidden" name={name} value={hex} disabled={disabled} />}
    </div>
  );
}