/* shared.jsx โ design tokens, icons, mascot, bottom nav, phone frame */
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;
/* ------------------------- Icons (outline, 24px) ------------------------- */
const Icon = ({ children, size = 24, stroke = "currentColor", fill = "none", style, ...rest }) => (
);
const IconChevronLeft = (p) => ;
const IconChevronRight = (p) => ;
const IconArrowUp = (p) => ;
const IconArrowUpRight = (p) => ;
const IconX = (p) => ;
const IconCheck = (p) => ;
const IconPlus = (p) => ;
const IconMic = (p) =>
;
const IconSearch = (p) => ;
const IconUser = (p) => ;
const IconFlame = (p) =>
;
const IconDollar = (p) =>
;
const IconTrash = (p) =>
;
const IconDrag = (p) =>
;
const IconCards = (p) => ;
const IconPlay = (p) => ;
const IconSettings = (p) =>
;
const IconSparkle = ({ size = 24, color = "#fff" }) => (
);
const IconConfetti = (p) =>
;
const IconInfo = (p) => ;
const IconBars = (p) =>
;
const IconTarget = (p) =>
;
const IconBulb = (p) =>
;
const IconMindspace = ({ size = 24, color = "currentColor", active=false }) => (
);
/* Bottom-nav icons (custom asset set) */
const IconNavDashboard = ({ size = 32, color = "#949494" }) => (
);
const IconNavPlan = ({ size = 32, color = "#949494" }) => (
);
const IconNavLearn = ({ size = 32, color = "#949494" }) => (
);
const IconNavMindspace = ({ size = 32, color = "#949494" }) => (
);
const IconGroceries = (p) =>
;
const IconPizza = (p) =>
;
const IconCoffee = (p) =>
;
const IconTransport = (p) =>
;
const IconSmile = (p) =>
;
const IconScale = (p) =>
;
const IconPie = (p) =>
;
const IconBag = (p) =>
;
const IconSwap = (p) =>
;
const IconBookmark = ({ filled = false, ...p }) =>
;
const IconScan = (p) =>
;
const IconBack = IconChevronLeft;
/* ------------------------- Mascot ------------------------- */
const MASCOT_RING_D = "M44.292 4.03c.247-2.07-1.233-3.97-3.317-4.02C32.705-.19 24.541 2.18 17.632 6.84 9.676 12.2 3.914 20.25 1.398 29.52-1.117 38.78-.219 48.64 3.93 57.29c4.148 8.65 11.27 15.53 20.066 19.37 8.795 3.84 18.679 4.39 27.846 1.55 9.167-2.84 17.007-8.89 22.09-17.03 5.082-8.14 7.068-17.84 5.594-27.32-1.279-8.24-5.092-15.83-10.862-21.76-1.454-1.5-3.852-1.29-5.203.31-1.35 1.59-1.138 3.96.283 5.48 4.406 4.73 7.32 10.69 8.32 17.14 1.195 7.69-.415 15.56-4.538 22.16-4.123 6.61-10.483 11.51-17.92 13.81-7.436 2.31-15.454 1.86-22.589-1.25-7.135-3.12-12.913-8.69-16.278-15.71C7.374 47 6.645 39 8.686 31.5c2.04-7.51 6.715-14.05 13.169-18.4C27.261 9.45 33.614 7.54 40.078 7.55c2.085.01 3.967-1.45 4.214-3.52z";
const Mascot = ({ size = 110, color = "var(--teal-300)", animated = true, style }) => (
);
/* Dashboard user avatar โ uses the uploaded user image */
const HeroAvatar = ({ size = 86 }) => (
);
/* Animated emotion mascot with floating dot ring */
const EmotionMascot = ({ color = "var(--teal-300)", ringColors, size = 280 }) => {
// Generate dot positions deterministically
const rings = ringColors || [color];
const dots = useMemo(() => {
const arr = [];
const ringCount = 3;
const counts = [22, 28, 34];
const radii = [70, 96, 122];
for (let r = 0; r < ringCount; r++) {
for (let i = 0; i < counts[r]; i++) {
const ang = (i / counts[r]) * Math.PI * 2 + r * 0.4;
const jitter = ((i * 13 + r * 7) % 11 - 5) * 0.6;
const radius = radii[r] + jitter;
arr.push({
x: Math.cos(ang) * radius,
y: Math.sin(ang) * radius,
size: 4 + ((i + r) % 4),
color: rings[(i + r) % rings.length],
delay: ((i * 0.15 + r * 0.3) % 3),
});
}
}
return arr;
}, [rings]);
return (
{dots.map((d, i) => (
))}
);
};
/* ------------------------- Bottom Nav ------------------------- */
const NAV_ITEMS = [
{ key: "dashboard", label: "Dashboard", icon: IconNavDashboard },
{ key: "plan", label: "Plan", icon: IconNavPlan },
{ key: "learn", label: "Learn", icon: IconNavLearn },
{ key: "mindspace", label: "Mindspace", icon: IconNavMindspace },
];
const NAV_ACTIVE = "#00A991";
const NAV_INACTIVE = "#949494";
const BottomNav = ({ active, onChange }) => (
{NAV_ITEMS.map(it => {
const isActive = active === it.key;
const Ic = it.icon;
const c = isActive ? NAV_ACTIVE : NAV_INACTIVE;
return (
);
})}
);
/* ------------------------- Phone frame (auto-scale 402x874) ------------------------- */
const PhoneFrame = ({ children, background = "var(--bg-soft)" }) => {
const wrapRef = useRef(null);
const [scale, setScale] = useState(1);
useEffect(() => {
const fit = () => {
const W = window.innerWidth - 24;
const H = window.innerHeight - 24;
const s = Math.min(W / 402, H / 874, 1.05);
setScale(s);
};
fit();
window.addEventListener("resize", fit);
return () => window.removeEventListener("resize", fit);
}, []);
return (
{/* Status bar */}
{/* Notch */}
{/* App content area */}
{children}
);
};
/* ------------------------- Floating sparkle button ------------------------- */
const SparkleButton = ({ onClick, color = "var(--teal-300)", floating = true, bottom = 100, right = 18, variant = "solid" }) => {
const inline = variant === "inline";
return (
);
};
/* ------------------------- AI Input bar (reusable, can mount inline or as overlay) ------------------------- */
const AIBar = ({ placeholder = "Describe more", onSubmit, color = "var(--teal-300)" }) => {
const [v, setV] = useState("");
return (
setV(e.target.value)} placeholder={placeholder} style={{
flex: 1, border: 0, outline: 0, fontSize: 15, color: "var(--ink)", background: "transparent",
fontFamily: "inherit",
}}/>
);
};
const iconBtn = (extra) => ({
width: 32, height: 32, border: 0, background: "transparent",
display: "grid", placeItems: "center", cursor: "pointer", padding: 0, ...extra,
});
/* ------------------------- Bottom sheet (generic) + AI Overlay ------------------------- */
const InfoSheet = ({ open, onClose, children }) => (
<>
);
const AIOverlay = ({ open, onClose, color = "var(--teal-300)", placeholder = "Focus more on ETF learning" }) => (
Ask Cove anything
onClose?.()}/>
);
/* ------------------------- StatPill (shared between Learn + Mindspace) ------------------------- */
const StatPill = ({ icon, label, value, compact = false }) => (
{icon}
{label}
{value}
);
/* ------------------------- FormatBadge (content-type indicator) ------------------------- */
const FORMAT_META = {
read: { Icon: IconCards, label: "Read", disabled: false },
interactive: { Icon: IconPlay, label: "Interactive", disabled: false },
"interactive-video": { Icon: IconPlay, label: "Interactive video", disabled: false },
audio: { Icon: IconMic, label: "Audio ยท coming soon", disabled: true },
};
const FormatBadge = ({ format = "read", duration, color = "var(--teal-500)" }) => {
const meta = FORMAT_META[format] || FORMAT_META.read;
const tone = meta.disabled ? "var(--ink-mute)" : color;
return (
{meta.label}
{duration && (
<>
{duration}
)}
);
};
/* ------------------------- SourceFooter (credibility signal) ------------------------- */
const SourceFooter = ({ sources = [] }) => {
const [open, setOpen] = useState(false);
if (!sources.length) return null;
return (
<>
setOpen(false)}>
Sources
Cove pulls financial-literacy content from publicly recognized educators and regulators.
{sources.map((s, i) => (
{s.name}
{s.url}
))}
{open && (
{MOOD_KEY.map(m => (
{m.emoji}
{m.name}
))}
)}
);
};
/* ------------------------- BreathingGuide (box-breathing overlay) ------------------------- */
const BreathingGuide = ({ open, onClose }) => {
const PHASES = ["Breathe in", "Hold", "Breathe out", "Hold"];
const [phase, setPhase] = useState(0);
useEffect(() => {
if (!open) { setPhase(0); return; }
const id = setInterval(() => setPhase(p => (p + 1) % 4), 4000);
return () => clearInterval(id);
}, [open]);
const scale = phase === 0 ? 1.5 : phase === 1 ? 1.5 : phase === 2 ? 1 : 1;
return (
<>
);
};
/* ------------------------- Pill / chip / button primitives ------------------------- */
const Pill = ({ children, style, ...rest }) => (
{children}
);
const PrimaryButton = ({ children, onClick, color = "var(--teal-300)", disabled, style }) => (
);
const SecondaryButton = ({ children, onClick, style }) => (
);
const RoundIconBtn = ({ children, onClick, style, ...rest }) => (
);
/* ------------------------- Header (back + profile) ------------------------- */
const TopRow = ({ onBack, right, leftExtra }) => (
{onBack && (
)}
{leftExtra}
);
/* Toggle (segmented) */
const Segmented = ({ options, value, onChange, color = "var(--navy-900)" }) => (
{options.map(opt => {
const active = value === opt.value;
return (
);
})}
);
/* Export everything to window */
Object.assign(window, {
// hooks
useState, useEffect, useRef, useMemo, useCallback,
// icons
Icon, IconChevronLeft, IconChevronRight, IconArrowUp, IconArrowUpRight, IconX, IconCheck,
IconPlus, IconMic, IconSearch, IconUser, IconFlame, IconDollar, IconTrash, IconDrag,
IconCards, IconPlay, IconSettings, IconSparkle, IconConfetti, IconInfo,
IconBars, IconTarget, IconBulb, IconMindspace, IconBookmark, IconScan,
IconNavDashboard, IconNavPlan, IconNavLearn, IconNavMindspace,
IconGroceries, IconPizza, IconCoffee, IconTransport, IconSmile, IconScale, IconPie, IconBag, IconSwap, IconBack,
// components
Mascot, HeroAvatar, EmotionMascot,
BottomNav, PhoneFrame, SparkleButton, AIBar, AIOverlay, InfoSheet,
Pill, PrimaryButton, SecondaryButton, RoundIconBtn, TopRow, Segmented,
StatPill, FormatBadge, SourceFooter, MoodLegend, BreathingGuide, MOOD_KEY,
NAV_ITEMS, iconBtn,
});
