react-iro-gradient-picker 1.2.12 → 1.2.13

package/dist/index.js

@@ -6912,16 +6912,42 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [padding, margin]); // Remove width from dependencies to prevent recreation
+    // Add state to track when picker is ready (removed as it's set but not used)
     React.useImperativeHandle(ref, function () { return ({
         colorPicker: colorPickerRef.current
     }); });
-    // Create a shared picker creation function
+    // Create a shared picker creation function with enhanced error handling
     var createColorPicker = React.useCallback(function (pickerWidth) {
-        if (!containerRef.current || colorPickerRef.current)
+        if (!containerRef.current) {
+            console.warn('IroColorPicker: Container ref not available, skipping creation');
             return;
+        }
+        // More thorough check for existing picker
+        if (colorPickerRef.current) {
+            try {
+                // Check if picker is still valid and functioning
+                if (colorPickerRef.current.color &&
+                    typeof colorPickerRef.current.color.hexString === 'string') {
+                    return;
+                }
+            }
+            catch (error) { }
+        }
+        // Clean up any existing picker first
+        if (colorPickerRef.current) {
+            try {
+                // Proper cleanup of event listeners and resources
+                if (typeof colorPickerRef.current.off === 'function') {
+                    colorPickerRef.current.off();
+                }
+                colorPickerRef.current = null;
+            }
+            catch (error) {
+                console.warn('IroColorPicker: Error cleaning up existing picker:', error);
+            }
+        }
         // Capture the container reference for cleanup
         var currentContainer = containerRef.current;
-        console.log('🔧 IroColorPicker recreating picker - width prop:', width, 'containerWidth:', containerWidth);
         // IMPORTANT: Clear any existing DOM content first
         if (currentContainer) {
             currentContainer.innerHTML = '';
@@ -6929,6 +6955,7 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
         // Set theme-appropriate border color and background
         var themeBorderColor = theme === 'light' ? '#ffffff' : '#334155';
         var themeBorderWidth = theme === 'light' ? 1 : 0;
+        // Enhanced options with better default values
         var options = {
             width: pickerWidth,
             color: colors ? undefined : color,
@@ -6944,20 +6971,36 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
             handleRadius: handleRadius,
             activeHandleRadius: activeHandleRadius || handleRadius,
             handleSvg: handleSvg,
-            handleProps: handleProps,
+            handleProps: handleProps || { x: 0, y: 0 }, // Ensure defaults are always set
             wheelLightness: wheelLightness,
             wheelAngle: wheelAngle,
             wheelDirection: wheelDirection,
             sliderSize: sliderSize,
             boxHeight: boxHeight
         };
-        // Remove undefined values
+        // Remove undefined values but preserve explicit defaults
         Object.keys(options).forEach(function (key) {
             if (options[key] === undefined) {
                 delete options[key];
             }
         });
-        colorPickerRef.current = new iro$1.ColorPicker(containerRef.current, options);
+        try {
+            // Create the picker with enhanced error handling
+            colorPickerRef.current = new iro$1.ColorPicker(containerRef.current, options);
+            // Validate the picker was created successfully
+            if (!colorPickerRef.current || !colorPickerRef.current.color) {
+                throw new Error('ColorPicker was not created properly');
+            }
+            // Update picker ready state and notify parent
+            // Force update of imperative handle by calling onMount callback
+            if (onMount) {
+                setTimeout(function () { return onMount(colorPickerRef.current); }, 0);
+            }
+        }
+        catch (error) {
+            colorPickerRef.current = null;
+            return null; // Return null to indicate failure
+        }
         // Apply theme styles to iro.js elements after creation
         var applyThemeStyles = function () {
             if (!containerRef.current)
@@ -7033,31 +7076,34 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
         onInputStart,
         onInputMove,
         onInputEnd,
-        onMount,
-        width,
-        containerWidth
+        onMount
     ]);
     // Cleanup function
     var cleanup = React.useCallback(function () {
         if (colorPickerRef.current) {
-            // Clean up event listeners
-            if (onColorChange) {
-                colorPickerRef.current.off('color:change', onColorChange);
-            }
-            if (onInputChange) {
-                colorPickerRef.current.off('input:change', onInputChange);
-            }
-            if (onInputStart) {
-                colorPickerRef.current.off('input:start', onInputStart);
-            }
-            if (onInputMove) {
-                colorPickerRef.current.off('input:move', onInputMove);
-            }
-            if (onInputEnd) {
-                colorPickerRef.current.off('input:end', onInputEnd);
+            try {
+                // Clean up event listeners
+                if (onColorChange) {
+                    colorPickerRef.current.off('color:change', onColorChange);
+                }
+                if (onInputChange) {
+                    colorPickerRef.current.off('input:change', onInputChange);
+                }
+                if (onInputStart) {
+                    colorPickerRef.current.off('input:start', onInputStart);
+                }
+                if (onInputMove) {
+                    colorPickerRef.current.off('input:move', onInputMove);
+                }
+                if (onInputEnd) {
+                    colorPickerRef.current.off('input:end', onInputEnd);
+                }
+                if (onMount) {
+                    colorPickerRef.current.off('mount', onMount);
+                }
             }
-            if (onMount) {
-                colorPickerRef.current.off('mount', onMount);
+            catch (error) {
+                console.warn('Error cleaning up iro picker event listeners:', error);
             }
             // Set to null to ensure clean recreation
             colorPickerRef.current = null;
@@ -7074,38 +7120,70 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         if (!width)
             return;
-        if (!containerRef.current || colorPickerRef.current) {
-            // Clear existing picker to force recreation
-            if (colorPickerRef.current) {
-                colorPickerRef.current = null;
-            }
-        }
-        var currentContainer = createColorPicker(width);
+        var retryCount = 0;
+        var maxRetries = 3;
+        var createWithRetry = function () {
+            // Longer initial delay to ensure DOM is completely ready
+            var timeoutId = setTimeout(function () {
+                try {
+                    var result = createColorPicker(width);
+                    if (!result &&
+                        colorPickerRef.current === null &&
+                        retryCount < maxRetries) {
+                        retryCount++;
+                        // Exponential backoff: 100ms, 200ms, 400ms
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+                catch (error) {
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+            }, 100); // Increased from 50ms to 100ms
+            return function () { return clearTimeout(timeoutId); };
+        };
+        var cleanup = createWithRetry();
         return function () {
+            if (cleanup)
+                cleanup();
             cleanup();
-            // IMPORTANT: Clear DOM content to prevent visual artifacts
-            if (currentContainer) {
-                currentContainer.innerHTML = '';
-            }
         };
     }, [width, theme, createColorPicker, cleanup]);
     // useEffect for when containerWidth is used (internal ResizeObserver)
     React.useEffect(function () {
         if (width)
             return; // Don't run if width prop is provided
-        if (!containerRef.current || colorPickerRef.current) {
-            // Clear existing picker to force recreation
-            if (colorPickerRef.current) {
-                colorPickerRef.current = null;
-            }
-        }
-        var currentContainer = createColorPicker(containerWidth);
+        var retryCount = 0;
+        var maxRetries = 3;
+        var createWithRetry = function () {
+            // Longer initial delay to ensure DOM is completely ready
+            var timeoutId = setTimeout(function () {
+                try {
+                    var result = createColorPicker(containerWidth);
+                    if (!result &&
+                        colorPickerRef.current === null &&
+                        retryCount < maxRetries) {
+                        retryCount++;
+                        // Exponential backoff: 100ms, 200ms, 400ms
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+                catch (error) {
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+            }, 100); // Increased from 50ms to 100ms
+            return function () { return clearTimeout(timeoutId); };
+        };
+        var cleanup = createWithRetry();
         return function () {
+            if (cleanup)
+                cleanup();
             cleanup();
-            // IMPORTANT: Clear DOM content to prevent visual artifacts
-            if (currentContainer) {
-                currentContainer.innerHTML = '';
-            }
         };
     }, [containerWidth, theme, createColorPicker, cleanup, width]);
     // Update color when prop changes
@@ -7301,9 +7379,8 @@ var DefaultColorPanel = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var onChooseColor = function (item, index) {
-        if (index === active) {
-            return;
-        }
+        // Allow re-applying the same color (removed guard clause that prevented this)
+        // This enables users to reset back to a popular color after making changes
         if (colorType === 'gradient' && typeof item !== 'string') {
             // If this is a simplified display object (identified by dummy stops), parse the gradient properly
             if (item.stops.length === 2 &&
@@ -7481,20 +7558,37 @@ var Markers = function (_a) {
         window.addEventListener('mouseup', onDragEnd);
     };
     var onDrag = function (e) {
-        var _a;
         // Defensive check for event object
         if (!e) {
             console.warn('onDrag called with undefined event object');
             return;
         }
+        // More defensive check for component and node availability
+        if (!node || !node.current) {
+            console.warn('Unable to get bounding rect: component reference unavailable');
+            // Clean up event listeners if component is no longer mounted
+            window.removeEventListener('mousemove', onDrag);
+            window.removeEventListener('mouseup', onDragEnd);
+            return;
+        }
         var x = e.clientX || 0;
         var y = e.clientY || 0;
-        var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        var rect;
+        try {
+            rect = node.current.getBoundingClientRect();
+        }
+        catch (error) {
+            console.warn('Unable to get bounding rect for drag operation:', error);
+            // Clean up event listeners on error
+            window.removeEventListener('mousemove', onDrag);
+            window.removeEventListener('mouseup', onDragEnd);
+            return;
+        }
         if (!rect) {
-            console.warn('Unable to get bounding rect for drag operation');
+            console.warn('Unable to get bounding rect: getBoundingClientRect returned null');
             return;
         }
-        var rootDistance = y - rect.y;
+        var rootDistance = y - (rect.y || rect.top);
         // Now we know user is actually dragging
         setIsDragging(true);
         if (rootDistance > 80 && stops.length > 2) {
@@ -7510,11 +7604,33 @@ var Markers = function (_a) {
         });
     };
     var onDragEnd = function (e) {
-        var _a;
-        var x = e.clientX;
-        var y = e.clientY;
-        var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        var rootDistance = y - rect.y;
+        // Always remove listeners first, regardless of errors
+        removeListeners();
+        setIsDragging(false); // Mark as not dragging
+        // Defensive event and component checks
+        if (!e) {
+            console.warn('onDragEnd called with undefined event object');
+            return;
+        }
+        if (!node || !node.current) {
+            console.warn('onDragEnd: component reference unavailable');
+            return;
+        }
+        var x = e.clientX || 0;
+        var y = e.clientY || 0;
+        var rect;
+        try {
+            rect = node.current.getBoundingClientRect();
+        }
+        catch (error) {
+            console.warn('Unable to get bounding rect in onDragEnd:', error);
+            return;
+        }
+        if (!rect) {
+            console.warn('onDragEnd: getBoundingClientRect returned null');
+            return;
+        }
+        var rootDistance = y - (rect.y || rect.top);
         if (rootDistance > 80 && stops.length > 2) {
             setNeedDeleteActive(true);
         }
@@ -7522,8 +7638,6 @@ var Markers = function (_a) {
             x: x,
             y: y
         });
-        setIsDragging(false); // Mark as not dragging
-        removeListeners();
     };
     var onTouchStart = function (e, color) {
         setInit(false);
@@ -7556,7 +7670,7 @@ var Markers = function (_a) {
         var x = e.targetTouches[0].clientX;
         var y = e.targetTouches[0].clientY;
         var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        var rootDistance = y - rect.y;
+        var rootDistance = y - ((rect === null || rect === void 0 ? void 0 : rect.y) || (rect === null || rect === void 0 ? void 0 : rect.top) || 0);
         // Now we know user is actually dragging
         setIsDragging(true);
         if (rootDistance > 80 && stops.length > 2) {
@@ -7686,6 +7800,33 @@ var RADIALS_POS = [
     { pos: 'br', css: 'circle at right bottom', active: false }
 ];
 
+// Map aliases like 'circle at top center' to 'circle at center top', etc.
+// Also handle edge cases like numeric sizes (70, 150%) -> default to center
+var normalizeRadialPosition = function (modifier) {
+    var _a;
+    if (typeof modifier !== 'string')
+        return modifier;
+    // Handle edge cases:
+    // - Pure numeric sizes (70, 150%, 200px, etc.) -> default to center
+    // - Size keywords (closest-side, farthest-corner, etc.) -> default to center
+    if (/^\d+(%|px|em|rem)?$/.test(modifier.trim()) ||
+        /^(closest-side|closest-corner|farthest-side|farthest-corner)$/i.test(modifier.trim())) {
+        return 'circle at center';
+    }
+    // Handle standard "circle at position" or "ellipse at position" format
+    var match = modifier.match(/^(circle|ellipse) at (.+)$/);
+    if (!match) {
+        // If it doesn't match any known pattern, default to center for radial gradients
+        return 'circle at center';
+    }
+    var pos = ((_a = match[2]) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    pos = pos
+        .replace(/^top center$/i, 'center top')
+        .replace(/^bottom center$/i, 'center bottom')
+        .replace(/^left center$/i, 'center left')
+        .replace(/^right center$/i, 'center right');
+    return "".concat(match[1], " at ").concat(pos);
+};
 var GradientPanel = function (_a) {
     var color = _a.color, setColor = _a.setColor, activeColor = _a.activeColor, setActiveColor = _a.setActiveColor, setInit = _a.setInit, _b = _a.format, format = _b === void 0 ? 'rgb' : _b, _c = _a.showAlpha, showAlpha = _c === void 0 ? true : _c, _d = _a.showGradientResult, showGradientResult = _d === void 0 ? true : _d, _e = _a.showGradientStops, showGradientStops = _e === void 0 ? true : _e, _f = _a.showGradientMode, showGradientMode = _f === void 0 ? true : _f, _g = _a.showGradientAngle, showGradientAngle = _g === void 0 ? true : _g, _h = _a.showGradientPosition, showGradientPosition = _h === void 0 ? true : _h, _j = _a.allowAddGradientStops, allowAddGradientStops = _j === void 0 ? true : _j;
     var angleNode = React.useRef();
@@ -7831,10 +7972,11 @@ var GradientPanel = function (_a) {
     }, []);
     React.useEffect(function () {
         if (type === 'radial') {
-            var activePos = radialsPosition.find(function (item) { return item.css === modifier; });
-            setColor(__assign(__assign({}, color), { modifier: (activePos === null || activePos === void 0 ? void 0 : activePos.css) || modifier, gradient: "".concat(getGradient('radial', stops, (activePos === null || activePos === void 0 ? void 0 : activePos.css) || modifier, format, showAlpha)) }));
+            var normalizedModifier_1 = normalizeRadialPosition(String(modifier));
+            var activePos = RADIALS_POS.find(function (item) { return item.css === normalizedModifier_1; });
+            setColor(__assign(__assign({}, color), { modifier: (activePos === null || activePos === void 0 ? void 0 : activePos.css) || normalizedModifier_1, gradient: "".concat(getGradient('radial', stops, (activePos === null || activePos === void 0 ? void 0 : activePos.css) || normalizedModifier_1, format, showAlpha)) }));
             setRadialPosition(RADIALS_POS.map(function (item) {
-                if (item.css === modifier) {
+                if (item.css === normalizedModifier_1) {
                     return __assign(__assign({}, item), { active: true });
                 }
                 return __assign(__assign({}, item), { active: false });
@@ -7949,6 +8091,8 @@ var IroGradient = function (_a) {
     var iroPickerRef = React.useRef(null);
     var containerRef = React.useRef(null);
     var isUpdatingFromGradientStop = React.useRef(false);
+    var lastUpdateAttempt = React.useRef(0); // Track last update attempt
+    var isPickerInitialized = React.useRef(false); // Track if picker is already initialized
     var _t = __read(React.useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
     // Safe extraction of stop data with fallbacks
     var safeStops = Array.isArray(stops) && stops.length > 0
@@ -8022,17 +8166,37 @@ var IroGradient = function (_a) {
     // Update iro picker color
     var updateIroPickerColor = React.useCallback(function (colorData, retryCount) {
         if (retryCount === void 0) { retryCount = 0; }
-        var maxRetries = 5;
-        // Validate input data
-        if (!colorData || !colorData.hex || typeof colorData.alpha !== 'number') {
-            console.log('❌ Invalid color data provided to updateIroPickerColor:', colorData);
+        var maxRetries = 3; // Reduced from 5 to limit spam
+        // Enhanced validation for color data
+        if (!colorData ||
+            typeof colorData.hex !== 'string' ||
+            typeof colorData.alpha !== 'number') {
             return; // Early return if invalid data
         }
+        // Throttle rapid calls - but allow calls if color is significantly different
+        var now = Date.now();
+        var timeSinceLastUpdate = now - lastUpdateAttempt.current;
+        // Allow immediate update if throttling time has passed OR if it's a significant color change
+        if (timeSinceLastUpdate < 100) {
+            return;
+        }
+        lastUpdateAttempt.current = now;
         var updateColor = function () {
-            var _a, _b, _c, _d, _e, _f;
+            // Enhanced picker readiness check
+            var isPickerReady = function () {
+                try {
+                    return (iroPickerRef.current &&
+                        iroPickerRef.current.colorPicker &&
+                        iroPickerRef.current.colorPicker.color &&
+                        typeof iroPickerRef.current.colorPicker.color.set === 'function');
+                }
+                catch (error) {
+                    console.warn('Error checking picker readiness:', error);
+                    return false;
+                }
+            };
             // Check if picker is properly initialized
-            if (((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) &&
-                iroPickerRef.current.colorPicker.color) {
+            if (isPickerReady()) {
                 var iroColor = showAlpha
                     ? {
                         r: parseInt(colorData.hex.slice(1, 3), 16),
@@ -8044,52 +8208,33 @@ var IroGradient = function (_a) {
                 try {
                     // Set flag to prevent circular updates
                     isUpdatingFromGradientStop.current = true;
-                    console.log('🎨 Updating iro picker in gradient mode (attempt:', retryCount + 1, '):', {
-                        hex: colorData.hex,
-                        alpha: colorData.alpha,
-                        iroColor: iroColor,
-                        pickerReady: !!((_c = (_b = iroPickerRef.current) === null || _b === void 0 ? void 0 : _b.colorPicker) === null || _c === void 0 ? void 0 : _c.color)
-                    });
                     iroPickerRef.current.colorPicker.color.set(iroColor);
                     // Reset flag after a short delay
                     setTimeout(function () {
                         isUpdatingFromGradientStop.current = false;
                     }, 100);
-                    console.log('✅ Successfully updated iro picker');
                 }
                 catch (error) {
                     isUpdatingFromGradientStop.current = false;
-                    console.warn('❌ Error updating iro color picker:', error);
-                    // Retry with exponential backoff
+                    // Retry with exponential backoff only for actual errors, not readiness issues
                     if (retryCount < maxRetries) {
-                        var delay = 100 * Math.pow(2, retryCount); // 100ms, 200ms, 400ms, etc.
-                        console.log("\uD83D\uDD04 Retrying in ".concat(delay, "ms (attempt ").concat(retryCount + 2, "/").concat(maxRetries + 1, ")"));
+                        var delay = 150 + retryCount * 100; // 150ms, 250ms, 350ms
                         setTimeout(function () {
                             updateIroPickerColor(colorData, retryCount + 1);
                         }, delay);
                     }
-                    else {
-                        console.error('💥 Max retries reached, giving up on iro picker update');
-                    }
                 }
             }
             else {
-                console.log('⏳ Iro picker not ready, retrying...', {
-                    hasRef: !!iroPickerRef.current,
-                    hasColorPicker: !!((_d = iroPickerRef.current) === null || _d === void 0 ? void 0 : _d.colorPicker),
-                    hasColor: !!((_f = (_e = iroPickerRef.current) === null || _e === void 0 ? void 0 : _e.colorPicker) === null || _f === void 0 ? void 0 : _f.color),
-                    attempt: retryCount + 1
-                });
-                // If picker is not ready, retry with increasing delays
-                if (retryCount < maxRetries) {
-                    var delay = 50 + retryCount * 100; // 50ms, 150ms, 250ms, etc.
+                // If picker is not ready, wait longer before retrying
+                if (retryCount < 3) {
+                    // Reduced max retries for readiness checks
+                    // Longer delays for picker readiness: 200ms, 500ms, 1000ms
+                    var delay = 200 + retryCount * 300;
                     setTimeout(function () {
                         updateIroPickerColor(colorData, retryCount + 1);
                     }, delay);
                 }
-                else {
-                    console.error('💥 Iro picker never became ready, giving up');
-                }
             }
         };
         updateColor();
@@ -8103,11 +8248,16 @@ var IroGradient = function (_a) {
     // Initialize iro picker with current activeColor when component mounts or picker becomes ready
     React.useEffect(function () {
         var initializeIroPicker = function () {
-            var _a, _b;
-            if (((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color) &&
+            var _a, _b, _c, _d;
+            // Skip if picker is already initialized and working
+            if (isPickerInitialized.current &&
+                ((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color)) {
+                return;
+            }
+            if (((_d = (_c = iroPickerRef.current) === null || _c === void 0 ? void 0 : _c.colorPicker) === null || _d === void 0 ? void 0 : _d.color) &&
                 activeColor.hex &&
                 typeof activeColor.alpha === 'number') {
-                console.log('🚀 Initializing iro picker with activeColor:', activeColor);
+                isPickerInitialized.current = true;
                 // Wait a bit for the picker to be fully ready, then update
                 setTimeout(function () {
                     updateIroPickerColor({
@@ -8117,49 +8267,45 @@ var IroGradient = function (_a) {
                 }, 200);
             }
         };
-        // Try immediately
-        initializeIroPicker();
-        // Also try after a delay in case picker wasn't ready
-        var timeoutId = setTimeout(initializeIroPicker, 500);
-        return function () { return clearTimeout(timeoutId); };
+        // Only initialize if not already initialized
+        if (!isPickerInitialized.current) {
+            // Try immediately
+            initializeIroPicker();
+            // Also try after a delay in case picker wasn't ready
+            var timeoutId_1 = setTimeout(initializeIroPicker, 500);
+            return function () { return clearTimeout(timeoutId_1); };
+        }
+        // Return empty cleanup function when no initialization is needed
+        return function () { };
     }, [activeColor, updateIroPickerColor]); // Initialize when activeColor or updateFunction changes
     // Custom setActiveColor that also updates iro picker
     var handleSetActiveColor = React.useCallback(function (newActiveColor) {
-        console.log('🎯 Gradient stop clicked, setting active color:', newActiveColor);
-        setActiveColor(newActiveColor);
-        // Validate before updating iro picker
-        if (newActiveColor.hex && typeof newActiveColor.alpha === 'number') {
-            // Force immediate update of iro picker with longer delay for first-time reliability
-            setTimeout(function () {
-                updateIroPickerColor({
-                    hex: newActiveColor.hex,
-                    alpha: newActiveColor.alpha
-                });
-            }, 50); // Increased from 5ms to 50ms for better first-time success
+        // Handle both direct values and function updaters
+        if (typeof newActiveColor === 'function') {
+            // This is a function updater - call setActiveColor properly
+            setActiveColor(function (prev) {
+                var updated = newActiveColor(prev);
+                // Note: useEffect will handle iro picker update automatically
+                return updated;
+            });
         }
         else {
-            console.log('⚠️ Skipping iro picker update in handleSetActiveColor - invalid data:', newActiveColor);
+            // This is a direct value - just update state, useEffect will handle iro picker update
+            setActiveColor(newActiveColor);
         }
-    }, [updateIroPickerColor]);
-    // Update iro picker when activeColor changes (e.g., clicking gradient stops)
+    }, [] // No dependencies needed since we're just calling setState
+    );
+    // Update iro picker when activeColor's hex or alpha changes (not location)
     React.useEffect(function () {
-        console.log('🔄 ActiveColor changed in gradient:', {
-            hex: activeColor.hex,
-            alpha: activeColor.alpha,
-            index: activeColor.index,
-            loc: activeColor.loc
-        });
+        var hex = activeColor.hex, alpha = activeColor.alpha;
         // Validate activeColor before proceeding
-        if (!activeColor.hex || typeof activeColor.alpha !== 'number') {
-            console.log('⚠️ Skipping iro picker update - invalid activeColor:', activeColor);
+        if (!hex || typeof alpha !== 'number') {
             return;
         }
-        // Add a small delay to ensure the activeColor state has fully updated
-        var timeoutId = setTimeout(function () {
-            updateIroPickerColor({ hex: activeColor.hex, alpha: activeColor.alpha });
-        }, 10);
-        return function () { return clearTimeout(timeoutId); };
-    }, [activeColor, updateIroPickerColor]);
+        // Update iro picker immediately when color changes
+        updateIroPickerColor({ hex: hex, alpha: alpha });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeColor.hex, activeColor.alpha, updateIroPickerColor]); // Only depend on hex and alpha, not full activeColor
     var updateGradient = React.useCallback(function (newColor) {
         if (Array.isArray(newColor)) {
             // Handle the case where it's called with stops array
@@ -8220,7 +8366,6 @@ var IroGradient = function (_a) {
     };
     // Reset to initial color
     var handleResetColor = function () {
-        var _a;
         var initialParsed = parseGradient(initialValue.current);
         setColor(initialParsed);
         // Reset active color to the last stop of the initial gradient
@@ -8232,13 +8377,7 @@ var IroGradient = function (_a) {
             index: initialParsed.stops.length - 1
         };
         setActiveColor(newActiveColor);
-        // Update iro picker if available
-        if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
-            updateIroPickerColor({
-                hex: newActiveColor.hex,
-                alpha: newActiveColor.alpha
-            });
-        }
+        // Note: useEffect will handle iro picker update automatically when activeColor changes
         // Call onChange with initial value
         onChange(initialValue.current);
         // Call onReset callback if provided
@@ -8257,11 +8396,7 @@ var IroGradient = function (_a) {
                 index: newColor.stops.length - 1
             };
             setActiveColor(newActiveColor);
-            // Update the iro color picker
-            updateIroPickerColor({
-                hex: newActiveColor.hex,
-                alpha: newActiveColor.alpha
-            });
+            // Note: useEffect will handle iro picker update automatically when activeColor changes
         }
     };
     var handleIroColorChange = function (iroColor) {
@@ -8342,7 +8477,6 @@ var IroSolidColorPicker = function (_a) {
     // Update ref when state changes
     React.useEffect(function () {
         pickerWidthRef.current = pickerWidth;
-        console.log('📊 Picker width state changed to:', pickerWidth);
     }, [pickerWidth]);
     // Calculate responsive width based on container
     var getResponsiveWidth = function (containerWidth) {
@@ -8370,7 +8504,6 @@ var IroSolidColorPicker = function (_a) {
                     var newWidth = Math.floor(getResponsiveWidth(rect.width));
                     if (Math.abs(newWidth - pickerWidthRef.current) > 5) {
                         // Only update if significant change
-                        console.log('� Size update:', { container: rect.width, newWidth: newWidth });
                         setPickerWidth(newWidth);
                     }
                 }
@@ -8397,20 +8530,17 @@ var IroSolidColorPicker = function (_a) {
         }
         var debug = window.debugPicker;
         debug.getCurrentWidth = function () {
-            console.log('Current picker width:', pickerWidth);
             return pickerWidth;
         };
         debug.getContainerWidth = function () {
             var _a;
             var width = (_a = node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-            console.log('Current container width:', width);
             return width;
         };
         debug.forceResize = function () {
             if (node.current) {
                 var rect = node.current.getBoundingClientRect();
                 var newWidth = Math.floor(getResponsiveWidth(rect.width));
-                console.log('🔧 Force resize:', { container: rect.width, newWidth: newWidth });
                 setPickerWidth(newWidth);
             }
         };
@@ -8455,11 +8585,6 @@ var IroSolidColorPicker = function (_a) {
         }
     }, [value, showAlpha]);
     var handleColorChange = function (iroColor) {
-        console.log('🎨 Alpha slider changed!', {
-            hex: iroColor.hexString,
-            alpha: iroColor.alpha,
-            alphaPercent: Math.round(iroColor.alpha * 100)
-        });
         var newColor = {
             hex: iroColor.hexString,
             alpha: Math.round(iroColor.alpha * 100)