/* ============================================================ B4IOU — shared UI primitives + icons ============================================================ */ const { useState, useRef, useEffect, useCallback, useMemo } = React; /* ---- tiny stroke icons (geometric only) ---- */ const Ico = { arrow: (p) => , back: (p) => , check: (p) => , lock: (p) => , search: (p) => , upload: (p) => , doc: (p) => , download: (p) => , share: (p) => , copy: (p) => , flag: (p) => , bolt: (p) => , shield: (p) => , mail: (p) => , spark: (p) => , x: (p) => , }; function Brand({ pct, onHome }) { return (
B4 B4IOU
); } function TopBar({ step, totalSteps, label, onHome }) { const pct = Math.round((step / totalSteps) * 100); return (
{label}
); } function Btn({ kind = "accent", size = "lg", arrow, children, ...rest }) { return ( ); } function BackBtn({ onClick, label = "Back" }) { return ; } function Pill({ kind, children }) { return {children}; } /* searchable combobox with free typing */ function Combo({ label, value, onChange, placeholder, options }) { const [open, setOpen] = useState(false); const [active, setActive] = useState(-1); const ref = useRef(null); const exactMatch = useMemo(() => { const q = (value || "").toLowerCase().trim(); return !!q && options.some((o) => o.name.toLowerCase() === q); }, [value, options]); const filtered = useMemo(() => { const q = (value || "").toLowerCase().trim(); // empty OR an already-picked value → show the full list so the user can re-browse if (!q || exactMatch) return options.slice(0, 60); return options.filter(o => o.name.toLowerCase().includes(q)).slice(0, 60); }, [value, options, exactMatch]); useEffect(() => { function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, []); // raise the containing card above sibling cards so the dropdown isn't clipped useEffect(() => { const card = ref.current && ref.current.closest(".card"); if (card) card.classList.toggle("card-raised", open); return () => { if (card) card.classList.remove("card-raised"); }; }, [open]); const total = options.length; const matches = filtered.length; const noun = /program|degree|major/i.test(label || "") ? "program" : "school"; return (
{label && }
{ onChange(e.target.value); setOpen(true); setActive(-1); }} onFocus={(e) => { setOpen(true); if (exactMatch) e.target.select(); }} onClick={() => setOpen(true)} style={{ paddingRight: 42 }} />
{open && (filtered.length > 0 || (value || "").trim()) && (
{(value || "").trim() && !exactMatch ? `${matches} match${matches === 1 ? "" : "es"}` : `${total} ${noun}s · scroll`} Type your own
{filtered.map((o, i) => (
{ onChange(o.name); setOpen(false); }} > {o.name} {o.meta && {o.meta}}
))} {filtered.length === 0 && (
No match in our quick-pick list — your typed name works just fine.
)}
{(value || "").trim() && !exactMatch && (
setOpen(false)}> Use “{value.trim()}” ↵ runs any {noun}
)}
)}
); } function Field({ label, ...rest }) { return (
{label && }
); } function Toast({ msg }) { if (!msg) return null; return
{msg}
; } function fmt(n) { if (n === null || n === undefined || isNaN(n)) return "—"; return "$" + Math.round(n).toLocaleString("en-US"); } Object.assign(window, { useState, useRef, useEffect, useCallback, useMemo, Ico, Brand, TopBar, Btn, BackBtn, Pill, Combo, Field, Toast, fmt });