// ─────────────────────────────────────────────────────────────
// primitives.jsx — production-hardening primitives
// Skeletons, Empty / Error / Offline states, BottomSheet, BiometricGate,
// PermissionPrompt, PullToRefresh, IndexedDB autosave helpers
// ─────────────────────────────────────────────────────────────
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP, useCallback: useCallbackP } = React;
// Skeletons --------------------------------------------------------------
function Skeleton({ w = '100%', h = 12, r = 6, style }) {
return
;
}
function SkeletonCard({ lines = 3 }) {
return (
{Array.from({ length: Math.max(0, lines - 1) }).map((_, i) => (
))}
);
}
function SkeletonList({ n = 3 }) {
return {Array.from({ length: n }).map((_, i) => )}
;
}
// Empty state ------------------------------------------------------------
function EmptyState({ ic = 'mail', title, sub, ctaLabel, onCta, tone = 'default' }) {
const palette = tone === 'success'
? { bg: 'var(--success-50)', fg: '#065F46' }
: tone === 'warn'
? { bg: 'var(--warn-50)', fg: '#92400E' }
: { bg: 'var(--n50)', fg: 'var(--n400)' };
return (
);
}
// Error / Retry banner ---------------------------------------------------
function ErrorBanner({ title = "Couldn't load", sub, onRetry }) {
return (
);
}
// Online / Offline -------------------------------------------------------
function useOnline() {
const [online, setOnline] = useStateP(typeof navigator !== 'undefined' ? navigator.onLine !== false : true);
useEffectP(() => {
const on = () => setOnline(true);
const off = () => setOnline(false);
window.addEventListener('online', on);
window.addEventListener('offline', off);
return () => { window.removeEventListener('online', on); window.removeEventListener('offline', off); };
}, []);
return online;
}
function OfflineBanner({ message = "You're offline — work will sync when back online" }) {
const online = useOnline();
if (online) return null;
return (
);
}
// PullToRefresh ----------------------------------------------------------
function PullToRefresh({ onRefresh, children }) {
const [pull, setPull] = useStateP(0);
const [refreshing, setRefreshing] = useStateP(false);
const startY = useRefP(null);
const wrap = useRefP(null);
const onStart = (e) => {
if (wrap.current && wrap.current.scrollTop > 0) return;
startY.current = e.touches ? e.touches[0].clientY : null;
};
const onMove = (e) => {
if (startY.current == null || refreshing) return;
const y = e.touches[0].clientY;
const d = Math.max(0, Math.min(120, y - startY.current));
if (d > 0) setPull(d);
};
const onEnd = async () => {
if (pull > 70 && !refreshing) {
setRefreshing(true);
setPull(60);
try { await onRefresh?.(); } finally { setRefreshing(false); }
}
setPull(0);
startY.current = null;
};
return (
);
}
// BottomSheet — generic --------------------------------------------------
function BottomSheet({ open, onClose, title, children, footer, maxHeight = '88vh' }) {
if (!open) return null;
return (
<>
{title && (
)}
{children}
{footer &&
{footer}
}
);
}
// BiometricGate — Face ID / PIN modal ------------------------------------
function BiometricGate({ open, onAuthorize, onCancel, title = 'Confirm with Face ID', sub = "High-value action — verify it's you", amount, mode = 'face' }) {
const [stage, setStage] = useStateP('idle'); // idle | scanning | ok | failed
const [pin, setPin] = useStateP('');
const [usePin, setUsePin] = useStateP(false);
useEffectP(() => { if (open) { setStage('idle'); setPin(''); setUsePin(mode === 'pin'); } }, [open, mode]);
const start = () => {
setStage('scanning');
setTimeout(() => {
setStage('ok');
setTimeout(() => onAuthorize?.(), 480);
}, 900);
};
const confirmPin = () => {
if (pin.length < 4) return;
setStage('scanning');
setTimeout(() => { setStage('ok'); setTimeout(() => onAuthorize?.(), 480); }, 500);
};
if (!open) return null;
const ok = stage === 'ok';
return (
<>
{stage === 'scanning' && (
)}
{ok ? 'Verified' : (usePin ? 'Enter your PIN' : title)}
{ok ? 'Continuing securely' : sub}
{!ok && amount &&
₹{Number(amount).toLocaleString('en-IN')}
}
{!ok && usePin && (
{[0, 1, 2, 3].map((i) => (
))}
{['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '⌫'].map((k, i) => (
{
if (k === '⌫') setPin((p) => p.slice(0, -1));
else if (k && pin.length < 4) setPin((p) => p + k);
}}
style={{ height: 44, borderRadius: 12, background: k ? 'var(--n50)' : 'transparent', fontSize: 18, fontWeight: 700, color: 'var(--n900)', visibility: k ? 'visible' : 'hidden', border: 'none' }}>{k}
))}
)}
{stage === 'idle' && !usePin && (
Cancel
Verify
)}
{stage === 'idle' && usePin && (
Continue
)}
{stage === 'idle' && (
setUsePin((p) => !p)} className="btn-ghost" style={{ fontSize: 11, color: 'var(--n400)' }}>{usePin ? 'Use Face ID instead' : 'Use PIN instead'}
)}
Secured · 256-bit encryption
);
}
// PermissionPrompt — soft pre-ask before native permission ----------------
function PermissionPrompt({ open, kind = 'notifications', onAllow, onSkip }) {
const meta = {
notifications: { ic: 'bell', t: 'Stay on top of school updates', s: "We'll send a push when fees fall due, results publish, or your child's bus is 3 min away. Mute anytime." },
camera: { ic: 'camera', t: 'Snap your homework', s: 'Use the camera to capture pages. Photos stay on your device until you submit.' },
location: { ic: 'pin', t: 'See the bus on the map', s: 'We use location only when Transport is open. Never tracked in the background.' },
sms: { ic: 'message', t: "We'll fall back to SMS", s: "If push isn't available on this device, critical updates (fees, attendance, results) come as SMS. Standard carrier rates apply." }
}[kind] || { ic: 'bell', t: 'Allow access?', s: '' };
return (
You can change this in Settings → Notifications
Not now
{
try {
if (kind === 'notifications' && typeof Notification !== 'undefined' && Notification.permission === 'default') {
Notification.requestPermission();
}
} catch (e) { /* sandboxed */ }
onAllow?.();
}} className="btn" style={{ flex: 1.4 }}>Allow
);
}
// IndexedDB helpers ------------------------------------------------------
function idbOpen() {
return new Promise((res, rej) => {
if (typeof indexedDB === 'undefined') return rej(new Error('No IndexedDB'));
const r = indexedDB.open('scholiq', 1);
r.onupgradeneeded = () => { try { r.result.createObjectStore('kv'); } catch {} };
r.onsuccess = () => res(r.result);
r.onerror = () => rej(r.error);
});
}
async function idbSet(key, val) {
try {
const db = await idbOpen();
return new Promise((res, rej) => {
const tx = db.transaction('kv', 'readwrite');
tx.objectStore('kv').put(val, key);
tx.oncomplete = () => res(true);
tx.onerror = () => rej(tx.error);
});
} catch {
try { localStorage.setItem('sk:' + key, JSON.stringify(val)); } catch {}
return false;
}
}
async function idbGet(key) {
try {
const db = await idbOpen();
return new Promise((res, rej) => {
const tx = db.transaction('kv', 'readonly');
const r = tx.objectStore('kv').get(key);
r.onsuccess = () => res(r.result);
r.onerror = () => rej(r.error);
});
} catch {
try { const v = localStorage.getItem('sk:' + key); return v ? JSON.parse(v) : undefined; } catch { return undefined; }
}
}
async function idbDel(key) {
try {
const db = await idbOpen();
return new Promise((res) => {
const tx = db.transaction('kv', 'readwrite');
tx.objectStore('kv').delete(key);
tx.oncomplete = () => res(true);
});
} catch { try { localStorage.removeItem('sk:' + key); } catch {} return false; }
}
function useAutosave(key, value, delay = 700) {
useEffectP(() => {
if (!key) return;
const t = setTimeout(() => { idbSet(key, value); }, delay);
return () => clearTimeout(t);
}, [key, JSON.stringify(value), delay]);
}
// useDraft — load → mutable state → autosave
function useDraft(key, initial) {
const [value, setValue] = useStateP(initial);
const [hydrated, setHydrated] = useStateP(false);
useEffectP(() => {
let cancel = false;
if (!key) { setHydrated(true); return; }
idbGet(key).then((v) => { if (cancel) return; if (v) setValue((cur) => ({ ...cur, ...v })); setHydrated(true); });
return () => { cancel = true; };
}, [key]);
useAutosave(key, hydrated ? value : null);
return [value, setValue, hydrated];
}
// PageHeader — re-usable top-bar with safe-area + back ------------------
function PageHeader({ title, subtitle, onBack, right, sticky = true, tone = 'light' }) {
const dark = tone === 'dark';
return (
{title}
{subtitle &&
{subtitle}
}
{right ||
);
}
// SegmentedControl -----------------------------------------------------
function Segmented({ value, onChange, options }) {
return (
{options.map((o) => {
const v = typeof o === 'string' ? o : o.value;
const lab = typeof o === 'string' ? o : o.label;
const active = v === value;
return (
onChange(v)} style={{
flex: 1, height: 32, borderRadius: 9, border: 'none',
background: active ? '#fff' : 'transparent', color: active ? 'var(--n900)' : 'var(--n500)',
fontSize: 12, fontWeight: 700, boxShadow: active ? '0 1px 3px rgba(15,23,42,.08)' : 'none',
transition: 'all .18s'
}}>{lab}
);
})}
);
}
// FormField ------------------------------------------------------------
function FormField({ label, hint, error, children, required }) {
return (
{label}{required && * }
{hint && {hint} }
{children}
{error && {error}
}
);
}
// Inline animations + skeleton shimmer (registered once) ----------------
(() => {
if (document.getElementById('sp-anim-prims')) return;
const s = document.createElement('style');
s.id = 'sp-anim-prims';
s.textContent = `
@keyframes sp-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sp-up { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes sp-spin { to { transform: rotate(360deg) } }
@keyframes sp-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.sk-shimmer { background: linear-gradient(90deg, var(--n100) 0%, var(--n50) 50%, var(--n100) 100%); background-size: 200% 100%; animation: sp-shimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.sk-shimmer { animation: none; background: var(--n100); }
[class*="sp-"] { animation: none !important; }
}
.focus-ring:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; border-radius: 8px; }
`;
document.head.appendChild(s);
})();
Object.assign(window, {
Skeleton, SkeletonCard, SkeletonList,
EmptyState, ErrorBanner, OfflineBanner, useOnline,
PullToRefresh, BottomSheet,
BiometricGate, PermissionPrompt,
idbSet, idbGet, idbDel, useAutosave, useDraft,
PageHeader, Segmented, FormField
});