chroma-panel 0.1.4 → 1.0.0

package/dist/modes/image/index.js

@@ -1,5 +1,7 @@
 "use client";
 import { usePanel } from "../../core/context.js";
+import { rgbaToHsva } from "../../color/convert.js";
+import { parse } from "../../color/parse.js";
 import { Icon, ImageIcon } from "../../primitives/icons.js";
 import { SwatchGrid } from "../../primitives/SwatchGrid.js";
 import { extractPalette } from "../../image/extract.js";
@@ -14,7 +16,7 @@ const EMPTY = {
 	preview: null
 };
 function ImagePanel(props) {
-	const { extractOptions } = props;
+	const { extractOptions, sortBy = "population" } = props;
 	const { idPrefix, disabled } = usePanel();
 	const inputId = `${idPrefix}-image-file`;
 	const { store } = usePanel();
@@ -23,7 +25,13 @@ function ImagePanel(props) {
 	const [message, setMessage] = React.useState(restored.message);
 	const [swatches, setSwatches] = React.useState(restored.swatches);
 	const [preview, setPreview] = React.useState(restored.preview);
+	const [point, setPoint] = React.useState(null);
 	const inputRef = React.useRef(null);
+	const imageRef = React.useRef(null);
+	const [clipboardRead, setClipboardRead] = React.useState(false);
+	React.useEffect(() => {
+		setClipboardRead(typeof navigator.clipboard?.read === "function");
+	}, []);
 	React.useEffect(() => {
 		if (preview === null && status === "idle") kept.delete(store);
 		else kept.set(store, {
@@ -82,6 +90,50 @@ function ImagePanel(props) {
 		const file = files?.[0];
 		if (file !== void 0) run(file);
 	};
+	const pasteFile = (items) => {
+		for (const item of Array.from(items)) {
+			if (item.kind !== "file" || !item.type.startsWith("image/")) continue;
+			const file = item.getAsFile();
+			if (file !== null) run(file);
+			return file !== null;
+		}
+		return false;
+	};
+	const readClipboard = async () => {
+		try {
+			const items = await navigator.clipboard.read();
+			for (const item of items) {
+				const type = item.types.find((candidate) => candidate.startsWith("image/"));
+				if (type === void 0) continue;
+				const blob = await item.getType(type);
+				await run(new File([blob], "clipboard-image", { type }));
+				return;
+			}
+			setStatus("error");
+			setMessage("The clipboard does not contain an image.");
+		} catch {
+			setStatus("error");
+			setMessage("Clipboard access was not allowed. Use paste or choose a file instead.");
+		}
+	};
+	const sortedSwatches = React.useMemo(() => [...swatches].sort((a, b) => {
+		if (sortBy === "population") return b.population - a.population;
+		if (sortBy === "luminance") {
+			const luminance = (rgb) => .2126 * rgb[0] + .7152 * rgb[1] + .0722 * rgb[2];
+			return luminance(b.rgb) - luminance(a.rgb);
+		}
+		return rgbaToHsva({
+			r: a.rgb[0],
+			g: a.rgb[1],
+			b: a.rgb[2],
+			a: 1
+		}).h - rgbaToHsva({
+			r: b.rgb[0],
+			g: b.rgb[1],
+			b: b.rgb[2],
+			a: 1
+		}).h;
+	}), [swatches, sortBy]);
 	const clear = () => {
 		controller.current?.abort();
 		releasePreview();
@@ -89,8 +141,47 @@ function ImagePanel(props) {
 		setSwatches([]);
 		setMessage("");
 		setStatus("idle");
+		setPoint(null);
 		if (inputRef.current !== null) inputRef.current.value = "";
 	};
+	const locate = (image, clientX, clientY) => {
+		const rect = image.getBoundingClientRect();
+		if (rect.width <= 0 || rect.height <= 0 || image.naturalWidth <= 0 || image.naturalHeight <= 0) return null;
+		const scale = Math.min(rect.width / image.naturalWidth, rect.height / image.naturalHeight);
+		const width = image.naturalWidth * scale;
+		const height = image.naturalHeight * scale;
+		const left = rect.left + (rect.width - width) / 2;
+		const top = rect.top + (rect.height - height) / 2;
+		if (clientX < left || clientX > left + width || clientY < top || clientY > top + height) return null;
+		return {
+			x: Math.min(1, Math.max(0, (clientX - left) / width)),
+			y: Math.min(1, Math.max(0, (clientY - top) / height)),
+			left: Math.min(1, Math.max(0, (clientX - rect.left) / rect.width)),
+			top: Math.min(1, Math.max(0, (clientY - rect.top) / rect.height))
+		};
+	};
+	const selectPixel = (next) => {
+		const image = imageRef.current;
+		if (image === null || image.naturalWidth <= 0 || image.naturalHeight <= 0) return;
+		const canvas = document.createElement("canvas");
+		canvas.width = 1;
+		canvas.height = 1;
+		const context = canvas.getContext("2d", { willReadFrequently: true });
+		if (context === null) return;
+		const sx = Math.min(image.naturalWidth - 1, Math.floor(next.x * image.naturalWidth));
+		const sy = Math.min(image.naturalHeight - 1, Math.floor(next.y * image.naturalHeight));
+		context.drawImage(image, sx, sy, 1, 1, 0, 0, 1, 1);
+		const [r = 0, g = 0, b = 0, a = 0] = context.getImageData(0, 0, 1, 1).data;
+		if (a === 0) {
+			setMessage("That pixel is transparent. Choose another point.");
+			return;
+		}
+		const parsed = parse(`rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`);
+		if (parsed === null) return;
+		store.ingest(parsed, "image");
+		store.commit("image");
+		setMessage("Color selected from image.");
+	};
 	const dragDepth = React.useRef(0);
 	const [dragging, setDragging] = React.useState(false);
 	const endDrag = () => {
@@ -99,6 +190,9 @@ function ImagePanel(props) {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "cp-panel",
+		onPaste: (event) => {
+			if (!disabled && pasteFile(event.clipboardData.items)) event.preventDefault();
+		},
 		onDragEnter: (e) => {
 			e.preventDefault();
 			if (disabled) return;
@@ -143,18 +237,52 @@ function ImagePanel(props) {
 				]
 			}) : /* @__PURE__ */ jsxs("div", {
 				className: "cp-image-preview",
-				children: [/* @__PURE__ */ jsx("img", {
-					src: preview,
-					alt: ""
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "cp-image-remove",
-					"aria-label": "Remove image",
-					title: "Remove image",
-					disabled,
-					onClick: clear,
-					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
-				})]
+				children: [
+					/* @__PURE__ */ jsx("img", {
+						ref: imageRef,
+						src: preview,
+						alt: "Uploaded image. Move over it and click to select a color.",
+						role: "button",
+						tabIndex: disabled ? -1 : 0,
+						"aria-label": "Pick a color from the uploaded image",
+						onPointerMove: (event) => setPoint(locate(event.currentTarget, event.clientX, event.clientY)),
+						onPointerLeave: () => setPoint(null),
+						onClick: (event) => {
+							if (disabled) return;
+							const next = locate(event.currentTarget, event.clientX, event.clientY);
+							if (next !== null) selectPixel(next);
+						},
+						onKeyDown: (event) => {
+							if (disabled || event.key !== "Enter" && event.key !== " ") return;
+							event.preventDefault();
+							selectPixel(point ?? {
+								x: .5,
+								y: .5,
+								left: .5,
+								top: .5
+							});
+						}
+					}),
+					point !== null && /* @__PURE__ */ jsx("span", {
+						className: "cp-image-loupe",
+						"aria-hidden": "true",
+						style: {
+							left: `${point.left * 100}%`,
+							top: `${point.top * 100}%`,
+							backgroundImage: `url("${preview}")`,
+							backgroundPosition: `${point.x * 100}% ${point.y * 100}%`
+						}
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "cp-image-remove",
+						"aria-label": "Remove image",
+						title: "Remove image",
+						disabled,
+						onClick: clear,
+						children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+					})
+				]
 			}),
 			/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
@@ -167,12 +295,25 @@ function ImagePanel(props) {
 				tabIndex: preview === null ? void 0 : -1,
 				onChange: (e) => onFiles(e.currentTarget.files)
 			}),
+			preview === null && clipboardRead && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cp-button",
+				disabled,
+				onClick: () => {
+					readClipboard();
+				},
+				children: "Paste image"
+			}),
 			preview !== null && status === "error" && /* @__PURE__ */ jsx("p", {
 				className: "cp-empty",
 				children: message
 			}),
+			preview !== null && status !== "error" && /* @__PURE__ */ jsx("p", {
+				className: "cp-image-hint",
+				children: "Click the image to pick an exact color."
+			}),
 			status === "ready" && /* @__PURE__ */ jsx(SwatchGrid, {
-				swatches: swatches.map((s) => ({
+				swatches: sortedSwatches.map((s) => ({
 					color: s.hex,
 					name: s.hex
 				})),

package/dist/modes/registry.d.cts

@@ -9,5 +9,5 @@ export interface PickerMode {
 }
 export declare function registerMode(mode: PickerMode): void;
 export declare function getMode(id: string): PickerMode | undefined;
-export declare function resolveModes(requested: (string | PickerMode)[]): PickerMode[];
+export declare function resolveModes(requested: readonly (string | PickerMode)[]): PickerMode[];
 //#endregion

package/dist/modes/registry.d.ts

@@ -9,5 +9,5 @@ export interface PickerMode {
 }
 export declare function registerMode(mode: PickerMode): void;
 export declare function getMode(id: string): PickerMode | undefined;
-export declare function resolveModes(requested: (string | PickerMode)[]): PickerMode[];
+export declare function resolveModes(requested: readonly (string | PickerMode)[]): PickerMode[];
 //#endregion

package/dist/modes.cjs

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_registry = require("./modes/registry.cjs");
+const require_index = require("./modes/wheel/index.cjs");
+const require_index$1 = require("./modes/sliders/index.cjs");
+const require_index$2 = require("./modes/palettes/index.cjs");
+const require_index$3 = require("./modes/image/index.cjs");
+const require_index$4 = require("./modes/pencils/index.cjs");
+//#region src/modes.ts
+const builtInModes = Object.freeze([
+	require_index.wheelMode,
+	require_index$1.slidersMode,
+	require_index$2.palettesMode,
+	require_index$3.imageMode,
+	require_index$4.pencilsMode
+]);
+//#endregion
+exports.ImagePanel = require_index$3.ImagePanel;
+exports.PalettesPanel = require_index$2.PalettesPanel;
+exports.PencilsPanel = require_index$4.PencilsPanel;
+exports.SlidersPanel = require_index$1.SlidersPanel;
+exports.WheelPanel = require_index.WheelPanel;
+exports.builtInModes = builtInModes;
+exports.getMode = require_registry.getMode;
+exports.imageMode = require_index$3.imageMode;
+exports.palettesMode = require_index$2.palettesMode;
+exports.pencilsMode = require_index$4.pencilsMode;
+exports.registerMode = require_registry.registerMode;
+exports.resolveModes = require_registry.resolveModes;
+exports.slidersMode = require_index$1.slidersMode;
+exports.wheelMode = require_index.wheelMode;

package/dist/modes.d.cts

@@ -0,0 +1,10 @@
+import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.cjs";
+import { ImagePanel, ImagePanelProps, imageMode } from "./modes/image/index.cjs";
+import { WheelPanel, wheelMode } from "./modes/wheel/index.cjs";
+import { SlidersPanel, slidersMode } from "./modes/sliders/index.cjs";
+import { PalettesPanel, palettesMode } from "./modes/palettes/index.cjs";
+import { PencilsPanel, pencilsMode } from "./modes/pencils/index.cjs";
+//#region src/modes.d.ts
+export declare const builtInModes: readonly PickerMode[];
+//#endregion
+export { ImagePanel, type ImagePanelProps, type ModeId, PalettesPanel, PencilsPanel, type PickerMode, SlidersPanel, WheelPanel, getMode, imageMode, palettesMode, pencilsMode, registerMode, resolveModes, slidersMode, wheelMode };

package/dist/modes.d.ts

@@ -0,0 +1,10 @@
+import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.js";
+import { ImagePanel, ImagePanelProps, imageMode } from "./modes/image/index.js";
+import { WheelPanel, wheelMode } from "./modes/wheel/index.js";
+import { SlidersPanel, slidersMode } from "./modes/sliders/index.js";
+import { PalettesPanel, palettesMode } from "./modes/palettes/index.js";
+import { PencilsPanel, pencilsMode } from "./modes/pencils/index.js";
+//#region src/modes.d.ts
+export declare const builtInModes: readonly PickerMode[];
+//#endregion
+export { ImagePanel, type ImagePanelProps, type ModeId, PalettesPanel, PencilsPanel, type PickerMode, SlidersPanel, WheelPanel, getMode, imageMode, palettesMode, pencilsMode, registerMode, resolveModes, slidersMode, wheelMode };

package/dist/modes.js

@@ -0,0 +1,17 @@
+import { getMode, registerMode, resolveModes } from "./modes/registry.js";
+import { WheelPanel, wheelMode } from "./modes/wheel/index.js";
+import { SlidersPanel, slidersMode } from "./modes/sliders/index.js";
+import { PalettesPanel, palettesMode } from "./modes/palettes/index.js";
+import { ImagePanel, imageMode } from "./modes/image/index.js";
+import { PencilsPanel, pencilsMode } from "./modes/pencils/index.js";
+//#region src/modes.ts
+const builtInModes = Object.freeze([
+	wheelMode,
+	slidersMode,
+	palettesMode,
+	imageMode,
+	pencilsMode
+]);
+//#endregion
+export { ImagePanel, PalettesPanel, PencilsPanel, SlidersPanel, WheelPanel, builtInModes, getMode, imageMode, palettesMode, pencilsMode, registerMode, resolveModes, slidersMode, wheelMode };
+

package/dist/panel.cjs

@@ -7,6 +7,7 @@ const require_useColorStore = require("./core/useColorStore.cjs");
 const require_usePointerDrag = require("./core/usePointerDrag.cjs");
 const require_ChannelSlider = require("./primitives/ChannelSlider.cjs");
 const require_ColorDisc = require("./primitives/ColorDisc.cjs");
+const require_css4 = require("./color/css4.cjs");
 const require_parse = require("./color/parse.cjs");
 const require_serialize = require("./color/serialize.cjs");
 const require_ColorField = require("./primitives/ColorField.cjs");
@@ -25,6 +26,7 @@ const require_Popover = require("./components/Popover.cjs");
 const require_ColorInput = require("./components/ColorInput.cjs");
 const require_ColorArea = require("./primitives/ColorArea.cjs");
 const require_Swatch = require("./primitives/Swatch.cjs");
+const require_value = require("./color/value.cjs");
 exports.ChannelSlider = require_ChannelSlider.ChannelSlider;
 exports.ChromaPanel = require_ChromaPanel.ChromaPanel;
 exports.ColorArea = require_ColorArea.ColorArea;
@@ -41,9 +43,12 @@ exports.Swatch = require_Swatch.Swatch;
 exports.SwatchGrid = require_SwatchGrid.SwatchGrid;
 exports.clamp = require_convert.clamp;
 exports.clearNamedColors = require_parse.clearNamedColors;
+exports.colorValueToHsva = require_css4.colorValueToHsva;
+exports.convertColor = require_css4.convertColor;
 exports.createColorStore = require_store.createColorStore;
 exports.getMode = require_registry.getMode;
 exports.hslaToHsva = require_convert.hslaToHsva;
+exports.hsvaToColorValue = require_css4.hsvaToColorValue;
 exports.hsvaToHsl = require_convert.hsvaToHsl;
 exports.hsvaToHsla = require_convert.hsvaToHsla;
 exports.hsvaToHwba = require_convert.hsvaToHwba;
@@ -52,9 +57,13 @@ exports.hsvaToRgba = require_convert.hsvaToRgba;
 exports.hwbaToHsva = require_convert.hwbaToHsva;
 exports.ingest = require_sticky.ingest;
 exports.injectStyles = require_styleInjector.injectStyles;
+exports.isInGamut = require_css4.isInGamut;
 exports.isValidColor = require_parse.isValidColor;
+exports.mapToGamut = require_css4.mapToGamut;
 exports.normalizeHue = require_convert.normalizeHue;
 exports.parse = require_parse.parse;
+exports.parseColor = require_value.parseColor;
+exports.parseCss4Color = require_css4.parseCss4Color;
 exports.pushRecent = require_PanelFooter.pushRecent;
 exports.registerMode = require_registry.registerMode;
 exports.registerNamedColors = require_parse.registerNamedColors;
@@ -63,6 +72,7 @@ exports.rgbaToHsva = require_convert.rgbaToHsva;
 exports.roundRgba = require_convert.roundRgba;
 exports.sameHsva = require_sticky.sameHsva;
 exports.sameRendered = require_sticky.sameRendered;
+exports.serializeColor = require_css4.serializeColor;
 exports.setStyleNonce = require_styleInjector.setStyleNonce;
 exports.toFormat = require_serialize.toFormat;
 exports.toHex = require_serialize.toHex;

package/dist/panel.d.cts

@@ -1,6 +1,8 @@
-import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.cjs";
+import { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions } from "./color/types.cjs";
 import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.cjs";
 import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.cjs";
+import { parseColor } from "./color/value.cjs";
+import { colorValueToHsva, convertColor, hsvaToColorValue, isInGamut, mapToGamut, parseCss4Color, serializeColor } from "./color/css4.cjs";
 import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.cjs";
 import { ingest, sameHsva, sameRendered } from "./color/sticky.cjs";
 import { ColorListener, ColorStore, Unsubscribe, createColorStore } from "./core/store.cjs";
@@ -24,4 +26,4 @@ import { Eyedropper, useEyedropper } from "./primitives/useEyedropper.cjs";
 import { useColorValue, useTransientColor } from "./core/useColorStore.cjs";
 import { useAxisKeyboard, usePointerDrag } from "./core/usePointerDrag.cjs";
 import { injectStyles, setStyleNonce } from "./core/styleInjector.cjs";
-export { ChannelSlider, type ChannelSliderProps, type ChromaClassNames, ChromaPanel, type ChromaPanelProps, ColorArea, type ColorAreaProps, ColorChangeResult, ColorDisc, type ColorDiscProps, ColorField, type ColorFieldProps, ColorFormat, ColorInput, type ColorInputProps, type ColorListener, type ColorPalette, type ColorStore, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, type ModeId, ModeToolbar, type ModeToolbarProps, NumberField, type NumberFieldProps, PanelFooter, type PanelOptions, type PickerMode, Popover, type PopoverProps, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type Unsubscribe, clamp, clearNamedColors, createColorStore, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isValidColor, normalizeHue, parse, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };
+export { ChannelSlider, type ChannelSliderProps, type ChromaClassNames, ChromaPanel, type ChromaPanelProps, ColorArea, type ColorAreaProps, ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorDisc, type ColorDiscProps, ColorField, type ColorFieldProps, ColorFormat, ColorInput, type ColorInputProps, type ColorListener, type ColorPalette, type ColorStore, ColorValue, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, type ModeId, ModeToolbar, type ModeToolbarProps, ModernColorSpace, NumberField, type NumberFieldProps, PanelFooter, type PanelOptions, type PickerMode, Popover, type PopoverProps, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, SerializeColorOptions, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type Unsubscribe, clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, getMode, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };

package/dist/panel.d.ts

@@ -1,6 +1,8 @@
-import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.js";
+import { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions } from "./color/types.js";
 import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.js";
 import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.js";
+import { parseColor } from "./color/value.js";
+import { colorValueToHsva, convertColor, hsvaToColorValue, isInGamut, mapToGamut, parseCss4Color, serializeColor } from "./color/css4.js";
 import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.js";
 import { ingest, sameHsva, sameRendered } from "./color/sticky.js";
 import { ColorListener, ColorStore, Unsubscribe, createColorStore } from "./core/store.js";
@@ -24,4 +26,4 @@ import { Eyedropper, useEyedropper } from "./primitives/useEyedropper.js";
 import { useColorValue, useTransientColor } from "./core/useColorStore.js";
 import { useAxisKeyboard, usePointerDrag } from "./core/usePointerDrag.js";
 import { injectStyles, setStyleNonce } from "./core/styleInjector.js";
-export { ChannelSlider, type ChannelSliderProps, type ChromaClassNames, ChromaPanel, type ChromaPanelProps, ColorArea, type ColorAreaProps, ColorChangeResult, ColorDisc, type ColorDiscProps, ColorField, type ColorFieldProps, ColorFormat, ColorInput, type ColorInputProps, type ColorListener, type ColorPalette, type ColorStore, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, type ModeId, ModeToolbar, type ModeToolbarProps, NumberField, type NumberFieldProps, PanelFooter, type PanelOptions, type PickerMode, Popover, type PopoverProps, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type Unsubscribe, clamp, clearNamedColors, createColorStore, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isValidColor, normalizeHue, parse, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };
+export { ChannelSlider, type ChannelSliderProps, type ChromaClassNames, ChromaPanel, type ChromaPanelProps, ColorArea, type ColorAreaProps, ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorDisc, type ColorDiscProps, ColorField, type ColorFieldProps, ColorFormat, ColorInput, type ColorInputProps, type ColorListener, type ColorPalette, type ColorStore, ColorValue, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, type ModeId, ModeToolbar, type ModeToolbarProps, ModernColorSpace, NumberField, type NumberFieldProps, PanelFooter, type PanelOptions, type PickerMode, Popover, type PopoverProps, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, SerializeColorOptions, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type Unsubscribe, clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, getMode, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };

package/dist/panel.js

@@ -6,6 +6,7 @@ import { useColorValue, useTransientColor } from "./core/useColorStore.js";
 import { useAxisKeyboard, usePointerDrag } from "./core/usePointerDrag.js";
 import { ChannelSlider } from "./primitives/ChannelSlider.js";
 import { ColorDisc } from "./primitives/ColorDisc.js";
+import { colorValueToHsva, convertColor, hsvaToColorValue, isInGamut, mapToGamut, parseCss4Color, serializeColor } from "./color/css4.js";
 import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.js";
 import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.js";
 import { ColorField } from "./primitives/ColorField.js";
@@ -24,4 +25,5 @@ import { Popover } from "./components/Popover.js";
 import { ColorInput } from "./components/ColorInput.js";
 import { ColorArea } from "./primitives/ColorArea.js";
 import { Swatch } from "./primitives/Swatch.js";
-export { ChannelSlider, ChromaPanel, ColorArea, ColorDisc, ColorField, ColorInput, Icon, ModeToolbar, NumberField, PanelFooter, Popover, SegmentedControl, Swatch, SwatchGrid, clamp, clearNamedColors, createColorStore, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isValidColor, normalizeHue, parse, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };
+import { parseColor } from "./color/value.js";
+export { ChannelSlider, ChromaPanel, ColorArea, ColorDisc, ColorField, ColorInput, Icon, ModeToolbar, NumberField, PanelFooter, Popover, SegmentedControl, Swatch, SwatchGrid, clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, getMode, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };

package/dist/primitives/ChannelSlider.cjs

@@ -44,8 +44,8 @@ function ChannelSlider(props) {
 	});
 	const drag = require_usePointerDrag.usePointerDrag({
 		disabled,
-		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get())),
-		onEnd: () => store.commit()
+		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get()), "pointer"),
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = read(store.get());
 	const track = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -71,8 +71,8 @@ function ChannelSlider(props) {
 				step: step ?? 1,
 				defaultValue: initial,
 				disabled,
-				onInput: (v) => store.set(write(v, store.get())),
-				onCommit: () => store.commit()
+				onInput: (v) => store.set(write(v, store.get()), "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: require_context.cx("cp-thumb", classNames.thumb),

package/dist/primitives/ChannelSlider.js

@@ -42,8 +42,8 @@ function ChannelSlider(props) {
 	});
 	const drag = usePointerDrag({
 		disabled,
-		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get())),
-		onEnd: () => store.commit()
+		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get()), "pointer"),
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = read(store.get());
 	const track = /* @__PURE__ */ jsxs("div", {
@@ -69,8 +69,8 @@ function ChannelSlider(props) {
 				step: step ?? 1,
 				defaultValue: initial,
 				disabled,
-				onInput: (v) => store.set(write(v, store.get())),
-				onCommit: () => store.commit()
+				onInput: (v) => store.set(write(v, store.get()), "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorArea.cjs

@@ -35,8 +35,8 @@ function ColorArea(props) {
 		onMove: ({ x, y }) => store.patch({
 			s: x * 100,
 			v: (1 - y) * 100
-		}),
-		onEnd: () => store.commit()
+		}, "pointer"),
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -61,8 +61,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.s),
 				disabled,
-				onInput: (s) => store.patch({ s }),
-				onCommit: () => store.commit()
+				onInput: (s) => store.patch({ s }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
 				ref: valRef,
@@ -71,8 +71,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.v),
 				disabled,
-				onInput: (v) => store.patch({ v }),
-				onCommit: () => store.commit()
+				onInput: (v) => store.patch({ v }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: require_context.cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorArea.js

@@ -33,8 +33,8 @@ function ColorArea(props) {
 		onMove: ({ x, y }) => store.patch({
 			s: x * 100,
 			v: (1 - y) * 100
-		}),
-		onEnd: () => store.commit()
+		}, "pointer"),
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ jsxs("div", {
@@ -59,8 +59,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.s),
 				disabled,
-				onInput: (s) => store.patch({ s }),
-				onCommit: () => store.commit()
+				onInput: (s) => store.patch({ s }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ jsx(AxisInput, {
 				ref: valRef,
@@ -69,8 +69,8 @@ function ColorArea(props) {
 				max: 100,
 				defaultValue: Math.round(initial.v),
 				disabled,
-				onInput: (v) => store.patch({ v }),
-				onCommit: () => store.commit()
+				onInput: (v) => store.patch({ v }, "keyboard"),
+				onCommit: () => store.commit("keyboard")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorDisc.cjs

@@ -41,9 +41,9 @@ function ColorDisc(props) {
 			const distance = Math.min(Math.hypot(dx, dy), .5);
 			const patch = { s: distance / .5 * 100 };
 			if (distance > 1e-6) patch.h = require_convert.normalizeHue(Math.atan2(dx, -dy) * 180 / Math.PI);
-			store.patch(patch);
+			store.patch(patch, "pointer");
 		},
-		onEnd: () => store.commit()
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -70,8 +70,8 @@ function ColorDisc(props) {
 					max: 360,
 					defaultValue: Math.round(require_convert.normalizeHue(initial.h)),
 					disabled,
-					onInput: (h) => store.patch({ h }),
-					onCommit: () => store.commit()
+					onInput: (h) => store.patch({ h }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
 					ref: satRef,
@@ -80,8 +80,8 @@ function ColorDisc(props) {
 					max: 100,
 					defaultValue: Math.round(initial.s),
 					disabled,
-					onInput: (s) => store.patch({ s }),
-					onCommit: () => store.commit()
+					onInput: (s) => store.patch({ s }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: require_context.cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorDisc.js

@@ -39,9 +39,9 @@ function ColorDisc(props) {
 			const distance = Math.min(Math.hypot(dx, dy), .5);
 			const patch = { s: distance / .5 * 100 };
 			if (distance > 1e-6) patch.h = normalizeHue(Math.atan2(dx, -dy) * 180 / Math.PI);
-			store.patch(patch);
+			store.patch(patch, "pointer");
 		},
-		onEnd: () => store.commit()
+		onEnd: () => store.commit("pointer")
 	});
 	const initial = store.get();
 	return /* @__PURE__ */ jsx("div", {
@@ -68,8 +68,8 @@ function ColorDisc(props) {
 					max: 360,
 					defaultValue: Math.round(normalizeHue(initial.h)),
 					disabled,
-					onInput: (h) => store.patch({ h }),
-					onCommit: () => store.commit()
+					onInput: (h) => store.patch({ h }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ jsx(AxisInput, {
 					ref: satRef,
@@ -78,8 +78,8 @@ function ColorDisc(props) {
 					max: 100,
 					defaultValue: Math.round(initial.s),
 					disabled,
-					onInput: (s) => store.patch({ s }),
-					onCommit: () => store.commit()
+					onInput: (s) => store.patch({ s }, "keyboard"),
+					onCommit: () => store.commit("keyboard")
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: cx("cp-thumb", classNames.thumb),

package/dist/primitives/ColorField.cjs

@@ -30,7 +30,7 @@ function ColorField(props) {
 	const handleChange = (event) => {
 		const parsed = require_parse.parse(event.currentTarget.value);
 		event.currentTarget.setAttribute("aria-invalid", parsed === null ? "true" : "false");
-		if (parsed !== null) store.ingest(parsed);
+		if (parsed !== null) store.ingest(parsed, "field");
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_context.cx("cp-field", classNames.field, className),
@@ -56,7 +56,7 @@ function ColorField(props) {
 				focused.current = false;
 				e.currentTarget.value = render(store.get());
 				e.currentTarget.setAttribute("aria-invalid", "false");
-				store.commit();
+				store.commit("field");
 			},
 			onKeyDown: (e) => {
 				if (e.key === "Enter") e.currentTarget.blur();

package/dist/primitives/ColorField.js

@@ -28,7 +28,7 @@ function ColorField(props) {
 	const handleChange = (event) => {
 		const parsed = parse(event.currentTarget.value);
 		event.currentTarget.setAttribute("aria-invalid", parsed === null ? "true" : "false");
-		if (parsed !== null) store.ingest(parsed);
+		if (parsed !== null) store.ingest(parsed, "field");
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("cp-field", classNames.field, className),
@@ -54,7 +54,7 @@ function ColorField(props) {
 				focused.current = false;
 				e.currentTarget.value = render(store.get());
 				e.currentTarget.setAttribute("aria-invalid", "false");
-				store.commit();
+				store.commit("field");
 			},
 			onKeyDown: (e) => {
 				if (e.key === "Enter") e.currentTarget.blur();