{label &&

{label}

}

{isOpen && (

{ const newHue = parseInt(e.target.value, 10); setHue(newHue); const hsv = hexToHSV(value); onChange(hsvToHex(newHue, hsv.s, hsv.v)); }} />

# { // Ensure valid hex on blur if (localHex.length !== 3 && localHex.length !== 6) { setLocalHex(value.replace('#', '')); } }} maxLength={6} spellCheck={false} /> onChange(e.target.value)} tabIndex={-1} />

)}

{swatches.map((c) => (

); } /** * Convert hex to approximate hue (0-360) for spectrum display. */ function hexToHue(hex) { if (!hex || typeof hex !== 'string' || hex.includes('gradient')) return 120; const h = hex.startsWith('#') ? hex : '#' + hex; if (h.length !== 7 && h.length !== 4) return 120; // Simple RGB to HSV const r = parseInt(h.length === 7 ? h.slice(1, 3) : h[1] + h[1], 16) / 255; const g = parseInt(h.length === 7 ? h.slice(3, 5) : h[2] + h[2], 16) / 255; const b = parseInt(h.length === 7 ? h.slice(5, 7) : h[3] + h[3], 16) / 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); const d = max - min; if (d === 0) return 0; let hue = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4; return Math.round(hue * 60 + (hue < 0 ? 360 : 0)); } function hexToHSV(hex) { if (!hex || typeof hex !== 'string' || hex.includes('gradient')) return { h: 120, s: 100, v: 100 }; const h = hex.startsWith('#') ? hex : '#' + hex; const r = parseInt(h.length === 7 ? h.slice(1, 3) : h[1] + h[1], 16) / 255; const g = parseInt(h.length === 7 ? h.slice(3, 5) : h[2] + h[2], 16) / 255; const b = parseInt(h.length === 7 ? h.slice(5, 7) : h[3] + h[3], 16) / 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); const d = max - min; const s = max === 0 ? 0 : d / max; const v = max; return { h: hexToHue(h), s: s * 100, v: v * 100 }; } function hsvToHex(h, s, v) { s /= 100; v /= 100; const i = Math.floor(h / 60); const f = h / 60 - i; const p = v * (1 - s); const q = v * (1 - f * s); const t = v * (1 - (1 - f) * s); let r, g, b; switch (i % 6) { case 0: r = v, g = t, b = p; break; case 1: r = q, g = v, b = p; break; case 2: r = p, g = v, b = t; break; case 3: r = p, g = q, b = v; break; case 4: r = t, g = p, b = v; break; case 5: r = v, g = p, b = q; break; } const toHex = (x) => Math.round(x * 255).toString(16).padStart(2, '0'); return `#${toHex(r)}${toHex(g)}${toHex(b)}`; } /** * Color picker field with Solid/Gradient tabs matching the reference design. */ function ColorField({ label, value, onChange, showGradients, fallbackColor = '#5170ff' }) { const [mode, setMode] = useState(value && value.includes('gradient') ? 'gradient' : 'solid'); const [gradState, setGradState] = useState(() => parseGradient(value)); const solidValue = value && !value.includes('gradient') ? value : fallbackColor; const updateGrad = (updates) => { const next = { ...gradState, ...updates }; setGradState(next); onChange(buildGradient(next.angle, next.color1, next.color2)); }; return (

{label} {showGradients && (

)} {mode === 'solid' && (

)} {mode === 'gradient' && (

updateGrad({ color1: v })} swatches={GRADIENT_SWATCHES_START} /> updateGrad({ color2: v })} swatches={GRADIENT_SWATCHES_END} />

{__('Gradient Direction', 'shois-chat-button')} {__('Adjust the linear flow of colors', 'shois-chat-button')}

{gradState.angle}°

updateGrad({ angle: parseInt(e.target.value, 10) })} />

{__('START', 'shois-chat-button')}

{__('END', 'shois-chat-button')}

)}

); } /** * Range slider field. */ function RangeField({ label, value, min, max, unit, onChange }) { return (

{label} {value}{unit || 'px'} onChange(parseInt(e.target.value, 10))} />

); } /** * Position selector. */ function PositionSelector({ value, onChange }) { const positions = [ { id: 'bottom-right', label: __('Bottom Right', 'shois-chat-button') }, { id: 'bottom-left', label: __('Bottom Left', 'shois-chat-button') }, { id: 'top-right', label: __('Top Right', 'shois-chat-button') }, { id: 'top-left', label: __('Top Left', 'shois-chat-button') }, ]; return (

{__('Widget Position', 'shois-chat-button')}

{positions.map((p) => ( ))}

); } /** * Icon selector for trigger button with SVG icons. */ function IconSelector({ value, onChange }) { return (

{ICON_GROUPS.map((group) => (

{group.label}

{group.icons.map((icon) => ( ))}

))}

); } /** * DesignTab — visual design controls. */ export default function DesignTab({ config, onChange, templateDefaults = {} }) { const handleReset = () => { if (window.confirm(__('Reset all design settings to defaults?', 'shois-chat-button'))) { onChange({ ...DEFAULTS, ...templateDefaults }); } }; return (

{__('Colors', 'shois-chat-button')}

onChange({ primary_color: v })} fallbackColor={templateDefaults.primary_color || DEFAULTS.primary_color} showGradients /> onChange({ header_bg_color: v })} fallbackColor={templateDefaults.header_bg_color || DEFAULTS.header_bg_color} showGradients /> onChange({ header_text_color: v })} fallbackColor={templateDefaults.header_text_color || DEFAULTS.header_text_color} /> onChange({ text_color: v })} fallbackColor={templateDefaults.text_color || DEFAULTS.text_color} /> onChange({ bg_color: v })} fallbackColor={templateDefaults.bg_color || DEFAULTS.bg_color} />

{__('Agent Card & Chat Icon', 'shois-chat-button')}

onChange({ agent_bg_color: v })} fallbackColor={templateDefaults.agent_bg_color || DEFAULTS.agent_bg_color} /> onChange({ agent_text_color: v })} fallbackColor={templateDefaults.agent_text_color || DEFAULTS.agent_text_color} /> onChange({ platform_radius: v })} />

{__('Trigger Icon', 'shois-chat-button')}

onChange({ trigger_icon: v })} /> onChange({ icon_size: v })} /> onChange({ icon_color: v })} fallbackColor="#ffffff" />

{__('Position & Size', 'shois-chat-button')}

onChange({ position: v })} /> onChange({ btn_size: v })} /> onChange({ popup_width: v })} /> onChange({ offset_x: v })} /> onChange({ offset_y: v })} />

{__('Border Radius', 'shois-chat-button')}

onChange({ radius_btn: v })} /> onChange({ radius_popup: v })} />

); }