// ui.jsx — TrinityOne shared UI primitives. Exports several to window.
const { useState, useEffect, useRef } = React;
function cx(...a) { return a.filter(Boolean).join(' '); }
// ── Warm status bar ──
function StatusBar() {
return (
);
}
// ── Device bezel ──
function PhoneFrame({ children, bare }) {
// bare = a real device (native app / installed PWA / phone-sized viewport): fill the screen,
// no mockup bezel / notch / fake status bar — the OS provides those.
if (bare) {
return (
{children}
);
}
return (
);
}
// ── Floating tab bar ──
const TABS = [
{ id: 'today', label: 'Today', icon: 'today' },
{ id: 'read', label: 'Read', icon: 'read' },
{ id: 'chat', label: 'Community', icon: 'chat' },
{ id: 'library', label: 'Library', icon: 'library' },
];
function TabBar({ active, onChange }) {
return (
{TABS.map(t => {
const on = active === t.id;
return (
onChange(t.id)} style={{
border: 'none', background: 'none', cursor: 'pointer',
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
padding: '6px 4px', flex: 1, color: on ? 'var(--clay)' : 'var(--ink-3)',
transition: 'color .2s', position: 'relative',
}}>
{t.label}
);
})}
TrinityOne
{TABS.map(t => {
const on = active === t.id;
return (
onChange(t.id)} style={{
display: 'flex', alignItems: 'center', gap: 13, padding: '11px 13px', borderRadius: 13,
border: 'none', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 15, fontWeight: on ? 700 : 600,
background: on ? 'color-mix(in oklab, var(--clay) 12%, var(--surface))' : 'transparent',
color: on ? 'var(--clay)' : 'var(--ink-2)', transition: 'background .15s, color .15s', textAlign: 'left',
}}>
);
})}
Read · Gather · Share
);
}
window.DesktopNav = DesktopNav;
// ── Bible / Plans segmented toggle (the Read tab holds both views) ──
function ReadPlansTabs({ ctx, style = {} }) {
const v = ctx.readView || 'bible';
return (
{[['bible', 'Bible', 'read'], ['plans', 'Plans', 'plans']].map(([id, label, ic]) => {
const on = v === id;
return (
ctx.setReadView(id)} style={{
flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '8px',
borderRadius: 10, border: 'none', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 13.5,
background: on ? 'var(--surface)' : 'transparent', color: on ? 'var(--clay)' : 'var(--ink-2)',
boxShadow: on ? 'var(--shadow-sm)' : 'none', transition: 'all .2s',
}}>
);
})}
);
}
window.ReadPlansTabs = ReadPlansTabs;
// ── Bottom sheet ──
// ── global back-stack ──
// Every open BottomSheet / Overlay registers its close handler here, so the Android hardware back
// button (wired in app.jsx) dismisses the topmost layer instead of exiting the app.
const _backStack = (window.__trinityBackStack = window.__trinityBackStack || []);
function useBackLayer(open, onClose) {
const ref = useRef(onClose);
ref.current = onClose;
useEffect(() => {
if (!open) return;
const entry = { close: () => { try { ref.current && ref.current(); } catch (e) {} } };
_backStack.push(entry);
return () => { const i = _backStack.indexOf(entry); if (i >= 0) _backStack.splice(i, 1); };
}, [open]);
}
// returns true if it closed a layer; app.jsx falls back to tab nav / exit when it returns false
window.trinityGoBack = function () {
if (_backStack.length) { _backStack[_backStack.length - 1].close(); return true; }
return false;
};
function BottomSheet({ open, onClose, children, maxHeight = '78%', pad = true, z = 50, docked }) {
// docked = rendered inside a desktop side panel (e.g. reader study panel): fill the pane, no
// backdrop/slide/handle, no backstack.
useBackLayer(open && !docked, onClose);
const [mounted, setMounted] = useState(open);
useEffect(() => { if (open) setMounted(true); }, [open]);
if (!mounted && !open) return null;
if (docked) {
return (
{children}
);
}
return (
{ if (!open) setMounted(false); }} style={{
position: 'absolute', left: 0, right: 0, bottom: 0,
background: 'var(--surface)', borderRadius: '30px 30px 0 0',
maxHeight, display: 'flex', flexDirection: 'column',
boxShadow: '0 -10px 40px rgba(20,14,8,.22)',
transform: open ? 'translateY(0)' : 'translateY(102%)',
transition: 'transform .34s cubic-bezier(.32,.72,0,1)',
paddingBottom: 14,
}}>
{children}
);
}
// ── Full overlay (slides up, opaque) ──
function Overlay({ open, onClose, children, docked }) {
// docked = rendered inside a desktop pane (e.g. two-pane chat): fill the pane, no slide/backstack.
useBackLayer(open && !docked, onClose);
const [mounted, setMounted] = useState(open);
useEffect(() => { if (open) setMounted(true); }, [open]);
if (!mounted && !open) return null;
if (docked) {
return (
{children}
);
}
return (
{ if (!open) setMounted(false); }} style={{
position: 'absolute', inset: 0, zIndex: 55, background: 'var(--paper)',
transform: open ? 'translateY(0)' : 'translateY(100%)',
transition: 'transform .4s cubic-bezier(.32,.72,0,1)',
display: 'flex', flexDirection: 'column',
}}>
{children}
);
}
// ── Small bits ──
function IconBtn({ name, onClick, size = 20, badge, style = {}, stroke = 1.9 }) {
return (
{badge} : null}
);
}
function Chip({ children, active, onClick, accent = 'var(--clay)' }) {
return (
{children}
);
}
function SectionLabel({ children, action, onAction }) {
return (
{children}
{action ? {action} : null}
);
}
// ── Toast ──
function Toast({ msg }) {
if (!msg) return null;
return (
{msg}
);
}
Object.assign(window, { cx, PhoneFrame, TabBar, BottomSheet, Overlay, IconBtn, Chip, SectionLabel, Toast });