{(icon || label) && ( {icon && } {label && {label}} )}

{value}{unit}

); } return (

{label && (

{label} {value}{unit}

)}

{/* Gloss interne très léger (un seul highlight haut, pas de bande inférieure) */}

); } /* ============================================================ RadialGauge — jauge ronde, version épurée ============================================================ */ function RadialGauge({ value = 64, label, size = 120, warnAt = 70, errAt = 90 }) { const pct = Math.max(0, Math.min(100, value)); const color = pct >= errAt ? 'var(--err)' : pct >= warnAt ? 'var(--warn)' : 'var(--ok)'; const glow = pct >= errAt ? 'var(--err-glow)' : pct >= warnAt ? 'var(--warn-glow)' : 'var(--ok-glow)'; const r = size / 2 - 10; const cx = size / 2; const cy = size / 2 + 6; const circ = Math.PI * r; const offset = circ - (pct / 100) * circ; return (

{value}%

{label &&

{label}

}

); } /* ============================================================ BigRadialGauge — la grande jauge cockpit "santé système" ============================================================ */ function BigRadialGauge({ value = 87, label = 'score santé · stable' }) { const size = 320; const r = 130; const cx = size / 2; const cy = size / 2 + 30; const circ = Math.PI * r; const offset = circ - (value / 100) * circ; const color = value >= 80 ? 'var(--ok)' : value >= 50 ? 'var(--warn)' : 'var(--err)'; return (

{value}

{label}

); } /* ============================================================ Popup — modale glassmorphism centrée + bouton fermer ============================================================ */ function Popup({ open, onClose, title, children, footer, width = 460 }) { if (!open) return null; return (

e.stopPropagation()} style={{ width, maxWidth: '90%', borderRadius: 12, boxShadow: 'var(--shadow-3)', animation: 'popin .25s cubic-bezier(.3,.7,.3,1.2)', overflow: 'hidden', }}>

{title}

{children}

{footer && (

{footer}

)}

); } /* ============================================================ Button — bouton classique avec variantes ============================================================ */ function Button({ children, icon, onClick, variant = 'default', size = 'md' }) { const sizes = { sm: { padding: '5px 10px', fontSize: 12, h: 28 }, md: { padding: '7px 14px', fontSize: 13, h: 34 }, lg: { padding: '10px 18px', fontSize: 14, h: 40 }, }[size]; const variants = { default: { bg: 'var(--bg-3)', fg: 'var(--ink-1)', bd: 'var(--border-2)' }, primary: { bg: 'var(--accent)', fg: 'var(--bg-1)', bd: 'var(--accent-soft)' }, ghost: { bg: 'transparent', fg: 'var(--ink-2)', bd: 'var(--border-2)' }, danger: { bg: 'var(--bg-3)', fg: 'var(--err)', bd: 'var(--err)' }, }[variant]; return ( ); } /* ============================================================ TreeNav — arbre dépliable avec icône en tête (style B) ============================================================ */ function TreeNav({ groups, activeId, onSelect }) { const [open, setOpen] = useState(() => Object.fromEntries(groups.map(g => [g.id, g.open !== false])) ); return (

{groups.map(g => (

setOpen({ ...open, [g.id]: !open[g.id] })} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 8px', borderRadius: 6, color: 'var(--ink-2)', background: 'transparent', border: '1px solid transparent', cursor: 'pointer', }}> {g.label} {g.count != null && ( {g.count} )}

{open[g.id] && (

{g.children.map(c => { const active = c.id === activeId; return (

onSelect && onSelect(c.id)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderRadius: 6, background: active ? 'var(--accent-tint)' : 'transparent', color: active ? 'var(--ink-1)' : 'var(--ink-2)', borderLeft: active ? '2px solid var(--accent)' : '2px solid transparent', marginLeft: active ? 0 : 2, fontSize: 12.5, }}> {c.label} {c.meta && {c.meta}}

); })}

)}

))}

); } /* ============================================================ Sparkline pour les KPI ============================================================ */ function Sparkline({ points = [], color = 'var(--accent)', h = 28 }) { const w = 100; const max = Math.max(...points); const min = Math.min(...points); const range = max - min || 1; const step = w / (points.length - 1); const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i * step).toFixed(1)} ${(h - 2 - ((p - min) / range) * (h - 4)).toFixed(1)}` ).join(' '); const area = path + ` L ${w} ${h} L 0 ${h} Z`; return ( ); } /* ============================================================ LineChart — grand graph multi-séries ============================================================ */ function LineChart({ series, h = 200, labels }) { const w = 600; const padding = { l: 36, r: 12, t: 12, b: 24 }; const innerW = w - padding.l - padding.r; const innerH = h - padding.t - padding.b; const all = series.flatMap(s => s.points); const max = Math.max(...all) * 1.1; const min = 0; const range = max - min; const ptsCount = series[0].points.length; const step = innerW / (ptsCount - 1); return ( ); } /* Expose */ Object.assign(window, { Icon, Tooltip, IconButton, Toggle, StatusLed, BatteryGauge, RadialGauge, BigRadialGauge, Popup, Button, TreeNav, Sparkline, LineChart, }); /* Effets hover sur les jauges (sans effet au clic) */ (function injectGaugeHoverStyles() { if (document.getElementById('gauge-hover-styles')) return; const s = document.createElement('style'); s.id = 'gauge-hover-styles'; s.textContent = ` .bg-hover:hover .bg-bar { border-color: color-mix(in oklch, var(--accent) 60%, var(--border-3)); } .bg-hover:hover .bg-fill { box-shadow: 0 0 14px var(--bg-glow, var(--accent-glow)); filter: brightness(1.15); } .gauge-hover { transition: filter .2s; } .gauge-hover:hover { filter: drop-shadow(0 0 8px var(--accent-glow)) brightness(1.08); } `; document.head.appendChild(s); })();