/* global React, TOKENS, FONTS, DarkCard, CircleCheck, Ring, Icon, hexA, IOSDevice, usePersona, personaStats */ // Eighty4 · iPhone product mockups, persona-driven (reads usePersona()). function Phone({ children, scale = 1 }) { return (
{children}
); } const monoLbl = (extra = {}) => ({ fontFamily: TOKENS.mono ? undefined : undefined, ...extra }); const ML = (extra = {}) => ({ fontFamily: FONTS.mono, fontSize: 11.5, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase", color: TOKENS.textMuted, ...extra }); function ProfileBtn() { const T = TOKENS; return (
); } // ───────────────────────── HOME ───────────────────────── function PhoneHome() { const T = TOKENS; const p = usePersona(); const st = personaStats(p); return (
Fri, May 30 Wk 3/12
Good morning.
{p.cycle} · your focus today.
Today's mission
{st.taskDone}/{st.taskTotal}
{p.mission}
{}} /> Mark done
67d left
Next {p.schedule[0].time} {p.schedule[0].label}
Habits {st.habitsTotal - st.habitsDone} left
{p.habits.map((h, i) => (
{}} /> {h.name} {h.streak}
))}
Open the day
); } // task row function TaskLine({ t, done, last }) { const T = TOKENS; return (
{}} /> {t}
); } // ───────────────────────── DAILY (the workbench — all three tiers) ───────────────────────── function PhoneDaily() { const T = TOKENS; const p = usePersona(); const st = personaStats(p); const scrub = (n) => (
); return (
Daily · Week 3
Today
Fri, May 30
{scrub("chevL")}{scrub("chevR")}
{/* primary — the one thing */}
The one thing
{st.taskDone}/{st.taskTotal}
{p.mission}
{}} /> Mark done
{/* supporting (secondary) */}
Supporting {p.secondary.filter((x) => x.done).length}/{p.secondary.length}
{p.secondary.map((x, i) => )}
{/* later (additional) */}
Later {p.additional.filter((x) => x.done).length}/{p.additional.length}
{p.additional.map((x, i) => )}
{/* schedule */}
Schedule
{p.schedule.slice(0, 3).map((b, i) => (
{b.time} {b.label} {b.now && Now}
))}
); } Object.assign(window, { Phone, PhoneHome, PhoneDaily, ProfileBtn, TaskLine });