"use client"; import * as React from "react"; import { motion, AnimatePresence } from "motion/react"; /* ── sound ── */ let _a: AudioContext, _b: AudioBuffer; const tick = () => { if (typeof window === "undefined") return; if (!_a) { _a = new AudioContext(); _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate); const d = _b.getChannelData(0); for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4; } const s = _a.createBufferSource(); s.buffer = _b; const g = _a.createGain(); g.gain.value = 0.08; s.connect(g).connect(_a.destination); s.start(); }; /* ── theme ── */ const CSS = ` .cp{ --cp-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62)); --cp-border:rgba(0,0,0,0.06); --cp-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8); --cp-dim:rgba(0,0,0,0.42); --cp-mid:rgba(0,0,0,0.55); --cp-hi:rgba(0,0,0,0.88); --cp-sep:rgba(0,0,0,0.06); --cp-track:rgba(0,0,0,0.06); --cp-knob:#fff; --cp-knob-border:rgba(0,0,0,0.08); --cp-knob-shadow:0 1px 3px rgba(0,0,0,0.15); --cp-btn:rgba(0,0,0,0.03); --cp-btn-h:rgba(0,0,0,0.07); --cp-ok:rgba(34,197,94,0.8) } .dark .cp,[data-theme="dark"] .cp{ --cp-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); --cp-border:rgba(255,255,255,0.07); --cp-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04); --cp-dim:rgba(255,255,255,0.28); --cp-mid:rgba(255,255,255,0.5); --cp-hi:rgba(255,255,255,0.88); --cp-sep:rgba(255,255,255,0.06); --cp-track:rgba(255,255,255,0.06); --cp-knob:#fff; --cp-knob-border:rgba(255,255,255,0.06); --cp-knob-shadow:0 1px 3px rgba(0,0,0,0.2); --cp-btn:rgba(255,255,255,0.03); --cp-btn-h:rgba(255,255,255,0.07); --cp-ok:rgba(74,222,128,0.9) }`; const MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace"; const DEFAULT_COLORS = [ "#F87171", "#FB923C", "#FACC15", "#4ADE80", "#22D3EE", "#3B82F6", "#8B5CF6", "#EC4899", "#A3E635", "#06B6D4", "#0EA5E9", "#6366F1", ]; const toRGBA = (hex: string, opacity: number) => { const alpha = Math.round(opacity * 2.55) .toString(16) .padStart(2, "0"); return `${hex}${alpha}`; }; /* ── types ── */ interface ColorPickerInputProps { colors?: string[]; initialColor?: string; initialOpacity?: number; onChange?: (color: string, opacity: number) => void; sound?: boolean; style?: React.CSSProperties; } /* ── component ── */ export default function ColorPickerInput({ colors = DEFAULT_COLORS, initialColor = "#3B82F6", initialOpacity = 100, onChange, sound = true, style, }: ColorPickerInputProps) { const [color, setColor] = React.useState(initialColor); const [opacity, setOpacity] = React.useState(initialOpacity); const [copied, setCopied] = React.useState(false); const sliderRef = React.useRef(null); const dragging = React.useRef(false); const finalColor = toRGBA(color, opacity); const selectColor = (c: string) => { setColor(c); if (sound) tick(); onChange?.(c, opacity); }; const updateOpacity = (e: PointerEvent | React.PointerEvent) => { const el = sliderRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)); const val = Math.round(pct * 100); setOpacity(val); onChange?.(color, val); }; const onSliderDown = (e: React.PointerEvent) => { e.currentTarget.setPointerCapture(e.pointerId); dragging.current = true; updateOpacity(e); }; const onSliderMove = (e: React.PointerEvent) => { if (!dragging.current) return; updateOpacity(e); }; const onSliderUp = () => { dragging.current = false; if (sound) tick(); }; const handleCopy = async () => { try { await navigator.clipboard.writeText(finalColor.toUpperCase()); if (sound) tick(); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch { /* silent */ } }; return ( <>