/* ============================================================================
DIVONCI WORLD — PRIMITIVES & TELEMETRY
Icons, state chips, rings, gauges, sparklines, micro-bars, and the
canvas-rendered Empire Map. Exported to window for cross-file use.
========================================================================== */
const { useRef, useEffect, useState, useMemo } = React;
/* ----------------------------------------------------------------- ICONS - */
/* Line icons, 1.6 stroke, round caps — per design system icon rules. */
const ICON_PATHS = {
globe: '',
council: '',
agent: '',
nexus: '',
project: '',
warroom: '',
workrate: '',
studio: '',
foundry: '',
evidence: '',
risk: '',
comms: '',
finance: '',
ops: '',
settings: '',
skill: '',
log: '',
search: '',
bell: '',
bolt: '',
chevron: '',
arrow: '',
crown: '',
shield: '',
spark: '',
mask: '',
eye: '',
power: '',
filter: '',
plus: '',
check: '',
pause: '',
play: '',
lock: '',
device: '',
branch: '',
rollback: '',
rocket: '',
close: '',
chip: '',
code: '',
layers: '',
cube: '',
film: '',
database: '',
cloud: '',
plug: '',
card: '',
chart: '',
beaker: '',
mic: '',
refresh: '',
users: '',
handshake: '',
doc: '',
invoice: '',
flag: '',
};
function Icon({ name, className = "glyph", style }) {
return (
);
}
/* ------------------------------------------------------------- STATE CHIP - */
function StateChip({ state, label, tag }) {
const meta = DW.STATE_META[state] || DW.STATE_META.standby;
return (
{label || meta.label}
{tag && · {tag}}
);
}
function Led({ state, size = 8 }) {
const c = (DW.STATE_META[state] || DW.STATE_META.standby).c;
return ;
}
/* ------------------------------------------------------------------ RING - */
function Ring({ p = 70, color = "var(--violet-bright)", size = 84, label, unit }) {
const r = size / 2 - 6, c = 2 * Math.PI * r, off = c * (1 - p / 100);
return (
{label != null ? label : p}
{unit && {unit}}
);
}
/* ----------------------------------------------------------------- GAUGE - */
function Gauge({ p = 64, color = "var(--state-caution)", label, unit, size = 84 }) {
// 270° arc
const r = size / 2 - 6, cx = size / 2, cy = size / 2;
const start = 135, sweep = 270;
const pol = (a) => [cx + r * Math.cos((a - 90) * Math.PI / 180), cy + r * Math.sin((a - 90) * Math.PI / 180)];
const arc = (a0, a1) => {
const [x0, y0] = pol(a0), [x1, y1] = pol(a1);
const large = a1 - a0 > 180 ? 1 : 0;
return `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`;
};
return (
);
}
/* ------------------------------------------------------------ SPARKLINE - */
function Sparkline({ data, color = "var(--magenta)", h = 56, fill = true, w = 200 }) {
const max = Math.max(...data), min = Math.min(...data);
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * w;
const y = h - 4 - ((v - min) / (max - min || 1)) * (h - 10);
return [x, y];
});
const line = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
const id = useMemo(() => "spk" + Math.random().toString(36).slice(2, 7), []);
return (
);
}
/* ----------------------------------------------------------- MICRO BARS - */
function MicroBars({ data, peak, h = 56 }) {
const max = Math.max(...data);
return (
{data.map((v, i) => {
const isPeak = i === peak;
return ;
})}
);
}
/* ============================================================ EMPIRE MAP = */
/* Canvas dot-matrix world. Continents = unions of ellipses (synthetic geo),
~2px violet dots; density encodes activity. Heat nodes pulse; relationship
arcs flow; ONE radial scan sweep. Colour is truth. Not decoration. */
const CONTINENTS = [
// N America
[0.18,0.30,0.085,0.13],[0.225,0.42,0.06,0.085],[0.135,0.345,0.05,0.075],
// Greenland
[0.34,0.17,0.032,0.05],
// S America
[0.305,0.66,0.05,0.14],[0.275,0.55,0.038,0.06],
// Europe
[0.49,0.31,0.045,0.055],[0.45,0.345,0.03,0.035],
// Africa
[0.525,0.56,0.062,0.15],[0.5,0.46,0.04,0.05],
// Asia
[0.7,0.32,0.135,0.12],[0.61,0.29,0.06,0.06],[0.78,0.4,0.05,0.05],
// India
[0.675,0.46,0.038,0.055],
// SE Asia / Indonesia
[0.8,0.55,0.05,0.03],[0.84,0.58,0.03,0.022],
// Australia
[0.86,0.73,0.055,0.05],
];
function isLand(x, y) {
for (const [cx, cy, rx, ry] of CONTINENTS) {
const dx = (x - cx) / rx, dy = (y - cy) / ry;
if (dx * dx + dy * dy <= 1) return true;
}
return false;
}
function cssVar(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
}
function EmpireMap({ nodes = DW.MAP_NODES, arcs = DW.MAP_ARCS, height = 460, onNode, focusState }) {
const canvasRef = useRef(null);
const wrapRef = useRef(null);
const [hover, setHover] = useState(null);
const rafRef = useRef(0);
useEffect(() => {
const canvas = canvasRef.current, wrap = wrapRef.current;
const ctx = canvas.getContext("2d");
let W = 0, H = 0, dots = [], dpr = Math.min(window.devicePixelRatio || 1, 2);
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const palette = () => ({
dot: cssVar("--violet-deep") || "#4F33B8",
dotLit: cssVar("--violet-ink") || "#CDB6FF",
states: {
active: cssVar("--state-active"), crisis: cssVar("--state-crisis"),
caution: cssVar("--state-caution"), clear: cssVar("--state-clear"),
focus: cssVar("--state-focus"), standby: cssVar("--state-standby"),
},
});
let pal = palette();
function build() {
const rect = wrap.getBoundingClientRect();
W = rect.width; H = height;
canvas.width = W * dpr; canvas.height = H * dpr;
canvas.style.width = W + "px"; canvas.style.height = H + "px";
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
dots = [];
const step = 9;
for (let py = 14; py < H - 8; py += step) {
for (let px = 8; px < W - 8; px += step) {
const nx = px / W, ny = (py - 8) / (H - 22);
if (isLand(nx, ny)) {
// density jitter so coastlines feel organic
if (Math.random() < 0.12) continue;
dots.push({ x: px + (Math.random() * 2 - 1), y: py + (Math.random() * 2 - 1), nx, ny });
}
}
}
}
function nodePx(n) { return { x: n.x * W, y: 8 + n.y * (H - 22) }; }
function draw(ts) {
ctx.clearRect(0, 0, W, H);
const t = ts / 1000;
// scan sweep angle (single ambient motion)
const sweep = reduce ? -1 : (t * 0.45) % (Math.PI * 2);
const cx = W * 0.5, cy = H * 0.46;
// dots
for (const d of dots) {
// proximity to nearest heat node lifts brightness
let heat = 0, heatColor = null;
for (const n of nodes) {
const np = nodePx(n);
const dist = Math.hypot(np.x - d.x, np.y - d.y);
if (dist < 70) { const w = 1 - dist / 70; if (w > heat) { heat = w; heatColor = pal.states[n.state]; } }
}
// scan sweep highlight
let beam = 0;
if (!reduce) {
const ang = Math.atan2(d.y - cy, d.x - cx);
let diff = Math.abs(((ang - sweep + Math.PI * 3) % (Math.PI * 2)) - Math.PI);
diff = Math.PI - diff;
beam = Math.max(0, 1 - diff * 2.2) * 0.5;
}
const base = 0.34 + heat * 0.4 + beam;
ctx.globalAlpha = Math.min(1, base);
ctx.fillStyle = heat > 0.35 ? heatColor : pal.dot;
const r = heat > 0.35 ? 1.7 : 1.3;
ctx.beginPath(); ctx.arc(d.x, d.y, r, 0, Math.PI * 2); ctx.fill();
}
ctx.globalAlpha = 1;
// arcs (relationships)
for (const [a, b] of arcs) {
const na = nodes.find(n => n.id === a), nb = nodes.find(n => n.id === b);
if (!na || !nb) continue;
const pa = nodePx(na), pb = nodePx(nb);
const mx = (pa.x + pb.x) / 2, my = (pa.y + pb.y) / 2 - Math.hypot(pb.x - pa.x, pb.y - pa.y) * 0.28;
const grad = ctx.createLinearGradient(pa.x, pa.y, pb.x, pb.y);
const ca = pal.states[na.state], cb = pal.states[nb.state];
grad.addColorStop(0, ca); grad.addColorStop(1, cb);
ctx.strokeStyle = grad; ctx.lineWidth = 1; ctx.globalAlpha = 0.28;
ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.quadraticCurveTo(mx, my, pb.x, pb.y); ctx.stroke();
// travelling pulse
if (!reduce) {
const tp = (t * 0.35 + (a.charCodeAt(0) % 7) / 7) % 1;
const qx = (1 - tp) * (1 - tp) * pa.x + 2 * (1 - tp) * tp * mx + tp * tp * pb.x;
const qy = (1 - tp) * (1 - tp) * pa.y + 2 * (1 - tp) * tp * my + tp * tp * pb.y;
ctx.globalAlpha = 0.9; ctx.fillStyle = cb;
ctx.beginPath(); ctx.arc(qx, qy, 1.7, 0, Math.PI * 2); ctx.fill();
}
}
ctx.globalAlpha = 1;
// nodes
for (const n of nodes) {
const p = nodePx(n), col = pal.states[n.state];
const dim = focusState && focusState !== n.state ? 0.25 : 1;
const pulse = reduce ? 0.6 : 0.5 + 0.5 * Math.abs(Math.sin(t * 1.6 + n.x * 6));
ctx.globalAlpha = 0.25 * pulse * dim;
ctx.fillStyle = col;
ctx.beginPath(); ctx.arc(p.x, p.y, 13 + pulse * 5, 0, Math.PI * 2); ctx.fill();
ctx.globalAlpha = dim;
ctx.fillStyle = col;
ctx.beginPath(); ctx.arc(p.x, p.y, 3.4, 0, Math.PI * 2); ctx.fill();
ctx.strokeStyle = "rgba(6,6,12,0.9)"; ctx.lineWidth = 1.4; ctx.stroke();
if (hover === n.id) {
ctx.globalAlpha = 0.9; ctx.strokeStyle = col; ctx.lineWidth = 1;
ctx.beginPath(); ctx.arc(p.x, p.y, 9, 0, Math.PI * 2); ctx.stroke();
}
}
ctx.globalAlpha = 1;
}
function onMove(e) {
const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left, my = e.clientY - rect.top;
let found = null;
for (const n of nodes) { const p = nodePx(n); if (Math.hypot(p.x - mx, p.y - my) < 14) { found = n.id; break; } }
setHover(found);
canvas.style.cursor = found ? "pointer" : "default";
}
function onClick() { if (hover && onNode) { const n = nodes.find(x => x.id === hover); onNode(n); } }
build();
draw(performance.now()); // guaranteed first paint (rAF may be throttled in some embeds)
// Drive the loop with setInterval so it paints even where rAF is paused.
// ~33ms ≈ 30fps; ambient motion only, cheap.
const start = performance.now();
const tick = () => { if (!document.body.classList.contains("no-motion")) draw(performance.now()); };
const loopInt = setInterval(tick, 33);
const ro = new ResizeObserver(() => { pal = palette(); build(); draw(performance.now()); });
ro.observe(wrap);
const themeInt = setInterval(() => { pal = palette(); }, 1000); // pick up tweak/state recolours
canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("click", onClick);
canvas.addEventListener("mouseleave", () => setHover(null));
return () => {
cancelAnimationFrame(rafRef.current); clearInterval(loopInt); ro.disconnect(); clearInterval(themeInt);
canvas.removeEventListener("mousemove", onMove);
canvas.removeEventListener("click", onClick);
};
}, [height, nodes, arcs, hover, focusState, onNode]);
const hn = hover ? nodes.find(n => n.id === hover) : null;
return (
{/* graticule sweep ring overlay */}
{hn && (() => {
const meta = DW.STATE_META[hn.state];
const ag = hn.agent ? DW.agent(hn.agent) : null;
return
{ag && (
{ag.name}
{ag.domain} · owner
)}
{hn.label}
{hn.kind} · {meta.label}
{hn.v}
;
})()}
);
}
Object.assign(window, { Icon, StateChip, Led, Ring, Gauge, Sparkline, MicroBars, EmpireMap, cssVar });