chroma-panel 0.2.0 → 1.0.0

package/dist/color/css4.js

@@ -0,0 +1,392 @@
+import { clamp, hsvaToRgba, rgbaToHsva } from "./convert.js";
+//#region src/color/css4.ts
+const D50 = [
+	.96422,
+	1,
+	.82521
+];
+const D65_TO_D50 = [
+	[
+		1.0479298,
+		.0229468,
+		-.0501922
+	],
+	[
+		.0296278,
+		.9904345,
+		-.0170738
+	],
+	[
+		-.009243,
+		.0150552,
+		.7518743
+	]
+];
+const D50_TO_D65 = [
+	[
+		.9554734,
+		-.0230985,
+		.0632593
+	],
+	[
+		-.0283697,
+		1.0099955,
+		.0210414
+	],
+	[
+		.012314,
+		-.0205077,
+		1.3303659
+	]
+];
+function mul(matrix, value) {
+	return matrix.map((row) => row[0] * value[0] + row[1] * value[1] + row[2] * value[2]);
+}
+function linear(value) {
+	const sign = value < 0 ? -1 : 1;
+	const abs = Math.abs(value);
+	return sign * (abs <= .04045 ? abs / 12.92 : ((abs + .055) / 1.055) ** 2.4);
+}
+function gamma(value) {
+	const sign = value < 0 ? -1 : 1;
+	const abs = Math.abs(value);
+	return sign * (abs <= .0031308 ? 12.92 * abs : 1.055 * abs ** (1 / 2.4) - .055);
+}
+function rgbToXyz(rgb, space) {
+	return mul(space === "srgb" ? [
+		[
+			.4123908,
+			.3575843,
+			.1804808
+		],
+		[
+			.212639,
+			.7151687,
+			.0721923
+		],
+		[
+			.0193308,
+			.1191948,
+			.9505322
+		]
+	] : [
+		[
+			.4865709,
+			.2656677,
+			.1982173
+		],
+		[
+			.2289746,
+			.6917385,
+			.0792869
+		],
+		[
+			0,
+			.0451134,
+			1.0439444
+		]
+	], rgb.map(linear));
+}
+function xyzToRgb(xyz, space) {
+	return mul(space === "srgb" ? [
+		[
+			3.2409699,
+			-1.5373832,
+			-.4986108
+		],
+		[
+			-.9692436,
+			1.8759675,
+			.0415551
+		],
+		[
+			.0556301,
+			-.203977,
+			1.0569715
+		]
+	] : [
+		[
+			2.4934969,
+			-.9313836,
+			-.4027108
+		],
+		[
+			-.829489,
+			1.762664,
+			.0236247
+		],
+		[
+			.0358458,
+			-.0761724,
+			.9568845
+		]
+	], xyz).map(gamma);
+}
+function xyzToOklab(xyz) {
+	return mul([
+		[
+			.2104543,
+			.7936178,
+			-.004072
+		],
+		[
+			1.9779985,
+			-2.4285922,
+			.4505937
+		],
+		[
+			.025904,
+			.7827718,
+			-.8086758
+		]
+	], mul([
+		[
+			.8190224,
+			.3619063,
+			-.1288738
+		],
+		[
+			.0329837,
+			.9292868,
+			.0361447
+		],
+		[
+			.0481772,
+			.2642395,
+			.6335478
+		]
+	], xyz).map(Math.cbrt));
+}
+function oklabToXyz(lab) {
+	return mul([
+		[
+			1.2268798758,
+			-.5578149945,
+			.2813910457
+		],
+		[
+			-.0405757452,
+			1.1122868033,
+			-.0717110581
+		],
+		[
+			-.0763729367,
+			-.4214933324,
+			1.5869240198
+		]
+	], mul([
+		[
+			1,
+			.3963378,
+			.2158038
+		],
+		[
+			1,
+			-.1055613,
+			-.0638542
+		],
+		[
+			1,
+			-.0894842,
+			-1.2914855
+		]
+	], lab).map((v) => v ** 3));
+}
+function xyzD50ToLab(xyz) {
+	const e = 216 / 24389;
+	const k = 24389 / 27;
+	const f = xyz.map((v, i) => {
+		const n = v / D50[i];
+		return n > e ? Math.cbrt(n) : (k * n + 16) / 116;
+	});
+	return [
+		116 * f[1] - 16,
+		500 * (f[0] - f[1]),
+		200 * (f[1] - f[2])
+	];
+}
+function labToXyzD50(lab) {
+	const f = [
+		lab[1] / 500 + (lab[0] + 16) / 116,
+		(lab[0] + 16) / 116,
+		(lab[0] + 16) / 116 - lab[2] / 200
+	];
+	const e = 216 / 24389;
+	const k = 24389 / 27;
+	return f.map((v, i) => D50[i] * (v ** 3 > e ? v ** 3 : (116 * v - 16) / k));
+}
+function polar(value) {
+	const r = value[2] * Math.PI / 180;
+	return [
+		value[0],
+		value[1] * Math.cos(r),
+		value[1] * Math.sin(r)
+	];
+}
+function cylindrical(value) {
+	const c = Math.hypot(value[1], value[2]);
+	return [
+		value[0],
+		c,
+		c < 1e-7 ? 0 : (Math.atan2(value[2], value[1]) * 180 / Math.PI + 360) % 360
+	];
+}
+function toXyz(color) {
+	switch (color.space) {
+		case "srgb":
+		case "display-p3": return rgbToXyz([...color.channels], color.space);
+		case "oklab": return oklabToXyz([...color.channels]);
+		case "oklch": return oklabToXyz(polar([...color.channels]));
+		case "lab": return mul(D50_TO_D65, labToXyzD50([...color.channels]));
+		case "lch": return mul(D50_TO_D65, labToXyzD50(polar([...color.channels])));
+	}
+}
+function convertColor(color, space) {
+	if (color.space === space) return {
+		...color,
+		channels: [...color.channels]
+	};
+	const xyz = toXyz(color);
+	let channels;
+	switch (space) {
+		case "srgb":
+		case "display-p3":
+			channels = xyzToRgb(xyz, space);
+			break;
+		case "oklab":
+			channels = xyzToOklab(xyz);
+			break;
+		case "oklch":
+			channels = cylindrical(xyzToOklab(xyz));
+			break;
+		case "lab":
+			channels = xyzD50ToLab(mul(D65_TO_D50, xyz));
+			break;
+		case "lch": channels = cylindrical(xyzD50ToLab(mul(D65_TO_D50, xyz)));
+	}
+	return {
+		space,
+		channels,
+		alpha: color.alpha
+	};
+}
+function isInGamut(color, gamut = "srgb") {
+	return convertColor(color, gamut).channels.every((v) => v >= -1e-7 && v <= 1 + 1e-7);
+}
+function mapToGamut(color, gamut = "srgb") {
+	if (isInGamut(color, gamut)) return convertColor(color, gamut);
+	const source = convertColor(color, "oklch");
+	let low = 0;
+	let high = Math.max(0, source.channels[1]);
+	for (let i = 0; i < 24; i++) {
+		const c = (low + high) / 2;
+		if (isInGamut({
+			...source,
+			channels: [
+				source.channels[0],
+				c,
+				source.channels[2]
+			]
+		}, gamut)) low = c;
+		else high = c;
+	}
+	const mapped = convertColor({
+		...source,
+		channels: [
+			source.channels[0],
+			low,
+			source.channels[2]
+		]
+	}, gamut);
+	return {
+		...mapped,
+		channels: mapped.channels.map((channel) => clamp(channel, 0, 1))
+	};
+}
+function num(token, percentScale = 1) {
+	if (token.toLowerCase() === "none") return 0;
+	const percent = token.endsWith("%");
+	const value = Number(percent ? token.slice(0, -1) : token);
+	return Number.isFinite(value) ? value * (percent ? percentScale / 100 : 1) : null;
+}
+function hue(token) {
+	if (token.toLowerCase() === "none") return 0;
+	const m = token.match(/^([-+]?(?:\d*\.)?\d+)(deg|grad|rad|turn)?$/i);
+	if (m === null) return null;
+	const value = Number(m[1]);
+	return m[2] === "grad" ? value * .9 : m[2] === "rad" ? value * 180 / Math.PI : m[2] === "turn" ? value * 360 : value;
+}
+function lightness(token, ok) {
+	if (token.toLowerCase() === "none") return 0;
+	const percent = token.endsWith("%");
+	const value = Number(percent ? token.slice(0, -1) : token);
+	if (!Number.isFinite(value)) return null;
+	return ok && percent ? value / 100 : value;
+}
+function parseCss4Color(input) {
+	const rgb = input.trim().match(/^color\((srgb|display-p3)\s+([^/]+?)(?:\s*\/\s*([^\s]+))?\)$/i);
+	if (rgb !== null) {
+		const values = rgb[2].trim().split(/\s+/).map((v) => num(v, 1));
+		const alpha = rgb[3] === void 0 ? 1 : num(rgb[3], 1);
+		return values.length === 3 && values.every((v) => v !== null) && alpha !== null ? {
+			space: rgb[1].toLowerCase(),
+			channels: values,
+			alpha: clamp(alpha, 0, 1)
+		} : null;
+	}
+	const match = input.trim().match(/^(oklab|oklch|lab|lch)\((.*)\)$/i);
+	if (match === null) return null;
+	const sections = match[2].split("/");
+	const parts = sections[0].trim().split(/\s+/);
+	const space = match[1].toLowerCase();
+	if (parts.length !== 3 || sections.length > 2) return null;
+	const l = lightness(parts[0], space.startsWith("ok"));
+	const second = num(parts[1], space.startsWith("ok") ? .4 : space === "lch" ? 150 : 125);
+	const third = space.endsWith("ch") ? hue(parts[2]) : num(parts[2], space === "oklab" ? .4 : 125);
+	const alpha = sections[1] === void 0 ? 1 : num(sections[1].trim(), 1);
+	if (l === null || second === null || third === null || alpha === null) return null;
+	return {
+		space,
+		channels: [
+			l,
+			space.endsWith("ch") ? Math.max(0, second) : second,
+			space.endsWith("ch") ? (third % 360 + 360) % 360 : third
+		],
+		alpha: clamp(alpha, 0, 1)
+	};
+}
+function colorValueToHsva(color) {
+	const rgb = mapToGamut(color, "srgb");
+	return rgbaToHsva({
+		r: clamp(rgb.channels[0], 0, 1) * 255,
+		g: clamp(rgb.channels[1], 0, 1) * 255,
+		b: clamp(rgb.channels[2], 0, 1) * 255,
+		a: color.alpha
+	});
+}
+function hsvaToColorValue(color) {
+	const rgb = hsvaToRgba(color);
+	return {
+		space: "srgb",
+		channels: [
+			rgb.r / 255,
+			rgb.g / 255,
+			rgb.b / 255
+		],
+		alpha: rgb.a
+	};
+}
+const out = (value, precision) => String(Number(value.toFixed(precision)));
+function serializeColor(color, options = {}) {
+	const format = options.format ?? color.space;
+	const precision = Math.min(8, Math.max(0, options.precision ?? 4));
+	const converted = convertColor(options.gamut === void 0 || options.gamut === "preserve" ? color : mapToGamut(color, options.gamut), format);
+	const [x, y, z] = converted.channels;
+	const alpha = converted.alpha < 1 ? ` / ${out(converted.alpha, precision)}` : "";
+	if (format === "srgb" || format === "display-p3") return `color(${format} ${out(x, precision)} ${out(y, precision)} ${out(z, precision)}${alpha})`;
+	const lightness = format.startsWith("ok") ? x * 100 : x;
+	return `${format}(${out(lightness, precision)}% ${out(y, precision)} ${out(z, precision)}${alpha})`;
+}
+//#endregion
+export { colorValueToHsva, convertColor, hsvaToColorValue, isInGamut, mapToGamut, parseCss4Color, serializeColor };
+

package/dist/color/parse.cjs

@@ -1,4 +1,5 @@
 const require_convert = require("./convert.cjs");
+const require_css4 = require("./css4.cjs");
 //#region src/color/parse.ts
 let namedTable = null;
 function registerNamedColors(table) {
@@ -141,7 +142,8 @@ function parse(input) {
 			a: alpha
 		});
 	}
-	return null;
+	const modern = require_css4.parseCss4Color(raw);
+	return modern === null ? null : require_css4.colorValueToHsva(modern);
 }
 function isValidColor(input) {
 	return parse(input) !== null;

package/dist/color/parse.js

@@ -1,4 +1,5 @@
 import { clamp, hslaToHsva, hwbaToHsva, rgbaToHsva } from "./convert.js";
+import { colorValueToHsva, parseCss4Color } from "./css4.js";
 //#region src/color/parse.ts
 let namedTable = null;
 function registerNamedColors(table) {
@@ -141,7 +142,8 @@ function parse(input) {
 			a: alpha
 		});
 	}
-	return null;
+	const modern = parseCss4Color(raw);
+	return modern === null ? null : colorValueToHsva(modern);
 }
 function isValidColor(input) {
 	return parse(input) !== null;

package/dist/color/types.d.cts

@@ -40,4 +40,20 @@ export interface ColorChangeResult {
   hsva: Hsva;
   css: string;
 }
+export type ColorChangeSource = "pointer" | "keyboard" | "field" | "swatch" | "eyedropper" | "image" | "recent" | "programmatic" | "unknown";
+export interface ColorChangeMeta {
+  phase: "change" | "commit";
+  source: ColorChangeSource;
+}
+export type ModernColorSpace = "srgb" | "display-p3" | "oklab" | "oklch" | "lab" | "lch";
+export interface ColorValue {
+  space: ModernColorSpace;
+  channels: readonly [number, number, number];
+  alpha: number;
+}
+export interface SerializeColorOptions {
+  format?: ModernColorSpace;
+  precision?: number;
+  gamut?: "preserve" | "srgb" | "display-p3";
+}
 //#endregion

package/dist/color/types.d.ts

@@ -40,4 +40,20 @@ export interface ColorChangeResult {
   hsva: Hsva;
   css: string;
 }
+export type ColorChangeSource = "pointer" | "keyboard" | "field" | "swatch" | "eyedropper" | "image" | "recent" | "programmatic" | "unknown";
+export interface ColorChangeMeta {
+  phase: "change" | "commit";
+  source: ColorChangeSource;
+}
+export type ModernColorSpace = "srgb" | "display-p3" | "oklab" | "oklch" | "lab" | "lch";
+export interface ColorValue {
+  space: ModernColorSpace;
+  channels: readonly [number, number, number];
+  alpha: number;
+}
+export interface SerializeColorOptions {
+  format?: ModernColorSpace;
+  precision?: number;
+  gamut?: "preserve" | "srgb" | "display-p3";
+}
 //#endregion

package/dist/color/value.cjs

@@ -0,0 +1,11 @@
+const require_css4 = require("./css4.cjs");
+const require_parse = require("./parse.cjs");
+//#region src/color/value.ts
+function parseColor(input) {
+	const modern = require_css4.parseCss4Color(input);
+	if (modern !== null) return modern;
+	const legacy = require_parse.parse(input);
+	return legacy === null ? null : require_css4.hsvaToColorValue(legacy);
+}
+//#endregion
+exports.parseColor = parseColor;

package/dist/color/value.d.cts

@@ -0,0 +1,4 @@
+import { ColorValue } from "./types.cjs";
+//#region src/color/value.d.ts
+export declare function parseColor(input: string): ColorValue | null;
+//#endregion

package/dist/color/value.d.ts

@@ -0,0 +1,4 @@
+import { ColorValue } from "./types.js";
+//#region src/color/value.d.ts
+export declare function parseColor(input: string): ColorValue | null;
+//#endregion

package/dist/color/value.js

@@ -0,0 +1,12 @@
+import { hsvaToColorValue, parseCss4Color } from "./css4.js";
+import { parse } from "./parse.js";
+//#region src/color/value.ts
+function parseColor(input) {
+	const modern = parseCss4Color(input);
+	if (modern !== null) return modern;
+	const legacy = parse(input);
+	return legacy === null ? null : hsvaToColorValue(legacy);
+}
+//#endregion
+export { parseColor };
+

package/dist/color.cjs

@@ -0,0 +1,43 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_convert = require("./color/convert.cjs");
+const require_css4 = require("./color/css4.cjs");
+const require_parse = require("./color/parse.cjs");
+const require_serialize = require("./color/serialize.cjs");
+const require_sticky = require("./color/sticky.cjs");
+const require_store = require("./core/store.cjs");
+const require_value = require("./color/value.cjs");
+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.hslaToHsva = require_convert.hslaToHsva;
+exports.hsvaToColorValue = require_css4.hsvaToColorValue;
+exports.hsvaToHsl = require_convert.hsvaToHsl;
+exports.hsvaToHsla = require_convert.hsvaToHsla;
+exports.hsvaToHwba = require_convert.hsvaToHwba;
+exports.hsvaToRgb = require_convert.hsvaToRgb;
+exports.hsvaToRgba = require_convert.hsvaToRgba;
+exports.hwbaToHsva = require_convert.hwbaToHsva;
+exports.ingest = require_sticky.ingest;
+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.registerNamedColors = require_parse.registerNamedColors;
+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.toFormat = require_serialize.toFormat;
+exports.toHex = require_serialize.toHex;
+exports.toHexa = require_serialize.toHexa;
+exports.toHslString = require_serialize.toHslString;
+exports.toHslaString = require_serialize.toHslaString;
+exports.toResult = require_serialize.toResult;
+exports.toRgbString = require_serialize.toRgbString;
+exports.toRgbaString = require_serialize.toRgbaString;

package/dist/color.d.cts

@@ -0,0 +1,9 @@
+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";
+export { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, type ColorListener, type ColorStore, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions, type Unsubscribe, clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };

package/dist/color.d.ts

@@ -0,0 +1,9 @@
+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";
+export { ColorChangeMeta, ColorChangeResult, ColorChangeSource, ColorFormat, type ColorListener, type ColorStore, ColorValue, Hsl, Hsla, Hsva, Hwb, Hwba, ModernColorSpace, Rgb, Rgba, SerializeColorOptions, type Unsubscribe, clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };

package/dist/color.js

@@ -0,0 +1,8 @@
+import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.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 { ingest, sameHsva, sameRendered } from "./color/sticky.js";
+import { createColorStore } from "./core/store.js";
+import { parseColor } from "./color/value.js";
+export { clamp, clearNamedColors, colorValueToHsva, convertColor, createColorStore, hslaToHsva, hsvaToColorValue, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isInGamut, isValidColor, mapToGamut, normalizeHue, parse, parseColor, parseCss4Color, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, serializeColor, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };

package/dist/components/ChromaPanel.cjs

@@ -26,7 +26,7 @@ const FALLBACK = {
 	a: 1
 };
 function ChromaPanel(props) {
-	const { value, defaultValue = DEFAULT_COLOR, onChange, onChangeComplete, modes = [
+	const { value, defaultValue = DEFAULT_COLOR, onChange, onChangeComplete, onValueChange, onValueCommit, modes = [
 		"wheel",
 		"sliders",
 		"palettes",
@@ -64,13 +64,15 @@ function ChromaPanel(props) {
 			return;
 		}
 		if (require_sticky.sameRendered(parsed, store.get())) return;
-		store.ingest(parsed);
+		store.ingest(parsed, "programmatic");
 	}, [value, store]);
 	const [internalRecents, setInternalRecents] = react.useState(() => defaultRecentColors ?? []);
 	const activeRecents = recentColors ?? internalRecents;
 	const callbacks = react.useRef({
 		onChange,
 		onChangeComplete,
+		onValueChange,
+		onValueCommit,
 		format,
 		activeRecents,
 		onRecentColorsChange,
@@ -80,16 +82,24 @@ function ChromaPanel(props) {
 		callbacks.current = {
 			onChange,
 			onChangeComplete,
+			onValueChange,
+			onValueCommit,
 			format,
 			activeRecents,
 			onRecentColorsChange,
 			controlled: recentColors !== void 0
 		};
 	});
-	react.useEffect(() => store.subscribe((c) => callbacks.current.onChange?.(require_serialize.toResult(c, callbacks.current.format))), [store]);
-	react.useEffect(() => store.subscribeCommit((c) => {
-		const { onChangeComplete: done, format: fmt, activeRecents: recents, onRecentColorsChange: notify, controlled } = callbacks.current;
-		done?.(require_serialize.toResult(c, fmt));
+	react.useEffect(() => store.subscribe((c, meta) => {
+		const result = require_serialize.toResult(c, callbacks.current.format);
+		callbacks.current.onChange?.(result);
+		callbacks.current.onValueChange?.(result, meta);
+	}), [store]);
+	react.useEffect(() => store.subscribeCommit((c, meta) => {
+		const { onChangeComplete: done, format: fmt, activeRecents: recents, onValueCommit: commit, onRecentColorsChange: notify, controlled } = callbacks.current;
+		const result = require_serialize.toResult(c, fmt);
+		done?.(result);
+		commit?.(result, meta);
 		const next = require_PanelFooter.pushRecent(recents, require_serialize.toHex(c));
 		if (!controlled) setInternalRecents(next);
 		notify?.(next);

package/dist/components/ChromaPanel.d.cts

@@ -1,4 +1,4 @@
-import { ColorChangeResult, ColorFormat, Hsva } from "../color/types.cjs";
+import { ColorChangeMeta, ColorChangeResult, ColorFormat, Hsva } from "../color/types.cjs";
 import { ColorStore } from "../core/store.cjs";
 import { ExtractOptions } from "../image/extract.cjs";
 import { ModeId, PickerMode } from "../modes/registry.cjs";
@@ -11,7 +11,9 @@ export interface ChromaPanelProps {
   defaultValue?: string | Hsva;
   onChange?: (color: ColorChangeResult) => void;
   onChangeComplete?: (color: ColorChangeResult) => void;
-  modes?: (ModeId | string | PickerMode)[];
+  onValueChange?: (color: ColorChangeResult, meta: ColorChangeMeta) => void;
+  onValueCommit?: (color: ColorChangeResult, meta: ColorChangeMeta) => void;
+  modes?: readonly (ModeId | string | PickerMode)[];
   mode?: string;
   defaultMode?: string;
   onModeChange?: (mode: string) => void;

package/dist/components/ChromaPanel.d.ts

@@ -1,4 +1,4 @@
-import { ColorChangeResult, ColorFormat, Hsva } from "../color/types.js";
+import { ColorChangeMeta, ColorChangeResult, ColorFormat, Hsva } from "../color/types.js";
 import { ColorStore } from "../core/store.js";
 import { ExtractOptions } from "../image/extract.js";
 import { ModeId, PickerMode } from "../modes/registry.js";
@@ -11,7 +11,9 @@ export interface ChromaPanelProps {
   defaultValue?: string | Hsva;
   onChange?: (color: ColorChangeResult) => void;
   onChangeComplete?: (color: ColorChangeResult) => void;
-  modes?: (ModeId | string | PickerMode)[];
+  onValueChange?: (color: ColorChangeResult, meta: ColorChangeMeta) => void;
+  onValueCommit?: (color: ColorChangeResult, meta: ColorChangeMeta) => void;
+  modes?: readonly (ModeId | string | PickerMode)[];
   mode?: string;
   defaultMode?: string;
   onModeChange?: (mode: string) => void;