/* MycoPolicy — UI components */ const { useState, useEffect, useMemo, useRef, useCallback } = React; const STATUS = window.MP_STATUS_DEFS; const ROLES = window.MP_ROLES; // ─── ICONS ────────────────────────────────────────────────────────────── const Ico = { search: (p) => , arrow: (p) => , check: (p) => , x: (p) => , external: (p) => , alert: (p) => , doc: (p) => , map: (p) => , }; // ─── STATUS BADGE ─────────────────────────────────────────────────────── function StatusBadge({ status, size }) { const def = STATUS[status]; if (!def) return null; return ( {def.label} ); } // ─── STATUS BAND ──────────────────────────────────────────────────────── function StatusBand({ states, onPick }) { const groups = useMemo(() => { const buckets = { active_licensing: { def: STATUS.active_licensing, list: [] }, enacted_not_open: { def: STATUS.enacted_not_open, list: [] }, limited_pilot_or_research: { def: STATUS.limited_pilot_or_research, list: [] }, watchlist: { def: STATUS.watchlist, list: [] } }; states.forEach(s => { if (buckets[s.status]) buckets[s.status].list.push(s); }); return Object.values(buckets); }, [states]); return (
{groups.map(({ def, list }) => (
onPick(def.key)}>
{def.label}
{list.length}
{list.length === 0 ? None : list.slice(0, 4).map(s => s.state).join(', ') + (list.length > 4 ? ` +${list.length - 4} more` : '') }
Filter to these ›
))}
); } // ─── STATE CARD ──────────────────────────────────────────────────────── function StateCard({ state, onOpen }) { const def = STATUS[state.status]; const enrich = state.enrich; const verified = enrich?.last_verified || '2026-05-23'; return (
onOpen(state)}>
{state.state}
{state.postal}

{state.summary}

{state.commercial_license_available ? Apply now : {def.short} } →
Verified {verified} {state.license_paths.length > 0 && · {state.license_paths.length} paths}
); } // ─── FILTERS ──────────────────────────────────────────────────────────── function Filters({ q, setQ, statusFilter, setStatusFilter, roleFilter, setRoleFilter, applyOnly, setApplyOnly, count, states, onReset }) { const statusKeys = ['all', 'active_licensing', 'enacted_not_open', 'limited_pilot_or_research', 'trigger_law', 'local_deprioritization_only', 'watchlist', 'prohibited_no_pathway']; const counts = useMemo(() => { const c = { all: states.length }; states.forEach(s => { c[s.status] = (c[s.status] || 0) + 1; }); return c; }, [states]); return (
setQ(e.target.value)} /> {q && }
{count} / {states.length} jurisdictions
Status
{statusKeys.map(k => ( ))}
Role
{ROLES.map(r => ( ))}
{(q || statusFilter !== 'all' || roleFilter || applyOnly) && (
Active filters: {statusFilter !== 'all' && {STATUS[statusFilter].short}} {roleFilter && {ROLES.find(r => r.key === roleFilter)?.label}} {applyOnly && Apply now only} {q && “{q}”}
)}
); } // ─── DETAIL DRAWER ───────────────────────────────────────────────────── function DetailDrawer({ state, onClose, onReportCorrection }) { useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; if (state) { document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; } return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [state, onClose]); const isOpen = !!state; const enrich = state?.enrich; const qaRow = (key, label) => { const ans = enrich?.can_apply?.[key] || (state?.commercial_license_available && state.applicable_roles?.includes(key) ? 'yes' : 'no'); return { label, ans }; }; return (
); } Object.assign(window, { StatusBadge, StatusBand, StateCard, Filters, DetailDrawer, Ico });