// 22hrs — shared UI primitives
// Dark-first. All sizes assume a ~390px viewport.
const { useState, useEffect, useRef } = React;
// ──────────────────────────────────────────────
// Brand: case glyph (the device, drawn for SVG use)
// ──────────────────────────────────────────────
function CaseGlyph({ size = 120, glow = false, lid = 'closed' }) {
// Photoreal case mockup. Image is pre-cropped to a tight bbox around the
// device (725×424, aspect 1.71) so the device naturally sits centered in
// its bounding box — no transform tricks needed.
const aspect = 725 / 424;
const h = size / aspect;
return (
{lid === 'scanning' &&
}
);
}
// ──────────────────────────────────────────────
// The wear-time ring (hero)
// pct 0–100, draws stroke-dashoffset over duration-pour
// ──────────────────────────────────────────────
function WearRing({ pct = 97, size = 280, primary = '#FFFFFF', accent = 'gradient', label = 'TODAY', children, animateIn = true }) {
const r = size * 0.42;
const sw = size * 0.052;
const c = 2 * Math.PI * r;
const target = c * (1 - Math.min(pct, 100) / 100);
const [off, setOff] = useState(animateIn ? c : target);
useEffect(() => {
if (!animateIn) {setOff(target);return;}
const t = setTimeout(() => setOff(target), 60);
return () => clearTimeout(t);
}, [target, animateIn]);
const cx = size / 2,cy = size / 2;
const stroke = accent === 'gradient' ? 'url(#wr-grad)' : accent;
const met = pct >= 100;
return (
{children}
);
}
// ──────────────────────────────────────────────
// Status pill (Listening / Synced / Out of range)
// ──────────────────────────────────────────────
function StatusPill({ status = 'listening' }) {
const map = {
listening: { label: 'Case listening', dot: '#3CBF9E', bg: 'rgba(60,191,158,0.12)', fg: '#5FCFB2', pulse: true },
synced: { label: 'Synced just now', dot: '#1FB8E0', bg: 'rgba(31,184,224,0.12)', fg: '#4FCBE8' },
outofrange: { label: 'Out of range', dot: '#9BA1AB', bg: 'rgba(155,161,171,0.10)', fg: '#9BA1AB' },
wearing: { label: 'Wearing now', dot: '#3CBF9E', bg: 'rgba(60,191,158,0.12)', fg: '#5FCFB2', pulse: true }
};
const s = map[status];
return (
{s.pulse && }
{s.label}
);
}
// ──────────────────────────────────────────────
// Eyebrow / kicker label
// ──────────────────────────────────────────────
function Eyebrow({ children, color, style = {} }) {
return {children}
;
}
// ──────────────────────────────────────────────
// Buttons
// ──────────────────────────────────────────────
function Btn({ children, variant = 'primary', block = false, onClick, disabled = false, leading, trailing, style = {} }) {
const base = {
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
fontFamily: 'inherit', fontWeight: 500, fontSize: 15, letterSpacing: '-0.005em',
border: 0, cursor: disabled ? 'not-allowed' : 'pointer', padding: '15px 20px',
borderRadius: 14, transition: 'transform 80ms ease, background 160ms ease, color 160ms ease, opacity 160ms',
width: block ? '100%' : undefined,
opacity: disabled ? 0.4 : 1
};
const variants = {
primary: { background: 'var(--t-btn-primary-bg)', color: 'var(--t-btn-primary-fg)' },
primaryBrand: { background: '#1FB8E0', color: '#FFFFFF' },
quiet: { background: 'var(--t-quiet)', color: 'var(--t-fg-1)' },
ghost: { background: 'transparent', color: 'var(--t-fg-1)' },
outline: { background: 'transparent', color: 'var(--t-fg-1)', boxShadow: 'inset 0 0 0 1px var(--t-border-strong)' }
};
const [press, setPress] = useState(false);
return (
);
}
// ──────────────────────────────────────────────
// Text input
// ──────────────────────────────────────────────
function Field({ label, type = 'text', value, onChange, placeholder, autoFocus, trailing }) {
const [focus, setFocus] = useState(false);
return (
);
}
// ──────────────────────────────────────────────
// Card
// ──────────────────────────────────────────────
function Card({ children, padding = 18, style = {} }) {
return {children}
;
}
// ──────────────────────────────────────────────
// Sonar — concentric pulse rings (used during scan)
// ──────────────────────────────────────────────
function Sonar({ size = 280, color = '#1FB8E0' }) {
return (
{[0, 0.7, 1.4, 2.1].map((d, i) =>
)}
);
}
// ──────────────────────────────────────────────
// 24h timeline strip (today's wear pattern)
// segments: [{startMin, endMin, type: 'wearing' | 'gap'}]
// ──────────────────────────────────────────────
function DayTimeline({ segments, now = 18 * 60 }) {
const total = 24 * 60;
return (
{segments.map((s, i) => {
if (s.type !== 'wearing') return null;
const left = s.startMin / total * 100;
const width = (s.endMin - s.startMin) / total * 100;
return (
);
})}
{/* now indicator */}
12a6a12p6p12a
);
}
// ──────────────────────────────────────────────
// Mini sparkline / trend bars (week)
// ──────────────────────────────────────────────
function MiniBars({ values = [], target = 22, height = 38 }) {
return (
{values.map((v, i) => {
const h = Math.min(v / 24 * 100, 100);
const met = v >= target;
const today = i === values.length - 1;
return (
);
})}