chroma-panel 0.2.0 → 1.0.0

package/dist/index.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");
@@ -33,6 +34,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");
 const require_contrast = require("./a11y/contrast.cjs");
 //#region src/index.ts
 require_registry.registerMode(require_index.wheelMode);
@@ -64,14 +66,19 @@ exports.WheelPanel = require_index.WheelPanel;
 exports.apcaContrast = require_contrast.apcaContrast;
 exports.clamp = require_convert.clamp;
 exports.clearNamedColors = require_parse.clearNamedColors;
+exports.colorValueToHsva = require_css4.colorValueToHsva;
+exports.compositeColor = require_contrast.compositeColor;
 exports.contrastRatio = require_contrast.contrastRatio;
+exports.contrastRatioWithAlpha = require_contrast.contrastRatioWithAlpha;
 exports.contrastReport = require_contrast.contrastReport;
+exports.convertColor = require_css4.convertColor;
 exports.createColorStore = require_store.createColorStore;
 exports.defaultPalettes = require_defaults.defaultPalettes;
 exports.defaultPencils = require_defaults.defaultPencils;
 exports.extractPalette = require_extract.extractPalette;
 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;
@@ -81,12 +88,16 @@ exports.hwbaToHsva = require_convert.hwbaToHsva;
 exports.imageMode = require_index$3.imageMode;
 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.meetsContrast = require_contrast.meetsContrast;
 exports.meetsNonTextContrast = require_contrast.meetsNonTextContrast;
 exports.normalizeHue = require_convert.normalizeHue;
 exports.palettesMode = require_index$2.palettesMode;
 exports.parse = require_parse.parse;
+exports.parseColor = require_value.parseColor;
+exports.parseCss4Color = require_css4.parseCss4Color;
 exports.pencilsMode = require_index$4.pencilsMode;
 exports.pushRecent = require_PanelFooter.pushRecent;
 exports.quantize = require_mmcq.quantize;
@@ -99,8 +110,10 @@ 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.slidersMode = require_index$1.slidersMode;
+exports.suggestAccessibleColor = require_contrast.suggestAccessibleColor;
 exports.toFormat = require_serialize.toFormat;
 exports.toHex = require_serialize.toHex;
 exports.toHexa = require_serialize.toHexa;

package/dist/index.d.cts

@@ -1,10 +1,12 @@
-import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.cjs";
-import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.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";
+import { AccessibleColorSuggestion, ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.cjs";
 import { QuantizedSwatch, quantize } from "./image/mmcq.cjs";
 import { ExtractOptions, ExtractResult, extractPalette } from "./image/extract.cjs";
 import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.cjs";
@@ -33,4 +35,4 @@ import { PENCIL_COLUMNS, defaultPalettes, defaultPencils } from "./data/defaults
 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 ContrastOptions, type ContrastReport, type ExtractOptions, type ExtractResult, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, ImagePanel, type ModeId, ModeToolbar, type ModeToolbarProps, NumberField, type NumberFieldProps, PENCIL_COLUMNS, PalettesPanel, PanelFooter, type PanelOptions, PencilsPanel, type PickerMode, Popover, type PopoverProps, type QuantizedSwatch, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, SlidersPanel, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type TextSize, type Unsubscribe, type WcagLevel, WheelPanel, apcaContrast, clamp, clearNamedColors, contrastRatio, contrastReport, createColorStore, defaultPalettes, defaultPencils, extractPalette, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, imageMode, ingest, injectStyles, isValidColor, meetsContrast, meetsNonTextContrast, normalizeHue, palettesMode, parse, pencilsMode, pushRecent, quantize, readableTextColor, registerMode, registerNamedColors, relativeLuminance, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, slidersMode, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor, wcagLevel, wheelMode };
+export { type AccessibleColorSuggestion, 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 ContrastOptions, type ContrastReport, type ExtractOptions, type ExtractResult, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, ImagePanel, type ModeId, ModeToolbar, type ModeToolbarProps, ModernColorSpace, NumberField, type NumberFieldProps, PENCIL_COLUMNS, PalettesPanel, PanelFooter, type PanelOptions, PencilsPanel, type PickerMode, Popover, type PopoverProps, type QuantizedSwatch, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, SerializeColorOptions, SlidersPanel, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type TextSize, type Unsubscribe, type WcagLevel, WheelPanel, apcaContrast, clamp, clearNamedColors, colorValueToHsva, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, convertColor, createColorStore, defaultPalettes, defaultPencils, extractPalette, getMode, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, imageMode, ingest, injectStyles, isInGamut, isValidColor, mapToGamut, meetsContrast, meetsNonTextContrast, normalizeHue, palettesMode, parse, parseColor, parseCss4Color, pencilsMode, pushRecent, quantize, readableTextColor, registerMode, registerNamedColors, relativeLuminance, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, setStyleNonce, slidersMode, suggestAccessibleColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor, wcagLevel, wheelMode };

package/dist/index.d.ts

@@ -1,10 +1,12 @@
-import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.js";
-import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.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";
+import { AccessibleColorSuggestion, ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.js";
 import { QuantizedSwatch, quantize } from "./image/mmcq.js";
 import { ExtractOptions, ExtractResult, extractPalette } from "./image/extract.js";
 import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.js";
@@ -33,4 +35,4 @@ import { PENCIL_COLUMNS, defaultPalettes, defaultPencils } from "./data/defaults
 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 ContrastOptions, type ContrastReport, type ExtractOptions, type ExtractResult, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, ImagePanel, type ModeId, ModeToolbar, type ModeToolbarProps, NumberField, type NumberFieldProps, PENCIL_COLUMNS, PalettesPanel, PanelFooter, type PanelOptions, PencilsPanel, type PickerMode, Popover, type PopoverProps, type QuantizedSwatch, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, SlidersPanel, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type TextSize, type Unsubscribe, type WcagLevel, WheelPanel, apcaContrast, clamp, clearNamedColors, contrastRatio, contrastReport, createColorStore, defaultPalettes, defaultPencils, extractPalette, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, imageMode, ingest, injectStyles, isValidColor, meetsContrast, meetsNonTextContrast, normalizeHue, palettesMode, parse, pencilsMode, pushRecent, quantize, readableTextColor, registerMode, registerNamedColors, relativeLuminance, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, slidersMode, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor, wcagLevel, wheelMode };
+export { type AccessibleColorSuggestion, 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 ContrastOptions, type ContrastReport, type ExtractOptions, type ExtractResult, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, ImagePanel, type ModeId, ModeToolbar, type ModeToolbarProps, ModernColorSpace, NumberField, type NumberFieldProps, PENCIL_COLUMNS, PalettesPanel, PanelFooter, type PanelOptions, PencilsPanel, type PickerMode, Popover, type PopoverProps, type QuantizedSwatch, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, SerializeColorOptions, SlidersPanel, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type TextSize, type Unsubscribe, type WcagLevel, WheelPanel, apcaContrast, clamp, clearNamedColors, colorValueToHsva, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, convertColor, createColorStore, defaultPalettes, defaultPencils, extractPalette, getMode, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, imageMode, ingest, injectStyles, isInGamut, isValidColor, mapToGamut, meetsContrast, meetsNonTextContrast, normalizeHue, palettesMode, parse, parseColor, parseCss4Color, pencilsMode, pushRecent, quantize, readableTextColor, registerMode, registerNamedColors, relativeLuminance, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, setStyleNonce, slidersMode, suggestAccessibleColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor, wcagLevel, wheelMode };

package/dist/index.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";
@@ -32,7 +33,8 @@ import { Popover } from "./components/Popover.js";
 import { ColorInput } from "./components/ColorInput.js";
 import { ColorArea } from "./primitives/ColorArea.js";
 import { Swatch } from "./primitives/Swatch.js";
-import { apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.js";
+import { parseColor } from "./color/value.js";
+import { apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.js";
 //#region src/index.ts
 registerMode(wheelMode);
 registerMode(slidersMode);
@@ -40,5 +42,5 @@ registerMode(palettesMode);
 registerMode(imageMode);
 registerMode(pencilsMode);
 //#endregion
-export { ChannelSlider, ChromaPanel, ColorArea, ColorDisc, ColorField, ColorInput, Icon, ImagePanel, ModeToolbar, NumberField, PENCIL_COLUMNS, PalettesPanel, PanelFooter, PencilsPanel, Popover, SegmentedControl, SlidersPanel, Swatch, SwatchGrid, WheelPanel, apcaContrast, clamp, clearNamedColors, contrastRatio, contrastReport, createColorStore, defaultPalettes, defaultPencils, extractPalette, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, imageMode, ingest, injectStyles, isValidColor, meetsContrast, meetsNonTextContrast, normalizeHue, palettesMode, parse, pencilsMode, pushRecent, quantize, readableTextColor, registerMode, registerNamedColors, relativeLuminance, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, slidersMode, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor, wcagLevel, wheelMode };
+export { ChannelSlider, ChromaPanel, ColorArea, ColorDisc, ColorField, ColorInput, Icon, ImagePanel, ModeToolbar, NumberField, PENCIL_COLUMNS, PalettesPanel, PanelFooter, PencilsPanel, Popover, SegmentedControl, SlidersPanel, Swatch, SwatchGrid, WheelPanel, apcaContrast, clamp, clearNamedColors, colorValueToHsva, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, convertColor, createColorStore, defaultPalettes, defaultPencils, extractPalette, getMode, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, imageMode, ingest, injectStyles, isInGamut, isValidColor, mapToGamut, meetsContrast, meetsNonTextContrast, normalizeHue, palettesMode, parse, parseColor, parseCss4Color, pencilsMode, pushRecent, quantize, readableTextColor, registerMode, registerNamedColors, relativeLuminance, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, setStyleNonce, slidersMode, suggestAccessibleColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor, wcagLevel, wheelMode };
 

package/dist/modes/image/index.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_context = require("../../core/context.cjs");
+const require_convert = require("../../color/convert.cjs");
 const require_parse = require("../../color/parse.cjs");
 const require_icons = require("../../primitives/icons.cjs");
 const require_SwatchGrid = require("../../primitives/SwatchGrid.cjs");
@@ -17,7 +18,7 @@ const EMPTY = {
 	preview: null
 };
 function ImagePanel(props) {
-	const { extractOptions } = props;
+	const { extractOptions, sortBy = "population" } = props;
 	const { idPrefix, disabled } = require_context.usePanel();
 	const inputId = `${idPrefix}-image-file`;
 	const { store } = require_context.usePanel();
@@ -29,6 +30,10 @@ function ImagePanel(props) {
 	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, {
@@ -87,6 +92,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 require_convert.rgbaToHsva({
+			r: a.rgb[0],
+			g: a.rgb[1],
+			b: a.rgb[2],
+			a: 1
+		}).h - require_convert.rgbaToHsva({
+			r: b.rgb[0],
+			g: b.rgb[1],
+			b: b.rgb[2],
+			a: 1
+		}).h;
+	}), [swatches, sortBy]);
 	const clear = () => {
 		controller.current?.abort();
 		releasePreview();
@@ -131,8 +180,8 @@ function ImagePanel(props) {
 		}
 		const parsed = require_parse.parse(`rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`);
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "image");
+		store.commit("image");
 		setMessage("Color selected from image.");
 	};
 	const dragDepth = react.useRef(0);
@@ -143,6 +192,9 @@ function ImagePanel(props) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "cp-panel",
+		onPaste: (event) => {
+			if (!disabled && pasteFile(event.clipboardData.items)) event.preventDefault();
+		},
 		onDragEnter: (e) => {
 			e.preventDefault();
 			if (disabled) return;
@@ -245,6 +297,15 @@ function ImagePanel(props) {
 				tabIndex: preview === null ? void 0 : -1,
 				onChange: (e) => onFiles(e.currentTarget.files)
 			}),
+			preview === null && clipboardRead && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "cp-button",
+				disabled,
+				onClick: () => {
+					readClipboard();
+				},
+				children: "Paste image"
+			}),
 			preview !== null && status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "cp-empty",
 				children: message
@@ -254,7 +315,7 @@ function ImagePanel(props) {
 				children: "Click the image to pick an exact color."
 			}),
 			status === "ready" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SwatchGrid.SwatchGrid, {
-				swatches: swatches.map((s) => ({
+				swatches: sortedSwatches.map((s) => ({
 					color: s.hex,
 					name: s.hex
 				})),

package/dist/modes/image/index.d.cts

@@ -4,6 +4,7 @@ import * as React from "react";
 //#region src/modes/image/index.d.ts
 export interface ImagePanelProps {
   extractOptions?: ExtractOptions;
+  sortBy?: "population" | "luminance" | "hue";
 }
 export declare function ImagePanel(props: ImagePanelProps): React.ReactElement;
 export declare const imageMode: PickerMode;

package/dist/modes/image/index.d.ts

@@ -4,6 +4,7 @@ import * as React from "react";
 //#region src/modes/image/index.d.ts
 export interface ImagePanelProps {
   extractOptions?: ExtractOptions;
+  sortBy?: "population" | "luminance" | "hue";
 }
 export declare function ImagePanel(props: ImagePanelProps): React.ReactElement;
 export declare const imageMode: PickerMode;

package/dist/modes/image/index.js

@@ -1,5 +1,6 @@
 "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";
@@ -15,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();
@@ -27,6 +28,10 @@ function ImagePanel(props) {
 	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, {
@@ -85,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();
@@ -129,8 +178,8 @@ function ImagePanel(props) {
 		}
 		const parsed = parse(`rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`);
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "image");
+		store.commit("image");
 		setMessage("Color selected from image.");
 	};
 	const dragDepth = React.useRef(0);
@@ -141,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;
@@ -243,6 +295,15 @@ 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
@@ -252,7 +313,7 @@ function ImagePanel(props) {
 				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),