// session.jsx — active sitting: scan sweep, breathing, tap-to-note, timer, audio. function fmt(s) { const m = Math.floor(s / 60), ss = Math.floor(s % 60); return `${m}:${String(ss).padStart(2, '0')}`; } // ── practice phase plans (fractions of total duration) ────────── const MT_PLANS = { anapana: [['anapana', 0, 1]], anapana_vipassana: [['anapana', 0, 0.25], ['vipassana', 0.25, 1]], anapana_vipassana_metta: [['anapana', 0, 0.2], ['vipassana', 0.2, 0.86], ['metta', 0.86, 1]], vipassana: [['vipassana', 0, 1]], open: [['open', 0, 1]], walking: [['walking', 0, 1]], bhakti: [['bhakti', 0, 1]], hybrid: [['hybrid', 0, 1]], }; const MT_PHASE = { anapana: { hue: '#56B4FF', label: 'Ānāpāna', short: 'breath' }, vipassana: { hue: '#36E8D2', label: 'Vipassanā', short: 'body sweep' }, metta: { hue: '#FF9EC4', label: 'Mettā', short: 'lovingkindness' }, open: { hue: '#B49CFF', label: 'Open awareness', short: 'noting' }, walking: { hue: '#8FD0A8', label: 'Walking', short: 'the steps' }, bhakti: { hue: '#FFB24D', label: 'Naam', short: 'the Name' }, hybrid: { hue: '#C9A0FF', label: 'Naam-scan', short: 'the Name' }, }; const MT_PHASE_CUES = { anapana: [ 'Rest attention at the rim of the nostrils.', 'Feel the breath enter — cool. Leave — warm.', 'Just the breath. Nothing to add, nothing to fix.', 'When the mind wanders, gently return to the breath.', 'Sharpen the attention on this small triangle of skin.', ], vipassana: [ 'Move attention slowly through the body, part by part.', 'Whatever arises — pleasant or unpleasant — simply observe.', 'Anicca. Every sensation is changing, passing.', 'No reaction. No craving, no aversion. Only observe.', 'Stay equanimous, knowing it will change.', ], metta: [ 'Let the body soften, the heart grow warm.', 'May I be happy. May I be peaceful. May I be free.', 'May all beings be happy. May all beings be free.', 'Radiate goodwill outward, in every direction.', 'Rest in the warmth, open and unguarded.', ], open: [ 'Sit. Know the body as it is.', 'When a thought arises, note it softly — and let it pass.', 'Whatever you are doing, be aware of it.', 'Rest in open awareness. Nothing to chase.', ], walking: [ 'Feel each foot as it lifts, moves, and places.', 'Walk a little slower than feels natural.', 'When the mind wanders, return to the soles of the feet.', 'Lifting. Moving. Placing.', ], bhakti: [ 'Repeat the Name, gently, with each breath.', 'Let the Name fill the mind — leave no room for anything else.', 'When a sensation or feeling arises, offer it to the Lord and return to the Name.', 'No need to observe. Only to fill, and to surrender.', 'The ego dissolves where the Name lives.', ], hybrid: [ 'Place the Name on this part of the body.', 'Fill each cell with the Name in place of craving.', 'Move slowly — let the Name saturate the whole body.', 'Where sensation was, now let the Name be.', 'Body and Name become one.', ], }; const MT_PHASE_ENTER = { anapana: 'Begin with the breath. Ānāpāna.', vipassana: 'Now move to the body. Begin the sweep.', metta: 'Now, lovingkindness. Let the heart open.', open: 'Rest in open awareness.', walking: 'Begin walking. Attention in the feet.', }; // deeper, "why-it-matters" reminders — appended after the base cues so // the later spaced reminders progress into understanding, not repetition const MT_DEEP = { anapana: [ 'Why such a small area? A narrow focus sharpens the mind, like a lens gathering light.', 'Do not force the breath — only watch it. Long or short, simply know it as it is.', 'Each time you notice the mind has wandered and return, the attention grows stronger.', ], vipassana: [ 'Why observe without reacting? Each craving or aversion plants a habit; calm observation dissolves one.', 'Move at an even pace, part by part — the faint sensations matter as much as the strong.', ], }; // region groups for the picker (top → bottom) const MT_REGION_GROUPS = [ ['Head & neck', ['head', 'throat']], ['Torso', ['chest', 'abdomen', 'pelvis']], ['Arms', ['armL', 'forearmL', 'handL', 'armR', 'forearmR', 'handR']], ['Legs', ['thighL', 'calfL', 'footL', 'thighR', 'calfR', 'footR']], ]; // Bottom sheet to note a sensation at a tapped region function NoteSheet({ region, onClose, onSave, onRegionChange, startPick }) { const C = MT_COLORS; const [reg, setReg] = React.useState(region); const [sens, setSens] = React.useState(null); const [inten, setInten] = React.useState(1); const [emo, setEmo] = React.useState(null); const [shown, setShown] = React.useState(false); const [pickArea, setPickArea] = React.useState(!!startPick); React.useEffect(() => { const t = setTimeout(() => setShown(true), 24); return () => clearTimeout(t); }, []); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); onClose(); } }; window.addEventListener('keydown', onKey, true); return () => window.removeEventListener('keydown', onKey, true); // eslint-disable-next-line }, []); // follow taps on the body while the sheet is open React.useEffect(() => { setReg(region); }, [region]); const choose = (id) => { setReg(id); onRegionChange && onRegionChange(id); setPickArea(false); }; const label = MT_REGION_LABEL[reg] || reg; return (
{/* region picker — choose which area */} {pickArea ? (
Where in the body? — or tap the figure
{MT_REGION_GROUPS.map(([title, ids]) => (
{title}
{ids.map(id => ( choose(id)} /> ))}
))}
) : (
What is the sensation?
{MT_SENSATIONS.map(s => ( setSens(s.id)} /> ))}
How strong?
{MT_INTENSITY.map((lab, i) => ( ))}
Any feeling-tone? (optional)
{MT_EMOTIONS.map(e => ( setEmo(emo === e ? null : e)} /> ))}
sens && onSave({ region: reg, sensationId: sens, intensity: inten, emotion: emo })} style={{ opacity: sens ? 1 : 0.4, pointerEvents: sens ? 'auto' : 'none' }}> Mark sensation )}
); } function SessionScreen({ config, audio, onEnd, vp }) { const C = MT_COLORS; const [extraMin, setExtraMin] = React.useState(0); // "+5" extensions during the sit const [cueEvery, setCueEvery] = React.useState(config.cueEvery != null ? config.cueEvery : 5); // minutes between repeated cues after the instructions; 0 = off const total = (config.duration + extraMin) * 60; // the RAF loop runs with [] deps — these refs keep it seeing live values const totalRef = React.useRef(total); totalRef.current = total; const finishRef = React.useRef(null); const [elapsed, setElapsed] = React.useState(0); const [paused, setPaused] = React.useState(true); // held until the countdown ends const [countdown, setCountdown] = React.useState(5); // 5-4-3-2-1, then the sit begins const [showKeys, setShowKeys] = React.useState(false); // "?" shortcut overlay const [dimmed, setDimmed] = React.useState(false); // chrome fades when idle React.useEffect(() => { let t; const poke = () => { setDimmed(false); clearTimeout(t); t = setTimeout(() => setDimmed(true), 10000); }; poke(); const evs = ['pointermove', 'pointerdown', 'keydown', 'touchstart']; evs.forEach(ev => window.addEventListener(ev, poke)); return () => { clearTimeout(t); evs.forEach(ev => window.removeEventListener(ev, poke)); }; }, []); const firstPhaseRef = React.useRef(null); React.useEffect(() => { if (countdown === null) return; if (countdown <= 0) { setCountdown(null); setPaused(false); return; } const t = setTimeout(() => setCountdown(c => c - 1), 1000); return () => clearTimeout(t); }, [countdown]); // spacebar toggles pause (once the countdown is over) React.useEffect(() => { const onKey = (e) => { const tag = e.target && e.target.tagName; if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return; if (e.code === 'Space') { e.preventDefault(); setPaused(p => (countdown === null ? !p : p)); } else if (e.key === 'm' || e.key === 'M') setMuted(m => !m); else if (e.key === 'v' || e.key === 'V') setVoiceRemind(on => { if (on) voice.cancel(); return !on; }); else if (e.key === '?') setShowKeys(k => !k); else if (e.key === 'Escape') setShowKeys(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [countdown]); const [scanPos, setScanPos] = React.useState(40); const [randRegion, setRandRegion] = React.useState(null); const randRef = React.useRef({ region: null, t: -99 }); const [markers, setMarkers] = React.useState([]); const [sheet, setSheet] = React.useState(null); const [sheetPick, setSheetPick] = React.useState(false); const [thought, setThought] = React.useState(false); const [parked, setParked] = React.useState(() => config.parked || []); const parkedRef = React.useRef(config.parked || []); const [muted, setMuted] = React.useState(config.ambient === false); const intervalSec = (config.intervalBell || 0) * 60; const bellRef = React.useRef(0); const voice = useVoice(); const voiceOn = config.voice !== false && voice.supported; const ambLvl = ((config.ambientVol != null ? config.ambientVol : 55) / 100) * 0.4; // 55 -> the old 0.22 const voiceVol = (config.voiceVol != null ? config.voiceVol : 100) / 100; useWakeLock(true); // screen stays on for the whole sitting, pause included // two independent reminder sounds: gong + spoken cue. select gong frequency live. const GONGS = [['Deep', 288], ['Temple', 396], ['Bowl', 432], ['Bright', 528], ['Crystal', 639]]; const [gongFreq, setGongFreq] = React.useState(config.gongFreq || 432); const [gongOn, setGongOn] = React.useState(config.intervalBell > 0 ? (config.reminderType !== 'voice') : false); const [voiceRemind, setVoiceRemind] = React.useState(config.intervalBell > 0 ? (config.reminderType === 'voice' || config.reminderType === 'both') : false); const gongFreqRef = React.useRef(gongFreq); React.useEffect(() => { gongFreqRef.current = gongFreq; }, [gongFreq]); const gongOnRef = React.useRef(gongOn); React.useEffect(() => { gongOnRef.current = gongOn; }, [gongOn]); const voiceRemindRef = React.useRef(voiceRemind); React.useEffect(() => { voiceRemindRef.current = voiceRemind; }, [voiceRemind]); const [cueIdx, setCueIdx] = React.useState(0); const elapsedRef = React.useRef(0); const lastRef = React.useRef(performance.now()); const pausedRef = React.useRef(true); const persistRef = React.useRef(0); const doneRef = React.useRef(false); React.useEffect(() => { pausedRef.current = paused; }, [paused]); const pose = config.pose || 'standing'; const P = mtPose(pose); const direction = config.direction || 'down'; const SWEEP = config.speed || 95; // seconds per full sweep const axis = (direction === 'left' || direction === 'right') ? 'x' : 'y'; const [a0, a1] = axis === 'x' ? P.scanX : P.scanY; // practice phase plan const practice = config.practice || (config.mode === 'silent' ? 'open' : 'anapana_vipassana'); const PLAN = MT_PLANS[practice] || MT_PLANS.anapana_vipassana; const phaseKindAt = (frac) => { const p = PLAN.find(x => frac >= x[1] && frac < x[2]); return (p || PLAN[PLAN.length - 1])[0]; }; const [manualPhase, setManualPhase] = React.useState(null); // user-chosen override const manualPhaseRef = React.useRef(null); React.useEffect(() => { manualPhaseRef.current = manualPhase; }, [manualPhase]); const autoPhase = phaseKindAt(total > 0 ? Math.min(0.999, elapsed / total) : 0); const phaseKind = manualPhase || autoPhase; const phaseInfo = MT_PHASE[phaseKind] || MT_PHASE.vipassana; const tintHue = phaseInfo.hue; const isBhakti = phaseKind === 'bhakti'; const isHybrid = phaseKind === 'hybrid'; const deity = MT_DEITIES[config.deity] || MT_DEITIES.vitthala; const sweepActive = phaseKind === 'vipassana' || isHybrid; const guided = sweepActive; // sweep + region detection during Vipassanā or Naam-scan const phaseRef = React.useRef(null); const [naamRegions, setNaamRegions] = React.useState([]); const naamRef = React.useRef({ last: null }); const headPt = ((P.byId[P.headId] || {}).point) || [P.aura.cx, 60]; const anchor = phaseKind === 'anapana' ? { x: headPt[0], y: headPt[1] + 16 } : null; // active region under the sweep (or the randomly chosen one) const scanRegion = React.useMemo(() => { if (!sweepActive) return null; if (direction === 'random') return randRegion; let best = null, bd = 1e9; for (const r of P.regions) { const c = axis === 'x' ? r.point[0] : r.point[1]; const dd = Math.abs(c - scanPos); if (dd < bd) { bd = dd; best = r; } } return bd < (axis === 'x' ? 38 : 42) ? best.id : null; }, [scanPos, randRegion, sweepActive, direction, axis, pose]); // main RAF loop (subscribes once; reads paused via ref) React.useEffect(() => { let raf; lastRef.current = performance.now(); const tick = (now) => { const dt = (now - lastRef.current) / 1000; lastRef.current = now; if (!pausedRef.current && !doneRef.current) { const e = elapsedRef.current + dt; elapsedRef.current = e; setElapsed(e); // heartbeat so an interrupted sit can be recovered on next open if (e - (persistRef.current || 0) >= 5) { persistRef.current = e; mtSaveActiveSit({ at: Date.now(), elapsedSec: Math.round(e), duration: config.duration }); } const frac = totalRef.current > 0 ? Math.min(0.999, e / totalRef.current) : 0; const fk = manualPhaseRef.current || phaseKindAt(frac); // phase transition → soft bell + fresh cue if (fk !== phaseRef.current) { if (phaseRef.current !== null && e > 0.5) { audio.bell(fk === 'metta' ? 528 : fk === 'vipassana' ? 432 : 480); setCueIdx(i => i + 1); } phaseRef.current = fk; } if (fk === 'vipassana' || fk === 'hybrid') { if (direction === 'random') { const stepEvery = Math.max(1.6, SWEEP / 12); if (e - randRef.current.t > stepEvery) { randRef.current.t = e; const regs = P.regions; let pick; do { pick = regs[Math.floor(Math.random() * regs.length)].id; } while (pick === randRef.current.region && regs.length > 1); randRef.current.region = pick; setRandRegion(pick); } } else { const phase = (e % SWEEP) / SWEEP; let pos; if (direction === 'up' || direction === 'left') pos = a1 - phase * (a1 - a0); else if (direction === 'mix') pos = phase < 0.5 ? a0 + (phase / 0.5) * (a1 - a0) : a1 - ((phase - 0.5) / 0.5) * (a1 - a0); else pos = a0 + phase * (a1 - a0); // down / right setScanPos(pos); } } if (e >= totalRef.current) { finishRef.current(e); return; } // periodic reminder — gong and/or gentle voice (independent) if (intervalSec > 0) { const k = Math.floor(e / intervalSec); if (k > bellRef.current && e < totalRef.current - 1) { bellRef.current = k; if (gongOnRef.current) audio.bell(gongFreqRef.current); if (voiceRemindRef.current && voiceOn) { const sh = (MT_PHASE[fk] || {}).short; if (sh) voice.speak('Gently return your attention to ' + sh + '.', { volume: voiceVol }); } } } } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); // eslint-disable-next-line }, []); // start audio + bell React.useEffect(() => { audio.bell(528); audio.fade(muted ? 0 : ambLvl, 3); return () => audio.fade(0, 1.2); // eslint-disable-next-line }, []); React.useEffect(() => { audio.fade(muted || paused ? 0 : ambLvl, 1.2); }, [muted, paused, ambLvl]); // eslint-disable-line // phase-aware rotating guidance cues const cues = React.useMemo(() => { const pool = MT_PHASE_CUES[phaseKind] || MT_PHASE_CUES.vipassana; if (isHybrid && scanRegion) { return [`Place “${deity.chant}” on the ${(MT_REGION_LABEL[scanRegion] || '').toLowerCase()}.`, ...pool]; } if (phaseKind === 'vipassana' && scanRegion) { return [`Rest attention on the ${(MT_REGION_LABEL[scanRegion] || '').toLowerCase()}.`, ...pool]; } return pool; }, [phaseKind, scanRegion, isHybrid]); // Hybrid: accumulate the Name on each region the sweep passes (filling the body with naama) React.useEffect(() => { if (!isHybrid) { if (naamRegions.length) setNaamRegions([]); return; } if (!scanRegion || scanRegion === naamRef.current.last) return; naamRef.current.last = scanRegion; setNaamRegions(prev => { const kept = prev.filter(r => r.id !== scanRegion).map(r => ({ id: r.id, fresh: false })); const next = [...kept, { id: scanRegion, fresh: true }]; return next.slice(-6); // keep the last several visible at once }); }, [scanRegion, isHybrid]); React.useEffect(() => { const id = setInterval(() => setCueIdx(i => i + 1), 7000); return () => clearInterval(id); }, []); const cue = cues[cueIdx % cues.length]; // Voice arc per phase: // OPENING — a quick, complete instruction in the first ~30s (settle + // the practice's first cues), spoken once and never repeated. // REMINDERS — afterwards, the remaining cues plus deeper "why" lines, // one DIFFERENT line every `cueEvery` minutes (off = opening only). // At the session start the opening is the full settle+instruction; a // later phase change gets just its brief enter line, then reminders. const planRef = React.useRef({ phase: null }); const firstPhaseDoneRef = React.useRef(false); React.useEffect(() => { if (!paused) { const p = planRef.current; if (p.remAt) p.remAt = Date.now() - (p._held || 0); } }, [paused]); React.useEffect(() => { if (!voiceOn || paused || countdown !== null) return; const now = Date.now(); let vp = planRef.current; if (vp.phase !== phaseKind) { const isFirst = !firstPhaseDoneRef.current; firstPhaseDoneRef.current = true; const cues = MT_PHASE_CUES[phaseKind] || []; const enter = MT_PHASE_ENTER[phaseKind] || cues[0]; const deep = MT_DEEP[phaseKind] || []; const opening = isFirst ? ['Let the body settle. Let the eyes close.', cues[0], cues[1]].filter(Boolean) : [enter].filter(Boolean); const reminders = (isFirst ? cues.slice(2) : cues.slice(0)).concat(deep); vp = planRef.current = { phase: phaseKind, openAt: now, openIdx: 1, remIdx: 0, remAt: now, opening, reminders }; if (opening.length) voice.speak(opening[0], { volume: voiceVol }); // first line right away return; } const since = now - vp.openAt; // opening lines, ~11s apart, all inside the first ~30s if (vp.openIdx < vp.opening.length) { if (since >= vp.openIdx * 11000 + 1000) { voice.speak(vp.opening[vp.openIdx], { volume: voiceVol }); vp.openIdx++; vp.remAt = now; } return; } // progressive reminders — different each time, governed by cueEvery if (!cueEvery || !vp.reminders.length) return; if (since < 30000) return; // let the opening breathe ~30s if (now - vp.remAt < cueEvery * 60 * 1000) return; vp.remAt = now; voice.speak(vp.reminders[vp.remIdx % vp.reminders.length], { volume: voiceVol }); vp.remIdx++; // eslint-disable-next-line }, [cueIdx, phaseKind, voiceOn, paused, countdown, cueEvery]); // a soft pulse when the practice phase changes (eyes-closed signal) React.useEffect(() => { if (firstPhaseRef.current === null) { firstPhaseRef.current = phaseKind; return; } if (firstPhaseRef.current === phaseKind) return; firstPhaseRef.current = phaseKind; try { if (navigator.vibrate) navigator.vibrate(60); } catch (e) {} // eslint-disable-next-line }, [phaseKind]); // stop speaking on pause; resume happens naturally on next cue React.useEffect(() => { if (paused) voice.cancel(); }, [paused]); // eslint-disable-line React.useEffect(() => () => voice.cancel(), []); // cleanup on unmount function finish(e) { if (doneRef.current) return; doneRef.current = true; mtClearActiveSit(); voice.cancel(); audio.bell(396); onEnd({ duration: config.duration, elapsedSec: Math.round(e || elapsed), markers, parked: parkedRef.current }); } function addThought(text) { const t = (text || '').trim(); if (!t) return; const next = [...parkedRef.current, { id: 'p' + Date.now() + Math.random().toString(36).slice(2, 6), text: t }]; parkedRef.current = next; setParked(next); mtSaveParked(next); audio.pluck(520, 0.06); setThought(false); } function saveMark(m) { audio.bell(660); setMarkers(prev => { const i = prev.filter(p => p.region === m.region).length; return [...prev, { ...m, i }]; }); setSheet(null); } finishRef.current = finish; const remaining = Math.max(0, total - elapsed); const prog = Math.min(1, elapsed / total); return (
{/* "?" keyboard shortcuts */} {showKeys && (
setShowKeys(false)} style={{ position: 'absolute', inset: 0, zIndex: 45, display: 'grid', placeItems: 'center', background: 'rgba(4,9,15,0.6)', backdropFilter: 'blur(3px)', cursor: 'pointer' }}>
space  pause / resume
m      mute ambient
v      voice reminders
?      this panel
)} {/* settle-in countdown before anything begins */} {countdown !== null && (
{countdown}
Settle in
)} {/* top bar: timer + phase + exit */}
{fmt(remaining)}
{/* practice / phase switcher */}
▾
{/* gong on/off */} {/* gong tone dropdown */}
▾
{/* spoken-cue repeat interval — instructions always play first */} {/* voice guidance on/off */} {voice.supported && ( )} {/* ambient mute */}
{/* progress hairline */}
{/* body stage */}
{/* breathing ring */}
{ setSheet(id); setSheetPick(false); }} breathing={!paused} scanAxis={axis} scanPos={scanPos} showScanLine={sweepActive && !paused && direction !== 'random'} tint={tintHue} glow={phaseKind === 'metta' || isBhakti} anchor={anchor} naam={isHybrid ? { regions: naamRegions, word: deity.chant, hue: tintHue } : null} />
{/* chant Naam overlay — Bhakti shows the big centered Name; Hybrid places it on the body parts */} {isBhakti && (
{deity.chant}
)}
{/* guidance cue */}
{cue}
{/* controls */}
PARK A THOUGHT {(isBhakti || isHybrid) ? 'TAP A SENSATION · OFFER IT' : 'END · MAP THE BODY AFTER'}
{sheet && { setSheet(null); setSheetPick(false); }} onSave={saveMark} onRegionChange={(id) => setSheet(id)} />} {thought && setThought(false)} onSave={addThought} />}
); } function ctrlBtn(C, sz) { return { appearance: 'none', cursor: 'pointer', width: sz, height: sz, borderRadius: 999, background: 'rgba(255,255,255,0.06)', border: `1px solid ${C.inkGhost}`, display: 'grid', placeItems: 'center', backdropFilter: 'blur(8px)', }; } // quick mid-sit thought capture — set it down, return to the breath function ThoughtSheet({ onClose, onSave, count }) { const C = MT_COLORS; const [val, setVal] = React.useState(''); const [shown, setShown] = React.useState(false); const inputRef = React.useRef(null); React.useEffect(() => { const t = setTimeout(() => { setShown(true); inputRef.current && inputRef.current.focus(); }, 24); return () => clearTimeout(t); }, []); const amber = '#FFC78A'; return (
Set it down
Note the thought, then return to the breath. It's yours again after.