@destyler/color-picker 0.0.7-beta.7 → 0.1.0

package/dist/index.js

@@ -0,0 +1,1449 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { getColorAreaGradient, normalizeColor, parseColor } from "@destyler/color";
+import { createScope, dataAttr, disableTextSelection, dispatchInputValueEvent, getEventKey, getEventPoint, getEventStep, getInitialFocus, getRelativePoint, isLeftClick, isModifierKey, query, queryAll, raf, trackFormControl, trackPointerMove, visuallyHiddenStyle } from "@destyler/dom";
+import { getPlacement, getPlacementStyles } from "@destyler/popper";
+import { trackDismissableElement } from "@destyler/dismissable";
+import { compact, tryCatch } from "@destyler/utils";
+import { createMachine, guards } from "@destyler/xstate";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("color-picker", [
+	"root",
+	"label",
+	"control",
+	"trigger",
+	"positioner",
+	"content",
+	"area",
+	"areaThumb",
+	"valueText",
+	"areaBackground",
+	"channelSlider",
+	"channelSliderLabel",
+	"channelSliderTrack",
+	"channelSliderThumb",
+	"channelSliderValueText",
+	"channelInput",
+	"transparencyGrid",
+	"swatchGroup",
+	"swatchTrigger",
+	"swatchIndicator",
+	"swatch",
+	"eyeDropperTrigger",
+	"formatTrigger",
+	"formatSelect"
+]);
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
+	getLabelId: (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
+	getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `color-picker:${ctx.id}:hidden-input`,
+	getControlId: (ctx) => ctx.ids?.control ?? `color-picker:${ctx.id}:control`,
+	getTriggerId: (ctx) => ctx.ids?.trigger ?? `color-picker:${ctx.id}:trigger`,
+	getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
+	getPositionerId: (ctx) => ctx.ids?.positioner ?? `color-picker:${ctx.id}:positioner`,
+	getFormatSelectId: (ctx) => ctx.ids?.formatSelect ?? `color-picker:${ctx.id}:format-select`,
+	getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
+	getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
+	getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
+	getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
+	getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
+	getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+	getAreaThumbEl: (ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
+	getChannelSliderThumbEl: (ctx, channel) => dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
+	getChannelInputEl: (ctx, channel) => {
+		const selector = `input[data-channel="${channel}"]`;
+		return [...queryAll(dom.getContentEl(ctx), selector), ...queryAll(dom.getControlEl(ctx), selector)];
+	},
+	getFormatSelectEl: (ctx) => dom.getById(ctx, dom.getFormatSelectId(ctx)),
+	getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+	getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
+	getAreaValueFromPoint(ctx, point) {
+		const areaEl = dom.getAreaEl(ctx);
+		if (!areaEl) return;
+		const { percent } = getRelativePoint(point, areaEl);
+		return percent;
+	},
+	getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+	getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+	getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+	getChannelSliderTrackEl: (ctx, channel) => {
+		return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel));
+	},
+	getChannelSliderValueFromPoint(ctx, point, channel) {
+		const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
+		if (!trackEl) return;
+		const { percent } = getRelativePoint(point, trackEl);
+		return percent;
+	},
+	getChannelInputEls: (ctx) => {
+		return [...queryAll(dom.getContentEl(ctx), "input[data-channel]"), ...queryAll(dom.getControlEl(ctx), "input[data-channel]")];
+	}
+});
+
+//#endregion
+//#region src/utils/get-channel-display-color.ts
+function getChannelDisplayColor(color, channel) {
+	switch (channel) {
+		case "hue": return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
+		case "lightness":
+		case "brightness":
+		case "saturation":
+		case "red":
+		case "green":
+		case "blue": return color.withChannelValue("alpha", 1);
+		case "alpha": return color;
+		default: throw new Error(`Unknown color channel: ${channel}`);
+	}
+}
+
+//#endregion
+//#region src/utils/get-channel-input-value.ts
+function getChannelValue(color, channel) {
+	if (channel == null) return "";
+	if (channel === "hex") return color.toString("hex");
+	if (channel === "css") return color.toString("css");
+	if (channel in color) return color.getChannelValue(channel).toString();
+	const isHSL = color.getFormat() === "hsla";
+	switch (channel) {
+		case "hue": return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
+		case "saturation": return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
+		case "lightness": return color.toFormat("hsla").getChannelValue("lightness").toString();
+		case "brightness": return color.toFormat("hsba").getChannelValue("brightness").toString();
+		case "red":
+		case "green":
+		case "blue": return color.toFormat("rgba").getChannelValue(channel).toString();
+		default: return color.getChannelValue(channel).toString();
+	}
+}
+function getChannelRange(color, channel) {
+	switch (channel) {
+		case "hex":
+			const minColor = parseColor("#000000");
+			const maxColor = parseColor("#FFFFFF");
+			return {
+				minValue: minColor.toHexInt(),
+				maxValue: maxColor.toHexInt(),
+				pageSize: 10,
+				step: 1
+			};
+		case "css": return void 0;
+		case "hue":
+		case "saturation":
+		case "lightness": return color.toFormat("hsla").getChannelRange(channel);
+		case "brightness": return color.toFormat("hsba").getChannelRange(channel);
+		case "red":
+		case "green":
+		case "blue": return color.toFormat("rgba").getChannelRange(channel);
+		default: return color.getChannelRange(channel);
+	}
+}
+
+//#endregion
+//#region src/utils/get-slider-background.ts
+function getSliderBackgroundDirection(orientation, dir) {
+	if (orientation === "vertical") return "top";
+	else if (dir === "ltr") return "right";
+	else return "left";
+}
+function getSliderBackground(props) {
+	const { channel, value, dir, orientation } = props;
+	const bgDirection = getSliderBackgroundDirection(orientation, dir);
+	const { minValue, maxValue } = value.getChannelRange(channel);
+	switch (channel) {
+		case "hue": return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+		case "lightness": {
+			const start = value.withChannelValue(channel, minValue).toString("css");
+			const middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
+			const end = value.withChannelValue(channel, maxValue).toString("css");
+			return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`;
+		}
+		case "saturation":
+		case "brightness":
+		case "red":
+		case "green":
+		case "blue":
+		case "alpha": {
+			const start = value.withChannelValue(channel, minValue).toString("css");
+			const end = value.withChannelValue(channel, maxValue).toString("css");
+			return `linear-gradient(to ${bgDirection}, ${start}, ${end})`;
+		}
+		default: throw new Error(`Unknown color channel: ${channel}`);
+	}
+}
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const value = state.context.value;
+	const areaValue = state.context.areaValue;
+	const valueAsString = state.context.valueAsString;
+	const disabled = state.context.isDisabled;
+	const interactive = state.context.isInteractive;
+	const dragging = state.hasTag("dragging");
+	const open = state.hasTag("open");
+	const focused = state.hasTag("focused");
+	const getAreaChannels = (props) => {
+		const channels = areaValue.getChannels();
+		return {
+			xChannel: props.xChannel ?? channels[1],
+			yChannel: props.yChannel ?? channels[2]
+		};
+	};
+	const currentPlacement = state.context.currentPlacement;
+	const popperStyles = getPlacementStyles({
+		...state.context.positioning,
+		placement: currentPlacement
+	});
+	function getSwatchTriggerState(props) {
+		const color = normalizeColor(props.value).toFormat(state.context.format);
+		return {
+			value: color,
+			valueAsString: color.toString("hex"),
+			checked: color.isEqual(value),
+			disabled: props.disabled || !interactive
+		};
+	}
+	return {
+		dragging,
+		open,
+		valueAsString,
+		value,
+		setOpen(nextOpen) {
+			if (nextOpen === open) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		setValue(value$1) {
+			send({
+				type: "VALUE.SET",
+				value: normalizeColor(value$1),
+				src: "set-color"
+			});
+		},
+		getChannelValue(channel) {
+			return getChannelValue(value, channel);
+		},
+		getChannelValueText(channel, locale) {
+			return value.formatChannelValue(channel, locale);
+		},
+		setChannelValue(channel, channelValue) {
+			const color = value.withChannelValue(channel, channelValue);
+			send({
+				type: "VALUE.SET",
+				value: color,
+				src: "set-channel"
+			});
+		},
+		format: state.context.format,
+		setFormat(format) {
+			const formatValue = value.toFormat(format);
+			send({
+				type: "VALUE.SET",
+				value: formatValue,
+				src: "set-format"
+			});
+		},
+		alpha: value.getChannelValue("alpha"),
+		setAlpha(alphaValue) {
+			const color = value.withChannelValue("alpha", alphaValue);
+			send({
+				type: "VALUE.SET",
+				value: color,
+				src: "set-alpha"
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"dir": state.context.dir,
+				"id": dom.getRootId(state.context),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"data-invalid": dataAttr(state.context.invalid),
+				"style": { "--value": value.toString("css") }
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				"dir": state.context.dir,
+				"id": dom.getLabelId(state.context),
+				"htmlFor": dom.getHiddenInputId(state.context),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-focus": dataAttr(focused),
+				onClick(event) {
+					event.preventDefault();
+					const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]");
+					inputEl?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				"id": dom.getControlId(state.context),
+				"dir": state.context.dir,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-state": open ? "open" : "closed",
+				"data-focus": dataAttr(focused)
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				"id": dom.getTriggerId(state.context),
+				"dir": state.context.dir,
+				"disabled": disabled,
+				"aria-label": `select color. current color is ${valueAsString}`,
+				"aria-controls": dom.getContentId(state.context),
+				"aria-labelledby": dom.getLabelId(state.context),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-placement": currentPlacement,
+				"aria-expanded": dataAttr(open),
+				"data-state": open ? "open" : "closed",
+				"data-focus": dataAttr(focused),
+				"type": "button",
+				onClick() {
+					if (!interactive) return;
+					send({ type: "TRIGGER.CLICK" });
+				},
+				onBlur() {
+					if (!interactive) return;
+					send({ type: "TRIGGER.BLUR" });
+				},
+				"style": { position: "relative" }
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				id: dom.getPositionerId(state.context),
+				dir: state.context.dir,
+				style: popperStyles.floating
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				"id": dom.getContentId(state.context),
+				"dir": state.context.dir,
+				"data-placement": currentPlacement,
+				"data-state": open ? "open" : "closed",
+				"hidden": !open
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				"dir": state.context.dir,
+				"data-disabled": dataAttr(disabled),
+				"data-focus": dataAttr(focused)
+			});
+		},
+		getAreaProps(props = {}) {
+			const { xChannel, yChannel } = getAreaChannels(props);
+			const { areaStyles } = getColorAreaGradient(areaValue, {
+				xChannel,
+				yChannel,
+				dir: state.context.dir
+			});
+			return normalize.element({
+				...parts.area.attrs,
+				"id": dom.getAreaId(state.context),
+				"role": "group",
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(state.context.readOnly),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					if (isModifierKey(event)) return;
+					const point = getEventPoint(event);
+					const channel = {
+						xChannel,
+						yChannel
+					};
+					send({
+						type: "AREA.POINTER_DOWN",
+						point,
+						channel,
+						id: "area"
+					});
+					event.preventDefault();
+				},
+				"style": {
+					position: "relative",
+					touchAction: "none",
+					forcedColorAdjust: "none",
+					...areaStyles
+				}
+			});
+		},
+		getAreaBackgroundProps(props = {}) {
+			const { xChannel, yChannel } = getAreaChannels(props);
+			const { areaGradientStyles } = getColorAreaGradient(areaValue, {
+				xChannel,
+				yChannel,
+				dir: state.context.dir
+			});
+			return normalize.element({
+				...parts.areaBackground.attrs,
+				"id": dom.getAreaGradientId(state.context),
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"style": {
+					position: "relative",
+					touchAction: "none",
+					forcedColorAdjust: "none",
+					...areaGradientStyles
+				}
+			});
+		},
+		getAreaThumbProps(props = {}) {
+			const { xChannel, yChannel } = getAreaChannels(props);
+			const channel = {
+				xChannel,
+				yChannel
+			};
+			const xPercent = areaValue.getChannelValuePercent(xChannel);
+			const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+			const xValue = areaValue.getChannelValue(xChannel);
+			const yValue = areaValue.getChannelValue(yChannel);
+			const color = areaValue.withChannelValue("alpha", 1).toString("css");
+			return normalize.element({
+				...parts.areaThumb.attrs,
+				"id": dom.getAreaThumbId(state.context),
+				"dir": state.context.dir,
+				"tabIndex": disabled ? void 0 : 0,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"role": "slider",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": xValue,
+				"aria-label": `${xChannel} and ${yChannel}`,
+				"aria-roledescription": "2d slider",
+				"aria-valuetext": `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
+				"style": {
+					"position": "absolute",
+					"left": `${xPercent * 100}%`,
+					"top": `${yPercent * 100}%`,
+					"transform": "translate(-50%, -50%)",
+					"touchAction": "none",
+					"forcedColorAdjust": "none",
+					"--color": color,
+					"background": color
+				},
+				onFocus() {
+					if (!interactive) return;
+					send({
+						type: "AREA.FOCUS",
+						id: "area",
+						channel
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const step = getEventStep(event);
+					const keyMap = {
+						ArrowUp() {
+							send({
+								type: "AREA.ARROW_UP",
+								channel,
+								step
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "AREA.ARROW_DOWN",
+								channel,
+								step
+							});
+						},
+						ArrowLeft() {
+							send({
+								type: "AREA.ARROW_LEFT",
+								channel,
+								step
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "AREA.ARROW_RIGHT",
+								channel,
+								step
+							});
+						},
+						PageUp() {
+							send({
+								type: "AREA.PAGE_UP",
+								channel,
+								step
+							});
+						},
+						PageDown() {
+							send({
+								type: "AREA.PAGE_DOWN",
+								channel,
+								step
+							});
+						},
+						Escape(event$1) {
+							event$1.stopPropagation();
+						}
+					};
+					const exec = keyMap[getEventKey(event, state.context)];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		},
+		getTransparencyGridProps(props = {}) {
+			const { size = "12px" } = props;
+			return normalize.element({
+				...parts.transparencyGrid.attrs,
+				style: {
+					"--size": size,
+					"width": "100%",
+					"height": "100%",
+					"position": "absolute",
+					"backgroundColor": "#fff",
+					"backgroundImage": "conic-gradient(#eeeeee 0 25%, transparent 0 50%, #eeeeee 0 75%, transparent 0)",
+					"backgroundSize": "var(--size) var(--size)",
+					"inset": "0px",
+					"zIndex": "auto",
+					"pointerEvents": "none"
+				}
+			});
+		},
+		getChannelSliderProps(props) {
+			const { orientation = "horizontal", channel, format } = props;
+			return normalize.element({
+				...parts.channelSlider.attrs,
+				"data-channel": channel,
+				"data-orientation": orientation,
+				"role": "presentation",
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					if (isModifierKey(event)) return;
+					const point = getEventPoint(event);
+					send({
+						type: "CHANNEL_SLIDER.POINTER_DOWN",
+						channel,
+						format,
+						point,
+						id: channel,
+						orientation
+					});
+					event.preventDefault();
+				},
+				"style": {
+					position: "relative",
+					touchAction: "none"
+				}
+			});
+		},
+		getChannelSliderTrackProps(props) {
+			const { orientation = "horizontal", channel, format } = props;
+			const normalizedValue = format ? value.toFormat(format) : areaValue;
+			return normalize.element({
+				...parts.channelSliderTrack.attrs,
+				"id": dom.getChannelSliderTrackId(state.context, channel),
+				"role": "group",
+				"data-channel": channel,
+				"data-orientation": orientation,
+				"style": {
+					position: "relative",
+					forcedColorAdjust: "none",
+					backgroundImage: getSliderBackground({
+						orientation,
+						channel,
+						dir: state.context.dir,
+						value: normalizedValue
+					})
+				}
+			});
+		},
+		getChannelSliderLabelProps(props) {
+			const { channel } = props;
+			return normalize.element({
+				...parts.channelSliderLabel.attrs,
+				"data-channel": channel,
+				onClick(event) {
+					if (!interactive) return;
+					event.preventDefault();
+					const thumbId = dom.getChannelSliderThumbId(state.context, channel);
+					dom.getById(state.context, thumbId)?.focus({ preventScroll: true });
+				},
+				"style": {
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				}
+			});
+		},
+		getChannelSliderValueTextProps(props) {
+			return normalize.element({
+				...parts.channelSliderValueText.attrs,
+				"data-channel": props.channel
+			});
+		},
+		getChannelSliderThumbProps(props) {
+			const { orientation = "horizontal", channel, format } = props;
+			const normalizedValue = format ? value.toFormat(format) : areaValue;
+			const channelRange = normalizedValue.getChannelRange(channel);
+			const channelValue = normalizedValue.getChannelValue(channel);
+			const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
+			const placementStyles = orientation === "horizontal" ? {
+				left: `${offset * 100}%`,
+				top: "50%"
+			} : {
+				top: `${offset * 100}%`,
+				left: "50%"
+			};
+			return normalize.element({
+				...parts.channelSliderThumb.attrs,
+				"id": dom.getChannelSliderThumbId(state.context, channel),
+				"role": "slider",
+				"aria-label": channel,
+				"tabIndex": disabled ? void 0 : 0,
+				"data-channel": channel,
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": orientation,
+				"aria-disabled": dataAttr(disabled),
+				"aria-orientation": orientation,
+				"aria-valuemax": channelRange.maxValue,
+				"aria-valuemin": channelRange.minValue,
+				"aria-valuenow": channelValue,
+				"aria-valuetext": `${channel} ${channelValue}`,
+				"style": {
+					forcedColorAdjust: "none",
+					position: "absolute",
+					background: getChannelDisplayColor(areaValue, channel).toString("css"),
+					...placementStyles
+				},
+				onFocus() {
+					if (!interactive) return;
+					send({
+						type: "CHANNEL_SLIDER.FOCUS",
+						channel
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const step = getEventStep(event) * channelRange.step;
+					const keyMap = {
+						ArrowUp() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_UP",
+								channel,
+								step
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_DOWN",
+								channel,
+								step
+							});
+						},
+						ArrowLeft() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_LEFT",
+								channel,
+								step
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_RIGHT",
+								channel,
+								step
+							});
+						},
+						PageUp() {
+							send({
+								type: "CHANNEL_SLIDER.PAGE_UP",
+								channel
+							});
+						},
+						PageDown() {
+							send({
+								type: "CHANNEL_SLIDER.PAGE_DOWN",
+								channel
+							});
+						},
+						Home() {
+							send({
+								type: "CHANNEL_SLIDER.HOME",
+								channel
+							});
+						},
+						End() {
+							send({
+								type: "CHANNEL_SLIDER.END",
+								channel
+							});
+						},
+						Escape(event$1) {
+							event$1.stopPropagation();
+						}
+					};
+					const exec = keyMap[getEventKey(event, state.context)];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		},
+		getChannelInputProps(props) {
+			const { channel } = props;
+			const isTextField = channel === "hex" || channel === "css";
+			const channelRange = getChannelRange(value, channel);
+			return normalize.input({
+				...parts.channelInput.attrs,
+				"dir": state.context.dir,
+				"type": isTextField ? "text" : "number",
+				"data-channel": channel,
+				"aria-label": channel,
+				"spellCheck": false,
+				"autoComplete": "off",
+				"disabled": disabled,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"readOnly": state.context.readOnly,
+				"defaultValue": getChannelValue(value, channel),
+				"min": channelRange?.minValue,
+				"max": channelRange?.maxValue,
+				"step": channelRange?.step,
+				onBeforeInput(event) {
+					if (isTextField || !interactive) return;
+					const value$1 = event.currentTarget.value;
+					if (value$1.match(/[^0-9.]/g)) event.preventDefault();
+				},
+				onFocus(event) {
+					if (!interactive) return;
+					send({
+						type: "CHANNEL_INPUT.FOCUS",
+						channel
+					});
+					event.currentTarget.select();
+				},
+				onBlur(event) {
+					if (!interactive) return;
+					const value$1 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
+					send({
+						type: "CHANNEL_INPUT.BLUR",
+						channel,
+						value: value$1,
+						isTextField
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (event.key === "Enter") {
+						const value$1 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
+						send({
+							type: "CHANNEL_INPUT.CHANGE",
+							channel,
+							value: value$1,
+							isTextField
+						});
+						event.preventDefault();
+					}
+				},
+				"style": {
+					appearance: "none",
+					WebkitAppearance: "none",
+					MozAppearance: "textfield"
+				}
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				type: "text",
+				disabled,
+				name: state.context.name,
+				tabIndex: -1,
+				readOnly: state.context.readOnly,
+				required: state.context.required,
+				id: dom.getHiddenInputId(state.context),
+				style: visuallyHiddenStyle,
+				defaultValue: valueAsString
+			});
+		},
+		getEyeDropperTriggerProps() {
+			return normalize.button({
+				...parts.eyeDropperTrigger.attrs,
+				"type": "button",
+				"dir": state.context.dir,
+				"disabled": disabled,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(state.context.invalid),
+				"data-readonly": dataAttr(state.context.readOnly),
+				"aria-label": "Pick a color from the screen",
+				onClick() {
+					if (!interactive) return;
+					send("EYEDROPPER.CLICK");
+				}
+			});
+		},
+		getSwatchGroupProps() {
+			return normalize.element({
+				...parts.swatchGroup.attrs,
+				role: "group"
+			});
+		},
+		getSwatchTriggerState,
+		getSwatchTriggerProps(props) {
+			const swatchState = getSwatchTriggerState(props);
+			return normalize.button({
+				...parts.swatchTrigger.attrs,
+				"disabled": swatchState.disabled,
+				"dir": state.context.dir,
+				"type": "button",
+				"aria-label": `select ${swatchState.valueAsString} as the color`,
+				"data-state": swatchState.checked ? "checked" : "unchecked",
+				"data-value": swatchState.valueAsString,
+				"data-disabled": dataAttr(swatchState.disabled),
+				onClick() {
+					if (swatchState.disabled) return;
+					send({
+						type: "SWATCH_TRIGGER.CLICK",
+						value: swatchState.value
+					});
+				},
+				"style": {
+					"--color": swatchState.valueAsString,
+					"position": "relative"
+				}
+			});
+		},
+		getSwatchIndicatorProps(props) {
+			const swatchState = getSwatchTriggerState(props);
+			return normalize.element({
+				...parts.swatchIndicator.attrs,
+				dir: state.context.dir,
+				hidden: !swatchState.checked
+			});
+		},
+		getSwatchProps(props) {
+			const { respectAlpha = true } = props;
+			const swatchState = getSwatchTriggerState(props);
+			const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
+			return normalize.element({
+				...parts.swatch.attrs,
+				"dir": state.context.dir,
+				"data-state": swatchState.checked ? "checked" : "unchecked",
+				"data-value": swatchState.valueAsString,
+				"style": {
+					"--color": color,
+					"position": "relative",
+					"background": color
+				}
+			});
+		},
+		getFormatTriggerProps() {
+			return normalize.button({
+				...parts.formatTrigger.attrs,
+				"dir": state.context.dir,
+				"type": "button",
+				"aria-label": `change color format to ${getNextFormat(state.context.format)}`,
+				onClick(event) {
+					if (event.currentTarget.disabled) return;
+					const nextFormat = getNextFormat(state.context.format);
+					send({
+						type: "FORMAT.SET",
+						format: nextFormat,
+						src: "format-trigger"
+					});
+				}
+			});
+		},
+		getFormatSelectProps() {
+			return normalize.select({
+				...parts.formatSelect.attrs,
+				"aria-label": "change color format",
+				"dir": state.context.dir,
+				"defaultValue": state.context.format,
+				"disabled": disabled,
+				onChange(event) {
+					const format = assertFormat(event.currentTarget.value);
+					send({
+						type: "FORMAT.SET",
+						format,
+						src: "format-select"
+					});
+				}
+			});
+		}
+	};
+}
+const formats = [
+	"hsba",
+	"hsla",
+	"rgba"
+];
+const formatRegex = /* @__PURE__ */ new RegExp(`^(${formats.join("|")})$`);
+function getNextFormat(format) {
+	const index = formats.indexOf(format);
+	return formats[index + 1] ?? formats[0];
+}
+function assertFormat(format) {
+	if (formatRegex.test(format)) return format;
+	throw new Error(`Unsupported color format: ${format}`);
+}
+
+//#endregion
+//#region src/parse.ts
+function parse(colorString) {
+	return parseColor(colorString);
+}
+
+//#endregion
+//#region src/machine.ts
+const { and } = guards;
+const sync = {
+	inputs(ctx, color) {
+		const channelInputs = dom.getChannelInputEls(ctx);
+		raf(() => {
+			channelInputs.forEach((inputEl) => {
+				const channel = inputEl.dataset.channel;
+				dom.setValue(inputEl, getChannelValue(color || ctx.value, channel));
+			});
+		});
+	},
+	formatSelect(ctx) {
+		const selectEl = dom.getFormatSelectEl(ctx);
+		raf(() => {
+			dom.setValue(selectEl, ctx.format);
+		});
+	}
+};
+const invoke = {
+	changeEnd(ctx) {
+		const value = ctx.value.toFormat(ctx.format);
+		ctx.onValueChangeEnd?.({
+			value,
+			valueAsString: ctx.valueAsString
+		});
+	},
+	change(ctx) {
+		const value = ctx.value.toFormat(ctx.format);
+		ctx.onValueChange?.({
+			value,
+			valueAsString: ctx.valueAsString
+		});
+		dispatchInputValueEvent(dom.getHiddenInputEl(ctx), { value: ctx.valueAsString });
+	},
+	formatChange(ctx) {
+		ctx.onFormatChange?.({ format: ctx.format });
+	}
+};
+const set = {
+	value(ctx, color) {
+		if (!color || ctx.value.isEqual(color)) return;
+		ctx.value = color;
+		invoke.change(ctx);
+	},
+	format(ctx, format) {
+		if (ctx.format === format) return;
+		ctx.format = format;
+		invoke.formatChange(ctx);
+	}
+};
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "color-picker",
+		initial: ctx.open ? "open" : "idle",
+		context: {
+			dir: "ltr",
+			value: parse("#000000"),
+			format: "rgba",
+			disabled: false,
+			closeOnSelect: false,
+			openAutoFocus: true,
+			...ctx,
+			activeId: null,
+			activeChannel: null,
+			activeOrientation: null,
+			fieldsetDisabled: false,
+			restoreFocus: true,
+			positioning: {
+				...ctx.positioning,
+				placement: "bottom"
+			}
+		},
+		computed: {
+			isRtl: (ctx$1) => ctx$1.dir === "rtl",
+			isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled,
+			isInteractive: (ctx$1) => !(ctx$1.isDisabled || ctx$1.readOnly),
+			valueAsString: (ctx$1) => ctx$1.value.toString(ctx$1.format),
+			areaValue: (ctx$1) => {
+				const format = ctx$1.format.startsWith("hsl") ? "hsla" : "hsba";
+				return ctx$1.value.toFormat(format);
+			}
+		},
+		activities: ["trackFormControl"],
+		watch: {
+			value: ["syncInputElements"],
+			format: ["syncFormatSelectElement"],
+			open: ["toggleVisibility"]
+		},
+		on: {
+			"VALUE.SET": { actions: ["setValue"] },
+			"FORMAT.SET": { actions: ["setFormat"] },
+			"CHANNEL_INPUT.CHANGE": { actions: ["setChannelColorFromInput"] },
+			"EYEDROPPER.CLICK": { actions: ["openEyeDropper"] },
+			"SWATCH_TRIGGER.CLICK": { actions: ["setValue"] }
+		},
+		states: {
+			"idle": {
+				tags: ["closed"],
+				on: {
+					"CONTROLLED.OPEN": {
+						target: "open",
+						actions: ["setInitialFocus"]
+					},
+					"OPEN": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnOpen"]
+					}, {
+						target: "open",
+						actions: ["invokeOnOpen", "setInitialFocus"]
+					}],
+					"TRIGGER.CLICK": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnOpen"]
+					}, {
+						target: "open",
+						actions: ["invokeOnOpen", "setInitialFocus"]
+					}],
+					"CHANNEL_INPUT.FOCUS": {
+						target: "focused",
+						actions: ["setActiveChannel"]
+					}
+				}
+			},
+			"focused": {
+				tags: ["closed", "focused"],
+				on: {
+					"CONTROLLED.OPEN": {
+						target: "open",
+						actions: ["setInitialFocus"]
+					},
+					"OPEN": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnOpen"]
+					}, {
+						target: "open",
+						actions: ["invokeOnOpen", "setInitialFocus"]
+					}],
+					"TRIGGER.CLICK": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnOpen"]
+					}, {
+						target: "open",
+						actions: ["invokeOnOpen", "setInitialFocus"]
+					}],
+					"CHANNEL_INPUT.FOCUS": { actions: ["setActiveChannel"] },
+					"CHANNEL_INPUT.BLUR": {
+						target: "idle",
+						actions: ["setChannelColorFromInput"]
+					},
+					"TRIGGER.BLUR": { target: "idle" }
+				}
+			},
+			"open": {
+				tags: ["open"],
+				activities: ["trackPositioning", "trackDismissableElement"],
+				on: {
+					"CONTROLLED.CLOSE": [{
+						guard: "shouldRestoreFocus",
+						target: "focused",
+						actions: ["setReturnFocus"]
+					}, { target: "idle" }],
+					"TRIGGER.CLICK": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					}, {
+						target: "idle",
+						actions: ["invokeOnClose"]
+					}],
+					"AREA.POINTER_DOWN": {
+						target: "open:dragging",
+						actions: [
+							"setActiveChannel",
+							"setAreaColorFromPoint",
+							"focusAreaThumb"
+						]
+					},
+					"AREA.FOCUS": { actions: ["setActiveChannel"] },
+					"CHANNEL_SLIDER.POINTER_DOWN": {
+						target: "open:dragging",
+						actions: [
+							"setActiveChannel",
+							"setChannelColorFromPoint",
+							"focusChannelThumb"
+						]
+					},
+					"CHANNEL_SLIDER.FOCUS": { actions: ["setActiveChannel"] },
+					"AREA.ARROW_LEFT": { actions: ["decrementAreaXChannel"] },
+					"AREA.ARROW_RIGHT": { actions: ["incrementAreaXChannel"] },
+					"AREA.ARROW_UP": { actions: ["incrementAreaYChannel"] },
+					"AREA.ARROW_DOWN": { actions: ["decrementAreaYChannel"] },
+					"AREA.PAGE_UP": { actions: ["incrementAreaXChannel"] },
+					"AREA.PAGE_DOWN": { actions: ["decrementAreaXChannel"] },
+					"CHANNEL_SLIDER.ARROW_LEFT": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_RIGHT": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_UP": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_DOWN": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.PAGE_UP": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.PAGE_DOWN": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.HOME": { actions: ["setChannelToMin"] },
+					"CHANNEL_SLIDER.END": { actions: ["setChannelToMax"] },
+					"CHANNEL_INPUT.BLUR": { actions: ["setChannelColorFromInput"] },
+					"INTERACT_OUTSIDE": [
+						{
+							guard: "isOpenControlled",
+							actions: ["invokeOnClose"]
+						},
+						{
+							guard: "shouldRestoreFocus",
+							target: "focused",
+							actions: ["invokeOnClose", "setReturnFocus"]
+						},
+						{
+							target: "idle",
+							actions: ["invokeOnClose"]
+						}
+					],
+					"CLOSE": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					}, {
+						target: "idle",
+						actions: ["invokeOnClose"]
+					}],
+					"SWATCH_TRIGGER.CLICK": [
+						{
+							guard: and("isOpenControlled", "closeOnSelect"),
+							actions: ["setValue", "invokeOnClose"]
+						},
+						{
+							guard: "closeOnSelect",
+							target: "focused",
+							actions: [
+								"setValue",
+								"invokeOnClose",
+								"setReturnFocus"
+							]
+						},
+						{ actions: ["setValue"] }
+					]
+				}
+			},
+			"open:dragging": {
+				tags: ["open"],
+				exit: ["clearActiveChannel"],
+				activities: [
+					"trackPointerMove",
+					"disableTextSelection",
+					"trackPositioning",
+					"trackDismissableElement"
+				],
+				on: {
+					"CONTROLLED.CLOSE": [{
+						guard: "shouldRestoreFocus",
+						target: "focused",
+						actions: ["setReturnFocus"]
+					}, { target: "idle" }],
+					"AREA.POINTER_MOVE": { actions: ["setAreaColorFromPoint", "focusAreaThumb"] },
+					"AREA.POINTER_UP": {
+						target: "open",
+						actions: ["invokeOnChangeEnd"]
+					},
+					"CHANNEL_SLIDER.POINTER_MOVE": { actions: ["setChannelColorFromPoint", "focusChannelThumb"] },
+					"CHANNEL_SLIDER.POINTER_UP": {
+						target: "open",
+						actions: ["invokeOnChangeEnd"]
+					},
+					"INTERACT_OUTSIDE": [
+						{
+							guard: "isOpenControlled",
+							actions: ["invokeOnClose"]
+						},
+						{
+							guard: "shouldRestoreFocus",
+							target: "focused",
+							actions: ["invokeOnClose", "setReturnFocus"]
+						},
+						{
+							target: "idle",
+							actions: ["invokeOnClose"]
+						}
+					],
+					"CLOSE": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					}, {
+						target: "idle",
+						actions: ["invokeOnClose"]
+					}]
+				}
+			}
+		}
+	}, {
+		guards: {
+			closeOnSelect: (ctx$1) => !!ctx$1.closeOnSelect,
+			isOpenControlled: (ctx$1) => !!ctx$1["open.controlled"],
+			shouldRestoreFocus: (ctx$1) => !!ctx$1.restoreFocus
+		},
+		activities: {
+			trackPositioning(ctx$1) {
+				ctx$1.currentPlacement ||= ctx$1.positioning.placement;
+				const anchorEl = dom.getTriggerEl(ctx$1);
+				const getPositionerEl = () => dom.getPositionerEl(ctx$1);
+				return getPlacement(anchorEl, getPositionerEl, {
+					...ctx$1.positioning,
+					defer: true,
+					onComplete(data) {
+						ctx$1.currentPlacement = data.placement;
+					}
+				});
+			},
+			trackDismissableElement(ctx$1, _evt, { send }) {
+				const getContentEl = () => dom.getContentEl(ctx$1);
+				return trackDismissableElement(getContentEl, {
+					exclude: dom.getTriggerEl(ctx$1),
+					defer: true,
+					onInteractOutside(event) {
+						ctx$1.onInteractOutside?.(event);
+						if (event.defaultPrevented) return;
+						ctx$1.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+					},
+					onPointerDownOutside: ctx$1.onPointerDownOutside,
+					onFocusOutside: ctx$1.onFocusOutside,
+					onDismiss() {
+						send({ type: "INTERACT_OUTSIDE" });
+					}
+				});
+			},
+			trackFormControl(ctx$1, _evt, { send, initialContext }) {
+				const inputEl = dom.getHiddenInputEl(ctx$1);
+				return trackFormControl(inputEl, {
+					onFieldsetDisabledChange(disabled) {
+						ctx$1.fieldsetDisabled = disabled;
+					},
+					onFormReset() {
+						send({
+							type: "VALUE.SET",
+							value: initialContext.value,
+							src: "form.reset"
+						});
+					}
+				});
+			},
+			trackPointerMove(ctx$1, evt, { send }) {
+				return trackPointerMove(dom.getDoc(ctx$1), {
+					onPointerMove({ point }) {
+						const type = ctx$1.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
+						send({
+							type,
+							point,
+							format: evt.format
+						});
+					},
+					onPointerUp() {
+						const type = ctx$1.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
+						send({ type });
+					}
+				});
+			},
+			disableTextSelection(ctx$1) {
+				return disableTextSelection({
+					doc: dom.getDoc(ctx$1),
+					target: dom.getContentEl(ctx$1)
+				});
+			}
+		},
+		actions: {
+			openEyeDropper(ctx$1) {
+				const isSupported = "EyeDropper" in dom.getWin(ctx$1);
+				if (!isSupported) return;
+				const win = dom.getWin(ctx$1);
+				const picker = new win.EyeDropper();
+				picker.open().then(({ sRGBHex }) => {
+					const format = ctx$1.value.getFormat();
+					const color = parseColor(sRGBHex).toFormat(format);
+					set.value(ctx$1, color);
+					ctx$1.onValueChangeEnd?.({
+						value: ctx$1.value,
+						valueAsString: ctx$1.valueAsString
+					});
+				}).catch(() => void 0);
+			},
+			setActiveChannel(ctx$1, evt) {
+				ctx$1.activeId = evt.id;
+				if (evt.channel) ctx$1.activeChannel = evt.channel;
+				if (evt.orientation) ctx$1.activeOrientation = evt.orientation;
+			},
+			clearActiveChannel(ctx$1) {
+				ctx$1.activeChannel = null;
+				ctx$1.activeId = null;
+				ctx$1.activeOrientation = null;
+			},
+			setAreaColorFromPoint(ctx$1, evt) {
+				const normalizedValue = evt.format ? ctx$1.value.toFormat(evt.format) : ctx$1.areaValue;
+				const { xChannel, yChannel } = evt.channel || ctx$1.activeChannel;
+				const percent = dom.getAreaValueFromPoint(ctx$1, evt.point);
+				if (!percent) return;
+				const xValue = normalizedValue.getChannelPercentValue(xChannel, percent.x);
+				const yValue = normalizedValue.getChannelPercentValue(yChannel, 1 - percent.y);
+				const color = normalizedValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
+				set.value(ctx$1, color);
+			},
+			setChannelColorFromPoint(ctx$1, evt) {
+				const channel = evt.channel || ctx$1.activeId;
+				const normalizedValue = evt.format ? ctx$1.value.toFormat(evt.format) : ctx$1.areaValue;
+				const percent = dom.getChannelSliderValueFromPoint(ctx$1, evt.point, channel);
+				if (!percent) return;
+				const orientation = ctx$1.activeOrientation || "horizontal";
+				const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
+				const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
+				const color = normalizedValue.withChannelValue(channel, value);
+				set.value(ctx$1, color);
+			},
+			setValue(ctx$1, evt) {
+				set.value(ctx$1, evt.value);
+			},
+			setFormat(ctx$1, evt) {
+				set.format(ctx$1, evt.format);
+			},
+			syncInputElements(ctx$1) {
+				sync.inputs(ctx$1);
+			},
+			invokeOnChangeEnd(ctx$1) {
+				invoke.changeEnd(ctx$1);
+			},
+			setChannelColorFromInput(ctx$1, evt) {
+				const { channel, isTextField, value } = evt;
+				const currentAlpha = ctx$1.value.getChannelValue("alpha");
+				let color;
+				if (channel === "alpha") {
+					let valueAsNumber = Number.parseFloat(value);
+					valueAsNumber = Number.isNaN(valueAsNumber) ? currentAlpha : valueAsNumber;
+					color = ctx$1.value.withChannelValue("alpha", valueAsNumber);
+				} else if (isTextField) color = tryCatch(() => parse(value).withChannelValue("alpha", currentAlpha), () => ctx$1.value);
+				else {
+					const current = ctx$1.value.toFormat(ctx$1.format);
+					const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
+					color = current.withChannelValue(channel, valueAsNumber);
+				}
+				sync.inputs(ctx$1, color);
+				set.value(ctx$1, color);
+			},
+			incrementChannel(ctx$1, evt) {
+				const color = ctx$1.value.incrementChannel(evt.channel, evt.step);
+				set.value(ctx$1, color);
+			},
+			decrementChannel(ctx$1, evt) {
+				const color = ctx$1.value.decrementChannel(evt.channel, evt.step);
+				set.value(ctx$1, color);
+			},
+			incrementAreaXChannel(ctx$1, evt) {
+				const { xChannel } = evt.channel;
+				const color = ctx$1.areaValue.incrementChannel(xChannel, evt.step);
+				set.value(ctx$1, color);
+			},
+			decrementAreaXChannel(ctx$1, evt) {
+				const { xChannel } = evt.channel;
+				const color = ctx$1.areaValue.decrementChannel(xChannel, evt.step);
+				set.value(ctx$1, color);
+			},
+			incrementAreaYChannel(ctx$1, evt) {
+				const { yChannel } = evt.channel;
+				const color = ctx$1.areaValue.incrementChannel(yChannel, evt.step);
+				set.value(ctx$1, color);
+			},
+			decrementAreaYChannel(ctx$1, evt) {
+				const { yChannel } = evt.channel;
+				const color = ctx$1.areaValue.decrementChannel(yChannel, evt.step);
+				set.value(ctx$1, color);
+			},
+			setChannelToMax(ctx$1, evt) {
+				const range = ctx$1.value.getChannelRange(evt.channel);
+				const color = ctx$1.value.withChannelValue(evt.channel, range.maxValue);
+				set.value(ctx$1, color);
+			},
+			setChannelToMin(ctx$1, evt) {
+				const range = ctx$1.value.getChannelRange(evt.channel);
+				const color = ctx$1.value.withChannelValue(evt.channel, range.minValue);
+				set.value(ctx$1, color);
+			},
+			focusAreaThumb(ctx$1) {
+				raf(() => {
+					dom.getAreaThumbEl(ctx$1)?.focus({ preventScroll: true });
+				});
+			},
+			focusChannelThumb(ctx$1, evt) {
+				raf(() => {
+					dom.getChannelSliderThumbEl(ctx$1, evt.channel)?.focus({ preventScroll: true });
+				});
+			},
+			setInitialFocus(ctx$1) {
+				if (!ctx$1.openAutoFocus) return;
+				raf(() => {
+					const element = getInitialFocus({
+						root: dom.getContentEl(ctx$1),
+						getInitialEl: ctx$1.initialFocusEl
+					});
+					element?.focus({ preventScroll: true });
+				});
+			},
+			setReturnFocus(ctx$1) {
+				raf(() => {
+					dom.getTriggerEl(ctx$1)?.focus({ preventScroll: true });
+				});
+			},
+			syncFormatSelectElement(ctx$1) {
+				sync.formatSelect(ctx$1);
+			},
+			invokeOnOpen(ctx$1) {
+				ctx$1.onOpenChange?.({ open: true });
+			},
+			invokeOnClose(ctx$1) {
+				ctx$1.onOpenChange?.({ open: false });
+			},
+			toggleVisibility(ctx$1, evt, { send }) {
+				send({
+					type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: evt
+				});
+			}
+		},
+		compareFns: { value: (a, b) => a.isEqual(b) }
+	});
+}
+
+//#endregion
+export { anatomy, connect, machine, parse };