ColorWheel

Concentric saturation/lightness pad + hue arc picker.

Usage

import { ColorWheel, ColorWheelProps, ColorWheelValue, WHEEL_CENTER_X, WHEEL_CENTER_Y } from "@instruments/materia-ui/components/color-wheel";

ColorWheel is fully controlled - own the ColorWheelValue ({h,s,l}) and set it from onChange; it stores nothing internally, so dropping the update freezes the picker.
Values are HSL (h 0–360, s/l 0–100), not hex - convert at your storage boundary; a hex string won't position the handles.
onChange fires on every pointer drag and arrow-key step - throttle persistence/network writes downstream rather than reacting to each intermediate value.

Prop	Type	Default	Description
onChange(required)	`(value: ColorWheelValue) => void`		Fired on every pointer drag of the pad or hue arc with the updated HSL value.
value(required)	`ColorWheelValue`		Current HSL selection; the picker is fully controlled and keeps no internal state.