@zag-js/color-picker 0.10.2 → 0.10.4

package/dist/color-picker.machine.js

@@ -1,136 +1,21 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/color-picker.machine.ts
-var color_picker_machine_exports = {};
-__export(color_picker_machine_exports, {
-  machine: () => machine
-});
-module.exports = __toCommonJS(color_picker_machine_exports);
-var import_color_utils = require("@zag-js/color-utils");
-var import_core = require("@zag-js/core");
-var import_dom_event2 = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_numeric_range2 = require("@zag-js/numeric-range");
-var import_text_selection = require("@zag-js/text-selection");
-var import_utils = require("@zag-js/utils");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/color-picker.dom.ts
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
-  getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
-  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}`,
-  getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
-  getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
-  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
-  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
-  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
-  getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
-  getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
-  getAreaValueFromPoint(ctx, point) {
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
-    return percent;
-  },
-  getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
-  },
-  getChannelSliderValueFromPoint(ctx, point, channel) {
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
-    return percent;
-  },
-  getChannelInputEls: (ctx) => {
-    return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");
-  }
-});
+const colorUtils = require('@zag-js/color-utils');
+const core = require('@zag-js/core');
+const domEvent = require('@zag-js/dom-event');
+const domQuery = require('@zag-js/dom-query');
+const numericRange = require('@zag-js/numeric-range');
+const textSelection = require('@zag-js/text-selection');
+const utils = require('@zag-js/utils');
+const colorPicker_dom = require('./color-picker.dom.js');
+const getChannelDetails = require('./utils/get-channel-details.js');
+const getChannelInputValue = require('./utils/get-channel-input-value.js');
 
-// src/utils/get-channel-details.ts
-var import_numeric_range = require("@zag-js/numeric-range");
-function getChannelDetails(color, xChannel, yChannel) {
-  const channels = color.getColorSpaceAxes({ xChannel, yChannel });
-  const xChannelRange = color.getChannelRange(channels.xChannel);
-  const yChannelRange = color.getChannelRange(channels.yChannel);
-  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
-  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
-  const xValue = color.getChannelValue(channels.xChannel);
-  const yValue = color.getChannelValue(channels.yChannel);
-  return {
-    channels,
-    xChannelStep: stepX,
-    yChannelStep: stepY,
-    xChannelPageStep: pageSizeX,
-    yChannelPageStep: pageSizeY,
-    xValue,
-    yValue,
-    getThumbPosition() {
-      let x = (xValue - minValueX) / (maxValueX - minValueX);
-      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
-      return { x, y };
-    },
-    incrementX(stepSize) {
-      return xValue + stepSize > maxValueX ? maxValueX : (0, import_numeric_range.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX);
-    },
-    incrementY(stepSize) {
-      return yValue + stepSize > maxValueY ? maxValueY : (0, import_numeric_range.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY);
-    },
-    decrementX(stepSize) {
-      return (0, import_numeric_range.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX);
-    },
-    decrementY(stepSize) {
-      return (0, import_numeric_range.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY);
-    },
-    getColorFromPoint(x, y) {
-      let newXValue = (0, import_numeric_range.getPercentValue)(x, minValueX, maxValueX, stepX);
-      let newYValue = (0, import_numeric_range.getPercentValue)(1 - y, minValueY, maxValueY, stepY);
-      let newColor;
-      if (newXValue !== xValue) {
-        newXValue = (0, import_numeric_range.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
-        newColor = color.withChannelValue(channels.xChannel, newXValue);
-      }
-      if (newYValue !== yValue) {
-        newYValue = (0, import_numeric_range.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
-        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
-      }
-      return newColor;
-    }
-  };
-}
-
-// src/utils/get-channel-input-value.ts
-function getChannelInputValue(color, channel) {
-  switch (channel) {
-    case "hex":
-      return color.toString("hex");
-    case "css":
-      return color.toString("css");
-    default:
-      return color.getChannelValue(channel).toString();
-  }
-}
-
-// src/color-picker.machine.ts
 function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "color-picker",
       initial: "idle",
@@ -141,7 +26,7 @@ function machine(userContext) {
         activeOrientation: null,
         value: "#D9D9D9",
         ...ctx,
-        valueAsColor: (0, import_color_utils.parseColor)(ctx.value || "#D9D9D9")
+        valueAsColor: colorUtils.parseColor(ctx.value || "#D9D9D9")
       },
       computed: {
         isRtl: (ctx2) => ctx2.dir === "rtl",
@@ -281,7 +166,7 @@ function machine(userContext) {
       },
       activities: {
         trackPointerMove(ctx2, _evt, { send }) {
-          return (0, import_dom_event2.trackPointerMove)(dom.getDoc(ctx2), {
+          return domEvent.trackPointerMove(colorPicker_dom.dom.getDoc(ctx2), {
             onPointerMove({ point }) {
               const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
               send({ type, point });
@@ -293,19 +178,19 @@ function machine(userContext) {
           });
         },
         disableTextSelection(ctx2) {
-          return (0, import_text_selection.disableTextSelection)({ doc: dom.getDoc(ctx2), target: dom.getContentEl(ctx2) });
+          return textSelection.disableTextSelection({ doc: colorPicker_dom.dom.getDoc(ctx2), target: colorPicker_dom.dom.getContentEl(ctx2) });
         }
       },
       actions: {
         openEyeDropper(ctx2) {
-          const isSupported = "EyeDropper" in dom.getWin(ctx2);
+          const isSupported = "EyeDropper" in colorPicker_dom.dom.getWin(ctx2);
           if (!isSupported)
             return;
-          const win = dom.getWin(ctx2);
+          const win = colorPicker_dom.dom.getWin(ctx2);
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
             const format = ctx2.valueAsColor.getColorSpace();
-            const color = (0, import_color_utils.parseColor)(sRGBHex).toFormat(format);
+            const color = colorUtils.parseColor(sRGBHex).toFormat(format);
             setColor(ctx2, color);
             ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: color });
           }).catch(() => void 0);
@@ -326,8 +211,8 @@ function machine(userContext) {
         },
         setAreaColorFromPoint(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
-          const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
-          const { getColorFromPoint } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const percent = colorPicker_dom.dom.getAreaValueFromPoint(ctx2, evt.point);
+          const { getColorFromPoint } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
           const color = getColorFromPoint(percent.x, percent.y);
           if (!color)
             return;
@@ -335,12 +220,12 @@ function machine(userContext) {
         },
         setChannelColorFromPoint(ctx2, evt) {
           const channel = evt.channel || ctx2.activeId;
-          const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
+          const percent = colorPicker_dom.dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
           const orientation = ctx2.activeOrientation || "horizontal";
           const point = orientation === "horizontal" ? percent.x : percent.y;
-          const channelValue = (0, import_numeric_range2.getPercentValue)(point, minValue, maxValue, step);
-          const value = (0, import_numeric_range2.snapValueToStep)(channelValue - step, minValue, maxValue, step);
+          const channelValue = numericRange.getPercentValue(point, minValue, maxValue, step);
+          const value = numericRange.snapValueToStep(channelValue - step, minValue, maxValue, step);
           const newColor = ctx2.valueAsColor.withChannelValue(channel, value);
           setColor(ctx2, newColor);
         },
@@ -349,7 +234,7 @@ function machine(userContext) {
         },
         setValueAsColor(ctx2) {
           try {
-            const color = (0, import_color_utils.parseColor)(ctx2.value);
+            const color = colorUtils.parseColor(ctx2.value);
             if (color.isEqual(ctx2.valueAsColor))
               return;
             ctx2.valueAsColor = color;
@@ -357,12 +242,12 @@ function machine(userContext) {
           }
         },
         syncChannelInputs(ctx2) {
-          const inputs = dom.getChannelInputEls(ctx2);
+          const inputs = colorPicker_dom.dom.getChannelInputEls(ctx2);
           inputs.forEach((input) => {
             const channel = input.getAttribute("data-channel");
             if (!channel)
               return;
-            const value = getChannelInputValue(ctx2.valueAsColor, channel);
+            const value = getChannelInputValue.getChannelInputValue(ctx2.valueAsColor, channel);
             input.value = value.toString();
           });
         },
@@ -370,50 +255,50 @@ function machine(userContext) {
           const { channel, isTextField, value } = evt;
           try {
             const format = ctx2.valueAsColor.getColorSpace();
-            const newColor = isTextField ? (0, import_color_utils.parseColor)(value).toFormat(format) : ctx2.valueAsColor.withChannelValue(channel, value);
+            const newColor = isTextField ? colorUtils.parseColor(value).toFormat(format) : ctx2.valueAsColor.withChannelValue(channel, value);
             setColor(ctx2, newColor);
           } catch {
-            const input = dom.getChannelInputEl(ctx2, channel);
+            const input = colorPicker_dom.dom.getChannelInputEl(ctx2, channel);
             if (!input)
               return;
-            input.value = getChannelInputValue(ctx2.valueAsColor, channel);
+            input.value = getChannelInputValue.getChannelInputValue(ctx2.valueAsColor, channel);
           }
         },
         incrementChannel(ctx2, evt) {
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
           const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = (0, import_numeric_range2.snapValueToStep)(channelValue + evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.clampValue)(value, minValue, maxValue));
+          const value = numericRange.snapValueToStep(channelValue + evt.step, minValue, maxValue, step);
+          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, numericRange.clampValue(value, minValue, maxValue));
           setColor(ctx2, newColor);
         },
         decrementChannel(ctx2, evt) {
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
           const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = (0, import_numeric_range2.snapValueToStep)(channelValue - evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.clampValue)(value, minValue, maxValue));
+          const value = numericRange.snapValueToStep(channelValue - evt.step, minValue, maxValue, step);
+          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, numericRange.clampValue(value, minValue, maxValue));
           setColor(ctx2, newColor);
         },
         incrementXChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
-          const { incrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const { incrementX } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
           const newColor = ctx2.valueAsColor.withChannelValue(xChannel, incrementX(evt.step));
           setColor(ctx2, newColor);
         },
         decrementXChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
-          const { decrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const { decrementX } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
           const newColor = ctx2.valueAsColor.withChannelValue(xChannel, decrementX(evt.step));
           setColor(ctx2, newColor);
         },
         incrementYChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
-          const { incrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const { incrementY } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
           const newColor = ctx2.valueAsColor.withChannelValue(yChannel, incrementY(evt.step));
           setColor(ctx2, newColor);
         },
         decrementYChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
-          const { decrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const { decrementY } = getChannelDetails.getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
           const newColor = ctx2.valueAsColor.withChannelValue(yChannel, decrementY(evt.step));
           setColor(ctx2, newColor);
         },
@@ -434,24 +319,22 @@ function machine(userContext) {
           ctx2.onChange?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
         },
         focusAreaThumb(ctx2) {
-          (0, import_dom_query2.raf)(() => {
-            dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
+          domQuery.raf(() => {
+            colorPicker_dom.dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
           });
         },
         focusChannelThumb(ctx2, evt) {
-          (0, import_dom_query2.raf)(() => {
-            dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
+          domQuery.raf(() => {
+            colorPicker_dom.dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
           });
         }
       }
     }
   );
 }
-var setColor = (ctx, color) => {
+const setColor = (ctx, color) => {
   ctx.value = color.toString("css");
   ctx.valueAsColor = color;
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  machine
-});
+
+exports.machine = machine;

package/dist/color-picker.machine.mjs

@@ -1,9 +1,336 @@
-import {
-  machine
-} from "./chunk-ML3WX6YS.mjs";
-import "./chunk-2ERX54SV.mjs";
-import "./chunk-SPSDVZCT.mjs";
-import "./chunk-KLLIOTK6.mjs";
-export {
-  machine
+import { parseColor } from '@zag-js/color-utils';
+import { createMachine } from '@zag-js/core';
+import { trackPointerMove } from '@zag-js/dom-event';
+import { raf } from '@zag-js/dom-query';
+import { getPercentValue, snapValueToStep, clampValue } from '@zag-js/numeric-range';
+import { disableTextSelection } from '@zag-js/text-selection';
+import { compact } from '@zag-js/utils';
+import { dom } from './color-picker.dom.mjs';
+import { getChannelDetails } from './utils/get-channel-details.mjs';
+import { getChannelInputValue } from './utils/get-channel-input-value.mjs';
+
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "color-picker",
+      initial: "idle",
+      context: {
+        dir: "ltr",
+        activeId: null,
+        activeChannel: null,
+        activeOrientation: null,
+        value: "#D9D9D9",
+        ...ctx,
+        valueAsColor: parseColor(ctx.value || "#D9D9D9")
+      },
+      computed: {
+        isRtl: (ctx2) => ctx2.dir === "rtl",
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly)
+      },
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"]
+        }
+      },
+      created: ["setValueAsColor"],
+      watch: {
+        value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"]
+      },
+      states: {
+        idle: {
+          on: {
+            "EYEDROPPER.CLICK": {
+              actions: ["openEyeDropper"]
+            },
+            "AREA.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
+            },
+            "CHANNEL_SLIDER.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
+            },
+            "CHANNEL_INPUT.FOCUS": {
+              target: "focused",
+              actions: ["setActiveChannel"]
+            },
+            "CHANNEL_INPUT.CHANGE": {
+              actions: ["setChannelColorFromInput"]
+            }
+          }
+        },
+        focused: {
+          on: {
+            "AREA.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
+            },
+            "CHANNEL_SLIDER.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
+            },
+            "AREA.ARROW_LEFT": {
+              actions: ["decrementXChannel"]
+            },
+            "AREA.ARROW_RIGHT": {
+              actions: ["incrementXChannel"]
+            },
+            "AREA.ARROW_UP": {
+              actions: ["incrementYChannel"]
+            },
+            "AREA.ARROW_DOWN": {
+              actions: ["decrementYChannel"]
+            },
+            "AREA.PAGE_UP": {
+              actions: ["incrementXChannel"]
+            },
+            "AREA.PAGE_DOWN": {
+              actions: ["decrementXChannel"]
+            },
+            "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.FOCUS": {
+              actions: ["setActiveChannel"]
+            },
+            "CHANNEL_INPUT.CHANGE": {
+              actions: ["setChannelColorFromInput"]
+            },
+            "CHANNEL_INPUT.BLUR": [
+              {
+                guard: "isTextField",
+                target: "idle",
+                actions: ["setChannelColorFromInput"]
+              },
+              { target: "idle" }
+            ],
+            "CHANNEL_SLIDER.BLUR": {
+              target: "idle"
+            },
+            "AREA.BLUR": {
+              target: "idle"
+            }
+          }
+        },
+        dragging: {
+          exit: ["clearActiveChannel"],
+          activities: ["trackPointerMove", "disableTextSelection"],
+          on: {
+            "AREA.POINTER_MOVE": {
+              actions: ["setAreaColorFromPoint"]
+            },
+            "AREA.POINTER_UP": {
+              target: "focused",
+              actions: ["invokeOnChangeEnd"]
+            },
+            "CHANNEL_SLIDER.POINTER_MOVE": {
+              actions: ["setChannelColorFromPoint"]
+            },
+            "CHANNEL_SLIDER.POINTER_UP": {
+              target: "focused",
+              actions: ["invokeOnChangeEnd"]
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isTextField: (_ctx, evt) => !!evt.isTextField
+      },
+      activities: {
+        trackPointerMove(ctx2, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx2), {
+            onPointerMove({ point }) {
+              const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
+              send({ type, point });
+            },
+            onPointerUp() {
+              const type = ctx2.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
+              send({ type });
+            }
+          });
+        },
+        disableTextSelection(ctx2) {
+          return disableTextSelection({ doc: dom.getDoc(ctx2), target: dom.getContentEl(ctx2) });
+        }
+      },
+      actions: {
+        openEyeDropper(ctx2) {
+          const isSupported = "EyeDropper" in dom.getWin(ctx2);
+          if (!isSupported)
+            return;
+          const win = dom.getWin(ctx2);
+          const picker = new win.EyeDropper();
+          picker.open().then(({ sRGBHex }) => {
+            const format = ctx2.valueAsColor.getColorSpace();
+            const color = parseColor(sRGBHex).toFormat(format);
+            setColor(ctx2, color);
+            ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: color });
+          }).catch(() => void 0);
+        },
+        setActiveChannel(ctx2, evt) {
+          ctx2.activeId = evt.id;
+          if (evt.channel) {
+            ctx2.activeChannel = evt.channel;
+          }
+          if (evt.orientation) {
+            ctx2.activeOrientation = evt.orientation;
+          }
+        },
+        clearActiveChannel(ctx2) {
+          ctx2.activeChannel = null;
+          ctx2.activeId = null;
+          ctx2.activeOrientation = null;
+        },
+        setAreaColorFromPoint(ctx2, evt) {
+          const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
+          const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
+          const { getColorFromPoint } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const color = getColorFromPoint(percent.x, percent.y);
+          if (!color)
+            return;
+          setColor(ctx2, color);
+        },
+        setChannelColorFromPoint(ctx2, evt) {
+          const channel = evt.channel || ctx2.activeId;
+          const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
+          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
+          const orientation = ctx2.activeOrientation || "horizontal";
+          const point = orientation === "horizontal" ? percent.x : percent.y;
+          const channelValue = getPercentValue(point, minValue, maxValue, step);
+          const value = snapValueToStep(channelValue - step, minValue, maxValue, step);
+          const newColor = ctx2.valueAsColor.withChannelValue(channel, value);
+          setColor(ctx2, newColor);
+        },
+        setValue(ctx2, evt) {
+          setColor(ctx2, evt.value);
+        },
+        setValueAsColor(ctx2) {
+          try {
+            const color = parseColor(ctx2.value);
+            if (color.isEqual(ctx2.valueAsColor))
+              return;
+            ctx2.valueAsColor = color;
+          } catch {
+          }
+        },
+        syncChannelInputs(ctx2) {
+          const inputs = dom.getChannelInputEls(ctx2);
+          inputs.forEach((input) => {
+            const channel = input.getAttribute("data-channel");
+            if (!channel)
+              return;
+            const value = getChannelInputValue(ctx2.valueAsColor, channel);
+            input.value = value.toString();
+          });
+        },
+        setChannelColorFromInput(ctx2, evt) {
+          const { channel, isTextField, value } = evt;
+          try {
+            const format = ctx2.valueAsColor.getColorSpace();
+            const newColor = isTextField ? parseColor(value).toFormat(format) : ctx2.valueAsColor.withChannelValue(channel, value);
+            setColor(ctx2, newColor);
+          } catch {
+            const input = dom.getChannelInputEl(ctx2, channel);
+            if (!input)
+              return;
+            input.value = getChannelInputValue(ctx2.valueAsColor, channel);
+          }
+        },
+        incrementChannel(ctx2, evt) {
+          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
+          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
+          const value = snapValueToStep(channelValue + evt.step, minValue, maxValue, step);
+          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue));
+          setColor(ctx2, newColor);
+        },
+        decrementChannel(ctx2, evt) {
+          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
+          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
+          const value = snapValueToStep(channelValue - evt.step, minValue, maxValue, step);
+          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue));
+          setColor(ctx2, newColor);
+        },
+        incrementXChannel(ctx2, evt) {
+          const { xChannel, yChannel } = evt.channel;
+          const { incrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, incrementX(evt.step));
+          setColor(ctx2, newColor);
+        },
+        decrementXChannel(ctx2, evt) {
+          const { xChannel, yChannel } = evt.channel;
+          const { decrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, decrementX(evt.step));
+          setColor(ctx2, newColor);
+        },
+        incrementYChannel(ctx2, evt) {
+          const { xChannel, yChannel } = evt.channel;
+          const { incrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, incrementY(evt.step));
+          setColor(ctx2, newColor);
+        },
+        decrementYChannel(ctx2, evt) {
+          const { xChannel, yChannel } = evt.channel;
+          const { decrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
+          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, decrementY(evt.step));
+          setColor(ctx2, newColor);
+        },
+        setChannelToMax(ctx2, evt) {
+          const { maxValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
+          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, maxValue);
+          setColor(ctx2, newColor);
+        },
+        setChannelToMin(ctx2, evt) {
+          const { minValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
+          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, minValue);
+          setColor(ctx2, newColor);
+        },
+        invokeOnChangeEnd(ctx2) {
+          ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
+        },
+        invokeOnChange(ctx2) {
+          ctx2.onChange?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
+        },
+        focusAreaThumb(ctx2) {
+          raf(() => {
+            dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
+          });
+        },
+        focusChannelThumb(ctx2, evt) {
+          raf(() => {
+            dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
+          });
+        }
+      }
+    }
+  );
+}
+const setColor = (ctx, color) => {
+  ctx.value = color.toString("css");
+  ctx.valueAsColor = color;
 };
+
+export { machine };