/* global React */
// Shared primitives: buttons, badges, icons, ref chips, sigil, sparkline, KPI
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ─── Deterministic hash → generative sigil ───────────────────
function hashStr(s) {
let h = 2166136261 >>> 0;
for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
return h >>> 0;
}
function Sigil({ seed, size = 28 }) {
// 5x5 symmetric glyph deterministic from seed
const h = hashStr(seed);
const cells = [];
for (let y = 0; y < 5; y++) {
for (let x = 0; x < 3; x++) {
const bit = (h >> (y * 3 + x)) & 1;
cells.push({ x, y, on: bit });
if (x < 2) cells.push({ x: 4 - x, y, on: bit });
}
}
const unit = size / 5;
return (
);
}
// ─── Ref chip (monospace, copyable) ──────────────────────────
function RefChip({ r, onClick }) {
const [copied, setCopied] = useState(false);
return (
);
}
// ─── Status dot ──────────────────────────────────────────────
const STATUS_COLORS = {
signal: 'var(--signal)',
copper: 'var(--copper)',
amber: 'var(--amber)',
plasma: 'var(--plasma)',
rouge: 'var(--rouge)',
muted: 'var(--ink-4)',
};
function Dot({ tone = 'signal', pulse = false, size = 8 }) {
return (
);
}
// ─── Badge ───────────────────────────────────────────────────
function Badge({ children, tone = 'neutral', variant = 'solid', icon }) {
const toneMap = {
neutral: { bg: 'var(--paper-2)', fg: 'var(--ink-2)', bd: 'var(--line-2)' },
signal: { bg: 'var(--signal-tint)', fg: 'var(--signal-deep)', bd: 'var(--signal-soft)' },
copper: { bg: 'var(--copper-tint)', fg: 'var(--copper)', bd: 'var(--copper-tint)' },
amber: { bg: 'rgba(232,179,65,0.14)', fg: '#8C6510', bd: 'rgba(232,179,65,0.3)' },
plasma: { bg: 'var(--plasma-tint)', fg: 'var(--plasma)', bd: 'var(--plasma-tint)' },
rouge: { bg: 'var(--rouge-tint)', fg: 'var(--rouge)', bd: 'var(--rouge-tint)' },
ink: { bg: 'var(--ink)', fg: 'var(--paper)', bd: 'var(--ink)' },
};
const t = toneMap[tone] || toneMap.neutral;
return (
{icon} {children}
);
}
// ─── Button ──────────────────────────────────────────────────
function Btn({ children, variant = 'ghost', size = 'md', onClick, icon, iconRight, kbd, style, disabled, tone }) {
const sizes = {
sm: { pad: '4px 10px', fs: 12, h: 26 },
md: { pad: '6px 12px', fs: 13, h: 32 },
lg: { pad: '10px 16px', fs: 14, h: 40 },
}[size];
const base = {
display: 'inline-flex', alignItems: 'center', gap: 8,
fontSize: sizes.fs, fontWeight: 500,
padding: sizes.pad, height: sizes.h,
borderRadius: 6, letterSpacing: 0,
transition: 'all 120ms cubic-bezier(.2,.8,.2,1)',
cursor: disabled ? 'not-allowed' : 'pointer',
opacity: disabled ? 0.5 : 1,
};
const variants = {
primary: { ...base, background: 'var(--ink)', color: 'var(--paper)', border: '1px solid var(--ink)' },
signal: { ...base, background: 'var(--signal)', color: '#0B1F12', border: '1px solid var(--signal)', fontWeight: 600 },
outline: { ...base, background: 'transparent', color: 'var(--ink)', border: '1px solid var(--line-2)' },
ghost: { ...base, background: 'transparent', color: 'var(--ink-2)', border: '1px solid transparent' },
danger: { ...base, background: 'var(--rouge-tint)', color: 'var(--rouge)', border: '1px solid var(--rouge-tint)' },
};
const hover = {
primary: { background: 'var(--ink-2)' },
signal: { background: 'var(--signal-deep)', color: '#fff' },
outline: { background: 'var(--paper-2)' },
ghost: { background: 'var(--paper-2)' },
danger: { background: 'rgba(217,70,70,0.18)' },
};
return (
);
}
// ─── Simple SVG icons (1.5px line) ───────────────────────────
const Icon = {
search: (p) => ,
command: (p) => ,
arrow: (p) => ,
check: (p) => ,
cross: (p) => ,
plus: (p) => ,
filter: (p) => ,
more: (p) => ,
bolt: (p) => ,
camera: (p) => ,
mic: (p) => ,
spark: (p) => ,
doc: (p) => ,
sign: (p) => ,
map: (p) => ,
kanban: (p) => ,
home: (p) => ,
folder: (p) => ,
book: (p) => ,
chart: (p) => ,
people: (p) => ,
settings: (p) => ,
copilot: (p) => ,
lock: (p) => ,
shield: (p) => ,
eye: (p) => ,
refresh: (p) => ,
flame: (p) => ,
sun: (p) => ,
download: (p) => ,
layers: (p) => ,
bell: (p) => ,
calendar: (p) => ,
calendarPlus: (p) => ,
clockFill: (p) => ,
};
// ─── Sparkline ───────────────────────────────────────────────
function Sparkline({ data, width = 80, height = 20, stroke = 'currentColor', fill = 'none', strokeWidth = 1.5 }) {
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / range) * (height - 2) - 1;
return `${x.toFixed(1)},${y.toFixed(1)}`;
}).join(' ');
const area = `M0,${height} L${pts.split(' ').join(' L')} L${width},${height} Z`;
return (
);
}
// Bar sparkline
function BarSpark({ data, width = 80, height = 20, fg = 'var(--signal)', bg = 'var(--line)' }) {
const max = Math.max(...data) || 1;
const w = width / data.length;
return (
);
}
// Animated number
function AnimNum({ value, format = (n) => n, duration = 600 }) {
const [cur, setCur] = useState(value);
const prev = useRef(value);
useEffect(() => {
if (prev.current === value) return;
const start = performance.now();
const from = prev.current, to = value;
let raf;
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setCur(from + (to - from) * eased);
if (p < 1) raf = requestAnimationFrame(tick);
else prev.current = to;
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [value, duration]);
return <>{format(cur)};
}
function fmtMWh(n) {
if (n >= 1e6) return (n / 1e6).toFixed(2) + ' GWh';
if (n >= 1e3) return (n / 1e3).toFixed(1) + ' MWh';
return Math.round(n).toLocaleString('fr-FR') + ' kWh';
}
function fmtEur(n) {
if (n >= 1e6) return (n / 1e6).toFixed(2) + ' M€';
if (n >= 1e3) return (n / 1e3).toFixed(1) + ' k€';
return Math.round(n).toLocaleString('fr-FR') + ' €';
}
function fmtInt(n) { return Math.round(n).toLocaleString('fr-FR'); }
function fmtPct(n) { return n.toFixed(1) + ' %'; }
Object.assign(window, {
hashStr, Sigil, RefChip, Dot, Badge, Btn, Icon,
Sparkline, BarSpark, AnimNum,
fmtMWh, fmtEur, fmtInt, fmtPct,
});