onChange?.(+e.target.value)} /> {unit}

); }; const SwatchRow = ({ value, onChange, swatches = ["#0c0c0e", "#3b6bff", "#16a34a", "#d97706", "#dc2626", "transparent"] }) => (

{swatches.map(c => (

); /* ------------------------------------------------------------------ Color picker — full HSV picker with hex / rgb input + swatches. Opens a popover, closes on outside click / Esc. ------------------------------------------------------------------ */ const hsvToRgb = (h, s, v) => { s /= 100; v /= 100; const k = n => (n + h / 60) % 6; const f = n => v - v * s * Math.max(0, Math.min(k(n), 4 - k(n), 1)); return [Math.round(f(5) * 255), Math.round(f(3) * 255), Math.round(f(1) * 255)]; }; const rgbToHex = (r, g, b) => "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("").toUpperCase(); const hexToRgb = (hex) => { if (!hex || hex === "transparent") return null; hex = hex.replace("#", ""); if (hex.length === 3) hex = hex.split("").map(c => c + c).join(""); if (hex.length !== 6 || /[^0-9a-f]/i.test(hex)) return null; return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)]; }; const rgbToHsv = (r, g, b) => { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); const d = max - min; let h = 0; if (d) { if (max === r) h = ((g - b) / d) % 6; else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; } h = Math.round(h * 60); if (h < 0) h += 360; return [h, max ? Math.round(d / max * 100) : 0, Math.round(max * 100)]; }; const DEFAULT_PRESETS = ["#0c0c0e", "#3b6bff", "#16a34a", "#d97706", "#dc2626", "transparent"]; const SPECTRUM = ["#FF3B30", "#FF9500", "#FFCC00", "#34C759", "#00C7BE", "#30B0C7", "#007AFF", "#5856D6", "#AF52DE", "#FF2D55", "#A2845E", "#8E8E93"]; const ColorPicker = ({ value = "#0c0c0e", onChange, swatches = DEFAULT_PRESETS, label }) => { const [open, setOpen] = useState(false); const [popPos, setPopPos] = useState({ top: 0, left: 0 }); const isTransparent = value === "transparent"; const initRgb = hexToRgb(value) || [12, 12, 14]; const [hsv, setHsv] = useState(() => rgbToHsv(...initRgb)); const [alpha, setAlpha] = useState(100); const [recent, setRecent] = useState([]); const popRef = useRef(null); const trigRef = useRef(null); const svRef = useRef(null); const hueRef = useRef(null); const alphaRef = useRef(null); const [h, s, v] = hsv; const [r, g, b] = hsvToRgb(h, s, v); const hex = rgbToHex(r, g, b); useEffect(() => { if (!open) return; const place = () => { const r = trigRef.current?.getBoundingClientRect(); if (!r) return; const popW = 264; const margin = 10; let left = r.right - popW; if (left < margin) left = margin; if (left + popW > window.innerWidth - margin) left = window.innerWidth - popW - margin; let top = r.bottom + 8; if (top + 420 > window.innerHeight) top = Math.max(margin, r.top - 420 - 8); setPopPos({ top, left }); }; place(); const onDown = (e) => { if (popRef.current?.contains(e.target) || trigRef.current?.contains(e.target)) return; setOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("resize", place); window.addEventListener("scroll", place, true); document.addEventListener("mousedown", onDown); document.addEventListener("keydown", onKey); return () => { window.removeEventListener("resize", place); window.removeEventListener("scroll", place, true); document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); }; }, [open]); const commit = (nextHex) => { onChange?.(nextHex); if (nextHex && nextHex !== "transparent" && !recent.includes(nextHex)) { setRecent(r => [nextHex, ...r].slice(0, 8)); } }; const dragSV = (e) => { e.preventDefault(); const rect = svRef.current.getBoundingClientRect(); const upd = (ev) => { const cx = ev.touches ? ev.touches[0].clientX : ev.clientX; const cy = ev.touches ? ev.touches[0].clientY : ev.clientY; const x = Math.max(0, Math.min(1, (cx - rect.left) / rect.width)); const y = Math.max(0, Math.min(1, (cy - rect.top) / rect.height)); const ns = Math.round(x * 100), nv = Math.round((1 - y) * 100); setHsv(([oh]) => { const [nr, ng, nb] = hsvToRgb(oh, ns, nv); commit(rgbToHex(nr, ng, nb)); return [oh, ns, nv]; }); }; upd(e); const onUp = () => { document.removeEventListener("mousemove", upd); document.removeEventListener("mouseup", onUp); }; document.addEventListener("mousemove", upd); document.addEventListener("mouseup", onUp); }; const dragHue = (e) => { e.preventDefault(); const rect = hueRef.current.getBoundingClientRect(); const upd = (ev) => { const cx = ev.touches ? ev.touches[0].clientX : ev.clientX; const x = Math.max(0, Math.min(1, (cx - rect.left) / rect.width)); const nh = Math.round(x * 360); setHsv(([_, os, ov]) => { const [nr, ng, nb] = hsvToRgb(nh, os, ov); commit(rgbToHex(nr, ng, nb)); return [nh, os, ov]; }); }; upd(e); const onUp = () => { document.removeEventListener("mousemove", upd); document.removeEventListener("mouseup", onUp); }; document.addEventListener("mousemove", upd); document.addEventListener("mouseup", onUp); }; const dragAlpha = (e) => { e.preventDefault(); const rect = alphaRef.current.getBoundingClientRect(); const upd = (ev) => { const cx = ev.touches ? ev.touches[0].clientX : ev.clientX; const x = Math.max(0, Math.min(1, (cx - rect.left) / rect.width)); setAlpha(Math.round(x * 100)); }; upd(e); const onUp = () => { document.removeEventListener("mousemove", upd); document.removeEventListener("mouseup", onUp); }; document.addEventListener("mousemove", upd); document.addEventListener("mouseup", onUp); }; const onHex = (e) => { const txt = e.target.value.trim(); const rgb = hexToRgb(txt.startsWith("#") ? txt : "#" + txt); if (rgb) { setHsv(rgbToHsv(...rgb)); commit(rgbToHex(...rgb)); } }; const swatchBg = (c) => c === "transparent" ? { backgroundImage: "linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.18) 75%), linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.18) 75%)", backgroundSize: "6px 6px", backgroundPosition: "0 0, 3px 3px", } : { background: c }; return (

{swatches.slice(0, 5).map(c => (

{open && ReactDOM.createPortal(