@finsweet/webflow-apps-utils 1.0.23 → 1.0.24

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

@@ -89,8 +89,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,8 +206,9 @@
 
 	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;
 	}
 
 	let showColorSelect = $state(defaultShowColorSelect);

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

@@ -108,6 +108,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 +397,7 @@
 	let hexInputValue = $state('');
 	let isHexEditing = $state(false);
 	let prevHexValue = $state('');
+	let isInitialized = $state(false);
 
 	function handleHexFocus(event: FocusEvent) {
 		prevHexValue = hexValue;
@@ -508,10 +529,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 +548,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 +561,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 +582,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/package.json

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