/* trainer-ui.jsx — shared components */
const { useState, useEffect, useRef } = React;
/* ── Icons (same stroke system) ── */
const TPATHS = {
grid:["M4 4h7v7H4zM13 4h7v7h-7zM13 13h7v7h-7zM4 13h7v7H4z"],
play:[["M7 5l12 7-12 7z",{fill:"currentColor",stroke:"none"}]],
users:["M16 19v-1a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v1","M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z","M22 19v-1a4 4 0 0 0-3-3.9","M16 3.1A4 4 0 0 1 16 11"],
book:["M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z","M19 19H6a2 2 0 0 0-2 2"],
target:["M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0","M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0-10 0","M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0"],
person:["M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z","M4 21v-1a8 8 0 0 1 16 0v1"],
chevL:["M15 6l-6 6 6 6"],
chevR:["M9 6l6 6-6 6"],
chevD:["M6 9l6 6 6-6"],
arrowR:["M5 12h14","M13 6l6 6-6 6"],
check:["M5 13l4 4L19 7"],
checkCircle:["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z","M8 12l3 3 5-6"],
x:["M6 6l12 12M18 6L6 18"],
plus:["M12 5v14","M5 12h14"],
graduation:["M3 9l9-5 9 5-9 5z","M7 11v5c0 1 2.2 2.5 5 2.5s5-1.5 5-2.5v-5","M21 9v5"],
shield:["M12 3l8 3v6c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V6z"],
globe:["M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0","M3 12h18","M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z"],
broadcast:["M2 12a10 10 0 1 1 20 0","M6 12a6 6 0 1 1 12 0","M10 12a2 2 0 1 1 4 0"],
clock:["M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0","M12 7v5l3 2"],
mic:["M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z","M19 10v2a7 7 0 0 1-14 0v-2","M12 19v4M8 23h8"],
note:["M5 4h14v12l-5 5H5z","M14 21v-5h5"],
star:[["M12 3l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 18l-5.8 3 1.1-6.5L2.6 9.8l6.5-.9z",{fill:"currentColor",stroke:"none"}]],
flame:["M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c2 2 3 3 3 6a5 5 0 0 1-10 0c0-4 4-5 5-13z"],
bolt:[["M13 2L4 14h6l-1 8 9-12h-6z",{fill:"currentColor",stroke:"none"}]],
bell:["M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6","M10 20a2 2 0 0 0 4 0"],
lock:["M6 11h12v9H6z","M9 11V8a3 3 0 0 1 6 0v3"],
gear:["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z","M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 6.6 19l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 4 13.6H4a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 5 6.6L4.9 6.5a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 10 4.6V4a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8"],
edit:["M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7","M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z"],
};
function TIcon({ name, size=20, stroke=2, style }) {
const paths = TPATHS[name]||TPATHS.grid;
return React.createElement("svg",{width:size,height:size,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:stroke,strokeLinecap:"round",strokeLinejoin:"round",style,"aria-hidden":true},
paths.map((p,i)=>Array.isArray(p)?React.createElement("path",{key:i,d:p[0],...p[1]}):React.createElement("path",{key:i,d:p})));
}
function TAv({ initials, size=34, bg }) {
const r = Math.round(size*.28);
return {initials}
;
}
/* ── NAV ── */
const TNAV = [
{ id:"dashboard", icon:"grid", tip:"Dashboard" },
{ id:"live", icon:"play", tip:"Live Session" },
{ id:"cohorts", icon:"users", tip:"My Cohorts" },
{ id:"materials", icon:"book", tip:"My Materials" },
{ id:"evals", icon:"target", tip:"Evaluations" },
{ id:"profile", icon:"person", tip:"My Profile" },
];
function TSidebar({ route, go }) {
return (
);
}
function TTopbar({ title, live }) {
return (
);
}
/* radar chart */
function RadarChart({ dims, size=220 }) {
const N = dims.length;
const cx=size/2, cy=size/2, r=size/2-32;
const angle = i => (i*2*Math.PI/N) - Math.PI/2;
const pt = (i,v) => ({ x: cx + r*(v/5)*Math.cos(angle(i)), y: cy + r*(v/5)*Math.sin(angle(i)) });
const gridLevels = [1,2,3,4,5];
return (
);
}
Object.assign(window, { TIcon, TAv, TSidebar, TTopbar, RadarChart, TNAV });