ColorPicker

let { hue, saturation, brightness } = OPENING_COLOR;
let alpha = 1;
let hex = formatHex({ ...hsvToRgb({ h: hue, s: saturation, v: brightness }), a: alpha });

// channelSync() reports every channel together rather than one at a time, so the
// sliders and the area stay one color rather than two views of different ones.
function moveChannel(event: ColorChannelChangeEvent) {
	if (typeof event.values.saturation === "number") saturation = event.values.saturation;
	if (typeof event.values.alpha === "number") alpha = event.values.alpha;
	void handle.update();
}

<ColorPicker>
	<Label htmlFor="preview-brand-color">Brand color</Label>

	<ColorPicker.Group>
		<Input
			id="preview-brand-color"
			type="text"
			name="brandColor"
			value={hex}
			mix={[font("mono")]}
		/>
		<ColorPicker.Trigger
			commandfor="preview-brand-color-panel"
			command="toggle-popover"
			aria-label="Open the color picker"
			value={hex}
		/>
	</ColorPicker.Group>

	<ColorPicker.Dialog id="preview-brand-color-panel" mix={[is("16rem")]}>
		<ColorArea
			aria-label="Saturation and brightness"
			hue={hue}
			saturation={saturation}
			value={brightness}
			style={{ "--ui-color-area-size": "12rem" }}
			mix={[
				colorAreaDrag(),
				on<HTMLDivElement, "ui:color-area-change">("ui:color-area-change", (event) => {
					saturation = event.x;
					brightness = event.y;
					void handle.update();
				}),
			]}
		>
			<ColorArea.SaturationThumb data-color-area-axis="x" aria-label="Saturation" />
			<ColorArea.ValueThumb data-color-area-axis="y" aria-label="Brightness" />
		</ColorArea>

		<div mix={[hstack({ gap: 3, align: "center" })]}>
			<ColorWheel
				aria-label="Hue"
				value={hue}
				mix={[
					is("5rem"),
					bs("5rem"),
					colorWheelDrag(),
					on<HTMLDivElement, "ui:color-wheel-change">("ui:color-wheel-change", (event) => {
						hue = event.hue;
						void handle.update();
					}),
				]}
			/>
			<div
				mix={[
					vstack({ gap: 2, align: "stretch" }),
					basis(0),
					grow(),
					minIs(0),
					channelSync(),
					on<HTMLDivElement, "ui:color-channel-change">("ui:color-channel-change", moveChannel),
				]}
			>
				<ColorSlider channel="saturation" value={saturation}>
					<ColorSlider.Track hue={hue}>
						<ColorSlider.Thumb data-channel="saturation" aria-label="Saturation" />
					</ColorSlider.Track>
				</ColorSlider>
				<ColorSlider channel="alpha" value={alpha}>
					<ColorSlider.Track hue={hue}>
						<ColorSlider.Thumb data-channel="alpha" aria-label="Opacity" />
					</ColorSlider.Track>
				</ColorSlider>
			</div>
		</div>

		<Separator />

		<ColorSwatchPicker
			aria-label="Saved colors"
			name="brandColorPreset"
			mix={[on<HTMLDivElement, "change">("change", choosePreset)]}
		>
			{PRESETS.map((preset) => (
				<ColorSwatchPicker.Swatch
					key={preset.value}
					value={preset.value}
					aria-label={preset.label}
				/>
			))}
		</ColorSwatchPicker>

		<span mix={[font("mono"), text("xs"), fg("neutral")]}>{hex}</span>
	</ColorPicker.Dialog>
</ColorPicker>