/* ============================================================
MUI 2.0 — shared UI (icons, avatar, badges, scene, bits)
Exports to window for the other Babel scripts.
============================================================ */
const StoreCtx = React.createContext(null);
const useStore = () => React.useContext(StoreCtx);
function Icon({ name, size = 22, color = 'currentColor', fill = 'none', sw = 2, style }) {
const common = { width: size, height: size, viewBox: '0 0 24 24', fill, stroke: color, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', style, className: 'ic' };
const P = {
home: {P[name] || null} ;
}
/* blood-group colors (decorative, on-palette) */
const BLOOD_COLORS = {
'O+': 'var(--orange)', 'O-': 'var(--alert)', 'A+': '#65B017', 'A-': 'var(--success)',
'B+': '#3E9AA0', 'B-': '#2f7e84', 'AB+': '#8a7CC0', 'AB-': '#6E63A8'
};
const bloodColor = (g) => BLOOD_COLORS[g] || '#9BB7BB';
function Avatar({ name, size = 46, count, photoUrl, alt }) {
return (
{photoUrl ?
: TC.initials(name)}
{count != null && count > 0 &&
{count}× }
);
}
function BloodBadge({ group, size = 11 }) {
return {group} ;
}
/* status → visual */
function statusVisual(donor) {
const s = TC.donorStatus(donor);
if (s.status === 'ELIGIBLE') return { s, color: 'var(--eligible)', wash: 'var(--eligible-wash)', icon: 'checkCircle', short: 'Eligible', long: s.eligibleSince ? `Eligible · rested ${s.daysRested}d` : 'Eligible now' };
if (s.status === 'SOON') return { s, color: 'var(--soon)', wash: 'var(--soon-wash)', icon: 'clock', short: `${s.daysRemaining}d`, long: `Eligible in ${s.daysRemaining} day${s.daysRemaining === 1 ? '' : 's'}` };
if (s.status === 'DEFERRED') return { s, color: 'var(--deferred)', wash: 'var(--deferred-wash)', icon: 'shield', short: 'Deferred', long: `Deferred · ${s.reason || 'On hold'}` };
return { s, color: 'var(--waiting)', wash: 'var(--waiting-wash)', icon: 'clock', short: `${s.daysRemaining}d`, long: `Waiting · ${s.daysRemaining} day${s.daysRemaining === 1 ? '' : 's'} left` };
}
function StatusChip({ donor }) {
const v = statusVisual(donor);
return (
);
}
function SectionHead({ title, link, onLink, spark = true, icon, iconColor, linkProminent }) {
return (
{icon ?
{link && (linkProminent ?
{link} )}
);
}
function EmptyState({ title, sub, children }) {
return (
{title}
{sub &&
{sub}
}
{children}
);
}
/* small reusable pearl illustration (flat) — MUI takes its name from
muthu/muth (މުތް), the Dhivehi word for pearl. Three sonar-style rings
(orange/teal/red) cradle the pearl. */
function Pearl({ size = 64 }) {
const uid = React.useId();
return (
);
}
/* ============================================================
HOME ILLUSTRATIONS — pure art, no text overlay.
Pick one of four on-brand backdrops in Me → Preferences.
============================================================ */
const SCENE_VARIANTS = [
{ id: 'living', name: 'Living sky', desc: 'Follows the time of day' },
{ id: 'sprout', name: 'Sprout', desc: 'Plant on cream & sky' },
{ id: 'sunrise', name: 'Sunrise', desc: 'Warm hills at dawn' },
{ id: 'lagoon', name: 'Lagoon', desc: 'Maldivian ocean' },
{ id: 'bloom', name: 'Bloom', desc: 'Meadow in flower' },
{ id: 'midnight', name: 'Starry night', desc: 'Moonlit & calm' }];
/* one art SVG per variant, filling a 390×230 frame */
function SceneArt({ variant }) {
if (variant === 'sunrise') return (
);
if (variant === 'lagoon') return (
);
if (variant === 'bloom') return (
)}
);
if (variant === 'midnight') {
const rand = skyRng(13);
const stars = Array.from({ length: 36 }, () => ({
x: +(rand() * 390).toFixed(1), y: +(rand() * 150).toFixed(1),
r: +(0.6 + rand() * 1.5).toFixed(2), d: (rand() * 3).toFixed(2),
}));
return (
{stars.map((s, i) =>
);
}
// default — sprout
return (
);
}
/* the Today hero scene — pure illustration, variant-driven */
function SproutScene({ patient, variant = 'sprout' }) {
return (
);
}
/* ============================================================
LIVING SKY — the hero whose sky tracks the time of day.
dawn · day · dusk · night. No location, no permissions.
============================================================ */
function skyPhase(h) {
if (h >= 5 && h < 8) return 'dawn';
if (h >= 8 && h < 17) return 'day';
if (h >= 17 && h < 20) return 'dusk';
return 'night';
}
const SKY_PH = {
dawn: { grad: ['#FFEEDD', '#FFDDC8', '#F7C8CC'], body: 'sun', bodyPos: [296, 176, 27], bodyFill: '#FF9E76', bodyGlow: '#FFC8A6',
hillBack: '#D2E6B6', hillFront: '#ACD389', sprout: '#7CB342', cloud: '#FFF6EF', cloudOp: 0.85, stars: 0.35, birds: true, fireflies: false, rays: false, ink: '#5A4438', sub: '#8A6A5A', night: false },
day: { grad: ['#EAF7F4', '#CFEFF6', '#BBE6F0'], body: 'sun', bodyPos: [324, 70, 25], bodyFill: '#FFC53D', bodyGlow: '#FFE596',
hillBack: '#CFEBB7', hillFront: '#A1D07F', sprout: '#65B017', cloud: '#FFFFFF', cloudOp: 0.92, stars: 0, birds: true, fireflies: false, rays: true, ink: '#2E2A24', sub: '#7C7264', night: false },
dusk: { grad: ['#FFD7A6', '#FBA47C', '#CE8AB4'], body: 'sun', bodyPos: [86, 158, 33], bodyFill: '#FF7A3D', bodyGlow: '#FFB678',
hillBack: '#C9A98F', hillFront: '#9B7E74', sprout: '#7A8C3E', cloud: '#FFE7D6', cloudOp: 0.8, stars: 0.25, birds: true, fireflies: false, rays: false, ink: '#4A2E3E', sub: '#7A5466', night: false },
night: { grad: ['#232650', '#33356A', '#433F73'], body: 'moon', bodyPos: [312, 74, 22], bodyFill: '#ECEAFF', bodyGlow: '#9C9AD8',
hillBack: '#2B3550', hillFront: '#1E2740', sprout: '#5E8A66', cloud: '#4A4A86', cloudOp: 0.4, stars: 1, birds: false, fireflies: true, rays: false, ink: '#FBF4E8', sub: '#C9C2DE', night: true },
};
function skyRng(seed) { let s = seed; return () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; }; }
function LivingSky({ phase = 'day', w = 390, h = 300 }) {
const c = SKY_PH[phase] || SKY_PH.day;
const [bx, by, br] = c.bodyPos;
const gid = 'sky_' + phase, bid = 'body_' + phase, glowId = 'glow_' + phase;
const horizon = 212;
const stars = [];
if (c.stars > 0) {
const rand = skyRng(7);
for (let i = 0; i < 46; i++) stars.push({ x: rand() * w, y: rand() * (horizon - 30), r: 0.5 + rand() * 1.4, op: (0.4 + rand() * 0.6) * c.stars, d: (rand() * 3).toFixed(2) });
}
const flies = [];
if (c.fireflies) { const rand = skyRng(19); for (let i = 0; i < 11; i++) flies.push({ x: 30 + rand() * (w - 60), y: 120 + rand() * 95, d: (rand() * 4).toFixed(2), s: (2.4 + rand() * 1.8) }); }
return (
{Array.from({ length: 12 }).map((_, i) => { const a = (i / 12) * Math.PI * 2, r1 = br + 6, r2 = br + 15; return
)}
{phase !== 'night' ? (
) : (
))}
{c.birds && (
)}
);
}
/* the small companion sprite used in the warm insight card */
function Companion({ size = 44, color = '#65B017', wash = 'var(--green-wash)' }) {
return (
);
}
/* ---- Sparkline: a quiet inline trend line (chronological values, oldest→newest) ---- */
function Sparkline({ values, color = 'var(--sky-deep)', height = 26, fill = true, strokeWidth = 2 }) {
if (!values || values.length < 2) return null;
const W = 100, H = 28, pad = 3.5;
const min = Math.min(...values), max = Math.max(...values);
const span = (max - min) || 1;
const n = values.length;
const x = (i) => pad + (i / (n - 1)) * (W - pad * 2);
const y = (v) => pad + (1 - (v - min) / span) * (H - pad * 2);
const pts = values.map((v, i) => [x(i), y(v)]);
const line = pts.map((p, i) => `${i ? 'L' : 'M'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
const area = `${line} L ${pts[n - 1][0].toFixed(1)} ${H} L ${pts[0][0].toFixed(1)} ${H} Z`;
const last = pts[n - 1];
const gid = React.useMemo(() => 'spk' + Math.random().toString(36).slice(2, 8), []);
return (
{fill && (
)}
);
}
/* ---- FieldNote: inline clinical validation message under an input ----
Renders a note from window.CLINICALGUARD ({level,msg,suggest?}). Levels:
info (calm blue), warn (amber), block (red). An optional suggestion is a
one-tap fix. role=alert for warn/block so screen readers announce it. */
function FieldNote({ note, onApplySuggest }) {
if (!note) return null;
const tone = note.level === 'block'
? { color: 'var(--danger, #C2410C)', wash: 'var(--danger-wash, #FDEBE3)', icon: 'warn' }
: note.level === 'warn'
? { color: 'var(--orange)', wash: 'var(--orange-wash)', icon: 'warn' }
: { color: 'var(--sky-deep)', wash: 'var(--sky-wash)', icon: 'info' };
return (
{note.msg}
{note.suggest != null && onApplySuggest && (
<>{' '} onApplySuggest(note.suggest)}>Use {note.suggest}
)}
);
}
/* ---- MedicalDisclaimer: the standing "not medical advice" line ----
variant 'inline' (compact, in a sheet) or 'card' (a soft standalone block). */
function MedicalDisclaimer({ variant = 'inline', style }) {
if (variant === 'card') {
return (
MUIY helps you organise your care — its forecasts, dose targets and insights are estimates, not medical advice . Always follow your haematologist’s guidance. For urgent symptoms, contact your treatment centre.
);
}
return (
For information and tracking only — always consult your healthcare team for medical decisions.
);
}
Object.assign(window, { StoreCtx, useStore, Icon, Avatar, BloodBadge, bloodColor, statusVisual, StatusChip, SectionHead, EmptyState, Pearl, SproutScene, SceneArt, SCENE_VARIANTS, LivingSky, skyPhase, SKY_PH, Companion, Sparkline, FieldNote, MedicalDisclaimer });