/* global React */ const { useState, useEffect, useMemo, useRef, useCallback } = React; /* ===================================================================== Icons — minimal stroked SVGs, no emoji ===================================================================== */ const Icon = ({ d, size = 16, strokeWidth = 1.8, fill = 'none', children, ...rest }) => ( {children || (d ? : null)} ); const Icons = { search: (p) => , bell: (p) => , chevDown: (p) => , chevRight: (p) => , chevLeft: (p) => , layout: (p) => , search2: (p) => , list: (p) => , bolt: (p) => , chart: (p) => , users: (p) => , gear: (p) => , plus: (p) => , filter: (p) => , close: (p) => , check: (p) => , ext: (p) => , amazon: (p) => , cart: (p) => , link: (p) => , star: (p) => , starHalf: (p) => , starEmpty: (p) => , trash: (p) => , tag: (p) => , more: (p) => , download: (p) => , upload: (p) => , folder: (p) => , columns: (p) => , drag: (p) => , edit: (p) => , arrow: (p) => , sun: (p) => , moon: (p) => , bookmark: (p) => , sort: (p) => , diamond: (p) => , dollar: (p) => , trend: (p) => , reset: (p) => , calendar: (p) => , video: (p) => , package: (p) => , zap: (p) => , arrowUp: (p) => , arrowDown: (p) => , copy: (p) => , eye: (p) => , minus: (p) => , mail: (p) => , kanban: (p) => , logout: (p) => , }; /* ===================================================================== Atomic UI primitives ===================================================================== */ const Checkbox = ({ checked, indeterminate, onChange }) => ( { e.stopPropagation(); onChange?.(!checked); }} role="checkbox" aria-checked={indeterminate ? "mixed" : checked} > {indeterminate ? : } ); const Toggle = ({ on, onChange }) => ( onChange?.(!on)} /> ); const Field = ({ label, children }) => (
{children}
); const Select = ({ value, onChange, options }) => ( ); const NumPair = ({ values, onChange, placeholderA = "Min", placeholderB = "Max", suffix }) => (
onChange?.([e.target.value, values?.[1] ?? ""])} /> onChange?.([values?.[0] ?? "", e.target.value])} />
); /* range slider for ratings (1-5) */ const RatingRange = ({ value, onChange }) => { // value: [min, max], 1..5 step 0.5 const trackRef = useRef(null); const [dragging, setDragging] = useState(null); // 'a' | 'b' | null const min = 1, max = 5; const pct = (v) => ((v - min) / (max - min)) * 100; useEffect(() => { if (!dragging) return; const move = (e) => { const rect = trackRef.current.getBoundingClientRect(); const x = (e.clientX ?? e.touches?.[0]?.clientX) - rect.left; const ratio = Math.min(1, Math.max(0, x / rect.width)); const raw = min + ratio * (max - min); const snapped = Math.round(raw * 2) / 2; const next = [...value]; if (dragging === 'a') next[0] = Math.min(snapped, value[1]); else next[1] = Math.max(snapped, value[0]); onChange?.(next); }; const up = () => setDragging(null); window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); }; }, [dragging, value, onChange]); return (
setDragging('a')} />
setDragging('b')} />
{value[0].toFixed(1)}★ 1.0 – 5.0 {value[1].toFixed(1)}★
); }; /* sparkline */ const Sparkline = ({ data, w = 90, h = 28, color = 'var(--accent)', glow = true }) => { const min = Math.min(...data), max = Math.max(...data); const range = max - min || 1; const stepX = w / (data.length - 1); const points = data.map((v, i) => `${i * stepX},${h - ((v - min) / range) * (h - 4) - 2}`).join(' '); const areaPoints = `0,${h} ${points} ${w},${h}`; const id = useMemo(() => `sg-${Math.random().toString(36).slice(2, 9)}`, []); return ( ); }; /* stars */ const Stars = ({ value, size = 12 }) => { const full = Math.floor(value); const half = value - full >= 0.25 && value - full < 0.75; const fillCount = half ? full : Math.round(value); return ( {[0,1,2,3,4].map(i => { const isFull = i < full; const isHalf = i === full && half; if (isFull) return ; if (isHalf) return ( ); return ; })} ); }; /* placeholder product image — a tinted gradient with item-specific glyph */ const ProductImage = ({ seed, label }) => { const hue = ((seed * 47) % 360); const initials = (label || "?").split(/[\s\-]/).filter(Boolean).slice(0, 2).map(s => s[0]).join('').toUpperCase(); return (
{initials}
); }; /* segmented control */ const Segmented = ({ value, onChange, options }) => (
{options.map(o => ( ))}
); /* ===================================================================== Sidebar ===================================================================== */ const Sidebar = ({ page, setPage, leadsCount, collapsed, setCollapsed }) => { const items = [ { id: 'dashboard', icon: Icons.layout, label: 'Dashboard' }, { id: 'leads', icon: Icons.bookmark, label: 'Leads', count: leadsCount }, { id: 'flow', icon: Icons.kanban, label: 'Flow' }, { id: 'search', icon: Icons.search2, label: 'Search', primary: true }, { id: 'campaigns', icon: Icons.bolt, label: 'Campaigns' }, { id: 'analytics', icon: Icons.chart, label: 'Analytics' }, { id: 'connections', icon: Icons.users, label: 'Creator Connections' }, { id: 'script', icon: Icons.video, label: 'Scripts' }, ]; const account = [ { id: 'extension', icon: Icons.zap, label: 'Browser Extension' }, { id: 'settings', icon: Icons.gear, label: 'Settings' }, ]; return ( ); }; /* ===================================================================== Topbar ===================================================================== */ const Topbar = ({ page, theme, setTheme, onSignOut }) => { const titles = { dashboard: ['Dashboard', 'Overview'], search: ['Workspace', 'Search'], leads: ['Workspace', 'Leads'], flow: ['Workspace', 'Flow'], campaigns: ['Workspace', 'Campaigns'], analytics: ['Workspace', 'Analytics'], connections: ['Workspace', 'Creator Connections'], import: ['Workspace', 'Import CC Data'], keepa: ['Workspace', 'Keepa Results'], extension: ['Account', 'Browser Extension'], settings: ['Account', 'Settings'], }; const [parent, child] = titles[page] || ['Workspace', page]; return (
{parent} / {child}
{onSignOut && ( )}
AIP
My Account
Creator
); }; /* expose */ Object.assign(window, { Icons, Icon, Checkbox, Toggle, Field, Select, NumPair, RatingRange, Sparkline, Stars, ProductImage, Segmented, Sidebar, Topbar, });