@zag-js/color-picker 0.56.1 → 0.58.0

package/dist/index.d.mts

@@ -5,11 +5,11 @@ import { RequiredBy, Orientation, PropTypes, CommonProperties, DirectionProperty
 import { Color, ColorFormat, ColorChannel } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
-import { StateMachine } from '@zag-js/core';
+import { Machine, 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 {
@@ -42,9 +42,12 @@ type ElementIds = Partial<{
     trigger: string;
     label: string;
     input: string;
+    hiddenInput: string;
     content: string;
     area: string;
     areaGradient: string;
+    positioner: string;
+    formatSelect: string;
     areaThumb: string;
     channelInput(id: string): string;
     channelSliderTrack(id: ColorChannel): string;
@@ -68,6 +71,10 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      * Whether the color picker is read-only
      */
     readOnly?: boolean;
+    /**
+     * Whether the color picker is required
+     */
+    required?: boolean;
     /**
      * Handler that is called when the value changes, as the user drags.
      */
@@ -153,10 +160,14 @@ interface MachineState {
 }
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
 interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
+interface ChannelSliderProps extends ChannelProps {
+    format?: ColorFormat;
+}
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
@@ -219,6 +230,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 +268,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 +291,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 Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };

package/dist/index.d.ts

@@ -5,11 +5,11 @@ import { RequiredBy, Orientation, PropTypes, CommonProperties, DirectionProperty
 import { Color, ColorFormat, ColorChannel } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
-import { StateMachine } from '@zag-js/core';
+import { Machine, 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 {
@@ -42,9 +42,12 @@ type ElementIds = Partial<{
     trigger: string;
     label: string;
     input: string;
+    hiddenInput: string;
     content: string;
     area: string;
     areaGradient: string;
+    positioner: string;
+    formatSelect: string;
     areaThumb: string;
     channelInput(id: string): string;
     channelSliderTrack(id: ColorChannel): string;
@@ -68,6 +71,10 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      * Whether the color picker is read-only
      */
     readOnly?: boolean;
+    /**
+     * Whether the color picker is required
+     */
+    required?: boolean;
     /**
      * Handler that is called when the value changes, as the user drags.
      */
@@ -153,10 +160,14 @@ interface MachineState {
 }
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
 interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
+interface ChannelSliderProps extends ChannelProps {
+    format?: ColorFormat;
+}
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
@@ -219,6 +230,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 +268,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 +291,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 Service, 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",
@@ -66,24 +68,25 @@ var import_dom_query = require("@zag-js/dom-query");
 var dom = (0, import_dom_query.createScope)({
   getRootId: (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
   getLabelId: (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
-  getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
+  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) => `color-picker:${ctx.id}:positioner`,
-  getFormatSelectId: (ctx) => `color-picker:${ctx.id}:format-select`,
+  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`,
-  getChannelSliderId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
+  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 [
-      ...(0, import_dom_query.queryAll)(dom.getContentEl(ctx), `input[data-channel="${channel}"]`),
-      ...(0, import_dom_query.queryAll)(dom.getControlEl(ctx), `input[data-channel="${channel}"]`)
+      ...(0, import_dom_query.queryAll)(dom.getContentEl(ctx), selector),
+      ...(0, import_dom_query.queryAll)(dom.getControlEl(ctx), selector)
     ];
   },
   getFormatSelectEl: (ctx) => dom.getById(ctx, dom.getFormatSelectId(ctx)),
@@ -99,7 +102,7 @@ var dom = (0, import_dom_query.createScope)({
   getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
   getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.getById(ctx, dom.getChannelSliderId(ctx, channel));
+    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
@@ -279,6 +282,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" });
@@ -512,7 +518,7 @@ 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,
@@ -523,7 +529,7 @@ function connect(state, send, normalize) {
           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: {
@@ -533,10 +539,11 @@ 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),
+        id: dom.getChannelSliderTrackId(state.context, channel),
         role: "group",
         "data-channel": channel,
         "data-orientation": orientation,
@@ -547,16 +554,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,
@@ -569,8 +600,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: {
@@ -586,7 +617,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = (0, import_dom_event2.getEventStep)(event) * stepValue;
+          const step = (0, import_dom_event2.getEventStep)(event) * channelRange.step;
           const keyMap = {
             ArrowUp() {
               send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
@@ -627,7 +658,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,
@@ -640,9 +671,9 @@ 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;
           const value2 = event.currentTarget.value;
@@ -681,6 +712,8 @@ function connect(state, send, normalize) {
         type: "text",
         disabled,
         name: state.context.name,
+        readOnly: state.context.readOnly,
+        required: state.context.required,
         id: dom.getHiddenInputId(state.context),
         style: import_dom_query2.visuallyHiddenStyle,
         defaultValue: valueAsString
@@ -972,22 +1005,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"]
@@ -1162,11 +1195,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";
@@ -1202,22 +1235,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);
+          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;
           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) {
@@ -1261,22 +1296,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);