// Loop — small UI atoms shared by all screens.
// Exports (window): Avatar, Pill, KindGlyph, Sparkline, ShimmerDot, RingHero,
// StackHero, NumberHero, GradientHero, TabBar, BackHeader,
// ScreenScroll, Hairline
const { useEffect, useRef, useState } = React;
function Avatar({ p, size = 40, dark }) {
if (!p) return null;
return (
{p.init}
);
}
function Pill({ children, color, soft, dark, style }) {
return (
{children}
);
}
function Hairline({ T, style }) {
return ;
}
// Tiny per-kind glyph. Hand-drawn, calm, no emoji.
function KindGlyph({ kind, color, size = 14 }) {
const s = { width: size, height: size, display: 'block' };
switch (kind) {
case 'reply':
return ;
case 'thanks':
return ;
case 'schedule':
return ;
case 'approve':
return ;
case 'followup':
return ;
default:
return ;
}
}
function ShimmerDot({ T, size = 6 }) {
return (
);
}
// Hero — ring (Activity-inspired)
function RingHero({ T, cleared, total, minutes }) {
const pct = total === 0 ? 1 : cleared / total;
const r = 78;
const c = 2 * Math.PI * r;
return (
);
}
function NumberHero({ T, cleared, total, minutes }) {
return (
{total - cleared}
small loops to clear · about {minutes} minutes
);
}
function GradientHero({ T, cleared, total, minutes }) {
return (
{total - cleared}
loops · ~{minutes} min
Most are under two minutes. Start anywhere.
);
}
function StackHero({ T, cleared, total, minutes, peek }) {
const cards = peek.slice(0, 3);
return (
{total - cleared}
· {minutes} min
next up
{cards.map((c, i) => (
{i === 0 && (
{c.kindLabel}
{c.minutes} min
)}
))}
);
}
// Bottom tab bar — glass, 5 tabs
function TabBar({ T, tab, setTab }) {
const tabs = [
{ id: 'home', label: 'Momentum', icon: 'home' },
{ id: 'queue', label: 'Queue', icon: 'queue' },
{ id: 'summary', label: 'Today', icon: 'sum' },
{ id: 'people', label: 'People', icon: 'ppl' },
{ id: 'activity', label: 'Activity', icon: 'act' },
];
const icon = (k, on) => {
const c = on ? T.accent : T.textMuted;
if (k === 'home') return ;
if (k === 'queue') return ;
if (k === 'sum') return ;
if (k === 'ppl') return ;
if (k === 'act') return ;
};
return (
{tabs.map(t => (
))}
);
}
function BackHeader({ T, title, onBack, trailing, topInset = 52 }) {
return (
{trailing}
);
}
function ScreenScroll({ T, children, padBottom = 110, padTop = 52 }) {
return (
{children}
);
}
Object.assign(window, {
Avatar, Pill, KindGlyph, ShimmerDot,
RingHero, NumberHero, GradientHero, StackHero,
TabBar, BackHeader, ScreenScroll, Hairline,
});