@finsweet/webflow-apps-utils 1.0.22 → 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/dist/ui/icons/TeamIcon.svelte

@@ -0,0 +1,14 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none">
+	<g clip-path="url(#clip0_504_28)">
+		<path
+			d="M16
+       11C17.66 11 18.99 9.66 18.99 8C18.99 6.34 17.66 5 16 5C14.34 5 13 6.34 13 8C13 9.66 14.34 11 16 11ZM8 11C9.66 11 10.99 9.66 10.99 8C10.99 6.34 9.66 5 8 5C6.34 5 5 6.34 5 8C5 9.66 6.34 11 8 11ZM8 13C5.67 13 1 14.17 1 16.5V19H15V16.5C15 14.17 10.33 13 8 13ZM16 13C15.71 13 15.38 13.02 15.03 13.05C16.19 13.89 17 15.02 17 16.5V19H23V16.5C23 14.17 18.33 13 16 13Z"
+			fill="currentColor"
+		></path>
+	</g>
+	<defs>
+		<clipPath id="clip0_504_28">
+			<rect width="24" height="24" fill="currentColor"></rect>
+		</clipPath>
+	</defs>
+</svg>

package/dist/ui/icons/TeamIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default TeamIcon;
+type TeamIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TeamIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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/icons/index.d.ts

@@ -100,6 +100,7 @@ import Tablet from './Tablet.svelte';
 import TabletPreview from './TabletPreview.svelte';
 import TabNewIcon from './TabNewIcon.svelte';
 import TabsIcon from './TabsIcon.svelte';
+import TeamIcon from './TeamIcon.svelte';
 import ThreeDotsIcon from './ThreeDotsIcon.svelte';
 import TimesIcon from './TimesIcon.svelte';
 import TooltipInfoCircleFilled from './TooltipInfoCircleFilled.svelte';
@@ -121,4 +122,4 @@ import WorkspaceIcon from './WorkspaceIcon.svelte';
 import XL from './XL.svelte';
 import XXL from './XXL.svelte';
 import XXXL from './XXXL.svelte';
-export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, ReceiptIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, WorkspaceIcon, XL, XXL, XXXL };
+export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, ReceiptIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, TeamIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, WorkspaceIcon, XL, XXL, XXXL };

package/dist/ui/icons/index.js

@@ -100,6 +100,7 @@ import Tablet from './Tablet.svelte';
 import TabletPreview from './TabletPreview.svelte';
 import TabNewIcon from './TabNewIcon.svelte';
 import TabsIcon from './TabsIcon.svelte';
+import TeamIcon from './TeamIcon.svelte';
 import ThreeDotsIcon from './ThreeDotsIcon.svelte';
 import TimesIcon from './TimesIcon.svelte';
 import TooltipInfoCircleFilled from './TooltipInfoCircleFilled.svelte';
@@ -121,4 +122,4 @@ import WorkspaceIcon from './WorkspaceIcon.svelte';
 import XL from './XL.svelte';
 import XXL from './XXL.svelte';
 import XXXL from './XXXL.svelte';
-export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, ReceiptIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, WorkspaceIcon, XL, XXL, XXXL };
+export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, ReceiptIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, TeamIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, WorkspaceIcon, XL, XXL, XXXL };

package/package.json

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