@finsweet/webflow-apps-utils 1.0.23 → 1.0.25

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

@@ -50,28 +50,6 @@
 		id
 	}: Props = $props();
 
-	// Remove local inputValue state
-	// let inputValue = $state(color);
-
-	// Helper: normalize hex to 6-digit uppercase
-	// function normalizeHex(value: string): string {
-	// 	if (/^#[A-Fa-f0-9]{3}$/.test(value)) {
-	// 		return (
-	// 			'#' +
-	// 			value
-	// 				.slice(1)
-	// 				.split('')
-	// 				.map((c) => c + c)
-	// 				.join('')
-	// 				.toUpperCase()
-	// 		);
-	// 	}
-	// 	if (/^#[A-Fa-f0-9]{6}$/.test(value)) {
-	// 		return value.toUpperCase();
-	// 	}
-	// 	return value;
-	// }
-
 	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);
@@ -89,8 +67,11 @@
 				.join('');
 		}
 
-		// Remove alpha channel if present (8-digit hex)
+		// Extract alpha channel if present (8-digit hex)
+		let alpha = 100;
 		if (normalizedHex.length === 8) {
+			const alphaHex = normalizedHex.substring(6, 8);
+			alpha = Math.round((parseInt(alphaHex, 16) / 255) * 100);
 			normalizedHex = normalizedHex.substring(0, 6);
 		}
 
@@ -203,15 +184,24 @@
 
 	function handleFullColorChange(fullColor: ColorObject) {
 		oncolorchange?.(fullColor);
-		const normalizedValue = normalizeHex(fullColor.hex);
-		color = normalizedValue;
+		// Preserve the alpha channel by using the full hex value with alpha
+		// The fullColor.hex already includes the alpha channel if alpha < 100
+		color = fullColor.hex;
+	}
+
+	function handleDragEnd() {
+		// Signal the tooltip to ignore the next click event
+		// This prevents the tooltip from closing when dragging and releasing outside
+		tooltipRef?.ignoreNextClickEvent?.();
 	}
 
 	let showColorSelect = $state(defaultShowColorSelect);
+	let tooltipRef: { ignoreNextClickEvent?: () => void } | undefined = $state();
 </script>
 
 <div class="color-picker">
 	<Tooltip
+		bind:this={tooltipRef}
 		listener="click"
 		listenerout="click"
 		showArrow={false}
@@ -231,7 +221,7 @@
 		{/snippet}
 		{#snippet tooltip()}
 			{#if showColorSelect}
-				<ColorSelect bind:color oncolorchange={handleFullColorChange} />
+				<ColorSelect bind:color oncolorchange={handleFullColorChange} ondragend={handleDragEnd} />
 			{/if}
 		{/snippet}
 	</Tooltip>
@@ -271,6 +261,11 @@
 			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;
+
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
 	}
 
 	.color-picker__swatch {

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

@@ -12,9 +12,14 @@
 		alpha: number;
 	}
 
-	let { color = $bindable('#fff'), oncolorchange } = $props<{
+	let {
+		color = $bindable('#fff'),
+		oncolorchange,
+		ondragend
+	} = $props<{
 		color?: string;
 		oncolorchange?: (fullColor: ColorObject) => void;
+		ondragend?: () => void;
 	}>();
 
 	function setColor(newColor: string) {
@@ -108,6 +113,26 @@
 		return normalizeHex(colorInput);
 	}
 
+	// Helper function to extract alpha value from hex color
+	function extractAlphaFromHex(hexColor: string): number {
+		if (hexColor.startsWith('#') && hexColor.length === 9) {
+			// 8-digit hex with alpha channel (#RRGGBBAA)
+			const alphaHex = hexColor.slice(7, 9);
+			const alphaValue = parseInt(alphaHex, 16);
+			return Math.round((alphaValue / 255) * 100);
+		}
+		return 100; // Default to 100% opacity if no alpha channel
+	}
+
+	// Helper function to get hex without alpha channel
+	function getHexWithoutAlpha(hexColor: string): string {
+		if (hexColor.startsWith('#') && hexColor.length === 9) {
+			// Remove alpha channel from 8-digit hex
+			return hexColor.slice(0, 7);
+		}
+		return hexColor;
+	}
+
 	// Color conversion utilities
 	function hsbToRgb(h: number, s: number, b: number): [number, number, number] {
 		h = h / 360;
@@ -377,6 +402,7 @@
 	let hexInputValue = $state('');
 	let isHexEditing = $state(false);
 	let prevHexValue = $state('');
+	let isInitialized = $state(false);
 
 	function handleHexFocus(event: FocusEvent) {
 		prevHexValue = hexValue;
@@ -489,6 +515,8 @@
 		if (isDragging) {
 			isDragging = false;
 			dragTarget = null;
+			// Signal that a drag operation just ended
+			ondragend?.();
 		}
 
 		// Reset drag detection state
@@ -508,10 +536,18 @@
 
 	// Watch for prop changes - FIXED: Better color normalization
 	$effect(() => {
+		// Skip effect during initial mount to prevent overriding alpha
+		if (!isInitialized) return;
+
 		const normalized = normalizeColorToHex(color);
-		if (normalized !== hexValue) {
-			hexValue = normalized;
-			const [h, s, b] = hexToHsb(normalized);
+		// Extract alpha value from the original color if it has an alpha channel
+		const alphaFromColor = extractAlphaFromHex(color);
+
+		// Use hex without alpha for internal processing
+		const hexWithoutAlpha = getHexWithoutAlpha(normalized);
+		if (hexWithoutAlpha !== hexValue) {
+			hexValue = hexWithoutAlpha;
+			const [h, s, b] = hexToHsb(hexValue);
 			hue = h;
 			saturation = s;
 			brightness = b;
@@ -519,6 +555,11 @@
 			// Force position update after state changes
 			setTimeout(() => updateColorPickerPosition(), 0);
 		}
+
+		// Only update alpha if it's different from current alpha
+		if (alphaFromColor !== alpha) {
+			alpha = alphaFromColor;
+		}
 	});
 
 	let currentColor = $derived(
@@ -527,14 +568,19 @@
 
 	onMount(() => {
 		const normalized = normalizeColorToHex(color);
-		hexValue = normalized;
-		const [h, s, b] = hexToHsb(normalized);
+		// Extract alpha value from the original color if it has an alpha channel
+		const alphaFromColor = extractAlphaFromHex(color);
+		alpha = alphaFromColor;
+
+		// Use hex without alpha for internal processing
+		hexValue = getHexWithoutAlpha(normalized);
+		const [h, s, b] = hexToHsb(hexValue);
 		hue = h;
 		saturation = s;
 		brightness = b;
 		[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
 
-		console.log('ColorSelect mounted', { color });
+		console.log('ColorSelect mounted', { color, alpha: alphaFromColor });
 		updateColor();
 		// Delay position update to ensure DOM is ready
 
@@ -543,6 +589,9 @@
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
 
+		// Mark as initialized after setting up the initial state
+		isInitialized = true;
+
 		return () => {
 			document.removeEventListener('mousemove', handleMouseMove);
 			document.removeEventListener('mouseup', handleMouseUp);

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

@@ -24,6 +24,7 @@ interface ColorObject {
 type $$ComponentProps = {
     color?: string;
     oncolorchange?: (fullColor: ColorObject) => void;
+    ondragend?: () => void;
 };
 declare const ColorSelect: import("svelte").Component<$$ComponentProps, {}, "color">;
 type ColorSelect = ReturnType<typeof ColorSelect>;

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

@@ -64,6 +64,7 @@
 	let arrowElement: HTMLDivElement | undefined = $state();
 	let observer: MutationObserver | null = null;
 	let documentClickListener: ((event: MouseEvent) => void) | null = null;
+	let ignoreNextClick = $state(false);
 	const tooltipId = `tooltip-${uuidv4()}`;
 
 	/**
@@ -214,6 +215,12 @@
 
 			// Store reference to the click handler for cleanup
 			documentClickListener = (event: MouseEvent) => {
+				// Ignore clicks that happen immediately after a drag operation
+				if (ignoreNextClick) {
+					ignoreNextClick = false;
+					return;
+				}
+
 				if (
 					tooltipElement &&
 					toggle &&
@@ -263,6 +270,9 @@
 
 	export const show = () => tooltipInstance?.showTooltip();
 	export const hide = () => tooltipInstance?.hideTooltip();
+	export const ignoreNextClickEvent = () => {
+		ignoreNextClick = true;
+	};
 
 	// Svelte 5 effect for hidden prop
 	$effect(() => {

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

@@ -3,6 +3,7 @@ import type { TooltipProps } from './types';
 declare const Tooltip: Component<TooltipProps, {
     show: () => void | undefined;
     hide: () => void | undefined;
+    ignoreNextClickEvent: () => void;
 }, "hidden" | "isActive">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/package.json

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