Color Picker

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { Button } from '$lib/components/ui/button';
4	import { ChevronDown } from '@lucide/svelte';
5	import * as Popover from '$lib/components/ui/popover';
6	import * as Command from '$lib/components/ui/command';
7	import * as ButtonGroup from '$lib/components/ui/button-group';
8	import { Input } from '$lib/components/ui/input';
9
10	type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
11
12	let {
13		value = $bindable('#000000'),
14		class: className,
15		allowOpacity = false,
16		defaultFormat = 'hex',
17		formats = ['hex', 'rgb', 'hsl', 'oklch']
18	}: {
19		value?: string;
20		class?: string;
21		allowOpacity?: boolean;
22		defaultFormat?: ColorFormat;
23		formats?: ColorFormat[];
24	} = $props();
25
26	let h = $state(0);
27	let s = $state(0);
28	let v = $state(0);
29	let a = $state(1);
30	let activeFormat = $state<ColorFormat>(defaultFormat);
31	let isDragging = $state(false);
32
33	let sbRef: HTMLDivElement | undefined = $state();
34	let hueRef: HTMLDivElement | undefined = $state();
35	let alphaRef: HTMLDivElement | undefined = $state();
36	let formatOpen = $state(false);
37
38	$effect(() => {
39		if (!isDragging) {
40			const parsed = parseColor(value);
41			if (parsed) {
42				const currentStr = formatOutput(h, s, v, a, activeFormat);
43				const parsedStr = formatOutput(parsed.h, parsed.s, parsed.v, parsed.a, activeFormat);
44
45				if (currentStr !== parsedStr) {
46					h = parsed.h;
47					s = parsed.s;
48					v = parsed.v;
49					a = parsed.a;
50					if (value.startsWith('rgb')) activeFormat = 'rgb';
51					else if (value.startsWith('hsl')) activeFormat = 'hsl';
52					else if (value.startsWith('oklch')) activeFormat = 'oklch';
53					else activeFormat = 'hex';
54				}
55			}
56		}
57	});
58
59	function updateExternal() {
60		value = formatOutput(h, s, v, a, activeFormat);
61	}
62
63	function setFormat(fmt: ColorFormat) {
64		activeFormat = fmt;
65		updateExternal();
66		formatOpen = false;
67	}
68
69	function parseColor(str: string) {
70		str = str.trim().toLowerCase();
71		if (str.startsWith('#')) {
72			let hex = str.replace('#', '');
73			let r = 0,
74				g = 0,
75				b = 0,
76				alpha = 1;
77			if (hex.length === 3) {
78				r = parseInt(hex[0] + hex[0], 16);
79				g = parseInt(hex[1] + hex[1], 16);
80				b = parseInt(hex[2] + hex[2], 16);
81			} else if (hex.length === 6) {
82				r = parseInt(hex.substring(0, 2), 16);
83				g = parseInt(hex.substring(2, 4), 16);
84				b = parseInt(hex.substring(4, 6), 16);
85			} else if (hex.length === 8) {
86// … truncated