// Shared bits across all 3 directions — avatar, tab bar slot, icons. // Each direction supplies its own styled wrappers around these primitives. const FC = window.FC_DATA; // ── Frame wrapper: 402×874, fills the artboard with proper iOS layout. function Screen({ children, bg = '#FAF1E8', dark = false, statusBarDark = false }) { return (
{/* status bar */}
9:41
{/* dynamic island */}
{/* content */}
{children}
{/* home indicator */}
); } // ── Avatar: color disc with initials. function Avatar({ who, size = 32, ring }) { const m = FC.mates[who]; if (!m) return null; return (
{m.initials[0]}
); } // ── Stack of avatars (overlapping). function AvatarStack({ whos, size = 28, ring = '#fff' }) { return (
{whos.map((w, i) => (
))}
); } // ── Currency helper. £ before, GBP throughout. function gbp(n, { sign = false } = {}) { const s = Math.abs(n).toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); if (!sign) return '£' + s; return (n >= 0 ? '+£' : '−£') + s; } // ── Stroked icon set used across directions. 24px viewbox. const Icons = { home: (p = {}) => ( ), split: (p = {}) => ( ), reminders: (p = {}) => ( ), lists: (p = {}) => ( ), plus: (p = {}) => ( ), back: (p = {}) => ( ), close: (p = {}) => ( ), more: (p = {}) => ( ), arrow: (p = {}) => ( ), check: (p = {}) => ( ), }; // ── 4-tab bottom nav. Each direction wraps this with its own chrome. function BottomNavRaw({ active, items, dark = false, accent = '#E07A5F' }) { return (
{items.map((it) => { const on = active === it.key; const Ico = Icons[it.key]; return (
{it.label}
); })}
); } const NAV_ITEMS = [ { key: 'home', label: 'Home' }, { key: 'split', label: 'Split' }, { key: 'reminders', label: 'Reminders' }, { key: 'lists', label: 'Lists' }, ]; Object.assign(window, { Screen, Avatar, AvatarStack, gbp, Icons, BottomNavRaw, NAV_ITEMS });