chroma-panel 0.1.3 → 0.2.0

package/README.md

@@ -6,13 +6,14 @@
 [![docs](https://img.shields.io/badge/docs-chroma--panel.jscrate.dev-2d7ff9)](https://chroma-panel.jscrate.dev)
 [![license](https://img.shields.io/npm/l/chroma-panel?color=2d7ff9)](./LICENSE)
 
-# chroma-panel
+# chroma-panel — React color picker
 
-A React color picker component with the look and feel of the macOS color panel: a color wheel, sliders, palettes, color sampling from an image, and an eyedropper.
+A lightweight, accessible React color picker component with the look and feel of the macOS color panel. It includes a color wheel, precise RGB, HSL and HSV sliders, searchable swatches, image color sampling, opacity and an eyedropper—with zero runtime dependencies and TypeScript types included.
 
 **[Documentation and live demo](https://chroma-panel.jscrate.dev)** · [Quick start](https://chroma-panel.jscrate.dev/react/overview/quick-start) · [Comparison](https://chroma-panel.jscrate.dev/react/overview/comparison) · [FAQ](https://chroma-panel.jscrate.dev/react/overview/faq) · [Releases](https://chroma-panel.jscrate.dev/react/overview/releases)
 
 - Five ways to pick a color: a [wheel](https://chroma-panel.jscrate.dev/react/modes/wheel), [RGB, HSL and HSB sliders](https://chroma-panel.jscrate.dev/react/modes/sliders), [palettes](https://chroma-panel.jscrate.dev/react/modes/palettes), a [120-color pencil grid](https://chroma-panel.jscrate.dev/react/modes/pencils), and [sampling from an image](https://chroma-panel.jscrate.dev/react/modes/image)
+- Hex, RGB(A), HSL(A), HSB/HSV and opacity controls for exact color values
 - An [eyedropper](https://chroma-panel.jscrate.dev/react/utils/use-eyedropper) for grabbing a color from anywhere on screen, where the browser supports it
 - Drops into a [form](https://chroma-panel.jscrate.dev/react/handbook/forms) like an `<input>`, with `name`, `required` and `form.reset()`
 - [Accessible](https://chroma-panel.jscrate.dev/react/overview/accessibility): every color channel is a real range input, so keyboards and screen readers work
@@ -24,7 +25,7 @@ A React color picker component with the look and feel of the macOS color panel:
 npm install chroma-panel
 ```
 
-## Use it
+## React color picker example
 
 ```tsx
 import { useState } from 'react';
@@ -59,7 +60,7 @@ import { ChromaPanel } from 'chroma-panel';
 
 ## Pick colors from an image
 
-The image mode takes a dropped or chosen file and shows its dominant colors as swatches. The sampler behind it is exported too, for when you want the palette without the panel:
+The image mode takes a dropped or chosen file, shows its dominant colors as swatches, and lets you click an exact pixel through a zoom lens. The sampler behind it is exported too, for when you want the palette without the panel:
 
 ```ts
 import { extractPalette } from 'chroma-panel';
@@ -68,7 +69,7 @@ const { swatches } = await extractPalette(file, { maxColors: 8 });
 // [{ hex: '#3e5f8a', rgb: [62, 95, 138], population: 4213 }, ...]
 ```
 
-It takes a `File`, a `Blob` or an image URL, and downscales large images before reading them. More in the [image mode docs](https://chroma-panel.jscrate.dev/react/modes/image).
+It takes a `File`, a `Blob` or an image URL, validates safe size limits, and reads only a downscaled sampling surface. More in the [image mode docs](https://chroma-panel.jscrate.dev/react/modes/image).
 
 ## Smaller bundle
 
@@ -81,7 +82,7 @@ import 'chroma-panel/wheel';
 <ChromaPanel modes={['wheel']} />
 ```
 
-That is 14.1 kB instead of 22.2 kB. Every mode has its own entry point — see [entry points](https://chroma-panel.jscrate.dev/react/utils/entry-points).
+That is 13.0 kB instead of 20.6 kB. Every mode has its own entry point — see [entry points](https://chroma-panel.jscrate.dev/react/utils/entry-points).
 
 ## Theming
 
@@ -107,8 +108,8 @@ Measured as the increase in a real Vite production build, gzipped, with React ex
 
 | What you import | Added to your app |
 | --- | --- |
-| all five modes | 22.2 kB |
-| shell plus one mode | 14.1 kB |
+| all five modes | 19.3 kB |
+| shell plus one mode | 12.5 kB |
 
 `dependencies` is empty. `react` and `react-dom` are peer dependencies, so the copy already in your app is the one that gets used.
 

package/dist/components/ChromaPanel.cjs

@@ -32,7 +32,7 @@ function ChromaPanel(props) {
 		"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 = require_context.useStableId("cp");
@@ -131,7 +131,9 @@ function ChromaPanel(props) {
 		pencils,
 		showAlpha,
 		showEyedropper,
+		showCopyButton,
 		showRecentColors,
+		format,
 		recentColors: activeRecents,
 		onRecentColorsChange
 	}), [
@@ -141,6 +143,8 @@ function ChromaPanel(props) {
 		imageOptions,
 		showAlpha,
 		showEyedropper,
+		showCopyButton,
+		format,
 		showRecentColors,
 		activeRecents,
 		onRecentColorsChange

package/dist/components/ChromaPanel.d.cts

@@ -18,6 +18,7 @@ export interface ChromaPanelProps {
   format?: ColorFormat;
   showAlpha?: boolean;
   showEyedropper?: boolean;
+  showCopyButton?: boolean;
   showRecentColors?: boolean;
   recentColors?: string[];
   defaultRecentColors?: string[];

package/dist/components/ChromaPanel.d.ts

@@ -18,6 +18,7 @@ export interface ChromaPanelProps {
   format?: ColorFormat;
   showAlpha?: boolean;
   showEyedropper?: boolean;
+  showCopyButton?: boolean;
   showRecentColors?: boolean;
   recentColors?: string[];
   defaultRecentColors?: string[];

package/dist/components/ChromaPanel.js

@@ -30,7 +30,7 @@ function ChromaPanel(props) {
 		"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");
@@ -129,7 +129,9 @@ function ChromaPanel(props) {
 		pencils,
 		showAlpha,
 		showEyedropper,
+		showCopyButton,
 		showRecentColors,
+		format,
 		recentColors: activeRecents,
 		onRecentColorsChange
 	}), [
@@ -139,6 +141,8 @@ function ChromaPanel(props) {
 		imageOptions,
 		showAlpha,
 		showEyedropper,
+		showCopyButton,
+		format,
 		showRecentColors,
 		activeRecents,
 		onRecentColorsChange

package/dist/components/PanelFooter.cjs

@@ -13,6 +13,21 @@ 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;
@@ -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,6 +11,21 @@ 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;
@@ -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/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/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/modes/image/index.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_context = require("../../core/context.cjs");
+const require_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");
@@ -25,7 +26,9 @@ 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);
 	react.useEffect(() => {
 		if (preview === null && status === "idle") kept.delete(store);
 		else kept.set(store, {
@@ -91,8 +94,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);
+		store.commit();
+		setMessage("Color selected from image.");
+	};
 	const dragDepth = react.useRef(0);
 	const [dragging, setDragging] = react.useState(false);
 	const endDrag = () => {
@@ -145,18 +187,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,
@@ -173,6 +249,10 @@ function ImagePanel(props) {
 				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) => ({
 					color: s.hex,

package/dist/modes/image/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { usePanel } from "../../core/context.js";
+import { parse } from "../../color/parse.js";
 import { Icon, ImageIcon } from "../../primitives/icons.js";
 import { SwatchGrid } from "../../primitives/SwatchGrid.js";
 import { extractPalette } from "../../image/extract.js";
@@ -23,7 +24,9 @@ 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);
 	React.useEffect(() => {
 		if (preview === null && status === "idle") kept.delete(store);
 		else kept.set(store, {
@@ -89,8 +92,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 = parse(`rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`);
+		if (parsed === null) return;
+		store.ingest(parsed);
+		store.commit();
+		setMessage("Color selected from image.");
+	};
 	const dragDepth = React.useRef(0);
 	const [dragging, setDragging] = React.useState(false);
 	const endDrag = () => {
@@ -143,18 +185,52 @@ function ImagePanel(props) {
 				]
 			}) : /* @__PURE__ */ jsxs("div", {
 				className: "cp-image-preview",
-				children: [/* @__PURE__ */ jsx("img", {
-					src: preview,
-					alt: ""
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "cp-image-remove",
-					"aria-label": "Remove image",
-					title: "Remove image",
-					disabled,
-					onClick: clear,
-					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
-				})]
+				children: [
+					/* @__PURE__ */ 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__ */ 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__ */ jsx("button", {
+						type: "button",
+						className: "cp-image-remove",
+						"aria-label": "Remove image",
+						title: "Remove image",
+						disabled,
+						onClick: clear,
+						children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+					})
+				]
 			}),
 			/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
@@ -171,6 +247,10 @@ function ImagePanel(props) {
 				className: "cp-empty",
 				children: message
 			}),
+			preview !== null && status !== "error" && /* @__PURE__ */ jsx("p", {
+				className: "cp-image-hint",
+				children: "Click the image to pick an exact color."
+			}),
 			status === "ready" && /* @__PURE__ */ jsx(SwatchGrid, {
 				swatches: swatches.map((s) => ({
 					color: s.hex,

package/dist/modes/palettes/index.cjs

@@ -28,7 +28,7 @@ function PalettesPanel() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "cp-panel",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cp-field",
+			className: "cp-field cp-palette-search",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				className: "cp-field-label",
 				htmlFor: searchId,

package/dist/modes/palettes/index.js

@@ -26,7 +26,7 @@ function PalettesPanel() {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "cp-panel",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "cp-field",
+			className: "cp-field cp-palette-search",
 			children: [/* @__PURE__ */ jsx("label", {
 				className: "cp-field-label",
 				htmlFor: searchId,

package/dist/primitives/icons.cjs

@@ -72,6 +72,14 @@ const ICONS = {
 		"M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"
 	],
 	x: ["M18 6 6 18", "m6 6 12 12"],
+	copy: [[
+		"rect",
+		9,
+		9,
+		11,
+		11,
+		2
+	], "M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3"],
 	pipette: [
 		"m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12",
 		"m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z",

package/dist/primitives/icons.d.cts

@@ -1,6 +1,6 @@
 import * as React from "react";
 //#region src/primitives/icons.d.ts
-export type IconName = "palette" | "sliders" | "swatches" | "image" | "brush" | "pipette" | "x";
+export type IconName = "palette" | "sliders" | "swatches" | "image" | "brush" | "pipette" | "copy" | "x";
 export interface IconProps {
   name: IconName;
   className?: string;

package/dist/primitives/icons.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 //#region src/primitives/icons.d.ts
-export type IconName = "palette" | "sliders" | "swatches" | "image" | "brush" | "pipette" | "x";
+export type IconName = "palette" | "sliders" | "swatches" | "image" | "brush" | "pipette" | "copy" | "x";
 export interface IconProps {
   name: IconName;
   className?: string;

package/dist/primitives/icons.js

@@ -70,6 +70,14 @@ const ICONS = {
 		"M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"
 	],
 	x: ["M18 6 6 18", "m6 6 12 12"],
+	copy: [[
+		"rect",
+		9,
+		9,
+		11,
+		11,
+		2
+	], "M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3"],
 	pipette: [
 		"m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12",
 		"m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z",

package/dist/style.css

@@ -1,2 +1,2 @@
 /* chroma-panel — see https://www.npmjs.com/package/chroma-panel */
-@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}
+@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-palette-search{flex:none}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-icon-button[data-cp-copy-status="copied"]{color:light-dark(#177245,#72d5a3);border-color:currentColor}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain;cursor:crosshair}.cp-image-preview img:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-3px}.cp-image-loupe{position:absolute;z-index:2;pointer-events:none;width:42px;height:42px;translate:-50% -50%;border:2px solid #fff;border-radius:50%;background-repeat:no-repeat;background-size:400% 400%;box-shadow:0 1px 5px rgb(0 0 0 / 55%),inset 0 0 0 1px rgb(0 0 0 / 35%)}.cp-image-loupe::after{content:"";position:absolute;inset:50% auto auto 50%;width:4px;height:4px;translate:-50% -50%;border:1px solid #fff;box-shadow:0 0 0 1px #000}.cp-image-hint{margin:-3px 0 0;color:var(--cp-text-muted);font-size:10px;text-align:center}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}

package/dist/styles/css.cjs

@@ -1,4 +1,4 @@
 //#region src/styles/css.ts
-const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
+const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-palette-search{flex:none}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-icon-button[data-cp-copy-status="copied"]{color:light-dark(#177245,#72d5a3);border-color:currentColor}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain;cursor:crosshair}.cp-image-preview img:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-3px}.cp-image-loupe{position:absolute;z-index:2;pointer-events:none;width:42px;height:42px;translate:-50% -50%;border:2px solid #fff;border-radius:50%;background-repeat:no-repeat;background-size:400% 400%;box-shadow:0 1px 5px rgb(0 0 0 / 55%),inset 0 0 0 1px rgb(0 0 0 / 35%)}.cp-image-loupe::after{content:"";position:absolute;inset:50% auto auto 50%;width:4px;height:4px;translate:-50% -50%;border:1px solid #fff;box-shadow:0 0 0 1px #000}.cp-image-hint{margin:-3px 0 0;color:var(--cp-text-muted);font-size:10px;text-align:center}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
 //#endregion
 exports.css = css;

package/dist/styles/css.js

@@ -1,5 +1,5 @@
 //#region src/styles/css.ts
-const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
+const css = `@layer chroma-panel{.cp-root,.cp-sheet-root,.cp-popover{color-scheme:light dark;--cp-surface:light-dark(#ffffff,#191919);--cp-surface-raised:light-dark(#f4f4f6,#222222);--cp-surface-sunken:light-dark(#eaeaee,#111111);--cp-surface-overlay:light-dark(#ffffff,#222222);--cp-border:light-dark(#d6d6da,#3a3a3a);--cp-border-subtle:light-dark(rgb(0 0 0 / 9%),rgb(255 255 255 / 10%));--cp-text:light-dark(#1c1c1e,#ededed);--cp-text-muted:light-dark(#6b6b70,#a0a0a6);--cp-accent:light-dark(#2d7ff9,#4d94ff);--cp-focus:light-dark(#2d7ff9,#5b9cff);--cp-radius-lg:16px;--cp-radius:10px;--cp-radius-sm:7px;--cp-seg-pad:3px;--cp-ring-bleed:4px;--cp-thumb-size:18px;--cp-track-height:12px;--cp-control-height:32px;--cp-input-height:calc(var(--cp-control-height) + 2 * var(--cp-seg-pad));--cp-gap:12px;--cp-pad:14px;--cp-width:320px;--cp-disc-size:196px;--cp-panel-h:344px;--cp-h:0;--cp-s:0%;--cp-v:0%;--cp-a:1;--cp-hue-color:hsl(var(--cp-h) 100% 50%);--cp-checker-size:12px;--cp-checker:repeating-conic-gradient( light-dark(#00000014,#ffffff14) 0% 25%,transparent 0% 50%);--cp-elevation:light-dark( 0 0 0 1px rgb(0 0 0 / 6%),0 0 0 1px #3a3a3a ),light-dark( 0 10px 30px -6px rgb(0 0 0 / 18%),0 10px 24px -6px rgb(0 0 0 / 60%) ),light-dark( 0 2px 6px -2px rgb(0 0 0 / 10%),0 24px 48px -12px rgb(0 0 0 / 70%) )}.cp-root{box-sizing:border-box;width:var(--cp-width);max-width:100%;padding:var(--cp-pad);display:flex;flex-direction:column;gap:var(--cp-gap);background:var(--cp-surface);color:var(--cp-text);border-radius:var(--cp-radius-lg);box-shadow:0 0 0 1px var(--cp-border-subtle);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.cp-root[data-cp-theme="light"],.cp-sheet-root:has(.cp-root[data-cp-theme="light"]){color-scheme:light}.cp-root[data-cp-theme="dark"],.cp-sheet-root:has(.cp-root[data-cp-theme="dark"]){color-scheme:dark}.cp-root *,.cp-root *::before,.cp-root *::after{box-sizing:border-box}.cp-root[data-cp-disabled="true"]{opacity:0.5;pointer-events:none}.cp-titlebar{display:flex;align-items:center;gap:8px;min-height:13px;--cp-light-size:14px;--cp-light-gap:10px}.cp-lights{display:flex;gap:var(--cp-light-gap)}.cp-light{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--cp-light-size);height:var(--cp-light-size);padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;color:rgb(0 0 0 / 62%)}.cp-light[data-cp-light="close"]{background:#ff5f57}.cp-light[data-cp-light="min"]{background:#febc2e}.cp-light[data-cp-light="max"]{background:#28c840}.cp-light[disabled]{opacity:0.42;cursor:default}.cp-light:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-light-glyph{width:8px;height:8px;display:block;opacity:0;transition:opacity 100ms ease}.cp-titlebar:hover .cp-light:not([disabled]) .cp-light-glyph,.cp-light:focus-visible .cp-light-glyph{opacity:1}.cp-titlebar-spacer{flex:none;width:calc(3 * var(--cp-light-size) + 2 * var(--cp-light-gap))}.cp-title{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--cp-text-muted)}.cp-body{display:flex;flex-direction:column;gap:var(--cp-gap);min-width:0;flex:1 1 auto;min-height:0}.cp-root[data-cp-collapsed="true"] .cp-body{display:none}.cp-root[data-cp-size="expanded"]{--cp-width:420px;--cp-disc-size:260px;--cp-panel-h:372px}.cp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;isolation:isolate;padding:var(--cp-seg-pad);border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-seg::before{content:"";position:absolute;z-index:-1;top:var(--cp-seg-pad);bottom:var(--cp-seg-pad);left:var(--cp-seg-pad);width:calc((100% - 2 * var(--cp-seg-pad)) / var(--cp-seg-count,1));translate:calc(var(--cp-seg-active,0) * 100%) 0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:var(--cp-surface-overlay);box-shadow:0 1px 2px rgb(0 0 0 / 12%),0 0 0 1px var(--cp-border-subtle);transition:translate 180ms cubic-bezier(0.445,0.05,0.55,0.95)}.cp-seg-sm{--cp-radius:var(--cp-radius-sm);--cp-seg-pad:2px}.cp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--cp-control-height);padding:0 6px;border:0;border-radius:calc(var(--cp-radius) - var(--cp-seg-pad));background:transparent;color:var(--cp-text-muted);cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:color 120ms ease}.cp-tab:hover{color:var(--cp-text)}.cp-tab[aria-selected="true"]{color:var(--cp-text)}.cp-tab:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px}.cp-tab[disabled]{cursor:default}.cp-seg-sm .cp-tab{height:calc(var(--cp-control-height) - 8px);font-size:11px;letter-spacing:0.02em}.cp-tab svg{width:17px;height:17px;display:block}.cp-panel-host{display:flex;flex-direction:column;flex:1 1 var(--cp-panel-h);min-height:0;overflow-y:auto;overscroll-behavior:contain;--cp-bleed:calc(var(--cp-thumb-size) / 2 + 2px);padding-inline:var(--cp-bleed);margin-inline:calc(var(--cp-bleed) * -1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--cp-border) transparent}.cp-panel-host[data-cp-fade]{--cp-fade-t:0px;--cp-fade-b:0px;mask-image:linear-gradient(to bottom,transparent 0,#000 var(--cp-fade-t),#000 calc(100% - var(--cp-fade-b)),transparent 100%)}.cp-panel-host[data-cp-fade="start"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-t:18px}.cp-panel-host[data-cp-fade="end"],.cp-panel-host[data-cp-fade="both"]{--cp-fade-b:18px}.cp-panel-host::-webkit-scrollbar{width:8px}.cp-panel-host::-webkit-scrollbar-track{background:transparent}.cp-panel-host::-webkit-scrollbar-thumb{background:var(--cp-border);border-radius:4px;border:2px solid transparent;background-clip:content-box}.cp-root[data-cp-modes="1"] .cp-panel-host{flex-basis:auto}.cp-panel{display:flex;flex-direction:column;gap:var(--cp-gap);flex:1 1 auto;min-height:0}.cp-disc-wrap{display:flex;justify-content:center;padding:2px 0}.cp-disc{position:relative;width:min(100%,var(--cp-disc-size));aspect-ratio:1;border-radius:50%;cursor:crosshair;outline:none;background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient( #f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100% );box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}@supports (background:conic-gradient(in hsl longer hue,red,red)){.cp-disc{background:radial-gradient(circle closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(in hsl longer hue,red,red)}}.cp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:calc(1 - var(--cp-v) / 100%);pointer-events:none}.cp-disc:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-area{position:relative;width:100%;height:150px;border-radius:var(--cp-radius);cursor:crosshair;outline:none;background-color:var(--cp-hue-color);background-image:linear-gradient(to top,#000,rgb(0 0 0 / 0)),linear-gradient(to right,#fff,rgb(255 255 255 / 0));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%)}.cp-area:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-thumb{position:absolute;left:var(--cp-thumb-x,50%);top:var(--cp-thumb-y,50%);width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin:calc(var(--cp-thumb-size) / -2) 0 0 calc(var(--cp-thumb-size) / -2);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgb(0 0 0 / 16%),0 1px 3px rgb(0 0 0 / 30%),0 0 0 1px rgb(0 0 0 / 12%);pointer-events:none}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-label{width:14px;flex:none;text-align:center;color:var(--cp-text-muted);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.cp-slider{position:relative;flex:1;height:var(--cp-track-height);border-radius:calc(var(--cp-track-height) / 2);cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-slider:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:3px}.cp-slider-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(to right,#f00 0%,#ff0 16.6667%,#0f0 33.3333%,#0ff 50%,#00f 66.6667%,#f0f 83.3333%,#f00 100%)}@supports (background:linear-gradient(in hsl longer hue,red,red)){.cp-slider[data-cp-channel="hue"] .cp-slider-fill{background:linear-gradient(in hsl longer hue to right,red,red)}}.cp-slider .cp-thumb{top:50%}.cp-swatch,.cp-preview,.cp-trigger,.cp-slider[data-cp-channel="alpha"]{background-image:var(--cp-checker);background-size:var(--cp-checker-size) var(--cp-checker-size)}.cp-fields{display:flex;gap:8px;align-items:flex-end}.cp-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cp-palette-search{flex:none}.cp-field-label{color:var(--cp-text-muted);font-size:11px;font-weight:500}.cp-input{width:100%;min-width:0;height:var(--cp-input-height);padding:0 8px;background:var(--cp-surface-sunken);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-input:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-1px;border-color:transparent}.cp-input[aria-invalid="true"]{border-color:#e5484d}.cp-input::-webkit-outer-spin-button,.cp-input::-webkit-inner-spin-button{appearance:none;margin:0}.cp-input[type="number"]{appearance:textfield;-moz-appearance:textfield}.cp-input[type="file"]{height:auto;padding:6px 8px;font-size:11px}.cp-swatch{position:relative;width:100%;aspect-ratio:1;padding:0;display:block;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 14%),rgb(255 255 255 / 16%));outline-offset:-1px}.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-swatch-color,transparent);box-shadow:inset 0 0 0 1px light-dark(rgb(255 255 255 / 22%),rgb(0 0 0 / 22%))}.cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-swatch[aria-pressed="true"]{outline:2px solid var(--cp-accent);outline-offset:2px}.cp-swatch-round,.cp-swatch-round::after{border-radius:50%}.cp-swatch-grid{display:grid;grid-template-columns:repeat(var(--cp-columns,10),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.cp-swatch-grid:not([data-cp-variant="mosaic"]){padding-block:var(--cp-ring-bleed)}.cp-swatch-grid>li{display:block;min-width:0}.cp-swatch-grid[data-cp-large="true"]>li{content-visibility:auto;contain-intrinsic-size:auto 28px}.cp-mosaic{padding:2px;border-radius:var(--cp-radius);background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-swatch-grid[data-cp-variant="mosaic"]{gap:0}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch{border-radius:0;outline:none;background-image:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch::after{box-shadow:none}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-2px;z-index:2}.cp-swatch-grid[data-cp-variant="mosaic"] .cp-swatch[aria-pressed="true"]{outline:3px solid var(--cp-surface);outline-offset:-1.5px;z-index:1}.cp-group{margin:0 0 12px}.cp-group:last-child{margin-bottom:0}.cp-group-title{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--cp-text-muted)}.cp-scroll{min-height:0}.cp-footer{display:flex;align-items:center;gap:10px;padding-top:var(--cp-gap);border-top:1px solid var(--cp-border-subtle)}.cp-footer-spacer{flex:1}.cp-preview{position:relative;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;border-radius:50%;outline:1px solid var(--cp-border-subtle);outline-offset:-1px}.cp-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-preview-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-recents{display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.cp-recents::-webkit-scrollbar{display:none}.cp-recents[data-cp-fade]{--cp-fade-s:0px;--cp-fade-e:0px;mask-image:linear-gradient(to right,transparent 0,#000 var(--cp-fade-s),#000 calc(100% - var(--cp-fade-e)),transparent 100%)}.cp-recents[data-cp-fade="start"],.cp-recents[data-cp-fade="both"]{--cp-fade-s:14px}.cp-recents[data-cp-fade="end"],.cp-recents[data-cp-fade="both"]{--cp-fade-e:14px}.cp-recents>li{flex:none}.cp-recents .cp-swatch{width:22px;height:22px}.cp-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--cp-control-height);height:var(--cp-control-height);flex:none;padding:0;background:var(--cp-surface-raised);color:var(--cp-text);border:1px solid var(--cp-border-subtle);border-radius:var(--cp-radius-sm);cursor:pointer;transition:background-color 120ms ease}.cp-icon-button:hover{background:var(--cp-border-subtle)}.cp-icon-button:focus-visible{outline:2px solid var(--cp-focus);outline-offset:1px}.cp-icon-button svg{width:16px;height:16px;display:block}.cp-icon-button[disabled]{opacity:0.4;cursor:default}.cp-icon-button[data-cp-copy-status="copied"]{color:light-dark(#177245,#72d5a3);border-color:currentColor}.cp-trigger{position:relative;width:36px;height:26px;padding:0;border:0;border-radius:var(--cp-radius-sm);cursor:pointer;background-color:transparent;outline:1px solid light-dark(rgb(0 0 0 / 18%),rgb(255 255 255 / 20%));outline-offset:-1px}.cp-trigger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cp-trigger-color,transparent);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-trigger:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-trigger[disabled]{opacity:0.5;cursor:default}.cp-popover{position:absolute;z-index:2147483000;margin:0;padding:0;border:0}.cp-popover .cp-root{box-shadow:var(--cp-elevation);max-height:var(--cp-available-h,none)}.cp-sheet-root{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end}.cp-scrim{position:absolute;inset:0;background:rgb(0 0 0 / 45%)}.cp-sheet{position:relative;width:100%;max-height:88svh;display:flex;flex-direction:column;overflow:hidden;background:var(--cp-surface);border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;box-shadow:0 -8px 32px rgb(0 0 0 / 35%);padding-bottom:max(8px,env(safe-area-inset-bottom))}.cp-grabber{width:36px;height:5px;flex:none;margin:8px auto 0;padding:0;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--cp-border);cursor:pointer}.cp-grabber:focus-visible{outline:2px solid var(--cp-focus);outline-offset:4px}.cp-grabber::after{content:"";position:absolute;left:50%;translate:-50% 0;margin-top:-14px;width:88px;height:32px}.cp-sheet{position:relative}.cp-dialog{display:flex;flex-direction:column;min-height:0;min-width:0}.cp-sheet>*,.cp-sheet .cp-dialog{min-height:0}.cp-sheet>.cp-dialog{flex:1 1 auto}.cp-sheet .cp-root{width:100%;max-width:none;border-radius:0;box-shadow:none;background:transparent;flex:1 1 auto;min-height:0}.cp-sheet .cp-lights{display:none}.cp-sheet .cp-titlebar{justify-content:center}.cp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.cp-empty{margin:0;color:var(--cp-text-muted);padding:20px 12px;text-align:center;font-size:12px;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.cp-dropzone{flex:1 1 auto;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;cursor:pointer;color:var(--cp-text-muted);font-size:12px;line-height:1.4;border:1px dashed var(--cp-border);border-radius:var(--cp-radius);background:transparent;transition:border-color 120ms ease,background-color 120ms ease}.cp-dropzone svg{width:26px;height:26px;opacity:0.65}.cp-dropzone-title{color:var(--cp-text);font-weight:550;font-size:12px}.cp-dropzone-hint{font-size:11px;opacity:0.8}.cp-dropzone:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}.cp-dropzone:has(:focus-visible){outline:2px solid var(--cp-focus);outline-offset:2px}.cp-dropzone[data-cp-dragging="true"]{border-color:var(--cp-accent);border-style:solid;background:color-mix(in srgb,var(--cp-accent) 10%,transparent);color:var(--cp-text)}.cp-root[data-cp-disabled="true"] .cp-dropzone{cursor:default}.cp-image-preview{position:relative;flex:1 1 auto;min-height:72px;display:flex;border-radius:var(--cp-radius);overflow:hidden;background:var(--cp-surface-sunken);box-shadow:inset 0 0 0 1px var(--cp-border-subtle)}.cp-image-preview img{width:100%;height:auto;max-height:100%;margin:auto;display:block;object-fit:contain;cursor:crosshair}.cp-image-preview img:focus-visible{outline:2px solid var(--cp-focus);outline-offset:-3px}.cp-image-loupe{position:absolute;z-index:2;pointer-events:none;width:42px;height:42px;translate:-50% -50%;border:2px solid #fff;border-radius:50%;background-repeat:no-repeat;background-size:400% 400%;box-shadow:0 1px 5px rgb(0 0 0 / 55%),inset 0 0 0 1px rgb(0 0 0 / 35%)}.cp-image-loupe::after{content:"";position:absolute;inset:50% auto auto 50%;width:4px;height:4px;translate:-50% -50%;border:1px solid #fff;box-shadow:0 0 0 1px #000}.cp-image-hint{margin:-3px 0 0;color:var(--cp-text-muted);font-size:10px;text-align:center}.cp-image-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;cursor:pointer;background:rgb(0 0 0 / 62%);color:#fff}.cp-image-remove:hover{background:rgb(0 0 0 / 78%)}.cp-image-remove:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}.cp-image-remove svg{width:13px;height:13px;display:block}}body:has(.cp-sheet-root[data-cp-open="true"]){overflow:hidden}@layer chroma-panel{@media (pointer:coarse){.cp-root{--cp-control-height:36px;--cp-thumb-size:22px;--cp-panel-h:350px}.cp-tab::after,.cp-icon-button::after,.cp-trigger::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}.cp-icon-button,.cp-trigger{position:relative}.cp-recents .cp-swatch{width:28px;height:28px}.cp-titlebar{--cp-light-size:20px;--cp-light-gap:10px}.cp-light-glyph{width:11px;height:11px}}@media (max-width:640px){.cp-root{--cp-width:100%;--cp-disc-size:240px;--cp-pad:16px}}@media (forced-colors:active){.cp-swatch,.cp-preview,.cp-trigger,.cp-disc,.cp-area,.cp-slider-fill{forced-color-adjust:none}.cp-swatch{border:1px solid CanvasText}.cp-swatch[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px}.cp-seg::before{border:1px solid CanvasText}.cp-tab[aria-selected="true"]{border:1px solid Highlight}.cp-root{border:1px solid CanvasText}}@media (prefers-reduced-motion:reduce){.cp-root *,.cp-root *::before,.cp-root *::after,.cp-seg::before{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}}`;
 //#endregion
 export { css };
 

package/package.json

@@ -1,34 +1,32 @@
 {
   "name": "chroma-panel",
-  "version": "0.1.3",
-  "description": "React color picker component with a color wheel, sliders, palettes, image sampling and an eyedropper. Accessible, zero dependencies, TypeScript included.",
+  "version": "0.2.0",
+  "description": "Accessible React color picker component with a color wheel, RGB, HSL and HSV sliders, palettes, image sampling and an eyedropper. Zero dependencies.",
   "keywords": [
+    "react color picker",
+    "react color picker component",
+    "react color picker library",
+    "react color picker npm",
+    "react hex color picker",
+    "react rgb color picker",
+    "react color wheel picker",
+    "color picker input react",
+    "color picker with opacity react",
+    "rgba color picker react",
+    "eyedropper color picker react",
+    "color swatch picker react",
+    "custom color picker react",
+    "react color picker typescript",
+    "react color picker tailwind css",
+    "accessible react color picker",
+    "lightweight react color picker",
+    "react color picker mobile",
     "react-color-picker",
     "color-picker",
-    "react",
-    "react-component",
-    "color",
-    "colorpicker",
     "colour-picker",
-    "color-input",
-    "color-wheel",
-    "color-palette",
     "image-color-picker",
     "eyedropper",
-    "palette",
-    "swatch",
-    "hex",
-    "rgb",
-    "rgba",
-    "hsl",
-    "hsv",
-    "hsva",
-    "accessible",
-    "a11y",
-    "typescript",
-    "zero-dependency",
-    "nextjs",
-    "macos"
+    "zero-dependency"
   ],
   "license": "MIT",
   "author": "Sohail Khan (https://me.jscrate.dev)",