chroma-panel 0.1.4 → 1.0.0

package/dist/gradient.js

@@ -0,0 +1,3 @@
+import { addGradientStop, gradientToCss, isGradientColorSupported, normalizeGradient, sampleGradient } from "./gradient/model.js";
+import { GradientEditor } from "./gradient/GradientEditor.js";
+export { GradientEditor, addGradientStop, gradientToCss, isGradientColorSupported, normalizeGradient, sampleGradient };

package/dist/image/extract.cjs

@@ -9,13 +9,27 @@ async function toBlob(source) {
 	if (!response.ok) throw new Error(`chroma-panel: could not load image (${response.status}).`);
 	return await response.blob();
 }
-async function decode(blob, size) {
+const DEFAULT_MAX_FILE_SIZE = 20971520;
+const DEFAULT_MAX_SOURCE_PIXELS = 4e7;
+function validateBlob(blob, maxFileSize) {
+	if (blob.size > maxFileSize) {
+		const limit = Math.round(maxFileSize / 1048576);
+		throw new RangeError(`chroma-panel: image must be ${limit} MB or smaller.`);
+	}
+	if (blob.type !== "" && !blob.type.toLowerCase().startsWith("image/")) throw new TypeError("chroma-panel: the selected file is not an image.");
+}
+async function decode(blob, size, maxSourcePixels) {
 	if (typeof createImageBitmap !== "function") throw new Error("chroma-panel: this browser cannot decode images off-thread.");
 	const longest = Math.max(8, Math.round(size));
-	try {
-		const probe = await createImageBitmap(blob);
-		const wide = probe.width >= probe.height;
+	const probe = await createImageBitmap(blob);
+	if (probe.width * probe.height > maxSourcePixels) {
 		probe.close();
+		const megapixels = Math.round(maxSourcePixels / 1e6);
+		throw new RangeError(`chroma-panel: image dimensions must not exceed ${megapixels} megapixels.`);
+	}
+	const wide = probe.width >= probe.height;
+	probe.close();
+	try {
 		return await createImageBitmap(blob, {
 			...wide ? { resizeWidth: longest } : { resizeHeight: longest },
 			resizeQuality: "medium",
@@ -71,14 +85,17 @@ function runInWorker(worker, data, maxColors, alphaThreshold, signal) {
 	});
 }
 async function extractPalette(source, options = {}) {
-	const { maxColors = 8, size = 100, alphaThreshold = 128, worker, signal } = options;
+	const { maxColors = 8, size = 100, alphaThreshold = 128, maxFileSize = DEFAULT_MAX_FILE_SIZE, maxSourcePixels = DEFAULT_MAX_SOURCE_PIXELS, worker, signal } = options;
 	if (!Number.isFinite(maxColors) || maxColors < 2) throw new RangeError("chroma-panel: maxColors must be a number of at least 2.");
 	if (!Number.isFinite(size) || size < 8) throw new RangeError("chroma-panel: size must be a number of at least 8.");
 	if (!Number.isFinite(alphaThreshold) || alphaThreshold < 0 || alphaThreshold > 255) throw new RangeError("chroma-panel: alphaThreshold must be between 0 and 255.");
+	if (!Number.isFinite(maxFileSize) || maxFileSize <= 0) throw new RangeError("chroma-panel: maxFileSize must be greater than 0.");
+	if (!Number.isFinite(maxSourcePixels) || maxSourcePixels < 64) throw new RangeError("chroma-panel: maxSourcePixels must be at least 64.");
 	if (aborted(signal)) throw new DOMException("Aborted", "AbortError");
 	const blob = await toBlob(source);
+	validateBlob(blob, maxFileSize);
 	if (aborted(signal)) throw new DOMException("Aborted", "AbortError");
-	const bitmap = await decode(blob, size);
+	const bitmap = await decode(blob, size, maxSourcePixels);
 	let data;
 	try {
 		if (aborted(signal)) throw new DOMException("Aborted", "AbortError");

package/dist/image/extract.d.cts

@@ -4,6 +4,8 @@ export interface ExtractOptions {
   maxColors?: number;
   size?: number;
   alphaThreshold?: number;
+  maxFileSize?: number;
+  maxSourcePixels?: number;
   worker?: Worker | (() => Worker);
   signal?: AbortSignal;
 }

package/dist/image/extract.d.ts

@@ -4,6 +4,8 @@ export interface ExtractOptions {
   maxColors?: number;
   size?: number;
   alphaThreshold?: number;
+  maxFileSize?: number;
+  maxSourcePixels?: number;
   worker?: Worker | (() => Worker);
   signal?: AbortSignal;
 }

package/dist/image/extract.js

@@ -9,13 +9,27 @@ async function toBlob(source) {
 	if (!response.ok) throw new Error(`chroma-panel: could not load image (${response.status}).`);
 	return await response.blob();
 }
-async function decode(blob, size) {
+const DEFAULT_MAX_FILE_SIZE = 20971520;
+const DEFAULT_MAX_SOURCE_PIXELS = 4e7;
+function validateBlob(blob, maxFileSize) {
+	if (blob.size > maxFileSize) {
+		const limit = Math.round(maxFileSize / 1048576);
+		throw new RangeError(`chroma-panel: image must be ${limit} MB or smaller.`);
+	}
+	if (blob.type !== "" && !blob.type.toLowerCase().startsWith("image/")) throw new TypeError("chroma-panel: the selected file is not an image.");
+}
+async function decode(blob, size, maxSourcePixels) {
 	if (typeof createImageBitmap !== "function") throw new Error("chroma-panel: this browser cannot decode images off-thread.");
 	const longest = Math.max(8, Math.round(size));
-	try {
-		const probe = await createImageBitmap(blob);
-		const wide = probe.width >= probe.height;
+	const probe = await createImageBitmap(blob);
+	if (probe.width * probe.height > maxSourcePixels) {
 		probe.close();
+		const megapixels = Math.round(maxSourcePixels / 1e6);
+		throw new RangeError(`chroma-panel: image dimensions must not exceed ${megapixels} megapixels.`);
+	}
+	const wide = probe.width >= probe.height;
+	probe.close();
+	try {
 		return await createImageBitmap(blob, {
 			...wide ? { resizeWidth: longest } : { resizeHeight: longest },
 			resizeQuality: "medium",
@@ -71,14 +85,17 @@ function runInWorker(worker, data, maxColors, alphaThreshold, signal) {
 	});
 }
 async function extractPalette(source, options = {}) {
-	const { maxColors = 8, size = 100, alphaThreshold = 128, worker, signal } = options;
+	const { maxColors = 8, size = 100, alphaThreshold = 128, maxFileSize = DEFAULT_MAX_FILE_SIZE, maxSourcePixels = DEFAULT_MAX_SOURCE_PIXELS, worker, signal } = options;
 	if (!Number.isFinite(maxColors) || maxColors < 2) throw new RangeError("chroma-panel: maxColors must be a number of at least 2.");
 	if (!Number.isFinite(size) || size < 8) throw new RangeError("chroma-panel: size must be a number of at least 8.");
 	if (!Number.isFinite(alphaThreshold) || alphaThreshold < 0 || alphaThreshold > 255) throw new RangeError("chroma-panel: alphaThreshold must be between 0 and 255.");
+	if (!Number.isFinite(maxFileSize) || maxFileSize <= 0) throw new RangeError("chroma-panel: maxFileSize must be greater than 0.");
+	if (!Number.isFinite(maxSourcePixels) || maxSourcePixels < 64) throw new RangeError("chroma-panel: maxSourcePixels must be at least 64.");
 	if (aborted(signal)) throw new DOMException("Aborted", "AbortError");
 	const blob = await toBlob(source);
+	validateBlob(blob, maxFileSize);
 	if (aborted(signal)) throw new DOMException("Aborted", "AbortError");
-	const bitmap = await decode(blob, size);
+	const bitmap = await decode(blob, size, maxSourcePixels);
 	let data;
 	try {
 		if (aborted(signal)) throw new DOMException("Aborted", "AbortError");

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,8 @@
 "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");
 const require_extract = require("../../image/extract.cjs");
@@ -16,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();
@@ -25,7 +27,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, {
@@ -84,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();
@@ -91,8 +143,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 = require_parse.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 = () => {
@@ -101,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;
@@ -145,18 +239,52 @@ function ImagePanel(props) {
 				]
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cp-image-preview",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					src: preview,
-					alt: ""
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "cp-image-remove",
-					"aria-label": "Remove image",
-					title: "Remove image",
-					disabled,
-					onClick: clear,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, { name: "x" })
-				})]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "cp-image-remove",
+						"aria-label": "Remove image",
+						title: "Remove image",
+						disabled,
+						onClick: clear,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, { name: "x" })
+					})
+				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref: inputRef,
@@ -169,12 +297,25 @@ 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
 			}),
+			preview !== null && status !== "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "cp-image-hint",
+				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;