// TextiGreen v4 · shared UI primitives
const { useState: useSc4, useEffect: useEc4, useRef: useRc4 } = React;
// ─── Map API css color names → tasteful soft band colors ────────────
const BAND_COLOR = {
green: { solid: '#2C4A3A', soft: '#E8EDE9' },
yellowgreen: { solid: '#6A8C5E', soft: '#EBEFE6' },
gold: { solid: '#B5A24A', soft: '#F2EFDF' },
orange: { solid: '#B87A3F', soft: '#F4EADF' },
red: { solid: '#9B3A2E', soft: '#F2E2DE' },
grey: { solid: '#9A988F', soft: '#EFEEE9' },
};
function bandColor(css) { return BAND_COLOR[css] || BAND_COLOR.grey; }
const CONF_LEGEND = 'A = high (official or peer-reviewed primary) · B = good · C = indicative · D = proxy / low-confidence';
// ─── Confidence badge — data quality, NOT a rating ──────────────────
const CONF_FILL = { 'A': 1, 'A-': 0.86, 'B+': 0.72, 'B': 0.58, 'B-': 0.46, 'C': 0.3, 'D+': 0.18, 'D': 0.12 };
function ConfidenceBadge({ value, dark = false, showLabel = false }) {
const fill = CONF_FILL[value] != null ? CONF_FILL[value] : 0.3;
const fg = dark ? 'var(--bg)' : 'var(--fg)';
return (
{value || '—'}
{showLabel && confidence}
);
}
// ─── Source chip — opens full citation + caveat ─────────────────────
function SourceChip({ id, dark = false, sources, caveat }) {
const [open, setOpen] = useSc4(false);
const ref = useRc4(null);
useEc4(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
if (!id) return null;
const cite = (sources || window.TGMock.SOURCES);
const found = Array.isArray(cite) ? cite.find(s => s.source_id === id) : cite[id];
const fg = dark ? 'var(--bg)' : 'var(--fg)';
const border = dark ? 'rgba(255,255,255,0.32)' : 'var(--line)';
return (
{open && (
{id}
{found && }
{found ? found.citation : 'Source reference.'}
{caveat && ⚠ {caveat}}
)}
);
}
// ─── Reference colour band (GWP only) — explicitly NOT a rating ──────
function ReferenceBand({ colorInterval, dark = false }) {
if (!colorInterval) return null;
const [css, label] = colorInterval;
const c = bandColor(css);
const order = ['green', 'yellowgreen', 'gold', 'orange', 'red'];
const activeIdx = order.indexOf(css);
return (
{label}
reference band · not a rating
{order.map((k, i) => {
const active = i === activeIdx;
const kc = bandColor(k);
return (
);
})}
);
}
// ─── min–max range bar ──────────────────────────────────────────────
function RangeBar({ value, min, max, dark = false }) {
if (min == null || max == null) return null;
const sm = Math.max(max * 1.12, 0.5);
const lo = (min / sm) * 100, hi = (max / sm) * 100, v = (value / sm) * 100;
const track = dark ? 'rgba(255,255,255,0.12)' : 'var(--surface-2)';
const fill = dark ? 'var(--accent-light)' : 'var(--accent-light)';
const mark = dark ? 'var(--bg)' : 'var(--accent-strong)';
const txt = dark ? 'rgba(255,255,255,0.6)' : 'var(--muted)';
return (
min {min.toFixed(min < 10 ? 2 : 1)}
{value.toFixed(value < 10 ? 2 : 1)}
max {max.toFixed(max < 10 ? 2 : 1)}
);
}
// ─── Plain-language reasons for unapplied corrections ───────────────
function humanizeReason(r) {
if (!r) return 'not applied';
if (/no process.?electricity/i.test(r)) return "Grid adjustment doesn't apply at this stage (no separable electricity data).";
if (/no.*thermal|no.*heat|no steam/i.test(r)) return "Thermal adjustment doesn't apply at this stage (no separable heat data).";
if (/out of (scope|boundary)|not.*scope/i.test(r)) return "Not applicable within this boundary.";
return r;
}
// ─── Correction delta (re-base, not add-on) ─────────────────────────
function CorrectionRow({ title, correction, dark = false }) {
const fg = dark ? 'var(--bg)' : 'var(--fg)';
const muted = dark ? 'rgba(255,255,255,0.55)' : 'var(--muted)';
if (!correction) return null;
const applied = correction.applied;
const delta = correction.total_delta_per_kg != null ? correction.total_delta_per_kg : correction.delta_per_kg;
return (
{title}
{applied ? (
0 ? 'var(--warn-fg)' : delta < 0 ? 'var(--accent)' : muted, fontVariantNumeric: 'tabular-nums' }}>
{delta > 0 ? '+' : ''}{(delta || 0).toFixed(3)}
) : (
not applied
)}
{applied ? (correction.note || 'Re-base applied.') : humanizeReason(correction.reason)}
);
}
// ─── Warning bar ────────────────────────────────────────────────────
function WarningBar({ children, tone = 'caveat', dark = false }) {
const palette = {
caveat: { bar: dark ? 'rgba(255,255,255,0.4)' : 'var(--muted)', txt: dark ? 'rgba(255,255,255,0.8)' : 'var(--muted)' },
warn: { bar: 'var(--band-orange)', txt: dark ? 'var(--bg)' : 'var(--body)' },
strong: { bar: 'var(--band-red)', txt: dark ? 'var(--bg)' : 'var(--body)' },
}[tone];
return (
{children}
);
}
// ─── Skeleton ───────────────────────────────────────────────────────
function Skeleton({ height = 16, width = '100%', dark = false, style }) {
return ;
}
// ─── Offline tag ────────────────────────────────────────────────────
function OfflineTag({ dark = false, label = 'mock data', danger = false }) {
const color = danger ? 'var(--band-red)' : (dark ? 'rgba(255,255,255,0.6)' : 'var(--muted)');
const borderColor = danger ? 'var(--band-red)' : (dark ? 'rgba(255,255,255,0.35)' : 'var(--line)');
return (
◌ {label}
);
}
// ─── Field label ────────────────────────────────────────────────────
// ─── Hover/focus info tooltip (the small "i" next to a label) ───────
function InfoDot({ text, dark = false }) {
const [open, setOpen] = useSc4(false);
if (!text) return null;
return (
setOpen(true)} onMouseLeave={() => setOpen(false)}>
setOpen(true)} onBlur={() => setOpen(false)}
style={{
width: 15, height: 15, borderRadius: '50%', display: 'inline-flex',
alignItems: 'center', justifyContent: 'center',
border: `1px solid ${dark ? 'rgba(255,255,255,0.5)' : 'var(--muted)'}`,
color: dark ? 'rgba(255,255,255,0.7)' : 'var(--muted)',
fontSize: 10, lineHeight: 1, cursor: 'help', fontFamily: 'var(--sans)',
textTransform: 'none', letterSpacing: 0, fontWeight: 700, fontStyle: 'italic',
}}>i
{open && (
{text}
)}
);
}
function Label({ children, hint, n, info }) {
return (
{n != null && {String(n).padStart(2, '0')}}{children}
{info && }
{hint && {hint}}
);
}
// ─── Segmented control ──────────────────────────────────────────────
function Segmented({ options, value, onChange, compact }) {
return (
{options.map((o, i) => {
const active = o.value === value;
return (
);
})}
);
}
// ─── Plain select ───────────────────────────────────────────────────
function Select({ value, onChange, children, placeholder }) {
return (
);
}
// ─── Searchable select (for origin) ─────────────────────────────────
function SearchSelect({ value, onChange, groups, placeholder = 'Search…' }) {
// groups: [{ label, items: [{ value, label, sub }] }]
const [open, setOpen] = useSc4(false);
const [q, setQ] = useSc4('');
const ref = useRc4(null);
useEc4(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); setQ(''); } };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
const allItems = groups.flatMap(g => g.items);
const current = allItems.find(i => i.value === value);
const ql = q.trim().toLowerCase();
const filtered = groups.map(g => ({
label: g.label,
items: g.items.filter(i => !ql || i.label.toLowerCase().includes(ql) || (i.sub || '').toLowerCase().includes(ql)),
})).filter(g => g.items.length);
return (
{open && (
setQ(e.target.value)} placeholder="Type to filter…" style={{
width: '100%', padding: '9px 10px', border: '1px solid var(--line)', background: 'var(--bg)',
fontSize: 13, fontFamily: 'var(--sans)', color: 'var(--fg)', minHeight: 40,
}} />
{filtered.length === 0 &&
No matches.
}
{filtered.map(g => (
{g.label}
{g.items.map(it => (
))}
))}
)}
);
}
// ─── Disclosure ─────────────────────────────────────────────────────
function Disclosure({ title, defaultOpen = false, children }) {
const [open, setOpen] = useSc4(defaultOpen);
return (
{open &&
{children}
}
);
}
// ─── Logo ───────────────────────────────────────────────────────────
function Logo() {
return (
TextiGreen
);
}
// ─── Connection pill ────────────────────────────────────────────────
function ConnectionPill({ conn, onClick }) {
const map = {
online: { dot: 'var(--accent)', txt: 'Live', sub: 'backend' },
offline: { dot: 'var(--band-orange)', txt: 'Offline', sub: 'mock' },
checking: { dot: 'var(--muted)', txt: 'Checking', sub: '' },
unknown: { dot: 'var(--line)', txt: '—', sub: '' },
};
const s = conn.mode === 'offline' ? map.offline : (map[conn.status] || map.unknown);
return (
);
}
Object.assign(window, {
bandColor, ConfidenceBadge, SourceChip, ReferenceBand, RangeBar, CorrectionRow,
WarningBar, Skeleton, OfflineTag, Label, Segmented, Select, SearchSelect, Disclosure, Logo, ConnectionPill,
humanizeReason,
});