// Shared design tokens and primitives for the Daniel Urdaneta site // Paper aesthetic — warm parchment, ink, ochre const tokens = { bg: '#F4F1EA', bgAlt: '#EDE9DF', ink: '#0E0E0C', inkSoft: 'rgba(14,14,12,0.7)', inkMute: 'rgba(14,14,12,0.5)', inkLine: 'rgba(14,14,12,0.12)', inkLineSoft: 'rgba(14,14,12,0.06)', ochre: '#C9A24A', green: '#5A7A3E', red: '#A04A3E', paper: '#FBFAF6', }; const fontDisplay = '"Inter Tight", "Inter", system-ui, sans-serif'; const fontBody = '"Inter", system-ui, sans-serif'; const fontMono = '"JetBrains Mono", monospace'; // ── Roles ───────────────────────────────────────────────────────────────────── // owner — the real account, full powers. // demo_live — shareable demo: edits the private shelves + For Me like the owner, // can run AI research. For Me tickers are its own copy (user-scoped). // demo_view — shareable demo: sees everything, can add/edit, but cannot run AI // research and cannot delete anything (also enforced server-side). // guest — any other signed-in user: public pages only. const getRole = (user) => { const e = user && user.email ? user.email.toLowerCase() : ''; if (!e) return 'guest'; if (window.SITE_OWNER_EMAIL && e === window.SITE_OWNER_EMAIL.toLowerCase()) return 'owner'; if (window.SITE_DEMO_LIVE_EMAIL && e === window.SITE_DEMO_LIVE_EMAIL.toLowerCase()) return 'demo_live'; if (window.SITE_DEMO_VIEW_EMAIL && e === window.SITE_DEMO_VIEW_EMAIL.toLowerCase()) return 'demo_view'; return 'guest'; }; window.getRole = getRole; // ── Dynamic access (site_access table, managed from the Admin page) ─────────── // The owner controls — per authorized email — which private pages are visible // and whether they're full-access or read-only. Built-in owner/demo accounts // keep their existing behavior; any other email is resolved from its // `site_access` row. The private *generic* pages (home/about/…) stay public to // any signed-in user; site_access governs the private shelves + For Me. const PRIVATE_PAGES = ['objects', 'ideas', 'places', 'forme']; const resolveAccess = (user, row) => { const role = getRole(user); let priv = [], level = 'read'; if (role === 'owner') { priv = PRIVATE_PAGES.slice(); level = 'full'; } else if (role === 'demo_live') { priv = PRIVATE_PAGES.slice(); level = 'full'; } else if (role === 'demo_view') { priv = PRIVATE_PAGES.slice(); level = 'read'; } else if (row && row.active) { priv = Array.isArray(row.pages) ? row.pages : []; level = row.access_level === 'full' ? 'full' : 'read'; } return { role, isOwner: role === 'owner', priv: new Set(priv), level, ready: true }; }; window.resolveAccess = resolveAccess; // Fetch + resolve the current user's access (queries site_access only for // non-built-in accounts). Returns the resolved access object. const loadSiteAccess = async (user) => { const role = getRole(user); let row = null; if (role === 'guest' && user && user.email && window._supabaseClient) { try { const { data } = await window._supabaseClient .from('site_access') .select('pages, access_level, active') .eq('email', user.email.toLowerCase()) .maybeSingle(); row = data || null; } catch { row = null; } } return resolveAccess(user, row); }; window.loadSiteAccess = loadSiteAccess; // Publish the resolved access to window so deep components can guard cheaply. const applySiteAccess = (access) => { window.SITE_ACCESS_RESOLVED = access; window.SITE_ACCESS_LEVEL = access.level; // 'full' | 'read' window.siteCanSee = (p) => access.isOwner || access.priv.has(p); window.siteCanWrite = (p) => access.isOwner || (access.priv.has(p) && access.level === 'full'); }; window.applySiteAccess = applySiteAccess; // Convenience guards read by deep components. Honor BOTH the demo_view role and // a resolved read-only access level (invited read-only emails). const roleCanResearch = () => window.SITE_ROLE !== 'demo_view' && window.SITE_ACCESS_LEVEL !== 'read'; const roleCanDelete = () => window.SITE_ROLE !== 'demo_view' && window.SITE_ACCESS_LEVEL !== 'read'; // For Me ticker management (add / edit / remove tickers) — full-access only. const roleCanManageTickers = () => window.SITE_ROLE !== 'demo_view' && window.SITE_ACCESS_LEVEL !== 'read'; const DEMO_BLOCK_MSG = 'This action is disabled on a read-only login. (AI research, edits, and deletions need full access.)'; // Top navigation — sticky, minimal const Nav = ({ route, setRoute, isOwner, access }) => { const isMobile = useIsMobile(); const role = window.SITE_ROLE || (isOwner ? 'owner' : 'guest'); const acc = access || window.SITE_ACCESS_RESOLVED || resolveAccess({ email: role === 'owner' ? window.SITE_OWNER_EMAIL : '' }, null); const isDemo = role === 'demo_live' || role === 'demo_view'; const generic = [ { id: 'home', label: 'Home' }, { id: 'about', label: 'About Me' }, { id: 'investments', label: 'Investments' }, { id: 'thesis', label: 'Innovation Activism' }, ]; const privAll = [ { id: 'objects', label: 'Objects' }, { id: 'ideas', label: 'Ideas' }, { id: 'places', label: 'Places' }, { id: 'forme', label: 'For Me' }, ]; const priv = privAll.filter((p) => acc.priv.has(p.id)); // Private-only visitors (demo accounts + invited emails granted only private // shelves) see ONLY their granted shelves; owner sees everything + Admin; a // plain signed-in guest sees the generic pages. const privateOnly = isDemo || (role === 'guest' && priv.length > 0); const items = role === 'owner' ? [...generic, ...priv, { id: 'admin', label: 'Admin' }] : privateOnly ? priv : generic; const homeRoute = privateOnly ? (priv[0] ? priv[0].id : 'home') : 'home'; const brand = ( setRoute(homeRoute)} style={{ cursor: 'pointer', fontWeight: 500, letterSpacing: '-0.02em', fontSize: '15px', display: 'flex', alignItems: 'center', gap: '10px', flexShrink: 0 }}> DU Daniel Urdaneta ); const contact = ( setRoute('contact')} style={{ cursor: 'pointer', fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, letterSpacing: '0.06em', flexShrink: 0, whiteSpace: 'nowrap' }}> CONTACT → ); const links = (
{items.map(it => ( setRoute(it.id)} style={{ cursor: 'pointer', color: route === it.id || (route.startsWith && route.startsWith(it.id)) ? tokens.ink : tokens.inkSoft, fontWeight: route === it.id ? 500 : 400, whiteSpace: 'nowrap', }}>{it.label} ))}
); const navBase = { position: 'sticky', top: 0, zIndex: 50, background: 'rgba(244,241,234,0.85)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', borderBottom: `1px solid ${tokens.inkLine}`, fontFamily: fontDisplay, fontSize: '13px', }; if (isMobile) { return ( ); } return ( ); }; const Footer = ({ setRoute, signOut, user }) => ( ); // Viewport hook — drives responsive layout switches in inline-styled components const useIsMobile = (bp = 760) => { const query = `(max-width: ${bp}px)`; const [isMobile, setIsMobile] = React.useState( () => (typeof window !== 'undefined' && window.matchMedia ? window.matchMedia(query).matches : false) ); React.useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia(query); const handler = (e) => setIsMobile(e.matches); setIsMobile(mq.matches); mq.addEventListener ? mq.addEventListener('change', handler) : mq.addListener(handler); return () => { mq.removeEventListener ? mq.removeEventListener('change', handler) : mq.removeListener(handler); }; }, [query]); return isMobile; }; // Standardized section container const Section = ({ children, label, title, sub, style }) => { const isMobile = useIsMobile(); return (
{(label || title) && (
{label &&
{label}
} {title &&

{title}

} {sub &&

{sub}

}
)} {children}
); }; // Striped placeholder — for media we don't have real assets for const Placeholder = ({ label, height = 240, ratio }) => (
{label}
); window.useIsMobile = useIsMobile; window.tokens = tokens; window.fontDisplay = fontDisplay; window.fontBody = fontBody; window.fontMono = fontMono; window.Nav = Nav; window.Footer = Footer; window.Section = Section; window.Placeholder = Placeholder;