/* ProofSource redesign — shared UI primitives. Exports to window. */
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- store hook ---------- */
function useStore(selector) {
const sel = selector || ((s) => s);
const [v, setV] = useState(() => sel(window.Store.get()));
useEffect(() => window.Store.subscribe((s) => {
const next = sel(s);
setV((prev) => {
// skip re-render if primitive/same-reference
if (prev === next) return prev;
// for plain objects, do shallow-key compare to avoid re-renders from clone()
if (prev && next && typeof prev === 'object' && typeof next === 'object' && !Array.isArray(prev)) {
const pk = Object.keys(prev), nk = Object.keys(next);
if (pk.length === nk.length && pk.every((k) => prev[k] === next[k])) return prev;
}
return next;
});
}), []);
return v;
}
/* ---------- helpers ---------- */
function useInterval(fn, ms, on = true) {
const ref = useRef(fn);
useEffect(() => { ref.current = fn; });
useEffect(() => {
if (!on) return;
const id = setInterval(() => ref.current(), ms);
return () => clearInterval(id);
}, [ms, on]);
}
const usd = (n, d = 6) => '$' + Number(n).toFixed(d);
const ACTION_COLOR = { BUY: 'var(--buy)', REUSE: 'var(--reuse)', SKIP: 'var(--skip)', BLOCK: 'var(--block)' };
const TONE_FILL = { buy: 'var(--buy-fill)', reuse: 'var(--reuse-fill)', skip: 'var(--skip-fill)', block: 'var(--block-fill)', earned: 'var(--earned-fill)' };
const TONE_INK = { buy: 'var(--buy)', reuse: 'var(--reuse)', skip: 'var(--skip)', block: 'var(--block)', earned: 'var(--earned2)' };
/* ---------- Wordmark ---------- */
function Wordmark({ size = 19, sub = true, onClick }) {
return (
ProofSource
{sub && settlement floor}
);
}
/* ---------- Button ---------- */
function Btn({ variant = 'default', size = 'md', children, style, ...rest }) {
const [h, setH] = useState(false), [p, setP] = useState(false);
const v = {
default: { background: 'var(--panel2)', color: 'var(--text)', border: '1px solid var(--line)' },
primary: { background: 'var(--buy)', color: 'var(--on-buy)', border: '1px solid transparent' },
earn: { background: 'var(--earned)', color: 'var(--on-earned)', border: '1px solid transparent' },
ghost: { background: 'transparent', color: 'var(--mut)', border: '1px solid transparent' },
outline: { background: 'transparent', color: 'var(--text)', border: '1px solid var(--line)' },
}[variant];
const sz = size === 'sm' ? { padding: '8px 13px', fontSize: 13 } : size === 'lg' ? { padding: '14px 22px', fontSize: 15 } : { padding: '11px 18px', fontSize: 14 };
const hov = h ? (variant === 'primary' || variant === 'earn' ? { filter: 'brightness(1.08)' } : variant === 'ghost' ? { color: 'var(--text)' } : { borderColor: 'var(--mut)' }) : null;
return (
);
}
/* ---------- Eyebrow ---------- */
function Eyebrow({ tone, children, style }) {
const c = tone ? TONE_INK[tone] : 'var(--faint)';
return {children}
;
}
/* ---------- Tag / status pill ---------- */
function Tag({ tone = 'earned', dot = true, children, style }) {
return (
{dot && }
{children}
);
}
/* ---------- Decision badge ---------- */
function Badge({ tone = 'buy', children, style }) {
return {children};
}
/* ---------- Animated counter ---------- */
function CountUp({ to, prefix = '', suffix = '', decimals = 0, dur = 1400, style }) {
const [v, setV] = useState(0);
const started = useRef(false);
useEffect(() => {
let raf; const t0 = performance.now();
const tick = (t) => {
const k = Math.min(1, (t - t0) / dur);
const e = 1 - Math.pow(1 - k, 3);
setV(to * e);
if (k < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [to, dur]);
return {prefix}{v.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}{suffix};
}
/* ---------- Live settlement ticker — real receipts only ---------- */
function Ticker() {
const [items, setItems] = useState([]);
function load() {
window.PS_API.receipts().then((data) => {
if (Array.isArray(data) && data.length > 0) setItems(data);
}).catch(() => {});
}
useEffect(() => { load(); }, []);
useInterval(load, 12000);
// Render nothing until real settlements exist
if (items.length === 0) return null;
// Triple the array so the CSS infinite scroll never gaps
const strip = [...items, ...items, ...items];
const speed = Math.max(28, items.length * 5);
return (
{strip.map((s, i) => (
{s.providerName || s.providerId}
{String(s.resourceTitle || s.resourceId || '').slice(0, 28) || 'cited content'}
+{Number(s.amountUsdc || 0).toFixed(6)}
{s.id}
))}
);
}
/* ---------- Pipeline (lit nodes) ---------- */
function Pipeline({ steps, reached = 0, vertical = false, gateStep = 'verify' }) {
return (
{steps.map((s, i) => {
const done = i < reached, active = i === reached - 1, gate = s === gateStep;
return (
{s}{gate && done ? ' ✓' : ''}
);
})}
);
}
/* ---------- Receipt (paper, optional print/tear) ---------- */
function Receipt({ title = 'Proof of citation', stamp = 'VERIFIED', rows = [], amount, amountLabel = 'settled', printing = false, style }) {
return (
{/* perforated top edge */}
{title}
{stamp &&
{stamp}
}
{rows.map((r, i) => (
{r.k}
{r.v}
))}
{amount != null && (
{amountLabel}
{amount}
)}
{eyebrow &&
{eyebrow}}
{title}
{lead &&
{lead}
}