chroma-panel 0.1.4 → 1.0.0

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,13 +11,16 @@ 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;
   format?: ColorFormat;
   showAlpha?: boolean;
   showEyedropper?: boolean;
+  showCopyButton?: boolean;
   showRecentColors?: boolean;
   recentColors?: string[];
   defaultRecentColors?: string[];

package/dist/components/ChromaPanel.js

@@ -24,13 +24,13 @@ 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",
 		"image",
 		"pencils"
-	], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colors", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
+	], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showCopyButton = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colors", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
 	const rootRef = React.useRef(null);
 	const panelHostRef = React.useRef(null);
 	const idPrefix = useStableId("cp");
@@ -62,13 +62,15 @@ function ChromaPanel(props) {
 			return;
 		}
 		if (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,
@@ -78,16 +80,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?.(toResult(c, callbacks.current.format))), [store]);
-	React.useEffect(() => store.subscribeCommit((c) => {
-		const { onChangeComplete: done, format: fmt, activeRecents: recents, onRecentColorsChange: notify, controlled } = callbacks.current;
-		done?.(toResult(c, fmt));
+	React.useEffect(() => store.subscribe((c, meta) => {
+		const result = 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 = toResult(c, fmt);
+		done?.(result);
+		commit?.(result, meta);
 		const next = pushRecent(recents, toHex(c));
 		if (!controlled) setInternalRecents(next);
 		notify?.(next);
@@ -129,7 +139,9 @@ function ChromaPanel(props) {
 		pencils,
 		showAlpha,
 		showEyedropper,
+		showCopyButton,
 		showRecentColors,
+		format,
 		recentColors: activeRecents,
 		onRecentColorsChange
 	}), [
@@ -139,6 +151,8 @@ function ChromaPanel(props) {
 		imageOptions,
 		showAlpha,
 		showEyedropper,
+		showCopyButton,
+		format,
 		showRecentColors,
 		activeRecents,
 		onRecentColorsChange

package/dist/components/ColorInput.cjs

@@ -58,7 +58,7 @@ function ColorInput(props) {
 	});
 	require_useFormControl.useFormReset(hiddenRef, () => {
 		const parsed = typeof defaultValue === "string" ? require_parse.parse(defaultValue) : defaultValue;
-		if (parsed !== null && parsed !== void 0) store.ingest(parsed);
+		if (parsed !== null && parsed !== void 0) store.ingest(parsed, "programmatic");
 	});
 	require_useFormControl.useConstraintValidation(hiddenRef, {
 		behavior: validationBehavior,

package/dist/components/ColorInput.js

@@ -56,7 +56,7 @@ function ColorInput(props) {
 	});
 	useFormReset(hiddenRef, () => {
 		const parsed = typeof defaultValue === "string" ? parse(defaultValue) : defaultValue;
-		if (parsed !== null && parsed !== void 0) store.ingest(parsed);
+		if (parsed !== null && parsed !== void 0) store.ingest(parsed, "programmatic");
 	});
 	useConstraintValidation(hiddenRef, {
 		behavior: validationBehavior,

package/dist/components/PanelFooter.cjs

@@ -13,13 +13,28 @@ let react_jsx_runtime = require("react/jsx-runtime");
 function PanelFooter() {
 	const { store, classNames, options, disabled } = require_context.usePanel();
 	const { supported, pick } = require_useEyedropper.useEyedropper();
+	const [copyStatus, setCopyStatus] = react.useState("idle");
+	const copyTimer = react.useRef(null);
+	react.useEffect(() => () => {
+		if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+	}, []);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(require_serialize.toFormat(store.get(), options.format));
+			setCopyStatus("copied");
+		} catch {
+			setCopyStatus("error");
+		}
+		if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+		copyTimer.current = setTimeout(() => setCopyStatus("idle"), 1600);
+	};
 	const handlePick = async () => {
 		const hex = await pick();
 		if (hex === null) return;
 		const parsed = require_parse.parse(hex);
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "eyedropper");
+		store.commit("eyedropper");
 	};
 	const recentsRef = react.useRef(null);
 	const [current, setCurrent] = react.useState(null);
@@ -51,8 +66,8 @@ function PanelFooter() {
 					onClick: () => {
 						const parsed = require_parse.parse(color);
 						if (parsed === null) return;
-						store.ingest(parsed);
-						store.commit();
+						store.ingest(parsed, "recent");
+						store.commit("recent");
 					}
 				}) }, `${color}-${index}`))
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cp-footer-spacer" }),
@@ -66,6 +81,24 @@ function PanelFooter() {
 					handlePick();
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.EyedropperIcon, {})
+			}),
+			options.showCopyButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "cp-icon-button",
+				"aria-label": copyStatus === "copied" ? "Color copied" : "Copy color",
+				title: copyStatus === "copied" ? "Copied" : copyStatus === "error" ? "Could not copy" : "Copy color",
+				disabled,
+				"data-cp-copy-status": copyStatus,
+				onClick: () => {
+					handleCopy();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, { name: "copy" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "cp-visually-hidden",
+				role: "status",
+				"aria-live": "polite",
+				children: [copyStatus === "copied" ? "Color copied to clipboard" : "", copyStatus === "error" ? "Could not copy color" : ""]
 			})
 		]
 	});

package/dist/components/PanelFooter.js

@@ -1,8 +1,8 @@
 "use client";
 import { cx, usePanel } from "../core/context.js";
 import { parse } from "../color/parse.js";
-import { toHex } from "../color/serialize.js";
-import { EyedropperIcon } from "../primitives/icons.js";
+import { toFormat, toHex } from "../color/serialize.js";
+import { EyedropperIcon, Icon } from "../primitives/icons.js";
 import { useScrollFade } from "../core/useScrollFade.js";
 import { useEyedropper } from "../primitives/useEyedropper.js";
 import * as React from "react";
@@ -11,13 +11,28 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function PanelFooter() {
 	const { store, classNames, options, disabled } = usePanel();
 	const { supported, pick } = useEyedropper();
+	const [copyStatus, setCopyStatus] = React.useState("idle");
+	const copyTimer = React.useRef(null);
+	React.useEffect(() => () => {
+		if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+	}, []);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(toFormat(store.get(), options.format));
+			setCopyStatus("copied");
+		} catch {
+			setCopyStatus("error");
+		}
+		if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+		copyTimer.current = setTimeout(() => setCopyStatus("idle"), 1600);
+	};
 	const handlePick = async () => {
 		const hex = await pick();
 		if (hex === null) return;
 		const parsed = parse(hex);
 		if (parsed === null) return;
-		store.ingest(parsed);
-		store.commit();
+		store.ingest(parsed, "eyedropper");
+		store.commit("eyedropper");
 	};
 	const recentsRef = React.useRef(null);
 	const [current, setCurrent] = React.useState(null);
@@ -49,8 +64,8 @@ function PanelFooter() {
 					onClick: () => {
 						const parsed = parse(color);
 						if (parsed === null) return;
-						store.ingest(parsed);
-						store.commit();
+						store.ingest(parsed, "recent");
+						store.commit("recent");
 					}
 				}) }, `${color}-${index}`))
 			}) : /* @__PURE__ */ jsx("div", { className: "cp-footer-spacer" }),
@@ -64,6 +79,24 @@ function PanelFooter() {
 					handlePick();
 				},
 				children: /* @__PURE__ */ jsx(EyedropperIcon, {})
+			}),
+			options.showCopyButton && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cp-icon-button",
+				"aria-label": copyStatus === "copied" ? "Color copied" : "Copy color",
+				title: copyStatus === "copied" ? "Copied" : copyStatus === "error" ? "Could not copy" : "Copy color",
+				disabled,
+				"data-cp-copy-status": copyStatus,
+				onClick: () => {
+					handleCopy();
+				},
+				children: /* @__PURE__ */ jsx(Icon, { name: "copy" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "cp-visually-hidden",
+				role: "status",
+				"aria-live": "polite",
+				children: [copyStatus === "copied" ? "Color copied to clipboard" : "", copyStatus === "error" ? "Could not copy color" : ""]
 			})
 		]
 	});

package/dist/contrast.cjs

@@ -1,10 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_contrast = require("./a11y/contrast.cjs");
 exports.apcaContrast = require_contrast.apcaContrast;
+exports.compositeColor = require_contrast.compositeColor;
 exports.contrastRatio = require_contrast.contrastRatio;
+exports.contrastRatioWithAlpha = require_contrast.contrastRatioWithAlpha;
 exports.contrastReport = require_contrast.contrastReport;
 exports.meetsContrast = require_contrast.meetsContrast;
 exports.meetsNonTextContrast = require_contrast.meetsNonTextContrast;
 exports.readableTextColor = require_contrast.readableTextColor;
 exports.relativeLuminance = require_contrast.relativeLuminance;
+exports.suggestAccessibleColor = require_contrast.suggestAccessibleColor;
 exports.wcagLevel = require_contrast.wcagLevel;

package/dist/contrast.d.cts

@@ -1,2 +1,2 @@
-import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.cjs";
-export { type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };
+import { AccessibleColorSuggestion, ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.cjs";
+export { type AccessibleColorSuggestion, type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel };

package/dist/contrast.d.ts

@@ -1,2 +1,2 @@
-import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.js";
-export { type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };
+import { AccessibleColorSuggestion, ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.js";
+export { type AccessibleColorSuggestion, type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel };

package/dist/contrast.js

@@ -1,2 +1,2 @@
-import { apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.js";
-export { apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };
+import { apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel } from "./a11y/contrast.js";
+export { apcaContrast, compositeColor, contrastRatio, contrastRatioWithAlpha, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, suggestAccessibleColor, wcagLevel };

package/dist/core/context.d.cts

@@ -1,3 +1,4 @@
+import { ColorFormat } from "../color/types.cjs";
 import { ColorStore } from "./store.cjs";
 import "react";
 //#region src/core/context.d.ts
@@ -28,7 +29,9 @@ export interface PanelOptions {
   pencils: string[] | undefined;
   showAlpha: boolean;
   showEyedropper: boolean;
+  showCopyButton: boolean;
   showRecentColors: boolean;
+  format: ColorFormat;
   recentColors: string[];
   onRecentColorsChange?: (colors: string[]) => void;
 }

package/dist/core/context.d.ts

@@ -1,3 +1,4 @@
+import { ColorFormat } from "../color/types.js";
 import { ColorStore } from "./store.js";
 import "react";
 //#region src/core/context.d.ts
@@ -28,7 +29,9 @@ export interface PanelOptions {
   pencils: string[] | undefined;
   showAlpha: boolean;
   showEyedropper: boolean;
+  showCopyButton: boolean;
   showRecentColors: boolean;
+  format: ColorFormat;
   recentColors: string[];
   onRecentColorsChange?: (colors: string[]) => void;
 }

package/dist/core/store.cjs

@@ -2,26 +2,34 @@ const require_sticky = require("../color/sticky.cjs");
 //#region src/core/store.ts
 function createColorStore(initial) {
 	let state = initial;
+	let lastSource = "unknown";
 	const listeners = /* @__PURE__ */ new Set();
 	const commitListeners = /* @__PURE__ */ new Set();
-	function emit() {
-		for (const listener of Array.from(listeners)) listener(state);
+	function emit(source) {
+		for (const listener of Array.from(listeners)) listener(state, {
+			phase: "change",
+			source
+		});
 	}
-	function set(next) {
+	function set(next, source = "unknown") {
 		if (require_sticky.sameHsva(state, next)) return;
 		state = next;
-		emit();
+		lastSource = source;
+		emit(source);
 	}
 	return {
 		get: () => state,
 		set,
-		patch: (partial) => set({
+		patch: (partial, source) => set({
 			...state,
 			...partial
-		}),
-		ingest: (next) => set(require_sticky.ingest(next, state)),
-		commit: () => {
-			for (const listener of Array.from(commitListeners)) listener(state);
+		}, source),
+		ingest: (next, source) => set(require_sticky.ingest(next, state), source),
+		commit: (source = lastSource) => {
+			for (const listener of Array.from(commitListeners)) listener(state, {
+				phase: "commit",
+				source
+			});
 		},
 		subscribe: (listener) => {
 			listeners.add(listener);

package/dist/core/store.d.cts

@@ -1,13 +1,13 @@
-import { Hsva } from "../color/types.cjs";
+import { ColorChangeMeta, ColorChangeSource, Hsva } from "../color/types.cjs";
 //#region src/core/store.d.ts
-export type ColorListener = (color: Hsva) => void;
+export type ColorListener = (color: Hsva, meta: ColorChangeMeta) => void;
 export type Unsubscribe = () => void;
 export interface ColorStore {
   get(): Hsva;
-  set(next: Hsva): void;
-  patch(partial: Partial<Hsva>): void;
-  ingest(next: Hsva): void;
-  commit(): void;
+  set(next: Hsva, source?: ColorChangeSource): void;
+  patch(partial: Partial<Hsva>, source?: ColorChangeSource): void;
+  ingest(next: Hsva, source?: ColorChangeSource): void;
+  commit(source?: ColorChangeSource): void;
   subscribe(listener: ColorListener): Unsubscribe;
   subscribeCommit(listener: ColorListener): Unsubscribe;
   getSnapshot(): Hsva;

package/dist/core/store.d.ts

@@ -1,13 +1,13 @@
-import { Hsva } from "../color/types.js";
+import { ColorChangeMeta, ColorChangeSource, Hsva } from "../color/types.js";
 //#region src/core/store.d.ts
-export type ColorListener = (color: Hsva) => void;
+export type ColorListener = (color: Hsva, meta: ColorChangeMeta) => void;
 export type Unsubscribe = () => void;
 export interface ColorStore {
   get(): Hsva;
-  set(next: Hsva): void;
-  patch(partial: Partial<Hsva>): void;
-  ingest(next: Hsva): void;
-  commit(): void;
+  set(next: Hsva, source?: ColorChangeSource): void;
+  patch(partial: Partial<Hsva>, source?: ColorChangeSource): void;
+  ingest(next: Hsva, source?: ColorChangeSource): void;
+  commit(source?: ColorChangeSource): void;
   subscribe(listener: ColorListener): Unsubscribe;
   subscribeCommit(listener: ColorListener): Unsubscribe;
   getSnapshot(): Hsva;

package/dist/core/store.js

@@ -2,26 +2,34 @@ import { ingest, sameHsva } from "../color/sticky.js";
 //#region src/core/store.ts
 function createColorStore(initial) {
 	let state = initial;
+	let lastSource = "unknown";
 	const listeners = /* @__PURE__ */ new Set();
 	const commitListeners = /* @__PURE__ */ new Set();
-	function emit() {
-		for (const listener of Array.from(listeners)) listener(state);
+	function emit(source) {
+		for (const listener of Array.from(listeners)) listener(state, {
+			phase: "change",
+			source
+		});
 	}
-	function set(next) {
+	function set(next, source = "unknown") {
 		if (sameHsva(state, next)) return;
 		state = next;
-		emit();
+		lastSource = source;
+		emit(source);
 	}
 	return {
 		get: () => state,
 		set,
-		patch: (partial) => set({
+		patch: (partial, source) => set({
 			...state,
 			...partial
-		}),
-		ingest: (next) => set(ingest(next, state)),
-		commit: () => {
-			for (const listener of Array.from(commitListeners)) listener(state);
+		}, source),
+		ingest: (next, source) => set(ingest(next, state), source),
+		commit: (source = lastSource) => {
+			for (const listener of Array.from(commitListeners)) listener(state, {
+				phase: "commit",
+				source
+			});
 		},
 		subscribe: (listener) => {
 			listeners.add(listener);

package/dist/core.cjs

@@ -1,13 +1,18 @@
 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;
@@ -15,14 +20,19 @@ 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;

package/dist/core.d.cts

@@ -1,7 +1,9 @@
-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";
-export { ColorChangeResult, ColorFormat, type ColorListener, type ColorStore, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba, type Unsubscribe, clamp, clearNamedColors, createColorStore, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isValidColor, normalizeHue, parse, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };
+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/core.d.ts

@@ -1,7 +1,9 @@
-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";
-export { ColorChangeResult, ColorFormat, type ColorListener, type ColorStore, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba, type Unsubscribe, clamp, clearNamedColors, createColorStore, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isValidColor, normalizeHue, parse, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };
+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/core.js

@@ -1,6 +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";
-export { clamp, clearNamedColors, createColorStore, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, isValidColor, normalizeHue, parse, registerNamedColors, rgbaToHsva, roundRgba, sameHsva, sameRendered, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString };
+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/export/tokens.cjs

@@ -0,0 +1,39 @@
+const require_css4 = require("../color/css4.cjs");
+const require_value = require("../color/value.cjs");
+//#region src/export/tokens.ts
+function safeName(name) {
+	return name.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "color";
+}
+function formatColor(color, format) {
+	if (format === "preserve") return color;
+	const parsed = require_value.parseColor(color);
+	return parsed === null ? color : require_css4.serializeColor(parsed, {
+		format,
+		gamut: format === "display-p3" ? "display-p3" : "preserve"
+	});
+}
+function toCssVariables(tokens, options = {}) {
+	const prefix = safeName(options.prefix ?? "color");
+	const format = options.format ?? "preserve";
+	const lines = Object.entries(tokens).map(([name, color]) => `  --${prefix}-${safeName(name)}: ${formatColor(color, format)};`);
+	return `${options.selector ?? ":root"} {\n${lines.join("\n")}\n}`;
+}
+function toScssVariables(tokens, options = {}) {
+	const prefix = safeName(options.prefix ?? "color");
+	const format = options.format ?? "preserve";
+	return Object.entries(tokens).map(([name, color]) => `$${prefix}-${safeName(name)}: ${formatColor(color, format)};`).join("\n");
+}
+function toTailwindColors(tokens) {
+	return Object.fromEntries(Object.entries(tokens).map(([name, color]) => [safeName(name), color]));
+}
+function toDesignTokens(tokens) {
+	return Object.fromEntries(Object.entries(tokens).map(([name, color]) => [safeName(name), {
+		$type: "color",
+		$value: color
+	}]));
+}
+//#endregion
+exports.toCssVariables = toCssVariables;
+exports.toDesignTokens = toDesignTokens;
+exports.toScssVariables = toScssVariables;
+exports.toTailwindColors = toTailwindColors;

package/dist/export/tokens.d.cts

@@ -0,0 +1,16 @@
+import { ModernColorSpace } from "../color/types.cjs";
+//#region src/export/tokens.d.ts
+export type ColorTokenMap = Record<string, string>;
+export interface TokenExportOptions {
+  prefix?: string;
+  format?: ModernColorSpace | "preserve";
+  selector?: string;
+}
+export declare function toCssVariables(tokens: ColorTokenMap, options?: TokenExportOptions): string;
+export declare function toScssVariables(tokens: ColorTokenMap, options?: Omit<TokenExportOptions, "selector">): string;
+export declare function toTailwindColors(tokens: ColorTokenMap): Record<string, string>;
+export declare function toDesignTokens(tokens: ColorTokenMap): Record<string, {
+  $type: "color";
+  $value: string;
+}>;
+//#endregion

package/dist/export/tokens.d.ts

@@ -0,0 +1,16 @@
+import { ModernColorSpace } from "../color/types.js";
+//#region src/export/tokens.d.ts
+export type ColorTokenMap = Record<string, string>;
+export interface TokenExportOptions {
+  prefix?: string;
+  format?: ModernColorSpace | "preserve";
+  selector?: string;
+}
+export declare function toCssVariables(tokens: ColorTokenMap, options?: TokenExportOptions): string;
+export declare function toScssVariables(tokens: ColorTokenMap, options?: Omit<TokenExportOptions, "selector">): string;
+export declare function toTailwindColors(tokens: ColorTokenMap): Record<string, string>;
+export declare function toDesignTokens(tokens: ColorTokenMap): Record<string, {
+  $type: "color";
+  $value: string;
+}>;
+//#endregion