@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/primitives/color-picker/ColorPicker.js

@@ -0,0 +1,333 @@
+import { KeyBindingName, KeyBindingNameList, PANEL_PASSING_BINDINGS, isComposing, matchesShortcut } from "../../../utils/keyboard-shortcut/index.js";
+import { isEditableTarget } from "../../../utils/validation.js";
+import { onMounted, onUnmounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { nextTick } from "../../../r-html/dist/observable/scheduler.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { hasMoveKeys } from "../../../engine/modules/editor/state.js";
+import { toOpaqueHex } from "../../../utils/tableColor.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../icon/Icon.js";
+import { onNumberOnly, onStop } from "../../../utils/domEvent.js";
+import { focusEvent } from "../../../utils/internalEvents.js";
+import { hexToHsv, hsvToHex, hsvToRgb, isCompleteHexInput, parseChannelInput, parseHexInput, rgbToHsv, stepArea, stepHue } from "./colorModel.js";
+import { area, areaThumb, body, caption, clear, container, controls, field, fieldLabel, fields, hexField, hue, hueThumb, iconButton, input, panel, preview, swatch, swatchArea, swatches } from "./ColorPicker.styles.js";
+import { PRESET_COLORS } from "./presetColors.js";
+import { resolveColor } from "./resolveColor.js";
+import { clamp } from "es-toolkit";
+//#region src/components/primitives/color-picker/ColorPicker.tsx
+var DOCUMENT_COLOR_LIMIT = 8;
+var SWATCH_COLUMNS = 8;
+var FALLBACK_HSV = {
+	h: 0,
+	s: 1,
+	v: 1
+};
+var EYEDROPPER_DEAD_MS = 150;
+var TABBABLE = "[tabindex=\"0\"], input, button:not([tabindex=\"-1\"])";
+var getEyeDropper = () => globalThis.EyeDropper;
+var CHANNELS = [
+	{
+		field: "r",
+		label: "R",
+		titleKey: "colorPicker.channel.red"
+	},
+	{
+		field: "g",
+		label: "G",
+		titleKey: "colorPicker.channel.green"
+	},
+	{
+		field: "b",
+		label: "B",
+		titleKey: "colorPicker.channel.blue"
+	}
+];
+var CHANNEL_INDEX = {
+	r: 0,
+	g: 1,
+	b: 2
+};
+var ratioOf = (event) => {
+	const rect = event.currentTarget.getBoundingClientRect();
+	if (!rect.width || !rect.height) return null;
+	return {
+		x: clamp((event.clientX - rect.left) / rect.width, 0, 1),
+		y: clamp((event.clientY - rect.top) / rect.height, 0, 1)
+	};
+};
+var stepSwatch = (index, count, key) => {
+	switch (key) {
+		case "ArrowLeft": return Math.max(index - 1, 0);
+		case "ArrowRight": return Math.min(index + 1, count - 1);
+		case "ArrowUp": return index < SWATCH_COLUMNS ? index : index - SWATCH_COLUMNS;
+		case "ArrowDown": return index + SWATCH_COLUMNS < count ? index + SWATCH_COLUMNS : index;
+		case "Home": return 0;
+		case "End": return count - 1;
+		default: return null;
+	}
+};
+var ColorPicker = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	const container$1 = createRef();
+	const panel$1 = createRef();
+	const hue$1 = createRef();
+	const eyeDropperButton = createRef();
+	const EyeDropperApi = getEyeDropper();
+	const initial = resolveColor(props.color ?? "");
+	const start = initial ? hexToHsv(initial, FALLBACK_HSV) : FALLBACK_HSV;
+	const state = observable({
+		x: props.x,
+		y: props.y,
+		h: start.h,
+		s: start.s,
+		v: start.v,
+		empty: initial === null,
+		draft: null,
+		eyeDropper: Boolean(EyeDropperApi),
+		presetActive: 0,
+		documentActive: 0
+	});
+	let eyeDropperAbort = null;
+	const hsv = () => ({
+		h: state.h,
+		s: state.s,
+		v: state.v
+	});
+	const currentHex = () => state.empty ? null : hsvToHex(hsv());
+	const update = (next, discrete) => {
+		const before = currentHex();
+		state.h = next.h;
+		state.s = next.s;
+		state.v = next.v;
+		state.empty = false;
+		const hex = hsvToHex(next);
+		if (discrete || hex !== before) props.onChange?.(hex);
+	};
+	const shown = (field) => {
+		if (state.empty) return "";
+		return field === "hex" ? hsvToHex(hsv()).slice(1).toUpperCase() : String(hsvToRgb(hsv())[CHANNEL_INDEX[field]]);
+	};
+	const valueOf = (field) => state.draft?.field === field ? state.draft.text : shown(field);
+	const press = (apply) => (event) => {
+		if (event.button !== 0 || !event.isPrimary) return;
+		const el = event.currentTarget;
+		el.focus({ preventScroll: true });
+		el.setPointerCapture(event.pointerId);
+		const ratio = ratioOf(event);
+		if (ratio) apply(ratio, true);
+	};
+	const drag = (apply) => (event) => {
+		if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+		const ratio = ratioOf(event);
+		if (ratio) apply(ratio, false);
+	};
+	const applyArea = ({ x, y }, discrete) => update({
+		...hsv(),
+		s: x,
+		v: 1 - y
+	}, discrete);
+	const applyHue = ({ x }, discrete) => update({
+		...hsv(),
+		h: x * 360
+	}, discrete);
+	const handleAreaPointerdown = press(applyArea);
+	const handleAreaPointermove = drag(applyArea);
+	const handleHuePointerdown = press(applyHue);
+	const handleHuePointermove = drag(applyHue);
+	const stepWith = (event, step) => {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		const next = step();
+		if (!next) return;
+		event.preventDefault();
+		event.stopPropagation();
+		update(next, false);
+	};
+	const handleAreaKeydown = (event) => stepWith(event, () => stepArea(hsv(), event.key, event.shiftKey));
+	const handleHueKeydown = (event) => stepWith(event, () => {
+		const h = stepHue(state.h, event.key, event.shiftKey);
+		return h === null ? null : {
+			...hsv(),
+			h
+		};
+	});
+	const commit = (field) => {
+		const { draft } = state;
+		if (draft?.field === field && draft.text !== shown(field)) {
+			if (field === "hex") {
+				const hex = parseHexInput(draft.text) ?? resolveColor(draft.text);
+				if (hex) update(hexToHsv(hex, hsv()), true);
+			} else {
+				const value = parseChannelInput(draft.text);
+				if (value !== null) {
+					const rgb = hsvToRgb(hsv());
+					rgb[CHANNEL_INDEX[field]] = value;
+					update(rgbToHsv(rgb, hsv()), true);
+				}
+			}
+		}
+		state.draft = null;
+	};
+	const createFieldHandlers = (field) => ({
+		input: (event) => {
+			if (field !== "hex") onNumberOnly(event);
+			const text = event.target.value;
+			state.draft = {
+				field,
+				text
+			};
+			if (field === "hex" && isCompleteHexInput(text)) update(hexToHsv(parseHexInput(text), hsv()), false);
+		},
+		change: () => commit(field),
+		keydown: (event) => {
+			if (event.key === "Enter" && !isComposing(event)) commit(field);
+		},
+		blur: () => {
+			state.draft = null;
+		}
+	});
+	const fieldHandlers = {
+		hex: createFieldHandlers("hex"),
+		r: createFieldHandlers("r"),
+		g: createFieldHandlers("g"),
+		b: createFieldHandlers("b")
+	};
+	const handleSwatchKeydown = (event) => {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		const group = event.currentTarget;
+		const buttons = Array.from(group.querySelectorAll("button"));
+		const index = buttons.indexOf(event.target);
+		const next = stepSwatch(index, buttons.length, event.key);
+		if (next === null) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (next === index) return;
+		buttons[next].focus();
+		buttons[next].click();
+	};
+	const handleEyeDropper = () => {
+		eyeDropperAbort?.abort();
+		const controller = new AbortController();
+		const { signal } = controller;
+		eyeDropperAbort = controller;
+		const started = performance.now();
+		new EyeDropperApi().open({ signal }).then(({ sRGBHex }) => {
+			const hex = toOpaqueHex(sRGBHex);
+			if (!signal.aborted && hex) update(hexToHsv(hex, hsv()), true);
+		}, (error) => {
+			const name = error?.name;
+			if (!(name === "OperationError" || name === "AbortError" && !signal.aborted && performance.now() - started < EYEDROPPER_DEAD_MS)) return;
+			const button = eyeDropperButton.value;
+			if ((button?.getRootNode())?.activeElement === button) hue$1.value.focus({ preventScroll: true });
+			state.eyeDropper = false;
+		});
+	};
+	const keepTabInside = (event) => {
+		const $panel = panel$1.value;
+		const controls = $panel.querySelectorAll(TABBABLE);
+		const first = controls[0];
+		const last = controls[controls.length - 1];
+		const { activeElement } = $panel.getRootNode();
+		if (!(event.shiftKey ? activeElement === first || activeElement === $panel : activeElement === last || Boolean(last.closest("[role=\"radiogroup\"]")?.contains(activeElement)))) return;
+		event.preventDefault();
+		(event.shiftKey ? last : first).focus();
+	};
+	const handleKeydown = (event) => {
+		const matches = (name) => matchesShortcut(event, props.keyBindingMap[name]);
+		if (isComposing(event)) {
+			event.stopPropagation();
+			return;
+		}
+		if (matches(KeyBindingName.stop)) {
+			event.preventDefault();
+			event.stopPropagation();
+			props.onClose?.();
+			return;
+		}
+		if (event.key === "Tab") keepTabInside(event);
+		const bound = KeyBindingNameList.some(matches);
+		if (!PANEL_PASSING_BINDINGS.some(matches) && (hasMoveKeys(event.key) || bound)) {
+			event.stopPropagation();
+			const buttonPress = event.target instanceof HTMLButtonElement && (event.key === " " || event.key === "Enter");
+			if (bound && !isEditableTarget(event.target) && !buttonPress) event.preventDefault();
+		}
+	};
+	const handleWheel = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const handleContextmenu = (event) => {
+		event.stopPropagation();
+		if (event.target.tagName !== "INPUT") event.preventDefault();
+	};
+	onMounted(() => {
+		const $container = container$1.value;
+		if (props.viewport) {
+			const rect = $container.getBoundingClientRect();
+			const width = props.x + rect.width;
+			const height = props.y + rect.height;
+			if (props.viewport.width < width) {
+				const x = props.viewport.width - rect.width;
+				if (0 <= x) state.x = x;
+			}
+			if (props.viewport.height < height) {
+				const y = props.viewport.height - rect.height;
+				if (0 <= y) state.y = y;
+			}
+		}
+		panel$1.value.focus({ preventScroll: true });
+	});
+	onUnmounted(() => {
+		eyeDropperAbort?.abort();
+		const host = ctx.host;
+		nextTick(() => {
+			host.dispatchEvent(focusEvent());
+		});
+	});
+	const renderSwatches = (groupLabel, swatches$1, activeKey) => {
+		const current = currentHex();
+		const checked = swatches$1.findIndex(({ color }) => color === current);
+		const roving = checked === -1 ? state[activeKey] : checked;
+		return html`<div class=${swatches} role="radiogroup" aria-label=${groupLabel} @keydown=${handleSwatchKeydown}>${swatches$1.map(({ color, label }, index) => html`<button class=${swatch} type="button" role="radio" aria-label=${label} aria-checked=${String(color === current)} title=${color.toUpperCase()} tabindex=${index === roving ? 0 : -1} style=${{ "background-color": color }} @click=${() => update(hexToHsv(color, hsv()), true)} @focus=${() => {
+			state[activeKey] = index;
+		}}></button>`)}</div>`;
+	};
+	return () => {
+		const { t } = i18n.value;
+		const { empty } = state;
+		const saturation = Math.round(state.s * 100);
+		const brightness = Math.round(state.v * 100);
+		const degrees = Math.round(state.h);
+		const documentColors = (props.documentColors ?? []).slice(0, DOCUMENT_COLOR_LIMIT).map((color) => ({
+			color,
+			label: color.toUpperCase()
+		}));
+		const presets = PRESET_COLORS.map(({ color, labelKey }) => ({
+			color,
+			label: t(labelKey)
+		}));
+		const noColor = t("colorPicker.noColor");
+		return html`<div class=${["color-picker", container]} .dir="ltr" style=${{
+			top: `${state.y}px`,
+			left: `${state.x}px`
+		}} ${ref(container$1)}><div class=${panel} role="dialog" aria-label=${t("common.color")} tabindex="-1" ${ref(panel$1)} @keydown=${handleKeydown} @wheel=${handleWheel} @contextmenu=${handleContextmenu} @touchstart=${onStop} @copy=${onStop} @paste=${onStop}><div class=${body}><div class=${area} role="slider" tabindex="0" aria-label=${t("colorPicker.saturationAndBrightness")} aria-roledescription=${t("colorPicker.slider2d")} aria-valuemin="0" aria-valuemax="100" aria-valuenow=${saturation} aria-valuetext=${empty ? noColor : t("colorPicker.areaValue", {
+			saturation,
+			brightness
+		})} style=${{ "background-color": hsvToHex({
+			h: state.h,
+			s: 1,
+			v: 1
+		}) }} @pointerdown=${handleAreaPointerdown} @pointermove=${handleAreaPointermove} @keydown=${handleAreaKeydown}><div class=${areaThumb} style=${{
+			left: `${state.s * 100}%`,
+			top: `${(1 - state.v) * 100}%`
+		}}></div></div><div class=${controls}>${state.eyeDropper ? html`<button class=${iconButton} type="button" aria-label=${t("colorPicker.eyeDropper")} title=${t("colorPicker.eyeDropper")} ${ref(eyeDropperButton)} @click=${handleEyeDropper}><${Icon} .name="pipette" .size=${16} /></button>` : null}<div class=${hue} role="slider" tabindex="0" aria-label=${t("colorPicker.hue")} aria-valuemin="0" aria-valuemax="360" aria-valuenow=${degrees} aria-valuetext=${empty ? noColor : t("colorPicker.degrees", { count: degrees })} ${ref(hue$1)} @pointerdown=${handleHuePointerdown} @pointermove=${handleHuePointermove} @keydown=${handleHueKeydown}><div class=${hueThumb} style=${{ left: `${state.h / 360 * 100}%` }}></div></div><div class=${preview} aria-hidden="true" style=${{ "background-color": currentHex() ?? "" }}></div></div></div><div class=${fields}><label class=${hexField}><input class=${input} type="text" aria-label="Hex" placeholder=${empty ? t("common.none") : ""} spellcheck="false" autocomplete="off" .value=${valueOf("hex")} @input=${fieldHandlers.hex.input} @change=${fieldHandlers.hex.change} @keydown=${fieldHandlers.hex.keydown} @blur=${fieldHandlers.hex.blur} /><span class=${fieldLabel} aria-hidden="true">Hex</span></label>${CHANNELS.map(({ field: field$1, label, titleKey }) => html`<label class=${field}><input class=${input} type="text" aria-label=${label} title=${t(titleKey)} inputmode="numeric" maxlength=${3} spellcheck="false" autocomplete="off" .value=${valueOf(field$1)} @input=${fieldHandlers[field$1].input} @change=${fieldHandlers[field$1].change} @keydown=${fieldHandlers[field$1].keydown} @blur=${fieldHandlers[field$1].blur} /><span class=${fieldLabel} aria-hidden="true">${label}</span></label>`)}</div><div class=${swatchArea}>${renderSwatches(t("colorPicker.presets"), presets, "presetActive")}${documentColors.length ? html`<div class=${caption} aria-hidden="true">${t("colorPicker.documentColors")}</div>${renderSwatches(t("colorPicker.documentColors"), documentColors, "documentActive")}` : null}</div>${props.onClear ? html`<button class=${clear} type="button" @click=${props.onClear}>${noColor}</button>` : null}</div></div>`;
+	};
+};
+//#endregion
+export { ColorPicker as default };

package/dist/components/primitives/color-picker/ColorPicker.styles.js

@@ -0,0 +1,219 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+import { fontSize1 } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/color-picker/ColorPicker.styles.ts
+var container = css`
+  position: absolute;
+`;
+var panel = css`
+  position: relative;
+  z-index: 2;
+  width: 220px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 4px;
+  background-color: var(--context-menu-background);
+  ${floatingShadow};
+  outline: none;
+  user-select: none;
+`;
+var body = css`
+  padding: 10px 10px 8px;
+`;
+var area = css`
+  position: relative;
+  height: 150px;
+  border-radius: 2px;
+  background-image:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, transparent);
+  cursor: crosshair;
+  touch-action: none;
+  forced-color-adjust: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var areaThumb = css`
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transform: translate(-5px, -5px);
+  box-shadow:
+    0 0 0 1.5px #fff,
+    0 0 1px 2px rgba(0, 0, 0, 0.4),
+    inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+`;
+var controls = css`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  margin-top: 4px;
+`;
+var iconButton = css`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var hue = css`
+  position: relative;
+  flex: 1;
+  height: 10px;
+  border-radius: 2px;
+  background-image: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 16.667%,
+    #0f0 33.333%,
+    #0ff 50%,
+    #00f 66.667%,
+    #f0f 83.333%,
+    #f00 100%
+  );
+  cursor: pointer;
+  touch-action: none;
+  forced-color-adjust: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -7px 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var hueThumb = css`
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  width: 4px;
+  border-radius: 1px;
+  transform: translateX(-2px);
+  background-color: #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+`;
+var preview = css`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px var(--context-menu-border);
+  forced-color-adjust: none;
+`;
+var fields = css`
+  display: flex;
+  gap: 6px;
+  padding: 0 10px 8px;
+`;
+var field = css`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+`;
+var hexField = css`
+  display: flex;
+  flex: 2;
+  flex-direction: column;
+  min-width: 58px;
+`;
+var input = css`
+  width: 100%;
+  height: 22px;
+  padding: 0 4px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 2px;
+  ${fontSize1};
+
+  &:focus {
+    border-color: var(--input-active);
+  }
+`;
+var fieldLabel = css`
+  margin-top: 2px;
+  text-align: center;
+  color: var(--foreground);
+  ${fontSize1};
+`;
+var swatchArea = css`
+  padding: 10px 10px 0;
+  border-top: 1px solid var(--context-menu-border);
+`;
+var swatches = css`
+  display: grid;
+  grid-template-columns: repeat(8, 16px);
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+var caption = css`
+  margin-bottom: 6px;
+  color: var(--foreground);
+  ${fontSize1};
+`;
+var swatch = css`
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 1px var(--context-menu-border);
+  forced-color-adjust: none;
+
+  &[aria-checked='true'] {
+    box-shadow:
+      inset 0 0 0 1px var(--context-menu-border),
+      0 0 0 2px var(--context-menu-background),
+      0 0 0 3px var(--gray-color-12);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 3px;
+  }
+`;
+var clear = css`
+  display: block;
+  width: 100%;
+  height: 28px;
+  padding: 0 12px;
+  border-top: 1px solid var(--context-menu-border);
+  border-radius: 0 0 3px 3px;
+  color: var(--foreground);
+  cursor: pointer;
+  ${fontSize1};
+
+  &:hover {
+    background-color: var(--context-menu-hover);
+    color: var(--active);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: -2px;
+  }
+`;
+//#endregion
+export { area, areaThumb, body, caption, clear, container, controls, field, fieldLabel, fields, hexField, hue, hueThumb, iconButton, input, panel, preview, swatch, swatchArea, swatches };

package/dist/components/primitives/color-picker/colorModel.js

@@ -0,0 +1,116 @@
+import { toOpaqueHex } from "../../../utils/tableColor.js";
+import { clamp } from "es-toolkit";
+//#region src/components/primitives/color-picker/colorModel.ts
+var COARSE_STEP = 10;
+var PAGE_STEP = 10;
+var HEX_DIGITS = /^[0-9a-f]+$/i;
+var COMPLETE_HEX = /^#?(?:[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var CHANNEL_DIGITS = /^\d{1,3}$/;
+function hsvToRgb({ h, s, v }) {
+	const f = (n) => {
+		const k = (n + h / 60) % 6;
+		return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
+	};
+	return [
+		f(5),
+		f(3),
+		f(1)
+	];
+}
+function rgbToHsv([r, g, b], previous) {
+	const max = Math.max(r, g, b);
+	const c = max - Math.min(r, g, b);
+	const s = max === 0 ? previous.s : c / max;
+	let h = previous.h;
+	if (c !== 0) {
+		if (max === r) h = 60 * ((g - b) / c % 6);
+		else if (max === g) h = 60 * ((b - r) / c + 2);
+		else h = 60 * ((r - g) / c + 4);
+		h = (h % 360 + 360) % 360;
+	}
+	return {
+		h,
+		s,
+		v: max / 255
+	};
+}
+function hsvToHex(hsv) {
+	return `#${hsvToRgb(hsv).map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}
+function hexToHsv(hex, previous) {
+	return rgbToHsv([
+		1,
+		3,
+		5
+	].map((offset) => parseInt(hex.slice(offset, offset + 2), 16)), previous);
+}
+function parseHexInput(text) {
+	const value = text.trim();
+	return toOpaqueHex(HEX_DIGITS.test(value) ? `#${value}` : value);
+}
+function isCompleteHexInput(text) {
+	return COMPLETE_HEX.test(text.trim());
+}
+function parseChannelInput(text) {
+	const value = text.trim();
+	return CHANNEL_DIGITS.test(value) ? Math.min(Number(value), 255) : null;
+}
+var toUnit = (percent) => clamp(percent, 0, 100) / 100;
+function stepArea(hsv, key, coarse) {
+	const step = coarse ? COARSE_STEP : 1;
+	const s = Math.round(hsv.s * 100);
+	const v = Math.round(hsv.v * 100);
+	switch (key) {
+		case "ArrowLeft": return {
+			...hsv,
+			s: toUnit(s - step)
+		};
+		case "ArrowRight": return {
+			...hsv,
+			s: toUnit(s + step)
+		};
+		case "ArrowDown": return {
+			...hsv,
+			v: toUnit(v - step)
+		};
+		case "ArrowUp": return {
+			...hsv,
+			v: toUnit(v + step)
+		};
+		case "PageDown": return {
+			...hsv,
+			v: toUnit(v - PAGE_STEP)
+		};
+		case "PageUp": return {
+			...hsv,
+			v: toUnit(v + PAGE_STEP)
+		};
+		case "Home": return {
+			...hsv,
+			s: 0
+		};
+		case "End": return {
+			...hsv,
+			s: 1
+		};
+		default: return null;
+	}
+}
+function stepHue(h, key, coarse) {
+	const step = coarse ? COARSE_STEP : 1;
+	const degrees = Math.round(h);
+	const hold = (value) => clamp(value, 0, 360);
+	switch (key) {
+		case "ArrowLeft":
+		case "ArrowDown": return hold(degrees - step);
+		case "ArrowRight":
+		case "ArrowUp": return hold(degrees + step);
+		case "PageDown": return hold(degrees - PAGE_STEP);
+		case "PageUp": return hold(degrees + PAGE_STEP);
+		case "Home": return 0;
+		case "End": return 360;
+		default: return null;
+	}
+}
+//#endregion
+export { hexToHsv, hsvToHex, hsvToRgb, isCompleteHexInput, parseChannelInput, parseHexInput, rgbToHsv, stepArea, stepHue };

package/dist/components/primitives/color-picker/presetColors.js

@@ -0,0 +1,25 @@
+import { Palette } from "../../../themes/radix-ui-theme.js";
+import { get } from "es-toolkit/compat";
+var PRESET_COLORS = [
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"teal",
+	"cyan",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"pink",
+	"crimson",
+	"brown",
+	"gray"
+].map((hue) => ({
+	color: get(Palette, [hue, `${hue}9`]),
+	labelKey: `colorPicker.preset.${hue}`
+}));
+//#endregion
+export { PRESET_COLORS };