/* ============================================================================ MATRIA, shared UI: icons, decorative SVG, status bar, tab bar, portraits. Exposed on window for other babel scripts. ============================================================================ */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ── line icons ─────────────────────────────────────────── */ function Icon({name, size=22, stroke=1.3, ...p}){ const paths = { home:<>, ask:<>, explore:<>, paths:<>, sanctuary:<>, bell:<>, back:<>, chevron:<>, arrow:<>, save:<>, journal:<>, share:<>, sources:<>, filter:<>, legend:<>, star:<>, leaf:<>, more:<>, bookmark:<>, map:<>, check:<>, pen:<>, constellation:<>, letters:<>, plus:<>, minus:<>, lock:<>, search:<>, heart:<>, sun:<>, }; return {paths[name]}; } /* Matria pillar glyphs: shared by splash + onboarding */ function SplashGlyph({kind, size=28}){ const g={ stories:<>, women:<>, knowledge:<>, sources:<>, }; return ; } const MATRIA_PILLARS=[ {key:'stories', label:'Ancient stories', subtitle:'Recovered writings and oral traditions.'}, {key:'women', label:'Radical women', subtitle:'Voices that challenged and endured.'}, {key:'knowledge', label:'Embodied knowledge', subtitle:'Body, spirit, and cosmos.'}, {key:'sources', label:'Real sources', subtitle:'Every source named in full.'}, ]; /* type glyphs (for graph nodes / explore) */ function TypeGlyph({type, size=16}){ const g={ person:<>, myth:<>, political:<>, power:<>, history:<>, science:<>, cosmos:<>, tradition:<>, idea:<>, }; return {g[type]||g.idea}; } /* concept glyphs: feminist literary idea marks, not universal app icons */ function ConceptGlyph({id, size=18}){ const g={ idea:<>, care_ethics:<>, rest_resistance:<>, motherhood_inst:<>, invisible_labour:<>, recognition:<>, reciprocity:<>, interiority:<>, combahee:<>, embodiment:<>, oral_memory:<>, wages_housework:<>, pachamama:<>, ecofeminism:<>, daoist_yin:<>, ubuntu:<>, great_migration:<>, ancestor_veneration:<>, weaving:<>, midwifery:<>, green_belt:<>, }; const mark = g[id] || g.idea; return {mark}; } function hashSeed(str){ let h=0; const s=String(str||'Matria'); for(let i=0;i {type==='idea' ? : } ); } /* ── status bar ─────────────────────────────────────────── */ function StatusBar(){ return (
9:41
); } /* ── tab bar ─────────────────────────────────────────────── */ const TABS = [['Today','home'],['Letters','letters'],['Ask','ask'],['Explore','explore'],['Sanctuary','sanctuary']]; function TabBar({active, onNav}){ const S=useMStore(); const unread = S.unreadInbox().length; return ( ); } /* ── portrait ───────────────────────────────────────────── */ function Portrait({pic, name, id, size=48, round=true, radius=10, collage=false}){ const collageSrc=id?collagePic(id):null; const resolved=pic||collageSrc; const [src,setSrc]=useState(resolved); useEffect(()=>{ setSrc(resolved); },[resolved]); const initials = (name||'?').split(' ').map(w=>w[0]).slice(0,2).join(''); const style={width:size,height:size,borderRadius:round?'50%':radius}; if(src) return {name||''}{ if(src!==collageSrc && collageSrc) setSrc(collageSrc); else setSrc(null); }}/>; const seed=hashSeed(name); const x1=18+(seed%42), y1=16+((seed>>2)%38), x2=38+((seed>>4)%36), y2=42+((seed>>6)%30); const bgHue=seed%5; return (
{initials}
); } /* ── decorative: constellation (splash / loading) ───────── */ function Constellation({w=240, h=240, seed=7, dense=false}){ const data = useMemo(()=>{ let s=seed; const rnd=()=>{s=(s*9301+49297)%233280;return s/233280;}; const cx=w/2, cy=h*0.42, pts=[]; const n = dense? 60 : 34; for(let i=0;i {data.rings && } {data.edges.map(([a,b],i)=>)} {data.pts.map(([x,y,r],i)=>)} ); } /* cinematic constellation field: photographic base + canvas particles. No SVG graphics. Organic drift, twinkle, soft nebula glow, film grain. */ function ConstellationBackground({src='uploads/matria-constellation-bg.png', dim=0.72}){ const canvasRef = useRef(null); const frameRef = useRef(null); const reduce = useMemo(()=>{ try{return window.matchMedia('(prefers-reduced-motion: reduce)').matches;}catch(e){return false;} },[]); useEffect(()=>{ const canvas = canvasRef.current; if(!canvas) return; const ctx = canvas.getContext('2d'); const host = canvas.parentElement; let w=0, h=0, t0=performance.now(); function resize(){ const dpr = Math.min(window.devicePixelRatio||1, 2); w = host.clientWidth; h = host.clientHeight; canvas.width = Math.round(w*dpr); canvas.height = Math.round(h*dpr); canvas.style.width = w+'px'; canvas.style.height = h+'px'; ctx.setTransform(dpr,0,0,dpr,0,0); } resize(); const ro = new ResizeObserver(resize); ro.observe(host); let s=42; const rnd=()=>{s=(s*9301+49297)%233280;return s/233280;}; const stars = Array.from({length: reduce? 48 : 120}, (_,i)=>{ const depth = rnd(); return { x:rnd(), y:rnd(), r:(0.4+depth*2.2)*(i%9===0?1.6:1), base:0.18+depth*0.55, tw: rnd()*Math.PI*2, speed:0.35+rnd()*1.1, driftX:(rnd()-.5)*0.00008, driftY:(rnd()-.5)*0.00006, depth }; }); const arcs = Array.from({length: reduce? 2 : 5}, ()=>{ const cx=rnd(), cy=rnd(), rad=0.12+rnd()*0.28; const a0=rnd()*Math.PI*2, span=0.8+rnd()*1.6; return {cx,cy,rad,a0,span,phase:rnd()*Math.PI*2,speed:0.15+rnd()*0.25}; }); function drawArc(a, alpha, time){ ctx.beginPath(); ctx.arc(a.cx*w, a.cy*h, a.rad*Math.min(w,h), a.a0, a.a0+a.span); ctx.strokeStyle=`rgba(224,176,108,${alpha})`; ctx.lineWidth=0.7; ctx.stroke(); } function tick(now){ const t = (now-t0)*0.001; ctx.clearRect(0,0,w,h); // soft nebula pools stars.filter((_,i)=>i%17===0).forEach((st,i)=>{ const pulse = 0.04+Math.sin(t*0.35+st.tw)*0.025; const gx = st.x*w, gy = st.y*h, gr = 36+st.depth*48; const g = ctx.createRadialGradient(gx,gy,0,gx,gy,gr); g.addColorStop(0,`rgba(212,168,98,${pulse})`); g.addColorStop(1,'rgba(212,168,98,0)'); ctx.fillStyle=g; ctx.fillRect(gx-gr,gy-gr,gr*2,gr*2); }); // organic orbital arcs arcs.forEach(a=>{ const alpha = 0.08+Math.sin(t*a.speed+a.phase)*0.05; drawArc(a, alpha, t); }); // star field stars.forEach(st=>{ st.x += st.driftX; st.y += st.driftY; if(st.x<0) st.x=1; if(st.x>1) st.x=0; if(st.y<0) st.y=1; if(st.y>1) st.y=0; const tw = 0.55+0.45*Math.sin(t*st.speed+st.tw); const alpha = st.base*tw; const x=st.x*w, y=st.y*h; if(st.r>2.2){ const g = ctx.createRadialGradient(x,y,0,x,y,st.r*3.5); g.addColorStop(0,`rgba(240,210,160,${alpha*0.55})`); g.addColorStop(1,'rgba(240,210,160,0)'); ctx.fillStyle=g; ctx.beginPath(); ctx.arc(x,y,st.r*3.5,0,Math.PI*2); ctx.fill(); } ctx.fillStyle=`rgba(232,196,133,${alpha})`; ctx.beginPath(); ctx.arc(x,y,st.r,0,Math.PI*2); ctx.fill(); }); if(!reduce) frameRef.current = requestAnimationFrame(tick); } if(reduce){ tick(performance.now()); } else { frameRef.current = requestAnimationFrame(tick); } return ()=>{ ro.disconnect(); if(frameRef.current) cancelAnimationFrame(frameRef.current); }; },[src, reduce]); return (