// ============================================================= // Icons + utility components // ============================================================= const Icon = { search: (p) => ( ), chevDown: (p) => ( ), chevLeft: (p) => ( ), chevRight: (p) => ( ), close: (p) => ( ), refresh: (p) => ( ), settings: (p) => ( ), external: (p) => ( ), letter: (p) => ( ), check: (p) => ( ), archive: (p) => ( ), filter: (p) => ( ), pin: (p) => ( ), briefcase: (p) => ( ), location: (p) => ( ), cash: (p) => ( ), trash: (p) => ( ), more: (p) => ( ), warning: (p) => ( ), arrow: (p) => ( ), star: (p) => ( ), starFilled: (p) => ( ), }; // ============================================================= // Score visualization — three styles, switched by tweak // ============================================================= function ScoreViz({ cv, match, variant = 'dots' }) { if (variant === 'quadrant') { // CV on X, Match on Y. (Lower-left = bad, upper-right = ideal) const x = Math.max(0, Math.min(100, cv)); const y = Math.max(0, Math.min(100, match)); return (
); } if (variant === 'bars') { // Hidden — we always render the text bars next to viz. return null; } // Default: 5x5 dot matrix. Rows = match score (top = high), cols = CV fitness (left = low) const cvCol = Math.min(4, Math.floor(cv / 20)); const matchRow = 4 - Math.min(4, Math.floor(match / 20)); return (
{Array.from({ length: 25 }).map((_, i) => { const r = Math.floor(i / 5); const c = i % 5; let cls = 'dot'; if (r === matchRow && c === cvCol) cls += ' active'; else if (c === cvCol) cls += ' in-cv'; else if (r === matchRow) cls += ' in-match'; return
; })}
); } // ============================================================= // Filter popover (generic) // ============================================================= function Popover({ open, onClose, children, anchor }) { if (!open) return null; React.useEffect(() => { const onDoc = (e) => { if (anchor.current && !anchor.current.contains(e.target)) onClose(); }; setTimeout(() => document.addEventListener('mousedown', onDoc), 0); return () => document.removeEventListener('mousedown', onDoc); }, [onClose, anchor]); return
e.stopPropagation()}>{children}
; } // ============================================================= // Dual range slider // ============================================================= function DualRange({ min, max, value, step = 1, onChange }) { const [lo, hi] = value; const set = (newLo, newHi) => { if (newLo > newHi - step) return; onChange([newLo, newHi]); }; const pctLo = ((lo - min) / (max - min)) * 100; const pctHi = ((hi - min) / (max - min)) * 100; return (
set(+e.target.value, hi)} /> set(lo, +e.target.value)} />
); } // ============================================================= // Filter Chip (with popover) // ============================================================= function FilterChip({ label, active, value, onClear, children, popoverWidth }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); return (
setOpen(false)} anchor={ref}>
{typeof children === 'function' ? children(() => setOpen(false)) : children}
); } Object.assign(window, { Icon, ScoreViz, Popover, DualRange, FilterChip });