/* Shared Nutri components — calorie ring, macro bars, meal card, bottom nav, chip */ const nutriStyles = { card: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 22, boxShadow: 'var(--shadow-sm)', }, }; // ───────────────────────────────────────────────────────────── // Circular calorie ring — main hero // ───────────────────────────────────────────────────────────── function CalorieRing({ value, goal, size = 120, stroke = 12, label = 'kcal' }) { const pct = Math.min(1, value / goal); const r = (size - stroke) / 2; const C = 2 * Math.PI * r; // Start at top, go clockwise — leave a small gap at bottom-right like reference (arc not full) const gap = 0.18; // 18% gap → arc fills 82% of circle const arcLen = C * (1 - gap); const dash = arcLen * pct; return (
); } function FlameIcon({ size = 20, color = 'currentColor' }) { return ( ); } // ───────────────────────────────────────────────────────────── // Linear macro bar — used inside calorie card row // ───────────────────────────────────────────────────────────── function MacroBar({ value, goal, color, height = 6 }) { const pct = Math.max(0, Math.min(1, value / goal)); return (
); } // Mini ring (used for macros in some references) function MacroRing({ value, goal, color, size = 44, stroke = 5 }) { const pct = Math.min(1, value / goal); const r = (size - stroke) / 2; const C = 2 * Math.PI * r; return ( ); } // ───────────────────────────────────────────────────────────── // Calorie hero card — the centerpiece (matches ref 2 + 3) // ───────────────────────────────────────────────────────────── function CalorieHeroCard({ totals, goals, macroStyle = 'bars' }) { const left = Math.max(0, goals.calories - totals.calories); const pct = Math.min(1, totals.calories / goals.calories); const macros = [ { key: 'protein', label: 'Protein', val: totals.protein_g, goal: goals.protein_g, color: 'var(--c-protein)' }, { key: 'carbs', label: 'Carbs', val: totals.carbs_g, goal: goals.carbs_g, color: 'var(--c-carbs)' }, { key: 'fat', label: 'Fat', val: totals.fat_g, goal: goals.fat_g, color: 'var(--c-fat)' }, ]; return (
{/* Top row — big number left, ring right */}
{left.toLocaleString()}
Calories left
{/* Divider */}
{/* Macros row */} {macroStyle === 'bars' ? (
{macros.map(m => (
{Math.max(0, m.goal - m.val)}g
{m.label} left
))}
) : (
{macros.map(m => (
{m.val}g
{m.label}
))}
)}
); } // ───────────────────────────────────────────────────────────── // Day strip — 7 days, "today" highlighted (like ref 2 + 3) // ───────────────────────────────────────────────────────────── function DayStrip({ selected, onSelect, days = 7 }) { // build last `days` days ending today (today at right) const today = new Date(); const list = []; for (let i = days - 1; i >= 0; i--) { const d = new Date(today); d.setDate(today.getDate() - i); list.push({ iso: isoOf(d), day: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()], num: d.getDate(), isToday: i === 0, }); } return (
{list.map(d => { const active = d.iso === selected; return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Meal card (recently logged) — image/thumb + name + macros // ───────────────────────────────────────────────────────────── function MealCard({ entry, compact = false, onClick }) { const mealColor = { breakfast: '#F5D77A', lunch: '#F0A67A', dinner: '#A99CE0', snack: '#9ED1C0', }[entry.meal] || '#D0CDB8'; return ( ); } function FoodThumb({ emoji, tint, size = 56 }) { return (
{emoji}
); } function MacroPill({ icon, val, color }) { return (
{icon} {val}g
); } function ChevronRight({ size = 16 }) { return ( ); } // ───────────────────────────────────────────────────────────── // Bottom nav // ───────────────────────────────────────────────────────────── function BottomNav({ active, onChange, onAdd }) { const items = [ { id: 'home', label: 'Today', icon: HomeIcon }, { id: 'calendar', label: 'Calendar', icon: CalendarIcon }, { id: 'add', label: 'Add', icon: PlusIcon, isAdd: true }, { id: 'foods', label: 'Foods', icon: GridIcon }, { id: 'progress', label: 'Progress', icon: ChartIcon }, ]; return (
{items.map(it => { const Active = active === it.id; if (it.isAdd) { return ( ); } return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Icons (line, 24 / 1.8) // ───────────────────────────────────────────────────────────── function Icon({ children, size = 20 }) { return {children}; } const HomeIcon = ({size}) => ; const CalendarIcon = ({size}) => ; const PlusIcon = ({size}) => ; const GridIcon = ({size}) => ; const ChartIcon = ({size}) => ; const SearchIcon = ({size}) => ; const BackIcon = ({size}) => ; const CameraIcon = ({size}) => ; const BarcodeIcon = ({size}) => ; const EditIcon = ({size}) => ; const SettingsIcon = ({size}) => ; const CheckIcon = ({size}) => ; const XIcon = ({size}) => ; const TrendUpIcon = ({size}) => ; const FireIcon = FlameIcon; Object.assign(window, { nutriStyles, CalorieRing, MacroBar, MacroRing, CalorieHeroCard, DayStrip, MealCard, FoodThumb, MacroPill, ChevronRight, BottomNav, HomeIcon, CalendarIcon, PlusIcon, GridIcon, ChartIcon, SearchIcon, BackIcon, CameraIcon, BarcodeIcon, EditIcon, SettingsIcon, CheckIcon, XIcon, TrendUpIcon, FlameIcon, FireIcon, });