// ui.jsx — Shared UI primitives for Monthly Plan
// All components are aware of `tokens` (warm cream paper, ink, sage).
// ── Icons (hand-drawn, single-stroke) ──────────────────────────────────────
const Ico = {
plus: (s=20,c='currentColor') => {children}
);
}
// ── Pill button (sage / ghost) ─────────────────────────────────────────────
function PillButton({ children, onClick, kind = 'primary', size = 'md', style = {}, disabled = false }) {
const heights = { sm: 32, md: 44, lg: 52 };
const fontSizes = { sm: 13, md: 15, lg: 16 };
const palette = {
primary: { bg: tokens.ink, fg: tokens.paper },
sage: { bg: tokens.sage, fg: '#FAF7F1' },
ghost: { bg: 'transparent', fg: tokens.ink, border: `1px solid ${tokens.divider}` },
soft: { bg: tokens.inset, fg: tokens.ink },
danger: { bg: 'transparent', fg: tokens.bad, border: `1px solid ${tokens.bad}33` },
}[kind];
return (
{children}
);
}
// ── Avatar (initials in muted square; no logos) ────────────────────────────
function SubAvatar({ name, size = 36, paused = false }) {
// hash name to pick a tonal background within the cream palette
let h = 0;
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
const tones = [
'#E8E1D0', '#DCD3C0', '#E5DCD2', '#D8D4C5', '#E2DBCC',
'#D5CFBE', '#E0D9C9', '#CFC9B7',
];
const bg = paused ? tokens.inset : tones[h % tones.length];
const initial = (name || '?').trim().charAt(0).toUpperCase();
return (
{initial}
);
}
// ── Bottom sheet (modal) ───────────────────────────────────────────────────
function Sheet({ open, onClose, title, children, height = 'auto' }) {
const [mounted, setMounted] = React.useState(open);
const [visible, setVisible] = React.useState(false);
// Drag-to-dismiss
const [drag, setDrag] = React.useState(0); // current drag offset in px
const [dragging, setDragging] = React.useState(false);
const dragStart = React.useRef(null);
const sheetRef = React.useRef(null);
// Reusable pointer handlers so we can attach them to grabber AND header.
const dragHandlers = {
onPointerDown: (e) => {
// Don't start drag from interactive children (close button, inputs).
if (e.target.closest('button, input, textarea, select, [data-no-drag]')) return;
try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
dragStart.current = { y: e.clientY, t: Date.now() };
setDragging(true);
},
onPointerMove: (e) => {
if (!dragStart.current) return;
const dy = e.clientY - dragStart.current.y;
setDrag(dy > 0 ? dy : dy * 0.2);
},
onPointerUp: (e) => {
if (!dragStart.current) { setDragging(false); return; }
const dy = e.clientY - dragStart.current.y;
const dt = Date.now() - dragStart.current.t;
const velocity = dy / Math.max(dt, 1);
dragStart.current = null;
setDragging(false);
if (dy > 100 || velocity > 0.45) {
setDrag(0);
onClose && onClose();
} else {
setDrag(0);
}
},
onPointerCancel: () => {
dragStart.current = null;
setDragging(false);
setDrag(0);
},
style: { touchAction: 'none', userSelect: 'none' },
};
// Track keyboard inset on iOS via visualViewport. When the keyboard is up,
// visualViewport.height shrinks; we offset the sheet bottom by that delta
// so it floats just above the keyboard instead of being hidden.
const [kbInset, setKbInset] = React.useState(0);
React.useEffect(() => {
if (!open) { setKbInset(0); return; }
const vv = window.visualViewport;
if (!vv) return;
const update = () => {
const inset = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
setKbInset(inset);
};
update();
vv.addEventListener('resize', update);
vv.addEventListener('scroll', update);
return () => {
vv.removeEventListener('resize', update);
vv.removeEventListener('scroll', update);
};
}, [open]);
// Prevent iOS body scroll behind the sheet (keeps the page from lurching
// up when an input is focused). iOS Safari, even with `position: fixed`
// on body, will still try to scroll the document to put a focused input
// above the keyboard. We snap it back immediately on every scroll event
// and right after focus, when iOS does its automatic scrollIntoView.
React.useEffect(() => {
if (!open) return;
const prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
const snap = () => {
if (window.scrollY !== 0 || window.scrollX !== 0) window.scrollTo(0, 0);
if (document.documentElement.scrollTop !== 0) document.documentElement.scrollTop = 0;
if (document.body.scrollTop !== 0) document.body.scrollTop = 0;
};
const onFocusIn = () => {
// iOS scrolls a few times after focus; snap on next frames too.
snap();
requestAnimationFrame(snap);
setTimeout(snap, 50);
setTimeout(snap, 150);
setTimeout(snap, 300);
};
window.addEventListener('scroll', snap, { passive: true });
document.addEventListener('scroll', snap, { passive: true });
document.addEventListener('focusin', onFocusIn);
return () => {
document.body.style.overflow = prevOverflow;
window.removeEventListener('scroll', snap);
document.removeEventListener('scroll', snap);
document.removeEventListener('focusin', onFocusIn);
};
}, [open]);
React.useEffect(() => {
if (open) {
setDrag(0);
setMounted(true);
requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
} else {
setVisible(false);
const t = setTimeout(() => setMounted(false), 360);
return () => clearTimeout(t);
}
}, [open]);
if (!mounted) return null;
return (
{/* backdrop */}
{/* sheet */}
0 ? `calc(100% - ${kbInset}px - 24px)` : '92%',
display: 'flex', flexDirection: 'column',
willChange: 'transform, bottom',
}}>
{/* drag handle area — grabber + title both draggable */}
{title && (
{title}
{Ico.close(16, tokens.ink2)}
)}
{children}
{label}
{children}
{hint && (
{hint}
)}
);
}
function TextInput({ value, onChange, placeholder, type = 'text', suffix, autoFocus, inputMode }) {
return (
{suffix}
)}
);
}
// ── Animated count-up number ──────────────────────────────────────────────
function CountNumber({ value, format = (v) => v.toFixed(0), duration = 600, style }) {
const [display, setDisplay] = React.useState(value);
const fromRef = React.useRef(value);
const startRef = React.useRef(null);
React.useEffect(() => {
const from = fromRef.current;
const to = value;
if (from === to) return;
let raf;
const ease = (t) => 1 - Math.pow(1 - t, 3);
const step = (ts) => {
if (startRef.current == null) startRef.current = ts;
const t = Math.min(1, (ts - startRef.current) / duration);
setDisplay(from + (to - from) * ease(t));
if (t < 1) raf = requestAnimationFrame(step);
else { fromRef.current = to; startRef.current = null; }
};
raf = requestAnimationFrame(step);
return () => { cancelAnimationFrame(raf); fromRef.current = to; startRef.current = null; };
}, [value, duration]);
return {format(display)} ;
}
// ── Floating action button ─────────────────────────────────────────────────
function FAB({ onClick, children }) {
const fg = tokens.card;
const content = children || Ico.plus(22, fg);
const [iconKey, setIconKey] = React.useState(0);
const handleClick = () => {
setIconKey(k => k + 1);
onClick && onClick();
};
return (
{content}
);
}
// ── Tab bar ────────────────────────────────────────────────────────────────
function TabBar({ active, onChange }) {
const tabs = [
{ id: 'home', label: 'Home', icon: Ico.home },
{ id: 'coffee', label: 'Coffee', icon: Ico.coffee },
{ id: 'cal', label: 'Calendar', icon: Ico.cal },
{ id: 'stats', label: 'Stats', icon: Ico.stats },
{ id: 'more', label: 'Settings', icon: Ico.cog },
];
const isDark = tokens.paper === '#0E0D0B';
const containerRef = React.useRef(null);
const buttonRefs = React.useRef({});
const [indicator, setIndicator] = React.useState({ left: 0, width: 0, ready: false });
React.useLayoutEffect(() => {
const el = buttonRefs.current[active];
const wrap = containerRef.current;
if (el && wrap) {
const er = el.getBoundingClientRect();
const wr = wrap.getBoundingClientRect();
const w = 18;
setIndicator({
left: er.left - wr.left + er.width / 2 - w / 2,
width: w,
ready: true,
});
}
}, [active]);
return (
{indicator.ready && (
)}
{tabs.map(t => {
const isActive = active === t.id;
const c = isActive ? tokens.ink : tokens.ink3;
return (
{ buttonRefs.current[t.id] = el; }}
onClick={() => onChange(t.id)} className="pressable" style={{
background: 'none', border: 'none', cursor: 'pointer',
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
padding: '2px 8px',
}}>
{t.icon(22, c, isActive)}
{t.label}
);
})}
{pulse && (
);
}
// ── Header (large title, scroll-aware optional) ────────────────────────────
function ScreenHeader({ eyebrow, title, right, action }) {
return (
{eyebrow && (
{eyebrow}
)}
{title}
{right &&
{right}
}
{action}
);
}
// ── Tiny icon button (top right of screens) ────────────────────────────────
function IconButton({ children, onClick, style }) {
return (
{children}
);
}
// ── Animated horizontal progress bar ───────────────────────────────────────
function ProgressBar({ value, max = 100, color, track, height = 6, delay = 0 }) {
const pct = Math.max(0, Math.min(1, value / max));
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
const t = setTimeout(() => setMounted(true), 50 + delay);
return () => clearTimeout(t);
}, []);
return (
);
}
// ── Swipe-to-delete row ────────────────────────────────────────────────────
// Wrap any row that should reveal a red Delete behind it on swipe-left.
// Children render inside .swipe-content; the action button reveals when
// dragged left more than ~16px, locks open at -92px, deletes on full swipe.
function SwipeRow({ onDelete, children, actionLabel = 'Delete' }) {
const [x, setX] = React.useState(0);
const [dragging, setDragging] = React.useState(false);
const start = React.useRef(null);
const open = x <= -60;
const reset = () => { setX(0); setDragging(false); start.current = null; };
return (
{
if (e.target.closest('button, input, [data-no-swipe]')) return;
start.current = { x: e.clientX, y: e.clientY, baseX: x, locked: null };
setDragging(true);
}}
onPointerMove={(e) => {
if (!start.current) return;
const dx = e.clientX - start.current.x;
const dy = e.clientY - start.current.y;
// Lock direction on first significant movement
if (start.current.locked == null) {
if (Math.abs(dx) > 6 || Math.abs(dy) > 6) {
start.current.locked = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
} else return;
}
if (start.current.locked !== 'x') return;
try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
let next = start.current.baseX + dx;
// Resistance past full open
if (next < -92) next = -92 + (next + 92) * 0.25;
if (next > 0) next = next * 0.25;
setX(next);
}}
onPointerUp={(e) => {
if (!start.current || start.current.locked !== 'x') { reset(); return; }
const dx = e.clientX - start.current.x;
const final = start.current.baseX + dx;
// Full swipe → delete
if (final < -180) {
setX(-400);
setTimeout(() => onDelete && onDelete(), 220);
start.current = null; setDragging(false);
return;
}
// Snap open or closed
setX(final < -46 ? -92 : 0);
start.current = null; setDragging(false);
}}
onPointerCancel={reset}
>
onDelete && onDelete()} aria-hidden={!open}>
{actionLabel}
{children}
onChange(!value)}
style={{ border: 'none', padding: 0 }}
>
);
}
// ── Pull-to-refresh wrapper ───────────────────────────────────────────────
// Wrap a scrollable region. When user pulls past threshold from the top,
// a small spinner appears; releasing fires onRefresh().
function PullToRefresh({ onRefresh, children, scrollRef, enabled = true }) {
const [pull, setPull] = React.useState(0);
const [refreshing, setRefreshing] = React.useState(false);
const start = React.useRef(null);
const TRIGGER = 64;
const internalRef = React.useRef(null);
const ref = scrollRef || internalRef;
const handlers = enabled ? {
onTouchStart: (e) => {
const el = ref.current;
if (!el || el.scrollTop > 0 || refreshing) return;
start.current = { y: e.touches[0].clientY };
},
onTouchMove: (e) => {
if (!start.current) return;
const dy = e.touches[0].clientY - start.current.y;
if (dy <= 0) { setPull(0); return; }
// Resistance
setPull(Math.min(120, dy * 0.5));
},
onTouchEnd: () => {
if (!start.current) return;
start.current = null;
if (pull >= TRIGGER) {
setRefreshing(true);
setPull(TRIGGER);
Promise.resolve(onRefresh && onRefresh()).finally(() => {
setTimeout(() => { setRefreshing(false); setPull(0); }, 300);
});
} else {
setPull(0);
}
},
} : {};
const ringPct = Math.min(1, pull / TRIGGER);
const ringColor = tokens.ink2;
return (
);
}
Object.assign(window, {
Ico, Card, PillButton, SubAvatar, Sheet, Field, TextInput, CountNumber,
FAB, TabBar, BurdenDot, ScreenHeader, IconButton, ProgressBar,
SwipeRow, IOSToggle, PullToRefresh,
});