@widgetic/editor 3.11.4 → 4.0.1

package/dist/components/ic/ColorPickerInputController.svelte

@@ -0,0 +1,1584 @@
+<!-- 
+ * ColorPickerInputController
+ * 
+ * A sophisticated color picker component that manages complex color state and user interactions.
+ * Handles multiple color formats, opacity control, and recent color history.
+ * 
+ * Key Features:
+ * - Color format conversion (HEX, RGB, HSV)
+ * - Opacity control with visual feedback
+ * - Color name suggestions with autocomplete
+ * - Recent colors history with preview
+ * - Keyboard navigation support
+ * 
+ * Edge Cases:
+ * - Handles invalid color inputs
+ * - Preserves opacity across color changes
+ * - Manages concurrent drag operations
+ * - Prevents recursive updates
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy, tick } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  // Config imports
+  import type { InputControllerConfig } from './index';
+
+  // Shadcn UI Components
+  import { Input } from '@widgetic/design-system/components';
+  import { InputControllerHeader } from './index';
+
+  // Icons from Widgetic Design System
+  import { CheckerBoardBackground, OpacitySliderArrows } from '@widgetic/design-system/icons';
+  
+  // Third party imports
+  import { Portal } from '@widgetic/design-system/components';
+  // Remove ColorSelect import from dependencies, use local forked version only
+  // import ColorSelect from 'svelte-color-select';
+  import ColorSelect from '../color-select/ColorSelect.svelte';
+  
+  // Utils imports
+  import { ColorTransparencyHandler, type RGB } from '../../utils/colorTransparency';
+  import { colorNames } from '../../utils/colorNames';
+  import { getColorSuggestions, getNextSuggestion, type AutocompleteResult } from '../../utils/colorAutocomplete';
+  import { recentColorsUtil } from '../../utils/recentColors';
+
+  
+
+  /**
+   * State Management
+   * Core state variables controlling component behavior and UI
+   * Handles keyboard modifiers, visibility states, and color history
+   */
+  let isShiftPressed = false;
+  let isSpacePressed = false;
+  let showNoRecentMessage = false;
+  let recentColors = recentColorsUtil.getRecentColors();
+
+  /**
+   * Component Props
+   * External properties that configure the color picker's behavior
+   */
+  export let label: string = '';                         // Display label
+  export let value = '#000000';                     // Current color value
+  export let onChange: (newValue: string) => void;  // Value change callback
+  export let controllerId: string = '';
+  export let id: string = '';
+  export let openDropdowns: any;
+  export let toggleDropdown: (id: string) => void;
+  export let config: InputControllerConfig = {};    // Additional configuration
+  export let helpText: string | undefined = undefined; // Help text for the input
+
+  // Use config values with fallbacks
+  export let saveRecentColors = true;
+  export let showOpacityControls = true;
+  export let autofocus: boolean = false;
+  export let portalTarget = 'editor-portal';
+
+  // Sizing props for easy adjustment (can be overridden by parent)
+  export let pickerSize = 200; // width/height of color area
+  export let sliderWidth = 24; // width of hue bar and opacity input
+  $: swatchGap = 4;
+  $: swatchCount = 5;
+  $: swatchAreaWidth = pickerSize + sliderWidth + 14;
+  $: swatchSize = Math.floor((swatchAreaWidth - (swatchCount - 1) * swatchGap) / swatchCount);
+
+  // Exported opacity with default handling
+  export let opacity = config.defaultTransparency !== undefined ? config.defaultTransparency / 100 : 1;
+
+  // Tracks the last known opacity to maintain consistency
+  let lastKnownOpacity = opacity;
+
+  // Reactive statement to keep lastKnownOpacity in sync with opacity changes
+  $: lastKnownOpacity = opacity;
+
+  // Initialize the transparency handler with the current opacity
+  const transparencyHandler = new ColorTransparencyHandler(lastKnownOpacity);
+
+  /**
+   * Color State
+   * Maintains synchronized state between different color representations
+   * Uses isInternalUpdate flag to prevent recursive updates during state changes
+   */
+  let rgb = { r: 0, g: 0, b: 0, a: lastKnownOpacity };
+  let opacityValue = lastKnownOpacity;
+  let opacityPercentage = Math.round(lastKnownOpacity * 100);
+
+  // Unique instance ID for this color picker (use controllerId, id, or generate one)
+  const instanceId = controllerId || id || `cpicker-${Math.random().toString(36).slice(2, 8)}`;
+  
+  // Local open state — not derived from store
+  let open = false;
+  
+  // Listen for "close all color pickers except me" events from other instances
+  function onCloseOtherPickers(e: CustomEvent<string>) {
+    if (e.detail !== instanceId && open) {
+      open = false;
+      saveToRecentColors(value, lastKnownOpacity);
+      if (isColorSelectOpen) {
+        dispatch('colorselectmodalclose');
+        isColorSelectOpen = false;
+      }
+    }
+  }
+
+  let opacitySliderRef: HTMLDivElement;
+  let isDragging = false;
+  let isHueDragging = false;
+
+  let hexInput: string = value;
+  let previewColor: string = value;
+  let persistentOpacity: number = 1;
+
+  let isInternalUpdate = false;
+
+  // Tracks the position of the opacity indicator for visual feedback
+  $: indicatorLeft = `calc(${lastKnownOpacity * 100}% - ${parseInt(opacityLineWidth) / 2}px)`;
+
+  // Opacity bar dimensions for slider calculations
+  const opacityBarWidth = "257px";
+  const opacityBarHeight = "33px";
+
+  // Opacity line aesthetics and dimensions
+  const opacityLineStrokeColor = "rgb(0, 0, 0)";
+  const opacityLineStrokeOpacity = 0.1;
+  const opacityLineWidth = "2px";
+  const opacityLineColor = "rgba(255, 255, 255, 0)";
+
+  // Add to props section
+  export let showRing = true;
+
+  /**
+   * Generates RGBA border string based on color and opacity
+   * @param color - Base color in RGB format
+   * @param opacity - Opacity value to apply
+   * @returns CSS border string with RGBA color
+   */
+  const getRGBABorder = (color: string, opacity: number) => {
+    return `1px solid ${color.replace('rgb', 'rgba').replace(')', `, ${opacity})`)}`;
+  };
+
+  /**
+   * Converts hex color to RGBA while preserving opacity
+   * Handles both 3 and 6 character hex codes
+   * Returns normalized RGB values (0-1 range)
+   * @param hex - Hexadecimal color string
+   * @returns RGB object with normalized values
+   */
+  function hexToRgba(hex: string): RGB {
+    // Remove hash and handle both 3 and 6 character hex
+    const digits = hex.replace('#', '');
+    let r, g, b;
+
+    if (digits.length === 3) {
+      // For 3-character hex, duplicate each character
+      r = parseInt(digits[0] + digits[0], 16) / 255;
+      g = parseInt(digits[1] + digits[1], 16) / 255;
+      b = parseInt(digits[2] + digits[2], 16) / 255;
+    } else {
+      // For 6-character hex
+      r = parseInt(digits.slice(0, 2), 16) / 255;
+      g = parseInt(digits.slice(2, 4), 16) / 255;
+      b = parseInt(digits.slice(4, 6), 16) / 255;
+    }
+
+    return {
+      r,
+      g,
+      b,
+      a: lastKnownOpacity
+    };
+  }
+
+  /**
+   * Converts RGB values to hex format
+   * Delegates to transparency handler for consistent color conversion
+   * Preserves alpha channel information
+   * @param r - Red component (0-1)
+   * @param g - Green component (0-1)
+   * @param b - Blue component (0-1)
+   * @param a - Alpha component (0-1)
+   * @returns Hexadecimal color string
+   */
+  function rgbaToHex(r: number, g: number, b: number, a: number): string {
+    return transparencyHandler.rgbaToHex(r, g, b, a);
+  }
+
+  // Reactive statement to synchronize value changes with internal state
+  $: {
+    if (value !== hexInput) {
+      const newRgb = hexToRgba(value);
+      rgb = newRgb; // The handler will preserve the opacity
+      hexInput = value;
+      previewColor = value;
+    }
+  }
+
+  /**
+   * Updates color state and triggers change events
+   * - Validates hex format
+   * - Updates preview color
+   * - Triggers onChange callback only for valid hex values
+   * - Maintains 6-digit hex format
+   * @param newColor - New hex color value
+   */
+  function updateColor(newColor: string) {
+    previewColor = newColor;
+    if (/^#[0-9A-Fa-f]{6,8}$/.test(newColor)) {
+      value = newColor;
+      onChange(newColor);
+    }
+  }
+
+  /**
+   * Handles color changes from the color picker
+   * - Updates hex value while preserving opacity
+   * - Prevents recursive updates with isInternalUpdate flag
+   * - Maintains consistent state across all color representations
+   * - Triggers onChange with clean hex value
+   */
+  function handleColorChange(eventOrDetail?: CustomEvent | Record<string, any>) {
+    try {
+      isInternalUpdate = true;
+      const detail = eventOrDetail instanceof CustomEvent ? eventOrDetail.detail : eventOrDetail;
+      if (detail && detail.rgb) {
+        rgb = detail.rgb;
+        if (typeof detail.a === 'number') {
+          lastKnownOpacity = detail.a;
+        }
+      }
+      // Only use the 6-character hex without alpha
+      const hexValue = `#${Math.round(rgb.r * 255).toString(16).padStart(2, '0')}${Math.round(rgb.g * 255).toString(16).padStart(2, '0')}${Math.round(rgb.b * 255).toString(16).padStart(2, '0')}`;
+      value = hexValue;
+      hexInput = hexValue;
+      previewColor = getRgbaColor();
+      onChange(hexValue);
+    } finally {
+      isInternalUpdate = false;
+    }
+  }
+
+  /**
+   * Normalizes hex color input
+   * - Handles color names conversion
+   * - Validates hex characters
+   * - Supports both 3 and 6 character formats
+   * - Returns standardized hex format
+   * @param input - User input string
+   * @returns Normalized hex color string
+   */
+  function normalizeHexInput(input: string): string {
+    // Remove hash if present and convert to lowercase
+    let color = input.toLowerCase().replace('#', '');
+
+    // Check if it's a color name
+    if (colorNames[color]) {
+      return colorNames[color];
+    }
+
+    // Only validate the characters, don't expand
+    if (!/^[0-9a-f]*$/i.test(color)) {
+      return value; // Return current value if invalid characters
+    }
+
+    // Return the current input with # prefix
+    return '#' + color;
+  }
+
+  /**
+   * Validates if a string is a valid hex color
+   * @param hex - Hexadecimal color string
+   * @returns Boolean indicating validity
+   */
+  function isValidHex(hex: string): boolean {
+    const digits = hex.replace('#', '');
+    return (digits.length === 3 || digits.length === 6) && /^[0-9a-f]+$/i.test(digits);
+  }
+
+  let currentSuggestion: AutocompleteResult | null = null;
+  let suggestionVisible = false;
+
+  /**
+   * Handles input events for hex input field
+   * - Processes valid hex inputs
+   * - Manages color name suggestions
+   * @param event - Input event from the text field
+   */
+  function handleHexInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    let newValue = input.value.toLowerCase();
+
+    // validate the new value
+    if (newValue.startsWith('#') || /^[0-9a-f]+$/i.test(newValue)) {
+      // if the value starts with #, keep it, otherwise add it
+      const processedValue = newValue.startsWith('#') ? newValue : `#${newValue}`;
+
+      // console.log('handleHexInput processedValue:', processedValue);
+
+      // if new value is a hex color(starts with # and has 3 or 6 characters): call the onChange callback
+      const hexRegex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+      if (hexRegex.test(processedValue)) {
+        // console.log('Valid hex color detected:', processedValue);
+        try {
+          // set the internal update flag to true
+          isInternalUpdate = true;
+
+          // update the component's value
+          value = processedValue;
+
+          // update the rgb value
+          const newRgb = hexToRgba(processedValue);
+          rgb = { ...newRgb, a: lastKnownOpacity };
+
+          // update the preview color
+          previewColor = getRgbaColor();
+
+          // call the onChange callback
+          onChange(processedValue);
+        } finally {
+          isInternalUpdate = false;
+        }
+        return;
+      }
+    }
+
+    // console.log('handleHexInput newValue:', !/[^a-z\s]/.test(newValue));
+
+    // if newValue is empty or contains invalid characters, clear the suggestions
+    if (!newValue || /[^a-z\s]/.test(newValue)) {
+      console.log('Clearing suggestions due to invalid input');
+      suggestionVisible = false;
+      currentSuggestion = null;
+      return;
+    }
+
+    // if newValue is a valid color name, get the suggestions and show them
+    const suggestions = getColorSuggestions(newValue, colorNames);
+    console.log('Color suggestions:', { input: newValue, suggestions });
+    if (suggestions) {
+      currentSuggestion = suggestions;
+      suggestionVisible = true;
+    } else {
+      suggestionVisible = false;
+      currentSuggestion = null;
+    }
+  }
+
+  /**
+   * Handles the selection of a color from suggestions
+   * @param colorName - Selected color name
+   * @param isShiftPressed - Indicates if the shift key was held during selection
+   */
+  function handleColorSelection(colorName: string, isShiftPressed: boolean) {
+    console.log('Handling color selection:', { 
+      colorName, 
+      isShiftPressed,
+      currentOpacity: lastKnownOpacity 
+    });
+
+    const colorValue = colorNames[colorName];
+    value = colorValue;
+    const newRgb = hexToRgba(colorValue);
+    
+    // If Shift is pressed, set opacity to 100%
+    if (isShiftPressed) {
+      console.log('Shift pressed: Setting opacity to 100%');
+      lastKnownOpacity = 1;
+      rgb = { ...newRgb, a: 1 };
+      opacityPercentage = 100;
+    } else {
+      // Keep current opacity
+      rgb = { ...newRgb, a: lastKnownOpacity };
+    }
+    
+    previewColor = getRgbaColor();
+    onChange(colorValue);
+    suggestionVisible = false;
+    currentSuggestion = null;
+    
+    // Save to recent colors
+    saveToRecentColors(colorValue, rgb.a);
+  }
+
+  /**
+   * Handles keydown events for keyboard navigation and interactions
+   * @param event - Keyboard event
+   */
+  function handleKeyDown(event: KeyboardEvent) {
+    const input = event.target as HTMLInputElement;
+    const currentInputValue = input.value;
+
+    // Only prevent default for special keys when popup is open
+    if (open && (event.key === 'Shift' || event.key === ' ')) {
+      event.preventDefault();
+      return;
+    }
+
+    // console.log('Key pressed:', { 
+    //   key: event.key, 
+    //   actualInputValue: currentInputValue,
+    //   boundHexInput: hexInput,
+    //   isEmpty: !currentInputValue.trim(),
+    //   currentValue: value
+    // });
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeAutosuggestions();
+      if (!currentInputValue.trim()) {
+        restoreCurrentColor();
+      }
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      if (!currentInputValue.trim() || currentInputValue === '#') {
+        restoreCurrentColor();
+        return;
+      }
+    }
+
+    // if the suggestions are visible, handle the key events to navigate the suggestions
+    if (suggestionVisible && currentSuggestion) {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault();
+        
+        const direction = event.key === 'ArrowDown' ? 'down' : 'up';
+        
+        const result = getNextSuggestion(currentSuggestion, direction);
+        if (result) {
+          currentSuggestion = result;
+        }
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        handleColorSelection(currentSuggestion.suggestion, event.shiftKey);
+      }
+    }
+  }
+
+  /**
+   * Handles popover open/close state changes
+   * - Saves current color when closing
+   * - Closes autosuggestions if opening
+   * - Calculates fixed position when opening
+   */
+  function handleToggle(isOpen: boolean) {
+    // console.warn('[ColorPicker] handleToggle called:', { isOpen, currentOpen: open, instanceId, portalTarget });
+    if (isOpen === open) return;
+
+    if (!isOpen) {
+      saveToRecentColors(value, lastKnownOpacity);
+      if (isColorSelectOpen) {
+        dispatch('colorselectmodalclose');
+        isColorSelectOpen = false;
+      }
+    } else {
+      // Close all other color pickers before opening this one
+      window.dispatchEvent(new CustomEvent('widgetic:close-color-pickers', { detail: instanceId }));
+      closeAutosuggestions();
+      dispatch('colorselectmodalopen');
+      isColorSelectOpen = true;
+      updatePopoverPosition();
+      // Re-position after portal is mounted and layout stabilizes
+      tick().then(() => {
+        requestAnimationFrame(updatePopoverPosition);
+      });
+    }
+    
+    open = isOpen;
+  }
+
+  /**
+   * Closes the color picker dropdown and autosuggestions
+   */
+  function closeDropdown() {
+    if (open) {
+      handleToggle(false);
+    }
+
+    closeAutosuggestions();
+  }
+
+
+	function closeAutosuggestions() {
+		 // Close autosuggestions if they're open
+     if (suggestionVisible) {
+      suggestionVisible = false;
+      currentSuggestion = null;
+      // Set the input to the current hex value
+      hexInput = value.slice(0, 7); // Only take the 6-character hex
+    }
+	}
+
+  /**
+   * Handles scroll events to save color and close dropdown if necessary
+   * @param event - Scroll event
+   */
+  function handleScroll(event: Event) {
+    // Don't close if scrolling happens within allowed elements
+    if ((event.target as HTMLElement).closest('[data-allow-scroll="true"]')) {
+      return;
+    }
+
+    // Close both suggestions and color picker
+    if (suggestionVisible || open) {
+      suggestionVisible = false;
+      currentSuggestion = null;
+      closeDropdown();
+    }
+  }
+
+  /**
+   * Manages opacity slider interactions
+   * - Handles mouse drag events
+   * - Updates opacity state
+   * - Maintains color consistency
+   * - Prevents event bubbling
+   * @param event - Mouse event
+   */
+  function handleOpacityMouseDown(event: MouseEvent) {
+    isDragging = true;
+    document.body.style.cursor = 'grabbing';
+    updateOpacity(event);
+    
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        updateOpacity(e);
+      }
+    };
+    
+    const handleMouseUp = () => {
+      isDragging = false;
+      document.body.style.cursor = '';
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+    
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  }
+
+  // Reactive statement to handle external value changes
+  $: {
+    if (value !== hexInput && !isInternalUpdate) {
+      const newRgb = hexToRgba(value);
+      rgb = { ...newRgb, a: lastKnownOpacity }; // Preserve opacity
+      hexInput = value;
+      previewColor = value;
+    }
+  }
+
+  // Reactive statement to update the style of the opacity indicator
+  $: verticalLineStyle = `
+    left: ${indicatorLeft};
+    width: ${opacityLineWidth};
+    background-color: ${opacityLineColor};
+  `;
+
+  /**
+   * Applies opacity to a given RGB color
+   * @param color - RGB color object
+   * @param opacity - Opacity value to apply
+   * @returns RGB color object with updated opacity
+   */
+  function applyOpacityToColor(color: RGB, opacity: number): RGB {
+    return {
+      r: color.r,
+      g: color.g,
+      b: color.b,
+      a: opacity
+    };
+  }
+
+  // Reactive statement to apply opacity changes
+  $: {
+    if (value !== hexInput && !isInternalUpdate) {
+      const newRgb = hexToRgba(value);
+      rgb = applyOpacityToColor(newRgb, lastKnownOpacity);
+      hexInput = value;
+      previewColor = rgbaToHex(rgb.r, rgb.g, rgb.b, lastKnownOpacity);
+    }
+  }
+
+  /**
+   * Updates opacity based on slider position
+   * - Calculates normalized opacity value
+   * - Updates all color representations
+   * - Triggers change callbacks
+   * - Handles edge cases
+   * @param event - Mouse event from slider interaction
+   */
+  function updateOpacity(event: MouseEvent) {
+    if (!opacitySliderRef) return;
+    
+    const rect = opacitySliderRef.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const width = rect.width;
+    
+    let newOpacity = Math.max(0, Math.min(x, width)) / width;
+    newOpacity = Math.round(newOpacity * 100) / 100;
+    
+    try {
+      isInternalUpdate = true;
+      opacity = newOpacity; // This will trigger the reactive statement
+      rgb = { ...rgb, a: newOpacity };
+      lastKnownOpacity = newOpacity;
+      const hexValue = `#${Math.round(rgb.r * 255).toString(16).padStart(2, '0')}${Math.round(rgb.g * 255).toString(16).padStart(2, '0')}${Math.round(rgb.b * 255).toString(16).padStart(2, '0')}`;
+      value = hexValue;
+      hexInput = hexValue;
+      previewColor = getRgbaColor();
+      onChange(hexValue);
+      onOpacityChange(newOpacity); // Call the opacity change handler
+    } finally {
+      isInternalUpdate = false;
+    }
+  }
+
+  /**
+   * Updates opacity from numeric input
+   * - Validates input range (0-100)
+   * - Converts percentage to decimal
+   * - Updates all color states
+   * - Maintains color consistency
+   * - Prevents invalid states
+   * @param event - Input event from the numeric opacity field
+   */
+  function updateOpacityFromInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    input.value = input.value.replace(/[^\d]/g, '').slice(0, 3);
+    
+    let num = parseInt(input.value);
+    if (isNaN(num) || input.value === '') num = 0;
+    if (num > 100) num = 100;
+    
+    input.value = num.toString();
+    opacityPercentage = num;
+    
+    try {
+      isInternalUpdate = true;
+      lastKnownOpacity = num / 100;
+      rgb = { ...rgb, a: num / 100 };
+      // Only use the 6-character hex without alpha
+      const hexValue = `#${Math.round(rgb.r * 255).toString(16).padStart(2, '0')}${Math.round(rgb.g * 255).toString(16).padStart(2, '0')}${Math.round(rgb.b * 255).toString(16).padStart(2, '0')}`;
+      value = hexValue;
+      hexInput = hexValue;
+      previewColor = getRgbaColor();
+      onChange(hexValue);
+    } finally {
+      isInternalUpdate = false;
+    }
+  }
+
+  // Reactive statement to calculate opacity percentage
+  $: opacityPercentage = Math.round(lastKnownOpacity * 100);
+
+  let lastKnownHue = 0;
+  let colorSelectRef: ColorSelect; // Reference to ColorSelect component
+
+  /**
+   * Converts HSV to RGB values
+   * @param h - Hue value
+   * @param s - Saturation value
+   * @param v - Value (brightness) value
+   * @returns RGB color object with normalized values
+   */
+  function hsvToRgb(h: number, s: number, v: number) {
+    const f = (n: number, k = (n + h/60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
+    return {
+      r: Math.round(f(5) * 255) / 255,
+      g: Math.round(f(3) * 255) / 255,
+      b: Math.round(f(1) * 255) / 255,
+      a: lastKnownOpacity
+    };
+  }
+
+  /**
+   * Logs color-related events for debugging purposes
+   * @param event - Custom event from color picker interactions
+   */
+  function onColorEvent(event: CustomEvent) {
+    // Safe logging that won't throw errors
+    console.log('Color event received:', {
+      type: event.type,
+      rgb: event.detail?.rgb || rgb,
+      mode: event.detail?.mode,
+      rawEvent: {
+        detail: event.detail,
+        target: event.target ? 'exists' : 'null',
+        currentTarget: event.currentTarget ? 'exists' : 'null'
+      }
+    });
+  }
+
+  /**
+   * Handles direct hue changes from the color picker
+   * @param event - Custom event containing hue information
+   */
+  function handleHueChange(event: CustomEvent) {
+    console.log('Hue change event:', event.detail);
+    try {
+      isInternalUpdate = true;
+      lastKnownHue = event.detail.h;
+      
+      // Convert HSV to RGB using current saturation and value
+      const newRgb = hsvToRgb(
+        lastKnownHue,
+        1, // Full saturation for testing
+        1  // Full value for testing
+      );
+      
+      rgb = newRgb;
+      handleColorChange();
+      
+      console.log('After hue change:', {
+        hue: lastKnownHue,
+        rgb: newRgb,
+        hexValue: rgbaToHex(newRgb.r, newRgb.g, newRgb.b, lastKnownOpacity)
+      });
+    } finally {
+      isInternalUpdate = false;
+    }
+  }
+
+  let dragState = {
+    isHueDragging: false,
+    isOpacityDragging: false,
+    isColorDragging: false
+  };
+
+  /**
+   * Manages drag state across different interactions
+   * Prevents race conditions and maintains consistent state
+   * Handles cleanup on component destruction
+   * @param event - Mouse event from global interactions
+   */
+  function handleGlobalMouseUp(event: MouseEvent) {
+    if (!open) return;
+
+    // console.log('Global mouseup triggered', dragState);
+    if (dragState.isHueDragging || dragState.isOpacityDragging || dragState.isColorDragging) {
+      dragState = {
+        isHueDragging: false,
+        isOpacityDragging: false,
+        isColorDragging: false
+      };
+      handleColorChange();
+      // console.log('Dragging stopped');
+    }
+  }
+
+  /**
+   * Handles global mouse move events during dragging
+   * @param event - Mouse move event
+   */
+  function handleGlobalMouseMove(event: MouseEvent) {
+    if (dragState.isHueDragging || dragState.isOpacityDragging || dragState.isColorDragging) {
+      // console.log('Moving while dragging:', {
+      //   type: dragState.isHueDragging ? 'hue' : 
+      //         dragState.isOpacityDragging ? 'opacity' : 'color',
+      //   event: event
+      // });
+      handleColorChange();
+    }
+  }
+
+  /**
+   * Determines the type of drag based on mouse interaction
+   * @param event - Mouse down event initiating drag
+   */
+  function handleDragStart(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    const parentRect = target.parentElement?.getBoundingClientRect();
+    
+    // Log all relevant information for debugging
+    // console.log('Mousedown details:', {
+    //   element: target,
+    //   rect: rect,
+    //   parentRect: parentRect,
+    //   style: target.getAttribute('style'),
+    //   parentStyle: target.parentElement?.getAttribute('style')
+    // });
+
+    // Check if it's a canvas element
+    if (target.tagName.toLowerCase() === 'canvas') {
+      // Get the computed style to check positioning
+      const computedStyle = window.getComputedStyle(target);
+      const top = parseInt(computedStyle.top);
+      
+      if (rect.width === 31 && rect.height === 256) {
+        if (top < 50) {  // Hue slider is typically at the top
+          dragState.isHueDragging = true;
+          console.log('Hue drag started (top slider)');
+        } else {  // Opacity slider is typically at the bottom
+          dragState.isOpacityDragging = true;
+          console.log('Opacity drag started (bottom slider)');
+        }
+      } else {
+        dragState.isColorDragging = true;
+        // console.log('Color drag started (main area)');
+      }
+    }
+
+    // console.log('Current drag state:', dragState);
+  }
+
+  /**
+   * Initializes component state
+   * - Normalizes initial color value
+   * - Sets up event listeners
+   * - Configures opacity handling
+   * - Initializes recent colors
+   */
+  function initializeColor() {
+    const normalizedHex = normalizeHexInput(value);
+    if (normalizedHex.startsWith('#')) {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalizedHex);
+      if (result) {
+        const r = parseInt(result[1], 16) / 255;
+        const g = parseInt(result[2], 16) / 255;
+        const b = parseInt(result[3], 16) / 255;
+        
+        rgb = {
+          // r: r === 0 ? 0.000001 : r, // Prevent zero opacity issues
+          r: r,
+          g: g,
+          b: b,
+          a: lastKnownOpacity
+        };
+        
+        // Set initial display values
+        hexInput = normalizedHex;
+        previewColor = getRgbaColor();
+        
+        // console.log('Color initialized:', {
+        //   hex: normalizedHex,
+        //   rgb,
+        //   opacity: lastKnownOpacity,
+        //   percentage: opacityPercentage
+        // });
+      }
+    }
+  }
+
+  /**
+   * Generates an RGBA color string for CSS
+   * @returns RGBA color string based on current RGB and opacity
+   */
+  function getRgbaColor() {
+    const r = Math.round(rgb.r * 255);
+    const g = Math.round(rgb.g * 255);
+    const b = Math.round(rgb.b * 255);
+    return `rgba(${r}, ${g}, ${b}, ${lastKnownOpacity})`;
+  }
+
+  // Make previewColor reactive so it updates instantly whenever rgb or opacity change
+  $: previewColor = getRgbaColor();
+
+  /**
+   * Handles keydown events within the popover for modifier keys
+   * @param event - Keyboard event
+   */
+  function handlePopupKeyDown(event: KeyboardEvent) {
+    // Only handle keys if the popup is open
+    if (!open) return;
+
+    if (event.key === 'Shift' || event.key === ' ') {
+      event.preventDefault(); // Prevent space from scrolling
+      
+      if (event.key === 'Shift') {
+        isShiftPressed = true;
+      } else if (event.key === ' ') {
+        isSpacePressed = true;
+      }
+
+      if (recentColors.length === 0) {
+        showNoRecentMessage = true;
+        setTimeout(() => {
+          showNoRecentMessage = false;
+        }, 2000);
+      }
+    }
+  }
+
+  /**
+   * Handles keyup events within the popover to reset modifier keys
+   * @param event - Keyboard event
+   */
+  function handlePopupKeyUp(event: KeyboardEvent) {
+    // Only handle keys if the popup is open
+    if (!open) return;
+
+    if (event.key === 'Shift' || event.key === ' ') {
+      if (event.key === 'Shift') {
+        isShiftPressed = false;
+      } else if (event.key === ' ') {
+        isSpacePressed = false;
+      }
+    }
+  }
+
+  // Sets up event listeners when the component mounts
+  onMount(() => {
+    initializeColor();
+    window.addEventListener('mouseup', handleGlobalMouseUp);
+    window.addEventListener('mousemove', handleGlobalMouseMove);
+    window.addEventListener('keydown', handlePopupKeyDown);
+    window.addEventListener('keyup', handlePopupKeyUp);
+    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('widgetic:close-color-pickers', onCloseOtherPickers as EventListener);
+  });
+
+  // Cleans up event listeners when the component is destroyed
+  onDestroy(() => {
+    window.removeEventListener('mouseup', handleGlobalMouseUp);
+    window.removeEventListener('mousemove', handleGlobalMouseMove);
+    window.removeEventListener('keydown', handlePopupKeyDown);
+    window.removeEventListener('keyup', handlePopupKeyUp);
+    window.removeEventListener('scroll', handleScroll, true);
+    window.removeEventListener('widgetic:close-color-pickers', onCloseOtherPickers as EventListener);
+  });
+
+  // Then handle opacity updates
+  $: {
+    if (value) {
+      if (value.startsWith('rgba')) {
+        const matches = value.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+        if (matches) {
+          const [_, r, g, b, a] = matches;
+          rgb = { 
+            r: parseInt(r) / 255, 
+            g: parseInt(g) / 255, 
+            b: parseInt(b) / 255,
+            a: parseFloat(a)
+          };
+          opacityValue = parseFloat(a);
+          opacityPercentage = Math.round(opacityValue * 100);
+        }
+      } 
+      else if (value.startsWith('#') && value.length === 9) {
+        const alpha = parseInt(value.slice(7), 16);
+        opacityValue = alpha / 255;
+        opacityPercentage = Math.round(opacityValue * 100);
+        rgb.a = opacityValue;
+      }
+    }
+  }
+
+  /**
+   * Saves a color to the recent colors list
+   * - Prevents duplicates by checking the most recent entry
+   * - Maintains storage limits through utility functions
+   * @param color - Hexadecimal color string
+   * @param alpha - Opacity value of the color
+   */
+  function saveToRecentColors(color: string, alpha: number) {
+    if (!saveRecentColors) {
+      console.log('Recent colors saving is disabled');
+      return;
+    }
+    
+    // Check if this exact color+alpha combination is already the most recent
+    const currentRecents = recentColorsUtil.getRecentColors();
+    // console.log('Current recent colors:', currentRecents);
+    
+    const mostRecent = currentRecents[0];
+    
+    if (mostRecent && 
+        mostRecent.color.toLowerCase() === color.toLowerCase() && 
+        mostRecent.alpha === alpha) {
+      console.log('Color already most recent, skipping save:', { color, alpha });
+      return;
+    }
+
+    // console.log('Saving new color to recent colors:', { color, alpha });
+    recentColors = recentColorsUtil.addRecentColor(color, alpha);
+    // console.log('Updated recent colors list:', recentColors);
+  }
+
+  /**
+   * Handles the selection of a color name from suggestions
+   * @param colorName - Selected color name
+   */
+  function handleColorNameSelection(colorName: string) {
+    const colorValue = colorNames[colorName];
+    value = colorValue;
+    const newRgb = hexToRgba(colorValue);
+    rgb = { ...newRgb, a: lastKnownOpacity };
+    previewColor = getRgbaColor();
+    onChange(colorValue);
+    suggestionVisible = false;
+    currentSuggestion = null;
+    
+    // Save the selected color name
+    saveToRecentColors(colorValue, lastKnownOpacity);
+  }
+
+  /**
+   * Handles click events on color suggestions
+   * @param match - The matched color name clicked by the user
+   */
+  function handleSuggestionClick(match: string) {
+    console.log('Color name selected:', match);
+    hexInput = match;
+    const colorValue = colorNames[match];
+    console.log('Converting color name to hex:', { name: match, hex: colorValue });
+    
+    value = colorValue;
+    const newRgb = hexToRgba(colorValue);
+    rgb = { ...newRgb, a: lastKnownOpacity };
+    previewColor = getRgbaColor();
+    onChange(colorValue);
+    suggestionVisible = false;
+    currentSuggestion = null;
+    
+    // Save the hex value of the selected color name
+    saveToRecentColors(colorValue, lastKnownOpacity);
+  }
+
+  /**
+   * Handles blur events on the hex input field to restore color if input is empty
+   * @param event - Focus event from the input field
+   */
+  function handleInputBlur(event: FocusEvent) {
+    // Get the related target (element receiving focus)
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    
+    // Don't close if focus is moving to a suggestion item
+    if (relatedTarget?.closest('.color-suggestions')) {
+      return;
+    }
+
+    const input = event.target as HTMLInputElement;
+    const currentInputValue = input.value;
+
+    // Close suggestions
+    closeAutosuggestions();
+
+    // Check actual input value
+    if (!currentInputValue.trim()) {
+      restoreCurrentColor();
+    }
+  }
+
+  let inputRef: HTMLDivElement;
+
+  /**
+   * Restores the current color value when input is invalid or empty
+   * - Resets the hex input to the last valid color value
+   * - Forces the input field to update and regain focus
+   */
+  function restoreCurrentColor() {
+    console.log('Restoring current color:', {
+      currentValue: value,
+      hexToRestore: value.slice(0, 7),
+      currentHexInput: hexInput
+    });
+
+    if (value && value.startsWith('#')) {
+      const colorToRestore = value.slice(0, 7);
+      
+      // Force immediate update
+      hexInput = colorToRestore;
+      value = colorToRestore;
+      
+      // Force input focus and update
+      setTimeout(() => {
+        const inputElement = inputRef?.querySelector('input') as HTMLInputElement;
+        if (inputElement) {
+          inputElement.value = colorToRestore;
+          inputElement.focus();
+          inputElement.blur();
+        }
+      }, 0);
+    }
+  }
+
+  // Exported onFocus handler with default no-op
+  export let onFocus: () => void = () => {};
+
+  // Sets autofocus on mount if enabled
+  onMount(() => {
+    if (autofocus && inputRef) {
+      inputRef.focus();
+      console.log('ColorPickerInputController focused');
+    }
+  });
+
+  /**
+   * Focus method to programmatically focus the input field
+   */
+  export function focus() {
+    if (inputRef) {
+      inputRef.focus();
+      console.log('ColorPickerInputController focus method called');
+    }
+  }
+
+  // Popover visibility is now handled by {#if open} conditional rendering
+
+  // Exported opacity change handler with default no-op
+  export let onOpacityChange: (opacity: number) => void = () => {};
+
+  // Add these variables to track input position
+  let inputComponent: any;
+  let inputRect: DOMRect | null = null;
+
+  // Track trigger position for fixed-position popover
+  let triggerRef: HTMLDivElement;
+  let popoverStyle = '';
+
+  function updatePopoverPosition() {
+    if (!triggerRef) return;
+    const rect = triggerRef.getBoundingClientRect();
+    // Guard: if trigger hasn't been laid out yet, defer
+    if (rect.width === 0 && rect.height === 0) {
+      requestAnimationFrame(updatePopoverPosition);
+      return;
+    }
+    const popoverHeight = 420;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const openAbove = spaceBelow < popoverHeight + 8 && spaceAbove > popoverHeight + 8;
+    const top = openAbove
+      ? Math.round(rect.top - popoverHeight - 4)
+      : Math.round(rect.bottom + 4);
+    // Align popup's right edge with the right edge of the full input container
+    const inputContainer = triggerRef.closest('.color-input-main-container') as HTMLElement | null;
+    const rightRef = inputContainer ? inputContainer.getBoundingClientRect().right : rect.right;
+    const right = Math.round(window.innerWidth - rightRef);
+    popoverStyle = `top: ${top}px; right: ${right}px;`;
+  }
+
+  // Position is calculated in handleToggle after tick()
+
+  // Update the position function to get the actual input element
+  function updateInputPosition() {
+    // Get the actual input element from the component
+    // console.log('updateInputPosition', inputRef);
+    const inputElement = inputRef?.querySelector('input');
+    if (inputElement) {
+      inputRect = inputElement.getBoundingClientRect();
+      // console.log('inputRect', inputRect);
+    }
+  }
+
+  // Update the suggestions position when they become visible
+  $: if (suggestionVisible) {
+    updateInputPosition();
+  }
+
+  // Close suggestions when picker is closed
+  $: if (!open) {
+    suggestionVisible = false;
+    currentSuggestion = null;
+    if (isColorSelectOpen) {
+      dispatch('colorselectmodalclose');
+      isColorSelectOpen = false;
+    }
+  }
+
+  // Add this near the top with other state declarations
+  let isColorSelectOpen = false;
+
+  // Add these computed styles for layout
+  $: opacityBarWidthPx = `${pickerSize}px`;
+  $: recentColorsMaxWidth = `${pickerSize + sliderWidth}px`;
+</script>
+
+<!-- Color Picker Input Controller Container -->
+<div class="color-picker-input-controller-ct flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    
+    <!-- Input Controller Header -->
+    <div class="input-controller-header-ct flex-1 min-w-0">
+      <InputControllerHeader {label} helpText={helpText} />
+    </div>
+    
+    <!-- Input Controller Container -->
+    <div class="input-controller-ct absolute right-0">
+      <div class="color-input-main-container rounded-large flex items-center transition-colors duration-200"
+        style="height: 48px; width: 185px; background: hsl(var(--grey1)); {showRing ? 'border: 1px solid hsl(var(--grey2));' : ''}">
+        <div class="flex items-center w-full justify-between" style="padding-right: 12px;">
+          
+          <!-- Hex Input Container -->
+          <div class="hex-input-container flex-1" bind:this={inputRef}>
+            <Input
+              bind:this={inputComponent}
+              type="text"
+              class="h-9 border-0 bg-transparent subtext text-grey7 placeholder:text-grey3 focus-visible:ring-0 focus-visible:ring-offset-0 pl-4"
+              value={hexInput}
+              onfocus={(e) => {
+                dispatch('focus', e);
+                onFocus();
+              }}
+              onblur={(e) => {
+                dispatch('blur', e);
+                const input = e.target as HTMLInputElement;
+                if (!input.value.trim()) {
+                  restoreCurrentColor();
+                } else {
+                  handleInputBlur(e);
+                }
+              }}
+              oninput={(e) => {
+                const input = e.target as HTMLInputElement;
+                if (!input.value) {
+                  hexInput = '';
+                }
+                handleHexInput(e);
+                updateInputPosition();
+              }}
+              onkeydown={(e) => {
+                const input = e.target as HTMLInputElement;
+                if ((e.key === 'Enter' || e.key === 'Escape') && !input.value.trim()) {
+                  e.preventDefault();
+                  restoreCurrentColor();
+                } else {
+                  handleKeyDown(e);
+                }
+              }}
+            />
+          </div>
+
+          <!-- Color Preview Button -->
+          <div class="color-preview-button-container relative flex items-center" style="height: 48px;">
+            <div class="color-picker-button-content-ct relative">
+                <!-- Color Picker Trigger (manual, no bits-ui Popover) -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div bind:this={triggerRef}
+                  class="color-preview-button flex items-center justify-center rounded-small cursor-pointer relative overflow-hidden {showRing ? 'ring-1 ring-grey2' : ''}"
+                  style="width: 24px; height: 24px; min-width: 24px;"
+                  role="button"
+                  tabindex="0"
+                  onclick={(e) => { e.stopPropagation(); handleToggle(!open); }}
+                >
+                  <CheckerBoardBackground class="absolute inset-0 w-full h-full pointer-events-none rounded-[inherit]" />
+                  <div class="absolute inset-0 w-full h-full rounded-[inherit] pointer-events-none" style="background-color: {previewColor};"></div>
+                </div>
+
+                <!-- Color Suggestions Portal -->
+                {#if suggestionVisible && currentSuggestion}
+                  <Portal target={portalTarget} class="color-suggestions-portal">
+                    {#if currentSuggestion.allMatches.length > 0 && inputRect}
+                      <!-- svelte-ignore a11y_no_static_element_interactions -->
+                      <div 
+                        class="color-suggestions fixed bg-white border rounded-md shadow-lg overflow-y-auto"
+                        style="
+                          pointer-events: auto !important;
+                          z-index: 99999;
+                          max-height: 12rem;
+                          top: {inputRect.bottom + 4}px;
+                          left: {inputRect.left}px;
+                          width: {inputRect.width}px;
+                        "
+                        data-allow-scroll="true"
+                        onscroll={(e) => e.stopPropagation()}
+                        onmousedown={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          const target = event.target as HTMLElement;
+                          if (target.closest('.color-suggestion-item')) {
+                            event.preventDefault();
+                          }
+                        }}
+                        onfocusout={(event) => {
+                          const relatedTarget = event.relatedTarget as HTMLElement;
+                          // Only close if focus is moving outside the suggestions
+                          if (!relatedTarget?.closest('.color-suggestions')) {
+                            closeAutosuggestions();
+                          }
+                        }}
+                      >
+                        {#each currentSuggestion.allMatches as match, i}
+                          <div
+                            class="color-suggestion-item px-2 py-1 cursor-pointer hover:bg-gray-100"
+                            style="position: relative; z-index: 99999; pointer-events: auto !important;"
+                            class:bg-gray-100={i === currentSuggestion?.currentIndex}
+                            onmousedown={(event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              handleColorSelection(match, event.shiftKey);
+                            }}
+                          >
+                            {match}
+                          </div>
+                        {/each}
+                      </div>
+                    {/if}
+                  </Portal>
+                {/if}
+                
+                <!-- Color Picker — portaled to a unique body-level div -->
+                {#if open}
+                <Portal target="color-picker-portal" class="color-picker-portal-ct" style="position: fixed; inset: 0; z-index: 99999; pointer-events: none;">
+                  
+                  <!-- svelte-ignore a11y_no_static_element_interactions -->
+                  <div class="color-picker-backdrop" style="z-index: 1;" onmousedown={() => handleToggle(false)}></div>
+                  
+                  <!-- svelte-ignore a11y_no_static_element_interactions -->
+                  <!-- svelte-ignore a11y_click_events_have_key_events -->
+                  <div class="color-picker-popover-content w-auto pt-2 pb-2 pl-2 pr-0 widgetic-colors widgetic-radius modal-shadow"
+                    style="{popoverStyle} border: 1px solid hsl(var(--grey2)); z-index: 2;"
+                    onmousedown={(e) => e.stopPropagation()}
+                    onclick={(e) => e.stopPropagation()}
+                  >
+                    <!-- Color Picker Popover Content Wrapper -->
+                    <div class="color-picker-popover-content-wrapper flex flex-col">
+                    
+                      <!-- Recent Colors Container -->
+                      {#if saveRecentColors && (isShiftPressed || isSpacePressed)}
+                        <div class="recent-colors-container" style="width: {pickerSize + sliderWidth + 14}px; margin-left: 10px; padding-top: 11px; padding-bottom: 8px;">
+                          {#if recentColors.length > 0}
+                            <div class="recent-colors-grid" style="display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; gap: {swatchGap}px;">
+                              {#each recentColors.slice(0, 5) as {color, alpha}, i}
+                                <button
+                                  class="widgetic-colors rounded-medium relative overflow-hidden animate-recent-color"
+                                  style="width: {swatchSize}px; height: {swatchSize}px; border: 1px solid hsl(var(--forest-green)); animation-delay: {i * 0.05}s"
+                                  onclick={() => {
+                                    try {
+                                      isInternalUpdate = true;
+                                      lastKnownOpacity = showOpacityControls ? alpha : 1;
+                                      const newRgb = hexToRgba(color);
+                                      rgb = { ...newRgb, a: showOpacityControls ? alpha : 1 };
+                                      opacityPercentage = Math.round((showOpacityControls ? alpha : 1) * 100);
+                                      value = color;
+                                      hexInput = color;
+                                      previewColor = getRgbaColor();
+                                      onChange(color);
+                                    } finally {
+                                      isInternalUpdate = false;
+                                    }
+                                  }}
+                                >
+                                  <CheckerBoardBackground />
+                                  <!-- svelte-ignore element_invalid_self_closing_tag -->
+                                  <div
+                                    class="absolute inset-0"
+                                    style="background-color: {color}; opacity: {showOpacityControls ? alpha : 1};"
+                                  />
+                                </button>
+                              {/each}
+                            </div>
+                          {:else}
+                            <div class="text-sm text-gray-500 text-center py-2">
+                              No recent colors
+                            </div>
+                          {/if}
+                      </div>
+                    {/if}
+
+                    <!-- Color Picker Container (block layout, padded) -->
+                    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+                    <div
+                      class="color-picker-wrapper relative flex flex-col"
+                      role="application"
+                      aria-label="Color picker"
+                      onmousedown={handleDragStart}
+                      style="padding: 0;"
+                    >
+                      <!-- Picker row: 8px left/top padding, 8px right padding for hue bar -->
+                      <div style="display: flex; flex-direction: row; align-items: flex-start;">
+                        <ColorSelect
+                          bind:this={colorSelectRef}
+                          bind:rgb
+                          bind:a={lastKnownOpacity}
+                          onchange={handleColorChange}
+                          alpha={true}
+                          {pickerSize}
+                          {sliderWidth}
+                        />
+                        <!-- 8px right padding for hue bar is handled by ColorSelect's sliderWidth prop -->
+                      </div>
+                      
+                      <!-- Opacity bar and number input: horizontal flex row under picker/hue bar -->
+                      <div style="display: flex; flex-direction: row; align-items: center; margin-top: 4px;">
+                        <!-- Opacity bar under color picker -->
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <div
+                          bind:this={opacitySliderRef}
+                          class="relative cursor-pointer opacity-slider"
+                          style="width: {pickerSize}px; height: {sliderWidth}px; margin-left: 10px;"
+                          onmousedown={handleOpacityMouseDown}
+                        >
+                          <div class="absolute inset-0 overflow-hidden">
+                            <CheckerBoardBackground />
+                            <div 
+                              class="absolute inset-0"
+                              style="background: linear-gradient(to right, 
+                                rgba({Math.round(rgb.r * 255)}, {Math.round(rgb.g * 255)}, {Math.round(rgb.b * 255)}, 0) 0%,
+                                rgba({Math.round(rgb.r * 255)}, {Math.round(rgb.g * 255)}, {Math.round(rgb.b * 255)}, 1) 100%
+                              );"
+                            ></div>
+                          </div>
+                          <div
+                            class="opacity-scrub absolute top-0 bottom-0 w-0.5 bg-white cursor-pointer z-20"
+                            style={verticalLineStyle}
+                          >
+                            <OpacitySliderArrows class="opacity-slider-arrows" />
+                          </div>
+                        </div>
+                        <!-- Opacity number input — square, matching swatch size -->
+                        <div class="opacity-number-ct flex items-center justify-center" style="width: {swatchSize + 6}px; min-width: {swatchSize + 6}px; height: {swatchSize}px; margin-left: 8px;">
+                          <Input
+                            type="number"
+                            min="0"
+                            max="100"
+                            class="w-full h-full text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ring-0 focus:ring-0 shadow-none widgetic-colors subtext"
+                            style="border: 1px solid hsl(var(--forest-green)); color: hsl(var(--grey7)); padding-left: 8px; padding-right: 0;"
+                            value={opacityPercentage}
+                            oninput={(e) => {
+                              e.stopPropagation();
+                              updateOpacityFromInput(e);
+                            }}
+                            onkeydown={(e) => {
+                              if (e.key === 'Shift') isShiftPressed = true;
+                              e.stopPropagation();
+                            }}
+                            onkeyup={(e) => {
+                              if (e.key === 'Shift') isShiftPressed = false;
+                              e.stopPropagation();
+                            }}
+                            onclick={(e) => {
+                              e.stopPropagation();
+                            }}
+                          />
+                        </div>
+                      </div>
+                    </div> <!-- end of color-picker -->
+                    
+                    </div> <!-- end of color-picker-popover-content-wrapper -->
+                  </div>
+                </Portal>
+                {/if}
+            </div>
+          </div> <!-- end of color-preview-button-container -->
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /**
+   * Component Styling
+   * - Manages z-index stacking
+   * - Handles drag interactions
+   * - Controls visibility states
+   * - Ensures proper event handling
+   */
+
+  .color-input-main-container:hover {
+    border-color: hsl(var(--forest-green)) !important;
+  }
+
+  /* Add cursor styles for dragging */
+  :global(.color-picker-wrapper canvas),
+  .opacity-slider {
+    cursor: grab !important;
+    user-select: none !important;
+  }
+
+  :global(.color-picker-wrapper canvas:active),
+  .opacity-slider:active {
+    cursor: grabbing !important;
+    user-select: none !important;
+  }
+
+  /* Prevent cursor from changing during drag */
+  :global(.color-picker-wrapper *),
+  .opacity-slider * {
+    cursor: inherit !important;
+  }
+
+  /* Add a class when dragging starts */
+  .opacity-slider:active * {
+    cursor: grabbing !important;
+  }
+
+  /* Backdrop covers the entire viewport to catch outside clicks */
+  .color-picker-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 99998;
+    pointer-events: auto;
+  }
+
+  /* Popover content — fixed position relative to viewport */
+  .color-picker-popover-content {
+    position: fixed;
+    z-index: 99999;
+    margin: 0;
+    padding: 8px;
+    background: hsl(var(--grey1));
+    border: 1px solid hsl(var(--forest-green));
+    border-radius: var(--radius-small);
+    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1);
+    pointer-events: auto;
+  }
+
+  /* Update input styles */
+  :global(input.bg-transparent) {
+    background: transparent !important;
+    border: none !important;
+  }
+
+  :global(input.bg-transparent:focus),
+  :global(input.bg-transparent:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Update button styles */
+  :global(button.rounded-md) {
+    border-radius: var(--radius) !important;
+  }
+
+  /* Ensure opacity slider border is visible */
+  :global(.opacity-slider) {
+    border: 1px solid hsl(var(--forest-green)) !important;
+  }
+
+  /* Updated animation for individual recent colors */
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.6);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  :global(.animate-recent-color) {
+    animation: zoomIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
+    transform-origin: center center;
+  }
+
+  /* Add these styles */
+  .color-preview-button {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .color-preview-button:focus {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .color-preview-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 1px solid hsl(var(--grey3));
+    pointer-events: none;
+  }
+</style>
+