// fc-shared.jsx, OnWeight · v3 (themed)
// Three visual directions, each a full CSS-variable theme applied at the .phone
// root so components inherit. Philosophy unchanged: interpret first, plain
// language, numbers one glance away.
//
// hig , Clean iOS: system-gray grouped UI, SF-like sans, brand-red accent
// fighter , Retro Fighter: warm poster paper, Oswald, crop-marks, red
// elite , Elite Lab: graphite dark, mono labels, teal signal, instrument feel
// ─────────────────────────────────────────────────────────────────────────
const FC = {
athlete: 'Alex Mercer', firstName: 'Alex', sport: 'MMA', division: 'Lightweight',
fightDate: '01 JAN 2026', fightDateShort: 'Jan 1',
goalWeight: 74.4, maxWithGi: 76.0, giBuffer: 0.5, planStart: 78.4,
daysOut: 23, campDays: 50, todayDay: 27,
weighIn: 'Day before',
// Daily fasted weigh-in preference. consistency is what matters; morning is most
// accurate. `targetHour` is 24h; entries log their real time so drift is visible.
weighInTime: '6:50 AM', weighInTargetHour: 7,
// Cycle model (see Logic & Flows §7). dayToday positions "now" in late luteal so
// the athlete is holding ~+0.5kg water, and weigh-in (campDays out) also lands in
// luteal, demonstrating the cycle buffer. retention = peak water amplitude (kg).
// Default 0.5 kg reflects the evidence (~0.45 kg avg, fluid not fat; many see none),
// not the earlier +1.0 guess. Personalised upward/downward from logged data over time.
cycle: { phase: 'LUTEAL', day: 26, dayToday: 26, length: 28, retention: 0.5 },
};
// ── Cycle water-weight model ───────────────────────────────────────────────
// One smooth curve, shared by the projection math and every cycle chart so they
// can never disagree: water offset dips to −retention in follicular (~day 10) and
// peaks at +retention in late luteal (~day 24). cycleOffsetKg(campDay) returns the
// kg the SCALE reads above (or below) true weight on that camp day.
function cycleDayAt(campDay) {
const { dayToday, length } = FC.cycle;
return ((dayToday + (campDay - FC.todayDay)) % length + length) % length;
}
function cycleOffsetKg(campDay) {
const { length, retention } = FC.cycle;
return +(retention * -Math.cos(2 * Math.PI * (cycleDayAt(campDay) - 10) / length)).toFixed(3);
}
function cyclePhaseAt(campDay) {
const cd = cycleDayAt(campDay);
return cd < 5 ? 'menstrual' : cd < 13 ? 'follicular' : cd < 16 ? 'ovulation' : 'luteal';
}
const CYCLE_PHASE = {
menstrual: { label: 'Menstruation', short: 'Menses', color: '#b0432f' },
follicular: { label: 'Follicular', short: 'Follic.', color: '#6b8f5a' },
ovulation: { label: 'Ovulation', short: 'Ovul.', color: '#c79a3a' },
luteal: { label: 'Luteal', short: 'Luteal', color: '#7a6aa0' },
};
// ── Weigh-in clock (deterministic per camp day) ────────────────────────────
// Real logged time of each fasted weigh-in, as a 24h decimal hour. Mostly sits in
// the ~6:45–7:10 window; a couple drift off (a 9am, an evening) and one recent day
// has TWO readings, the earlier fasted one is canonical, the later is context.
const _WI_CLOCK = [6.8,7.0,6.9,7.1,6.7,7.05,6.95,9.2,7.0,6.8,7.1,6.9,7.0,6.7,6.95,7.0,6.9,7.1,6.8,7.0,6.9,7.05,6.8,7.1,6.9,20.6,6.7,7.0];
const FC_DOUBLE_DAY_OFFSET = 5; // a double weigh-in this many days before today
function weighInClock(day) { return _WI_CLOCK[((day % _WI_CLOCK.length) + _WI_CLOCK.length) % _WI_CLOCK.length]; }
function fmtClock(h) {
let hr = Math.floor(h), m = Math.round((h - hr) * 60);
if (m === 60) { hr += 1; m = 0; }
const ap = hr >= 12 ? 'PM' : 'AM'; let h12 = hr % 12; if (h12 === 0) h12 = 12;
return `${h12}:${String(m).padStart(2, '0')} ${ap}`;
}
function weighInOffWindow(day) { return Math.abs(weighInClock(day) - FC.weighInTargetHour) > 1; }
const PACE_STATES = {
onTrack: {
key: 'onTrack', tone: 'green', weeklyVel: -0.62, current: 76.0, badge: 'ON TRACK',
verdict: 'On track to make weight.',
line: 'Hold this pace. You hit 74.4 by fight day with room to spare.',
chartCaption: 'Trend’s sitting right on the plan line.',
weekLine: 'On pace this week.',
resultHead: 'Right where you need to be.',
resultSub: 'Hold the line.',
coach: 'Trend’s on target. Daily swings are normal, so trust the line. Keep this up and you walk into fight week sharp.',
},
tooFast: {
key: 'tooFast', tone: 'amber', weeklyVel: -1.18, current: 75.3, badge: 'CUTTING FAST',
verdict: 'Cutting too fast.',
line: 'You’re dropping quicker than the plan. Hard cuts cost power and recovery.',
chartCaption: 'Trend’s dipping below the plan line.',
weekLine: 'Ahead of schedule this week.',
resultHead: 'Ahead of schedule.',
resultSub: 'Ease off the cut.',
coach: 'You’re losing it faster than mapped. Add some food back this week. Walk in with a full tank and your legs under you.',
},
trailing: {
key: 'trailing', tone: 'amber', weeklyVel: -0.34, current: 76.9, badge: 'SLIGHTLY BEHIND',
verdict: 'Slightly behind pace.',
line: 'Small gap to close. Tighten up this week and you’re back on track.',
chartCaption: 'Trend’s drifting just above the plan line.',
weekLine: 'A little behind this week.',
resultHead: 'Time for a small adjustment.',
resultSub: 'You’re close. Tighten up.',
coach: 'Progress is good, just a touch behind. Trim the food slightly this week. Small moves now mean an easy fight week.',
},
danger: {
key: 'danger', tone: 'red', weeklyVel: -0.14, current: 77.6, badge: 'OFF TRACK',
verdict: 'Your plan needs attention.',
line: 'At this pace you miss 74.4. Change the plan before fight week.',
chartCaption: 'Trend’s well above the plan line.',
weekLine: 'Off pace this week.',
resultHead: 'Your plan needs attention.',
resultSub: 'Time to change the plan.',
coach: 'Straight talk: this rate isn’t safe. Move up a class or rework the cut. No crash diets this close in.',
},
};
// Tone colors come from theme CSS vars so they read correctly on light & dark.
const TONE = {
green: { ink: 'var(--t-green)', soft: 'var(--t-green-soft)' },
amber: { ink: 'var(--t-amber)', soft: 'var(--t-amber-soft)' },
red: { ink: 'var(--t-red)', soft: 'var(--t-red-soft)' },
};
const SHADOW = 'var(--card-shadow)';
// ── THEMES ───────────────────────────────────────────────────────────────────
const THEMES = {
// Editorial, the original: warm white cards, Oswald eyebrows, red accent.
paper: {
flags: { layout: 'classic', heroInverted: false, motif: 'none' },
vars: {
'--paper': '#ffffff', '--paper-2': '#f6f4ef',
'--ink': '#15140f', '--ink-2': '#3a3833', '--ink-3': '#524d44',
'--rule': '#ddd5c6', '--rule-2': '#8a7f68',
'--accent': '#a32a18', '--accent-soft': 'rgba(163,42,24,0.10)',
'--red': '#a32a18', '--mustard-deep': '#a87b22',
'--t-green': '#2f5a24', '--t-green-soft': 'rgba(58,107,46,0.13)',
// Unprefixed tone aliases — many verdict chips, tint discs and the safe-pace
// gradient reference these names. Pointed at the --t-* values above so the
// palette can't drift into two greens/ambers.
'--green': '#2f5a24', '--green-soft': 'rgba(58,107,46,0.13)',
'--amber': '#6f5210', '--amber-soft': 'rgba(168,123,34,0.15)',
'--t-amber': '#6f5210', '--t-amber-soft': 'rgba(168,123,34,0.15)',
'--t-red': '#a32a18', '--t-red-soft': 'rgba(163,42,24,0.11)',
'--display': "'Oswald', sans-serif",
'--num': "'IBM Plex Sans', system-ui, sans-serif",
'--title-font': "'IBM Plex Sans', system-ui, sans-serif",
'--title-transform': 'none', '--title-spacing': '-0.02em', '--eyebrow-spacing': '0.16em',
'--radius': '14px', '--radius-ctl': '13px',
'--card-shadow': '0 1px 2px rgba(20,18,12,0.05), 0 10px 26px rgba(20,18,12,0.05)',
'--card-border': '1px solid var(--rule)', '--chrome-bg': 'rgba(246,244,239,0.92)',
},
},
// Full Editorial, flat Weight-Camp look: warm paper, hairline rules (no floating cards),
// huge light numerals, Oswald caps, sharp corners, no shadow.
editorial: {
flags: { layout: 'full', heroInverted: false, motif: 'none' },
vars: {
'--paper': '#faf7f1', '--paper-2': '#faf7f1',
'--ink': '#15140f', '--ink-2': '#3a3833', '--ink-3': '#524d44',
'--rule': '#cfc6b4', '--rule-2': '#8a7f68',
'--accent': '#a32a18', '--accent-soft': 'rgba(163,42,24,0.10)',
'--red': '#a32a18', '--mustard-deep': '#a87b22',
'--t-green': '#2f5a24', '--t-green-soft': 'rgba(58,107,46,0.13)',
// Unprefixed tone aliases — many verdict chips, tint discs and the safe-pace
// gradient reference these names. Pointed at the --t-* values above so the
// palette can't drift into two greens/ambers.
'--green': '#2f5a24', '--green-soft': 'rgba(58,107,46,0.13)',
'--amber': '#6f5210', '--amber-soft': 'rgba(168,123,34,0.15)',
'--t-amber': '#6f5210', '--t-amber-soft': 'rgba(168,123,34,0.15)',
'--t-red': '#a32a18', '--t-red-soft': 'rgba(163,42,24,0.11)',
'--display': "'Oswald', sans-serif",
'--num': "'IBM Plex Sans', system-ui, sans-serif",
'--title-font': "'Oswald', sans-serif",
'--title-transform': 'uppercase', '--title-spacing': '0.04em', '--eyebrow-spacing': '0.22em',
'--radius': '2px', '--radius-ctl': '2px',
'--card-shadow': 'none',
'--card-border': '1px solid var(--rule)', '--chrome-bg': 'rgba(250,247,241,0.94)',
},
},
// Balanced, editorial hero + native iOS structure: rounded grouped cells, segmented
// control, large title, soft depth; keeps Oswald eyebrows + red for brand personality.
balanced: {
flags: { layout: 'balanced', heroInverted: false, motif: 'none' },
vars: {
'--paper': '#ffffff', '--paper-2': '#f1ede6',
'--ink': '#15140f', '--ink-2': '#3a3833', '--ink-3': '#524d44',
'--rule': '#e6ded2', '--rule-2': '#8a7f68',
'--accent': '#a32a18', '--accent-soft': 'rgba(163,42,24,0.10)',
'--red': '#a32a18', '--mustard-deep': '#a87b22',
'--t-green': '#2f5a24', '--t-green-soft': 'rgba(58,107,46,0.13)',
// Unprefixed tone aliases — many verdict chips, tint discs and the safe-pace
// gradient reference these names. Pointed at the --t-* values above so the
// palette can't drift into two greens/ambers.
'--green': '#2f5a24', '--green-soft': 'rgba(58,107,46,0.13)',
'--amber': '#6f5210', '--amber-soft': 'rgba(168,123,34,0.15)',
'--t-amber': '#6f5210', '--t-amber-soft': 'rgba(168,123,34,0.15)',
'--t-red': '#a32a18', '--t-red-soft': 'rgba(163,42,24,0.11)',
'--display': "'Oswald', sans-serif",
'--num': "'IBM Plex Sans', system-ui, sans-serif",
'--title-font': "'IBM Plex Sans', system-ui, sans-serif",
'--title-transform': 'none', '--title-spacing': '-0.03em', '--eyebrow-spacing': '0.16em',
'--radius': '20px', '--radius-ctl': '14px',
'--card-shadow': '0 1px 3px rgba(20,18,12,0.04), 0 8px 22px rgba(20,18,12,0.05)',
'--card-border': 'none', '--chrome-bg': 'rgba(241,237,230,0.9)',
},
},
};
const themeVars = (k) => (THEMES[k] || THEMES.paper).vars;
const themeFlags = (k) => (THEMES[k] || THEMES.paper).flags;
const getStyle = (k) => themeFlags(k);
// Background tweak, every direction can sit on pure white or the warm off-white.
const FC_BG = { white: '#ffffff', offwhite: '#f9f7f2' };
const FCBgContext = React.createContext('offwhite');
// Phone, screen frame; applies the active theme's CSS vars at the root, then
// overrides the page surface (--paper-2) from the global Background tweak. On the
// flat Full-Editorial layout the content sits on that surface, so --paper follows too.
function Phone({ styleKey = 'paper', label, children }) {
const bg = React.useContext(FCBgContext);
const surface = FC_BG[bg] || FC_BG.offwhite;
const flat = themeFlags(styleKey).layout === 'full';
const vars = { ...themeVars(styleKey), '--paper-2': surface };
if (flat) vars['--paper'] = surface;
return
{children}
;
}
function buildHistory(state) {
const daily = state.weeklyVel / 7;
const noise = [0.18,-0.12,0.05,-0.22,0.14,-0.06,0.20,-0.16,0.02,0.12,-0.20,0.08,-0.04,0.16,-0.14,0.06,-0.18,0.10,-0.02,0.14,-0.10,0.04,-0.12,0];
const n = FC.todayDay + 1; // every day from camp start (day 0) through today
return Array.from({ length: n }, (_, i) => [i, +(state.current - daily * (n - 1 - i) + (i === n - 1 ? 0 : noise[i % noise.length])).toFixed(2)]);
}
function smooth(hist) {
return hist.map((p, i, a) => {
const win = a.slice(Math.max(0, i - 2), i + 1);
let w = 0, tw = 0;
win.forEach((x, j) => { const k = Math.pow(0.75, win.length - 1 - j); w += x[1] * k; tw += k; });
return [p[0], w / tw];
});
}
function computePace(stateKey) {
const state = PACE_STATES[stateKey] || PACE_STATES.onTrack;
const hist = buildHistory(state), tr = smooth(hist);
const trendingToday = tr[tr.length - 1][1];
const dailyVel = state.weeklyVel / 7;
const projected = trendingToday + dailyVel * (FC.campDays - FC.todayDay);
// Cycle-aware projection (Logic & Flows §4.4/§7): weigh-in lands in a cycle phase
// that adds/removes water. The honest SCALE projection is the true-weight
// projection plus the weigh-in-day water offset; the buffer is the extra true
// weight you must pre-cut so the scale still reads the limit.
const weighInOffset = cycleOffsetKg(FC.campDays);
const projectedScale = projected + weighInOffset;
const cycleBuffer = Math.max(0, weighInOffset);
const trueTarget = FC.goalWeight - cycleBuffer;
return {
state, hist, trend: tr, trendingToday, dailyVel, projected, gap: projected - FC.goalWeight,
toGo: trendingToday - FC.goalWeight, weeklyVel: state.weeklyVel,
tone: state.tone, badge: state.badge, daysOut: FC.daysOut,
weighInOffset, projectedScale, cycleBuffer, trueTarget,
scaleGap: projectedScale - FC.goalWeight,
};
}
// ── type primitives ──────────────────────────────────────────────────────────
function Eyebrow({ children, color = 'var(--ink-3)', style = {} }) {
return
);
}
// Stat, canonical stat column. Left-rule divider when i>0. Optional sub caption.
function Stat({ label, value, unit, color = 'var(--ink)', sub = null, subColor = 'var(--ink-3)', i = 0, valueSize = 26 }) {
return (
{label}
{value}
{unit && {unit}}
{sub &&
{sub}
}
);
}
// ── device chrome ────────────────────────────────────────────────────────────
function StatusBar() {
const c = 'var(--ink)';
return (
);
}
function NavAction({ children, onClick }) { return ; }
// AvatarButton — the single canonical door to Account/Settings (S7). Uses the
// app's bespoke per-sport athlete mark (CoachMark) in avatar form — circular,
// ink ground, paper line work, red accent — so it matches the brand, not a
// generic pictogram. Reads the active sport.
function GearButton() {
const raw = (window.__sport || (window.FC && window.FC.sport) || 'MMA');
const M = window.CoachMark;
return ;
}
function TabBar({ active = 'home' }) {
const tabs = [{ id: 'home', label: 'Today', icon: 'today' }, { id: 'plan', label: 'Plan', icon: 'plan' }, { id: 'add', label: 'Log', icon: 'log' }, { id: 'progress', label: 'Trend', icon: 'trend' }, { id: 'more', label: 'More', icon: 'more' }];
const Icon = window.UIIcon;
return (
{tabs.map(t => {
const on = t.id === active, col = on ? 'var(--accent)' : 'var(--ink-3)';
return (
);
})}
);
}
function TabIcon({ id, active }) {
const s = active ? 'var(--ink)' : 'var(--ink-3)', sw = active ? 1.7 : 1.4;
if (id === 'home') return ();
if (id === 'plan') return ();
if (id === 'add') return ();
if (id === 'progress') return ();
if (id === 'more') return ();
return null;
}
// PrimaryButton, adaptive high-contrast filled (ink bg / paper text), accent plus.
function PrimaryButton({ label, plus = false, big = false, style = {} }) {
return (
);
}
// HeroButton, THE daily-weigh-in CTA — the one red action the whole app is built
// around. Distinct from PrimaryButton (ink): red accent fill, white plus-disc,
// Oswald label. Use ONLY for logging today's weight (Today, empty, trend).
function HeroButton({ label = 'ADD TODAY’S WEIGHT', onClick, style = {} }) {
return (
);
}
function TextButton({ children }) { return ; }
function GroupedList({ children }) {
return
{children}
;
}
// AvatarList / AvatarRow — selectable or navigational list of separated rounded
// cards, each led by an icon in a tinted tile. The app's standard treatment for
// any list whose options carry a distinct visual identity (sports, menu sections,
// strategies). mode 'select' shows a radio-check and an accent ring when active;
// mode 'nav' shows a chevron. Pass `icon` as a rendered node (a SportGlyph, a
// UIIcon, initials), sized ~26. Keep it for icon-bearing lists; a plain list with
// no per-row identity should still use GroupedList.
function AvatarList({ children, gap = 8 }) {
return
{children}
;
}
function AvatarRow({ label, sub, icon, on = false, mode = 'select', onClick, tone = 'var(--accent)' }) {
const active = mode === 'select' && on;
return (
);
}
// StepList, shared protocol timeline (descent, rebuild). One vocabulary everywhere.
// states: 'now'/'today' = live (green halo), 'goal' = endpoint (gold), else upcoming.
function StepList({ steps }) {
return (
);
}
function Toggle({ on: onProp = true, onChange }) {
// S3 — a real switch: flips on tap (local state), mirrors an external `on` when it changes.
const [on, setOn] = React.useState(onProp);
React.useEffect(() => setOn(onProp), [onProp]);
const flip = (e) => { e.stopPropagation(); setOn(v => { const nv = !v; onChange && onChange(nv); return nv; }); };
return ;
}
function ProgressBar({ pct = 0.5, tone = 'green' }) {
return
;
}
// CoachTip, the personalisation/intelligence surface. A named coach (Donnelly)
// “reads” the athlete’s own inputs and explains the reasoning. The data chip is the
// proof signal: it shows the tip was derived from THIS athlete (their sport, their
// timeline, their numbers), not a generic blurb. Used heavily through onboarding to
// earn trust before the paywall, and in results/dashboards after.
// chip , the input this tip reacts to, e.g. 'Boxing', '8 weeks out', '0.5% / wk'
// headline, the insight, in plain corner-man language
// body , the why
// tone , 'accent' (default) | 'green' | 'amber' | 'red' colours the eyebrow + chip
// coach , false hides the avatar/byline for a lighter inline tip
// The coach voice gets ONE distinct, consistent surface across the whole app: a
// tone-tinted flat panel (not the white, shadowed surface normal cards use) with a
// hairline keyed to the tone and a small coach mark. Same recipe everywhere so the
// athlete always recognises "the coach is talking" at a glance.
// `bullets` (array) renders a skimmable list instead of a paragraph `body`.
// `note` is a small muted line below (disclaimers, "not medical advice").
// Canonical "read card" list primitives, shared by the biological-sex read AND
// every coach card so the cards are literally one component family: a green check
// for a recommended/affirmative point, a muted ✕ for a not-recommended one, sans
// line alongside. SubLabel is the bold sentence-case section heading.
function StratRow({ ok = true, label }) {
return (
{ok
?
: }
{label}
);
}
function SubLabel({ children, top }) {
return
{children}
;
}
// SourceTag — the citation line, pinned to the BOTTOM of a proof/stat card with a
// small document indicator so every card cites its source the same way. `rule` sets
// the divider colour to match the host card's surface.
function SourceTag({ src, rule = 'var(--rule)', color = 'var(--ink-3)', top = 14 }) {
if (!src) return null;
return (
Source · {src}
);
}
// The coach card and the biological-sex read card are now ONE design: a warm-sand
// flat panel (the default accent surface, #e7d9c6), a single muted display tag at
// the top — no coach avatar, no mono chip — a sans headline, a hairline, then the
// SAME StratRow green-tick list the read card uses. Warning tones (amber/red) keep
// a tinted surface + quiet dots so a caution never reads as an endorsement.
function CoachTip({ chip, headline, body, bullets, note, tone = 'accent', surface = null, coach = true, compact = false, sport = null, eyebrow = true, label }) {
const warn = tone === 'amber' || tone === 'red';
// `surface` overrides only the card fill, so a caution can sit on beige while
// `tone` still drives the quiet-dot markers and accent colour.
const bgTone = surface || tone;
const bg = bgTone === 'accent' ? '#e7d9c6' : (TONE[bgTone] ? TONE[bgTone].soft : '#e7d9c6');
const tc = tone === 'accent' ? 'var(--accent)' : (TONE[tone] ? TONE[tone].ink : 'var(--accent)');
const hair = 'rgba(21,20,15,0.12)';
const list = bullets ? bullets.filter(Boolean) : null;
// No decorative tag by default — the headline carries the message. A tag renders
// only when an explicit `label` is passed (and is worth the line).
const tag = (label && eyebrow !== false) ? label : null;
return (
{tag && (
{tag}
)}
{headline}
{body && !list &&
{body}
}
{list && (
{list.map((b, i) => warn
?
{b}
: )}
)}
{note &&
{note}
}
);
}
// DashBanner, OnWeight's full-bleed phase strip. One shape across every Today
// view; colour encodes the camp phase so the state is legible at a glance. A soft
// tint (not a solid fill) keeps it quiet, accent/red still reads as fight week.
// tone , 'ink' (active camp) | 'accent' (fight wk/day) | 'green' (made/rebuild)
// | 'amber' (missed) | 'muted' (no camp / paused / recovery)
// label, phase, e.g. 'IN CAMP' meta, countdown, e.g. '32 DAYS OUT'
// icon , optional leading glyph (uses currentColor)
function DashBanner({ tone = 'ink', label, meta = null, icon = null }) {
const C = {
ink: { bg: 'rgba(21,20,15,0.05)', fg: 'var(--ink-2)' },
accent: { bg: 'var(--accent-soft)', fg: 'var(--accent)' },
green: { bg: 'var(--t-green-soft)', fg: 'var(--t-green)' },
amber: { bg: 'var(--t-amber-soft)', fg: 'var(--t-amber)' },
muted: { bg: 'rgba(21,20,15,0.04)', fg: 'var(--ink-3)' },
}[tone] || { bg: 'rgba(21,20,15,0.05)', fg: 'var(--ink-2)' };
return (