); } function Sticker({ tint = V2.stickerA, rotate = 0, tape, tapeColor, label, kicker, children, style = {} }) { // rotation removed — keep the prop for backwards-compat but ignore it. return (

{tape && }

{(label || kicker) && (

{label &&

{label}

} {kicker &&

{kicker}

}

)} {children}

); } function StickerTag({ emoji, label, tint = V2.stickerB, rotate = 0, size = 'md' }) { const pad = size === 'sm' ? '6px 10px' : '8px 14px'; const fs = size === 'sm' ? 15 : 17; return (

{emoji} {label}

); } // Category → harmonized OKLCH-ish swatch tokens. One color per food // group; `tint` is the unselected pastel, `solid` is the selected fill. const CAT_TONE = { 'Grains': { tint: '#f3e6c2', solid: '#c89a3a', ink: '#3a2a08' }, 'Legumes': { tint: '#e3ddc1', solid: '#7a6a3a', ink: '#2a2410' }, 'Soy': { tint: '#e6efd7', solid: '#6b8a4a', ink: '#1f2c10' }, 'Wheat Gluten': { tint: '#ead6c0', solid: '#a06a3a', ink: '#3a210c' }, 'Protein Powder': { tint: '#e0e8ee', solid: '#4a6a82', ink: '#10202a' }, 'Nuts/Seeds': { tint: '#f0d8c8', solid: '#b06a4a', ink: '#3a1808' }, 'Veg': { tint: '#d8e6d4', solid: '#5a8a5e', ink: '#0e2410' }, 'Fruit': { tint: '#f4d6dc', solid: '#b85068', ink: '#3a0a18' }, 'Fixed': { tint: '#ece4d0', solid: '#8a7a4a', ink: '#2a2008' }, 'Supplement': { tint: '#e6dde6', solid: '#7a4a5a', ink: '#2a1018' }, }; function FoodChip({ food, grams, selected, onClick, variant = 'default' }) { const isFixed = food.scalable === false; const isSupp = food.supplement === true; const key = isSupp ? 'Supplement' : isFixed ? 'Fixed' : (CAT_TONE[food.cat] ? food.cat : 'Grains'); const tone = CAT_TONE[key]; const bg = selected ? tone.solid : tone.tint; const fg = selected ? '#fff' : tone.ink; return ( ); } // AminoBars // coverage — overall %-of-target per AA (food + supplement) // foodTotals — optional mg-from-food per AA; when supplied, the bar // splits into a food portion and a supplement-filled // portion (plum) so the user sees how 100% got hit. function AminoBars({ coverage, limiting, targets, totals, foodTotals, compact }) { const maxScale = 2.2; return (

{EAA.map(a => { const pct = coverage[a.key]; const isLim = a.key === limiting.key; const w = Math.min(pct, maxScale); const over = pct >= 1; // Supplement-filled fraction of the bar (plum segment). const foodPct = foodTotals && targets[a.key] > 0 ? Math.min(foodTotals[a.key] / targets[a.key], w) : w; const suppPct = Math.max(0, w - foodPct); return (

{a.key}

{suppPct > 0.005 && (

)}

{Math.round(pct * 100)}%

); })}

); } function HandNote({ children, style = {}, rotate = -2, color }) { return (

{children}

); } function SectionHead({ num, title, children }) { return (

§ {num}

{title}

{children &&

{children}

}

); } // ───────────────────────────────────────────────────────────── // InfoTip — hover/click tooltip. Use inline or around the ⓘ icon. // Accessible: keyboard-focusable, dismiss on Esc. // ───────────────────────────────────────────────────────────── function InfoTip({ tip, children, placement = 'top' }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onKey = e => { if (e.key === 'Escape') setOpen(false); }; const onClickAway = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; window.addEventListener('keydown', onKey); window.addEventListener('mousedown', onClickAway); return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('mousedown', onClickAway); }; }, [open]); const pos = placement === 'right' ? { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 8 } : placement === 'bottom' ? { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 8 } : { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 8 }; return ( setOpen(true)} onMouseLeave={() => setOpen(false)} onFocus={() => setOpen(true)} onBlur={() => setOpen(false)} tabIndex={0} > {children} {open && ( )} ); } // Small "i" icon with a tooltip — use after labels. function InfoDot({ tip, placement = 'top' }) { return ( i ); } Object.assign(window, { V2, GridBg, Tape, Sticker, StickerTag, FoodChip, CAT_TONE, AminoBars, HandNote, SectionHead, InfoTip, InfoDot, });