// PULS3 shared primitives — icons, glass surfaces, coach avatar, chips, bubbles. // Imported by every screen file. Keep zero deps and stateless. const PULS3_COLORS = { deepTeal: '#1A3E3E', deepTeal2: '#0D2626', cyan: '#00D4FF', lavender: '#A78BDB', sleep: '#A78BDB', movement: '#FAC257', nutrition: '#F28059', stress: '#00D4FF', mood: '#D97B87', sage: '#8CDDB3', error: '#E8836B', trust: '#7BA8C9', menopause: '#9C5CC7', }; /* ============================================================ Glow background — the "dim room at 3am" atmosphere ============================================================ */ function GlowBG({ opacity = 0.22, tint = 'default' }) { // tint variants pick slightly different glow colors per pillar const variants = { default: { a: '#00D4FF', b: '#A78BDB' }, sleep: { a: '#A78BDB', b: '#7B6BBF' }, food: { a: '#F28059', b: '#A78BDB' }, move: { a: '#FAC257', b: '#00D4FF' }, mood: { a: '#D97B87', b: '#A78BDB' }, trust: { a: '#7BA8C9', b: '#A78BDB' }, celebration: { a: '#00D4FF', b: '#8CDDB3' }, }; const v = variants[tint] || variants.default; return ( <>
); } /* ============================================================ Icons — stroked Feather/Lucide style ============================================================ */ const Ic = ({ d, size = 20, stroke = 1.5, fill = 'none' }) => ( {d} ); const IcSleep = (p) => } />; const IcMove = (p) => } />; const IcFood = (p) => } />; const IcHeart = (p) => } />; const IcSpark = (p) => } />; const IcShield= (p) => } />; const IcSend = (p) => } />; const IcBolt = (p) => } />; const IcChat = (p) => } />; const IcCheck = (p) => } />; const IcLock = (p) => } />; const IcArrow = (p) => } />; const IcArrowUp = (p) => } />; const IcX = (p) => } />; const IcMoon = (p) => } />; const IcSun = (p) => } />; const IcCoffee= (p) => } />; const IcFlame = (p) => } />; const IcActivity = (p) => } />; const IcCalendar = (p) => } />; const IcLeaf = IcFood; const IcPause = (p) => } fill="currentColor" />; const IcMic = (p) => } />; /* ============================================================ Brand mark ============================================================ */ const BrandDot = ({ size = 10 }) => ( ); const CoachAvatar = ({ size = 36, listening = false }) => (
P {listening && (
)}
); // Specialist avatar — colored monogram const SpecialistAvatar = ({ specialist = 'sleep', size = 36 }) => { const map = { sleep: { color: '#A78BDB', initial: 'S', Icon: IcMoon }, nutrition: { color: '#F28059', initial: 'N', Icon: IcLeaf }, movement: { color: '#FAC257', initial: 'M', Icon: IcMove }, stress: { color: '#00D4FF', initial: 'R', Icon: IcHeart }, mood: { color: '#D97B87', initial: 'O', Icon: IcSpark }, menopause: { color: '#9C5CC7', initial: 'Mn', Icon: IcSpark }, }; const s = map[specialist] || map.sleep; return (
); }; /* ============================================================ Chat & chips ============================================================ */ const AssistantBubble = ({ children, subtle = false }) => (
{children}
); const UserBubble = ({ children }) => (
{children}
); const ChipPanel = ({ children, tint = 'lavender' }) => { const bg = tint === 'lavender' ? { bg: 'rgba(155,138,212,0.12)', br: 'rgba(185,166,232,0.26)' } : { bg: 'rgba(255,255,255,0.04)', br: 'rgba(255,255,255,0.10)' }; return (
{children}
); }; const Chip = ({ children, selected, onClick, size = 'md' }) => ( ); /* ============================================================ Cards & surfaces ============================================================ */ const GlassCard = ({ children, style = {}, wash = false, glowColor = null }) => (
{wash && (
)} {glowColor && (
)}
{children}
); /* ============================================================ Tab bar ============================================================ */ const TabBar = ({ active = 'Today' }) => { const items = [ { name: 'Today', Icon: IcSpark }, { name: 'Chat', Icon: IcChat }, { name: 'Trends',Icon: IcActivity }, { name: 'You', Icon: IcShield }, ]; return (
{items.map(it => { const isActive = it.name === active; return (
{it.name}
); })}
); }; /* ============================================================ Common screen scaffold ============================================================ */ const ScreenFrame = ({ children, tint = 'default' }) => (
{children}
); /* ============================================================ Eyebrow / section labels ============================================================ */ const Eyebrow = ({ children, color = 'rgba(255,255,255,0.5)' }) => (
{children}
); /* ============================================================ Primary CTA — gradient ============================================================ */ const PrimaryCTA = ({ children, onClick, disabled, Icon }) => ( ); const GhostCTA = ({ children, onClick }) => ( ); /* ============================================================ Status bar spacer (above content inside frame) ============================================================ */ const StatusBarSpacer = () =>
; Object.assign(window, { PULS3_COLORS, GlowBG, Ic, IcSleep, IcMove, IcFood, IcHeart, IcSpark, IcShield, IcSend, IcBolt, IcChat, IcCheck, IcLock, IcArrow, IcArrowUp, IcX, IcMoon, IcSun, IcCoffee, IcFlame, IcActivity, IcCalendar, IcLeaf, IcPause, IcMic, BrandDot, CoachAvatar, SpecialistAvatar, AssistantBubble, UserBubble, ChipPanel, Chip, GlassCard, TabBar, ScreenFrame, Eyebrow, PrimaryCTA, GhostCTA, StatusBarSpacer, });