@zag-js/color-picker 0.56.0 → 0.57.0

package/dist/index.d.mts

@@ -9,7 +9,7 @@ import { StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -157,6 +157,9 @@ interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
+interface ChannelSliderProps extends ChannelProps {
+    format?: ColorFormat;
+}
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
@@ -219,6 +222,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value
      */
     getChannelValue(channel: ColorChannel): string;
+    /**
+     * Function to get the formatted and localized value of a specific channel
+     */
+    getChannelValueText(channel: ColorChannel, locale: string): string;
     /**
      * Function to set the color value of a specific channel
      */
@@ -253,10 +260,12 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getAreaProps(props?: AreaProps): T["element"];
     getAreaBackgroundProps(props?: AreaProps): T["element"];
     getAreaThumbProps(props?: AreaProps): T["element"];
-    getChannelSliderProps(props: ChannelProps): T["element"];
-    getChannelSliderTrackProps(props: ChannelProps): T["element"];
-    getChannelSliderThumbProps(props: ChannelProps): T["element"];
     getChannelInputProps(props: ChannelInputProps): T["input"];
+    getChannelSliderProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderTrackProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderThumbProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderLabelProps(props: ChannelProps): T["element"];
+    getChannelSliderValueTextProps(props: ChannelProps): T["element"];
     getTransparencyGridProps(props?: TransparencyGridProps): T["element"];
     getEyeDropperTriggerProps(): T["button"];
     getSwatchGroupProps(): T["element"];
@@ -274,4 +283,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
 
 declare const parse: (colorString: string) => Color;
 
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -157,6 +157,9 @@ interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
+interface ChannelSliderProps extends ChannelProps {
+    format?: ColorFormat;
+}
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
@@ -219,6 +222,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value
      */
     getChannelValue(channel: ColorChannel): string;
+    /**
+     * Function to get the formatted and localized value of a specific channel
+     */
+    getChannelValueText(channel: ColorChannel, locale: string): string;
     /**
      * Function to set the color value of a specific channel
      */
@@ -253,10 +260,12 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getAreaProps(props?: AreaProps): T["element"];
     getAreaBackgroundProps(props?: AreaProps): T["element"];
     getAreaThumbProps(props?: AreaProps): T["element"];
-    getChannelSliderProps(props: ChannelProps): T["element"];
-    getChannelSliderTrackProps(props: ChannelProps): T["element"];
-    getChannelSliderThumbProps(props: ChannelProps): T["element"];
     getChannelInputProps(props: ChannelInputProps): T["input"];
+    getChannelSliderProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderTrackProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderThumbProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderLabelProps(props: ChannelProps): T["element"];
+    getChannelSliderValueTextProps(props: ChannelProps): T["element"];
     getTransparencyGridProps(props?: TransparencyGridProps): T["element"];
     getEyeDropperTriggerProps(): T["button"];
     getSwatchGroupProps(): T["element"];
@@ -274,4 +283,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
 
 declare const parse: (colorString: string) => Color;
 
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };

package/dist/index.js

@@ -40,8 +40,10 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "areaThumb",
   "areaBackground",
   "channelSlider",
+  "channelSliderLabel",
   "channelSliderTrack",
   "channelSliderThumb",
+  "channelSliderValueText",
   "channelInput",
   "transparencyGrid",
   "swatchGroup",
@@ -91,8 +93,7 @@ var dom = (0, import_dom_query.createScope)({
   getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
     const areaEl = dom.getAreaEl(ctx);
-    if (!areaEl)
-      return;
+    if (!areaEl) return;
     const { percent } = (0, import_dom_event.getRelativePoint)(point, areaEl);
     return percent;
   },
@@ -104,8 +105,7 @@ var dom = (0, import_dom_query.createScope)({
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
-    if (!trackEl)
-      return;
+    if (!trackEl) return;
     const { percent } = (0, import_dom_event.getRelativePoint)(point, trackEl);
     return percent;
   },
@@ -141,8 +141,7 @@ function getChannelDisplayColor(color, channel) {
 // src/utils/get-channel-input-value.ts
 var import_color_utils2 = require("@zag-js/color-utils");
 function getChannelValue(color, channel) {
-  if (channel == null)
-    return "";
+  if (channel == null) return "";
   if (channel === "hex") {
     return color.toString("hex");
   }
@@ -273,8 +272,7 @@ function connect(state, send, normalize) {
     valueAsString,
     value,
     setOpen(nextOpen) {
-      if (nextOpen === open)
-        return;
+      if (nextOpen === open) return;
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
     setValue(value2) {
@@ -283,6 +281,9 @@ function connect(state, send, normalize) {
     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" });
@@ -353,13 +354,11 @@ function connect(state, send, normalize) {
         "data-focus": (0, import_dom_query2.dataAttr)(focused),
         type: "button",
         onClick() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "TRIGGER.CLICK" });
         },
         onBlur() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "TRIGGER.BLUR" });
         },
         style: {
@@ -397,12 +396,9 @@ function connect(state, send, normalize) {
         id: dom.getAreaId(state.context),
         role: "group",
         onPointerDown(event) {
-          if (!interactive)
-            return;
-          if (!(0, import_dom_event2.isLeftClick)(event))
-            return;
-          if ((0, import_dom_event2.isModifierKey)(event))
-            return;
+          if (!interactive) return;
+          if (!(0, import_dom_event2.isLeftClick)(event)) return;
+          if ((0, import_dom_event2.isModifierKey)(event)) return;
           const point = (0, import_dom_event2.getEventPoint)(event);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
@@ -464,15 +460,12 @@ function connect(state, send, normalize) {
           background: areaValue.withChannelValue("alpha", 1).toString("css")
         },
         onFocus() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "AREA.FOCUS", id: "area", channel });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           const step = (0, import_dom_event2.getEventStep)(event);
           const keyMap = {
             ArrowUp() {
@@ -524,21 +517,18 @@ function connect(state, send, normalize) {
       });
     },
     getChannelSliderProps(props) {
-      const { orientation = "horizontal", channel } = 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 (!(0, import_dom_event2.isLeftClick)(event))
-            return;
-          if ((0, import_dom_event2.isModifierKey)(event))
-            return;
+          if (!interactive) return;
+          if (!(0, import_dom_event2.isLeftClick)(event)) return;
+          if ((0, import_dom_event2.isModifierKey)(event)) return;
           const point = (0, import_dom_event2.getEventPoint)(event);
-          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
+          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, format, point, id: channel, orientation });
           event.preventDefault();
         },
         style: {
@@ -548,7 +538,8 @@ function connect(state, send, normalize) {
       });
     },
     getChannelSliderTrackProps(props) {
-      const { orientation = "horizontal", channel } = props;
+      const { orientation = "horizontal", channel, format } = props;
+      const normalizedValue = format ? value.toFormat(format) : areaValue;
       return normalize.element({
         ...parts.channelSliderTrack.attrs,
         id: dom.getChannelSliderId(state.context, channel),
@@ -562,16 +553,40 @@ function connect(state, send, normalize) {
             orientation,
             channel,
             dir: state.context.dir,
-            value: areaValue
+            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 } = props;
-      const { minValue, maxValue, step: stepValue } = areaValue.getChannelRange(channel);
-      const channelValue = areaValue.getChannelValue(channel);
-      const offset = (channelValue - minValue) / (maxValue - minValue);
+      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,
@@ -584,8 +599,8 @@ function connect(state, send, normalize) {
         "data-orientation": orientation,
         "aria-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "aria-orientation": orientation,
-        "aria-valuemax": maxValue,
-        "aria-valuemin": minValue,
+        "aria-valuemax": channelRange.maxValue,
+        "aria-valuemin": channelRange.minValue,
         "aria-valuenow": channelValue,
         "aria-valuetext": `${channel} ${channelValue}`,
         style: {
@@ -595,16 +610,13 @@ function connect(state, send, normalize) {
           ...placementStyles
         },
         onFocus() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "CHANNEL_SLIDER.FOCUS", channel });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          const step = (0, import_dom_event2.getEventStep)(event) * stepValue;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
+          const step = (0, import_dom_event2.getEventStep)(event) * channelRange.step;
           const keyMap = {
             ArrowUp() {
               send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
@@ -645,7 +657,7 @@ function connect(state, send, normalize) {
     getChannelInputProps(props) {
       const { channel } = props;
       const isTextField = channel === "hex" || channel === "css";
-      const range = getChannelRange(value, channel);
+      const channelRange = getChannelRange(value, channel);
       return normalize.input({
         ...parts.channelInput.attrs,
         dir: state.context.dir,
@@ -658,34 +670,29 @@ function connect(state, send, normalize) {
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         readOnly: state.context.readOnly,
         defaultValue: getChannelValue(value, channel),
-        min: range?.minValue,
-        max: range?.maxValue,
-        step: range?.step,
+        min: channelRange?.minValue,
+        max: channelRange?.maxValue,
+        step: channelRange?.step,
         onBeforeInput(event) {
-          if (isTextField || !interactive)
-            return;
+          if (isTextField || !interactive) return;
           const value2 = event.currentTarget.value;
           if (value2.match(/[^0-9.]/g)) {
             event.preventDefault();
           }
         },
         onFocus(event) {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
           event.target.select();
         },
         onBlur(event) {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
           send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
@@ -718,8 +725,7 @@ function connect(state, send, normalize) {
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "aria-label": "Pick a color from the screen",
         onClick() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send("EYEDROPPER.CLICK");
         }
       });
@@ -743,8 +749,7 @@ function connect(state, send, normalize) {
         "data-value": swatchState.valueAsString,
         "data-disabled": (0, import_dom_query2.dataAttr)(swatchState.disabled),
         onClick() {
-          if (swatchState.disabled)
-            return;
+          if (swatchState.disabled) return;
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value });
         },
         style: {
@@ -781,8 +786,7 @@ function connect(state, send, normalize) {
         type: "button",
         "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
         onClick(event) {
-          if (event.currentTarget.disabled)
-            return;
+          if (event.currentTarget.disabled) return;
           const nextFormat = getNextFormat(state.context.format);
           send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" });
         }
@@ -810,8 +814,7 @@ function getNextFormat(format) {
   return formats[index + 1] ?? formats[0];
 }
 function assertFormat(format) {
-  if (formatRegex.test(format))
-    return format;
+  if (formatRegex.test(format)) return format;
   throw new Error(`Unsupported color format: ${format}`);
 }
 
@@ -999,22 +1002,22 @@ function machine(userContext) {
               actions: ["setActiveChannel"]
             },
             "AREA.ARROW_LEFT": {
-              actions: ["decrementXChannel"]
+              actions: ["decrementAreaXChannel"]
             },
             "AREA.ARROW_RIGHT": {
-              actions: ["incrementXChannel"]
+              actions: ["incrementAreaXChannel"]
             },
             "AREA.ARROW_UP": {
-              actions: ["incrementYChannel"]
+              actions: ["incrementAreaYChannel"]
             },
             "AREA.ARROW_DOWN": {
-              actions: ["decrementYChannel"]
+              actions: ["decrementAreaYChannel"]
             },
             "AREA.PAGE_UP": {
-              actions: ["incrementXChannel"]
+              actions: ["incrementAreaXChannel"]
             },
             "AREA.PAGE_DOWN": {
-              actions: ["decrementXChannel"]
+              actions: ["decrementAreaXChannel"]
             },
             "CHANNEL_SLIDER.ARROW_LEFT": {
               actions: ["decrementChannel"]
@@ -1168,8 +1171,7 @@ function machine(userContext) {
             defer: true,
             onInteractOutside(event) {
               ctx2.onInteractOutside?.(event);
-              if (event.defaultPrevented)
-                return;
+              if (event.defaultPrevented) return;
               ctx2.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
             },
             onPointerDownOutside: ctx2.onPointerDownOutside,
@@ -1190,11 +1192,11 @@ function machine(userContext) {
             }
           });
         },
-        trackPointerMove(ctx2, _evt, { send }) {
+        trackPointerMove(ctx2, evt, { send }) {
           return (0, import_dom_event3.trackPointerMove)(dom.getDoc(ctx2), {
             onPointerMove({ point }) {
               const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
-              send({ type, point });
+              send({ type, point, format: evt.format });
             },
             onPointerUp() {
               const type = ctx2.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
@@ -1209,8 +1211,7 @@ function machine(userContext) {
       actions: {
         openEyeDropper(ctx2) {
           const isSupported = "EyeDropper" in dom.getWin(ctx2);
-          if (!isSupported)
-            return;
+          if (!isSupported) return;
           const win = dom.getWin(ctx2);
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
@@ -1222,10 +1223,8 @@ function machine(userContext) {
         },
         setActiveChannel(ctx2, evt) {
           ctx2.activeId = evt.id;
-          if (evt.channel)
-            ctx2.activeChannel = evt.channel;
-          if (evt.orientation)
-            ctx2.activeOrientation = evt.orientation;
+          if (evt.channel) ctx2.activeChannel = evt.channel;
+          if (evt.orientation) ctx2.activeOrientation = evt.orientation;
         },
         clearActiveChannel(ctx2) {
           ctx2.activeChannel = null;
@@ -1233,24 +1232,24 @@ function machine(userContext) {
           ctx2.activeOrientation = null;
         },
         setAreaColorFromPoint(ctx2, evt) {
+          const normalizedValue = evt.format ? ctx2.value.toFormat(evt.format) : ctx2.areaValue;
           const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
           const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
-          if (!percent)
-            return;
-          const xValue = ctx2.areaValue.getChannelPercentValue(xChannel, percent.x);
-          const yValue = ctx2.areaValue.getChannelPercentValue(yChannel, 1 - percent.y);
-          const color = ctx2.areaValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
+          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(ctx2, color);
         },
         setChannelColorFromPoint(ctx2, evt) {
           const channel = evt.channel || ctx2.activeId;
+          const normalizedValue = evt.format ? ctx2.value.toFormat(evt.format) : ctx2.areaValue;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
-          if (!percent)
-            return;
+          if (!percent) return;
           const orientation = ctx2.activeOrientation || "horizontal";
           const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
-          const value = ctx2.areaValue.getChannelPercentValue(channel, channelPercent);
-          const color = ctx2.areaValue.withChannelValue(channel, value);
+          const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
+          const color = normalizedValue.withChannelValue(channel, value);
           set.value(ctx2, color);
         },
         setValue(ctx2, evt) {
@@ -1294,22 +1293,22 @@ function machine(userContext) {
           const color = ctx2.value.decrementChannel(evt.channel, evt.step);
           set.value(ctx2, color);
         },
-        incrementXChannel(ctx2, evt) {
+        incrementAreaXChannel(ctx2, evt) {
           const { xChannel } = evt.channel;
           const color = ctx2.areaValue.incrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
-        decrementXChannel(ctx2, evt) {
+        decrementAreaXChannel(ctx2, evt) {
           const { xChannel } = evt.channel;
           const color = ctx2.areaValue.decrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
-        incrementYChannel(ctx2, evt) {
+        incrementAreaYChannel(ctx2, evt) {
           const { yChannel } = evt.channel;
           const color = ctx2.areaValue.incrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
         },
-        decrementYChannel(ctx2, evt) {
+        decrementAreaYChannel(ctx2, evt) {
           const { yChannel } = evt.channel;
           const color = ctx2.areaValue.decrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
@@ -1408,14 +1407,12 @@ var invoke = {
 };
 var set = {
   value(ctx, color) {
-    if (!color || ctx.value.isEqual(color))
-      return;
+    if (!color || ctx.value.isEqual(color)) return;
     ctx.value = color;
     invoke.change(ctx);
   },
   format(ctx, format) {
-    if (ctx.format === format)
-      return;
+    if (ctx.format === format) return;
     ctx.format = format;
     invoke.formatChange(ctx);
   }