}
onNavigate(item.id)}
onMouseEnter={e => { if (activeScreen !== item.id) e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; }}
onMouseLeave={e => { if (activeScreen !== item.id) e.currentTarget.style.background = 'transparent'; }}
title={item.label}
>
{item.label}
))}
);
}
// ===================== APP CONTEXT BAR (object tab bar style) =====================
const contextStyles = {
bar: {
background: '#fff', borderBottom: '1px solid #dddbda',
display: 'flex', alignItems: 'stretch',
paddingLeft: 12, paddingRight: 12,
flexShrink: 0, height: 44,
},
appBadge: {
display: 'flex', alignItems: 'center', gap: 8,
paddingRight: 16, marginRight: 8, borderRight: '1px solid #dddbda',
},
appBadgeIcon: {
width: 28, height: 28, borderRadius: 4,
background: 'linear-gradient(135deg, #0070d2 0%, #1b96ff 100%)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
color: '#fff',
},
appBadgeText: { fontSize: 13, fontWeight: 700, color: '#080707' },
tabs: { display: 'flex', alignItems: 'stretch', gap: 0, flex: 1 },
tab: (active) => ({
display: 'flex', alignItems: 'center', gap: 6,
padding: '0 14px', fontSize: 13,
fontWeight: active ? 700 : 400,
color: active ? '#0070d2' : '#3e3e3c',
cursor: 'pointer',
borderBottom: active ? '3px solid #0070d2' : '3px solid transparent',
marginBottom: -1,
userSelect: 'none', transition: 'color 150ms',
whiteSpace: 'nowrap',
}),
right: {
display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto',
paddingLeft: 16, borderLeft: '1px solid #dddbda',
},
};
function ContextBar({ activeScreen, onNavigate, activeOrgName, onOrgPick, openCount }) {
const tabs = [
{ id: 'dashboard', label: 'OrgScore' },
{ id: 'backlog', label: 'Fix Backlog' },
{ id: 'automap', label: 'Automation Map' },
{ id: 'ai', label: 'Agentforce Readiness' },
{ id: 'portfolio', label: 'Org Portfolio' },
];
return (
{tabs.map(t => (
onNavigate(t.id)}>
{t.label}
{t.id === 'backlog' && openCount > 0 && (
{openCount}
)}
))}
);
}
// ===================== PRIMITIVES (cards, buttons, badges) =====================
const Card = ({ children, style, ...rest }) => (
{children}
);
const CardHeader = ({ title, action, eyebrow, icon }) => (
{icon && (
)}
{eyebrow && (
{eyebrow}
)}
{title}
{action}
);
const Btn = ({ variant = 'neutral', size = 'md', children, icon, style, ...rest }) => {
const variants = {
brand: { bg: '#0070d2', color: '#fff', border: '1px solid #0070d2' },
neutral: { bg: '#fff', color: '#0070d2', border: '1px solid #dddbda' },
destructive: { bg: '#fff', color: '#c23934', border: '1px solid #dddbda' },
text: { bg: 'transparent', color: '#0070d2', border: '1px solid transparent' },
};
const v = variants[variant];
const h = size === 'sm' ? 28 : 32;
return (
);
};
// Priority pill (P1/P2/P3)
const PriorityPill = ({ priority }) => {
const meta = window.PRIORITY_META[priority] || window.PRIORITY_META.P3;
return (
{meta.label}
);
};
// Generic SLDS-style badge
const Badge = ({ children, variant = 'neutral', icon }) => {
const map = {
neutral: { bg: '#ecebea', color: '#3e3e3c' },
success: { bg: '#f3fbf2', color: '#2e844a' },
warning: { bg: '#fffaef', color: '#a96404' },
error: { bg: '#fce7e7', color: '#ba0517' },
info: { bg: '#eaf4ff', color: '#005fb2' },
};
const m = map[variant] || map.neutral;
return (
{icon && }
{children}
);
};
// Trend chip (up/down/flat)
const TrendChip = ({ trend, delta }) => {
const cfg = trend === 'up' ? { color: '#2e844a', bg: '#f3fbf2', icon: ICONS.arrowUp }
: trend === 'down' ? { color: '#ba0517', bg: '#fce7e7', icon: ICONS.arrowDown }
: { color: '#706e6b', bg: '#f3f2f2', icon: ICONS.arrowFlat };
return (
{delta > 0 ? `+${delta}` : delta === 0 ? '0' : delta}
);
};
// Score ring — SVG donut
const ScoreRing = ({ score, size = 96, stroke = 9, label }) => {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const pct = Math.max(0, Math.min(100, score));
const offset = c * (1 - pct / 100);
const color = scoreColor(score);
return (
{Math.round(score)}
{label &&
{label}
}
);
};
function scoreColor(score) {
if (score >= 75) return '#2e844a';
if (score >= 55) return '#dd7a01';
return '#c23934';
}
function scoreBand(score) {
if (score >= 75) return { label: 'Healthy', color: '#2e844a', bg: '#f3fbf2' };
if (score >= 55) return { label: 'Needs attention', color: '#a96404', bg: '#fffaef' };
if (score >= 40) return { label: 'At risk', color: '#ba0517', bg: '#fce7e7' };
return { label: 'Critical', color: '#8e0c0c', bg: '#fce7e7' };
}
// Horizontal bar
const HBar = ({ value, max = 100, color, height = 6 }) => (
);
// Toast
function Toast({ message, variant = 'success', onDismiss }) {
const map = {
success: { bg: '#f3fbf2', border: '#91db8b', color: '#2e844a', icon: ICONS.check },
info: { bg: '#eaf4ff', border: '#1b96ff', color: '#005fb2', icon: ICONS.info },
warning: { bg: '#fffaef', border: '#fcb95b', color: '#a96404', icon: ICONS.warn },
};
const m = map[variant];
return (
{message}
{onDismiss && (
)}
);
}
Object.assign(window, {
Icon, ICONS, CloudMark, OrgLensMark,
GlobalHeader, LeftRail, ContextBar,
Card, CardHeader, Btn, PriorityPill, Badge, TrendChip,
ScoreRing, scoreColor, scoreBand, HBar, Toast,
});