// Órbita — Shared UI Components + Theme System
const { useState, useEffect, useRef, useCallback, useContext, createContext } = React;
// ── Theme definitions ──────────────────────────────────────
const THEMES = {
dark: {
id: 'dark',
label: 'Escuro',
icon: '◗',
bg: '#100D0A',
surface: '#1A1612',
card: 'rgba(36,30,24,0.72)',
cardSolid: '#241E18',
fg: '#F5F1E8',
fgMuted: 'rgba(245,241,232,0.74)', // raised 0.55 → 0.74 (≈4.6:1 on bg, WCAG AA ✓)
fgDim: 'rgba(245,241,232,0.46)', // raised 0.28 → 0.46 (large-text + UI AA)
accent: '#F2EEE4',
hot: '#C9C2B0',
gold: '#C9A55C', // só o símbolo Órbitas (decisão 2026-09-24)
success: '#8CAF88',
info: '#7A9EC9',
border: 'rgba(245,241,232,0.11)', // raised 0.08 → 0.11
borderHover: 'rgba(245,241,232,0.22)',
headerBg: 'rgba(16,13,10,0.92)',
inputBg: 'rgba(245,241,232,0.05)',
grain: 0.035,
},
light: {
id: 'light',
label: 'Claro',
icon: '◕',
bg: '#F2EDE4',
surface: '#FDFAF5',
card: 'rgba(253,250,245,0.92)',
cardSolid: '#FDFAF5',
fg: '#18140F',
fgMuted: 'rgba(24,20,15,0.67)', // raised: 0.62 → 0.67 (~4.8:1 on #F2EDE4, WCAG AA ✓)
fgDim: 'rgba(24,20,15,0.50)', // raised: 0.38 → 0.50 (~3.4:1, passes WCAG AA large + UI)
accent: '#15130F',
hot: '#4A4436',
gold: '#8F6F2C', // dourado mais escuro pra contraste no fundo claro
success: '#2E6B2A',
info: '#1F5280',
border: 'rgba(24,20,15,0.13)',
borderHover: 'rgba(24,20,15,0.26)',
headerBg: '#2A2118', // dark ink header — max contrast ✓
inputBg: 'rgba(24,20,15,0.05)',
grain: 0.018,
},
};
// ── Theme Context ──────────────────────────────────────────
const ThemeContext = createContext({ theme: THEMES.dark, setThemeId: () => {} });
const ThemeProvider = ({ children }) => {
const [themeId, setThemeId] = useState(() => {
try { return localStorage.getItem('orbita-theme') || 'dark'; } catch { return 'dark'; }
});
useEffect(() => {
try { localStorage.setItem('orbita-theme', themeId); } catch {}
// Apply background to body so no flash
document.body.style.background = THEMES[themeId]?.bg || THEMES.dark.bg;
document.body.style.color = THEMES[themeId]?.fg || THEMES.dark.fg;
document.body.style.transition = 'background 0.25s, color 0.25s';
}, [themeId]);
const theme = THEMES[themeId] || THEMES.dark;
return (
{children}
);
};
const useTheme = () => useContext(ThemeContext);
// ── Reactive T proxy — reads from current theme context ────
// Components that use T directly get a live object via useTheme()
// For legacy compatibility, T is still exported but components
// should prefer useTheme().theme for reactive styling.
// We patch T at runtime via the ThemeSync component.
let T = { ...THEMES.dark };
const ThemeSync = () => {
const { theme } = useTheme();
useEffect(() => {
Object.assign(T, theme);
// Force a global CSS transition on theme switch
const style = document.getElementById('__orbita-theme-vars') || (() => {
const s = document.createElement('style');
s.id = '__orbita-theme-vars';
document.head.appendChild(s);
return s;
})();
style.textContent = `
*, *::before, *::after {
transition: background-color 0.22s ease, border-color 0.22s ease, color 0.18s ease !important;
}
`;
setTimeout(() => { style.textContent = ''; }, 400);
}, [theme]);
return null;
};
// ── Grain overlay ──────────────────────────────────────────
const GrainOverlay = () => {
const { theme } = useTheme();
return (
);
};
// ── Radial glow ────────────────────────────────────────────
const RadialGlow = ({ color, top = '0', opacity = 0.18 }) => {
const { theme } = useTheme();
const c = color || theme.accent;
if (theme.id === 'light') return null; // subtle in light mode
return (
);
};
// ── Theme Switcher (avatar dropdown) ──────────────────────
// NOTE: This component always renders on a DARK header, so we use
// hardcoded dark-on-dark palette for the trigger button itself.
// The dropdown panel uses the current theme.
const ThemeSwitcher = ({ name, onOpenSettings }) => {
const { theme, setThemeId, themeId } = useTheme();
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, []);
const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
// Always use amber on dark header
const btnAccent = '#F4A261';
const btnFgMuted = 'rgba(245,241,232,0.55)';
return (
{open && (
{/* User info */}
{/* Theme selector */}
Tema
{Object.values(THEMES).map(th => {
const isSelected = themeId === th.id;
return (
);
})}
{/* Divider */}
{/* Actions */}
{[
{
label: 'Configurações',
onClick: () => { setOpen(false); onOpenSettings && onOpenSettings(); },
icon:
,
},
{
label: 'Sair',
onClick: () => { setOpen(false); if (window.confirm('Sair da sua conta?')) window.__ORBITA_LOGOUT__ && window.__ORBITA_LOGOUT__(); },
icon:
,
},
].map(action => (
))}
)}
);
};
// ── Badge ──────────────────────────────────────────────────
const statusMeta = {
draft: { label: 'Rascunho', color: null, bg: null },
processing: { label: 'Processando', colorKey: 'info' },
ready: { label: 'Pronto', colorKey: 'success' },
published: { label: 'Publicado', colorKey: 'accent' },
suggested: { label: 'Sugerido', colorKey: 'fgMuted' },
accepted: { label: 'Aceito', colorKey: 'success' },
edited: { label: 'Editado', colorKey: 'info' },
discarded: { label: 'Descartado', colorKey: 'hot' },
};
const Badge = ({ status, custom, small }) => {
const { theme } = useTheme();
const meta = statusMeta[status];
const color = meta ? (theme[meta.colorKey] || theme.fgMuted) : theme.fgMuted;
const label = meta?.label || custom || status;
const bg = `${color}18`;
return (
{label}
);
};
// ── Area tag ───────────────────────────────────────────────
const areaMeta = {
carreira: { label: 'Carreira', color: '#7A9EC9' },
saude: { label: 'Saúde', color: '#8CAF88' },
relacoes: { label: 'Relações', color: '#C49BC9' },
financeiro: { label: 'Financeiro', color: '#F4C261' },
emocional: { label: 'Emocional', color: '#E76F51' },
};
const AreaTag = ({ area }) => {
const meta = areaMeta[area] || { label: area, color: '#999' };
return (
{meta.label}
);
};
// ── Intensity dot ──────────────────────────────────────────
const IntensityDot = ({ intensity }) => {
const { theme } = useTheme();
const colors = { forte: theme.hot, medio: theme.accent, leve: theme.success };
const c = colors[intensity] || theme.fgDim;
return (
);
};
// ── Primary button ─────────────────────────────────────────
const BtnPrimary = ({ children, onClick, disabled, style = {}, small }) => {
const { theme } = useTheme();
return (
);
};
// ── Ghost button ───────────────────────────────────────────
const BtnGhost = ({ children, onClick, style = {}, small, active }) => {
const { theme } = useTheme();
return (
);
};
// ── Icon button ────────────────────────────────────────────
const BtnIcon = ({ children, onClick, title, active, style = {} }) => {
const { theme } = useTheme();
return (
);
};
// ── Card shell ─────────────────────────────────────────────
const Card = ({ children, style = {}, onClick, hover = true }) => {
const { theme } = useTheme();
const [hovered, setHovered] = useState(false);
return (
hover && setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
background: theme.card, backdropFilter: 'blur(12px)',
border: `1px solid ${hovered && onClick ? theme.borderHover : theme.border}`,
borderRadius: 16, padding: 20,
transition: 'border-color 0.15s, transform 0.15s, background 0.22s',
cursor: onClick ? 'pointer' : 'default',
transform: hovered && onClick ? 'translateY(-1px)' : 'none',
...style,
}}>
{children}
);
};
// ── Divider ────────────────────────────────────────────────
const Divider = ({ style = {} }) => {
const { theme } = useTheme();
return ;
};
// ── Avatar ─────────────────────────────────────────────────
const Avatar = ({ name, size = 32, color }) => {
const { theme } = useTheme();
const c = color || theme.accent;
const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
return (
{initials}
);
};
// ── Section header ─────────────────────────────────────────
const SectionHeader = ({ title, action }) => {
const { theme } = useTheme();
return (
{title}
{action}
);
};
// ── Input ──────────────────────────────────────────────────
// Olho de ver/esconder. Fechado = escondido, que é o estado inicial.
const OlhoIcon = ({ aberto }) => (
);
// Campo de senha mostra o olho sozinho: qualquer tela que use type="password"
// ganha o ver/esconder sem precisar pedir.
const Input = ({ label, value, onChange, placeholder, type = 'text', style = {} }) => {
const { theme } = useTheme();
const [visivel, setVisivel] = React.useState(false);
const senha = type === 'password';
const tipo = senha && visivel ? 'text' : type;
return (
{label &&
}
e.target.style.borderColor = `${theme.accent}60`}
onBlur={e => e.target.style.borderColor = theme.border}
/>
{senha && (
)}
{label && }