@destyler/color-picker 0.2.11 → 0.2.12

package/dist/index.d.mts

@@ -1,13 +1,10 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { Color, Color as Color$1, ColorAxes, ColorChannel, ColorFormat, ColorType } from "@destyler/color";
 import { PositioningOptions } from "@destyler/popper";
 import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/dismissable";
-import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, DirectionProperty, NormalizeProps, Orientation, PropTypes, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 //#endregion
 //#region src/types.d.ts
 type ExtendedColorChannel = ColorChannel | 'hex' | 'css';
@@ -331,12 +328,12 @@ interface MachineApi<T extends PropTypes = PropTypes> {
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
 //#region src/parse.d.ts
-declare function parse(colorString: string): Color$1;
+export declare function parse(colorString: string): Color$1;
 //#endregion
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type Color, type ColorAxes, type ColorChannel, type ColorFormat, type ColorType, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type FormatChangeDetails, type InteractOutsideEvent, type MachineState, type OpenChangeDetails, type PointerDownOutsideEvent, type PositioningOptions, type Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+export type { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, Color, ColorAxes, ColorChannel, ColorFormat, ColorType, UserDefinedContext as Context, ElementIds, FocusOutsideEvent, FormatChangeDetails, InteractOutsideEvent, MachineState, OpenChangeDetails, PointerDownOutsideEvent, PositioningOptions, Service, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, ValueChangeDetails };

package/dist/index.mjs

@@ -5,11 +5,9 @@ import { getPlacement, getPlacementStyles } from "@destyler/popper";
 import { trackDismissableElement } from "@destyler/dismissable";
 import { compact, isControlled, isPropUserProvided, resolveControllableOpen, resolveControllableProp, tryCatch, withControllableProvided } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("color-picker").parts("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({
@@ -58,7 +56,6 @@ const dom = createScope({
 		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) {
@@ -74,7 +71,6 @@ function getChannelDisplayColor(color, channel) {
 		default: throw new Error(`Unknown color channel: ${channel}`);
 	}
 }
-
 //#endregion
 //#region src/utils/get-channel-input-value.ts
 function getChannelValue(color, channel) {
@@ -116,7 +112,12 @@ function getChannelRange(color, channel) {
 		default: return color.getChannelRange(channel);
 	}
 }
-
+//#endregion
+//#region src/utils/get-resolved-color.ts
+function getResolvedColor(value) {
+	if (value === void 0) throw new TypeError("Color picker value must be resolved before use");
+	return value;
+}
 //#endregion
 //#region src/utils/get-slider-background.ts
 function getSliderBackgroundDirection(orientation, dir) {
@@ -140,11 +141,10 @@ function getSliderBackground(props) {
 		default: throw new Error(`Unknown color channel: ${channel}`);
 	}
 }
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
-	const value = state.context.value;
+	const value = getResolvedColor(state.context.value);
 	const areaValue = state.context.areaValue;
 	const valueAsString = state.context.valueAsString;
 	const disabled = state.context.isDisabled;
@@ -182,10 +182,10 @@ function connect(state, send, normalize) {
 			if (nextOpen === open) return;
 			send({ type: nextOpen ? "OPEN" : "CLOSE" });
 		},
-		setValue(value$1) {
+		setValue(value) {
 			send({
 				type: "VALUE.SET",
-				value: normalizeColor(value$1),
+				value: normalizeColor(value),
 				src: "set-color"
 			});
 		},
@@ -205,8 +205,8 @@ function connect(state, send, normalize) {
 		format: state.context.format,
 		setFormat(format) {
 			send({
-				type: "VALUE.SET",
-				value: value.toFormat(format),
+				type: "FORMAT.SET",
+				format: assertFormat(format),
 				src: "set-format"
 			});
 		},
@@ -460,8 +460,8 @@ function connect(state, send, normalize) {
 								step
 							});
 						},
-						Escape(event$1) {
-							event$1.stopPropagation();
+						Escape(event) {
+							event.stopPropagation();
 						}
 					}[getEventKey(event, state.context)];
 					if (exec) {
@@ -500,11 +500,12 @@ function connect(state, send, normalize) {
 					if (!interactive) return;
 					if (!isLeftClick(event)) return;
 					if (isModifierKey(event)) return;
+					const point = getEventPoint(event);
 					send({
 						type: "CHANNEL_SLIDER.POINTER_DOWN",
 						channel,
 						format,
-						point: getEventPoint(event),
+						point,
 						id: channel,
 						orientation
 					});
@@ -610,6 +611,7 @@ function connect(state, send, normalize) {
 							send({
 								type: "CHANNEL_SLIDER.ARROW_UP",
 								channel,
+								format,
 								step
 							});
 						},
@@ -617,6 +619,7 @@ function connect(state, send, normalize) {
 							send({
 								type: "CHANNEL_SLIDER.ARROW_DOWN",
 								channel,
+								format,
 								step
 							});
 						},
@@ -624,6 +627,7 @@ function connect(state, send, normalize) {
 							send({
 								type: "CHANNEL_SLIDER.ARROW_LEFT",
 								channel,
+								format,
 								step
 							});
 						},
@@ -631,35 +635,42 @@ function connect(state, send, normalize) {
 							send({
 								type: "CHANNEL_SLIDER.ARROW_RIGHT",
 								channel,
+								format,
 								step
 							});
 						},
 						PageUp() {
 							send({
 								type: "CHANNEL_SLIDER.PAGE_UP",
-								channel
+								channel,
+								format,
+								step
 							});
 						},
 						PageDown() {
 							send({
 								type: "CHANNEL_SLIDER.PAGE_DOWN",
-								channel
+								channel,
+								format,
+								step
 							});
 						},
 						Home() {
 							send({
 								type: "CHANNEL_SLIDER.HOME",
-								channel
+								channel,
+								format
 							});
 						},
 						End() {
 							send({
 								type: "CHANNEL_SLIDER.END",
-								channel
+								channel,
+								format
 							});
 						},
-						Escape(event$1) {
-							event$1.stopPropagation();
+						Escape(event) {
+							event.stopPropagation();
 						}
 					}[getEventKey(event, state.context)];
 					if (exec) {
@@ -692,7 +703,8 @@ function connect(state, send, normalize) {
 				"step": channelRange?.step,
 				onBeforeInput(event) {
 					if (isTextField || !interactive) return;
-					if (event.currentTarget.value.match(/[^0-9.]/g)) event.preventDefault();
+					const value = event.currentTarget.value;
+					if (/[^0-9.]/.test(value)) event.preventDefault();
 				},
 				onFocus(event) {
 					if (!interactive) return;
@@ -704,10 +716,11 @@ function connect(state, send, normalize) {
 				},
 				onBlur(event) {
 					if (!interactive) return;
+					const value = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
 					send({
 						type: "CHANNEL_INPUT.BLUR",
 						channel,
-						value: isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber,
+						value,
 						isTextField
 					});
 				},
@@ -715,10 +728,11 @@ function connect(state, send, normalize) {
 					if (event.defaultPrevented) return;
 					if (!interactive) return;
 					if (event.key === "Enter") {
+						const value = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
 						send({
 							type: "CHANNEL_INPUT.CHANGE",
 							channel,
-							value: isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber,
+							value,
 							isTextField
 						});
 						event.preventDefault();
@@ -854,21 +868,20 @@ const formats = [
 	"hsla",
 	"rgba"
 ];
-const formatRegex = /* @__PURE__ */ new RegExp(`^(${formats.join("|")})$`);
+const formatRegex = new RegExp(`^(${formats.join("|")})$`);
 function getNextFormat(format) {
-	return formats[formats.indexOf(format) + 1] ?? formats[0];
+	const index = formats.indexOf(format);
+	return formats[index + 1] ?? formats[0];
 }
 function assertFormat(format) {
-	if (formatRegex.test(format)) return format;
+	if (typeof format === "string" && 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;
@@ -878,7 +891,7 @@ const sync = {
 		raf(() => {
 			channelInputs.forEach((inputEl) => {
 				const channel = inputEl.dataset.channel;
-				dom.setValue(inputEl, getChannelValue(color || ctx.value, channel));
+				dom.setValue(inputEl, getChannelValue(getResolvedColor(color || ctx.value), channel));
 			});
 		});
 	},
@@ -889,20 +902,26 @@ const sync = {
 		});
 	}
 };
+function getChannelColor(ctx, channel, format) {
+	const value = ctx.value;
+	if (channel === "alpha") return value;
+	return format ? value.toFormat(format) : ctx.areaValue;
+}
 const invoke = {
 	changeEnd(ctx) {
-		const value = ctx.value.toFormat(ctx.format);
+		const value = getResolvedColor(ctx.value).toFormat(ctx.format);
 		ctx.onValueChangeEnd?.({
 			value,
 			valueAsString: ctx.valueAsString
 		});
 	},
-	change(ctx) {
-		const value = ctx.value.toFormat(ctx.format);
+	change(ctx, isCurrent) {
+		const value = getResolvedColor(ctx.value).toFormat(ctx.format);
 		ctx.onValueChange?.({
 			value,
 			valueAsString: ctx.valueAsString
 		});
+		if (isCurrent && !isCurrent()) return;
 		dispatchInputValueEvent(dom.getHiddenInputEl(ctx), { value: ctx.valueAsString });
 	},
 	formatChange(ctx) {
@@ -910,8 +929,8 @@ const invoke = {
 	}
 };
 const set = {
-	value(ctx, color) {
-		if (!color || ctx.value.isEqual(color)) return;
+	value(ctx, color, isCurrent) {
+		if (!color || getResolvedColor(ctx.value).isEqual(color)) return;
 		if (isControlled(ctx, "value")) {
 			const value = color.toFormat(ctx.format);
 			ctx.onValueChange?.({
@@ -921,7 +940,8 @@ const set = {
 			return;
 		}
 		ctx.value = color;
-		invoke.change(ctx);
+		if (isCurrent && !isCurrent()) return;
+		invoke.change(ctx, isCurrent);
 	},
 	format(ctx, format) {
 		if (ctx.format === format) return;
@@ -938,16 +958,31 @@ function machine(userContext) {
 		valueProvided: isPropUserProvided(ctx, "value"),
 		fallback: parse("#000000")
 	});
+	const eyeDropperOwners = /* @__PURE__ */ new WeakMap();
+	const getEyeDropperOwner = (ctx) => {
+		let owner = eyeDropperOwners.get(ctx);
+		if (!owner) {
+			owner = {
+				generation: 0,
+				controllers: /* @__PURE__ */ new Set()
+			};
+			eyeDropperOwners.set(ctx, owner);
+		}
+		return owner;
+	};
+	const defaults = {
+		dir: "ltr",
+		value: parse("#000000"),
+		format: "rgba",
+		disabled: false,
+		closeOnSelect: false,
+		openAutoFocus: true
+	};
 	return createMachine({
 		id: "color-picker",
 		initial: initialOpen ? "open" : "idle",
 		context: {
-			dir: "ltr",
-			value: parse("#000000"),
-			format: "rgba",
-			disabled: false,
-			closeOnSelect: false,
-			openAutoFocus: true,
+			...defaults,
 			...ctx,
 			value: initialValue,
 			activeId: null,
@@ -961,16 +996,16 @@ function machine(userContext) {
 			}
 		},
 		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);
+			isRtl: (ctx) => ctx.dir === "rtl",
+			isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
+			isInteractive: (ctx) => !(ctx.isDisabled || ctx.readOnly),
+			valueAsString: (ctx) => getResolvedColor(ctx.value).toString(ctx.format),
+			areaValue: (ctx) => {
+				const format = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+				return getResolvedColor(ctx.value).toFormat(format);
 			}
 		},
-		activities: ["trackFormControl"],
+		activities: ["trackFormControl", "trackEyeDropper"],
 		watch: {
 			value: ["syncInputElements"],
 			format: ["syncFormatSelectElement"],
@@ -1181,44 +1216,54 @@ function machine(userContext) {
 		}
 	}, {
 		guards: {
-			closeOnSelect: (ctx$1) => !!ctx$1.closeOnSelect,
-			isOpenControlled: (ctx$1) => isControlled(ctx$1, "open"),
-			shouldRestoreFocus: (ctx$1) => !!ctx$1.restoreFocus
+			closeOnSelect: (ctx) => !!ctx.closeOnSelect,
+			isOpenControlled: (ctx) => isControlled(ctx, "open"),
+			shouldRestoreFocus: (ctx) => !!ctx.restoreFocus
 		},
 		activities: {
-			trackPositioning(ctx$1) {
-				ctx$1.currentPlacement ||= ctx$1.positioning.placement;
-				const anchorEl = dom.getTriggerEl(ctx$1);
-				const getPositionerEl = () => dom.getPositionerEl(ctx$1);
+			trackEyeDropper(ctx) {
+				const owner = getEyeDropperOwner(ctx);
+				owner.generation++;
+				return () => {
+					owner.generation++;
+					owner.controllers.forEach((controller) => controller.abort());
+					owner.controllers.clear();
+				};
+			},
+			trackPositioning(ctx) {
+				ctx.currentPlacement ||= ctx.positioning.placement;
+				const anchorEl = dom.getTriggerEl(ctx);
+				const getPositionerEl = () => dom.getPositionerEl(ctx);
 				return getPlacement(anchorEl, getPositionerEl, {
-					...ctx$1.positioning,
+					...ctx.positioning,
 					defer: true,
 					onComplete(data) {
-						ctx$1.currentPlacement = data.placement;
+						ctx.currentPlacement = data.placement;
 					}
 				});
 			},
-			trackDismissableElement(ctx$1, _evt, { send }) {
-				const getContentEl = () => dom.getContentEl(ctx$1);
+			trackDismissableElement(ctx, _evt, { send }) {
+				const getContentEl = () => dom.getContentEl(ctx);
 				return trackDismissableElement(getContentEl, {
-					exclude: dom.getTriggerEl(ctx$1),
+					exclude: dom.getTriggerEl(ctx),
 					defer: true,
 					onInteractOutside(event) {
-						ctx$1.onInteractOutside?.(event);
+						ctx.onInteractOutside?.(event);
 						if (event.defaultPrevented) return;
-						ctx$1.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+						ctx.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
 					},
-					onPointerDownOutside: ctx$1.onPointerDownOutside,
-					onFocusOutside: ctx$1.onFocusOutside,
+					onPointerDownOutside: ctx.onPointerDownOutside,
+					onFocusOutside: ctx.onFocusOutside,
 					onDismiss() {
 						send({ type: "INTERACT_OUTSIDE" });
 					}
 				});
 			},
-			trackFormControl(ctx$1, _evt, { send, initialContext }) {
-				return trackFormControl(dom.getHiddenInputEl(ctx$1), {
+			trackFormControl(ctx, _evt, { send, initialContext }) {
+				const inputEl = dom.getHiddenInputEl(ctx);
+				return trackFormControl(inputEl, {
 					onFieldsetDisabledChange(disabled) {
-						ctx$1.fieldsetDisabled = disabled;
+						ctx.fieldsetDisabled = disabled;
 					},
 					onFormReset() {
 						send({
@@ -1229,180 +1274,195 @@ function machine(userContext) {
 					}
 				});
 			},
-			trackPointerMove(ctx$1, evt, { send }) {
-				return trackPointerMove(dom.getDoc(ctx$1), {
+			trackPointerMove(ctx, evt, { send }) {
+				return trackPointerMove(dom.getDoc(ctx), {
 					onPointerMove({ point }) {
 						send({
-							type: ctx$1.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE",
+							type: ctx.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE",
 							point,
 							format: evt.format
 						});
 					},
 					onPointerUp() {
-						send({ type: ctx$1.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP" });
+						send({ type: ctx.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP" });
 					}
 				});
 			},
-			disableTextSelection(ctx$1) {
+			disableTextSelection(ctx) {
 				return disableTextSelection({
-					doc: dom.getDoc(ctx$1),
-					target: dom.getContentEl(ctx$1)
+					doc: dom.getDoc(ctx),
+					target: dom.getContentEl(ctx)
 				});
 			}
 		},
 		actions: {
-			openEyeDropper(ctx$1) {
-				if (!("EyeDropper" in dom.getWin(ctx$1))) return;
-				new (dom.getWin(ctx$1)).EyeDropper().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);
+			openEyeDropper(ctx) {
+				if (!("EyeDropper" in dom.getWin(ctx))) return;
+				const win = dom.getWin(ctx);
+				const picker = new win.EyeDropper();
+				const controller = new win.AbortController();
+				const owner = getEyeDropperOwner(ctx);
+				const generation = owner.generation;
+				const isCurrent = () => generation === owner.generation && !controller.signal.aborted;
+				owner.controllers.add(controller);
+				try {
+					picker.open({ signal: controller.signal }).then(({ sRGBHex }) => {
+						if (!isCurrent()) return;
+						const format = getResolvedColor(ctx.value).getFormat();
+						const color = parseColor(sRGBHex).toFormat(format);
+						set.value(ctx, color, isCurrent);
+						if (!isCurrent()) return;
+						ctx.onValueChangeEnd?.({
+							value: getResolvedColor(ctx.value),
+							valueAsString: ctx.valueAsString
+						});
+					}).catch(() => void 0).finally(() => owner.controllers.delete(controller));
+				} catch (error) {
+					owner.controllers.delete(controller);
+					throw error;
+				}
 			},
-			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;
+			setActiveChannel(ctx, evt) {
+				ctx.activeId = evt.id;
+				if (evt.channel) ctx.activeChannel = evt.channel;
+				if (evt.orientation) ctx.activeOrientation = evt.orientation;
 			},
-			clearActiveChannel(ctx$1) {
-				ctx$1.activeChannel = null;
-				ctx$1.activeId = null;
-				ctx$1.activeOrientation = null;
+			clearActiveChannel(ctx) {
+				ctx.activeChannel = null;
+				ctx.activeId = null;
+				ctx.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);
+			setAreaColorFromPoint(ctx, evt) {
+				const normalizedValue = evt.format ? getResolvedColor(ctx.value).toFormat(evt.format) : ctx.areaValue;
+				const { xChannel, yChannel } = evt.channel || ctx.activeChannel;
+				const percent = dom.getAreaValueFromPoint(ctx, 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);
+				set.value(ctx, 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);
+			setChannelColorFromPoint(ctx, evt) {
+				const channel = evt.channel || ctx.activeId;
+				const normalizedValue = evt.format ? getResolvedColor(ctx.value).toFormat(evt.format) : ctx.areaValue;
+				const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel);
 				if (!percent) return;
-				const channelPercent = (ctx$1.activeOrientation || "horizontal") === "horizontal" ? percent.x : percent.y;
+				const channelPercent = (ctx.activeOrientation || "horizontal") === "horizontal" ? percent.x : percent.y;
 				const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
 				const color = normalizedValue.withChannelValue(channel, value);
-				set.value(ctx$1, color);
+				set.value(ctx, color);
 			},
-			setValue(ctx$1, evt) {
-				set.value(ctx$1, evt.value);
+			setValue(ctx, evt) {
+				set.value(ctx, evt.value);
 			},
-			setFormat(ctx$1, evt) {
-				set.format(ctx$1, evt.format);
+			setFormat(ctx, evt) {
+				set.format(ctx, evt.format);
 			},
-			syncInputElements(ctx$1) {
-				sync.inputs(ctx$1);
+			syncInputElements(ctx) {
+				sync.inputs(ctx);
 			},
-			invokeOnChangeEnd(ctx$1) {
-				invoke.changeEnd(ctx$1);
+			invokeOnChangeEnd(ctx) {
+				invoke.changeEnd(ctx);
 			},
-			setChannelColorFromInput(ctx$1, evt) {
+			setChannelColorFromInput(ctx, evt) {
 				const { channel, isTextField, value } = evt;
-				const currentAlpha = ctx$1.value.getChannelValue("alpha");
+				const currentAlpha = getResolvedColor(ctx.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);
+					color = getResolvedColor(ctx.value).withChannelValue("alpha", valueAsNumber);
+				} else if (isTextField) color = tryCatch(() => parse(value).withChannelValue("alpha", currentAlpha), () => getResolvedColor(ctx.value));
 				else {
-					const current = ctx$1.value.toFormat(ctx$1.format);
+					const current = getResolvedColor(ctx.value).toFormat(ctx.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);
+				sync.inputs(ctx, color);
+				set.value(ctx, color);
 			},
-			incrementChannel(ctx$1, evt) {
-				const color = ctx$1.value.incrementChannel(evt.channel, evt.step);
-				set.value(ctx$1, color);
+			incrementChannel(ctx, evt) {
+				const color = getChannelColor(ctx, evt.channel, evt.format).incrementChannel(evt.channel, evt.step);
+				set.value(ctx, color);
 			},
-			decrementChannel(ctx$1, evt) {
-				const color = ctx$1.value.decrementChannel(evt.channel, evt.step);
-				set.value(ctx$1, color);
+			decrementChannel(ctx, evt) {
+				const color = getChannelColor(ctx, evt.channel, evt.format).decrementChannel(evt.channel, evt.step);
+				set.value(ctx, color);
 			},
-			incrementAreaXChannel(ctx$1, evt) {
+			incrementAreaXChannel(ctx, evt) {
 				const { xChannel } = evt.channel;
-				const color = ctx$1.areaValue.incrementChannel(xChannel, evt.step);
-				set.value(ctx$1, color);
+				const color = ctx.areaValue.incrementChannel(xChannel, evt.step);
+				set.value(ctx, color);
 			},
-			decrementAreaXChannel(ctx$1, evt) {
+			decrementAreaXChannel(ctx, evt) {
 				const { xChannel } = evt.channel;
-				const color = ctx$1.areaValue.decrementChannel(xChannel, evt.step);
-				set.value(ctx$1, color);
+				const color = ctx.areaValue.decrementChannel(xChannel, evt.step);
+				set.value(ctx, color);
 			},
-			incrementAreaYChannel(ctx$1, evt) {
+			incrementAreaYChannel(ctx, evt) {
 				const { yChannel } = evt.channel;
-				const color = ctx$1.areaValue.incrementChannel(yChannel, evt.step);
-				set.value(ctx$1, color);
+				const color = ctx.areaValue.incrementChannel(yChannel, evt.step);
+				set.value(ctx, color);
 			},
-			decrementAreaYChannel(ctx$1, evt) {
+			decrementAreaYChannel(ctx, evt) {
 				const { yChannel } = evt.channel;
-				const color = ctx$1.areaValue.decrementChannel(yChannel, evt.step);
-				set.value(ctx$1, color);
+				const color = ctx.areaValue.decrementChannel(yChannel, evt.step);
+				set.value(ctx, 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);
+			setChannelToMax(ctx, evt) {
+				const value = getChannelColor(ctx, evt.channel, evt.format);
+				const range = value.getChannelRange(evt.channel);
+				const color = value.withChannelValue(evt.channel, range.maxValue);
+				set.value(ctx, 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);
+			setChannelToMin(ctx, evt) {
+				const value = getChannelColor(ctx, evt.channel, evt.format);
+				const range = value.getChannelRange(evt.channel);
+				const color = value.withChannelValue(evt.channel, range.minValue);
+				set.value(ctx, color);
 			},
-			focusAreaThumb(ctx$1) {
+			focusAreaThumb(ctx) {
 				raf(() => {
-					dom.getAreaThumbEl(ctx$1)?.focus({ preventScroll: true });
+					dom.getAreaThumbEl(ctx)?.focus({ preventScroll: true });
 				});
 			},
-			focusChannelThumb(ctx$1, evt) {
+			focusChannelThumb(ctx, evt) {
 				raf(() => {
-					dom.getChannelSliderThumbEl(ctx$1, evt.channel)?.focus({ preventScroll: true });
+					dom.getChannelSliderThumbEl(ctx, evt.channel)?.focus({ preventScroll: true });
 				});
 			},
-			setInitialFocus(ctx$1) {
-				if (!ctx$1.openAutoFocus) return;
+			setInitialFocus(ctx) {
+				if (!ctx.openAutoFocus) return;
 				raf(() => {
 					getInitialFocus({
-						root: dom.getContentEl(ctx$1),
-						getInitialEl: ctx$1.initialFocusEl
+						root: dom.getContentEl(ctx),
+						getInitialEl: ctx.initialFocusEl
 					})?.focus({ preventScroll: true });
 				});
 			},
-			setReturnFocus(ctx$1) {
+			setReturnFocus(ctx) {
 				raf(() => {
-					dom.getTriggerEl(ctx$1)?.focus({ preventScroll: true });
+					dom.getTriggerEl(ctx)?.focus({ preventScroll: true });
 				});
 			},
-			syncFormatSelectElement(ctx$1) {
-				sync.formatSelect(ctx$1);
+			syncFormatSelectElement(ctx) {
+				sync.formatSelect(ctx);
 			},
-			invokeOnOpen(ctx$1) {
-				ctx$1.onOpenChange?.({ open: true });
+			invokeOnOpen(ctx) {
+				ctx.onOpenChange?.({ open: true });
 			},
-			invokeOnClose(ctx$1) {
-				ctx$1.onOpenChange?.({ open: false });
+			invokeOnClose(ctx) {
+				ctx.onOpenChange?.({ open: false });
 			},
-			toggleVisibility(ctx$1, evt, { send }) {
+			toggleVisibility(ctx, evt, { send }) {
 				send({
-					type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					type: ctx.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
 					previousEvent: evt
 				});
 			}
 		},
-		compareFns: { value: (a, b) => a.isEqual(b) }
+		compareFns: { value: (a, b) => getResolvedColor(a).isEqual(getResolvedColor(b)) }
 	});
 }
-
 //#endregion
-export { anatomy, connect, machine, parse };
+export { anatomy, connect, machine, parse };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/color-picker",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "a component that allows users to select a color from a color picker.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,14 +22,14 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.11",
-    "@destyler/color": "0.2.11",
-    "@destyler/dismissable": "0.2.11",
-    "@destyler/types": "0.2.11",
-    "@destyler/utils": "0.2.11",
-    "@destyler/dom": "0.2.11",
-    "@destyler/xstate": "0.2.11",
-    "@destyler/popper": "0.2.11"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/color": "0.2.12",
+    "@destyler/dismissable": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/popper": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"