{data.map((d, i) => (

{d.secondary != null && (

)}

{d.label}

))}

); } function ProgressRing({ value, total, size=44, color }) { const pct = Math.min(1, value / (total || 1)); const r = (size - 5) / 2; const c = 2 * Math.PI * r; const off = c * (1 - pct); const clr = color || 'var(--accent)'; return (

{value}

); } /* ============================================================ ERROR BOUNDARY ============================================================ */ class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { error: null }; } static getDerivedStateFromError(error) { return { error }; } componentDidCatch(error, info) { console.error('WorkoutLog crashed:', error, info); } render() { if (!this.state.error) return this.props.children; return (

Something broke.

Your data is safe — it's stored locally. Reloading usually fixes this.

            {String(this.state.error?.stack || this.state.error)}

); } } /* ============================================================ CONFIRM / ALERT DIALOG (styled replacements for window.confirm / window.alert) Usage: if (await window.uiConfirm('message', { title, confirmLabel, danger })) {...} await window.uiAlert('message', { title, confirmLabel }) // single-button notice ============================================================ */ function ConfirmHost() { const [req, setReq] = useState(null); useEffect(() => { window.uiConfirm = (message, opts = {}) => new Promise(resolve => { setReq({ message, resolve, title: opts.title || 'Are you sure?', confirmLabel: opts.confirmLabel || 'Confirm', cancelLabel: opts.cancelLabel || 'Cancel', danger: opts.danger !== false, }); }); window.uiAlert = (message, opts = {}) => new Promise(resolve => { setReq({ message, resolve, alert: true, title: opts.title || 'Heads up', confirmLabel: opts.confirmLabel || 'Got it', danger: false, }); }); }, []); // Hardware back cancels the dialog on mobile (BackNav lives in mobile-app.jsx; absent on desktop). useEffect(() => { if (!req || !window.wlBackPush) return; const id = window.wlBackPush(() => { const r = req.resolve; setReq(null); r(false); }); return () => window.wlBackRemove(id); }, [req]); if (!req) return null; const close = val => { const r = req.resolve; setReq(null); r(val); }; return (

close(false)} style={{ position:'fixed', inset:0, zIndex:300, background:'rgba(5,7,9,0.78)', backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)', display:'grid', placeItems:'center', padding:24, animation:'fade-up 0.15s ease' }}>

e.stopPropagation()} style={{ width:340, maxWidth:'100%', background:'linear-gradient(180deg, rgba(255,255,255,0.035) 0%, transparent 50%), var(--surface)', border:'1px solid var(--border-strong)', borderRadius:16, padding:'22px 22px 18px', boxShadow:'var(--shadow-lg)', animation:'scale-in 0.18s cubic-bezier(0.34,1.2,0.64,1)' }}>

{req.title}

{req.message}

{!req.alert && }

); } /* ============================================================ FLOATING REST TIMER ============================================================ */ function RestTimer({ seconds, startedAt, onDismiss, paused, setPaused }) { // Wall-clock based: endAt tracks when the timer should reach zero. // This keeps working after the app goes to background. const endAt = useRef((startedAt || Date.now()) + seconds * 1000); const pausedAt = useRef(null); const total = useRef(seconds); const buzzed = useRef(false); const calcRemaining = () => Math.max(0, Math.round((endAt.current - Date.now()) / 1000)); const [remaining, setRemaining] = useState(calcRemaining); // Reset when a new timer is started useEffect(() => { endAt.current = (startedAt || Date.now()) + seconds * 1000; pausedAt.current = null; total.current = seconds; setRemaining(calcRemaining()); }, [seconds, startedAt]); // Tick loop — uses wall clock so background gaps are recovered instantly on return useEffect(() => { if (paused) { pausedAt.current = Date.now(); return; } // Unpausing: shift endAt forward by time spent paused if (pausedAt.current !== null) { endAt.current += Date.now() - pausedAt.current; pausedAt.current = null; } const tick = () => setRemaining(calcRemaining()); tick(); const id = setInterval(tick, 500); // Instantly resync when user returns to the app/tab from background document.addEventListener('visibilitychange', tick); return () => { clearInterval(id); document.removeEventListener('visibilitychange', tick); }; }, [paused]); const done = remaining <= 0; // Buzz once when the timer reaches zero (foreground PWA only — works through a pocket). useEffect(() => { if (done && !buzzed.current) { buzzed.current = true; navigator.vibrate?.([180, 90, 180]); } if (!done) buzzed.current = false; }, [done]); // Nudge the running timer (−15s / +30s). Works whether running or paused; bumps total // so the progress ring stays sensible, and re-arms the end-buzz if we add time after zero. const adjust = delta => { navigator.vibrate?.(6); endAt.current += delta * 1000; total.current = Math.max(1, total.current + delta); const base = (paused && pausedAt.current !== null) ? pausedAt.current : Date.now(); const r = Math.max(0, Math.round((endAt.current - base) / 1000)); if (total.current < r) total.current = r; if (r > 0) buzzed.current = false; setRemaining(r); }; const pct = total.current > 0 ? 1 - remaining / total.current : 1; const m = Math.floor(remaining / 60); const s = remaining % 60; return (

{done ? : }

{done ? 'Ready!' : `${m}:${String(s).padStart(2,'0')}`}

{done ? 'Next set' : 'Rest timer'}

{!done && (

)} {!done && setPaused && ( )}

); } /* ============================================================ MODAL ============================================================ */ function Modal({ open, onClose, title, children, width=480 }) { if (!open) return null; return (

e.stopPropagation()} style={{ background:'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 60%), var(--surface)', border:'1px solid var(--border-strong)', borderRadius:'var(--radius)', width, maxWidth:'calc(100vw - 24px)', maxHeight:'calc(100vh - 48px)', overflow:'auto', boxShadow:'var(--shadow-lg)', animation:'scale-in 0.18s cubic-bezier(0.34,1.2,0.64,1)', }}>

{title}

{children}

); } /* ============================================================ PR FLASH OVERLAY ============================================================ */ function PRFlash({ exerciseName, weight, reps, units, onDismiss }) { const dismissRef = useRef(onDismiss); useEffect(() => { dismissRef.current = onDismiss; }, [onDismiss]); useEffect(() => { const t = setTimeout(() => dismissRef.current?.(), 3200); return () => clearTimeout(t); }, []); return ReactDOM.createPortal(

New Personal Record

{exerciseName}

{weight}{units} × {reps}

Tap to dismiss

, document.body ); } function WorkoutCalendar({ sessions, onDayPress }) { const COLORS = { Push:'#f87171', Pull:'#60a5fa', Legs:'#a78bfa' }; const colorFor = name => COLORS[name] || 'var(--accent)'; const [monthOffset, setMonthOffset] = useState(0); const today = new Date(); const baseDate = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1); const year = baseDate.getFullYear(); const month = baseDate.getMonth(); const dayMap = {}; sessions.forEach(s => { const d = new Date(s.startedAt || s.date); if (d.getFullYear() === year && d.getMonth() === month) { const day = d.getDate(); if (!dayMap[day]) dayMap[day] = []; dayMap[day].push(s); } }); const firstDow = new Date(year, month, 1).getDay(); const offset = firstDow === 0 ? 6 : firstDow - 1; const daysInMonth = new Date(year, month + 1, 0).getDate(); const cells = Array(offset).fill(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); while (cells.length % 7 !== 0) cells.push(null); const todayDate = today.getDate(); const monthLabel = baseDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); const DAY_LABELS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; const usedInMonth = new Set(Object.values(dayMap).flat().map(s => s.name)); const legendEntries = [ ...Object.entries(COLORS).filter(([n]) => usedInMonth.has(n)), ...(([...usedInMonth].some(t => !COLORS[t]) && usedInMonth.size) ? [['Other', 'var(--accent)']] : []), ]; const navBtn = (disabled) => ({ width:24, height:24, borderRadius:6, display:'grid', placeItems:'center', background:'transparent', border:'none', fontSize:16, lineHeight:1, color: disabled ? 'var(--text-faint)' : 'var(--text-dim)', cursor: disabled ? 'default' : 'pointer', }); return (

{monthLabel}

{DAY_LABELS.map(d => (

{d}

))}

{cells.map((day, i) => { if (!day) return

; const daySessions = dayMap[day] || []; const isToday = monthOffset === 0 && day === todayDate; const primary = daySessions[0]; const color = primary ? colorFor(primary.name) : null; const clickable = onDayPress && daySessions.length > 0; const Cell = clickable ? 'button' : 'div'; return ( onDayPress(daySessions) : undefined} style={{ position:'relative', overflow:'hidden', borderRadius:7, padding:'6px 0 5px', display:'flex', flexDirection:'column', alignItems:'center', gap:3, background: color ? `${color}15` : 'transparent', border: isToday ? '1.5px solid var(--accent)' : '1px solid transparent', minHeight:36, width:'100%', cursor: clickable ? 'pointer' : 'default', }}> {color &&

} {day} {daySessions.length > 0 && (

{[...new Set(daySessions.map(s => s.name))].slice(0,3).map((name, ti) => (

))}

)} ); })}

{legendEntries.length > 0 && (

{legendEntries.map(([name, color]) => (

{name}

))}

)}

); } Object.assign(window, { IconDashboard, IconActive, IconHistory, IconAnalytics, IconLibrary, IconSettings, IconPlus, IconChevronRight, IconChevronLeft, IconChevronDown, IconCheck, IconX, IconTrophy, IconClock, IconPlay, IconPause, IconSearch, IconFlame, IconArrowUp, IconDots, IconNote, IconEdit, IconTrash, IconCalendar, MuscleBadge, EquipmentBadge, RIRBadge, PRBadge, DropTag, MyoTag, Button, Card, SectionHeading, Field, fieldStyle, Toggle, Sidebar, BottomNav, BodyDiagram, WorkoutCalendar, LineChart, BarChart, ProgressRing, RestTimer, Modal, PRFlash, ErrorBoundary, ConfirmHost, // default fallbacks so callers can always `await` these; ConfirmHost overrides on mount uiConfirm: (message) => Promise.resolve(window.confirm(message)), uiAlert: (message) => Promise.resolve(window.alert(message)), });