/* global React */
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;
// ====================== SVG ICONS (line, monochrome) ======================
const I = {
back: (p = {}) => (
),
forward: (p = {}) => (
),
search: (p = {}) => (
),
bell: (p = {}) => (
),
bluetooth: (p = {}) => (
),
mail: (p = {}) => (
),
lock: (p = {}) => (
),
user: (p = {}) => (
),
eye: (p = {}) => (
),
phone: (p = {}) => (
),
heart: (p = {}) => (
),
drop: (p = {}) => (
),
lung: (p = {}) => (
),
temp: (p = {}) => (
),
bp: (p = {}) => (
),
building: (p = {}) => (
),
device: (p = {}) => (
),
pin: (p = {}) => (
),
plus: (p = {}) => (
),
filter: (p = {}) => (
),
dash: (p = {}) => (
),
chart: (p = {}) => (
),
wifi: (p = {}) => (
),
camera: (p = {}) => (
),
alert: (p = {}) => (
),
check: (p = {}) => (
),
refresh: (p = {}) => (
),
signal: (p = {}) => (
),
qr: (p = {}) => (
),
exit: (p = {}) => (
),
dots: (p = {}) => (
),
doc: (p = {}) => (
),
share: (p = {}) => (
),
flask: (p = {}) => (
),
shield: (p = {}) => (
),
sun: (p = {}) => (
),
moon: (p = {}) => (
),
google: (p = {}) => (
),
};
// ====================== Wireframe primitives ======================
function StatusBar() {
return (
);
}
function ScreenHeader({ title, sub, onBack, right, big }) {
return (
{onBack &&
Back
}
{title}
{sub &&
{sub}
}
{right &&
{right}
}
);
}
function Field({ icon, label, value, focus, suffix, onClick }) {
return (
{icon && {icon}}
{value || label}
{suffix}
);
}
function Btn({ children, variant = "primary", onClick, full, sm, style }) {
return (
{children}
);
}
function Pill({ children, variant = "" }) {
return {children};
}
function StatusPill({ status }) {
if (status === "ok") return Normal;
if (status === "warn") return Warning;
if (status === "crit") return Critical;
return {status};
}
// ====================== Sparkline ======================
function Spark({ data, width = 110, height = 28, color = "ink", filled = true }) {
const max = Math.max(...data);
const min = Math.min(...data);
const range = max - min || 1;
const dx = width / (data.length - 1);
const points = data.map((v, i) => [i * dx, height - ((v - min) / range) * (height - 4) - 2]);
const path = "M " + points.map(p => p.join(" ")).join(" L ");
const fillPath = path + ` L ${width} ${height} L 0 ${height} Z`;
return (
);
}
// ====================== Heart Beat Icon (animated) ======================
function HeartIcon({ size = 18 }) {
return (
);
}
// ====================== Live ECG track ======================
function ECGTrack() {
return (
);
}
// ====================== Phone Frame ======================
function PhoneFrame({ children }) {
return (
);
}
// ====================== Screen Stage (with transitions) ======================
function ScreenStage({ current, history, transitionType }) {
const [stack, setStack] = useState([{ screen: current, kind: "", key: 0 }]);
const keyRef = useRef(1);
const prevScreen = useRef(current);
useEffect(() => {
if (prevScreen.current === current) return;
const direction = transitionType || "fwd";
const enterKls = {
fwd: "enter-fwd", back: "enter-back", fade: "enter-fade", up: "enter-up", zoom: "enter-zoom",
}[direction] || "enter-fwd";
const exitKls = {
fwd: "exit-fwd", back: "exit-back", fade: "exit-fade", up: "exit-up", zoom: "exit-zoom",
}[direction] || "exit-fwd";
const newKey = keyRef.current++;
setStack((s) => {
const last = s[s.length - 1];
return [
{ ...last, kind: exitKls, leaving: true },
{ screen: current, kind: enterKls, key: newKey },
];
});
prevScreen.current = current;
const t = setTimeout(() => {
setStack((s) => s.filter((x) => !x.leaving).map(x => ({ ...x, kind: "" })));
}, 460);
return () => clearTimeout(t);
}, [current]);
return (
{stack.map((s) => (
{s.screen}
))}
{tabs.map(t => (
onTab(t.id)}>
{t.icon}
{t.label}
))}
{iconMap[kind]}
{isSpO2 && <>}
{spark && (
)}
{value}
{unit}
{label}
);
}
// ====================== Skeleton card ======================
function SkeletonCard() {
return (
);
}
// ====================== Export to globals ======================
Object.assign(window, {
I, StatusBar, ScreenHeader, Field, Btn, Pill, StatusPill,
Spark, HeartIcon, ECGTrack, PhoneFrame, ScreenStage, BottomNav,
VitalCard, SkeletonCard,
useState, useEffect, useRef, useMemo, useCallback,
});