/* global React, AuroraMark, CDial, COrb, CHoldButton, CSeg, CGlass, AURORA_TOKENS */ // UNIFIED — a single, fully-navigable Aurora phone. // Footer tabs route (Wake · Memory · Me). Rows open detail screens. // Any list with 3+ options is a tap-to-open bottom sheet, not a tap-to-cycle. const { useState, useEffect, useRef, useContext } = React; const U = AURORA_TOKENS; const { C_BG, C_FIRE, C_MORN, C_CORAL, C_INDIGO, C_GREEN, C_GOLD, C_TEXT, C_DIM, C_MUTED, C_CARD } = U; // Bottom-sheet opener is provided by the shell via context. const SheetCtx = React.createContext(() => {}); // ─── screen wrapper (clears status bar / notch) ─── const UScreen = ({ bg, color, children, padBottom = 92 }) => (
{children}
); const chevR = (c = C_DIM) => ; const fmt = (t) => `${String(t.h).padStart(2,'0')}:${String(t.m).padStart(2,'0')}`; const sleepGoal = (bed, alarm) => { let mins = (alarm.h*60 + alarm.m) - (bed.h*60 + bed.m); if (mins <= 0) mins += 24*60; return `${Math.floor(mins/60)} h ${mins%60} m`; }; // ─── interactive footer tab bar ─── const UTabBar = ({ active, onChange, tone = 'dark' }) => { // Warm (apricot) screens: NO background band at all — the gradient must flow // uninterrupted to the very bottom, exactly like Plan day. A darkening scrim here // collided with the gradient (lightest at the bottom) and produced a luminance // ridge that read as a hard cut. Legibility comes from drop-shadows on the glyphs. const warm = tone === 'warm'; const inactive = warm ? 'rgba(60,30,18,0.62)' : 'rgba(255,255,255,0.4)'; // On the warm Memory footer the coral active state is hard to read against the // apricot grade — use white for the active tab there instead. const activeColor = warm ? '#fff' : C_CORAL; const glyphShadow = warm ? 'drop-shadow(0 1px 2px rgba(40,20,10,0.35))' : 'none'; const labelShadow = warm ? '0 1px 2px rgba(40,20,10,0.35)' : 'none'; const tabs = [ { id: 'wake', label: 'Wake', icon: (c) => ( )}, { id: 'memory', label: 'Memory', icon: (c) => ( )}, { id: 'me', label: 'Me', icon: (c) => ( )}, ]; return (
{tabs.map(t => { const on = t.id === active; const c = on ? activeColor : inactive; return ( ); })}
); }; // ─── generic row (tap → onClick); supports toggle + value + chevron ─── const URow = ({ icon, label, value, onClick, chevron, toggle, on, sub }) => { const [pressed, setPressed] = useState(false); const clickable = !!onClick || toggle; return (
clickable && setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)} onTouchStart={() => clickable && setPressed(true)} onTouchEnd={() => setPressed(false)} style={{ background: pressed ? 'rgba(255,255,255,0.09)' : C_CARD, borderRadius: 14, padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 12, border: '1px solid rgba(255,255,255,0.05)', cursor: clickable ? 'pointer' : 'default', transition: 'background 0.12s, transform 0.08s', transform: pressed ? 'scale(0.985)' : 'scale(1)', userSelect: 'none' }}> {icon}
{label}
{sub &&
{sub}
}
{value != null && {value}} {chevron && chevR()} {toggle && (
)}
); }; // ─── dropdown row → opens a bottom sheet of options ─── const UDropdownRow = ({ icon, label, value, options, onChange }) => { const openSheet = useContext(SheetCtx); return openSheet({ title: label, options, value, onChange })}/>; }; // ─── time scroller — original 3-number visual with drag-to-spin interaction ─── // DEV NOTE FOR IMPLEMENTATION: The final native build should use a drum-roller / // slot-machine picker (iOS UIPickerView / Android NumberPicker). Numbers scroll // continuously as the user swipes, with momentum and snap-to-value. Interaction // contract: swipe UP → value increases, swipe DOWN → value decreases. The tap // targets above/below the current value remain as a secondary affordance. function ScrollCol({ value, count, onChange, format }) { const STEP_PX = 34; // pixels of drag to advance one step const dragRef = useRef(null); const valueRef = useRef(value); const onChangeRef = useRef(onChange); const [isDragging, setIsDragging] = useState(false); useEffect(() => { valueRef.current = value; }, [value]); useEffect(() => { onChangeRef.current = onChange; }, [onChange]); useEffect(() => { if (!isDragging) return; const onMove = (e) => { if (!dragRef.current) return; const y = e.touches ? e.touches[0].clientY : e.clientY; const { startY, startValue } = dragRef.current; const dy = startY - y; // positive = dragged up = value increases const steps = Math.round(dy / STEP_PX); const newVal = ((startValue + steps) % count + count) % count; if (newVal !== valueRef.current) onChangeRef.current(newVal); }; const onUp = () => { dragRef.current = null; setIsDragging(false); }; window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); return () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); }; }, [isDragging, count]); const prev = format(((value - 1) % count + count) % count); const curr = format(value); const next = format(((value + 1) % count + count) % count); return (
{ e.preventDefault(); dragRef.current = { startY: e.clientY, startValue: value }; setIsDragging(true); }} > onChange(((value - 1) % count + count) % count)} style={{ fontSize: 28, opacity: 0.25, cursor: 'pointer', userSelect: 'none', padding: '2px 8px', fontVariantNumeric: 'tabular-nums' }}>{prev}
{curr}
onChange((value + 1) % count)} style={{ fontSize: 28, opacity: 0.25, cursor: 'pointer', userSelect: 'none', padding: '2px 8px', fontVariantNumeric: 'tabular-nums' }}>{next}
); } const UTimeScroller = ({ hour, min, setHour, setMin }) => (
String(v).padStart(2, '0')}/> : String(v).padStart(2, '0')}/>
); // ─── edit-screen header: back + Bedtime/Alarm tabs that actually switch ─── const UEditHeader = ({ active, onBack, onSwitch }) => (
{['Bedtime','Alarm'].map(t => { const on = t === active; return ( ); })}
); const USleepGoal = ({ bed, alarm }) => (
Your sleep goal is {sleepGoal(bed, alarm)}
Based on your bedtime and alarm time
); // ─── Shared bottom-sheet host: provides openSheet via context + renders the overlay. // Wrap a phone's screen(s) in this (inside IOSDevice). Used by BOTH the Unified // router and each Combined-canvas frame, so dropdowns work identically everywhere. const SheetHost = ({ children }) => { const [sheet, setSheet] = useState(null); // { title, options, value, onChange } return ( setSheet(cfg)}>
{children} {sheet && (
setSheet(null)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)', animation: 'sheetScrim 0.2s ease' }}/>
{sheet.title}
{sheet.options.map(opt => { const on = opt === sheet.value; return ( ); })}
)}
); }; Object.assign(window, { SheetCtx, SheetHost, UScreen, UTabBar, URow, UDropdownRow, UTimeScroller, UEditHeader, USleepGoal, chevR, fmt, sleepGoal, U_TOK: U, });