chroma-panel 0.2.0 → 1.0.0

package/dist/gradient/GradientEditor.cjs

@@ -0,0 +1,196 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_model = require("./model.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/gradient/GradientEditor.tsx
+const DEFAULT_GRADIENT = {
+	type: "linear",
+	angle: 90,
+	stops: [{
+		id: "start",
+		color: "#7c3aed",
+		position: 0
+	}, {
+		id: "end",
+		color: "#06b6d4",
+		position: 100
+	}]
+};
+function GradientEditor(props) {
+	const { value, defaultValue = DEFAULT_GRADIENT, onChange, onChangeComplete, disabled = false, minStops = 2, maxStops = 12, className, style, "aria-label": ariaLabel = "Gradient editor" } = props;
+	const [internal, setInternal] = react.useState(() => require_model.normalizeGradient(defaultValue));
+	const current = require_model.normalizeGradient(value ?? internal);
+	const currentRef = react.useRef(current);
+	currentRef.current = current;
+	const update = (next, complete = false) => {
+		const normalized = require_model.normalizeGradient(next);
+		currentRef.current = normalized;
+		if (value === void 0) setInternal(normalized);
+		onChange?.(normalized);
+		if (complete) onChangeComplete?.(normalized);
+	};
+	const patchStop = (id, patch, complete = false) => {
+		update({
+			...current,
+			stops: current.stops.map((stop) => stop.id === id ? {
+				...stop,
+				...patch
+			} : stop)
+		}, complete);
+	};
+	const addStop = () => {
+		if (current.stops.length >= maxStops) return;
+		const position = 50;
+		const id = `stop-${Date.now().toString(36)}`;
+		update({
+			...current,
+			stops: [...current.stops, {
+				id,
+				color: "#808080",
+				position
+			}]
+		}, true);
+	};
+	const removeStop = (id) => {
+		if (current.stops.length <= minStops) return;
+		update({
+			...current,
+			stops: current.stops.filter((stop) => stop.id !== id)
+		}, true);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		style,
+		"aria-label": ariaLabel,
+		"data-cp-gradient-editor": "",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "img",
+				"aria-label": `Gradient preview with ${current.stops.length} color stops`,
+				style: {
+					height: 48,
+					borderRadius: 8,
+					background: require_model.gradientToCss(current)
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					gap: 8,
+					paddingBlock: 8
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [
+					"Type",
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+						disabled,
+						value: current.type,
+						onChange: (event) => update({
+							...current,
+							type: event.currentTarget.value
+						}, true),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "linear",
+							children: "Linear"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "radial",
+							children: "Radial"
+						})]
+					})
+				] }), current.type === "linear" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [
+					"Angle",
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "number",
+						min: 0,
+						max: 359,
+						step: 1,
+						disabled,
+						value: current.angle ?? 90,
+						onChange: (event) => update({
+							...current,
+							angle: event.currentTarget.valueAsNumber
+						}),
+						onBlur: () => onChangeComplete?.(currentRef.current)
+					})
+				] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "list",
+				"aria-label": "Gradient color stops",
+				children: current.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+					disabled,
+					style: {
+						display: "flex",
+						gap: 8,
+						alignItems: "center",
+						border: 0,
+						padding: "8px 0",
+						margin: 0
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("legend", {
+							style: {
+								position: "absolute",
+								width: 1,
+								height: 1,
+								overflow: "hidden",
+								clipPath: "inset(50%)"
+							},
+							children: ["Stop ", index + 1]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "color",
+							value: /^#[0-9a-f]{6}$/i.test(stop.color) ? stop.color : "#000000",
+							"aria-label": `Stop ${index + 1} color`,
+							onChange: (event) => patchStop(stop.id, { color: event.currentTarget.value }),
+							onBlur: () => onChangeComplete?.(currentRef.current)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "text",
+							value: stop.color,
+							"aria-label": `Stop ${index + 1} CSS color`,
+							onChange: (event) => patchStop(stop.id, { color: event.currentTarget.value }),
+							onBlur: () => onChangeComplete?.(currentRef.current)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "range",
+							min: 0,
+							max: 100,
+							step: 1,
+							value: stop.position,
+							"aria-label": `Stop ${index + 1} position`,
+							"aria-valuetext": `${stop.position} percent`,
+							onChange: (event) => patchStop(stop.id, { position: event.currentTarget.valueAsNumber }),
+							onPointerUp: () => onChangeComplete?.(currentRef.current),
+							onKeyUp: (event) => {
+								if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") onChangeComplete?.(currentRef.current);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("output", {
+							"aria-live": "off",
+							children: [Math.round(stop.position), "%"]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							disabled: disabled || current.stops.length <= minStops,
+							onClick: () => removeStop(stop.id),
+							"aria-label": `Remove stop ${index + 1}`,
+							children: "Remove"
+						})
+					]
+				}, stop.id))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled: disabled || current.stops.length >= maxStops,
+				onClick: addStop,
+				children: "Add color stop"
+			})
+		]
+	});
+}
+//#endregion
+exports.GradientEditor = GradientEditor;

package/dist/gradient/GradientEditor.d.cts

@@ -0,0 +1,17 @@
+import { GradientValue } from "./model.cjs";
+import * as React from "react";
+//#region src/gradient/GradientEditor.d.ts
+export interface GradientEditorProps {
+  value?: GradientValue;
+  defaultValue?: GradientValue;
+  onChange?: (value: GradientValue) => void;
+  onChangeComplete?: (value: GradientValue) => void;
+  disabled?: boolean;
+  minStops?: number;
+  maxStops?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  "aria-label"?: string;
+}
+export declare function GradientEditor(props: GradientEditorProps): React.ReactElement;
+//#endregion

package/dist/gradient/GradientEditor.d.ts

@@ -0,0 +1,17 @@
+import { GradientValue } from "./model.js";
+import * as React from "react";
+//#region src/gradient/GradientEditor.d.ts
+export interface GradientEditorProps {
+  value?: GradientValue;
+  defaultValue?: GradientValue;
+  onChange?: (value: GradientValue) => void;
+  onChangeComplete?: (value: GradientValue) => void;
+  disabled?: boolean;
+  minStops?: number;
+  maxStops?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  "aria-label"?: string;
+}
+export declare function GradientEditor(props: GradientEditorProps): React.ReactElement;
+//#endregion

package/dist/gradient/GradientEditor.js

@@ -0,0 +1,195 @@
+"use client";
+import { gradientToCss, normalizeGradient } from "./model.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/gradient/GradientEditor.tsx
+const DEFAULT_GRADIENT = {
+	type: "linear",
+	angle: 90,
+	stops: [{
+		id: "start",
+		color: "#7c3aed",
+		position: 0
+	}, {
+		id: "end",
+		color: "#06b6d4",
+		position: 100
+	}]
+};
+function GradientEditor(props) {
+	const { value, defaultValue = DEFAULT_GRADIENT, onChange, onChangeComplete, disabled = false, minStops = 2, maxStops = 12, className, style, "aria-label": ariaLabel = "Gradient editor" } = props;
+	const [internal, setInternal] = React.useState(() => normalizeGradient(defaultValue));
+	const current = normalizeGradient(value ?? internal);
+	const currentRef = React.useRef(current);
+	currentRef.current = current;
+	const update = (next, complete = false) => {
+		const normalized = normalizeGradient(next);
+		currentRef.current = normalized;
+		if (value === void 0) setInternal(normalized);
+		onChange?.(normalized);
+		if (complete) onChangeComplete?.(normalized);
+	};
+	const patchStop = (id, patch, complete = false) => {
+		update({
+			...current,
+			stops: current.stops.map((stop) => stop.id === id ? {
+				...stop,
+				...patch
+			} : stop)
+		}, complete);
+	};
+	const addStop = () => {
+		if (current.stops.length >= maxStops) return;
+		const position = 50;
+		const id = `stop-${Date.now().toString(36)}`;
+		update({
+			...current,
+			stops: [...current.stops, {
+				id,
+				color: "#808080",
+				position
+			}]
+		}, true);
+	};
+	const removeStop = (id) => {
+		if (current.stops.length <= minStops) return;
+		update({
+			...current,
+			stops: current.stops.filter((stop) => stop.id !== id)
+		}, true);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style,
+		"aria-label": ariaLabel,
+		"data-cp-gradient-editor": "",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "img",
+				"aria-label": `Gradient preview with ${current.stops.length} color stops`,
+				style: {
+					height: 48,
+					borderRadius: 8,
+					background: gradientToCss(current)
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: 8,
+					paddingBlock: 8
+				},
+				children: [/* @__PURE__ */ jsxs("label", { children: [
+					"Type",
+					" ",
+					/* @__PURE__ */ jsxs("select", {
+						disabled,
+						value: current.type,
+						onChange: (event) => update({
+							...current,
+							type: event.currentTarget.value
+						}, true),
+						children: [/* @__PURE__ */ jsx("option", {
+							value: "linear",
+							children: "Linear"
+						}), /* @__PURE__ */ jsx("option", {
+							value: "radial",
+							children: "Radial"
+						})]
+					})
+				] }), current.type === "linear" && /* @__PURE__ */ jsxs("label", { children: [
+					"Angle",
+					" ",
+					/* @__PURE__ */ jsx("input", {
+						type: "number",
+						min: 0,
+						max: 359,
+						step: 1,
+						disabled,
+						value: current.angle ?? 90,
+						onChange: (event) => update({
+							...current,
+							angle: event.currentTarget.valueAsNumber
+						}),
+						onBlur: () => onChangeComplete?.(currentRef.current)
+					})
+				] })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "list",
+				"aria-label": "Gradient color stops",
+				children: current.stops.map((stop, index) => /* @__PURE__ */ jsxs("fieldset", {
+					disabled,
+					style: {
+						display: "flex",
+						gap: 8,
+						alignItems: "center",
+						border: 0,
+						padding: "8px 0",
+						margin: 0
+					},
+					children: [
+						/* @__PURE__ */ jsxs("legend", {
+							style: {
+								position: "absolute",
+								width: 1,
+								height: 1,
+								overflow: "hidden",
+								clipPath: "inset(50%)"
+							},
+							children: ["Stop ", index + 1]
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "color",
+							value: /^#[0-9a-f]{6}$/i.test(stop.color) ? stop.color : "#000000",
+							"aria-label": `Stop ${index + 1} color`,
+							onChange: (event) => patchStop(stop.id, { color: event.currentTarget.value }),
+							onBlur: () => onChangeComplete?.(currentRef.current)
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: stop.color,
+							"aria-label": `Stop ${index + 1} CSS color`,
+							onChange: (event) => patchStop(stop.id, { color: event.currentTarget.value }),
+							onBlur: () => onChangeComplete?.(currentRef.current)
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "range",
+							min: 0,
+							max: 100,
+							step: 1,
+							value: stop.position,
+							"aria-label": `Stop ${index + 1} position`,
+							"aria-valuetext": `${stop.position} percent`,
+							onChange: (event) => patchStop(stop.id, { position: event.currentTarget.valueAsNumber }),
+							onPointerUp: () => onChangeComplete?.(currentRef.current),
+							onKeyUp: (event) => {
+								if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") onChangeComplete?.(currentRef.current);
+							}
+						}),
+						/* @__PURE__ */ jsxs("output", {
+							"aria-live": "off",
+							children: [Math.round(stop.position), "%"]
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled: disabled || current.stops.length <= minStops,
+							onClick: () => removeStop(stop.id),
+							"aria-label": `Remove stop ${index + 1}`,
+							children: "Remove"
+						})
+					]
+				}, stop.id))
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: disabled || current.stops.length >= maxStops,
+				onClick: addStop,
+				children: "Add color stop"
+			})
+		]
+	});
+}
+//#endregion
+export { GradientEditor };
+

package/dist/gradient/model.cjs

@@ -0,0 +1,63 @@
+const require_convert = require("../color/convert.cjs");
+const require_css4 = require("../color/css4.cjs");
+const require_value = require("../color/value.cjs");
+//#region src/gradient/model.ts
+function normalizeGradient(value) {
+	const stops = value.stops.map((stop) => ({
+		...stop,
+		position: Number.isFinite(stop.position) ? require_convert.clamp(stop.position, 0, 100) : 0
+	})).sort((a, b) => a.position - b.position);
+	return {
+		...value,
+		angle: value.angle === void 0 ? void 0 : Number.isFinite(value.angle) ? (value.angle % 360 + 360) % 360 : 90,
+		stops
+	};
+}
+function gradientToCss(value, options = {}) {
+	const normalized = normalizeGradient(value);
+	return `${`${options.repeating ? "repeating-" : ""}${normalized.type}-gradient`}(${normalized.type === "linear" ? `${normalized.angle ?? 90}deg, ` : ""}${options.interpolation === void 0 ? "" : `in ${options.interpolation}, `}${normalized.stops.map((stop) => `${stop.color} ${stop.position}%`).join(", ")})`;
+}
+function sampleGradient(value, position, space = "oklab") {
+	const stops = normalizeGradient(value).stops;
+	if (stops.length === 0) return null;
+	const point = require_convert.clamp(position, 0, 100);
+	const rightIndex = stops.findIndex((stop) => stop.position >= point);
+	const right = stops[rightIndex === -1 ? stops.length - 1 : rightIndex];
+	const left = stops[Math.max(0, rightIndex === -1 ? stops.length - 1 : rightIndex - 1)];
+	const leftColor = require_value.parseColor(left.color);
+	const rightColor = require_value.parseColor(right.color);
+	if (leftColor === null || rightColor === null) return null;
+	const a = require_css4.convertColor(leftColor, space);
+	const b = require_css4.convertColor(rightColor, space);
+	const span = right.position - left.position;
+	const t = span <= 0 ? 0 : (point - left.position) / span;
+	return {
+		space,
+		channels: a.channels.map((channel, index) => {
+			if ((space === "oklch" || space === "lch") && index === 2) return (channel + ((b.channels[2] - channel + 540) % 360 - 180) * t + 360) % 360;
+			return channel + (b.channels[index] - channel) * t;
+		}),
+		alpha: a.alpha + (b.alpha - a.alpha) * t
+	};
+}
+function addGradientStop(value, position, id) {
+	const sampled = sampleGradient(value, position);
+	const color = sampled === null ? "#000000" : require_css4.serializeColor(require_css4.convertColor(sampled, "srgb"), { format: "srgb" });
+	return normalizeGradient({
+		...value,
+		stops: [...value.stops, {
+			id: id ?? `stop-${Date.now().toString(36)}`,
+			color,
+			position
+		}]
+	});
+}
+function isGradientColorSupported(color) {
+	return require_value.parseColor(color) !== null || require_css4.parseCss4Color(color) !== null;
+}
+//#endregion
+exports.addGradientStop = addGradientStop;
+exports.gradientToCss = gradientToCss;
+exports.isGradientColorSupported = isGradientColorSupported;
+exports.normalizeGradient = normalizeGradient;
+exports.sampleGradient = sampleGradient;

package/dist/gradient/model.d.cts

@@ -0,0 +1,23 @@
+import { ColorValue, ModernColorSpace } from "../color/types.cjs";
+//#region src/gradient/model.d.ts
+export type GradientType = "linear" | "radial";
+export interface GradientStop {
+  id: string;
+  color: string;
+  position: number;
+}
+export interface GradientValue {
+  type: GradientType;
+  angle?: number;
+  stops: readonly GradientStop[];
+}
+export interface GradientOptions {
+  interpolation?: ModernColorSpace;
+  repeating?: boolean;
+}
+export declare function normalizeGradient(value: GradientValue): GradientValue;
+export declare function gradientToCss(value: GradientValue, options?: GradientOptions): string;
+export declare function sampleGradient(value: GradientValue, position: number, space?: ModernColorSpace): ColorValue | null;
+export declare function addGradientStop(value: GradientValue, position: number, id?: string): GradientValue;
+export declare function isGradientColorSupported(color: string): boolean;
+//#endregion

package/dist/gradient/model.d.ts

@@ -0,0 +1,23 @@
+import { ColorValue, ModernColorSpace } from "../color/types.js";
+//#region src/gradient/model.d.ts
+export type GradientType = "linear" | "radial";
+export interface GradientStop {
+  id: string;
+  color: string;
+  position: number;
+}
+export interface GradientValue {
+  type: GradientType;
+  angle?: number;
+  stops: readonly GradientStop[];
+}
+export interface GradientOptions {
+  interpolation?: ModernColorSpace;
+  repeating?: boolean;
+}
+export declare function normalizeGradient(value: GradientValue): GradientValue;
+export declare function gradientToCss(value: GradientValue, options?: GradientOptions): string;
+export declare function sampleGradient(value: GradientValue, position: number, space?: ModernColorSpace): ColorValue | null;
+export declare function addGradientStop(value: GradientValue, position: number, id?: string): GradientValue;
+export declare function isGradientColorSupported(color: string): boolean;
+//#endregion

package/dist/gradient/model.js

@@ -0,0 +1,60 @@
+import { clamp } from "../color/convert.js";
+import { convertColor, parseCss4Color, serializeColor } from "../color/css4.js";
+import { parseColor } from "../color/value.js";
+//#region src/gradient/model.ts
+function normalizeGradient(value) {
+	const stops = value.stops.map((stop) => ({
+		...stop,
+		position: Number.isFinite(stop.position) ? clamp(stop.position, 0, 100) : 0
+	})).sort((a, b) => a.position - b.position);
+	return {
+		...value,
+		angle: value.angle === void 0 ? void 0 : Number.isFinite(value.angle) ? (value.angle % 360 + 360) % 360 : 90,
+		stops
+	};
+}
+function gradientToCss(value, options = {}) {
+	const normalized = normalizeGradient(value);
+	return `${`${options.repeating ? "repeating-" : ""}${normalized.type}-gradient`}(${normalized.type === "linear" ? `${normalized.angle ?? 90}deg, ` : ""}${options.interpolation === void 0 ? "" : `in ${options.interpolation}, `}${normalized.stops.map((stop) => `${stop.color} ${stop.position}%`).join(", ")})`;
+}
+function sampleGradient(value, position, space = "oklab") {
+	const stops = normalizeGradient(value).stops;
+	if (stops.length === 0) return null;
+	const point = clamp(position, 0, 100);
+	const rightIndex = stops.findIndex((stop) => stop.position >= point);
+	const right = stops[rightIndex === -1 ? stops.length - 1 : rightIndex];
+	const left = stops[Math.max(0, rightIndex === -1 ? stops.length - 1 : rightIndex - 1)];
+	const leftColor = parseColor(left.color);
+	const rightColor = parseColor(right.color);
+	if (leftColor === null || rightColor === null) return null;
+	const a = convertColor(leftColor, space);
+	const b = convertColor(rightColor, space);
+	const span = right.position - left.position;
+	const t = span <= 0 ? 0 : (point - left.position) / span;
+	return {
+		space,
+		channels: a.channels.map((channel, index) => {
+			if ((space === "oklch" || space === "lch") && index === 2) return (channel + ((b.channels[2] - channel + 540) % 360 - 180) * t + 360) % 360;
+			return channel + (b.channels[index] - channel) * t;
+		}),
+		alpha: a.alpha + (b.alpha - a.alpha) * t
+	};
+}
+function addGradientStop(value, position, id) {
+	const sampled = sampleGradient(value, position);
+	const color = sampled === null ? "#000000" : serializeColor(convertColor(sampled, "srgb"), { format: "srgb" });
+	return normalizeGradient({
+		...value,
+		stops: [...value.stops, {
+			id: id ?? `stop-${Date.now().toString(36)}`,
+			color,
+			position
+		}]
+	});
+}
+function isGradientColorSupported(color) {
+	return parseColor(color) !== null || parseCss4Color(color) !== null;
+}
+//#endregion
+export { addGradientStop, gradientToCss, isGradientColorSupported, normalizeGradient, sampleGradient };
+

package/dist/gradient.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_model = require("./gradient/model.cjs");
+const require_GradientEditor = require("./gradient/GradientEditor.cjs");
+exports.GradientEditor = require_GradientEditor.GradientEditor;
+exports.addGradientStop = require_model.addGradientStop;
+exports.gradientToCss = require_model.gradientToCss;
+exports.isGradientColorSupported = require_model.isGradientColorSupported;
+exports.normalizeGradient = require_model.normalizeGradient;
+exports.sampleGradient = require_model.sampleGradient;

package/dist/gradient.d.cts

@@ -0,0 +1,3 @@
+import { GradientOptions, GradientStop, GradientType, GradientValue, addGradientStop, gradientToCss, isGradientColorSupported, normalizeGradient, sampleGradient } from "./gradient/model.cjs";
+import { GradientEditor, GradientEditorProps } from "./gradient/GradientEditor.cjs";
+export { GradientEditor, type GradientEditorProps, type GradientOptions, type GradientStop, type GradientType, type GradientValue, addGradientStop, gradientToCss, isGradientColorSupported, normalizeGradient, sampleGradient };

package/dist/gradient.d.ts

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

package/dist/gradient.js

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