/* global React, TOKENS, FONTS, DarkCard, CircleCheck, Ring, Icon, hexA, usePersona, personaStats */
// Eighty4 · macOS Today cockpit + habit card, persona-driven.
function MacWindow({ children, width = 1300, height = 840 }) {
const T = TOKENS;
return (
{children}
);
}
const mono = (s = {}) => ({ fontFamily: FONTS.mono, fontSize: 11.5, fontWeight: 600, letterSpacing: 0.5, textTransform: "uppercase", color: TOKENS.textMuted, ...s });
function NavItem({ icon, label, kbd, active }) {
const T = TOKENS;
return (
{label}
{kbd}
);
}
function MacSidebar({ p }) {
const T = TOKENS;
return (
);
}
function StatTile({ label, value, icon, amber }) {
const T = TOKENS;
return (
);
}
function MacPanel({ label, trailing, action, children }) {
const T = TOKENS;
return (
{label}
{action ? {action}
: trailing ? {trailing} : null}
{children}
);
}
function MacToday() {
const T = TOKENS;
const p = usePersona();
const st = personaStats(p);
const now = p.schedule.find((s) => s.now) || p.schedule[1];
const taskRow = (t, i, arr) => (
{}} />
{t.t}
{t.streak != null && {t.streak}}
);
return (
Friday, May 30
Good morning.
One clear focus beats ten open tabs.
Today's mission
{st.taskDone}/{st.taskTotal}
{p.mission}
{}} />
Mark done
Open Daily
Now
{now.label}
started {now.time}
{p.secondary.map(taskRow)}
{p.habits.slice(0, 3).map(taskRow)}
{p.weekPriority}
{p.weekSupport.length} supporting · 9 weeks left
{p.goals.map((g, i) => (
{g.pct}
{g.title}
{g.ratio}
))}
{/* agenda rail */}
);
}
function MacTodayWindow() {
const p = usePersona();
return ;
}
// habit flip card front (persona habit)
function HabitCardFront({ name = "Morning walk", streak = 18, done = true }) {
const T = TOKENS;
const days = ["M", "T", "W", "T", "F", "S", "S"];
const teaser = [1, 1, 1, 0, 1, 1, 2];
return (
{done ? "Done today" : "Did you do this today?"}
{streak}-day streak
{teaser.map((d, i) => (
))}
);
}
Object.assign(window, { MacWindow, MacTodayWindow, MacToday, MacSidebar, HabitCardFront });