// UI primitives & icons ------------------------------------------------- const { useState, useEffect, useRef, useMemo } = React; // Tiny icon set (stroke-based, matches lucide weight) const Icon = { Check: (p) => , X: (p) => , ChevDown: (p) => , ChevRight:(p) => , ArrowL: (p) => , ArrowRight:(p) => , Search: (p) => , Filter: (p) => , Brain: (p) => , Edit: (p) => , Trash: (p) => , Plus: (p) => , Globe: (p) => , Mail: (p) => , User: (p) => , Info: (p) => , Sparkle: (p) => , Star: (p) => , List: (p) => , News: (p) => , Shield: (p) => , Brain: (p) => , ExtLink: (p) => , Columns: (p) => , Download: (p) => , }; // Button function Button({ variant='default', size='md', className='', children, ...rest }) { const base = 'inline-flex items-center justify-center gap-1.5 font-medium rounded-md transition-colors disabled:opacity-50 disabled:pointer-events-none whitespace-nowrap'; const sizes = { sm: 'text-sm px-3 py-1.5', md: 'text-sm px-3.5 py-2', lg: 'text-base px-4 py-2.5' }; const variants = { default: 'bg-ink text-white hover:bg-black', ghost: 'text-ink hover:bg-gray-100', outline: 'border border-line text-ink hover:bg-gray-50', subtle: 'bg-gray-100 text-ink hover:bg-gray-200', brand: 'bg-brand-500 text-white hover:bg-brand-700', danger: 'text-red-700 hover:bg-red-50 border border-transparent hover:border-red-200', quiet: 'text-ink-muted hover:text-ink hover:bg-gray-100', }; return ; } // Sparkline — for match-rate trend. Renders line + area. function Sparkline({ values = [], width = 480, height = 120, showAxis = true, stroke = '#3465E3', fill = 'rgba(52,101,227,0.08)' }) { if (values.length < 2) return null; const min = Math.min(...values) * 0.9; const max = Math.max(...values) * 1.05; const pad = 8; const w = width - pad*2; const h = height - pad*2; const pts = values.map((v, i) => { const x = pad + (i/(values.length-1)) * w; const y = pad + (1 - (v-min)/(max-min)) * h; return [x, y]; }); const path = pts.map((p,i) => (i===0?`M${p[0]},${p[1]}`:`L${p[0]},${p[1]}`)).join(' '); const area = `${path} L${pts[pts.length-1][0]},${pad+h} L${pts[0][0]},${pad+h} Z`; return ( {showAxis && ( {[0,.25,.5,.75,1].map(t => ( ))} )} {pts.map((p,i) => ( ))} ); } // Bar series — for feedback counts function BarSeries({ values = [], width = 480, height = 60, color = 'hsl(0 0% 82%)' }) { if (!values.length) return null; const max = Math.max(...values); const pad = 8; const w = width - pad*2; const barGap = 3; const barW = (w - barGap*(values.length-1)) / values.length; return ( {values.map((v,i) => { const x = pad + i*(barW+barGap); const bh = (v/max) * (height - pad*2); const y = height - pad - bh; return ; })} ); } // Toast function useToasts() { const [toasts, setToasts] = useState([]); const push = (text, tone='default') => { const id = Math.random().toString(36).slice(2); setToasts(t => [...t, { id, text, tone }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3600); }; const node = (
{toasts.map(t => (
{t.tone === 'positive' && } {t.tone === 'negative' && } {t.text}
))}
); return { push, node }; } // Modal function Modal({ open, onClose, children, width = 'max-w-lg' }) { if (!open) return null; return (
e.stopPropagation()}> {children}
); } Object.assign(window, { Icon, Button, Sparkline, BarSeries, useToasts, Modal });