// Reusable UI primitives
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const Card = ({ children, style, accent, accentWidth = 3, onClick, className = '' }) => (
{accent && accent !== 'none' && (
)}
{children}
{options.map(o => (
))}
);
};
const StatusDot = ({ kind = 'green', size = 8, pulse = false }) => {
const c = kind === 'green' ? '#00e676' : kind === 'red' ? '#ff5252' : kind === 'amber' ? '#ffab40' : '#5a6585';
return (
);
};
const Badge = ({ children, color = 'cyan', solid = false, size = 'md' }) => {
const map = {
cyan: ['rgba(0,212,255,0.14)', '#00d4ff', 'rgba(0,212,255,0.3)'],
teal: ['rgba(0,184,148,0.14)', '#00b894', 'rgba(0,184,148,0.3)'],
green: ['rgba(0,230,118,0.14)', '#00e676', 'rgba(0,230,118,0.3)'],
red: ['rgba(255,82,82,0.14)', '#ff5252', 'rgba(255,82,82,0.3)'],
amber: ['rgba(255,171,64,0.14)', '#ffab40', 'rgba(255,171,64,0.3)'],
info: ['rgba(64,196,255,0.14)', '#40c4ff', 'rgba(64,196,255,0.3)'],
gray: ['rgba(255,255,255,0.06)', '#8892b0', 'rgba(255,255,255,0.12)'],
};
const [bg, fg, br] = map[color] || map.cyan;
return (
{children}
);
};
// Primary action button
const Btn = ({ children, onClick, variant = 'primary', size = 'md', icon, full, disabled, style }) => {
const styles = {
primary: { bg: 'linear-gradient(135deg, var(--cyan), var(--teal))', fg: '#0a0e27', br: 'transparent' },
secondary: { bg: 'rgba(255,255,255,0.06)', fg: '#fff', br: 'var(--border)' },
danger: { bg: 'var(--red)', fg: '#fff', br: 'transparent' },
ghost: { bg: 'transparent', fg: 'var(--text-2)', br: 'var(--border)' },
}[variant] || {};
const padding = size === 'sm' ? '8px 12px' : size === 'lg' ? '14px 20px' : '11px 16px';
return (
);
};
const Modal = ({ open, onClose, children, title, maxWidth = 360 }) => {
if (!open) return null;
// createPortal renders at document.body so position:fixed is always relative
// to the true viewport — unaffected by parent transforms, animations, or
// scroll containers that would otherwise shift the dialog off-screen on mobile.
return ReactDOM.createPortal(
e.stopPropagation()} style={{
width: '100%', maxWidth,
background: 'linear-gradient(180deg, rgba(20,26,55,0.95), rgba(15,20,48,0.95))',
border: '1px solid var(--border-strong)',
borderRadius: 20,
padding: 22,
boxShadow: '0 20px 60px rgba(0,0,0,0.6)',
animation: 'pop-in 220ms ease-out',
}}>
{title &&
{title}
}
{children}
,
document.body
);
};
// Confirmation dialog
const Confirm = ({ open, onCancel, onConfirm, title, body, confirmLabel = 'Confirm', danger = false }) => (
{body}
Cancel
{confirmLabel}
);
// Metric block
const Metric = ({ icon, label, value, unit, tone, flash }) => {
const toneColor = { green: 'var(--green)', red: 'var(--red)', amber: 'var(--amber)', cyan: 'var(--cyan)' }[tone];
return (
{icon && }
{label}
{value}
{unit && {unit}}
);
};
// Section heading
const SectionTitle = ({ children, action }) => (
{children}
{action}
);
// Slider with value
const SliderRow = ({ label, hint, value, onChange, min = 0, max = 100, step = 1, unit = '%', color = 'var(--cyan)' }) => (
);
const TextInput = ({ value, onChange, placeholder, type = 'text', icon, suffix, full = true }) => (
{icon && }
onChange(e.target.value)}
placeholder={placeholder}
style={{
background: 'transparent', border: 'none', outline: 'none',
color: 'var(--text)', fontSize: 14, flex: 1, minWidth: 0,
}}
/>
{suffix && {suffix}}
);
// Animated pending-dots indicator for ACK-waiting state.
// size: 'sm' (12px) | 'md' (16px) | 'lg' (22px)
const PendingDots = ({ size = 'md', color = 'var(--text-2)' }) => {
const [step, setStep] = useState(0);
useEffect(() => {
const id = setInterval(() => setStep(s => (s + 1) % 3), 380);
return () => clearInterval(id);
}, []);
const sz = size === 'lg' ? 22 : size === 'sm' ? 12 : 16;
return (
{'···'.slice(0, step + 1)}
);
};
Object.assign(window, { Card, Toggle, Segmented, StatusDot, Badge, Btn, Modal, Confirm, Metric, SectionTitle, SliderRow, TextInput, PendingDots });
// Swipe-to-navigate hook — attach returned handlers to detail screen's root div.
// Swipe left → next tab; swipe right → prev tab (or onBack if on first tab).
const useSwipeTabs = (tabs, tab, setTab, onBack) => {
const sx = useRef(null);
const sy = useRef(null);
const onTouchStart = useCallback((e) => {
sx.current = e.touches[0].clientX;
sy.current = e.touches[0].clientY;
}, []);
const onTouchEnd = useCallback((e) => {
if (sx.current === null) return;
const dx = e.changedTouches[0].clientX - sx.current;
const dy = Math.abs(e.changedTouches[0].clientY - sy.current);
sx.current = null; sy.current = null;
if (Math.abs(dx) < 60 || dy > Math.abs(dx)) return;
const idx = tabs.findIndex(t => t.key === tab);
if (dx < 0) {
if (idx < tabs.length - 1) setTab(tabs[idx + 1].key);
} else {
if (idx > 0) setTab(tabs[idx - 1].key);
else if (onBack) onBack();
}
}, [tabs, tab, setTab, onBack]);
return { onTouchStart, onTouchEnd };
};
window.useSwipeTabs = useSwipeTabs;