@finsweet/webflow-apps-utils 1.0.16 → 1.0.18

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

@@ -39,19 +39,28 @@
 	});
 </script>
 
-<Story name="Default" args={{}} />
+<Story name="Default" args={{ oncolorchange: handleFullColorChange }} />
 
-<Story name="With Initial Color" args={{ color: '#00ff00' }} />
+<Story
+	name="With Initial Color"
+	args={{ color: '#00ff00', oncolorchange: handleFullColorChange }}
+/>
 
-<Story name="Edge: Invalid Color" args={{ color: '#xyzxyz' }} />
+<Story
+	name="Edge: Invalid Color"
+	args={{ color: '#xyzxyz', oncolorchange: handleFullColorChange }}
+/>
 
-<Story name="Edge: No Color" args={{ color: undefined }} />
+<Story name="Edge: No Color" args={{ color: undefined, oncolorchange: handleFullColorChange }} />
 
-<Story name="Disabled Picker" args={{ color: '#ebebeb', disabled: true }} />
+<Story
+	name="Disabled Picker"
+	args={{ color: '#ebebeb', disabled: true, oncolorchange: handleFullColorChange }}
+/>
 
 <Story
 	name="Full Color Object Demo"
-	args={{ color: '#ff6600' }}
+	args={{ color: '#ff6600', oncolorchange: handleFullColorChange }}
 	story={{
 		parameters: {
 			docs: {
@@ -68,15 +77,7 @@
 	name="Alpha Channel Demo"
 	args={{
 		color: '#ff0000',
-		oncolorchange: (fullColor: {
-			hex: string;
-			rgb: { r: number; g: number; b: number; value: string };
-			rgba: { r: number; g: number; b: number; a: number; value: string };
-			hsb: { h: number; s: number; b: number; value: string };
-			alpha: number;
-		}) => {
-			console.log('Full color object:', fullColor);
-		}
+		oncolorchange: handleFullColorChange
 	}}
 	story={{
 		parameters: {

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { normalizeHex } from '../../utils';
 	import Tooltip from '../tooltip/Tooltip.svelte';
 	import ColorSelect from './ColorSelect.svelte';
 
@@ -28,23 +29,48 @@
 		 * Whether the picker is disabled.
 		 */
 		disabled?: boolean;
+
+		/**
+		 * The id of the picker.
+		 */
+		id?: string;
+
+		/**
+		 * Whether the color select should be shown by default.
+		 */
+		defaultShowColorSelect?: boolean;
 	}
 
 	let {
 		color = $bindable('#fff'),
 		oncolorchange,
 		width = '80px',
-		disabled = false
+		disabled = false,
+		defaultShowColorSelect = false,
+		id
 	}: Props = $props();
 
-	function normalizeHex(value: string): string {
-		let v = value.trim();
-
-		if (!v.startsWith('#')) v = `#${v}`;
-
-		// Keep original case for consistency with tests
-		return v;
-	}
+	// 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})$/;
@@ -107,6 +133,41 @@
 		};
 	}
 
+	function normalizeHexTo6Upper(value: string): string {
+		const hex = value.startsWith('#') ? value : `#${value}`;
+		if (/^#[A-Fa-f0-9]{3}$/.test(hex)) {
+			return (
+				'#' +
+				hex
+					.slice(1)
+					.split('')
+					.map((c) => c + c)
+					.join('')
+					.toUpperCase()
+			);
+		}
+		if (/^#[A-Fa-f0-9]{6}$/.test(hex)) {
+			return hex.toUpperCase();
+		}
+		return value;
+	}
+
+	$effect(() => {
+		// Only update inputValue if color changes externally (not from input)
+		// if (
+		// 	color !== inputValue &&
+		// 	document.activeElement !== null &&
+		// 	document.activeElement !== inputEl
+		// ) {
+		// 	inputValue = color;
+		// }
+	});
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		color = target.value;
+	}
+
 	function handleInputPaste(event: ClipboardEvent) {
 		event.preventDefault();
 
@@ -116,23 +177,9 @@
 
 		cleanText = cleanText.substring(0, 9);
 
-		if (isValidColor(cleanText)) {
-			const normalizedValue = normalizeHex(cleanText);
+		const normalizedValue = normalizeHexTo6Upper(cleanText);
+		if (/^#[A-F0-9]{6}$/.test(normalizedValue)) {
 			color = normalizedValue;
-			// Call oncolorchange with the new color
-			const colorObject = createColorObject(normalizedValue);
-			oncolorchange?.(colorObject);
-		}
-	}
-
-	function handleInputChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		const value = target.value.trim();
-
-		if (isValidColor(value)) {
-			const normalizedValue = normalizeHex(value);
-			color = normalizedValue;
-			// Call oncolorchange with the new color
 			const colorObject = createColorObject(normalizedValue);
 			oncolorchange?.(colorObject);
 		}
@@ -140,18 +187,27 @@
 
 	function handleInputKeydown(event: KeyboardEvent) {
 		if (event.key === 'Enter') {
-			(event.target as HTMLInputElement).blur();
+			// (event.target as HTMLInputElement).blur(); // Removed local inputValue update
 		}
 	}
 
-	function handleColorChange(newColor: string) {
-		const normalizedValue = normalizeHex(newColor);
-		color = normalizedValue;
+	function handleBlur(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const normalized = normalizeHex(target.value);
+		if (/^#[A-F0-9]{6}$/.test(normalized)) {
+			color = normalized;
+			const colorObject = createColorObject(normalized);
+			oncolorchange?.(colorObject);
+		}
 	}
 
 	function handleFullColorChange(fullColor: ColorObject) {
 		oncolorchange?.(fullColor);
+		const normalizedValue = normalizeHex(fullColor.hex);
+		color = normalizedValue;
 	}
+
+	let showColorSelect = $state(defaultShowColorSelect);
 </script>
 
 <div class="color-picker">
@@ -164,6 +220,8 @@
 		stopPropagation={true}
 		width="241px"
 		placement="bottom"
+		onshow={() => (showColorSelect = true)}
+		onclose={() => (showColorSelect = false)}
 		fallbackPlacements={['top-end', 'top', 'bottom-end', 'bottom', 'top-start', 'bottom-start']}
 	>
 		{#snippet target()}
@@ -172,7 +230,9 @@
 			</div>
 		{/snippet}
 		{#snippet tooltip()}
-			<ColorSelect {color} oncolorchange={handleFullColorChange} />
+			{#if showColorSelect}
+				<ColorSelect bind:color oncolorchange={handleFullColorChange} />
+			{/if}
 		{/snippet}
 	</Tooltip>
 
@@ -183,12 +243,14 @@
 		bind:value={color}
 		{disabled}
 		readonly={disabled}
-		oninput={handleInputChange}
+		oninput={handleInput}
 		onkeydown={handleInputKeydown}
 		onpaste={handleInputPaste}
+		onblur={handleBlur}
 		placeholder="#ffffff"
 		aria-label="Color hex value"
 		style="width: {width}"
+		{id}
 	/>
 </div>
 

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

@@ -38,6 +38,14 @@ interface Props {
      * Whether the picker is disabled.
      */
     disabled?: boolean;
+    /**
+     * The id of the picker.
+     */
+    id?: string;
+    /**
+     * Whether the color select should be shown by default.
+     */
+    defaultShowColorSelect?: boolean;
 }
 declare const ColorPicker: import("svelte").Component<Props, {}, "color">;
 type ColorPicker = ReturnType<typeof ColorPicker>;

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import ColorPicker from './ColorPicker.svelte';
+	let { initialColor = '#000000', oncolorchange } = $props();
+	let color = $state(initialColor);
+
+	//eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function handleColorChange(fullColor: any) {
+		color = fullColor.hex;
+		oncolorchange?.(fullColor);
+	}
+</script>
+
+<label for="color-input">Color hex value</label>
+<ColorPicker id="color-input" bind:color oncolorchange={handleColorChange} />

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

@@ -0,0 +1,6 @@
+declare const ColorPickerWrapper: import("svelte").Component<{
+    initialColor?: string;
+    oncolorchange: any;
+}, {}, "">;
+type ColorPickerWrapper = ReturnType<typeof ColorPickerWrapper>;
+export default ColorPickerWrapper;

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

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
+
+	import { normalizeHex } from '../../utils/color-utils';
 
 	// Color object type definition
 	interface ColorObject {
@@ -83,6 +85,29 @@
 	let dragStartPosition = $state<{ x: number; y: number } | null>(null);
 	const DRAG_THRESHOLD = 3; // pixels of movement before considering it a drag
 
+	// Helper function to normalize color input to hex
+	function normalizeColorToHex(colorInput: string): string {
+		// If it's already a valid hex, normalize it
+		if (colorInput.startsWith('#')) {
+			return normalizeHex(colorInput);
+		}
+
+		// For named colors, use a canvas to convert to hex
+		const canvas = document.createElement('canvas');
+		const ctx = canvas.getContext('2d');
+		if (ctx) {
+			ctx.fillStyle = colorInput;
+			const computedColor = ctx.fillStyle;
+			// ctx.fillStyle returns hex format for valid colors
+			if (computedColor.startsWith('#')) {
+				return computedColor.toUpperCase();
+			}
+		}
+
+		// Fallback to original value if conversion fails
+		return normalizeHex(colorInput);
+	}
+
 	// Color conversion utilities
 	function hsbToRgb(h: number, s: number, b: number): [number, number, number] {
 		h = h / 360;
@@ -211,10 +236,26 @@
 			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;
+		// For non-hex colors, try to validate using canvas
+		try {
+			const canvas = document.createElement('canvas');
+			const ctx = canvas.getContext('2d');
+			if (ctx) {
+				ctx.fillStyle = value;
+				return (
+					ctx.fillStyle !== '#000000' ||
+					value === 'black' ||
+					value === '#000000' ||
+					value === '#000'
+				);
+			}
+		} catch (e) {
+			// Fallback to regex for hex without #
+			const hexRegex = /^([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+			return hexRegex.test(value);
+		}
+
+		return false;
 	}
 
 	function rgbToHsb(r: number, g: number, b: number): [number, number, number] {
@@ -266,8 +307,16 @@
 		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));
+
+		// Always update HSB values first
 		saturation = Math.round((x / rect.width) * 100);
 		brightness = Math.round(100 - (y / rect.height) * 100);
+
+		// If in RGB mode, sync the RGB values with the new HSB values
+		if (mode === 'RGB') {
+			[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+		}
+
 		updateColor();
 		updateColorPickerPosition();
 	}
@@ -276,16 +325,31 @@
 		if (!hueBar) return;
 		const rect = hueBar.getBoundingClientRect();
 		const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+
+		// Always update HSB hue first
 		hue = Math.round((x / rect.width) * 360);
+
+		// If in RGB mode, sync the RGB values with the new HSB values
+		if (mode === 'RGB') {
+			[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+		}
+
 		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);
-		emitColorChange(hexValue, alpha);
+
+		let newAlpha = Math.round((x / rect.width) * 100);
+
+		if (isNaN(newAlpha) || typeof newAlpha !== 'number') newAlpha = 100;
+
+		alpha = newAlpha;
+
+		updateColor();
 	}
 
 	function handleHexChange(event: Event) {
@@ -442,18 +506,18 @@
 		return min + (value * (max - min)) / range;
 	}
 
-	// Watch for prop changes
+	// Watch for prop changes - FIXED: Better color normalization
 	$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();
-			}
+		const normalized = normalizeColorToHex(color);
+		if (normalized !== hexValue) {
+			hexValue = normalized;
+			const [h, s, b] = hexToHsb(normalized);
+			hue = h;
+			saturation = s;
+			brightness = b;
+			[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+			// Force position update after state changes
+			setTimeout(() => updateColorPickerPosition(), 0);
 		}
 	});
 
@@ -462,18 +526,19 @@
 	);
 
 	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);
-		}
-
+		const normalized = normalizeColorToHex(color);
+		hexValue = normalized;
+		const [h, s, b] = hexToHsb(normalized);
+		hue = h;
+		saturation = s;
+		brightness = b;
+		[rgbRed, rgbGreen, rgbBlue] = hsbToRgb(hue, saturation, brightness);
+
+		console.log('ColorSelect mounted', { color });
 		updateColor();
-		updateColorPickerPosition();
+		// Delay position update to ensure DOM is ready
+
+		setTimeout(() => updateColorPickerPosition(), 5);
 
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
@@ -511,6 +576,7 @@
 		}
 	}
 
+	// Add an $effect to always update the color well and picker position after state changes
 	$effect(() => {
 		updateColorPickerPosition();
 	});
@@ -744,7 +810,9 @@
 						oninput={(e) => {
 							const target = e.target as HTMLInputElement;
 							if (!target) return;
-							alpha = +target.value;
+							let newAlpha = +target.value;
+							if (isNaN(newAlpha) || typeof newAlpha !== 'number') newAlpha = 100;
+							alpha = newAlpha;
 							emitColorChange(hexValue, alpha);
 						}}
 					/>
@@ -928,7 +996,7 @@
 	/* Controls */
 	.controls {
 		display: grid;
-		grid-template-columns: 70px 1fr 30px;
+		grid-template-columns: 80px 1fr 30px;
 		gap: 7px;
 		width: 100%;
 	}
@@ -988,7 +1056,7 @@
 	}
 
 	.input--hex {
-		width: 70px;
+		width: 80px;
 		text-align: left;
 	}
 

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

@@ -17,38 +17,10 @@
 	import { cleanupTooltipMessage } from '../../../utils';
 
 	import Text from '../text/Text.svelte';
+	import type { TooltipProps } from './types';
 
 	const activeTooltips = writable<string[]>([]);
 
-	interface Props {
-		message?: string;
-		listener?: 'click' | 'hover';
-		listenerout?: 'click' | 'hover';
-		placement?: Placement;
-		position?: string;
-		showArrow?: boolean;
-		offsetVal?: number;
-		hidden?: boolean;
-		disabled?: boolean;
-		tooltipIcon?: Component | null;
-		tooltipIconColor?: string;
-		width?: string;
-		padding?: string;
-		raw?: boolean;
-		isActive?: boolean;
-		fallbackPlacements?: Placement[];
-		stopPropagation?: boolean;
-		fontColor?: string;
-		bgColor?: string;
-		class?: string;
-		/** Target element snippet */
-		target?: Snippet;
-		/** Tooltip content snippet */
-		tooltip?: Snippet;
-		onshow?: (event: boolean) => void;
-		onclose?: (event: boolean) => void;
-	}
-
 	let {
 		message = '',
 		listener = 'hover',
@@ -70,11 +42,12 @@
 		fontColor = 'var(--text2)',
 		bgColor = '',
 		class: className = '',
+		targetClassName = '',
 		target,
 		tooltip,
 		onshow,
 		onclose
-	}: Props = $props();
+	}: TooltipProps = $props();
 
 	type TooltipInstance = {
 		toggle: HTMLElement;
@@ -335,7 +308,7 @@
 	});
 </script>
 
-<div class="target" bind:this={targetElement} aria-describedby={tooltipId}>
+<div class="target {targetClassName}" bind:this={targetElement} aria-describedby={tooltipId}>
 	{#if target}
 		{@render target()}
 	{:else}
@@ -391,6 +364,9 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+	.target {
+		display: inline-flex;
+	}
 	.tooltip {
 		display: none;
 		top: 0;

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

@@ -1,34 +1,6 @@
-import { type Placement } from '@floating-ui/dom';
-import { type Component, type Snippet } from 'svelte';
-interface Props {
-    message?: string;
-    listener?: 'click' | 'hover';
-    listenerout?: 'click' | 'hover';
-    placement?: Placement;
-    position?: string;
-    showArrow?: boolean;
-    offsetVal?: number;
-    hidden?: boolean;
-    disabled?: boolean;
-    tooltipIcon?: Component | null;
-    tooltipIconColor?: string;
-    width?: string;
-    padding?: string;
-    raw?: boolean;
-    isActive?: boolean;
-    fallbackPlacements?: Placement[];
-    stopPropagation?: boolean;
-    fontColor?: string;
-    bgColor?: string;
-    class?: string;
-    /** Target element snippet */
-    target?: Snippet;
-    /** Tooltip content snippet */
-    tooltip?: Snippet;
-    onshow?: (event: boolean) => void;
-    onclose?: (event: boolean) => void;
-}
-declare const Tooltip: Component<Props, {
+import { type Component } from 'svelte';
+import type { TooltipProps } from './types';
+declare const Tooltip: Component<TooltipProps, {
     show: () => void | undefined;
     hide: () => void | undefined;
 }, "hidden" | "isActive">;

package/dist/ui/components/tooltip/types.d.ts

@@ -2,6 +2,14 @@ import type { Placement } from '@floating-ui/dom';
 import type { Component, Snippet } from 'svelte';
 export type TooltipListener = 'click' | 'hover';
 export interface TooltipProps {
+    /**
+     * Event handler for tooltip show
+     */
+    onshow?: (event: boolean) => void;
+    /**
+     * Event handler for tooltip show
+     */
+    onclose?: (event: boolean) => void;
     /**
      * The tooltip message content
      */
@@ -74,6 +82,10 @@ export interface TooltipProps {
      * Font color for tooltip text
      */
     fontColor?: string;
+    /**
+     * Target element class name
+     */
+    targetClassName?: string;
     /**
      * Target element snippet (what triggers the tooltip)
      */

package/dist/ui/utils/color-utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Convert a color name to a hex value
+ * @param colorName - The color name to convert
+ * @returns The hex value of the color
+ */
+export declare function colorNameToHex(colorName: string): string | null;
+/**
+ * Normalize a hex value
+ * @param value - The hex value to normalize
+ * @returns The normalized hex value
+ */
+export declare function normalizeHex(value: string): string;

package/dist/ui/utils/color-utils.js

@@ -0,0 +1,50 @@
+/**
+ * Convert a color name to a hex value
+ * @param colorName - The color name to convert
+ * @returns The hex value of the color
+ */
+export function colorNameToHex(colorName) {
+    const tempDiv = document.createElement('div');
+    tempDiv.style.color = colorName;
+    document.body.appendChild(tempDiv);
+    const rgbColor = window.getComputedStyle(tempDiv).color;
+    document.body.removeChild(tempDiv);
+    const match = rgbColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (match) {
+        const r = parseInt(match[1]);
+        const g = parseInt(match[2]);
+        const b = parseInt(match[3]);
+        const toHex = (c) => {
+            const hex = c.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        };
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    else {
+        return null;
+    }
+}
+/**
+ * Normalize a hex value
+ * @param value - The hex value to normalize
+ * @returns The normalized hex value
+ */
+export function normalizeHex(value) {
+    let v = value.trim();
+    if (!v.startsWith('#')) {
+        const hex = colorNameToHex(v);
+        if (hex)
+            v = hex;
+        else
+            v = `#${v}`;
+    }
+    // Expand 3-digit hex to 6-digit
+    if (/^#[A-Fa-f0-9]{3}$/.test(v)) {
+        v = '#' + v[1] + v[1] + v[2] + v[2] + v[3] + v[3];
+    }
+    // Only accept valid 6-digit hex
+    if (/^#[A-Fa-f0-9]{6}$/.test(v)) {
+        return v.toUpperCase();
+    }
+    return value;
+}

package/dist/ui/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './diff-mapper';
 export * from './helpers';
+export * from './color-utils';

package/dist/ui/utils/index.js

@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './diff-mapper';
 export * from './helpers';
+export * from './color-utils';

package/package.json

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