/* Mereka v2 — design tokens & primitives */
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
/* ---------- Icons (lightweight inline) ---------- */
const ICONS = {
search: ,
bell: ,
chat: ,
user: ,
heart: ,
star: ,
calendar: ,
chevronRight: ,
chevronLeft: ,
chevronDown: ,
chevronUp: ,
arrowRight: ,
arrowUpRight: ,
plus: ,
close: ,
check: ,
filter: ,
briefcase: <>,
building: <>,
compass: <>,
message: ,
external: ,
settings: <>,
card: <>,
graduation: ,
globe: <>,
map: ,
clock: <>,
document: <>,
video: <>,
phone: ,
trending: ,
dollar: ,
upload: ,
download: ,
pin: <>,
play: ,
pause: ,
menu: ,
more: <>,
edit: ,
trash: ,
eye: <>,
copy: <>,
shield: ,
receipt: ,
spark: ,
layers: ,
bookmark: ,
send: ,
mail: <>,
image: <>,
camera: <>,
save: <>,
book: <>,
refresh: <>,
hub: <>,
userPlus: <>,
layout: <>,
barChart: <>,
clipboard: <>,
switchArrows: <>,
userStar: <>,
paperclip: ,
smile: <>,
award: <>,
dashboardGrid: <>,
programme: <>,
courses: <>,
calendarStar: <>,
briefcaseGear: <>,
programmeGear: <>,
formsBars: <>,
broadcast: <>,
};
function Icon({ name, size = 18, className = '', strokeWidth = 1.75, fill = 'none' }) {
const path = ICONS[name];
if (!path) return null;
return (
);
}
/* ---------- Logo ---------- */
function MerekaLogo({ className = '', dark = false }) {
return (
);
}
/* ---------- Hash router ---------- */
/* ---------- Path router (clean URLs, no hash) ---------- */
function _currentPath() {
if (typeof location === 'undefined') return '/web';
const p = location.pathname || '/';
if (p === '/' || p === '') return '/web';
return p.replace(/\/+$/, '') || '/web';
}
function useHashRoute() {
const [path, setPath] = useState(_currentPath);
useEffect(() => {
const onChange = () => setPath(_currentPath());
window.addEventListener('popstate', onChange);
window.addEventListener('locationchange', onChange);
return () => {
window.removeEventListener('popstate', onChange);
window.removeEventListener('locationchange', onChange);
};
}, []);
return path;
}
function _toPath(to) {
if (!to || to === '#') return null;
let t = to.startsWith('#') ? to.slice(1) : to;
if (!t || t === '/') t = '/web';
if (!t.startsWith('/')) t = '/' + t;
return t;
}
function navigate(to) {
const t = _toPath(to);
if (t === null) return;
const url = (t === '/web') ? '/' : t; // home lives at the clean root
if (location.pathname !== url) {
history.pushState({}, '', url);
window.dispatchEvent(new Event('locationchange'));
}
window.scrollTo({ top: 0, behavior: 'instant' });
}
function Link({ to, className = '', children, onClick, ...rest }) {
const t = _toPath(to);
const href = t === null ? '#' : (t === '/web' ? '/' : t);
const handleClick = (e) => {
e.preventDefault();
onClick && onClick(e);
navigate(to);
};
return {children};
}
/* ---------- Buttons ---------- */
function Button({ variant = 'primary', size = 'md', children, className = '', leftIcon, rightIcon, ...rest }) {
const sizes = {
sm: 'h-8 text-xs px-3',
md: 'h-10 text-sm px-4',
lg: 'h-12 text-sm px-6',
};
const variants = {
primary: 'bg-primary text-white hover:bg-primary/90',
dark: 'bg-neutral-900 text-white hover:bg-neutral-800',
secondary: 'bg-white text-neutral-900 border border-neutral-300 hover:bg-neutral-50',
ghost: 'text-neutral-700 hover:bg-neutral-100',
danger: 'bg-error text-white hover:opacity-90',
purple: 'bg-purple-600 text-white hover:bg-purple-700',
outline: 'border border-primary text-primary hover:bg-primary/5',
};
return (
);
}
/* ---------- Avatar ---------- */
const AVATAR_PALETTE = [
['#FDE68A', '#92400E'], ['#BFDBFE', '#1E40AF'], ['#FBCFE8', '#9D174D'],
['#BBF7D0', '#166534'], ['#DDD6FE', '#5B21B6'], ['#FECACA', '#991B1B'],
['#FED7AA', '#9A3412'], ['#A5F3FC', '#155E75'],
];
/* ---------- Unsplash placeholder pools (verified stable photo IDs) ---------- */
const UNSPLASH_PEOPLE = ['1494790108377-be9c29b29330','1500648767791-00dcc994a43e','1438761681033-6461ffad8d80','1472099645785-5658abf4ff4e','1507003211169-0a1dd7228f2d','1534528741775-53994a69daeb','1506794778202-cad84cf45f1d','1544005313-94ddf0286df2','1517841905240-472988babdf9','1531427186611-ecfd6d936c79','1524504388940-b1c1722653e1','1573496359142-b8d87734a5a2'];
const UNSPLASH_SCENES = ['1452860606245-08befc0ff44b','1556910103-1c02745aae4d','1565193566173-7a0ee3dbe261','1513364776144-60967b0f800f','1441974231531-c6227db76b6e','1509440159596-0249088772ff','1452587925148-ce544e77e70d','1517180102446-f3ece451e9d8','1552664730-d307ca884978','1561070791-2526d30994b5'];
function _hashStr(s) { let h = 0; s = String(s == null ? '' : s); for (let i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; } return h; }
function personPhoto(name, size = 80) { const id = UNSPLASH_PEOPLE[_hashStr(name) % UNSPLASH_PEOPLE.length]; const px = Math.max(64, Math.round(size * 2)); return `https://images.unsplash.com/photo-${id}?w=${px}&h=${px}&fit=crop&crop=faces&auto=format&q=70`; }
function scenePhoto(seed, w = 400, h = 300) { const id = UNSPLASH_SCENES[_hashStr(seed) % UNSPLASH_SCENES.length]; return `https://images.unsplash.com/photo-${id}?w=${w}&h=${h}&fit=crop&auto=format&q=70`; }
function personPhotoWH(name, w = 400, h = 500) { const id = UNSPLASH_PEOPLE[_hashStr(name) % UNSPLASH_PEOPLE.length]; return `https://images.unsplash.com/photo-${id}?w=${w}&h=${h}&fit=crop&crop=faces&auto=format&q=70`; }
function Avatar({ name = '', src, size = 40, className = '' }) {
const initials = (name || '?').split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase() || '?';
const idx = (name?.charCodeAt(0) || 0) % AVATAR_PALETTE.length;
const [bg, fg] = AVATAR_PALETTE[idx];
const [imgErr, setImgErr] = useState(false);
const isHub = typeof HUB_NAMES !== 'undefined' && HUB_NAMES.indexOf(name) >= 0;
const photo = src || (!isHub && name ? personPhoto(name, size) : null);
if (photo && !imgErr) {
return 
setImgErr(true)} className={`rounded-full object-cover flex-shrink-0 ${className}`} style={{ width: size, height: size }} />;
}
return (
{initials}
);
}
/* ---------- Image placeholder ---------- */
function ImageBlock({ aspect = '4/3', tone = 'auto', label, className = '', seed = 0, person }) {
// tone determines hue
const hues = [275, 220, 25, 170, 340, 290, 200];
const h = hues[seed % hues.length];
const bg = `linear-gradient(135deg, oklch(0.92 0.05 ${h}), oklch(0.86 0.08 ${h+30}))`;
return (
{ e.currentTarget.style.display = 'none'; }} className="absolute inset-0 w-full h-full object-cover" />
{label &&
{label}}
);
}
/* ---------- Badge / Chip ---------- */
function Badge({ children, tone = 'neutral', className = '' }) {
const tones = {
neutral: 'bg-neutral-100 text-neutral-700',
dark: 'bg-neutral-900 text-white',
success: 'bg-green-100 text-green-700',
warning: 'bg-amber-100 text-amber-700',
error: 'bg-red-100 text-red-700',
info: 'bg-blue-100 text-blue-700',
purple: 'bg-purple-100 text-purple-700',
primaryLight: 'bg-primary/10 text-primary',
};
return {children};
}
function Chip({ children, active = false, className = '', onClick }) {
return (
);
}
/* ---------- Stars ---------- */
function Stars({ rating = 0, size = 14, className = '', showNumber = true }) {
return (
{showNumber && {rating.toFixed(1)}}
);
}
/* ---------- Card primitives ---------- */
function Card({ children, className = '', padding = 'p-5' }) {
return {children}
;
}
/* ---------- Search input ---------- */
function SearchInput({ placeholder = 'What are you looking for?', className = '', size = 'md' }) {
const heights = { sm: 'h-10', md: 'h-12', lg: 'h-14' };
return (
);
}
/* ---------- Tabs ---------- */
function Tabs({ items, value, onChange, className = '' }) {
return (
{items.map(it => (
))}
);
}
/* ---------- Progress ---------- */
function Progress({ value = 0, tone = 'dark', className = '' }) {
const tones = { dark: 'bg-neutral-900', purple: 'bg-purple-600', primary: 'bg-primary' };
return (
);
}
/* ---------- Section heading ---------- */
function SectionHeading({ children, accent, className = '' }) {
return (
{children} {accent && {accent}}
);
}
/* ---------- Auth state (prototype: toggle logged-in / logged-out) ---------- */
let _merekaAuthed = true; // default: logged in (keeps existing app behaviour)
const _merekaAuthSubs = new Set();
function setAuth(v) {
_merekaAuthed = !!v;
_merekaAuthSubs.forEach(fn => fn(_merekaAuthed));
}
function useAuth() {
const [a, setA] = useState(_merekaAuthed);
useEffect(() => {
const fn = (val) => setA(val);
_merekaAuthSubs.add(fn);
setA(_merekaAuthed);
return () => _merekaAuthSubs.delete(fn);
}, []);
return a;
}
/* ---------- Active hub (shared across the dashboard/manage pages) ---------- */
const HUB_NAMES = ['Biji-biji Initiative', 'Mereka', 'Studio Kuala'];
let _merekaHub = (() => { try { return localStorage.getItem('mereka_hub') || HUB_NAMES[0]; } catch (e) { return HUB_NAMES[0]; } })();
const _hubSubs = new Set();
function setHub(h) {
_merekaHub = h;
try { localStorage.setItem('mereka_hub', h); } catch (e) {}
_hubSubs.forEach(fn => fn(h));
}
function getHub() { return _merekaHub; }
function hubIdx(h) { const i = HUB_NAMES.indexOf(h || _merekaHub); return i < 0 ? 0 : i; }
function useHub() {
const [h, setH] = useState(_merekaHub);
useEffect(() => {
const fn = (v) => setH(v);
_hubSubs.add(fn);
setH(_merekaHub);
return () => _hubSubs.delete(fn);
}, []);
return h;
}
/* ---------- Active programme (admin management context) ---------- */
let _activeProg = (() => { try { return JSON.parse(localStorage.getItem('mereka_prog')); } catch (e) { return null; } })()
|| { name: 'AI4U Programme', owner: 'Christ Wales', focus: ['Flagship', 'Applied AI'], status: 'Active', duration: '12 weeks', cohorts: 6, enrolled: 1509, completion: 68, rating: 4.5 };
const _progSubs = new Set();
function setProg(p) {
_activeProg = p;
try { localStorage.setItem('mereka_prog', JSON.stringify(p)); } catch (e) {}
_progSubs.forEach(fn => fn(p));
}
function getProg() { return _activeProg; }
function useProg() {
const [p, setP] = useState(_activeProg);
useEffect(() => {
const fn = (v) => setP(v);
_progSubs.add(fn);
setP(_activeProg);
return () => _progSubs.delete(fn);
}, []);
return p;
}
/* Reusable copy-to-clipboard button with "Copied!" feedback */
function CopyButton({ text, label = 'Copy link', icon = 'external', className = '' }) {
const [copied, setCopied] = useState(false);
const copy = () => {
const t = String(text || '');
try {
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(t);
else { const ta = document.createElement('textarea'); ta.value = t; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); }
} catch (e) {}
setCopied(true); setTimeout(() => setCopied(false), 1800);
};
return (
);
}
Object.assign(window, {
Icon, MerekaLogo, useHashRoute, navigate, Link, useAuth, setAuth, _currentPath, useHub, setHub, getHub, hubIdx, HUB_NAMES, useProg, setProg, getProg,
Button, Avatar, ImageBlock, Badge, Chip, Stars, Card, SearchInput, Tabs, Progress, SectionHeading, CopyButton,
});