{ring &&

}

{state === 'listening' && }

); }; // ============================================================================ // CHIPS / QUICK REPLIES // ============================================================================ const HChip = ({ children, onClick, icon, active = false, tone = 'soft', style }) => { const bg = active ? 'var(--t-pill)' : tone === 'cream' ? 'var(--t-cream)' : tone === 'ghost' ? 'transparent' : 'var(--t-ink-04)'; const fg = active ? 'var(--t-pill-fg)' : 'var(--t-fg-1)'; return ( ); }; const HQuickReplies = ({ items = [], onPick }) =>

{items.map((item, i) => onPick && onPick(item)}>{item} )}

; // ============================================================================ // FOCUS RING — the V2 hero viz. Circular progress with optional segments // ============================================================================ const HFocusRing = ({ score = 73, size = 220, stroke = 18, segments, animate = true }) => { const r = size / 2 - stroke - 6; const c = 2 * Math.PI * r; const arc = Math.max(0, Math.min(100, score)) / 100; const segR = r + stroke + 6; const segCirc = 2 * Math.PI * segR; const uid = React.useId().replace(/:/g, ''); const [drawn, setDrawn] = React.useState(!animate); React.useEffect(() => { if (!animate) return; const id = requestAnimationFrame(() => setDrawn(true)); return () => cancelAnimationFrame(id); }, [animate]); const target = c * arc; return ( ); }; // Number count-up for headline stats const CountUp = ({ to = 0, from = 0, duration = 900, decimals = 0, prefix = '', suffix = '' }) => { const [v, setV] = React.useState(from); React.useEffect(() => { let raf, start; const step = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setV(from + (to - from) * eased); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [to, from, duration]); return <>{prefix}{v.toFixed(decimals)}{suffix}; }; // ============================================================================ // SPARKLINE — inline mini chart // ============================================================================ const HSparkline = ({ data = [], width = 120, height = 32, color = 'var(--brand-orange-vibey)', fill = true }) => { if (data.length < 2) return null; const min = Math.min(...data),max = Math.max(...data); const range = max - min || 1; const pts = data.map((v, i) => { const x = i / (data.length - 1) * width; const y = height - 4 - (v - min) / range * (height - 8); return [x, y]; }); const path = pts.map(([x, y], i) => i === 0 ? `M${x} ${y}` : `L${x} ${y}`).join(' '); const area = path + ` L${width} ${height} L0 ${height} Z`; return ( ); }; // ============================================================================ // BAR CHART — mini bars (for chat data cards) // ============================================================================ const HMiniBars = ({ data = [], width = 220, height = 80, color = 'var(--brand-orange-vibey)', highlightLast = true }) => { const max = Math.max(...data.map((d) => d.value || d), 1); const barW = (width - (data.length - 1) * 6) / data.length; return ( ); }; // ============================================================================ // STATUS DOT / BADGE // ============================================================================ const HStatus = ({ status = 'normal' }) => { const map = { normal: { c: 'var(--success)', t: 'Normal' }, fair: { c: 'var(--warning)', t: 'Fair' }, attention: { c: 'var(--error)', t: 'Needs attention' } }; const s = map[status] || map.normal; return ( {s.t} ); }; // ============================================================================ // FOCUS ROW — V2: icon tile + content + sparkline + trend // ============================================================================ const HFocusRow = ({ domain, title, value, unit, status, spark, trend, onClick }) => { const colorMap = { sleep: { c: 'var(--focus-sleep)', tint: 'var(--focus-sleep-tint)', icon: 'moon' }, nutrition: { c: 'var(--focus-nutrition)', tint: 'var(--focus-nutrition-tint)', icon: 'plate' }, fitness: { c: 'var(--focus-fitness)', tint: 'var(--focus-fitness-tint)', icon: 'dumbbell' }, mental: { c: 'var(--focus-mental)', tint: 'var(--focus-mental-tint)', icon: 'brain' }, heart: { c: 'var(--focus-heart)', tint: 'var(--focus-heart-tint)', icon: 'heart' } }; const d = colorMap[domain] || colorMap.heart; return (

{title}

{value} {unit && {unit}} {trend !== undefined && 0 ? 'var(--success)' : trend < 0 ? 'var(--error)' : 'var(--t-fg-3)', fontWeight: 500 }}> 0 ? 'arrowU' : trend < 0 ? 'arrowD' : 'minus'} size={11} stroke={2} /> {Math.abs(trend)}% }

{spark ? : null}

{status ?

: null} ); }; // ============================================================================ // CHAT BUBBLE — supports rich body via children // ============================================================================ const HChatBubble = ({ from = 'anna', children, time, withAvatar = true, annaState = 'idle', delay = 0 }) => { const isAnna = from === 'anna'; return (

{isAnna && withAvatar ? : isAnna ?

: null}

{children} {time ?

{time}

: null}

); }; // ============================================================================ // RICH ACTION CARD — numbered actions (Anna's signature) // ============================================================================ const HNumberedActions = ({ items = [] }) =>

{items.map((it, i) =>

{i + 1}

{it.title}

{it.body}

)}

; // ============================================================================ // SOURCE CHIPS — what data Anna used // ============================================================================ const HSourceChips = ({ items = [] }) =>

{items.map((s, i) => {s.label} )}

; // ============================================================================ // DATA CARD IN-BUBBLE — small metric card for chat replies // ============================================================================ const HBubbleDataCard = ({ title, value, unit, sub, chart, color = 'var(--brand-orange-vibey)' }) =>

{title}

{value} {unit && {unit}}

{sub &&

{sub}

}

{chart}

; // ============================================================================ // TYPING INDICATOR // ============================================================================ const HTyping = () =>

{[0, 1, 2].map((i) => )}

; // ============================================================================ // HABIT CHECK // ============================================================================ const HHabitCheck = ({ done = false, onClick }) => ; // ============================================================================ // SETTINGS ROW // ============================================================================ const HSettingsRow = ({ icon, title, sub, value, onClick, danger, toggle }) => ; const Toggle = ({ on, onChange }) => ; // ============================================================================ // SCREEN — gives screen a scroll container + safe areas // ============================================================================ const HScreen = ({ children, bg, pad = '0 16px 140px', label }) =>

{children}

; // ============================================================================ // ALIGNED COMPONENTS — mirror the actual repo (`healify/src/components/...`): // • HUserBanner — dark pill greeting + score badge (UserBanner) // • HSyncBanner — Apple Health sync progress (SyncProgressBanner) // • HFocusRowAligned — icon + title + status pill + dot + chevron (HFocusRow) // • HRecCard — recommendation card with metric, status, last detected // • HToolTile — 2x2 AI tools grid tile (HToolTile) // ============================================================================ // Person/body silhouette icon for the Biometrics focus area. HIcons.body = "M12 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-3 8h6c1 0 2 .9 2 2 0 1.5-1.5 3-4 3-1 0-1.5 1.5-1.5 3v1h-3v-3.5c-2.5 0-3.5-1.5-3.5-3 0-1.1.9-2 2-2Z"; HIcons.refresh = "M4 12a8 8 0 0 1 14-5l2-2v6h-6l2.5-2.5A6 6 0 1 0 18 12"; // Domain meta — name, color token, icon. Matches the repo's focus types. const FOCUS_META = { sleep: { title: 'Sleep', color: 'var(--focus-sleep)', tint: 'var(--focus-sleep-tint)', icon: 'moon' }, fitness: { title: 'Fitness', color: 'var(--focus-fitness)', tint: 'var(--focus-fitness-tint)', icon: 'dumbbell' }, vitals: { title: 'Vitals', color: 'var(--focus-heart)', tint: 'var(--focus-heart-tint)', icon: 'heart' }, mind: { title: 'Mind', color: 'var(--focus-mental)', tint: 'var(--focus-mental-tint)', icon: 'brain' }, biometrics: { title: 'Biometrics', color: 'var(--brand-orange-vibey)', tint: 'rgba(255,105,66,0.12)', icon: 'body' }, nutrition: { title: 'Nutrition', color: 'var(--focus-nutrition)', tint: 'var(--focus-nutrition-tint)', icon: 'plate' }, }; // Status helpers — match repo's status semantics (normal/fair/needs_attention/pending). const STATUS_META = { normal: { label: 'Normal', dot: 'var(--success)' }, on_track: { label: 'On track', dot: 'var(--success)' }, fair: { label: 'Fair', dot: 'var(--warning-soft, #FF8B6D)' }, attention: { label: 'Needs Attention', dot: 'var(--error)' }, bad: { label: 'Needs Attention', dot: 'var(--error)' }, pending: { label: 'Calculating…', dot: 'var(--t-fg-3)' }, }; // ──────────────────────────────────────────────────────────────────────────── // HUserBanner — dark 40-radius pill at top of Home. // Avatar + "Good morning, {Name}" + refresh + Score badge. Matches the // UserBanner / HGreetingHeader pattern observed in the live app. // ──────────────────────────────────────────────────────────────────────────── const HUserBanner = ({ name = '', greeting, score, syncing = false, onMenuPress, onScorePress, onRefresh }) => { const greet = greeting || (() => { const h = new Date().getHours(); if (h < 12) return 'Good morning'; if (h < 18) return 'Good afternoon'; return 'Good evening'; })(); const initial = (name || 'U').trim().charAt(0).toUpperCase(); return (

{/* Avatar circle — solid orange with first initial */} {/* Greeting block */}

{greet},

{name || 'there'}

{/* Refresh icon */} {/* Score badge — translucent pill with small label + big number */}

); }; // ──────────────────────────────────────────────────────────────────────────── // HSyncBanner — full-width white card with progress bar + label. // "Syncing 1,440 of 1,440 data points…" — mirrors SyncProgressBanner. // ──────────────────────────────────────────────────────────────────────────── const HSyncBanner = ({ done = 0, total = 0, label, hidden = false }) => { if (hidden) return null; const pct = total > 0 ? Math.max(0, Math.min(1, done / total)) : 0; const text = label || `Syncing ${done.toLocaleString()} of ${total.toLocaleString()} data points…`; return (

{text}

); }; // ──────────────────────────────────────────────────────────────────────────── // HFocusRowAligned — the canonical focus row from the repo. // 44px icon tile (tint @14%, icon in solid domain color) + title + // status text + status dot + chevron. Domain-driven, no metric/sparkline. // `ctaPill` swaps the status text for an outlined orange pill (e.g. "Log // Your First Meal" empty state for Nutrition). // ──────────────────────────────────────────────────────────────────────────── const HFocusRowAligned = ({ domain, title, status = 'normal', ctaPill, opened = false, onClick }) => { const meta = FOCUS_META[domain] || FOCUS_META.nutrition; const s = STATUS_META[status] || STATUS_META.normal; return (

{title || meta.title}

{ctaPill ? ( {ctaPill} ) : ( {s.label} )}

); }; // ──────────────────────────────────────────────────────────────────────────── // HRecCard — recommendation card. Used under "RECOMMENDATIONS". // White card, 12px icon tile + metric name + status + last detected. // ──────────────────────────────────────────────────────────────────────────── const HRecCard = ({ metric, status = 'fair', domain = 'vitals', detected, onClick }) => { const meta = FOCUS_META[domain] || FOCUS_META.vitals; const s = STATUS_META[status] || STATUS_META.fair; return (

{metric}

{detected ? (

{detected}

) : null}

{s.label}

); }; // ──────────────────────────────────────────────────────────────────────────── // HToolTile — AI Tools 2x2 grid tile. // White card, 40px tinted icon tile + title + subtitle. Matches the repo's // HToolTile primitive (src/components/ui/h-ds/h-tool-tile.tsx). // ──────────────────────────────────────────────────────────────────────────── const HToolTile = ({ title, subtitle, domain = 'nutrition', icon, onClick }) => { const meta = FOCUS_META[domain] || FOCUS_META.nutrition; const ico = icon || meta.icon; return ( ); }; // ──────────────────────────────────────────────────────────────────────────── // HMedicalDisclaimer — small footer disclaimer matching the repo. // ──────────────────────────────────────────────────────────────────────────── const HMedicalDisclaimer = () => (

For educational purposes only. Not medical advice. Sources include peer-reviewed medical literature and clinical guidelines.

); // ============================================================================ // Export to window so other Babel files can use these // ============================================================================ Object.assign(window, { HCard, HSectionLabel, HPrimaryButton, HIconButton, HBackButton, HTopBar, HTabBar, HealifyHeart, HealifyWordmark, HAnnaAvatar, AnnaMonogram, HChip, HQuickReplies, HFocusRing, HSparkline, HMiniBars, HStatus, HFocusRow, HUserBanner, HSyncBanner, HFocusRowAligned, HRecCard, HToolTile, HMedicalDisclaimer, FOCUS_META, STATUS_META, HChatBubble, HNumberedActions, HSourceChips, HBubbleDataCard, HTyping, HHabitCheck, HSettingsRow, Toggle, HScreen, Glyph, Icon, HIcons, CountUp });