@finsweet/webflow-apps-utils 1.0.9 → 1.0.10

package/dist/ui/components/LoadingScreen.svelte

@@ -10,10 +10,14 @@
 	export let raw = false;
 	export let backgroundColor = 'rgba(30, 30, 30, 0.96)';
 	export let spinnerSize = 50;
+	export let className: string = '';
 </script>
 
 {#if active}
-	<div class="loading-screen" style="position:{position}; background-color: {backgroundColor};">
+	<div
+		class="main-loader {className}"
+		style="position:{position}; background-color: {backgroundColor};"
+	>
 		<div class="loading-info {error ? 'error' : ''}">
 			{#if error}
 				<WarningTriangleOutlineIcon />
@@ -32,7 +36,7 @@
 {/if}
 
 <style>
-	.loading-screen {
+	.main-loader {
 		top: 0;
 		bottom: 0;
 		left: 0;

package/dist/ui/components/LoadingScreen.svelte.d.ts

@@ -19,6 +19,7 @@ declare const LoadingScreen: $$__sveltets_2_IsomorphicComponent<{
     raw?: boolean;
     backgroundColor?: string;
     spinnerSize?: number;
+    className?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/ui/components/breakpoints/BreakpointItem.svelte

@@ -31,7 +31,7 @@
 		<Switch {disabled} bind:checked={enabled} onchange={handleSwitchChange} />
 	</div>
 
-	<div class="content" style="display: {enabled ? 'flex' : 'none'}">
+	<div class="breakpoint-content" style="display: {enabled ? 'flex' : 'none'}">
 		<slot />
 	</div>
 </div>
@@ -46,7 +46,7 @@
 		gap: var(--Spacing-8, 8px);
 		align-self: stretch;
 	}
-	.content {
+	.breakpoint-content {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;

package/dist/ui/components/color-picker/ColorPicker.stories.svelte

@@ -0,0 +1,42 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import ColorPicker from './ColorPicker.svelte';
+
+	let controlledColor = $state('#00ff00');
+	const handleChange = (color: string) => (controlledColor = color);
+
+	const { Story } = defineMeta({
+		title: 'UI/ColorPicker',
+		component: ColorPicker,
+		tags: ['autodocs'],
+		argTypes: {
+			color: {
+				control: { type: 'color' },
+				description: 'Selected color (hex string or writable store)'
+			},
+			onchange: { action: 'colorChanged' }
+		},
+		parameters: {
+			layout: 'centered',
+			viewport: {
+				defaultViewport: 'responsive'
+			}
+		},
+		args: {
+			color: '#ff0000',
+			onchange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="With Initial Color" args={{ color: '#00ff00' }} />
+
+<Story name="Store Controlled" args={{ color: controlledColor, onchange: handleChange }} />
+
+<Story name="Edge: Invalid Color" args={{ color: '#xyzxyz' }} />
+
+<Story name="Edge: No Color" args={{ color: undefined }} />

package/dist/ui/components/color-picker/ColorPicker.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ColorPicker from './ColorPicker.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorPicker = InstanceType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/ui/components/color-picker/ColorPicker.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import Tooltip from '../tooltip/Tooltip.svelte';
+	import ColorSelect from './ColorSelect.svelte';
+
+	let {
+		color = $bindable('#fff'),
+		onchange,
+		width = '80px'
+	} = $props<{
+		color?: string;
+		onchange?: (color: string) => void;
+		width?: string;
+	}>();
+
+	function normalizeHex(value: string): string {
+		let v = value.trim();
+
+		if (!v.startsWith('#')) v = `#${v}`;
+
+		return v.toUpperCase();
+	}
+
+	function isValidColor(value: string): boolean {
+		const hexRegex = /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+		return hexRegex.test(value.startsWith('#') ? value.slice(1) : value);
+	}
+
+	function handleInputPaste(event: ClipboardEvent) {
+		event.preventDefault();
+
+		const pastedText = event.clipboardData?.getData('text') || '';
+		let cleanText = pastedText.replace(/[^0-9A-Fa-f#]/g, '');
+		if (!cleanText.startsWith('#')) cleanText = '#' + cleanText;
+
+		cleanText = cleanText.substring(0, 9);
+
+		if (isValidColor(cleanText)) {
+			const normalizedValue = normalizeHex(cleanText);
+			color = normalizedValue;
+			onchange?.(normalizedValue);
+		}
+	}
+
+	function handleInputChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const value = target.value.trim();
+
+		if (isValidColor(value)) {
+			const normalizedValue = normalizeHex(value);
+
+			color = normalizedValue;
+
+			onchange?.(normalizedValue);
+		}
+	}
+
+	function handleInputKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			(event.target as HTMLInputElement).blur();
+		}
+	}
+
+	function handleColorChange(newColor: string) {
+		const normalizedValue = normalizeHex(newColor);
+
+		color = normalizedValue;
+		onchange?.(normalizedValue);
+	}
+</script>
+
+<div class="color-picker">
+	<Tooltip
+		listener="click"
+		listenerout="click"
+		showArrow={false}
+		padding="0"
+		stopPropagation={true}
+		width="241px"
+		placement="bottom"
+		fallbackPlacements={['top-end', 'top', 'bottom-end', 'bottom', 'top-start', 'bottom-start']}
+	>
+		{#snippet target()}
+			<div class="color-picker__swatch" data-testid="color-swatch">
+				<div class="color-swatch" style="background-color: {color || '#000000'}"></div>
+			</div>
+		{/snippet}
+		{#snippet tooltipContent()}
+			<ColorSelect {color} onchange={handleColorChange} />
+		{/snippet}
+	</Tooltip>
+
+	<input
+		type="text"
+		class="color-picker__input"
+		bind:value={color}
+		oninput={handleInputChange}
+		onkeydown={handleInputKeydown}
+		onpaste={handleInputPaste}
+		placeholder="#ffffff"
+		aria-label="Color hex value"
+		style="width: {width}"
+	/>
+</div>
+
+<style>
+	.color-picker {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		height: 24px;
+		border: 1px solid var(--border1);
+		border-radius: 4px;
+		overflow: hidden;
+		background: var(--background1);
+		box-shadow:
+			0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset,
+			0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset,
+			0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
+			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+	}
+
+	.color-picker__swatch {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		overflow: hidden;
+		cursor: pointer;
+	}
+
+	.color-swatch {
+		width: 100%;
+		height: 100%;
+	}
+
+	.color-picker__input {
+		width: 80px;
+		padding: 4px 8px 4px 0px;
+		border-radius: 4px;
+		font-family: monospace;
+		font-size: 12px;
+		border: none;
+		background: transparent;
+	}
+
+	.color-picker:has(.color-picker__input:focus) {
+		outline: none;
+		border-color: var(--blueBorder);
+	}
+
+	.color-picker:global(:has(.tooltip[aria-hidden='false'])) {
+		border-color: var(--blueBorder);
+	}
+</style>

package/dist/ui/components/color-picker/ColorPicker.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    color?: string;
+    onchange?: (color: string) => void;
+    width?: string;
+};
+declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "color">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/ui/components/color-picker/ColorSelect.stories.svelte

@@ -0,0 +1,61 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import ColorSelect from './ColorSelect.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/ColorSelect',
+		component: ColorSelect,
+		tags: ['autodocs'],
+		argTypes: {
+			color: {
+				control: { type: 'color' },
+				description: 'Initial color value (hex)'
+			},
+			onchange: { action: 'colorChanged' }
+		},
+		args: {
+			color: '#ff0000',
+			onchange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="With Initial Color" args={{ color: '#00ff00' }} />
+
+<Story
+	name="Alpha Channel"
+	args={{ color: '#0000ff' }}
+	story={{
+		parameters: {
+			docs: { description: { story: 'Shows alpha slider and allows changing opacity.' } }
+		}
+	}}
+/>
+
+<Story
+	name="HSB/RGB Toggle"
+	args={{ color: '#ff00ff' }}
+	story={{
+		parameters: {
+			docs: { description: { story: 'Toggle between HSB and RGB modes using the mode switch.' } }
+		}
+	}}
+/>
+
+<Story
+	name="With EyeDropper"
+	args={{ color: '#123456' }}
+	story={{
+		parameters: {
+			docs: {
+				description: {
+					story: 'Use the EyeDropper button to pick a color from the screen (if supported).'
+				}
+			}
+		}
+	}}
+/>

package/dist/ui/components/color-picker/ColorSelect.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default ColorSelect;
+type ColorSelect = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ColorSelect: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ColorSelect from './ColorSelect.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/components/color-picker/ColorSelect.svelte

@@ -0,0 +1,940 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let { color = $bindable('#fff'), onchange } = $props<{
+		color?: string;
+		onchange?: (color: string) => void;
+	}>();
+
+	function setColor(newColor: string) {
+		color = newColor;
+		onchange?.(newColor);
+	}
+
+	let hue = $state(0);
+	let saturation = $state(0);
+	let brightness = $state(0);
+	let alpha = $state(100);
+	let hexValue = $state(color);
+	let mode = $state<'HSB' | 'RGB'>('HSB');
+
+	// RGB values for RGB mode
+	let rgbRed = $state(0);
+	let rgbGreen = $state(0);
+	let rgbBlue = $state(0);
+
+	// DOM references
+	let colorWell: HTMLElement;
+	let colorPicker: HTMLElement;
+	let hueBar: HTMLElement;
+	let alphaBar: HTMLElement;
+
+	// Interaction state
+	let isDragging = $state(false);
+	let dragTarget = $state<'well' | 'hue' | 'alpha' | null>(null);
+
+	// Drag detection state
+	let dragStartPosition = $state<{ x: number; y: number } | null>(null);
+	const DRAG_THRESHOLD = 3; // pixels of movement before considering it a drag
+
+	// Color conversion utilities
+	function hsbToRgb(h: number, s: number, b: number): [number, number, number] {
+		h = h / 360;
+		s = s / 100;
+		b = b / 100;
+		const c = b * s;
+		const x = c * (1 - Math.abs(((h * 6) % 2) - 1));
+		const m = b - c;
+		let r = 0,
+			g = 0,
+			bl = 0;
+
+		if (0 <= h && h < 1 / 6) {
+			r = c;
+			g = x;
+			bl = 0;
+		} else if (1 / 6 <= h && h < 2 / 6) {
+			r = x;
+			g = c;
+			bl = 0;
+		} else if (2 / 6 <= h && h < 3 / 6) {
+			r = 0;
+			g = c;
+			bl = x;
+		} else if (3 / 6 <= h && h < 4 / 6) {
+			r = 0;
+			g = x;
+			bl = c;
+		} else if (4 / 6 <= h && h < 5 / 6) {
+			r = x;
+			g = 0;
+			bl = c;
+		} else if (5 / 6 <= h && h < 1) {
+			r = c;
+			g = 0;
+			bl = x;
+		}
+
+		return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((bl + m) * 255)];
+	}
+
+	function rgbToHex(r: number, g: number, b: number): string {
+		return (
+			'#' +
+			[r, g, b]
+				.map((x) => {
+					const hex = x.toString(16);
+					return hex.length === 1 ? '0' + hex : hex;
+				})
+				.join('')
+		);
+	}
+
+	function hexToHsb(hex: string): [number, number, number] {
+		// Handle different hex formats
+		let normalizedHex = hex;
+		if (hex.startsWith('#')) {
+			// Expand 3-digit hex to 6-digit
+			if (hex.length === 4) {
+				normalizedHex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+			}
+			// Remove alpha channel if present (8-digit hex)
+			if (hex.length === 9) {
+				normalizedHex = hex.substring(0, 7);
+			}
+		}
+
+		const r = parseInt(normalizedHex.slice(1, 3), 16) / 255;
+		const g = parseInt(normalizedHex.slice(3, 5), 16) / 255;
+		const b = parseInt(normalizedHex.slice(5, 7), 16) / 255;
+		const max = Math.max(r, g, b);
+		const min = Math.min(r, g, b);
+		const diff = max - min;
+		let h = 0;
+		let s = max === 0 ? 0 : diff / max;
+		let v = max;
+
+		if (diff !== 0) {
+			if (max === r) {
+				h = ((g - b) / diff) % 6;
+			} else if (max === g) {
+				h = (b - r) / diff + 2;
+			} else {
+				h = (r - g) / diff + 4;
+			}
+		}
+
+		h = Math.round(h * 60);
+		if (h < 0) h += 360;
+		return [h, Math.round(s * 100), Math.round(v * 100)];
+	}
+
+	// Color validation utility using CSS.supports()
+	function isValidColor(value: unknown): boolean {
+		// Ensure value is a string
+		if (typeof value !== 'string') {
+			return false;
+		}
+
+		// Handle hex colors specifically
+		if (value.startsWith('#')) {
+			// Check for valid hex format: #RGB, #RRGGBB, #RRGGBBAA
+			const hexRegex = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+			const result = hexRegex.test(value);
+			return result;
+		}
+
+		// For non-hex colors, only accept valid hex patterns (without #)
+		const hexRegex = /^([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+		const result = hexRegex.test(value);
+		return result;
+	}
+
+	function rgbToHsb(r: number, g: number, b: number): [number, number, number] {
+		return hexToHsb(rgbToHex(r, g, b));
+	}
+
+	// Update functions
+	function updateColor() {
+		let r, g, b;
+		if (mode === 'HSB') {
+			[r, g, b] = hsbToRgb(hue, saturation, brightness);
+		} else {
+			r = rgbRed;
+			g = rgbGreen;
+			b = rgbBlue;
+		}
+
+		hexValue = rgbToHex(r, g, b).toUpperCase();
+		setColor(hexValue);
+		updateColorPickerPosition();
+	}
+
+	function syncModeValues(newMode: 'HSB' | 'RGB') {
+		if (newMode === 'RGB') {
+			[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+		} else {
+			[hue, saturation, brightness] = rgbToHsb(rgbRed, rgbGreen, rgbBlue);
+		}
+	}
+
+	function toggleMode() {
+		mode = mode === 'HSB' ? 'RGB' : 'HSB';
+		syncModeValues(mode);
+	}
+
+	function updateColorPickerPosition() {
+		if (!colorPicker || !colorWell) return;
+		const wellRect = colorWell.getBoundingClientRect();
+		const x = (saturation / 100) * wellRect.width;
+		const y = ((100 - brightness) / 100) * wellRect.height;
+		colorPicker.style.left = `${x - 6}px`;
+		colorPicker.style.top = `${y - 6}px`;
+	}
+
+	function handleColorWellInteraction(event: MouseEvent) {
+		if (!colorWell) return;
+		const rect = colorWell.getBoundingClientRect();
+		const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+		const y = Math.max(0, Math.min(rect.height, event.clientY - rect.top));
+		saturation = Math.round((x / rect.width) * 100);
+		brightness = Math.round(100 - (y / rect.height) * 100);
+		updateColor();
+		updateColorPickerPosition();
+	}
+
+	function handleHueBarInteraction(event: MouseEvent) {
+		if (!hueBar) return;
+		const rect = hueBar.getBoundingClientRect();
+		const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+		hue = Math.round((x / rect.width) * 360);
+		updateColor();
+	}
+
+	function handleAlphaBarInteraction(event: MouseEvent) {
+		if (!alphaBar) return;
+		const rect = alphaBar.getBoundingClientRect();
+		const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+		alpha = Math.round((x / rect.width) * 100);
+		if (onchange) onchange(hexValue);
+	}
+
+	function handleHexChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		let value = target.value;
+
+		if (!value.startsWith('#')) {
+			value = '#' + value;
+		}
+
+		if (isValidColor(value)) {
+			hexValue = value.toUpperCase();
+			setColor(hexValue);
+			const [h, s, b] = hexToHsb(value);
+			hue = h;
+			saturation = s;
+			brightness = b;
+			[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+			updateColorPickerPosition();
+		}
+	}
+
+	let hexInputValue = $state('');
+	let isHexEditing = $state(false);
+	let prevHexValue = $state('');
+
+	function handleHexFocus(event: FocusEvent) {
+		prevHexValue = hexValue;
+		hexInputValue = hexValue;
+		isHexEditing = true;
+	}
+
+	function handleHexInput(event: Event) {
+		hexInputValue = (event.target as HTMLInputElement).value;
+	}
+
+	function handleHexBlur(event: FocusEvent) {
+		isHexEditing = false;
+		const value = hexInputValue.trim();
+
+		if (!value || !isValidColor(value)) {
+			hexInputValue = prevHexValue;
+			isHexEditing = true;
+
+			import('svelte').then(({ tick }) => {
+				tick().then(() => {
+					isHexEditing = false;
+				});
+			});
+			return;
+		}
+		const normalizedValue = value.startsWith('#') ? value : `#${value}`;
+
+		hexValue = normalizedValue.toUpperCase();
+
+		setColor(hexValue);
+		prevHexValue = hexValue;
+
+		const hsb = hexToHsb(hexValue);
+
+		if (Array.isArray(hsb)) {
+			const [h, s, b] = hsb;
+			hue = h;
+			saturation = s;
+			brightness = b;
+			const rgb = hsbToRgb(hue, saturation, brightness);
+			if (Array.isArray(rgb)) {
+				[rgbRed, rgbGreen, rgbBlue] = rgb;
+			}
+		}
+		updateColorPickerPosition();
+	}
+
+	function handleHexKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			(event.target as HTMLInputElement).blur();
+		}
+	}
+
+	$effect(() => {
+		if (!isHexEditing) {
+			hexInputValue = hexValue;
+		}
+	});
+
+	// Mouse event handlers with improved drag detection
+	function handleMouseDown(event: MouseEvent, target: 'well' | 'hue' | 'alpha') {
+		// Record the starting position for drag detection
+		dragStartPosition = { x: event.clientX, y: event.clientY };
+
+		// Always handle the initial interaction
+		if (target === 'well') {
+			handleColorWellInteraction(event);
+		} else if (target === 'hue') {
+			handleHueBarInteraction(event);
+		} else if (target === 'alpha') {
+			handleAlphaBarInteraction(event);
+		}
+	}
+
+	function handleMouseMove(event: MouseEvent) {
+		if (!dragStartPosition) return;
+
+		// Calculate distance moved
+		const deltaX = Math.abs(event.clientX - dragStartPosition.x);
+		const deltaY = Math.abs(event.clientY - dragStartPosition.y);
+		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+		// If we haven't started dragging yet and we've moved beyond threshold
+		if (!isDragging && distance > DRAG_THRESHOLD) {
+			isDragging = true;
+			// Determine drag target based on which element was initially clicked
+			if (dragTarget === null) {
+				// This shouldn't happen, but fallback to well
+				dragTarget = 'well';
+			}
+		}
+
+		// If we're dragging, handle the interaction
+		if (isDragging && dragTarget) {
+			if (dragTarget === 'well') {
+				handleColorWellInteraction(event);
+			} else if (dragTarget === 'hue') {
+				handleHueBarInteraction(event);
+			} else if (dragTarget === 'alpha') {
+				handleAlphaBarInteraction(event);
+			}
+		}
+	}
+
+	function handleMouseUp(event: MouseEvent) {
+		// If we were dragging, this is the end of the drag
+		if (isDragging) {
+			isDragging = false;
+			dragTarget = null;
+		}
+
+		// Reset drag detection state
+		dragStartPosition = null;
+	}
+
+	/**
+	 * Calculate the position of the handle on the color bar
+	 * @param value
+	 * @param min
+	 * @param max
+	 * @param range
+	 */
+	function percentHandlePosition(value: number, min: number, max: number, range: number): number {
+		return min + (value * (max - min)) / range;
+	}
+
+	// Watch for prop changes
+	$effect(() => {
+		if (color !== hexValue) {
+			if (isValidColor(color)) {
+				hexValue = color;
+				const [h, s, b] = hexToHsb(color);
+				hue = h;
+				saturation = s;
+				brightness = b;
+				[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+				updateColorPickerPosition();
+			}
+		}
+	});
+
+	let currentColor = $derived(
+		`rgba(${hsbToRgb(hue, saturation, brightness).join(', ')}, ${alpha / 100})`
+	);
+
+	onMount(() => {
+		// Initialize from color prop
+		if (isValidColor(color)) {
+			hexValue = color;
+			const [h, s, b] = hexToHsb(color);
+			hue = h;
+			saturation = s;
+			brightness = b;
+			[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+		}
+
+		updateColor();
+		updateColorPickerPosition();
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+
+		return () => {
+			document.removeEventListener('mousemove', handleMouseMove);
+			document.removeEventListener('mouseup', handleMouseUp);
+		};
+	});
+
+	// EyeDropper API handler
+	async function handleEyedropper() {
+		if ('EyeDropper' in window) {
+			try {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				const eyeDropper = new (window as any).EyeDropper();
+				const result = await eyeDropper.open();
+				if (result && result.sRGBHex) {
+					hexValue = result.sRGBHex.toUpperCase();
+					setColor(hexValue);
+					const [h, s, b] = hexToHsb(hexValue);
+					hue = h;
+					saturation = s;
+					brightness = b;
+					[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+					updateColorPickerPosition();
+				}
+			} catch (e) {
+				// User cancelled or error
+			}
+		} else {
+			alert('EyeDropper API is not supported in this browser.');
+		}
+	}
+
+	$effect(() => {
+		updateColorPickerPosition();
+	});
+</script>
+
+<div class="color-picker">
+	<div class="color-picker__container">
+		<!-- Color Well -->
+		<div
+			class="color-well"
+			tabindex="0"
+			bind:this={colorWell}
+			onmousedown={(e) => {
+				dragTarget = 'well';
+				handleMouseDown(e, 'well');
+			}}
+			role="button"
+			aria-label="Color selection well"
+			style={`background: linear-gradient(rgba(0, 0, 0, 0), black), linear-gradient(to right, white, rgba(255, 255, 255, 0)) rgb(${hsbToRgb(hue, 100, 100).join(',')});`}
+		>
+			<div class="color-well__picker" bind:this={colorPicker}></div>
+		</div>
+
+		<!-- Color Bars Section -->
+		<div class="color-bars">
+			<button
+				class="eyedropper-btn"
+				type="button"
+				onpointerdown={() => {
+					handleEyedropper();
+				}}
+				aria-label="Pick color from screen"
+			>
+				<div class="eyedropper-btn__icon">
+					<svg
+						data-wf-icon="EyedropperMediumIcon"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							d="M6.85355 4.14664C6.65829 4.3419 6.65829 4.65848 6.85355 4.85374L11.1464 9.14664C11.3417 9.3419 11.6583 9.3419 11.8536 9.14664L12.1464 8.85374C12.3417 8.65848 12.3417 8.3419 12.1464 8.14664L11 7.00019L12.75 5.25019C13.4404 4.55983 13.4404 3.44055 12.75 2.75019C12.0596 2.05983 10.9404 2.05983 10.25 2.75019L8.5 4.50019L7.85355 3.85374C7.65829 3.65848 7.34171 3.65848 7.14645 3.85374L6.85355 4.14664Z"
+							fill="currentColor"
+						></path><path
+							d="M3 12.0002L2.5 12.5002L3.5 13.5002L4 13.0002H5L9 9.00019L7 7.00019L3 11.0002V12.0002Z"
+							fill="currentColor"
+						></path></svg
+					>
+				</div>
+			</button>
+
+			<div class="color-bars__container">
+				<!-- Hue Bar -->
+				<div class="color-bar">
+					<div
+						class="color-bar__hue"
+						bind:this={hueBar}
+						onmousedown={(e) => {
+							dragTarget = 'hue';
+							handleMouseDown(e, 'hue');
+						}}
+						role="slider"
+						aria-label="Hue slider"
+						aria-valuenow={hue}
+						aria-valuemin="0"
+						aria-valuemax="360"
+						tabindex="0"
+						style="pointer-events: auto; position: relative;"
+					>
+						<div
+							class="color-bar__hue-handle color-bar__handle"
+							style="left: {percentHandlePosition(hue, 2, 98, 360)}%;
+							"
+						></div>
+					</div>
+				</div>
+
+				<!-- Alpha Bar -->
+				<div class="color-bar">
+					<div
+						class="color-bar__alpha"
+						bind:this={alphaBar}
+						onmousedown={(e) => {
+							dragTarget = 'alpha';
+							handleMouseDown(e, 'alpha');
+						}}
+						role="slider"
+						aria-label="Alpha slider"
+						aria-valuenow={alpha}
+						aria-valuemin="0"
+						aria-valuemax="100"
+						tabindex="0"
+						style="pointer-events: auto; position: relative;"
+					>
+						<div class="color-bar__alpha-bg" style="pointer-events: none;"></div>
+						<div
+							class="color-bar__alpha-gradient"
+							style="background: linear-gradient(90deg, transparent 0%, {`rgba(${hsbToRgb(hue, saturation, brightness).join(',')},1)`} 100%); pointer-events: none;"
+						></div>
+						<div
+							class="color-bar__alpha-handle color-bar__handle"
+							style="left: {percentHandlePosition(alpha, 2, 98, 100)}%;
+							
+							"
+						></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="divider"></div>
+
+		<!-- Controls Section -->
+		<div class="controls">
+			<!-- Hex Input -->
+			<div class="control-group">
+				<div class="input-wrapper">
+					<input
+						id="hex-input"
+						type="text"
+						class="input input--hex"
+						value={hexInputValue}
+						oninput={handleHexInput}
+						onfocus={handleHexFocus}
+						onblur={handleHexBlur}
+						onkeydown={handleHexKeydown}
+						placeholder="#000000"
+					/>
+				</div>
+				<label class="label" for="hex-input">HEX</label>
+			</div>
+
+			<!-- HSB/RGB Inputs -->
+			<div class="control-group control-group--main">
+				<div class="input-row">
+					<div class="input-wrapper">
+						<input
+							class="input input--number"
+							value={mode === 'HSB' ? hue : rgbRed}
+							min="0"
+							max={mode === 'HSB' ? 360 : 255}
+							role="spinbutton"
+							aria-label={mode === 'HSB' ? 'Hue' : 'Red'}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								if (!target) return;
+								if (mode === 'HSB') {
+									hue = +target.value;
+								} else {
+									rgbRed = +target.value;
+								}
+								updateColor();
+							}}
+						/>
+					</div>
+					<div class="input-wrapper">
+						<input
+							class="input input--number"
+							value={mode === 'HSB' ? saturation : rgbGreen}
+							min="0"
+							max={mode === 'HSB' ? 100 : 255}
+							role="spinbutton"
+							aria-label={mode === 'HSB' ? 'Saturation' : 'Green'}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								if (!target) return;
+								if (mode === 'HSB') {
+									saturation = +target.value;
+								} else {
+									rgbGreen = +target.value;
+								}
+								updateColor();
+							}}
+						/>
+					</div>
+					<div class="input-wrapper">
+						<input
+							class="input input--number"
+							value={mode === 'HSB' ? brightness : rgbBlue}
+							min="0"
+							max={mode === 'HSB' ? 100 : 255}
+							role="spinbutton"
+							aria-label={mode === 'HSB' ? 'Brightness' : 'Blue'}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								if (!target) return;
+								if (mode === 'HSB') {
+									brightness = +target.value;
+								} else {
+									rgbBlue = +target.value;
+								}
+								updateColor();
+							}}
+						/>
+					</div>
+				</div>
+
+				<div class="label-row--wrapper">
+					<div
+						class="label-row"
+						onpointerdown={toggleMode}
+						role="button"
+						tabindex="0"
+						onkeydown={() => {}}
+						aria-label="Mode toggle"
+					>
+						<span class="label label--clickable">
+							{mode === 'HSB' ? 'H' : 'R'}
+						</span>
+						<span class="label label--clickable">
+							{mode === 'HSB' ? 'S' : 'G'}
+						</span>
+						<span class="label label--clickable">
+							{mode === 'HSB' ? 'B' : 'B'}
+						</span>
+					</div>
+				</div>
+			</div>
+
+			<!-- Alpha Input -->
+			<div class="control-group">
+				<div class="input-wrapper">
+					<input
+						class="input input--number"
+						bind:value={alpha}
+						min="0"
+						max="100"
+						role="spinbutton"
+						aria-label="Alpha"
+					/>
+				</div>
+				<span class="label">A</span>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	/* Main Container */
+	.color-picker {
+		width: 241px;
+		height: auto;
+		box-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.36);
+		display: inline-flex;
+	}
+
+	.color-picker__container {
+		width: 241px;
+		padding: 8px;
+		background: var(--background4);
+		border-radius: 4px;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	/* Color Well */
+	.color-well {
+		width: 225px;
+		height: 150px;
+		position: relative;
+		border-radius: 2px;
+		outline: 1px solid var(--border1, rgba(255, 255, 255, 0.1));
+		outline-offset: -1px;
+		cursor: crosshair;
+	}
+
+	.color-well__picker {
+		position: absolute;
+		width: 12px;
+		height: 12px;
+		border: 2px solid white;
+		border-radius: 50%;
+		box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	/* Color Bars */
+	.color-bars {
+		width: 225px;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.color-bar__handle {
+		position: absolute;
+		top: 1px !important;
+		transform: translateX(-50%);
+		pointer-events: none;
+		height: 11px;
+		width: 6px;
+		border-radius: 1px;
+		box-shadow:
+			0 0 0 2px var(--text1),
+			0 0 0 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+	}
+
+	.eyedropper-btn {
+		width: 32px;
+		height: 32px;
+		padding: 4px;
+		background:
+			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
+			rgba(255, 255, 255, 0.08);
+		box-shadow: 0px 0.5px 1px black;
+		border-radius: 4px;
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.eyedropper-btn__icon {
+		width: 16px;
+		height: 16px;
+	}
+
+	.eyedropper-btn__icon svg {
+		color: var(--text1, #ebebeb);
+	}
+	.color-bars__container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.color-bar {
+		padding: 1px 0;
+		display: flex;
+	}
+
+	.color-bar__hue {
+		width: 186px;
+		height: 12px;
+		background: linear-gradient(
+			90deg,
+			#ff0000 0%,
+			#ff8a00 8%,
+			#fff500 18%,
+			#00ff47 39%,
+			#00f0ff 51%,
+			#0019fb 64%,
+			#fa00ff 84%,
+			#ff0000 100%
+		);
+		border-radius: 2px;
+		outline: 1px solid var(--border1, rgba(255, 255, 255, 0.1));
+		cursor: pointer;
+	}
+
+	.color-bar__alpha {
+		width: 186px;
+		border-radius: 2px;
+		height: 12px;
+		position: relative;
+		cursor: pointer;
+	}
+
+	.color-bar__alpha-bg {
+		position: absolute;
+		width: 186px;
+		inset: 0;
+		border-radius: 2px;
+		overflow: hidden;
+		background-image:
+			linear-gradient(45deg, #ccc 25%, transparent 25%),
+			linear-gradient(-45deg, #ccc 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #ccc 75%),
+			linear-gradient(-45deg, transparent 75%, #ccc 75%);
+		background-size: 8px 8px;
+		background-position:
+			0 0,
+			0 4px,
+			4px -4px,
+			-4px 0px;
+	}
+
+	.color-bar__alpha-gradient {
+		position: absolute;
+		inset: 0;
+	}
+
+	.color-bar__hue-handle {
+		position: absolute;
+		top: -1px;
+		transform: translateX(-50%);
+		pointer-events: none;
+	}
+
+	.color-bar__alpha-handle {
+		position: absolute;
+		top: -1px;
+		transform: translateX(-50%);
+		pointer-events: none;
+	}
+
+	/* Divider */
+	.divider {
+		width: 225px;
+		height: 1px;
+		background: var(--border1);
+	}
+
+	/* Controls */
+	.controls {
+		display: grid;
+		grid-template-columns: 70px 1fr 30px;
+		gap: 7px;
+		width: 100%;
+	}
+
+	.control-group {
+		display: grid;
+		grid-template-rows: 26px 20px;
+		gap: 8px;
+	}
+
+	.control-group--main {
+		flex: 1;
+	}
+
+	.input-row {
+		display: flex;
+		gap: 4px;
+	}
+
+	.label-row {
+		display: flex;
+		background: #4e4e4e;
+		border-radius: 4px;
+		cursor: pointer;
+		width: 100%;
+		box-shadow:
+			0px 0.5px 1px 0px #000,
+			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;
+	}
+
+	.label-row--wrapper {
+		display: flex;
+		gap: 4px;
+		width: 100%;
+		flex: 1;
+		align-self: stretch;
+		justify-content: space-between;
+	}
+
+	.input-wrapper {
+		flex: 1;
+	}
+
+	.input {
+		width: 100%;
+		padding: 4px;
+		background: var(--backgroundInput);
+		border: 1px solid var(--border2);
+		border-radius: 4px;
+		color: var(--text1, #ebebeb);
+		font-size: 11px;
+		font-family: Inter, sans-serif;
+		font-weight: 400;
+		line-height: 16px;
+		outline: none;
+		box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+	}
+
+	.input--hex {
+		width: 70px;
+		text-align: left;
+	}
+
+	.input--number {
+		width: 30px;
+		text-align: center;
+	}
+
+	.label {
+		color: var(--text1, #ebebeb);
+		font-size: 11px;
+		font-family: Inter, sans-serif;
+		font-weight: 400;
+		line-height: 16px;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.label--clickable {
+		flex: 1;
+		padding: 4px;
+		cursor: pointer;
+	}
+
+	.control-group--main .input--number {
+		width: 100%;
+	}
+</style>

package/dist/ui/components/color-picker/ColorSelect.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    color?: string;
+    onchange?: (color: string) => void;
+};
+declare const ColorSelect: import("svelte").Component<$$ComponentProps, {}, "color">;
+type ColorSelect = ReturnType<typeof ColorSelect>;
+export default ColorSelect;

package/dist/ui/components/color-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as ColorPicker } from './ColorPicker.svelte';

package/dist/ui/components/color-picker/index.js

@@ -0,0 +1 @@
+export { default as ColorPicker } from './ColorPicker.svelte';

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -5,6 +5,7 @@
 
 	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../../icons';
 	import { Button } from '../../button';
+	import { ColorPicker } from '../../color-picker';
 	import { Input } from '../../input';
 	import { Section } from '../../section';
 	import { Switch } from '../../switch';
@@ -268,6 +269,13 @@
 							width="130px"
 						/>
 
+						<ColorPicker
+							color="#8C4C4C"
+							onchange={(color) => {
+								console.log(color);
+							}}
+						/>
+
 						<Input
 							value="Error input"
 							invalid={true}

package/dist/ui/components/notification/Notification.svelte

@@ -158,7 +158,7 @@
 		<DefaultIcon />
 	</span>
 
-	<div class="content">
+	<div class="notification-content">
 		{#if title}
 			<Text
 				label={title}
@@ -222,7 +222,7 @@
 		flex-shrink: 0;
 	}
 
-	.content {
+	.notification-content {
 		display: flex;
 		padding-right: var(--spacing-24, 24px);
 		flex-direction: column;

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -212,7 +212,6 @@
 				tooltipEl.removeAttribute('data-trigger-type');
 				isActive = false;
 				hidden = true;
-
 				activeTooltips = activeTooltips.filter((id) => id !== tooltipId);
 
 				dispatchEvent('close', true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {