// Main app screens (Home, Progress, Settings) — share the same theme +
// accent props so we can host them inside the iOS frame, an Android
// frame, or a desktop web layout.
// ── Profile switcher ─────────────────────────────────────────────────
// Shown inside Settings below the account banner when the user is signed
// in. Reads the roster + active id from window.BFProfiles, subscribes to
// changes, and supports switching / renaming / creating / archiving.
//
// Gating: any action that grows the roster calls
// BFEntitlement.requireOrPaywall('profiles.multi'), so free / plus users
// see the Plus/Family paywall instead of a silent failure.
function BFProfileSwitcher({ theme, accentH }) {
const [roster, setRoster] = React.useState(() => (window.BFProfiles ? window.BFProfiles.list() : []));
const [activeId, setActiveId] = React.useState(() => {
const c = window.BFProfiles && window.BFProfiles.current();
return c ? c.id : null;
});
React.useEffect(() => {
if (!window.BFProfiles) return;
// Kick off a fresh load in case auth just resolved.
window.BFProfiles.load();
const off = window.BFProfiles.subscribe((snap) => {
setRoster(snap.list.filter((p) => !p.archived_at));
setActiveId(snap.activeId);
});
return off;
}, []);
// PIN status. BFKids.hasPin() is sync but only valid after hydration;
// we poll twice (now + 150ms) to pick up the hydrated value from storage
// without blocking render. refreshPin() is called after set/clear
// actions to bring the badge in sync.
const [pinSet, setPinSet] = React.useState(false);
const refreshPin = React.useCallback(() => {
if (window.BFKids) setPinSet(window.BFKids.hasPin());
}, []);
React.useEffect(() => {
refreshPin();
const t = setTimeout(refreshPin, 150);
return () => clearTimeout(t);
}, [refreshPin]);
const activeProfile = roster.find((p) => p.id === activeId) || null;
const canMulti = !!(window.BFEntitlement && window.BFEntitlement.can && window.BFEntitlement.can('profiles.multi'));
const atCap = roster.length >= 6;
const hasKidProfile = roster.some((p) => p.kind === 'kid');
// PIN management — visible only when the family has at least one kid
// profile so the row doesn't clutter adult-only setups. Setting a PIN
// while one already exists silently overwrites it after the two-step
// confirm flow; clearing requires a confirm to prevent thumb-slips.
const onSetOrChangePin = async () => {
if (!window.BFKids) return;
const ok = await window.BFKids.promptSetPin({
title: pinSet ? 'Change parent PIN' : 'Set parent PIN',
body: pinSet
? 'Enter a new 4-digit PIN, then confirm it.'
: 'Choose a 4-digit PIN. Kids will need this to exit Kids mode or open Settings.',
});
refreshPin();
};
const onClearPin = async () => {
if (!window.BFKids || !window.BFDialog) return;
const ok = await window.BFDialog.confirm({
title: 'Clear parent PIN?',
body: 'Kids will be able to exit Kids mode and open Settings without a PIN.',
confirmLabel: 'Clear', cancelLabel: 'Keep',
danger: true,
});
if (!ok) return;
await window.BFKids.clearPin();
refreshPin();
if (window.BFToast) BFToast.info('PIN cleared', 'No parent PIN is set.');
};
// Switching profiles. Kid ↔ kid is free (siblings share the device). Kid
// → adult requires the parent PIN — the whole point of Kids mode is that
// a child can't tap their way back into the adult library or Settings.
// Adult → kid asks for a quick confirm so the parent knows what they're
// entering (Kids mode = playful UI, limited library, PIN needed to exit).
const onPick = async (id) => {
if (!window.BFProfiles) return;
if (id === activeId) return;
const from = activeProfile;
const to = roster.find((p) => p.id === id);
const kidEntering = to && to.kind === 'kid' && (!from || from.kind !== 'kid');
const needsPin = from && from.kind === 'kid' && to && to.kind !== 'kid';
if (kidEntering && window.BFDialog) {
const ok = await window.BFDialog.confirm({
title: 'Switch to Kids mode for ' + to.name + '?',
body: 'You\u2019ll see the playful UI, a shorter pattern library, and a balloon visualizer. You\u2019ll need the parent PIN to switch back.',
confirmLabel: 'Yes, switch',
cancelLabel: 'Keep here',
});
if (!ok) return;
}
if (needsPin && window.BFKids) {
const ok = await window.BFKids.requirePin({ reason: 'exit' });
if (!ok) return;
}
await window.BFProfiles.setActive(id);
};
// Add a profile. For Family-tier users we ask for both a name and a
// kind (adult | kid) — kind='kid' auto-enters Kids mode when switched to.
// The two-step prompt keeps the UI lightweight (two BFDialog rounds vs a
// custom form sheet); can be upgraded later.
const onAdd = async () => {
if (!canMulti) {
// Paywall fires; if the user taps "Yes, enable it", onGrant re-runs
// onAdd so they go straight into the name prompt without needing a
// second tap on "+ Add profile".
if (window.BFEntitlement) {
window.BFEntitlement.requireOrPaywall('profiles.multi', {
reason: 'profile-add',
onGrant: () => { setTimeout(onAdd, 0); },
});
}
return;
}
if (atCap) {
if (window.BFToast) BFToast.info('Profile cap reached', 'Family plan supports up to 6 profiles.');
return;
}
if (!window.BFDialog) return;
const name = await window.BFDialog.prompt({
title: 'Add profile', placeholder: 'Name',
confirmLabel: 'Next', cancelLabel: 'Cancel',
});
if (!name) return;
// Ask whether this is an adult or kid profile. confirm() returns a
// boolean; repurpose it as a two-option picker where true = kid.
const isKid = window.BFDialog.confirm
? await window.BFDialog.confirm({
title: 'Who is this profile for?',
body: 'Kid profiles use the Kids mode skin (balloon visualizer, gentler patterns). Adults see the full library.',
confirmLabel: 'Kid',
cancelLabel: 'Adult',
})
: false;
// Avatar picker. Kid + adult share the dialog but see different emoji
// sets so a girl doesn't end up with the generic meditator and a boy
// doesn't end up with a unicorn by default. Cancelling the picker
// keeps the profile without an avatar — render falls back to a kind-
// default emoji downstream.
const AVATAR_OPTIONS_KID = [
{ value: '\uD83E\uDDD2', label: 'Kid' }, // 🧒
{ value: '\uD83D\uDC67', label: 'Girl' }, // 👧
{ value: '\uD83D\uDC66', label: 'Boy' }, // 👦
{ value: '\uD83D\uDD84', label: 'Unicorn' }, // 🦄
{ value: '\uD83D\uDC09', label: 'Dragon' }, // 🐉
{ value: '\uD83C\uDF88', label: 'Balloon' }, // 🎈
{ value: '\u2B50', label: 'Star' }, // ⭐
{ value: '\uD83C\uDF38', label: 'Flower' }, // 🌸
];
const AVATAR_OPTIONS_ADULT = [
{ value: '\uD83E\uDDD8', label: 'Calm' }, // 🧘
{ value: '\uD83E\uDDD8\u200D\u2640\uFE0F', label: 'Calm (F)' }, // 🧘♀️
{ value: '\uD83E\uDDD8\u200D\u2642\uFE0F', label: 'Calm (M)' }, // 🧘♂️
{ value: '\uD83C\uDF3F', label: 'Leaf' }, // 🌿
{ value: '\uD83C\uDF0A', label: 'Wave' }, // 🌊
{ value: '\uD83C\uDF11', label: 'Moon' }, // 🌑
{ value: '\u2600\uFE0F', label: 'Sun' }, // ☀️
{ value: '\uD83C\uDFD4\uFE0F', label: 'Peak' }, // 🏔️
];
const avatar = window.BFDialog.choose
? await window.BFDialog.choose({
title: 'Pick an avatar',
body: 'Tap one that feels right. You can change it later.',
options: isKid ? AVATAR_OPTIONS_KID : AVATAR_OPTIONS_ADULT,
cancelLabel: 'Skip',
})
: null;
try {
await window.BFProfiles.create({
name: name,
kind: isKid ? 'kid' : 'adult',
avatar: avatar || null,
});
if (window.BFToast) BFToast.success('Profile added', name);
// First-run PIN setup: as soon as there's at least one kid profile
// and no PIN configured yet, prompt the parent to set one. The PIN
// gate on kid → adult switches assumes a PIN exists; without this
// nudge a family could create a kid profile, never set a PIN, and
// then the exit prompt would fall back to setup at exit time.
if (isKid && window.BFKids && !window.BFKids.hasPin()) {
await window.BFKids.promptSetPin({
title: 'Set a parent PIN',
body: 'This PIN keeps kids from tapping their way out of Kids mode or into Settings. You can reset it by signing out and back in.',
});
refreshPin();
}
} catch (e) {
if (e && e.message !== 'locked' && window.BFToast) BFToast.error('Add failed', e.message || String(e));
}
};
const onRename = async () => {
if (!activeProfile || !window.BFDialog) return;
const next = await window.BFDialog.prompt({
title: 'Rename profile', defaultValue: activeProfile.name,
placeholder: 'Name', confirmLabel: 'Save', cancelLabel: 'Cancel',
});
if (!next || next === activeProfile.name) return;
try {
await window.BFProfiles.rename(activeProfile.id, next);
} catch (e) {
if (window.BFToast) BFToast.error('Rename failed', e.message || String(e));
}
};
// Remove flow. Two-step: first ask "Archive or Erase permanently?" so the
// user picks their level of finality, then route to the appropriate
// confirm + backend call. Archive is the safe default (history stays,
// recoverable via support). Erase hard-deletes the row + cascaded
// history; chosen only by users who actively want the data gone.
const onArchive = async () => {
if (!activeProfile || !window.BFDialog) return;
if (activeProfile.is_primary) {
if (window.BFToast) BFToast.info('Primary profile', 'The primary profile can\u2019t be removed.');
return;
}
const mode = window.BFDialog.choose
? await window.BFDialog.choose({
title: 'Remove ' + activeProfile.name + '?',
body: 'Archive keeps their history (recoverable via support). Erase deletes the profile and its sessions forever.',
options: [
{ value: 'archive', emoji: '\uD83D\uDCE6', label: 'Archive' }, // 📦
{ value: 'erase', emoji: '\uD83D\uDDD1\uFE0F', label: 'Erase' }, // 🗑️
],
cancelLabel: 'Keep',
})
: 'archive';
if (!mode) return;
if (mode === 'archive') {
const ok = await window.BFDialog.confirm({
title: 'Archive ' + activeProfile.name + '?',
body: 'Their history stays saved. You can restore later via support.',
confirmLabel: 'Archive', cancelLabel: 'Keep', danger: true,
});
if (!ok) return;
try {
await window.BFProfiles.archive(activeProfile.id);
} catch (e) {
if (window.BFToast) BFToast.error('Archive failed', e.message || String(e));
}
} else if (mode === 'erase') {
// Two-step confirm for irreversible action — first ask, then require
// them to type the name (or just a second confirm for speed).
const ok = await window.BFDialog.confirm({
title: 'Erase ' + activeProfile.name + ' permanently?',
body: 'This deletes their profile and every session they logged. It cannot be undone.',
confirmLabel: 'Erase forever', cancelLabel: 'Keep', danger: true,
});
if (!ok) return;
try {
if (typeof window.BFProfiles.destroy === 'function') {
await window.BFProfiles.destroy(activeProfile.id);
} else {
// Older BFProfiles build without destroy — fall back to archive so
// the user gets *something* rather than a silent failure.
await window.BFProfiles.archive(activeProfile.id);
}
if (window.BFToast) BFToast.success('Erased', activeProfile.name + ' and their history are gone.');
} catch (e) {
if (window.BFToast) BFToast.error('Erase failed', e.message || String(e));
}
}
};
if (!roster.length) return null;
const kindBadge = (kind) => (kind === 'kid' ? '🧒' : '🌿');
return (
<>
{/* Progression config — only for custom patterns. The built-ins keep
their designer-authored phase lengths. Controls: enable toggle,
"start after" minutes, cap seconds. Stepping is +1s per minute
fixed (keeps the UI surface small; advanced users can still tune
underlying inhale/exhale to choose the starting point). */}
{isCustom && (
);
}
// ── Family session picker ───────────────────────────────────────────
// Modal that lets a parent start a breathing session with multiple
// participants on the same device — a phone passed around, one session,
// N history rows (one per selected profile; wired in Phase 3b via the
// `family_session_id` column added in migration 0005).
//
// Audience filtering: the pattern strip intersects the audiences of
// every selected participant. If any kid is selected, the list hides
// adult-only patterns. User-saved customs ('all' audience) always
// qualify. The visible set is recomputed as the user toggles profiles.
//
// The hard safety check in BFApp.startSession re-validates the final
// pattern against every participant so this layer is a UX filter, not
// a security boundary.
function BFFamilyPicker({ theme, accentH, onClose, onStart, haptics }) {
// Live-subscribe to the roster + entitlement so the picker reacts if
// the user adds/archives a profile in another tab mid-flow.
const [roster, setRoster] = React.useState(() =>
(window.BFProfiles && typeof window.BFProfiles.list === 'function')
? window.BFProfiles.list() : []
);
React.useEffect(() => {
if (!window.BFProfiles || !window.BFProfiles.subscribe) return;
const off = window.BFProfiles.subscribe((snap) => {
setRoster(snap.list.filter((p) => !p.archived_at));
});
return off;
}, []);
// Pre-select every profile on open — the common case is "everyone in
// the room is joining". The user can de-select anyone who's sitting
// this one out. Requires >= 2 to actually start.
const [selected, setSelected] = React.useState(() => new Set(roster.map((p) => p.id)));
// Keep selection in sync if the roster changes while the modal is open
// (e.g. a new profile appeared): add new ids, drop archived ones.
React.useEffect(() => {
setSelected((prev) => {
const valid = new Set(roster.map((p) => p.id));
const next = new Set();
prev.forEach((id) => { if (valid.has(id)) next.add(id); });
// Any brand-new profiles auto-enrol (matches the "pre-select all"
// mental model the user opened the picker with).
roster.forEach((p) => { if (!prev.has(p.id) && !next.has(p.id)) next.add(p.id); });
return next;
});
}, [roster.length]);
const selectedProfiles = roster.filter((p) => selected.has(p.id));
const anyKid = selectedProfiles.some((p) => p.kind === 'kid');
// The audience-intersection shortcut: if any participant is a kid, the
// common viewable set is bfPatternsForProfile({ kind:'kid' }). Otherwise
// everyone is adult → use bfPatternsForProfile({ kind:'adult' }). This
// matches the per-profile gate in BFHome / BFFlow.
const audienceProbe = anyKid ? { kind: 'kid' } : { kind: 'adult' };
const availablePatterns = (typeof bfPatternsForProfile === 'function')
? bfPatternsForProfile(audienceProbe)
: BF_PATTERNS;
const [pattern, setPattern] = React.useState(null);
const [duration, setDuration] = React.useState(180);
// Shorter options than solo — keeps the passed-around format crisp.
const durations = [60, 180, 300, 600];
// If a kid joins after a pattern was picked and the pattern is now
// adult-only, drop it and force the user to re-pick. Prevents starting
// with a stale invalid selection.
React.useEffect(() => {
if (pattern && !availablePatterns.find((p) => p.id === pattern.id)) {
setPattern(null);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [anyKid]);
const toggle = (pid) => {
if (haptics && typeof bfHaptic !== 'undefined') bfHaptic.light();
setSelected((prev) => {
const next = new Set(prev);
if (next.has(pid)) next.delete(pid); else next.add(pid);
return next;
});
};
const canStart = selected.size >= 2 && !!pattern;
const doStart = () => {
if (!canStart) return;
if (haptics && typeof bfHaptic !== 'undefined') bfHaptic.light();
onStart(pattern, duration, Array.from(selected));
};
return (
);
}
// ── Family progress dashboard ─────────────────────────────────────────
// Per-profile cards showing each participant's streak, sessions, minutes,
// plus a small weekly spark of activity. Gated behind the `family.dashboard`
// entitlement (family tier). Sources data via BFSessions.statsByProfile.
//
// This modal is read-only — no row editing. For writing, users go through
// the normal player flow (solo or family picker), which stamps profileId +
// familySessionId correctly.
function BFFamilyDashboard({ theme, accentH, onClose, haptics }) {
// Live roster — same pattern as BFFamilyPicker so adding/archiving a
// profile in another tab updates the dashboard without a reload.
const [roster, setRoster] = React.useState(() =>
(window.BFProfiles && typeof window.BFProfiles.list === 'function')
? window.BFProfiles.list() : []
);
React.useEffect(() => {
if (!window.BFProfiles || !window.BFProfiles.subscribe) return;
return window.BFProfiles.subscribe((snap) => {
setRoster(snap.list.filter((p) => !p.archived_at));
});
}, []);
// Per-profile stats map: { [profileId]: stats }. Recomputed on mount and
// whenever the roster changes. Stats are cheap to compute locally (scan
// of the sessions array) — no debouncing needed at the scale we expect.
const [statsByPid, setStatsByPid] = React.useState({});
React.useEffect(() => {
let cancelled = false;
(async () => {
if (typeof BFSessions === 'undefined' || !BFSessions.statsByProfile) return;
const next = {};
for (const p of roster) {
try { next[p.id] = await BFSessions.statsByProfile(p.id); }
catch (e) { next[p.id] = null; }
}
if (!cancelled) setStatsByPid(next);
})();
return () => { cancelled = true; };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [roster.map((p) => p.id).join('|')]);
// Family totals = sum across distinct family sessions (not per-row sums,
// which would double-count a 5-min family run as 5×N minutes). We pull
// all rows once and dedupe by familySessionId for totals, falling back
// to row-sum for solo rows.
const [familyTotals, setFamilyTotals] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
(async () => {
if (typeof BFSessions === 'undefined' || !BFSessions.all) return;
try {
const rows = await BFSessions.all();
const seenFamilyIds = new Set();
let totalSessions = 0;
let totalSeconds = 0;
for (const r of rows) {
if (r.familySessionId) {
if (seenFamilyIds.has(r.familySessionId)) continue;
seenFamilyIds.add(r.familySessionId);
totalSessions += 1;
totalSeconds += (r.durationSec || 0);
} else {
totalSessions += 1;
totalSeconds += (r.durationSec || 0);
}
}
if (!cancelled) setFamilyTotals({
familyRuns: seenFamilyIds.size,
totalSessions, totalMinutes: Math.floor(totalSeconds / 60),
});
} catch (e) { if (!cancelled) setFamilyTotals(null); }
})();
return () => { cancelled = true; };
}, [roster.map((p) => p.id).join('|')]);
const tapHaptic = () => { if (haptics && typeof bfHaptic !== 'undefined') bfHaptic.light(); };
const days = ['M','T','W','T','F','S','S'];
return (
Family progress
How we're breathing
{/* Family totals */}
{familyTotals && (
Together
{familyTotals.totalMinutes}m across {familyTotals.totalSessions} session{familyTotals.totalSessions === 1 ? '' : 's'}
{familyTotals.familyRuns > 0 && (
{familyTotals.familyRuns} family run{familyTotals.familyRuns === 1 ? '' : 's'}
)}
)}
{/* Per-profile cards */}
{roster.length === 0 && (
No profiles yet. Add family members from Settings → Profiles.
)}
{/* Achievements — grouped by category (streak / volume / depth / cadence / variety).
Category headings only render if the group has any milestones, so
future catalog changes don't leave orphaned headers. */}
);
// Bucket achievements by group (older cached entries without a `group`
// field land in a trailing 'uncategorized' bucket so they still render).
const buckets = {};
for (const a of achievements) {
const g = a.group || 'variety';
(buckets[g] = buckets[g] || []).push(a);
}
const renderedGroups = groups.filter(g => buckets[g] && buckets[g].length > 0);
return renderedGroups.map((g, gi) => (
{t('milestone.group.' + g)}
{buckets[g].map(renderCard)}
));
})()}
{/* Streak tiers — merged from the former Rewards tab */}
{(() => {
// Locale-agnostic "Nd" suffix for the right-hand counter. Keeps the
// column short on narrow phones; full names live in the body.
const dayShort = (n) => `${n}${t('progress.day_short')}`;
const tiers = [
{ name: t('progress.tier_bronze'), req: 3, desc: t('progress.tier_3_day') },
{ name: t('progress.tier_silver'), req: 7, desc: t('progress.tier_one_week') },
{ name: t('progress.tier_gold'), req: 21, desc: t('progress.tier_21_day') },
{ name: t('progress.tier_platinum'), req: 60, desc: t('progress.tier_60_day') },
{ name: t('progress.tier_diamond'), req: 180, desc: t('progress.tier_180_day') },
];
return (
<>
);
}
// Curated list of 8 system voices (4 accents × M/F). Windows ships most of
// these as "Microsoft "; " Online (Natural)" is the new neural
// variant. We match loosely so any installed voice in the target locale that
// hits our name hint wins; if no name matches, we fall back to ANY voice in
// the locale with the right gender hint, then to ANY voice in the locale.
// This keeps the list stable across Windows / macOS / Chrome / Safari even
// though each OS names its voices differently.
const BF_CURATED_VOICES = [
{ id: 'us-m', label: 'American', gender: 'M', lang: 'en-US', name: /(^|\b)(David|Mark|Guy|Eric|Andrew)(\b|Online|$)/i, genderHint: /(David|Mark|Guy|Eric|Andrew|male)/i },
{ id: 'us-f', label: 'American', gender: 'F', lang: 'en-US', name: /(^|\b)(Zira|Aria|Jenny|Ava|Emma|Samantha)(\b|Online|$)/i, genderHint: /(Zira|Aria|Jenny|Ava|Emma|Samantha|female)/i },
{ id: 'gb-m', label: 'British', gender: 'M', lang: 'en-GB', name: /(^|\b)(George|Ryan|Oliver|Thomas|Daniel)(\b|Online|$)/i, genderHint: /(George|Ryan|Oliver|Thomas|Daniel|male)/i },
{ id: 'gb-f', label: 'British', gender: 'F', lang: 'en-GB', name: /(^|\b)(Sonia|Libby|Hazel|Susan|Kate|Serena)(\b|Online|$)/i, genderHint: /(Sonia|Libby|Hazel|Susan|Kate|Serena|female)/i },
{ id: 'au-m', label: 'Australian',gender: 'M', lang: 'en-AU', name: /(^|\b)(William|James|Lee)(\b|Online|$)/i, genderHint: /(William|James|Lee|male)/i },
{ id: 'au-f', label: 'Australian',gender: 'F', lang: 'en-AU', name: /(^|\b)(Natasha|Catherine|Karen)(\b|Online|$)/i, genderHint: /(Natasha|Catherine|Karen|female)/i },
{ id: 'in-m', label: 'Indian', gender: 'M', lang: 'en-IN', name: /(^|\b)(Prabhat|Ravi|Rishi)(\b|Online|$)/i, genderHint: /(Prabhat|Ravi|Rishi|male)/i },
{ id: 'in-f', label: 'Indian', gender: 'F', lang: 'en-IN', name: /(^|\b)(Neerja|Heera|Isha)(\b|Online|$)/i, genderHint: /(Neerja|Heera|Isha|female)/i },
];
// Given a curated target and the live voice list, find the best voice to
// represent this card. Returns the Voice object or null when nothing can
// confidently be matched to the requested (locale × gender). Falling back
// to "any voice in the locale" would mis-assign a female voice to a male
// card (or vice versa), so we prefer greying the card out over lying.
function bfResolveCuratedVoice(entry, voices) {
if (!voices || !voices.length) return null;
const pool = voices.filter(v => v.lang && v.lang.toLowerCase().startsWith(entry.lang.toLowerCase()));
if (!pool.length) return null;
const byName = pool.find(v => entry.name.test(v.name));
if (byName) return byName;
const byGender = pool.find(v => entry.genderHint.test(v.name));
return byGender || null;
}
// Reusable themed dropdown. We use this instead of a native