react-iro-gradient-picker 1.2.11 → 1.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -6912,16 +6912,42 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
6912
6912
  };
6913
6913
  // eslint-disable-next-line react-hooks/exhaustive-deps
6914
6914
  }, [padding, margin]); // Remove width from dependencies to prevent recreation
6915
+ // Add state to track when picker is ready (removed as it's set but not used)
6915
6916
  React.useImperativeHandle(ref, function () { return ({
6916
6917
  colorPicker: colorPickerRef.current
6917
6918
  }); });
6918
- // Create a shared picker creation function
6919
+ // Create a shared picker creation function with enhanced error handling
6919
6920
  var createColorPicker = React.useCallback(function (pickerWidth) {
6920
- if (!containerRef.current || colorPickerRef.current)
6921
+ if (!containerRef.current) {
6922
+ console.warn('IroColorPicker: Container ref not available, skipping creation');
6921
6923
  return;
6924
+ }
6925
+ // More thorough check for existing picker
6926
+ if (colorPickerRef.current) {
6927
+ try {
6928
+ // Check if picker is still valid and functioning
6929
+ if (colorPickerRef.current.color &&
6930
+ typeof colorPickerRef.current.color.hexString === 'string') {
6931
+ return;
6932
+ }
6933
+ }
6934
+ catch (error) { }
6935
+ }
6936
+ // Clean up any existing picker first
6937
+ if (colorPickerRef.current) {
6938
+ try {
6939
+ // Proper cleanup of event listeners and resources
6940
+ if (typeof colorPickerRef.current.off === 'function') {
6941
+ colorPickerRef.current.off();
6942
+ }
6943
+ colorPickerRef.current = null;
6944
+ }
6945
+ catch (error) {
6946
+ console.warn('IroColorPicker: Error cleaning up existing picker:', error);
6947
+ }
6948
+ }
6922
6949
  // Capture the container reference for cleanup
6923
6950
  var currentContainer = containerRef.current;
6924
- console.log('🔧 IroColorPicker recreating picker - width prop:', width, 'containerWidth:', containerWidth);
6925
6951
  // IMPORTANT: Clear any existing DOM content first
6926
6952
  if (currentContainer) {
6927
6953
  currentContainer.innerHTML = '';
@@ -6929,6 +6955,7 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
6929
6955
  // Set theme-appropriate border color and background
6930
6956
  var themeBorderColor = theme === 'light' ? '#ffffff' : '#334155';
6931
6957
  var themeBorderWidth = theme === 'light' ? 1 : 0;
6958
+ // Enhanced options with better default values
6932
6959
  var options = {
6933
6960
  width: pickerWidth,
6934
6961
  color: colors ? undefined : color,
@@ -6944,20 +6971,36 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
6944
6971
  handleRadius: handleRadius,
6945
6972
  activeHandleRadius: activeHandleRadius || handleRadius,
6946
6973
  handleSvg: handleSvg,
6947
- handleProps: handleProps,
6974
+ handleProps: handleProps || { x: 0, y: 0 }, // Ensure defaults are always set
6948
6975
  wheelLightness: wheelLightness,
6949
6976
  wheelAngle: wheelAngle,
6950
6977
  wheelDirection: wheelDirection,
6951
6978
  sliderSize: sliderSize,
6952
6979
  boxHeight: boxHeight
6953
6980
  };
6954
- // Remove undefined values
6981
+ // Remove undefined values but preserve explicit defaults
6955
6982
  Object.keys(options).forEach(function (key) {
6956
6983
  if (options[key] === undefined) {
6957
6984
  delete options[key];
6958
6985
  }
6959
6986
  });
6960
- colorPickerRef.current = new iro$1.ColorPicker(containerRef.current, options);
6987
+ try {
6988
+ // Create the picker with enhanced error handling
6989
+ colorPickerRef.current = new iro$1.ColorPicker(containerRef.current, options);
6990
+ // Validate the picker was created successfully
6991
+ if (!colorPickerRef.current || !colorPickerRef.current.color) {
6992
+ throw new Error('ColorPicker was not created properly');
6993
+ }
6994
+ // Update picker ready state and notify parent
6995
+ // Force update of imperative handle by calling onMount callback
6996
+ if (onMount) {
6997
+ setTimeout(function () { return onMount(colorPickerRef.current); }, 0);
6998
+ }
6999
+ }
7000
+ catch (error) {
7001
+ colorPickerRef.current = null;
7002
+ return null; // Return null to indicate failure
7003
+ }
6961
7004
  // Apply theme styles to iro.js elements after creation
6962
7005
  var applyThemeStyles = function () {
6963
7006
  if (!containerRef.current)
@@ -7033,31 +7076,34 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
7033
7076
  onInputStart,
7034
7077
  onInputMove,
7035
7078
  onInputEnd,
7036
- onMount,
7037
- width,
7038
- containerWidth
7079
+ onMount
7039
7080
  ]);
7040
7081
  // Cleanup function
7041
7082
  var cleanup = React.useCallback(function () {
7042
7083
  if (colorPickerRef.current) {
7043
- // Clean up event listeners
7044
- if (onColorChange) {
7045
- colorPickerRef.current.off('color:change', onColorChange);
7046
- }
7047
- if (onInputChange) {
7048
- colorPickerRef.current.off('input:change', onInputChange);
7049
- }
7050
- if (onInputStart) {
7051
- colorPickerRef.current.off('input:start', onInputStart);
7052
- }
7053
- if (onInputMove) {
7054
- colorPickerRef.current.off('input:move', onInputMove);
7055
- }
7056
- if (onInputEnd) {
7057
- colorPickerRef.current.off('input:end', onInputEnd);
7084
+ try {
7085
+ // Clean up event listeners
7086
+ if (onColorChange) {
7087
+ colorPickerRef.current.off('color:change', onColorChange);
7088
+ }
7089
+ if (onInputChange) {
7090
+ colorPickerRef.current.off('input:change', onInputChange);
7091
+ }
7092
+ if (onInputStart) {
7093
+ colorPickerRef.current.off('input:start', onInputStart);
7094
+ }
7095
+ if (onInputMove) {
7096
+ colorPickerRef.current.off('input:move', onInputMove);
7097
+ }
7098
+ if (onInputEnd) {
7099
+ colorPickerRef.current.off('input:end', onInputEnd);
7100
+ }
7101
+ if (onMount) {
7102
+ colorPickerRef.current.off('mount', onMount);
7103
+ }
7058
7104
  }
7059
- if (onMount) {
7060
- colorPickerRef.current.off('mount', onMount);
7105
+ catch (error) {
7106
+ console.warn('Error cleaning up iro picker event listeners:', error);
7061
7107
  }
7062
7108
  // Set to null to ensure clean recreation
7063
7109
  colorPickerRef.current = null;
@@ -7074,38 +7120,70 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
7074
7120
  React.useEffect(function () {
7075
7121
  if (!width)
7076
7122
  return;
7077
- if (!containerRef.current || colorPickerRef.current) {
7078
- // Clear existing picker to force recreation
7079
- if (colorPickerRef.current) {
7080
- colorPickerRef.current = null;
7081
- }
7082
- }
7083
- var currentContainer = createColorPicker(width);
7123
+ var retryCount = 0;
7124
+ var maxRetries = 3;
7125
+ var createWithRetry = function () {
7126
+ // Longer initial delay to ensure DOM is completely ready
7127
+ var timeoutId = setTimeout(function () {
7128
+ try {
7129
+ var result = createColorPicker(width);
7130
+ if (!result &&
7131
+ colorPickerRef.current === null &&
7132
+ retryCount < maxRetries) {
7133
+ retryCount++;
7134
+ // Exponential backoff: 100ms, 200ms, 400ms
7135
+ setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
7136
+ }
7137
+ }
7138
+ catch (error) {
7139
+ if (retryCount < maxRetries) {
7140
+ retryCount++;
7141
+ setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
7142
+ }
7143
+ }
7144
+ }, 100); // Increased from 50ms to 100ms
7145
+ return function () { return clearTimeout(timeoutId); };
7146
+ };
7147
+ var cleanup = createWithRetry();
7084
7148
  return function () {
7149
+ if (cleanup)
7150
+ cleanup();
7085
7151
  cleanup();
7086
- // IMPORTANT: Clear DOM content to prevent visual artifacts
7087
- if (currentContainer) {
7088
- currentContainer.innerHTML = '';
7089
- }
7090
7152
  };
7091
7153
  }, [width, theme, createColorPicker, cleanup]);
7092
7154
  // useEffect for when containerWidth is used (internal ResizeObserver)
7093
7155
  React.useEffect(function () {
7094
7156
  if (width)
7095
7157
  return; // Don't run if width prop is provided
7096
- if (!containerRef.current || colorPickerRef.current) {
7097
- // Clear existing picker to force recreation
7098
- if (colorPickerRef.current) {
7099
- colorPickerRef.current = null;
7100
- }
7101
- }
7102
- var currentContainer = createColorPicker(containerWidth);
7158
+ var retryCount = 0;
7159
+ var maxRetries = 3;
7160
+ var createWithRetry = function () {
7161
+ // Longer initial delay to ensure DOM is completely ready
7162
+ var timeoutId = setTimeout(function () {
7163
+ try {
7164
+ var result = createColorPicker(containerWidth);
7165
+ if (!result &&
7166
+ colorPickerRef.current === null &&
7167
+ retryCount < maxRetries) {
7168
+ retryCount++;
7169
+ // Exponential backoff: 100ms, 200ms, 400ms
7170
+ setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
7171
+ }
7172
+ }
7173
+ catch (error) {
7174
+ if (retryCount < maxRetries) {
7175
+ retryCount++;
7176
+ setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
7177
+ }
7178
+ }
7179
+ }, 100); // Increased from 50ms to 100ms
7180
+ return function () { return clearTimeout(timeoutId); };
7181
+ };
7182
+ var cleanup = createWithRetry();
7103
7183
  return function () {
7184
+ if (cleanup)
7185
+ cleanup();
7104
7186
  cleanup();
7105
- // IMPORTANT: Clear DOM content to prevent visual artifacts
7106
- if (currentContainer) {
7107
- currentContainer.innerHTML = '';
7108
- }
7109
7187
  };
7110
7188
  }, [containerWidth, theme, createColorPicker, cleanup, width]);
7111
7189
  // Update color when prop changes
@@ -7301,9 +7379,8 @@ var DefaultColorPanel = function (_a) {
7301
7379
  // eslint-disable-next-line react-hooks/exhaustive-deps
7302
7380
  }, []);
7303
7381
  var onChooseColor = function (item, index) {
7304
- if (index === active) {
7305
- return;
7306
- }
7382
+ // Allow re-applying the same color (removed guard clause that prevented this)
7383
+ // This enables users to reset back to a popular color after making changes
7307
7384
  if (colorType === 'gradient' && typeof item !== 'string') {
7308
7385
  // If this is a simplified display object (identified by dummy stops), parse the gradient properly
7309
7386
  if (item.stops.length === 2 &&
@@ -7481,20 +7558,37 @@ var Markers = function (_a) {
7481
7558
  window.addEventListener('mouseup', onDragEnd);
7482
7559
  };
7483
7560
  var onDrag = function (e) {
7484
- var _a;
7485
7561
  // Defensive check for event object
7486
7562
  if (!e) {
7487
7563
  console.warn('onDrag called with undefined event object');
7488
7564
  return;
7489
7565
  }
7566
+ // More defensive check for component and node availability
7567
+ if (!node || !node.current) {
7568
+ console.warn('Unable to get bounding rect: component reference unavailable');
7569
+ // Clean up event listeners if component is no longer mounted
7570
+ window.removeEventListener('mousemove', onDrag);
7571
+ window.removeEventListener('mouseup', onDragEnd);
7572
+ return;
7573
+ }
7490
7574
  var x = e.clientX || 0;
7491
7575
  var y = e.clientY || 0;
7492
- var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
7576
+ var rect;
7577
+ try {
7578
+ rect = node.current.getBoundingClientRect();
7579
+ }
7580
+ catch (error) {
7581
+ console.warn('Unable to get bounding rect for drag operation:', error);
7582
+ // Clean up event listeners on error
7583
+ window.removeEventListener('mousemove', onDrag);
7584
+ window.removeEventListener('mouseup', onDragEnd);
7585
+ return;
7586
+ }
7493
7587
  if (!rect) {
7494
- console.warn('Unable to get bounding rect for drag operation');
7588
+ console.warn('Unable to get bounding rect: getBoundingClientRect returned null');
7495
7589
  return;
7496
7590
  }
7497
- var rootDistance = y - rect.y;
7591
+ var rootDistance = y - (rect.y || rect.top);
7498
7592
  // Now we know user is actually dragging
7499
7593
  setIsDragging(true);
7500
7594
  if (rootDistance > 80 && stops.length > 2) {
@@ -7510,11 +7604,33 @@ var Markers = function (_a) {
7510
7604
  });
7511
7605
  };
7512
7606
  var onDragEnd = function (e) {
7513
- var _a;
7514
- var x = e.clientX;
7515
- var y = e.clientY;
7516
- var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
7517
- var rootDistance = y - rect.y;
7607
+ // Always remove listeners first, regardless of errors
7608
+ removeListeners();
7609
+ setIsDragging(false); // Mark as not dragging
7610
+ // Defensive event and component checks
7611
+ if (!e) {
7612
+ console.warn('onDragEnd called with undefined event object');
7613
+ return;
7614
+ }
7615
+ if (!node || !node.current) {
7616
+ console.warn('onDragEnd: component reference unavailable');
7617
+ return;
7618
+ }
7619
+ var x = e.clientX || 0;
7620
+ var y = e.clientY || 0;
7621
+ var rect;
7622
+ try {
7623
+ rect = node.current.getBoundingClientRect();
7624
+ }
7625
+ catch (error) {
7626
+ console.warn('Unable to get bounding rect in onDragEnd:', error);
7627
+ return;
7628
+ }
7629
+ if (!rect) {
7630
+ console.warn('onDragEnd: getBoundingClientRect returned null');
7631
+ return;
7632
+ }
7633
+ var rootDistance = y - (rect.y || rect.top);
7518
7634
  if (rootDistance > 80 && stops.length > 2) {
7519
7635
  setNeedDeleteActive(true);
7520
7636
  }
@@ -7522,8 +7638,6 @@ var Markers = function (_a) {
7522
7638
  x: x,
7523
7639
  y: y
7524
7640
  });
7525
- setIsDragging(false); // Mark as not dragging
7526
- removeListeners();
7527
7641
  };
7528
7642
  var onTouchStart = function (e, color) {
7529
7643
  setInit(false);
@@ -7556,7 +7670,7 @@ var Markers = function (_a) {
7556
7670
  var x = e.targetTouches[0].clientX;
7557
7671
  var y = e.targetTouches[0].clientY;
7558
7672
  var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
7559
- var rootDistance = y - rect.y;
7673
+ var rootDistance = y - ((rect === null || rect === void 0 ? void 0 : rect.y) || (rect === null || rect === void 0 ? void 0 : rect.top) || 0);
7560
7674
  // Now we know user is actually dragging
7561
7675
  setIsDragging(true);
7562
7676
  if (rootDistance > 80 && stops.length > 2) {
@@ -7686,6 +7800,33 @@ var RADIALS_POS = [
7686
7800
  { pos: 'br', css: 'circle at right bottom', active: false }
7687
7801
  ];
7688
7802
 
7803
+ // Map aliases like 'circle at top center' to 'circle at center top', etc.
7804
+ // Also handle edge cases like numeric sizes (70, 150%) -> default to center
7805
+ var normalizeRadialPosition = function (modifier) {
7806
+ var _a;
7807
+ if (typeof modifier !== 'string')
7808
+ return modifier;
7809
+ // Handle edge cases:
7810
+ // - Pure numeric sizes (70, 150%, 200px, etc.) -> default to center
7811
+ // - Size keywords (closest-side, farthest-corner, etc.) -> default to center
7812
+ if (/^\d+(%|px|em|rem)?$/.test(modifier.trim()) ||
7813
+ /^(closest-side|closest-corner|farthest-side|farthest-corner)$/i.test(modifier.trim())) {
7814
+ return 'circle at center';
7815
+ }
7816
+ // Handle standard "circle at position" or "ellipse at position" format
7817
+ var match = modifier.match(/^(circle|ellipse) at (.+)$/);
7818
+ if (!match) {
7819
+ // If it doesn't match any known pattern, default to center for radial gradients
7820
+ return 'circle at center';
7821
+ }
7822
+ var pos = ((_a = match[2]) === null || _a === void 0 ? void 0 : _a.trim()) || '';
7823
+ pos = pos
7824
+ .replace(/^top center$/i, 'center top')
7825
+ .replace(/^bottom center$/i, 'center bottom')
7826
+ .replace(/^left center$/i, 'center left')
7827
+ .replace(/^right center$/i, 'center right');
7828
+ return "".concat(match[1], " at ").concat(pos);
7829
+ };
7689
7830
  var GradientPanel = function (_a) {
7690
7831
  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;
7691
7832
  var angleNode = React.useRef();
@@ -7831,10 +7972,11 @@ var GradientPanel = function (_a) {
7831
7972
  }, []);
7832
7973
  React.useEffect(function () {
7833
7974
  if (type === 'radial') {
7834
- var activePos = radialsPosition.find(function (item) { return item.css === modifier; });
7835
- 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)) }));
7975
+ var normalizedModifier_1 = normalizeRadialPosition(String(modifier));
7976
+ var activePos = RADIALS_POS.find(function (item) { return item.css === normalizedModifier_1; });
7977
+ 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)) }));
7836
7978
  setRadialPosition(RADIALS_POS.map(function (item) {
7837
- if (item.css === modifier) {
7979
+ if (item.css === normalizedModifier_1) {
7838
7980
  return __assign(__assign({}, item), { active: true });
7839
7981
  }
7840
7982
  return __assign(__assign({}, item), { active: false });
@@ -7949,6 +8091,8 @@ var IroGradient = function (_a) {
7949
8091
  var iroPickerRef = React.useRef(null);
7950
8092
  var containerRef = React.useRef(null);
7951
8093
  var isUpdatingFromGradientStop = React.useRef(false);
8094
+ var lastUpdateAttempt = React.useRef(0); // Track last update attempt
8095
+ var isPickerInitialized = React.useRef(false); // Track if picker is already initialized
7952
8096
  var _t = __read(React.useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
7953
8097
  // Safe extraction of stop data with fallbacks
7954
8098
  var safeStops = Array.isArray(stops) && stops.length > 0
@@ -8022,17 +8166,37 @@ var IroGradient = function (_a) {
8022
8166
  // Update iro picker color
8023
8167
  var updateIroPickerColor = React.useCallback(function (colorData, retryCount) {
8024
8168
  if (retryCount === void 0) { retryCount = 0; }
8025
- var maxRetries = 5;
8026
- // Validate input data
8027
- if (!colorData || !colorData.hex || typeof colorData.alpha !== 'number') {
8028
- console.log('❌ Invalid color data provided to updateIroPickerColor:', colorData);
8169
+ var maxRetries = 3; // Reduced from 5 to limit spam
8170
+ // Enhanced validation for color data
8171
+ if (!colorData ||
8172
+ typeof colorData.hex !== 'string' ||
8173
+ typeof colorData.alpha !== 'number') {
8029
8174
  return; // Early return if invalid data
8030
8175
  }
8176
+ // Throttle rapid calls - but allow calls if color is significantly different
8177
+ var now = Date.now();
8178
+ var timeSinceLastUpdate = now - lastUpdateAttempt.current;
8179
+ // Allow immediate update if throttling time has passed OR if it's a significant color change
8180
+ if (timeSinceLastUpdate < 100) {
8181
+ return;
8182
+ }
8183
+ lastUpdateAttempt.current = now;
8031
8184
  var updateColor = function () {
8032
- var _a, _b, _c, _d, _e, _f;
8185
+ // Enhanced picker readiness check
8186
+ var isPickerReady = function () {
8187
+ try {
8188
+ return (iroPickerRef.current &&
8189
+ iroPickerRef.current.colorPicker &&
8190
+ iroPickerRef.current.colorPicker.color &&
8191
+ typeof iroPickerRef.current.colorPicker.color.set === 'function');
8192
+ }
8193
+ catch (error) {
8194
+ console.warn('Error checking picker readiness:', error);
8195
+ return false;
8196
+ }
8197
+ };
8033
8198
  // Check if picker is properly initialized
8034
- if (((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) &&
8035
- iroPickerRef.current.colorPicker.color) {
8199
+ if (isPickerReady()) {
8036
8200
  var iroColor = showAlpha
8037
8201
  ? {
8038
8202
  r: parseInt(colorData.hex.slice(1, 3), 16),
@@ -8044,52 +8208,33 @@ var IroGradient = function (_a) {
8044
8208
  try {
8045
8209
  // Set flag to prevent circular updates
8046
8210
  isUpdatingFromGradientStop.current = true;
8047
- console.log('🎨 Updating iro picker in gradient mode (attempt:', retryCount + 1, '):', {
8048
- hex: colorData.hex,
8049
- alpha: colorData.alpha,
8050
- iroColor: iroColor,
8051
- pickerReady: !!((_c = (_b = iroPickerRef.current) === null || _b === void 0 ? void 0 : _b.colorPicker) === null || _c === void 0 ? void 0 : _c.color)
8052
- });
8053
8211
  iroPickerRef.current.colorPicker.color.set(iroColor);
8054
8212
  // Reset flag after a short delay
8055
8213
  setTimeout(function () {
8056
8214
  isUpdatingFromGradientStop.current = false;
8057
8215
  }, 100);
8058
- console.log('✅ Successfully updated iro picker');
8059
8216
  }
8060
8217
  catch (error) {
8061
8218
  isUpdatingFromGradientStop.current = false;
8062
- console.warn('❌ Error updating iro color picker:', error);
8063
- // Retry with exponential backoff
8219
+ // Retry with exponential backoff only for actual errors, not readiness issues
8064
8220
  if (retryCount < maxRetries) {
8065
- var delay = 100 * Math.pow(2, retryCount); // 100ms, 200ms, 400ms, etc.
8066
- console.log("\uD83D\uDD04 Retrying in ".concat(delay, "ms (attempt ").concat(retryCount + 2, "/").concat(maxRetries + 1, ")"));
8221
+ var delay = 150 + retryCount * 100; // 150ms, 250ms, 350ms
8067
8222
  setTimeout(function () {
8068
8223
  updateIroPickerColor(colorData, retryCount + 1);
8069
8224
  }, delay);
8070
8225
  }
8071
- else {
8072
- console.error('💥 Max retries reached, giving up on iro picker update');
8073
- }
8074
8226
  }
8075
8227
  }
8076
8228
  else {
8077
- console.log('⏳ Iro picker not ready, retrying...', {
8078
- hasRef: !!iroPickerRef.current,
8079
- hasColorPicker: !!((_d = iroPickerRef.current) === null || _d === void 0 ? void 0 : _d.colorPicker),
8080
- hasColor: !!((_f = (_e = iroPickerRef.current) === null || _e === void 0 ? void 0 : _e.colorPicker) === null || _f === void 0 ? void 0 : _f.color),
8081
- attempt: retryCount + 1
8082
- });
8083
- // If picker is not ready, retry with increasing delays
8084
- if (retryCount < maxRetries) {
8085
- var delay = 50 + retryCount * 100; // 50ms, 150ms, 250ms, etc.
8229
+ // If picker is not ready, wait longer before retrying
8230
+ if (retryCount < 3) {
8231
+ // Reduced max retries for readiness checks
8232
+ // Longer delays for picker readiness: 200ms, 500ms, 1000ms
8233
+ var delay = 200 + retryCount * 300;
8086
8234
  setTimeout(function () {
8087
8235
  updateIroPickerColor(colorData, retryCount + 1);
8088
8236
  }, delay);
8089
8237
  }
8090
- else {
8091
- console.error('💥 Iro picker never became ready, giving up');
8092
- }
8093
8238
  }
8094
8239
  };
8095
8240
  updateColor();
@@ -8103,11 +8248,16 @@ var IroGradient = function (_a) {
8103
8248
  // Initialize iro picker with current activeColor when component mounts or picker becomes ready
8104
8249
  React.useEffect(function () {
8105
8250
  var initializeIroPicker = function () {
8106
- var _a, _b;
8107
- if (((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color) &&
8251
+ var _a, _b, _c, _d;
8252
+ // Skip if picker is already initialized and working
8253
+ if (isPickerInitialized.current &&
8254
+ ((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color)) {
8255
+ return;
8256
+ }
8257
+ if (((_d = (_c = iroPickerRef.current) === null || _c === void 0 ? void 0 : _c.colorPicker) === null || _d === void 0 ? void 0 : _d.color) &&
8108
8258
  activeColor.hex &&
8109
8259
  typeof activeColor.alpha === 'number') {
8110
- console.log('🚀 Initializing iro picker with activeColor:', activeColor);
8260
+ isPickerInitialized.current = true;
8111
8261
  // Wait a bit for the picker to be fully ready, then update
8112
8262
  setTimeout(function () {
8113
8263
  updateIroPickerColor({
@@ -8117,49 +8267,45 @@ var IroGradient = function (_a) {
8117
8267
  }, 200);
8118
8268
  }
8119
8269
  };
8120
- // Try immediately
8121
- initializeIroPicker();
8122
- // Also try after a delay in case picker wasn't ready
8123
- var timeoutId = setTimeout(initializeIroPicker, 500);
8124
- return function () { return clearTimeout(timeoutId); };
8270
+ // Only initialize if not already initialized
8271
+ if (!isPickerInitialized.current) {
8272
+ // Try immediately
8273
+ initializeIroPicker();
8274
+ // Also try after a delay in case picker wasn't ready
8275
+ var timeoutId_1 = setTimeout(initializeIroPicker, 500);
8276
+ return function () { return clearTimeout(timeoutId_1); };
8277
+ }
8278
+ // Return empty cleanup function when no initialization is needed
8279
+ return function () { };
8125
8280
  }, [activeColor, updateIroPickerColor]); // Initialize when activeColor or updateFunction changes
8126
8281
  // Custom setActiveColor that also updates iro picker
8127
8282
  var handleSetActiveColor = React.useCallback(function (newActiveColor) {
8128
- console.log('🎯 Gradient stop clicked, setting active color:', newActiveColor);
8129
- setActiveColor(newActiveColor);
8130
- // Validate before updating iro picker
8131
- if (newActiveColor.hex && typeof newActiveColor.alpha === 'number') {
8132
- // Force immediate update of iro picker with longer delay for first-time reliability
8133
- setTimeout(function () {
8134
- updateIroPickerColor({
8135
- hex: newActiveColor.hex,
8136
- alpha: newActiveColor.alpha
8137
- });
8138
- }, 50); // Increased from 5ms to 50ms for better first-time success
8283
+ // Handle both direct values and function updaters
8284
+ if (typeof newActiveColor === 'function') {
8285
+ // This is a function updater - call setActiveColor properly
8286
+ setActiveColor(function (prev) {
8287
+ var updated = newActiveColor(prev);
8288
+ // Note: useEffect will handle iro picker update automatically
8289
+ return updated;
8290
+ });
8139
8291
  }
8140
8292
  else {
8141
- console.log('⚠️ Skipping iro picker update in handleSetActiveColor - invalid data:', newActiveColor);
8293
+ // This is a direct value - just update state, useEffect will handle iro picker update
8294
+ setActiveColor(newActiveColor);
8142
8295
  }
8143
- }, [updateIroPickerColor]);
8144
- // Update iro picker when activeColor changes (e.g., clicking gradient stops)
8296
+ }, [] // No dependencies needed since we're just calling setState
8297
+ );
8298
+ // Update iro picker when activeColor's hex or alpha changes (not location)
8145
8299
  React.useEffect(function () {
8146
- console.log('🔄 ActiveColor changed in gradient:', {
8147
- hex: activeColor.hex,
8148
- alpha: activeColor.alpha,
8149
- index: activeColor.index,
8150
- loc: activeColor.loc
8151
- });
8300
+ var hex = activeColor.hex, alpha = activeColor.alpha;
8152
8301
  // Validate activeColor before proceeding
8153
- if (!activeColor.hex || typeof activeColor.alpha !== 'number') {
8154
- console.log('⚠️ Skipping iro picker update - invalid activeColor:', activeColor);
8302
+ if (!hex || typeof alpha !== 'number') {
8155
8303
  return;
8156
8304
  }
8157
- // Add a small delay to ensure the activeColor state has fully updated
8158
- var timeoutId = setTimeout(function () {
8159
- updateIroPickerColor({ hex: activeColor.hex, alpha: activeColor.alpha });
8160
- }, 10);
8161
- return function () { return clearTimeout(timeoutId); };
8162
- }, [activeColor, updateIroPickerColor]);
8305
+ // Update iro picker immediately when color changes
8306
+ updateIroPickerColor({ hex: hex, alpha: alpha });
8307
+ // eslint-disable-next-line react-hooks/exhaustive-deps
8308
+ }, [activeColor.hex, activeColor.alpha, updateIroPickerColor]); // Only depend on hex and alpha, not full activeColor
8163
8309
  var updateGradient = React.useCallback(function (newColor) {
8164
8310
  if (Array.isArray(newColor)) {
8165
8311
  // Handle the case where it's called with stops array
@@ -8220,7 +8366,6 @@ var IroGradient = function (_a) {
8220
8366
  };
8221
8367
  // Reset to initial color
8222
8368
  var handleResetColor = function () {
8223
- var _a;
8224
8369
  var initialParsed = parseGradient(initialValue.current);
8225
8370
  setColor(initialParsed);
8226
8371
  // Reset active color to the last stop of the initial gradient
@@ -8232,13 +8377,7 @@ var IroGradient = function (_a) {
8232
8377
  index: initialParsed.stops.length - 1
8233
8378
  };
8234
8379
  setActiveColor(newActiveColor);
8235
- // Update iro picker if available
8236
- if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
8237
- updateIroPickerColor({
8238
- hex: newActiveColor.hex,
8239
- alpha: newActiveColor.alpha
8240
- });
8241
- }
8380
+ // Note: useEffect will handle iro picker update automatically when activeColor changes
8242
8381
  // Call onChange with initial value
8243
8382
  onChange(initialValue.current);
8244
8383
  // Call onReset callback if provided
@@ -8257,11 +8396,7 @@ var IroGradient = function (_a) {
8257
8396
  index: newColor.stops.length - 1
8258
8397
  };
8259
8398
  setActiveColor(newActiveColor);
8260
- // Update the iro color picker
8261
- updateIroPickerColor({
8262
- hex: newActiveColor.hex,
8263
- alpha: newActiveColor.alpha
8264
- });
8399
+ // Note: useEffect will handle iro picker update automatically when activeColor changes
8265
8400
  }
8266
8401
  };
8267
8402
  var handleIroColorChange = function (iroColor) {
@@ -8342,7 +8477,6 @@ var IroSolidColorPicker = function (_a) {
8342
8477
  // Update ref when state changes
8343
8478
  React.useEffect(function () {
8344
8479
  pickerWidthRef.current = pickerWidth;
8345
- console.log('📊 Picker width state changed to:', pickerWidth);
8346
8480
  }, [pickerWidth]);
8347
8481
  // Calculate responsive width based on container
8348
8482
  var getResponsiveWidth = function (containerWidth) {
@@ -8370,7 +8504,6 @@ var IroSolidColorPicker = function (_a) {
8370
8504
  var newWidth = Math.floor(getResponsiveWidth(rect.width));
8371
8505
  if (Math.abs(newWidth - pickerWidthRef.current) > 5) {
8372
8506
  // Only update if significant change
8373
- console.log('� Size update:', { container: rect.width, newWidth: newWidth });
8374
8507
  setPickerWidth(newWidth);
8375
8508
  }
8376
8509
  }
@@ -8397,20 +8530,17 @@ var IroSolidColorPicker = function (_a) {
8397
8530
  }
8398
8531
  var debug = window.debugPicker;
8399
8532
  debug.getCurrentWidth = function () {
8400
- console.log('Current picker width:', pickerWidth);
8401
8533
  return pickerWidth;
8402
8534
  };
8403
8535
  debug.getContainerWidth = function () {
8404
8536
  var _a;
8405
8537
  var width = (_a = node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
8406
- console.log('Current container width:', width);
8407
8538
  return width;
8408
8539
  };
8409
8540
  debug.forceResize = function () {
8410
8541
  if (node.current) {
8411
8542
  var rect = node.current.getBoundingClientRect();
8412
8543
  var newWidth = Math.floor(getResponsiveWidth(rect.width));
8413
- console.log('🔧 Force resize:', { container: rect.width, newWidth: newWidth });
8414
8544
  setPickerWidth(newWidth);
8415
8545
  }
8416
8546
  };
@@ -8455,11 +8585,6 @@ var IroSolidColorPicker = function (_a) {
8455
8585
  }
8456
8586
  }, [value, showAlpha]);
8457
8587
  var handleColorChange = function (iroColor) {
8458
- console.log('🎨 Alpha slider changed!', {
8459
- hex: iroColor.hexString,
8460
- alpha: iroColor.alpha,
8461
- alphaPercent: Math.round(iroColor.alpha * 100)
8462
- });
8463
8588
  var newColor = {
8464
8589
  hex: iroColor.hexString,
8465
8590
  alpha: Math.round(iroColor.alpha * 100)