/* =========================================================
NETRA AI — icon set (inline SVG) & small widgets
========================================================= */
const Icon = ({ name, size = 16, ...rest }) => {
const s = { width: size, height: size, ...(rest.style || {}) };
const common = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
const paths = {
eye: <>,
live: <>,
alert: <>,
rules: <>,
map: <>,
chart: <>,
devices: <>,
users: <>,
incident: <>,
settings: <>,
search: <>,
bell: <>,
plus: <>,
filter: <>,
download: <>,
play: <>,
pause: <>,
rewind: <>,
ff: <>,
maximize: <>,
mic: <>,
cam: <>,
sensor: <>,
door: <>,
chevron: <>,
close: <>,
check: <>,
flag: <>,
expand: <>,
moon: <>,
sun: <>,
bolt: <>,
history: <>,
};
return ;
};
/* ============ Sparkline ============ */
const Sparkline = ({ data, w = 110, h = 32, color = "var(--iris)", fill = true }) => {
const max = Math.max(...data, 1), min = Math.min(...data, 0);
const span = Math.max(max - min, 1);
const step = w / (data.length - 1);
const pts = data.map((v, i) => [i * step, h - ((v - min) / span) * (h - 4) - 2]);
const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
const area = d + ` L ${w} ${h} L 0 ${h} Z`;
const gid = "spk-" + Math.random().toString(36).slice(2, 7);
return (
);
};
/* ============ Iris logo / Splash animation ============ */
const IrisMark = ({ size = 30, animated = false }) => {
const cls = animated ? "iris-svg" : "";
return (
);
};
/* ============ Splash screen ============ */
const Splash = ({ onDone }) => {
const [step, setStep] = React.useState("Initialising sensors");
React.useEffect(() => {
const steps = [
[350, "Calibrating optics"],
[800, "Loading correlation graph"],
[1300, "Linking 47 devices"],
[1700, "Sync complete"],
];
const timers = steps.map(([t, s]) => setTimeout(() => setStep(s), t));
const done = setTimeout(onDone, 2300);
return () => { timers.forEach(clearTimeout); clearTimeout(done); };
}, []);
return (
N E T R A · A I
नेत्र
{step}…
);
};
/* ============ Status dot ============ */
const StatusDot = ({ status }) => {
const map = { ok: "var(--good)", live: "var(--good)", warn: "var(--warn)", crit: "var(--crit)", down: "var(--ink-3)", off: "var(--ink-3)", degr: "var(--warn)", info: "var(--info)" };
return ;
};
/* ============ KPI card ============ */
const KPI = ({ label, value, unit, delta, deltaKind, spark, sparkColor }) => (
{label}
{value}{unit && {unit}}
{delta &&
{delta}
}
{spark &&
}
);
/* ============ Sev pill ============ */
const SevPill = ({ sev }) => {
const map = { crit: ["crit", "Critical"], warn: ["warn", "Warning"], info: ["info", "Info"], good: ["good", "OK"] };
const [cls, lbl] = map[sev] || ["", sev];
return {lbl};
};
/* ============ Avatar ============ */
const Avatar = ({ initials, size = 28, color }) => (
{initials}
);
Object.assign(window, { Icon, Sparkline, IrisMark, Splash, StatusDot, KPI, SevPill, Avatar });