{onBack && ( )}

{sub && (

{typeof sub === 'string' ? sub.toUpperCase() : sub}

)}

{title}

{right}

); } // ─── TabBar — floating dock with position indicator ────────────────── const TAB_ICONS = { coaching: ( ), home: ( ), plan: ( ), lib: ( ), hist: ( ), }; function TabBar({ active, onChange, sidebar = false, currentUser = null, showCoaching = false, coachingBadge = null }) { const tabs = [ { id: 'home', label: 'Today' }, { id: 'plan', label: 'Plan' }, { id: 'lib', label: 'Library' }, { id: 'hist', label: 'History' }, ...(showCoaching ? [{ id: 'coaching', label: 'Coaching' }] : []), ]; const idx = tabs.findIndex(t => t.id === active); const [switchModal, setSwitchModal] = React.useState(false); if (sidebar) { const currentEmail = currentUser?.email || ''; const currentName = currentUser?.name || currentEmail.split('@')[0] || '—'; const qs = window.LB || {}; const qsIcon = (email, size = 26) => { if (email === 'office@btc-prime.biz') return ; if (email === 'anja.knamm@gmail.com') return 🩷; return null; }; const otherEmail = (qs.QS_EMAILS || []).find(e => e !== currentEmail); const isQsUser = (qs.QS_EMAILS || []).includes(currentEmail); const hasOther = otherEmail ? (qs.hasQuickSwitchSession?.(otherEmail) ?? false) : false; const otherName = otherEmail ? (qs.getQsName?.(otherEmail) || otherEmail.split('@')[0]) : ''; return ( <>

{tabs.map(t => { const on = t.id === active; const badge = t.id === 'coaching' ? coachingBadge : null; return ( ); })}
{isQsUser && otherEmail && (

)}
{switchModal && isQsUser && otherEmail && (
setSwitchModal(false)} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40, animation: 'sheet-fade 0.15s ease', }}>
e.stopPropagation()} style={{ width: '100%', maxWidth: 520, background: UI.bgRaised, border: `1px solid ${UI.hairStrong}`, borderRadius: 4, padding: '32px 28px 22px', boxShadow: '0 40px 100px rgba(0,0,0,0.8)', animation: 'fadeUp 0.22s ease', }}>
Accounts

Switch User

{qsIcon(currentEmail) ?? currentName[0]?.toUpperCase()}

{currentName}

Active

)} ); } return (

{idx >= 0 && (
)} {idx >= 0 && (
)} {tabs.map(t => { const on = t.id === active; const badge = t.id === 'coaching' ? coachingBadge : null; return ( ); })}

); } // ─── Buttons ──────────────────────────────────────────────────────── const btnPrimary = { background: `linear-gradient(180deg, var(--accent-light), var(--accent))`, color: '#0a0805', border: '1px solid var(--accent-deep)', borderRadius: 6, padding: '14px 24px', minHeight: 48, fontFamily: '"Inter", system-ui, sans-serif', fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', cursor: 'pointer', boxShadow: '0 6px 20px rgba(var(--accent-rgb),0.30)', WebkitTapHighlightColor: 'transparent', }; const btnGhost = { background: 'transparent', color: 'var(--ink)', border: `1px solid var(--hair-strong)`, borderRadius: 6, padding: '14px 22px', minHeight: 48, fontFamily: '"Inter", system-ui, sans-serif', fontSize: 13, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', cursor: 'pointer', WebkitTapHighlightColor: 'transparent', }; function Btn({ children, kind = 'primary', style = {}, ...rest }) { const base = kind === 'primary' ? btnPrimary : btnGhost; return ; } // ─── Card ─────────────────────────────────────────────────────────── function Card({ children, accent = false, style = {}, ...rest }) { return (
{children}
); } // ─── Label ────────────────────────────────────────────────────────── function Label({ children, style = {} }) { return (
{children}
); } // ─── Constants ────────────────────────────────────────────────────── const MUSCLES = ['Chest','Back','Shoulders','Biceps','Triceps','Abs','Quads','Hamstrings','Glutes','Calves','Forearms']; const WEEKDAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; const WEEKDAYS_FULL = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']; // ─── Stepper ──────────────────────────────────────────────────────── function Stepper({ value, onChange, step = 2.5, min = 0, suffix, big = false }) { const round = (v) => Math.round(v * 1000) / 1000; return (

{value ?? '—'}{suffix && {suffix}}

); } // ─── Pill ─────────────────────────────────────────────────────────── function Pill({ children, gold = false, style = {}, ...rest }) { return ( {children} ); } // ─── Sheet ────────────────────────────────────────────────────────── function Sheet({ open, onClose, title, children }) { const [kbHeight, setKbHeight] = React.useState(0); React.useEffect(() => { if (!open) return; const vv = window.visualViewport; if (!vv) return; const update = () => setKbHeight(Math.max(0, window.innerHeight - vv.height - vv.offsetTop)); vv.addEventListener('resize', update); vv.addEventListener('scroll', update); update(); return () => { vv.removeEventListener('resize', update); vv.removeEventListener('scroll', update); }; }, [open]); if (!open) return null; return (

e.stopPropagation()} style={{ width: '100%', maxWidth: 540, boxSizing: 'border-box', background: UI.bgRaised, borderRadius: '6px 6px 0 0', border: `1px solid ${UI.hairStrong}`, borderBottom: 'none', boxShadow: '0 -16px 48px rgba(0,0,0,0.6)', padding: `16px 22px ${kbHeight > 0 ? 18 : 'calc(env(safe-area-inset-bottom, 8px) + 22px)'}`, animation: 'sheet-up 0.22s ease', maxHeight: '88dvh', overflow: 'auto', }}>
{title && (
{title}
)} {children}

); } // ─── Empty ────────────────────────────────────────────────────────── function Empty({ title, sub, action, icon }) { return (
{icon &&
{icon}
}
{title}
{sub &&
{sub}
} {action &&
{action}
}
); } // ─── Chevron ──────────────────────────────────────────────────────── function ChevronRight({ color }) { return ( ); } // ─── Icon glyphs ──────────────────────────────────────────────────── const ICON_HISTORY = ( ); const ICON_BARBELL = ( ); const ICON_CALENDAR = ( ); // ─── useConfirm ───────────────────────────────────────────────────── function useConfirm() { const [state, setState] = React.useState(null); const confirm = (message, { title = 'Confirm?', ok = 'OK', cancel = 'Cancel', danger = false } = {}) => new Promise(resolve => setState({ message, title, ok, cancel, danger, resolve })); const close = (result) => { state?.resolve(result); setState(null); }; const el = state && ( close(false)}>
{state.title}

{state.message}

close(false)} style={{ flex: 1 }}>{state.cancel} close(true)} style={{ flex: 2, ...(state.danger ? { background: UI.danger, borderColor: 'rgba(var(--danger-rgb),0.6)', boxShadow: '0 6px 20px rgba(var(--danger-rgb),0.25)' } : {}), }}>{state.ok}
); return [el, confirm]; } // ─── Primitives ───────────────────────────────────────────────────── function Hairline({ vertical = false, color, style = {} }) { if (vertical) { return
; } return
; } // Heavy corner brackets — industrial equipment aesthetic function BracketFrame({ children, gold = false, style = {}, padding = 22, ...rest }) { const c = gold ? UI.gold : UI.hairStrong; const len = 20; const thick = '3px'; const Corner = ({ pos }) => { const s = { position: 'absolute', width: len, height: len, pointerEvents: 'none' }; if (pos === 'tl') return
; if (pos === 'tr') return
; if (pos === 'bl') return
; if (pos === 'br') return
; }; return (
{children}
); } // Frame — bordered container function Frame({ children, accent = false, style = {}, padding = 18, onClick }) { return (
{children}
); } // Stat block — replaces circular watch sub-dial with a flat, bold stat display function SubDial({ label, value, sub, size = 110, gold = false, style = {} }) { const numSize = String(value).length > 5 ? size * 0.17 : String(value).length > 3 ? size * 0.22 : size * 0.30; return (
{value} {sub && {sub}} {label}
); } // Heavy rule section divider function Bezel({ children, style = {} }) { return (

{children}

); } // Screen header for detail views function ScreenHead({ ref_, title, sub, right, onBack, style = {} }) { return (
{sub && (
{sub}
)}
{onBack && ( )}
{title}
{right}

); } function NumInput({ value, onChange, placeholder = '—', disabled, style = {} }) { const [raw, setRaw] = React.useState(value != null ? String(value).replace('.', ',') : ''); const focused = React.useRef(false); React.useEffect(() => { if (!focused.current) setRaw(value != null ? String(value).replace('.', ',') : ''); }, [value]); return ( { focused.current = true; e.target.select(); }} onBlur={() => { focused.current = false; const n = raw === '' ? null : parseFloat(raw.replace(',', '.')); setRaw(n != null && !isNaN(n) ? String(n).replace('.', ',') : ''); }} onChange={e => { setRaw(e.target.value); const n = e.target.value === '' ? null : parseFloat(e.target.value.replace(',', '.')); if (e.target.value === '' || !isNaN(n)) onChange(n ?? null); }} style={{ background: 'transparent', border: 'none', outline: 'none', color: disabled ? UI.inkSoft : UI.ink, fontFamily: UI.fontNum, fontVariantNumeric: 'tabular-nums', textAlign: 'center', width: '100%', padding: 0, ...style, }} /> ); } function Field({ label, children, style = {} }) { return ( {label} {children} ); } function TextInput({ value, onChange, placeholder, type = 'text', autoFocus }) { const [focus, setFocus] = React.useState(false); return (
onChange(e.target.value)} type={type} placeholder={placeholder} autoFocus={autoFocus} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={{ width: '100%', background: 'transparent', border: 'none', outline: 'none', color: UI.ink, fontFamily: UI.fontUi, fontSize: 16, padding: 0, }} />
); } Object.assign(window, { UI, Screen, TopBar, TabBar, Btn, Card, Label, Stepper, Pill, Sheet, Empty, ChevronRight, ICON_HISTORY, ICON_BARBELL, ICON_CALENDAR, btnPrimary, btnGhost, useConfirm, MUSCLES, WEEKDAYS, WEEKDAYS_FULL, // primitives Hairline, BracketFrame, Frame, SubDial, Bezel, ScreenHead, NumInput, Field, TextInput, });