// ============================================================
// ShieldTech Secret Weapon — atomic components
// All atoms attach to window for cross-file babel access.
// ============================================================
// Token shortcuts (mirrors CSS vars; useful for inline styles)
const C = {
bg1: '#05070A', bg2: '#0B1118', card: '#101923', cardElev: '#142131',
border: '#1E293B', borderStrong: '#334155',
fg1: '#F8FAFC', fg2: '#CBD5E1', fgMuted: '#94A3B8',
blue: '#00A3FF', blueElectric: '#29C7FF', blueDeep: '#0369A1',
success: '#22C55E', warning: '#F59E0B', danger: '#EF4444',
assistant: '#A855F7', assistantSoft: '#D8B4FE',
hot: { bg: '#3B0D0D', fg: '#FCA5A5', border: '#7F1D1D' },
warm: { bg: '#3A2506', fg: '#FCD34D', border: '#92400E' },
nurture: { bg: '#082F49', fg: '#7DD3FC', border: '#075985' },
dead: { bg: '#1E293B', fg: '#94A3B8', border: '#334155' },
done: { bg: '#052E16', fg: '#86EFAC', border: '#166534' },
approval: { bg: '#2E1065', fg: '#D8B4FE', border: '#6B21A8' },
};
// ───────────────────────────── Icon ─────────────────────────────
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.75, style = {} }) {
const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', style };
const paths = {
target: <>,
layers: <>,
sparkles: <>,
branch: <>,
settings: <>,
phone: ,
mail: <>,
voicemail: <>,
mic: <>,
check: ,
checkCircle: <>,
x: <>,
xCircle: <>,
clock: <>,
chevron: ,
chevronLeft: ,
chevronDown: ,
chevronUp: ,
flame: ,
calendar: <>,
inbox: <>,
gavel: <>,
activity: ,
arrowRight: <>,
arrowUpRight: <>,
plus: <>,
play: ,
refresh: <>,
mapPin: <>,
user: <>,
users: <>,
moreHorizontal: <>,
google: <>,
building: <>,
hardHat: <>,
fileText: <>,
alert: <>,
alertTriangle: <>,
shield: ,
lock: <>,
search: <>,
filter: ,
bell: <>,
signal: <>,
powerOff: <>,
trash: <>,
edit: <>,
sun: <>,
moon: ,
trending: <>,
snooze: <>,
wifi: <>,
wifiOff: <>,
cloud: ,
database: <>,
zap: ,
download: <>,
send: <>,
eye: <>,
paperclip: ,
history: <>,
};
return ;
}
// ───────────────────────────── StatusPill / Badges ─────────────────────────────
function StatusPill({ kind = 'warm', children, dot = true, size = 'md', style = {} }) {
const t = C[kind] || C.warm;
const sm = size === 'sm';
return (
{dot && }
{children}
);
}
function PriorityPill({ level = 'urgent', size = 'md' }) {
const map = {
urgent: { bg: '#3B0D0D', fg: '#FCA5A5', border: '#7F1D1D', label: 'Urgent' },
high: { bg: '#3A2506', fg: '#FCD34D', border: '#92400E', label: 'High' },
medium: { bg: '#142131', fg: '#CBD5E1', border: '#334155', label: 'Medium' },
low: { bg: '#0B1118', fg: '#94A3B8', border: '#1E293B', label: 'Low' },
};
const t = map[level];
const sm = size === 'sm';
return (
{t.label}
);
}
function SyncChip({ state = 'connected', label, size = 'md' }) {
const map = {
connected: { bg: '#052E16', fg: '#86EFAC', border: '#166534', pulse: false },
disconnected: { bg: '#1E293B', fg: '#94A3B8', border: '#334155', pulse: false },
syncing: { bg: '#082F49', fg: '#7DD3FC', border: '#075985', pulse: true },
error: { bg: '#3B0D0D', fg: '#FCA5A5', border: '#7F1D1D', pulse: false },
created: { bg: '#052E16', fg: '#86EFAC', border: '#166534', pulse: false },
pending: { bg: '#3A2506', fg: '#FCD34D', border: '#92400E', pulse: false },
};
const t = map[state] || map.connected;
const sm = size === 'sm';
return (
{label}
);
}
// ───────────────────────────── Cards ─────────────────────────────
function Card({ children, elevated = false, glow = null, hover = false, style = {}, onClick, className = '' }) {
const glows = {
blue: '0 0 24px rgba(0,163,255,0.22)',
purple: '0 0 24px rgba(168,85,247,0.20)',
danger: '0 0 24px rgba(239,68,68,0.18)',
};
return (
{children}
);
}
function GlassCard({ children, style = {}, className = '' }) {
return (
{children}
);
}
// ───────────────────────────── Buttons ─────────────────────────────
function PrimaryButton({ children, onClick, full, leadingIcon, trailingIcon, href, disabled, glow, style = {} }) {
const Tag = href ? 'a' : 'button';
const tagProps = href ? { href } : { type: 'button', disabled };
return (
{leadingIcon && }
{children}
{trailingIcon && }
);
}
function SecondaryButton({ children, onClick, full, leadingIcon, trailingIcon, href, style = {} }) {
const Tag = href ? 'a' : 'button';
const tagProps = href ? { href } : { type: 'button' };
return (
{leadingIcon && }
{children}
{trailingIcon && }
);
}
function DangerButton({ children, onClick, full, leadingIcon, style = {} }) {
return (
);
}
function SuccessButton({ children, onClick, full, leadingIcon, style = {} }) {
return (
);
}
function IconButton({ icon, onClick, size = 40, color = C.fg1, bg = C.cardElev, border = C.border, style = {} }) {
return (
);
}
// ───────────────────────────── Caption / labels ─────────────────────────────
function Caption({ children, color = C.fgMuted, style = {} }) {
return {children};
}
// ───────────────────────────── Bottom nav ─────────────────────────────
function BottomNav({ active, onChange }) {
const tabs = [
{ id: 'today', label: 'Today', icon: 'target' },
{ id: 'tasks', label: 'Tasks', icon: 'layers' },
{ id: 'bids', label: 'Bids', icon: 'fileText' },
{ id: 'assistant', label: 'Assistant', icon: 'sparkles' },
{ id: 'pipeline', label: 'Pipeline', icon: 'branch' },
{ id: 'settings', label: 'Settings', icon: 'settings' },
];
return (
{tabs.map(t => {
const on = active === t.id;
return (
);
})}
);
}
// ───────────────────────────── Page header (mobile) ─────────────────────────────
function MobileHeader({ title, subtitle, leading, trailing, large = true }) {
return (
{leading}
{subtitle &&
{subtitle}}
{title}
{trailing}
{center}
{trailing}
);
}
// ───────────────────────────── Mission progress ring ─────────────────────────────
function ProgressRing({ value = 0, total = 12, size = 92, label = 'CALLS' }) {
const pct = Math.min(1, value / total) * 100;
return (
);
}
// ───────────────────────────── Bar / linear progress ─────────────────────────────
function LinearProgress({ value, total, color = C.blue, height = 6, label, sublabel }) {
const pct = Math.min(100, (value / total) * 100);
return (
{(label || sublabel) && (
{label && {label}}
{sublabel && {sublabel}}
)}
{initials}
);
}
// ───────────────────────────── Typing indicator ─────────────────────────────
function TypingDots({ color = C.assistant }) {
return (
);
}
// ───────────────────────────── Section header (in-page) ─────────────────────────────
function SectionHeader({ title, right }) {
return (
{title}
{right}
);
}
// ───────────────────────────── Empty / Loading / Error states ─────────────────────────────
function EmptyState({ icon = 'inbox', title, body, action }) {
return (
{title}
{body &&
{body}
}
{action}
);
}
function LoadingShimmer({ height = 64, style = {} }) {
return (
);
}
function ErrorState({ title = 'Something went wrong', body, onRetry }) {
return (
{title}
{body &&
{body}
}
{onRetry && (
)}
);
}
Object.assign(window, {
C, Icon, StatusPill, PriorityPill, SyncChip, Card, GlassCard,
PrimaryButton, SecondaryButton, DangerButton, SuccessButton, IconButton,
Caption, BottomNav, MobileHeader, BackRow, ProgressRing, LinearProgress,
Toggle, Avatar, TypingDots, SectionHeader, EmptyState, LoadingShimmer, ErrorState,
});