chroma-panel 0.1.0

package/dist/image-worker.js

@@ -0,0 +1,202 @@
+//#region src/image/mmcq.ts
+const SIGBITS = 5;
+const RSHIFT = 3;
+const HIST_SIZE = 32768;
+const MAX_ITERATIONS = 1e3;
+const FRACT_BY_POPULATIONS = .75;
+function histIndex(r, g, b) {
+	return (r << 10) + (g << SIGBITS) + b;
+}
+function makeVBox(r1, r2, g1, g2, b1, b2) {
+	return {
+		r1,
+		r2,
+		g1,
+		g2,
+		b1,
+		b2,
+		count: 0,
+		countValid: false
+	};
+}
+function copyVBox(v) {
+	return makeVBox(v.r1, v.r2, v.g1, v.g2, v.b1, v.b2);
+}
+function volume(v) {
+	return (v.r2 - v.r1 + 1) * (v.g2 - v.g1 + 1) * (v.b2 - v.b1 + 1);
+}
+function count(v, histo) {
+	if (v.countValid) return v.count;
+	let total = 0;
+	for (let r = v.r1; r <= v.r2; r++) for (let g = v.g1; g <= v.g2; g++) for (let b = v.b1; b <= v.b2; b++) total += histo[histIndex(r, g, b)];
+	v.count = total;
+	v.countValid = true;
+	return total;
+}
+function average(v, h) {
+	const mult = 8;
+	let total = 0;
+	let rSum = 0;
+	let gSum = 0;
+	let bSum = 0;
+	for (let r = v.r1; r <= v.r2; r++) for (let g = v.g1; g <= v.g2; g++) for (let b = v.b1; b <= v.b2; b++) {
+		const index = histIndex(r, g, b);
+		const hval = h.counts[index];
+		if (hval === 0) continue;
+		total += hval;
+		rSum += h.rSum[index];
+		gSum += h.gSum[index];
+		bSum += h.bSum[index];
+	}
+	if (total === 0) return [
+		Math.min(255, Math.round(mult * (v.r1 + v.r2 + 1) / 2)),
+		Math.min(255, Math.round(mult * (v.g1 + v.g2 + 1) / 2)),
+		Math.min(255, Math.round(mult * (v.b1 + v.b2 + 1) / 2))
+	];
+	return [
+		Math.min(255, Math.round(rSum / total)),
+		Math.min(255, Math.round(gSum / total)),
+		Math.min(255, Math.round(bSum / total))
+	];
+}
+function medianCut(histo, vbox) {
+	if (count(vbox, histo) === 0) return [];
+	if (count(vbox, histo) === 1) return [copyVBox(vbox)];
+	const rw = vbox.r2 - vbox.r1 + 1;
+	const gw = vbox.g2 - vbox.g1 + 1;
+	const bw = vbox.b2 - vbox.b1 + 1;
+	const maxw = Math.max(rw, gw, bw);
+	const partial = /* @__PURE__ */ new Int32Array(33);
+	let total = 0;
+	const axis = maxw === rw ? "r" : maxw === gw ? "g" : "b";
+	if (axis === "r") for (let r = vbox.r1; r <= vbox.r2; r++) {
+		let sum = 0;
+		for (let g = vbox.g1; g <= vbox.g2; g++) for (let b = vbox.b1; b <= vbox.b2; b++) sum += histo[histIndex(r, g, b)];
+		total += sum;
+		partial[r] = total;
+	}
+	else if (axis === "g") for (let g = vbox.g1; g <= vbox.g2; g++) {
+		let sum = 0;
+		for (let r = vbox.r1; r <= vbox.r2; r++) for (let b = vbox.b1; b <= vbox.b2; b++) sum += histo[histIndex(r, g, b)];
+		total += sum;
+		partial[g] = total;
+	}
+	else for (let b = vbox.b1; b <= vbox.b2; b++) {
+		let sum = 0;
+		for (let r = vbox.r1; r <= vbox.r2; r++) for (let g = vbox.g1; g <= vbox.g2; g++) sum += histo[histIndex(r, g, b)];
+		total += sum;
+		partial[b] = total;
+	}
+	const lo = axis === "r" ? vbox.r1 : axis === "g" ? vbox.g1 : vbox.b1;
+	const hi = axis === "r" ? vbox.r2 : axis === "g" ? vbox.g2 : vbox.b2;
+	for (let i = lo; i <= hi; i++) {
+		if (partial[i] <= total / 2) continue;
+		const left = i - lo;
+		const right = hi - i;
+		let d2 = left <= right ? Math.min(hi - 1, Math.trunc(i + right / 2)) : Math.max(lo, Math.trunc(i - 1 - left / 2));
+		while (d2 < hi && partial[d2] === 0) d2++;
+		let count2 = total - partial[d2];
+		while (count2 === 0 && d2 > lo && partial[d2 - 1] > 0) {
+			d2--;
+			count2 = total - partial[d2];
+		}
+		const a = copyVBox(vbox);
+		const b = copyVBox(vbox);
+		if (axis === "r") {
+			a.r2 = d2;
+			b.r1 = d2 + 1;
+		} else if (axis === "g") {
+			a.g2 = d2;
+			b.g1 = d2 + 1;
+		} else {
+			a.b2 = d2;
+			b.b1 = d2 + 1;
+		}
+		return [a, b];
+	}
+	return [copyVBox(vbox)];
+}
+function quantize(data, maxColors, alphaThreshold = 128) {
+	const target = Math.max(2, Math.min(256, Math.round(maxColors)));
+	const hist = {
+		counts: new Int32Array(HIST_SIZE),
+		rSum: new Int32Array(HIST_SIZE),
+		gSum: new Int32Array(HIST_SIZE),
+		bSum: new Int32Array(HIST_SIZE)
+	};
+	const histo = hist.counts;
+	let rMin = 1e9, rMax = -1, gMin = 1e9, gMax = -1, bMin = 1e9, bMax = -1;
+	let used = 0;
+	for (let i = 0; i < data.length; i += 4) {
+		if (data[i + 3] < alphaThreshold) continue;
+		const r8 = data[i];
+		const g8 = data[i + 1];
+		const b8 = data[i + 2];
+		const r = r8 >> RSHIFT;
+		const g = g8 >> RSHIFT;
+		const b = b8 >> RSHIFT;
+		const bin = histIndex(r, g, b);
+		histo[bin] = histo[bin] + 1;
+		hist.rSum[bin] = hist.rSum[bin] + r8;
+		hist.gSum[bin] = hist.gSum[bin] + g8;
+		hist.bSum[bin] = hist.bSum[bin] + b8;
+		used++;
+		if (r < rMin) rMin = r;
+		if (r > rMax) rMax = r;
+		if (g < gMin) gMin = g;
+		if (g > gMax) gMax = g;
+		if (b < bMin) bMin = b;
+		if (b > bMax) bMax = b;
+	}
+	if (used === 0) return [];
+	let boxes = [makeVBox(rMin, rMax, gMin, gMax, bMin, bMax)];
+	const split = (limit, byVolume) => {
+		let iterations = 0;
+		while (iterations++ < MAX_ITERATIONS) {
+			if (boxes.length >= limit) return;
+			boxes.sort((a, b) => byVolume ? count(a, histo) * volume(a) - count(b, histo) * volume(b) : count(a, histo) - count(b, histo));
+			const biggest = boxes.pop();
+			if (biggest === void 0) return;
+			if (count(biggest, histo) === 0) {
+				boxes.unshift(biggest);
+				return;
+			}
+			const parts = medianCut(histo, biggest);
+			if (parts.length === 0) return;
+			boxes.push(...parts);
+			if (parts.length === 1) return;
+		}
+	};
+	split(Math.max(2, Math.round(target * FRACT_BY_POPULATIONS)), false);
+	split(target, true);
+	return boxes.map((box) => {
+		const rgb = average(box, hist);
+		return {
+			rgb,
+			population: count(box, histo),
+			hex: "#" + rgb.map((c) => c.toString(16).padStart(2, "0")).join("")
+		};
+	}).filter((s) => s.population > 0).sort((a, b) => b.population - a.population);
+}
+//#endregion
+//#region src/image-worker.ts
+const post = (message) => {
+	self.postMessage(message);
+};
+self.addEventListener("message", (event) => {
+	const request = event.data;
+	if (request === null || typeof request !== "object") return;
+	const { id, data, maxColors, alphaThreshold } = request;
+	try {
+		post({
+			id,
+			swatches: quantize(data, maxColors, alphaThreshold)
+		});
+	} catch (error) {
+		post({
+			id,
+			error: error instanceof Error ? error.message : String(error)
+		});
+	}
+});
+//#endregion

package/dist/image.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_registry = require("./modes/registry.cjs");
+const require_mmcq = require("./image/mmcq.cjs");
+const require_extract = require("./image/extract.cjs");
+const require_index = require("./modes/image/index.cjs");
+//#region src/image.ts
+require_registry.registerMode(require_index.imageMode);
+//#endregion
+exports.ImagePanel = require_index.ImagePanel;
+exports.extractPalette = require_extract.extractPalette;
+exports.imageMode = require_index.imageMode;
+exports.quantize = require_mmcq.quantize;

package/dist/image.d.cts

@@ -0,0 +1,4 @@
+import { QuantizedSwatch, quantize } from "./image/mmcq.cjs";
+import { ExtractOptions, ExtractResult, extractPalette } from "./image/extract.cjs";
+import { ImagePanel, imageMode } from "./modes/image/index.cjs";
+export { type ExtractOptions, type ExtractResult, ImagePanel, type QuantizedSwatch, extractPalette, imageMode, quantize };

package/dist/image.d.ts

@@ -0,0 +1,4 @@
+import { QuantizedSwatch, quantize } from "./image/mmcq.js";
+import { ExtractOptions, ExtractResult, extractPalette } from "./image/extract.js";
+import { ImagePanel, imageMode } from "./modes/image/index.js";
+export { type ExtractOptions, type ExtractResult, ImagePanel, type QuantizedSwatch, extractPalette, imageMode, quantize };

package/dist/image.js

@@ -0,0 +1,9 @@
+import { registerMode } from "./modes/registry.js";
+import { quantize } from "./image/mmcq.js";
+import { extractPalette } from "./image/extract.js";
+import { ImagePanel, imageMode } from "./modes/image/index.js";
+//#region src/image.ts
+registerMode(imageMode);
+//#endregion
+export { ImagePanel, extractPalette, imageMode, quantize };
+

package/dist/index.cjs

@@ -0,0 +1,119 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_registry = require("./modes/registry.cjs");
+const require_context = require("./core/context.cjs");
+const require_convert = require("./color/convert.cjs");
+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_parse = require("./color/parse.cjs");
+const require_serialize = require("./color/serialize.cjs");
+const require_ColorField = require("./primitives/ColorField.cjs");
+const require_icons = require("./primitives/icons.cjs");
+const require_index = require("./modes/wheel/index.cjs");
+const require_sticky = require("./color/sticky.cjs");
+const require_NumberField = require("./primitives/NumberField.cjs");
+const require_SegmentedControl = require("./primitives/SegmentedControl.cjs");
+const require_index$1 = require("./modes/sliders/index.cjs");
+const require_defaults = require("./data/defaults.cjs");
+const require_SwatchGrid = require("./primitives/SwatchGrid.cjs");
+const require_index$2 = require("./modes/palettes/index.cjs");
+const require_mmcq = require("./image/mmcq.cjs");
+const require_extract = require("./image/extract.cjs");
+const require_index$3 = require("./modes/image/index.cjs");
+const require_index$4 = require("./modes/pencils/index.cjs");
+const require_store = require("./core/store.cjs");
+const require_styleInjector = require("./core/styleInjector.cjs");
+const require_ModeToolbar = require("./components/ModeToolbar.cjs");
+const require_useEyedropper = require("./primitives/useEyedropper.cjs");
+const require_PanelFooter = require("./components/PanelFooter.cjs");
+const require_ChromaPanel = require("./components/ChromaPanel.cjs");
+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_contrast = require("./a11y/contrast.cjs");
+//#region src/index.ts
+require_registry.registerMode(require_index.wheelMode);
+require_registry.registerMode(require_index$1.slidersMode);
+require_registry.registerMode(require_index$2.palettesMode);
+require_registry.registerMode(require_index$3.imageMode);
+require_registry.registerMode(require_index$4.pencilsMode);
+//#endregion
+exports.ChannelSlider = require_ChannelSlider.ChannelSlider;
+exports.ChromaPanel = require_ChromaPanel.ChromaPanel;
+exports.ColorArea = require_ColorArea.ColorArea;
+exports.ColorDisc = require_ColorDisc.ColorDisc;
+exports.ColorField = require_ColorField.ColorField;
+exports.ColorInput = require_ColorInput.ColorInput;
+exports.Icon = require_icons.Icon;
+exports.ImagePanel = require_index$3.ImagePanel;
+exports.ModeToolbar = require_ModeToolbar.ModeToolbar;
+exports.NumberField = require_NumberField.NumberField;
+exports.PENCIL_COLUMNS = require_defaults.PENCIL_COLUMNS;
+exports.PalettesPanel = require_index$2.PalettesPanel;
+exports.PanelFooter = require_PanelFooter.PanelFooter;
+exports.PencilsPanel = require_index$4.PencilsPanel;
+exports.Popover = require_Popover.Popover;
+exports.SegmentedControl = require_SegmentedControl.SegmentedControl;
+exports.SlidersPanel = require_index$1.SlidersPanel;
+exports.Swatch = require_Swatch.Swatch;
+exports.SwatchGrid = require_SwatchGrid.SwatchGrid;
+exports.WheelPanel = require_index.WheelPanel;
+exports.apcaContrast = require_contrast.apcaContrast;
+exports.clamp = require_convert.clamp;
+exports.clearNamedColors = require_parse.clearNamedColors;
+exports.contrastRatio = require_contrast.contrastRatio;
+exports.contrastReport = require_contrast.contrastReport;
+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.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.imageMode = require_index$3.imageMode;
+exports.ingest = require_sticky.ingest;
+exports.injectStyles = require_styleInjector.injectStyles;
+exports.isValidColor = require_parse.isValidColor;
+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.pencilsMode = require_index$4.pencilsMode;
+exports.pushRecent = require_PanelFooter.pushRecent;
+exports.quantize = require_mmcq.quantize;
+exports.readableTextColor = require_contrast.readableTextColor;
+exports.registerMode = require_registry.registerMode;
+exports.registerNamedColors = require_parse.registerNamedColors;
+exports.relativeLuminance = require_contrast.relativeLuminance;
+exports.resolveModes = require_registry.resolveModes;
+exports.rgbaToHsva = require_convert.rgbaToHsva;
+exports.roundRgba = require_convert.roundRgba;
+exports.sameHsva = require_sticky.sameHsva;
+exports.sameRendered = require_sticky.sameRendered;
+exports.setStyleNonce = require_styleInjector.setStyleNonce;
+exports.slidersMode = require_index$1.slidersMode;
+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;
+exports.useAxisKeyboard = require_usePointerDrag.useAxisKeyboard;
+exports.useColorValue = require_useColorStore.useColorValue;
+exports.useEyedropper = require_useEyedropper.useEyedropper;
+exports.usePanel = require_context.usePanel;
+exports.usePointerDrag = require_usePointerDrag.usePointerDrag;
+exports.useTransientColor = require_useColorStore.useTransientColor;
+exports.wcagLevel = require_contrast.wcagLevel;
+exports.wheelMode = require_index.wheelMode;

package/dist/index.d.cts

@@ -0,0 +1,36 @@
+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 { 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 { 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 { QuantizedSwatch, quantize } from "./image/mmcq.cjs";
+import { ExtractOptions, ExtractResult, extractPalette } from "./image/extract.cjs";
+import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.cjs";
+import { ImagePanel, imageMode } from "./modes/image/index.cjs";
+import { ChromaClassNames, ColorPalette, PanelOptions, usePanel } from "./core/context.cjs";
+import { ChromaPanel, ChromaPanelProps } from "./components/ChromaPanel.cjs";
+import { ColorInput, ColorInputProps } from "./components/ColorInput.cjs";
+import { Popover, PopoverProps } from "./components/Popover.cjs";
+import { ModeToolbar, ModeToolbarProps } from "./components/ModeToolbar.cjs";
+import { PanelFooter, pushRecent } from "./components/PanelFooter.cjs";
+import { ColorArea, ColorAreaProps } from "./primitives/ColorArea.cjs";
+import { ColorDisc, ColorDiscProps } from "./primitives/ColorDisc.cjs";
+import { ChannelSlider, ChannelSliderProps } from "./primitives/ChannelSlider.cjs";
+import { ColorField, ColorFieldProps } from "./primitives/ColorField.cjs";
+import { NumberField, NumberFieldProps } from "./primitives/NumberField.cjs";
+import { Swatch, SwatchProps } from "./primitives/Swatch.cjs";
+import { SwatchEntry, SwatchGrid, SwatchGridProps, SwatchVariant } from "./primitives/SwatchGrid.cjs";
+import { SegmentedControl, SegmentedControlProps, SegmentedItem } from "./primitives/SegmentedControl.cjs";
+import { Icon, IconName, IconProps } from "./primitives/icons.cjs";
+import { Eyedropper, useEyedropper } from "./primitives/useEyedropper.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";
+import { PENCIL_COLUMNS, defaultPalettes, defaultPencils } from "./data/defaults.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 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 };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+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 { 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 { 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 { QuantizedSwatch, quantize } from "./image/mmcq.js";
+import { ExtractOptions, ExtractResult, extractPalette } from "./image/extract.js";
+import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.js";
+import { ImagePanel, imageMode } from "./modes/image/index.js";
+import { ChromaClassNames, ColorPalette, PanelOptions, usePanel } from "./core/context.js";
+import { ChromaPanel, ChromaPanelProps } from "./components/ChromaPanel.js";
+import { ColorInput, ColorInputProps } from "./components/ColorInput.js";
+import { Popover, PopoverProps } from "./components/Popover.js";
+import { ModeToolbar, ModeToolbarProps } from "./components/ModeToolbar.js";
+import { PanelFooter, pushRecent } from "./components/PanelFooter.js";
+import { ColorArea, ColorAreaProps } from "./primitives/ColorArea.js";
+import { ColorDisc, ColorDiscProps } from "./primitives/ColorDisc.js";
+import { ChannelSlider, ChannelSliderProps } from "./primitives/ChannelSlider.js";
+import { ColorField, ColorFieldProps } from "./primitives/ColorField.js";
+import { NumberField, NumberFieldProps } from "./primitives/NumberField.js";
+import { Swatch, SwatchProps } from "./primitives/Swatch.js";
+import { SwatchEntry, SwatchGrid, SwatchGridProps, SwatchVariant } from "./primitives/SwatchGrid.js";
+import { SegmentedControl, SegmentedControlProps, SegmentedItem } from "./primitives/SegmentedControl.js";
+import { Icon, IconName, IconProps } from "./primitives/icons.js";
+import { Eyedropper, useEyedropper } from "./primitives/useEyedropper.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";
+import { PENCIL_COLUMNS, defaultPalettes, defaultPencils } from "./data/defaults.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 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 };

package/dist/index.js

@@ -0,0 +1,44 @@
+"use client";
+import { getMode, registerMode, resolveModes } from "./modes/registry.js";
+import { usePanel } from "./core/context.js";
+import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.js";
+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 { 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";
+import { Icon } from "./primitives/icons.js";
+import { WheelPanel, wheelMode } from "./modes/wheel/index.js";
+import { ingest, sameHsva, sameRendered } from "./color/sticky.js";
+import { NumberField } from "./primitives/NumberField.js";
+import { SegmentedControl } from "./primitives/SegmentedControl.js";
+import { SlidersPanel, slidersMode } from "./modes/sliders/index.js";
+import { PENCIL_COLUMNS, defaultPalettes, defaultPencils } from "./data/defaults.js";
+import { SwatchGrid } from "./primitives/SwatchGrid.js";
+import { PalettesPanel, palettesMode } from "./modes/palettes/index.js";
+import { quantize } from "./image/mmcq.js";
+import { extractPalette } from "./image/extract.js";
+import { ImagePanel, imageMode } from "./modes/image/index.js";
+import { PencilsPanel, pencilsMode } from "./modes/pencils/index.js";
+import { createColorStore } from "./core/store.js";
+import { injectStyles, setStyleNonce } from "./core/styleInjector.js";
+import { ModeToolbar } from "./components/ModeToolbar.js";
+import { useEyedropper } from "./primitives/useEyedropper.js";
+import { PanelFooter, pushRecent } from "./components/PanelFooter.js";
+import { ChromaPanel } from "./components/ChromaPanel.js";
+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";
+//#region src/index.ts
+registerMode(wheelMode);
+registerMode(slidersMode);
+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 };
+

package/dist/modes/gradients.cjs

@@ -0,0 +1,48 @@
+const require_convert = require("../color/convert.cjs");
+const require_serialize = require("../color/serialize.cjs");
+//#region src/modes/gradients.ts
+function redTrack(c) {
+	const { g, b } = require_convert.roundRgba(require_convert.hsvaToRgba(c));
+	return `linear-gradient(to right, rgb(0, ${g}, ${b}), rgb(255, ${g}, ${b}))`;
+}
+function greenTrack(c) {
+	const { r, b } = require_convert.roundRgba(require_convert.hsvaToRgba(c));
+	return `linear-gradient(to right, rgb(${r}, 0, ${b}), rgb(${r}, 255, ${b}))`;
+}
+function blueTrack(c) {
+	const { r, g } = require_convert.roundRgba(require_convert.hsvaToRgba(c));
+	return `linear-gradient(to right, rgb(${r}, ${g}, 0), rgb(${r}, ${g}, 255))`;
+}
+function saturationTrack(c) {
+	return `linear-gradient(to right, ${require_serialize.toRgbString({
+		...c,
+		s: 0
+	})}, ${require_serialize.toRgbString({
+		...c,
+		s: 100
+	})})`;
+}
+function brightnessTrack(c) {
+	return `linear-gradient(to right, #000, ${require_serialize.toRgbString({
+		...c,
+		v: 100
+	})})`;
+}
+function lightnessTrack(c) {
+	return `linear-gradient(to right, #000, ${require_serialize.toRgbString({
+		...c,
+		v: 100,
+		s: c.s === 0 ? 0 : 100
+	})}, #fff)`;
+}
+function alphaTrack(c) {
+	return `linear-gradient(to right, transparent, ${require_serialize.toRgbString(c)})`;
+}
+//#endregion
+exports.alphaTrack = alphaTrack;
+exports.blueTrack = blueTrack;
+exports.brightnessTrack = brightnessTrack;
+exports.greenTrack = greenTrack;
+exports.lightnessTrack = lightnessTrack;
+exports.redTrack = redTrack;
+exports.saturationTrack = saturationTrack;

package/dist/modes/gradients.js

@@ -0,0 +1,43 @@
+import { hsvaToRgba, roundRgba } from "../color/convert.js";
+import { toRgbString } from "../color/serialize.js";
+//#region src/modes/gradients.ts
+function redTrack(c) {
+	const { g, b } = roundRgba(hsvaToRgba(c));
+	return `linear-gradient(to right, rgb(0, ${g}, ${b}), rgb(255, ${g}, ${b}))`;
+}
+function greenTrack(c) {
+	const { r, b } = roundRgba(hsvaToRgba(c));
+	return `linear-gradient(to right, rgb(${r}, 0, ${b}), rgb(${r}, 255, ${b}))`;
+}
+function blueTrack(c) {
+	const { r, g } = roundRgba(hsvaToRgba(c));
+	return `linear-gradient(to right, rgb(${r}, ${g}, 0), rgb(${r}, ${g}, 255))`;
+}
+function saturationTrack(c) {
+	return `linear-gradient(to right, ${toRgbString({
+		...c,
+		s: 0
+	})}, ${toRgbString({
+		...c,
+		s: 100
+	})})`;
+}
+function brightnessTrack(c) {
+	return `linear-gradient(to right, #000, ${toRgbString({
+		...c,
+		v: 100
+	})})`;
+}
+function lightnessTrack(c) {
+	return `linear-gradient(to right, #000, ${toRgbString({
+		...c,
+		v: 100,
+		s: c.s === 0 ? 0 : 100
+	})}, #fff)`;
+}
+function alphaTrack(c) {
+	return `linear-gradient(to right, transparent, ${toRgbString(c)})`;
+}
+//#endregion
+export { alphaTrack, blueTrack, brightnessTrack, greenTrack, lightnessTrack, redTrack, saturationTrack };
+