);
}
// RoundCtrl — minimal control: a transparent circle with a violet outline. The centre
// (big) Play button carries no glow (border only); `minimal` gives a subtler, quieter
// treatment used by White Noise. The Stop button keeps a faint border glow.
function RoundCtrl({ icon, label, onClick, accent, th, big = false, minimal = false, iconColor, dim = false }) {
const d = big ? 116 : 86;
const border = accent[0];
const [pressed, setPressed] = React.useState(false);
const [flash, setFlash] = React.useState(false);
const flashTimer = React.useRef(null);
const down = () => setPressed(true);
const up = () => setPressed(false);
const handleClick = (e) => {
setFlash(true);
clearTimeout(flashTimer.current);
flashTimer.current = setTimeout(() => setFlash(false), 280); // glow response
if (onClick) onClick(e);
};
React.useEffect(() => () => clearTimeout(flashTimer.current), []);
// Liquid-glass material. Side buttons are convex near-black glass orbs; the central
// Play button is a luminous violet glass dome. Both are built from layered radial
// gradients, a thin neon-purple rim, a top specular highlight and interior depth.
const baseBg = big
? `radial-gradient(128% 120% at 50% 28%, ${border}e6, ${border}82 40%, rgba(70,30,140,.7) 64%, rgba(24,11,50,.94))`
: `radial-gradient(135% 124% at 50% 14%, rgba(70,58,104,.55), rgba(20,16,34,.88) 52%, rgba(7,6,16,.97))`;
// Crisp neon rim + a soft NEUTRAL drop shadow for depth. No glossy streaks or shine —
// the surface is lit only by a broad, soft, diffuse ambient light. Dimmed during a
// running session so the timer remains the focal point.
const rimA = dim ? (big ? '9c' : '85') : (big ? 'ff' : 'd9');
const ringGlow = big
? `0 0 0 1.6px ${border}${rimA}, 0 14px 32px rgba(0,0,0,${dim ? .42 : .56}), 0 5px 14px rgba(0,0,0,.4)`
: `0 0 0 1.4px ${border}${rimA}, 0 10px 26px rgba(0,0,0,${dim ? .44 : .56}), 0 4px 12px rgba(0,0,0,.4)`;
const innerDepth = big
? `inset 0 2px 3px rgba(255,255,255,.12), inset 0 -16px 30px rgba(12,4,32,.6), inset 0 10px 26px ${border}30`
: `inset 0 2px 3px rgba(255,255,255,.07), inset 0 -14px 24px rgba(0,0,0,.6)`;
// Press feedback: a brief rim brighten only (no light bloom on the Play button).
const boxShadow = `${ringGlow}, ${innerDepth}` + (flash ? (big ? `, 0 0 0 2px ${border}` : `, 0 0 0 2px ${border}, 0 0 22px ${border}80`) : '');
// The label is absolutely positioned below the button so the column height equals the
// button height — that lets the parent align every button's CENTRE on one axis.
return (
{label && {label}}
);
}
// EmeoMark — the EMEO emblem used on the splash & share card: the luminous
// violet→blue ring with the EMEO wordmark at its heart and a single white origin-
// sphere at 12 o'clock that the ring grows from. No purple outer halo.
function EmeoMark({ size = 184, breathe = true }) {
return (
);
}
// VolumetricFog — a slow luminous nebula suspended inside the timer circle. Several
// large, heavily-blurred violet/blue clouds drift and breathe over each other (screen
// blend) to give an abstract, layered sense of 3D depth — no particles, dots or specks.
// Clipped to the circle; fades in only while a session is active.
function VolumetricFog({ active, size = 352 }) {
return (
);
}
// RingParticles — calm, organic motes drifting around the timer while a focus
// session runs. Transform/opacity-only animation (GPU-friendly, battery-light).
function RingParticles({ active, count = 14, radius = 172 }) {
const dots = React.useMemo(() => Array.from({ length: count }).map((_, i) => {
const a = (i / count) * Math.PI * 2 + (Math.random() - 0.5) * 0.6;
const r = radius * (0.84 + Math.random() * 0.32);
const x0 = Math.cos(a) * r, y0 = Math.sin(a) * r;
const da = a + (Math.random() - 0.5) * 0.45;
const dr = r + 8 + Math.random() * 20;
const x1 = Math.cos(da) * dr, y1 = Math.sin(da) * dr - (6 + Math.random() * 16);
return {
s: (2.4 + Math.random() * 3.4).toFixed(1), d: (7 + Math.random() * 5).toFixed(1),
dl: (-Math.random() * 9).toFixed(1), o: (0.22 + Math.random() * 0.38).toFixed(2),
x0: x0.toFixed(1), y0: y0.toFixed(1), x1: x1.toFixed(1), y1: y1.toFixed(1),
};
}), [count, radius]);
// Keep the layer mounted through a graceful exit so particles fade out instead of
// vanishing. `vis` drives a container opacity transition; unmount only after it.
const [mounted, setMounted] = React.useState(active);
const [vis, setVis] = React.useState(false);
React.useEffect(() => {
if (active) {
setMounted(true);
const r = requestAnimationFrame(() => setVis(true));
return () => cancelAnimationFrame(r);
} else {
setVis(false);
const tm = setTimeout(() => setMounted(false), 1900);
return () => clearTimeout(tm);
}
}, [active]);
if (!mounted) return null;
return (
{dots.map((p, i) => (
))}
);
}
// SessionQuote — motivational words that surface once a focus session is flowing.
// Fades in a beat after the timer starts, drifts gently between quotes, and dissolves
// when the session ends. Uses the exact same pill treatment the app shows elsewhere
// (glass pill · gradient dot · 14px/300 text) so the look is consistent throughout.
function SessionQuote({ active, quotes, accent, th }) {
// Keep the live pool in a ref so the rotation loop never restarts when the parent
// re-renders every second (the timer tick). The driving effect depends ONLY on
// `active`, so it runs once per session — no thrash, no flicker.
const poolRef = React.useRef([]);
poolRef.current = Array.isArray(quotes) ? quotes.filter((q) => q && String(q).trim()) : [];
const [mounted, setMounted] = React.useState(false);
const [text, setText] = React.useState('');
const [vis, setVis] = React.useState(false); // current-quote opacity gate
React.useEffect(() => {
const pool = poolRef.current;
if (!active || pool.length === 0) {
setVis(false);
const tm = setTimeout(() => setMounted(false), 1000);
return () => clearTimeout(tm);
}
setMounted(true);
// shuffled, non-repeating reading order
const order = pool.map((_, i) => i);
for (let i = order.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [order[i], order[j]] = [order[j], order[i]]; }
let alive = true, step = 0, tShow, tHold, tSwap;
const show = () => {
const p = poolRef.current;
setText(p[order[step % order.length] % p.length] || p[0]);
tShow = setTimeout(() => { if (alive) setVis(true); }, 40); // next tick → CSS transition runs
if (p.length > 1) {
// hold ~24s, then fade out, swap, fade back in
tHold = setTimeout(() => {
if (!alive) return;
setVis(false);
tSwap = setTimeout(() => { if (!alive) return; step += 1; show(); }, 1100);
}, 24000);
}
};
// Gentle entrance ~1.4s after the timer begins — lets the ring settle first.
const intro = setTimeout(() => { if (alive) show(); }, 1400);
return () => { alive = false; clearTimeout(intro); clearTimeout(tShow); clearTimeout(tHold); clearTimeout(tSwap); };
}, [active]);
if (!mounted || !text) return null;
return (
{/* small glowing circular indicator on the left */}
{text}
);
}
// ── Time-based greeting pill (Focus header) ─────────────────────────────────────────
// Auto-selects by the user's LOCAL time (device timezone): morning / day / afternoon /
// evening / night. Sun glyphs are amber; the moon is the app violet. Re-evaluates every
// 30s so it flips automatically when the period changes.
const _gSvg = (c, children, sw) => (
);
const GIconSun = (c) => _gSvg(c, , 1.7);
const GIconHorizonSun = (c) => _gSvg(c, {/* sunrise / sunset — half-sun dome on the horizon with a 5-ray fan (matches reference) */}
{/* rays: centre vertical + two symmetric pairs, each gapped above the dome */}
{/* half-sun dome */}
{/* horizon line */}
, 1.7);
const GIconAfternoon = (c) => _gSvg(c, {/* full sun + horizon line beneath */}
, 1.7);
const GIconMoon = (c) => _gSvg(c, {/* crescent + two sparkles */}
);
const GOLD = '#F3B765', GVIOLET = '#B85CFF';
const GREETINGS = {
morning: { color: GOLD, icon: GIconHorizonSun, t: 'greet_morning', s: 'greet_morning_s' },
day: { color: GOLD, icon: GIconSun, t: 'greet_day', s: 'greet_day_s' },
afternoon: { color: GOLD, icon: GIconAfternoon, t: 'greet_afternoon', s: 'greet_afternoon_s' },
evening: { color: GOLD, icon: GIconHorizonSun, t: 'greet_evening', s: 'greet_evening_s' },
night: { color: GVIOLET, icon: GIconMoon, t: 'greet_night', s: 'greet_night_s' },
};
function greetPeriod(h) {
if (h >= 5 && h < 12) return 'morning';
if (h >= 12 && h < 15) return 'day';
if (h >= 15 && h < 18) return 'afternoon';
if (h >= 18 && h < 22) return 'evening';
return 'night'; // 22:00–04:59
}
function GreetingPill({ th, t, dir, force }) {
const [period, setPeriod] = React.useState(() => force || greetPeriod(new Date().getHours()));
React.useEffect(() => {
if (force) return;
const tick = () => { const p = greetPeriod(new Date().getHours()); setPeriod((prev) => (prev === p ? prev : p)); };
const id = setInterval(tick, 30000);
return () => clearInterval(id);
}, [force]);
const g = GREETINGS[period] || GREETINGS.day;
const rtl = dir === 'rtl';
return (
{g.icon(g.color)}
{t(g.t)}
{t(g.s)}
);
}
function FocusScreen({ level, accent, anim, th, timer, soundActive, activeSoundKey, onStopSound, settings, totalHours = 0, nextHours = 0,
onStart, onPause, onResume, onStop, onSphereTap, onOpenNature, onOpenModes, reveal,
quotePool, quotesOn }) {
const { t, dir } = useI18n();
const activeSnd = activeSoundKey ? (SOUNDS.find((s) => s.key === activeSoundKey) || null) : null;
const { mmss, status, progress, rate, mode = 'standard',
pomoPhase = 'focus', pomoCycle = 1, pomoCycles = 4 } = timer;
const isIdle = status === 'idle';
const levelNum = Math.max(1, LEVELS.findIndex((l) => l.key === level.key) + 1); // rank number for the badge
const cycleLabel = t('cycle_of', { n: pomoCycle, total: pomoCycles });
const centerIcon = (status === 'running')
?
: ;
const centerAction = status === 'running' ? onPause : (status === 'paused' ? onResume : onStart);
// The session is "immersed" for BOTH running and paused, so pausing never reverts to
// the idle layout — controls, veil, quote and timer position all stay put.
const immersed = !isIdle;
// Minimal-neon palette (reference): violet → blue brand, light-gray ring outline.
const VIOLET = '#B85CFF', BLUE = '#58B6FF';
const neon = [VIOLET, BLUE];
// Progression section is OFF by default for a cleaner, less-gamified screen. When off,
// the header is just the greeting pill; when on, it also shows the "progress to next
// rank" label + bar. The greeting pill is always visible either way.
const showProgress = !!(settings && settings.showProgress);
return (
{/* deep-black base */}
{/* soft violet ambient glow behind the timer — idle only; fades out on start */}
{/* immersion veil — gently deepens the black during a session */}
{/* Header — a time-based greeting pill, then a clean "progress to next rank" label
above the bar. No rank badge / level number: simpler, less gamified. */}
{/* White-noise active indicator — discreet, tap to stop without opening the panel */}
{activeSnd && (
)}
{showProgress && (() => {
const nextLv = LEVELS[levelNum]; // next tier (levelNum is current rank number)
const c = level.glow;
const pct = nextLv ? Math.max(2, Math.min(100, Math.round((totalHours / nextLv.hours) * 100))) : 100;
return (
{nextLv ? (
{t('progress_to', { name: nextLv.name })} · {Math.floor(totalHours)} / {nextLv.hours} h
) : (
{t('max_rank')}
)}
);
})()}
{/* top spacer — keeps the circle vertically where it is (idle sits a touch lower) */}
{/* Timer ring — empty circle, soft gray outline; tap (idle) to choose a mode */}
{/* Volumetric fog — sized just inside the grey circle (R=41%≈289px) and held
in the sphere wrapper so it travels with the ring and stays clipped to it. */}
{mmss.m}:{mmss.s}
{(() => {
const running = status === 'running';
let sub = null;
if (!isIdle) {
// Mode-specific status label that also reflects running vs paused.
if (mode === 'pomodoro') {
if (pomoPhase === 'break') sub = t('pomo_break') + '\n' + cycleLabel;
else sub = running ? t('pomodoro_in_progress') : t('pomodoro_paused');
} else if (mode === 'countup') {
sub = running ? t('tracking_in_progress') : t('tracking_paused');
} else {
sub = running ? t('focus_in_progress') : t('focus_paused');
}
} else {
sub = t('touch_anywhere_to_edit');
}
// The sublabel is absolutely positioned a fixed distance below the ring's
// centre, so its text/height never nudges the digits — and it fades softly
// when the label changes (running ↔ paused).
return sub ? (
{sub}
) : null;
})()}
{/* lower band — the three controls, centered between the circle and the nav with
equal spacing. The in-session quote fades in just above them once running. */}
);
}
// ── Bottom sheet shell ────────────────────────────────────
// Tap the dimmed area (or the ✕) to dismiss — both play a smooth slide-down + fade before
// unmounting, so the picker never feels like it just vanishes (or traps the user).
function Sheet({ title, children, onClose, th }) {
const [closing, setClosing] = React.useState(false);
const close = () => { if (closing) return; setClosing(true); setTimeout(onClose, 250); };
return (
);
}
// ── NatureSheet — White Noise picker ──────────────────────
// A clean grid of the 12 environments. Tap to play (gapless loop); tap again to
// stop. All sounds are available, and the master volume rides above the grid.
function NatureSheet({ onClose, accent, th, activeSound, onSelect, volume, onVolume, isPremium, onLocked }) {
const { t } = useI18n();
const pct = Math.round(volume * 100);
// Decode every sound the moment the picker opens so each preview plays instantly.
React.useEffect(() => { try { whiteNoisePlayer.preloadAll(SOUNDS); } catch (e) {} }, []);
return (
{/* volume — labelled, with a live percentage for clear hierarchy */}
{/* once the time is chosen, start the session straight from here */}
);
}
Object.assign(window, { FocusScreen, DurationSheet, ModeSheet, Sheet, Wordmark, EmeoMark, RingParticles, SessionQuote });