/* scope guard: file-scoped IIFE — see index.html */
(function () {
/* Stoic+ — shared icons & primitives.
Lucide line icons inlined as React components (stroke style, ~2px,
rounded caps). Every visual value comes from colors_and_type.css —
no raw palette hex, no magic spacing. Exported to `window` so the
screen files (loaded after this one) can pull them off the global. */
const I = ({ d, size = 22, sw = 2, children, fill = "none" }) => (
);
const Icons = {
Check: (p) => ,
AtSign: (p) => ,
Flame: (p) => ,
ChevronRight: (p) => ,
ArrowRight: (p) => ,
ArrowLeft: (p) => ,
Crown: (p) => ,
Home: (p) => ,
Trend: (p) => ,
Message: (p) => ,
Settings: (p) => ,
ChevronDown: (p) => ,
Zap: (p) => ,
Moon: (p) => ,
Target: (p) => ,
Smile: (p) => ,
Shield: (p) => ,
X: (p) => ,
Pencil: (p) => ,
CloudOff: (p) => ,
Heart: (p) => ,
Download: (p) => ,
Lock: (p) => ,
LogOut: (p) => ,
Refresh: (p) => ,
Card: (p) => ,
Sliders: (p) => ,
Snow: (p) => ,
ShieldCheck: (p) => ,
Beaker: (p) => ,
};
/* ---- Primitives ---- */
const SectionLabel = ({ children, style }) => (
{children}
);
const ScoreNumber = ({ value, size = 72 }) => (
{value}
);
const CheckBadge = ({ size = 64 }) => (
);
const StreakPill = ({ count = 12 }) => (
{count}
day streak
);
const PrimaryButton = ({ children, onClick, icon = true }) => (
);
/* Glass CTA — amber-tinted liquid glass, the futuristic primary action */
const GlassButton = ({ children, onClick, icon = true }) => (
);
const GhostButton = ({ children, onClick }) => (
);
const LinkButton = ({ children, onClick }) => (
);
const Card = ({ children, style, surface = 1, glass = false, lit = true, onClick }) => {
if (glass) {
return (
{children}
);
}
const bg = surface === 2 ? "var(--color-surface-2)" : surface === 3 ? "var(--color-surface-3)" : "var(--color-surface-1)";
return (
{children}
);
};
/* ---- Liquid-glass bottom sheet / modal ----
A blurred scrim + a glass panel rising from the bottom.
open: bool · onClose: fn · children: sheet body */
const Sheet = ({ open, onClose, title, children }) => {
if (!open) return null;
return (
{title &&
{title}
}
{children}
);
};
const StepProgress = ({ total, current }) => (
{Array.from({ length: total }).map((_, i) => (
))}
{Icon && }
{children}
{onAction && }
);
};
/* Settings list row */
const ListRow = ({ icon, label, value, onClick, danger, last }) => {
const Icon = icon ? Icons[icon] : null;
return (
);
};
/* Toggle switch */
const Toggle = ({ on, onChange }) => (
);
/* Shared screen top bar: journey day (left) + streak pill (right) */
const TopBar = ({ day, streak }) => (
{day ? `Day ${day} of your journey` : "Welcome to Stoic+"}
{streak != null && (streak > 0
?
: No streak yet)}
);
Object.assign(window, { Icons, SectionLabel, ScoreNumber, CheckBadge, StreakPill, PrimaryButton, GlassButton, GhostButton, LinkButton, Card, Sheet, StepProgress, DIMENSIONS, DEFAULT_VALUES, monitorOf, feelingFor, ReadOnlyMetric, Banner, ListRow, Toggle, TopBar });
})();