// kataleya-screens.jsx — The five screens. Pure presentation, no routing. // ── BRIDGE — arrival ritual ───────────────────────────────────────────── function BridgeScreen({ phase, daysSober, onEnter, gapFraction, ringSize }) { const theme = window.PHASE_THEME[phase]; const rgba = window.rgba; const [phraseKey, setPhraseKey] = React.useState(0); const phrasePools = { dawn: ['the garden wakes.\nso do you.', 'morning again.\nyou made it here.'], day: ['you are present.\nthat is enough.', 'the work continues.\nso do you.'], goldenHour: ['the threshold.\nhold.', 'this feeling has a lifespan.\noutlast it.'], night: ['the garden is open.\neven now.', '2am always ends.', 'rest is not surrender.\nit is preparation.'], }; const phrases = phrasePools[phase]; const phrase = phrases[phraseKey % phrases.length]; React.useEffect(() => { setPhraseKey(k => k + 1); }, [phase]); return (
◈ {theme.ouro}
{/* Ring composition */}
{/* hollow */}
{/* butterfly */}
{/* system status */}
sys · nominal · {theme.ouro}
{/* garden phrase */}
{/* enter button */} {/* wordmark */}
kataleya
); } // ── ROOM — the orb owns the canvas ────────────────────────────────────── function RoomScreen({ phase, daysSober, userName, onTapOrb, onSwipeLeft, onSwipeUp, onLongPress, gapFraction, ringSize, bpm, transmutationScars }) { const theme = window.PHASE_THEME[phase]; const rgba = window.rgba; const [pressed, setPressed] = React.useState(false); const [dragStart, setDragStart] = React.useState(null); const longPressRef = React.useRef(null); const presenceByState = { dawn: 'the garden wakes. so do you.', day: "i'm here.", goldenHour: 'the threshold. hold.', night: "i don't sleep.", }; const greetByPhase = { dawn: 'good morning', day: 'good afternoon', goldenHour: 'good evening', night: "i'm here." }; const handleDown = (e) => { const t = e.touches ? e.touches[0] : e; setDragStart({ x: t.clientX, y: t.clientY, at: Date.now() }); setPressed(true); longPressRef.current = setTimeout(() => { onLongPress && onLongPress(); longPressRef.current = null; }, 900); }; const handleUp = (e) => { setPressed(false); if (longPressRef.current) { clearTimeout(longPressRef.current); longPressRef.current = null; if (dragStart) { const t = e.changedTouches ? e.changedTouches[0] : e; const dx = t.clientX - dragStart.x; const dy = t.clientY - dragStart.y; const dur = Date.now() - dragStart.at; if (dy < -60 && Math.abs(dy) > Math.abs(dx)) onSwipeUp && onSwipeUp(); else if (dx < -60 && Math.abs(dx) > Math.abs(dy)) onSwipeLeft && onSwipeLeft(); else if (Math.abs(dx) < 10 && Math.abs(dy) < 10 && dur < 500) onTapOrb && onTapOrb(); } } setDragStart(null); }; return (
{ setPressed(false); if (longPressRef.current) { clearTimeout(longPressRef.current); longPressRef.current = null; } }} onTouchStart={handleDown} onTouchEnd={handleUp} style={{ position: 'absolute', inset: 0, background: '#050508', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', cursor: 'pointer', userSelect: 'none', }}> {/* phase whisper top-left */}
{theme.displayName}
{/* composition */}
{/* presence */}
{greetByPhase[phase]}{userName ? `, ${userName.toLowerCase()}` : ''}
{presenceByState[phase]}
{/* day count */} {daysSober > 0 && (
{daysSober}
{daysSober === 1 ? 'day' : 'days'}
)} {/* gesture hints */}
{['swipe up · memory', 'swipe left · talk', 'hold · sanctuary'].map(h => (
{h}
))}
); } // ── CONVERSATION — CBT as dialogue, one question per screen ──────────── function ConversationScreen({ phase, onBack }) { const theme = window.PHASE_THEME[phase]; const rgba = window.rgba; const [step, setStep] = React.useState(0); const [answers, setAnswers] = React.useState({}); const [textInput, setTextInput] = React.useState(''); // Inference: phase=night + high restlessness → mood_check slow gentle const script = [ { type: 'intro', text: phase === 'night' ? "hey.\nit's late. you're here.\nthat's enough." : "okay. one thing at a time." }, { type: 'text', prompt: "what's it saying?", placeholder: 'let it out…', key: 'thought' }, { type: 'scale', prompt: 'how loud is it?', min: 1, max: 10, key: 'intensity' }, { type: 'select', prompt: 'and the weather inside?', options: ['storm', 'fog', 'still water', 'first light'], key: 'mood' }, { type: 'close', text: "i've got this. it's safer here.\nthe garden remembers." }, ]; const s = script[step]; const answer = (val) => { setAnswers(a => ({ ...a, [s.key]: val })); setTextInput(''); setStep(i => Math.min(i + 1, script.length - 1)); }; return (
{/* header */}
{step + 1} / {script.length}
{/* progress mercury */}
{/* question/content — centered */}
{(s.type === 'intro' || s.type === 'close') && (
)} {s.type === 'text' && ( <>