, and window.ui.toast(message, { kind: 'success'|'error'|'info' }).
function UIRoot() {
const [confirmState, setConfirmState] = useState(null);
const [toasts, setToasts] = useState([]);
useEffect(() => {
window.ui = window.ui || {};
window.ui.confirm = (opts = {}) => new Promise((resolve) => {
setConfirmState({ ...opts, resolve });
});
window.ui.toast = (message, opts = {}) => {
const id = 'tst_' + Math.random().toString(36).slice(2, 8);
const kind = opts.kind || 'info';
const duration = opts.duration || (kind === 'error' ? 5500 : 3800);
setToasts(prev => [...prev, { id, message, kind }]);
setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), duration);
};
}, []);
const resolveConfirm = (ok) => {
if (confirmState) confirmState.resolve(Boolean(ok));
setConfirmState(null);
};
return (
{confirmState && (
resolveConfirm(false)}>
{confirmState.title || 'Are you sure?'}
{confirmState.message &&
{confirmState.message}
}
)}
{toasts.map(t => (
{t.message}
))}
{children}
{help && {help}}
);
}
function RadioGroup({ name, value, onChange, options, columns = 1 }) {
return (
{options.map(opt => {
const v = typeof opt === 'string' ? opt : opt.value;
const l = typeof opt === 'string' ? opt : opt.label;
return (
);
})}
);
}
function CheckChips({ value, onChange, options }) {
const set = new Set(value || []);
const toggle = (v) => {
const n = new Set(set);
if (n.has(v)) n.delete(v); else n.add(v);
onChange([...n]);
};
return (
{options.map(o => (
))}
);
}
function Likert({ value, onChange, max = 5, capLow = 'Low', capHigh = 'High' }) {
return (
{capLow}
{Array.from({ length: max }, (_, i) => i + 1).map(n => (
))}
{capHigh}
);
}
// ---------- Hash router ----------
// Only `#/route` style hashes change the route. Plain `#anchor` hashes
// (in-page section links) are left for the browser to scroll naturally.
function useRoute() {
const parse = () => {
const h = window.location.hash || '';
if (!h.startsWith('#/')) return null; // not a route hash
const path = h.replace(/^#\//, '').split('?')[0] || 'program';
const seg = path.split('/');
return { name: seg[0] || 'program', sub: seg[1] || null };
};
const [route, setRoute] = useState(parse() || { name: 'program', sub: null });
useEffect(() => {
const onHash = () => {
const r = parse();
if (r) setRoute(r);
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
const nav = (name, sub) => {
const target = sub ? `#/${name}/${sub}` : `#/${name}`;
if (window.location.hash !== target) window.location.hash = target;
};
return [route, nav];
}
Object.assign(window, {
Icon, BloomMark, StatusBadge, AppStatusPill, AppHeader, Tabs, Modal,
Field, RadioGroup, CheckChips, Likert, useRoute
});