@witchcraft/ui 0.0.1 → 0.1.0

package/dist/runtime/components/LibColorPicker/LibColorPicker.vue

@@ -1,5 +1,6 @@
 <template>
-<div :id="id ?? fallbackId"
+<div
+	:id="id ?? fallbackId"
 	:aria-label="t('color-picker.aria')"
 	:class="twMerge(`color-picker
 			[--slider-size:calc(var(--spacing)_*_4)]
@@ -20,11 +21,12 @@
 		`,
 		border && `
 			border rounded-sm border-neutral-600
-		`
+		`,
+		($attrs as any)?.class
 	)"
 >
 	<div
-		:class="`picker
+		:class="`color-picker--all-picker
 			no-touch-action
 			w-full
 			aspect-square
@@ -33,7 +35,7 @@
 			rounded-sm
 			focus:border-accent-500
 		`"
-		@pointerdown="slider.pointerdown($event, 'picker')"
+		@pointerdown="slider.pointerdown($event, 'all')"
 		@pointerleave="slider.pointerleave($event)"
 	>
 		<canvas
@@ -43,8 +45,10 @@
 		<div
 			aria-live="assertive"
 			:aria-description="ariaDescription"
+			:aria-label="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.s}`"
 			:class="`
-					handle ${handleClasses}
+					color-picker--all-handle
+					${handleClasses}
 					border-[var(--fg)]
 					hover:shadow-black
 					active:shadow-black
@@ -53,15 +57,13 @@
 			:style="`
 					left: calc(${localColor.percent.s}% - var(--slider-size)/2);
 					top: calc(${localColor.percent.v}% - var(--slider-size)/2);
-					background: ${localColorStringOpaque};
+					background: ${asRgbaString};
 				`"
-			@keydown="slider.keydown($event, 'picker')"
-		>
-			<aria :value="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.s}`"/>
-		</div>
+			@keydown="slider.keydown($event, 'all')"
+		/>
 	</div>
 	<div
-		:class="`hue-slider ${sliderClasses}`"
+		:class="`color-picker--hue-slider ${sliderClasses}`"
 		@pointerdown="slider.pointerdown($event, 'hue')"
 	>
 		<canvas
@@ -76,7 +78,10 @@
 			:aria-label="t('color-picker.aria.hue')"
 			:aria-description="ariaDescription"
 			tabindex="0"
-			:class="`handle ${handleClasses} bg-neutral-50`"
+			:class="`
+				color-picker--hue-handle
+				${handleClasses}
+			`"
 			:style="`left: calc(${localColor.percent.h}% - var(--slider-size)/2)`"
 			@keydown="slider.keydown($event, 'hue')"
 		/>
@@ -84,8 +89,10 @@
 	<div
 		v-if="allowAlpha"
 
-		:class="`alpha-slider ${sliderClasses}`"
-		@keydown="slider.keydown($event, 'alpha')"
+		:class="`
+			color-picker--alpha-slider
+			${sliderClasses}
+		`"
 		@pointerdown="slider.pointerdown($event, 'alpha')"
 	>
 		<canvas
@@ -100,12 +107,13 @@
 			:aria-valuemax="100"
 			:aria-description="ariaDescription"
 			tabindex="0"
-			:class="`handle ${handleClasses} bg-neutral-50`"
+			:class="`color-picker--alpha-handle ${handleClasses}`"
 			:style="`left: calc(${localColor.percent.a}% - var(--slider-size)/2)`"
+			@keydown="slider.keydown($event, 'alpha')"
 		/>
 	</div>
-	<div class="color-group flex w-full flex-1 gap-2">
-		<div class=" color-wrapper
+	<div class="color-picker--footer flex w-full flex-1 gap-2">
+		<div class=" color-picker--preview-wrapper
 				bg-transparency-squares
 				relative
 				aspect-square
@@ -114,36 +122,47 @@
 				shadow-xs
 			"
 		>
-			<!-- <input class="color-input" :value="localColorString" @input="parseInput"> -->
-			<div class="color
+			<div class="
+					color-picker--footer--preview
 					size-full
 					rounded-full
 					border-2
 					border-neutral-600
 					dark:border-neutral-300
 				"
-				:style="`background:${localColorString}`"
+				:style="`background: ${asRgbaString}`"
 			/>
 		</div>
-		<div class="color-controls flex flex-1 items-center gap-2">
+		<div class="color-picker--input-group flex flex-1 items-center gap-2">
 			<slot name="input">
 				<lib-simple-input
-					class="w-full"
+					:valid="valid"
+					class="color-picker--input w-full"
 					:aria-label="label"
-					:model-value="localColorString"
+					v-model="localInputString"
 					@input="parseInput"
+					@blur="onBlurFixInvalidValue"
 				/>
-				<lib-button :aria-label="t('copy')" @click="copy()">
+				<lib-button class="color-picker--copy-button" :aria-label="t('copy')" @click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)">
 					<icon><i-fa6-regular-copy/></icon>
 				</lib-button>
 			</slot>
 		</div>
-		<!-- <lib-button @click="emits('update:modelValue', localColor.val)">Save</lib-button> -->
 	</div>
 	<slot name="buttons">
-		<div class="save-cancel-group flex w-full items-center justify-center gap-2">
-			<lib-button @click="save()">{{ t("save") }}</lib-button>
-			<lib-button @click="emits('cancel')">{{ t("cancel") }}</lib-button>
+		<div class="color-picker--save-cancel-group flex w-full items-center justify-center gap-2">
+			<lib-button
+				class="color-picker--save-button"
+				@click="save()"
+			>
+				{{ t("save") }}
+			</lib-button>
+			<lib-button
+				class="color-picker--cancel-button"
+				@click="emits('cancel')"
+			>
+				{{ t("cancel") }}
+			</lib-button>
 		</div>
 	</slot>
 </div>
@@ -152,11 +171,18 @@
 <script setup lang="ts">
 /* todo change to colorjsio for less dependencies */
 import { castType } from "@alanscodelog/utils/castType.js"
+import { clampNumber } from "@alanscodelog/utils/clampNumber.js"
 import { isArray } from "@alanscodelog/utils/isArray.js"
-import { colord } from "colord"
-import { computed, onMounted, type PropType, reactive, type Ref, ref, type UnwrapRef,watch } from "vue"
+import { unreachable } from "@alanscodelog/utils/unreachable.js"
+import Color from "colorjs.io"
+import { computed, onMounted, reactive, type Ref, ref, type UnwrapRef,useAttrs, watch } from "vue"
+
+import { safeConvertToHsva } from "./utils/safeConvertToHsva.js"
+import { safeConvertToRgba } from "./utils/safeConvertToRgba.js"
+import { toLowPrecisionRgbaString } from "./utils/toLowPrecisionRgbaString.js"
 
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import { copy } from "../../helpers/copy.js"
 import type { HsvaColor, RgbaColor } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
 import aria from "../Aria/Aria.vue"
@@ -169,6 +195,8 @@ defineOptions({
 	name: "lib-color-picker",
 })
 
+const $attrs = useAttrs()
+
 const t = useInjectedI18n()
 
 const sliderClasses = `
@@ -181,6 +209,7 @@ const sliderClasses = `
 `
 
 const handleClasses = `
+	handle
 	h-[var(--slider-size)]
 	w-[var(--slider-size)]
 	shadow-xs
@@ -194,37 +223,61 @@ const handleClasses = `
 	active:border-accent-500
 	hover:border-accent-500
 `
+const emits = defineEmits<{
+	(e: "save", val: RgbaColor): void
+	(e: "cancel"): void
+}>()
 
-
-const ariaDescription = t("color-picker.aria.description")
-
-const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
-
-const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<
-& LabelProps
+LabelProps
 & LinkableByIdProps
 & {
 	allowAlpha?: boolean
+	/**
+	 * The precision of the rgba string representation of the color. Defaults to 3. Extra trailing zeros are removed for a prettier number.
+	 *
+	 * Does not affect the number saved unless the user manually edits the color.
+	 *
+	 * Ignored if `customRepresentation` is set.
+	 */
+	stringPrecision?: number
+	/** Allows overriding the string representation of the color. Useful for using a different representation than rgba (e.g. hex). The fromStringToHsva part is rarely needed as the colorjs.io library can normally parse the color. Returning undefined signals an error. */
+	customRepresentation?: {
+		fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string
+		fromStringToHsva?: (string: string) => HsvaColor | undefined
+	}
 	border?: boolean
+	/** Modify what the user copies to the clipboard. */
 	copyTransform?: (val: HsvaColor, stringVal: string) => any
+	valid?: boolean
 }>(), {
 	allowAlpha: true,
 	border: true,
+	stringPrecision: 3,
 	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
+	customRepresentation: undefined,
+	valid: true,
 })
 
 
-const emits = defineEmits<{
-	(e: "save", val: RgbaColor): void
-	(e: "cancel"): void
-}>()
+const ariaDescription = t("color-picker.aria.description")
+const fallbackId = getFallbackId()
+
+const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
+const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
 
 const pickerEl = ref<HTMLCanvasElement | null>(null)
 const hueSliderEl = ref<HTMLCanvasElement | null>(null)
 const alphaSliderEl = ref<HTMLCanvasElement | null>(null)
 
-type Config = Record<string, { el: Ref<HTMLCanvasElement>, xKey?: keyof HsvaColor, yKey?: keyof HsvaColor, xSteps?: number, ySteps?: number }>
+type Config = Record<string, {
+	el: Ref<HTMLCanvasElement>
+	xKey?: keyof HsvaColor
+	yKey?: keyof HsvaColor
+	xSteps?: number
+	ySteps?: number
+}>
+
 const config: Config = {
 	hue: {
 		el: hueSliderEl as Ref<HTMLCanvasElement>,
@@ -236,7 +289,7 @@ const config: Config = {
 		xSteps: 1,
 		xKey: "a",
 	},
-	picker: {
+	all: {
 		el: pickerEl as Ref<HTMLCanvasElement>,
 		xSteps: 100,
 		ySteps: 100,
@@ -244,6 +297,7 @@ const config: Config = {
 		yKey: "v",
 	},
 }
+
 const localColor = reactive<Record<"percent" | "val", HsvaColor>>({
 	percent: {
 		h: 0, s: 0, v: 0, a: 0,
@@ -253,23 +307,33 @@ const localColor = reactive<Record<"percent" | "val", HsvaColor>>({
 	},
 })
 
-const localColorString = computed(() =>
-	colord(localColor.val).toRgbString(),
-)
-const localColorStringOpaque = computed(() =>
-	colord({ ...localColor.val, a: 1 }).toRgbString(),
-)
 
+const asRgba = computed(() => {
+	const rgba = safeConvertToRgba(localColor.val, props.allowAlpha)
+	if (!rgba) unreachable()
+	return rgba
+})
+const asRgbaString = computed(() => {
+	const rgba = asRgba.value
+	if (!rgba) unreachable()
+	return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+})
+const localColorString = computed(() => {
+	if (props.customRepresentation) {
+		return props.customRepresentation.fromHsvaToString({ ...localColor.val }, props.allowAlpha)
+	}
+	return toLowPrecisionRgbaString(asRgba.value, props.allowAlpha, props.stringPrecision)
+})
 
-const copy = (): void => {
-	if (navigator.clipboard) {
-		const text = props.copyTransform?.(localColor.val, localColorString.value)
-
-		navigator.clipboard.writeText(text).catch(() => { })
+const localInputString = ref(localColorString.value)
+// fixes the localInputString not updating when the user inputs an invalid value
+function onBlurFixInvalidValue() {
+	if (localInputString.value !== localColorString.value) {
+		localInputString.value = localColorString.value
 	}
 }
 
-const updatePicker = (el: HTMLCanvasElement, hue: number): void => {
+function updatePicker(el: HTMLCanvasElement, hue: number): void {
 	const ctx = el.getContext("2d")!
 	const { height, width } = el
 	ctx.clearRect(0, 0, width, height)
@@ -290,9 +354,9 @@ const updatePicker = (el: HTMLCanvasElement, hue: number): void => {
 	ctx.globalCompositeOperation = "source-over"
 }
 
-const updateSlider = (el: HTMLCanvasElement, stops: ((i: number) => string) | string[], length: number = 360): void => {
+function updateSlider(el: HTMLCanvasElement, stops: ((i: number) => string) | string[], length: number = 360): void {
 	const ctx = el.getContext("2d")!
-	const { height, width } = el// .getBoundingClientRect()
+	const { height, width } = el
 	ctx.clearRect(0, 0, width, height)
 
 	const end = isArray(stops) ? stops.length - 1 : length
@@ -301,6 +365,7 @@ const updateSlider = (el: HTMLCanvasElement, stops: ((i: number) => string) | st
 
 	for (let i = 0; i < end + 1; i++) {
 		const stop = stops instanceof Function ? stops(i) : stops[i]
+		if (stop === undefined) unreachable()
 		gradient.addColorStop(i / end, stop)
 	}
 
@@ -309,8 +374,7 @@ const updateSlider = (el: HTMLCanvasElement, stops: ((i: number) => string) | st
 }
 
 
-const getVal = (x: number, width: number, steps: number = 100, accuracy: number = 100, reverse = false): { val: number, percent: number } => {
-	// const stepWidth = width / (steps * accuracy)
+function getVal(x: number, width: number, steps: number = 100, accuracy: number = 100, reverse = false): { val: number, percent: number } {
 	const percent = (x / width)
 	const unrounded = percent * steps
 
@@ -320,53 +384,70 @@ const getVal = (x: number, width: number, steps: number = 100, accuracy: number
 	if (reverse) res.val = steps - val
 	return res
 }
+
 type Types = keyof UnwrapRef<Config>
 const elDragging = ref<Types | "">("")
 let dragging = false
 
-const moveHandle = (e: { clientX: number, clientY: number }, type: string) => {
-	const el = config[type].el.value
-	const { x, y, width, height } = el.getBoundingClientRect()
-
-	const info = config[type]
-	if (info.xKey !== undefined) {
-		let newPosX = e.clientX - x
-		newPosX = newPosX < 0 ? 0 : newPosX > width ? width : newPosX
-		const newX = getVal(newPosX, width, info.xSteps ?? 100)
-
-		localColor.percent[info.xKey] = newX.percent
-		localColor.val[info.xKey] = newX.val
-	}
+function moveHandle(e: { clientX: number, clientY: number }, type: string) {
+	requestAnimationFrame(() => {
+		if (type === "") return
+		const el = config[type]?.el.value
+		if (!el || !config[type]) return
+		const { x, y, width, height } = el.getBoundingClientRect()
+
+		const info = config[type]
+		if (info.xKey !== undefined) {
+			let newPosX = e.clientX - x
+			newPosX = newPosX < 0 ? 0 : newPosX > width ? width : newPosX
+			const newX = getVal(newPosX, width, info.xSteps ?? 100)
+
+			localColor.percent[info.xKey] = newX.percent
+			localColor.val[info.xKey] = newX.val
+		}
 
-	if (info.yKey !== undefined) {
-		let newPosY = e.clientY - y
-		newPosY = newPosY < 0 ? 0 : newPosY > height ? height : newPosY
-		const newY = getVal(newPosY, height, info.ySteps ?? 100, 100, true)
+		if (info.yKey !== undefined) {
+			let newPosY = e.clientY - y
+			newPosY = newPosY < 0 ? 0 : newPosY > height ? height : newPosY
+			const newY = getVal(newPosY, height, info.ySteps ?? 100, 100, true)
 
-		localColor.percent[info.yKey] = newY.percent
-		localColor.val[info.yKey] = newY.val
-	}
+			localColor.percent[info.yKey] = newY.percent
+			localColor.val[info.yKey] = newY.val
+		}
+	})
 }
 const slider = {
 	keydown: (e: KeyboardEvent, type: Types) => {
 		castType<HTMLElement | undefined>(e.target)
-		if (e.target?.getBoundingClientRect && ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(e.key)) {
-			e.preventDefault()
-			const { x, y, width, height } = e.target.getBoundingClientRect()
-			let xDiff = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0
-			let yDiff = e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0
-			if (e.shiftKey) {xDiff *= 10}
-			if (e.shiftKey) {yDiff *= 10}
-			moveHandle({ clientX: x + (width / 2) + xDiff, clientY: y + (height / 2) + yDiff }, type)
+		if (e.target?.getBoundingClientRect) {
+			if (["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(e.key)) {
+				e.preventDefault()
+				const { x, y, width, height } = e.target.getBoundingClientRect()
+				let xDiff = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0
+				let yDiff = e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0
+				if (e.shiftKey) {xDiff *= 10}
+				if (e.shiftKey) {yDiff *= 10}
+				moveHandle({ clientX: x + (width / 2) + xDiff, clientY: y + (height / 2) + yDiff }, type)
+			}
+			if (e.key === "Enter") {
+				e.preventDefault()
+				save()
+			}
 		}
 	},
 	pointerdown: (e: PointerEvent, type: Types) => {
+		const focusTargetClass = `#${props.id ?? fallbackId} .color-picker--${type}-handle`
+		const focusTarget = document.querySelector(focusTargetClass)
+		// allows enter to work when the user drags any slider as the even will be captured by the keydown listener
+		if (focusTarget instanceof HTMLElement) focusTarget.focus()
+
 		if (dragging) return
 		e.preventDefault()
 		elDragging.value = type
 		dragging = true
 		document.addEventListener("pointermove", slider.pointermove)
 		document.addEventListener("pointerup", slider.pointerup)
+		moveHandle(e, elDragging.value)
 	},
 	pointerleave: (e: PointerEvent) => {
 		if (dragging) {
@@ -374,75 +455,105 @@ const slider = {
 		}
 	},
 	pointermove: (e: PointerEvent) => {
-		if (dragging) {
-			e.preventDefault()
-			requestAnimationFrame(() => {
-				const type = elDragging.value
-				moveHandle(e, type)
-			})
-		}
+		e.preventDefault()
+		moveHandle(e, elDragging.value)
 	},
 	pointerup: (e: PointerEvent) => {
 		e.preventDefault()
-		elDragging.value = ""
 		dragging = false
+		elDragging.value = ""
 		document.removeEventListener("pointermove", slider.pointermove)
 		document.removeEventListener("pointerup", slider.pointerup)
 	},
 }
-const update = (_: HsvaColor, { updatePosition = true, updateValue = true }: { updatePosition?: boolean, updateValue?: boolean } = {}): void => {
+function updateSliders(_: HsvaColor): void {
 	if (alphaSliderEl.value) {
-		const hsl = colord(_)
-		const hsl0 = hsl.alpha(0).toHslString()
-		const hsl1 = hsl.alpha(1).toHslString()
-		updateSlider(alphaSliderEl.value, [hsl0, hsl1])
+		// https://colorjs.io/docs/output#get-a-displayable-css-color-value
+		const color = new Color("hsv", [_.h, _.s, _.v], _.a).to("hsl")
+		const hsl0 = color.clone()
+		hsl0.alpha = 0
+		const hsl1 = color.clone()
+		hsl1.alpha = 1
+		updateSlider(alphaSliderEl.value, [hsl0.toString(), hsl1.toString()])
 	}
 	updateSlider(hueSliderEl.value!, i => `hsl(${i} 100% 50%)`)
 	updatePicker(pickerEl.value!, _.h)
-	if (updatePosition) {
-		localColor.percent.h = Math.round((_.h / 360) * 10000) / 100
-		localColor.percent.s = _.s
-		localColor.percent.v = 100 - _.v
-		localColor.percent.a =
-			props.allowAlpha
-			? _.a !== undefined
-				? _.a * 100
-				: 1
+}
+
+function updateValueAndPosition(_: HsvaColor): void {
+	localColor.percent.h = Math.round((_.h / 360) * 10000) / 100
+	localColor.percent.s = _.s
+	localColor.percent.v = 100 - _.v
+	localColor.percent.a =
+		props.allowAlpha
+		? _.a !== undefined
+			? _.a * 100
 			: 1
-	}
-	if (updateValue) {
-		localColor.val = { ..._, a: props.allowAlpha ? _.a : 1 }
-	}
+		: 1
+	localColor.val = { ..._, a: props.allowAlpha ? _.a : 1 }
 }
 
-const parseInput = (e: Event): void => {
+function convertAndUpdateAll(rgba: RgbaColor) {
+	const hsva = safeConvertToHsva(rgba, props.allowAlpha)
+	if (!hsva) return
+	updateSliders(hsva)
+	updateValueAndPosition(hsva)
+}
+
+function save(): void {
+	const rgba = safeConvertToRgba(localColor.val, props.allowAlpha)
+	if (!rgba) return
+	// update(localColor.val, { updatePosition: false, updateValue: false })
+	$value.value = rgba
+	$tempValue.value = undefined
+	emits("save", rgba)
+}
+
+
+function parseInput(e: Event): void {
 	const val = (e.target as HTMLInputElement)?.value
-	if (val) {
-		const color = colord(val)
-		if (!color.isValid()) return
-		update(color.toHsv())
+	const converted = props.customRepresentation?.fromStringToHsva
+		? props.customRepresentation.fromStringToHsva(val)
+		: safeConvertToHsva(val, props.allowAlpha)
+	if (converted) {
+		updateSliders(converted)
+		updateValueAndPosition(converted)
 	}
 }
 
+
+let disableUpdateTempValue = false
+
 onMounted(() => {
-	const color = colord($value.value)
-	update(color.toHsv())
+	convertAndUpdateAll($value.value)
+	if ($tempValue.value !== undefined) {
+		convertAndUpdateAll($tempValue.value)
+	}
+
+	const handle = document.querySelector(`#${props.id ?? fallbackId} .color-picker--all-handle`)
+	if (handle instanceof HTMLElement) handle.focus()
 })
-watch(props, () => {
-	const color = colord($value.value)
-	update(color.toHsv())
+
+watch($value, () => {
+	convertAndUpdateAll($value.value)
 })
 
-watch(localColor, () => {
-	update(localColor.val, { updatePosition: false, updateValue: false })
+watch($tempValue, () => {
+	if ($tempValue.value !== undefined) {
+		disableUpdateTempValue = true
+		convertAndUpdateAll($tempValue.value)
+		setTimeout(() => { disableUpdateTempValue = false }, 0)
+	}
 })
 
-const save = (): void => {
-	const color = colord(localColor.val).toRgb()
-	update(localColor.val, { updatePosition: false, updateValue: false })
-	$value.value = color
-	emits("save", color)
-}
+watch(localColor, () => {
+	updateSliders(localColor.val)
+	localInputString.value = localColorString.value
+	if (disableUpdateTempValue) return
+	const rgba = safeConvertToRgba(localColor.val, props.allowAlpha)
+	if (!rgba) return
+	$tempValue.value = rgba
+})
 
 const invertColors = computed(() => !!(localColor.percent.v < 50 || (localColor.val.a === undefined || localColor.val.a < 0.5)))
 </script>

package/dist/runtime/components/LibColorPicker/utils/safeConvertToHsva.d.ts

@@ -0,0 +1,2 @@
+import type { HsvaColor, RgbaColor } from "../../../types/index.js.js";
+export declare function safeConvertToHsva(val: string | RgbaColor, allowAlpha: boolean): HsvaColor | undefined;

package/dist/runtime/components/LibColorPicker/utils/safeConvertToHsva.js

@@ -0,0 +1,18 @@
+import { clampNumber } from "@alanscodelog/utils/clampNumber.js";
+import Color from "colorjs.io";
+export function safeConvertToHsva(val, allowAlpha) {
+  try {
+    const color = typeof val === "string" ? new Color(val) : new Color("srgb", [val.r / 255, val.g / 255, val.b / 255], allowAlpha ? val.a : 1);
+    const hsv = color.hsv;
+    if (!hsv || hsv[1] === void 0 || hsv[2] === void 0) return void 0;
+    const final = {
+      h: clampNumber(hsv[0] ?? 0, 0, Number.MAX_SAFE_INTEGER),
+      s: clampNumber(hsv[1], 0, 100),
+      v: clampNumber(hsv[2], 0, 100),
+      a: clampNumber(allowAlpha ? color.alpha : 1, 0, 1)
+    };
+    return final;
+  } catch {
+    return void 0;
+  }
+}

package/dist/runtime/components/LibColorPicker/utils/safeConvertToRgba.d.ts

@@ -0,0 +1,2 @@
+import type { HsvaColor, RgbaColor } from "../../../types/index.js.js";
+export declare function safeConvertToRgba(val: string | HsvaColor, allowAlpha: boolean): RgbaColor | undefined;

package/dist/runtime/components/LibColorPicker/utils/safeConvertToRgba.js

@@ -0,0 +1,17 @@
+import { clampNumber } from "@alanscodelog/utils/clampNumber.js";
+import Color from "colorjs.io";
+export function safeConvertToRgba(val, allowAlpha) {
+  try {
+    const color = typeof val === "string" ? new Color(val) : new Color("hsv", [val.h, val.s, val.v], allowAlpha ? val.a : 1);
+    const rgb = color.srgb;
+    if (!rgb || rgb[0] === void 0 || rgb[1] === void 0 || rgb[2] === void 0) return void 0;
+    return {
+      r: clampNumber(rgb[0] / 1 * 255, 0, 255),
+      g: clampNumber(rgb[1] / 1 * 255, 0, 255),
+      b: clampNumber(rgb[2] / 1 * 255, 0, 255),
+      a: clampNumber(allowAlpha ? color.alpha : 1, 0, 1)
+    };
+  } catch {
+    return void 0;
+  }
+}

package/dist/runtime/components/LibColorPicker/utils/toLowPrecisionRgbaString.d.ts

@@ -0,0 +1,2 @@
+import type { RgbaColor } from "../../../main.lib.js.js";
+export declare function toLowPrecisionRgbaString(rgba: RgbaColor, withAlpha: boolean, precision: number): string;

package/dist/runtime/components/LibColorPicker/utils/toLowPrecisionRgbaString.js

@@ -0,0 +1,8 @@
+import { truncate } from "./truncate.js";
+export function toLowPrecisionRgbaString(rgba, withAlpha, precision) {
+  const r = truncate(rgba.r, precision);
+  const g = truncate(rgba.g, precision);
+  const b = truncate(rgba.b, precision);
+  const a = rgba.a !== void 0 ? truncate(rgba.a, precision) : void 0;
+  return withAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+}

package/dist/runtime/components/LibColorPicker/utils/truncate.d.ts

@@ -0,0 +1 @@
+export declare function truncate(val: number, precision: number): string;