// hq-shell.jsx — Muyassir HQ cockpit chrome: icons, topbar, read-only primitives, charts.
// ── Icons ────────────────────────────────────────────────────────────────
function HqIcon({ name, size = 20, color = 'currentColor', stroke = 1.6 }) {
const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
const paths = {
grid: <>,
building: <>,
users: <>,
card: <>,
search: <>,
bell: <>,
external: <>,
chevronD: ,
arrowR: <>,
check: ,
x: ,
trendUp: <>,
trendDown:<>,
alert: <>,
clock: <>,
bolt: ,
lock: <>,
refresh: <>,
sun: <>,
star8: ,
};
return ;
}
// ── Topbar ───────────────────────────────────────────────────────────────
function HqTopbar() {
return (
{/* Brand */}
Operator cockpit
{HQ_USER.initials}
{HQ_USER.name}
{HQ_USER.role}
);
}
const hqIconBtn = {
width: 38, height: 38, borderRadius: 9, border: '1px solid var(--ug-hairline)', background: 'var(--ug-card)',
cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0,
};
// ── Primitives ───────────────────────────────────────────────────────────
function HqCard({ children, style, pad = 20 }) {
return {children}
;
}
function HqLabel({ children, style }) {
return {children}
;
}
function HqBadge({ label, color }) {
return (
{label}
);
}
// Plan chip — Base / Premium / Trial.
function HqPlanChip({ plan }) {
const pl = HQ_PLANS[plan] || HQ_PLANS.base;
const premium = plan === 'premium', trial = plan === 'trial';
return (
{premium && }
{pl.label}
);
}
// Deep-link OUT button. The label states the PURPOSE; the tooltip names the tool.
function HqLinkOut({ tool, label, size = 'sm', block = false }) {
const s = HQ_SYNC[tool];
return (
{ e.preventDefault(); e.stopPropagation(); }} title={`${s.purpose} — opens ${s.label} in a new tab`} style={{
display: block ? 'flex' : 'inline-flex', alignItems: 'center', justifyContent: block ? 'space-between' : 'center', gap: 7, textDecoration: 'none',
fontFamily: 'var(--ug-body)', fontWeight: 600, cursor: 'pointer', borderRadius: 8,
fontSize: size === 'sm' ? 12 : 13, padding: size === 'sm' ? '5px 9px' : '9px 13px',
border: '1px solid var(--ug-hairline)', background: 'var(--ug-card)', color: 'var(--ug-ink-soft)',
whiteSpace: 'nowrap', transition: 'background .15s, border-color .15s', width: block ? '100%' : 'auto',
}}
onMouseEnter={e => { e.currentTarget.style.background = 'var(--ug-surface-alt)'; e.currentTarget.style.borderColor = `color-mix(in srgb, ${s.color} 45%, var(--ug-hairline))`; }}
onMouseLeave={e => { e.currentTarget.style.background = 'var(--ug-card)'; e.currentTarget.style.borderColor = 'var(--ug-hairline)'; }}
>
{label || s.purpose}
);
}
// Delta chip
function HqDelta({ value, suffix = '%', up }) {
const pos = up != null ? up : value >= 0;
const tone = pos ? 'var(--ug-success)' : 'var(--ug-danger)';
return (
{Math.abs(value)}{suffix}
);
}
// Area sparkline
function HqSpark({ data, width = 120, height = 34, color = 'var(--ug-success)' }) {
const max = Math.max(...data), min = Math.min(...data), rng = max - min || 1;
const pts = data.map((v, i) => [ (i / (data.length - 1)) * width, height - ((v - min) / rng) * (height - 6) - 3 ]);
const line = pts.map((pt, i) => `${i ? 'L' : 'M'}${pt[0].toFixed(1)} ${pt[1].toFixed(1)}`).join(' ');
const area = `${line} L${width} ${height} L0 ${height} Z`;
const gid = 'sp' + Math.random().toString(36).slice(2, 7);
return (
);
}
// Horizontal meter
function HqMeter({ value, color = 'var(--ug-primary)', height = 6, track = 'var(--ug-surface-alt)' }) {
return (
);
}
Object.assign(window, {
HqIcon, HqTopbar, HqCard, HqLabel, HqBadge, HqPlanChip, HqLinkOut, HqDelta, HqSpark, HqMeter, hqIconBtn,
});