/* ============================================================ DARWIN — Biology Course Herbarium / specimen aesthetic — sepia on warm paper ============================================================ */ const {useState, useEffect, useRef, useMemo} = React; const PHASES = [ {id:1, name:'Cells & Molecules'}, {id:2, name:'Genetics'}, {id:3, name:'Evolution'}, {id:4, name:'Ecology'}, {id:5, name:'Physiology'}, ]; const DAYS = [ {id:1, phase:1, title:'The Cell', sub:'organelles · boundaries', intro:'Every living thing is a cell, or a colony of cells. The first microscopes revealed a second world — bounded, compartmented, improvised — where molecules cooperate to be alive.', sections:[ {h:'The membrane', p:'A phospholipid bilayer — hydrophobic tails facing inward, hydrophilic heads facing water. It\'s flexible, self-healing, and selectively permeable. The first decision any cell makes is what to let in.'}, {h:'The nucleus & genetic core', p:'In eukaryotes, DNA lives in a nucleus — a membrane-bound library. In prokaryotes, it floats free in the cytoplasm. Both are readable by the same molecular machinery.'}, {callout:'Mitochondria have their own DNA, circular and bacterial. The leading hypothesis: billions of years ago one cell swallowed another and they never separated. You are walking around with ancient endosymbionts.'}, ], artifact:'cell-diagram', drill:'organelles'}, {id:2, phase:1, title:'DNA → RNA → Protein', sub:'the central dogma', intro:'Information flows one way in biology: DNA holds the blueprint, RNA carries the message, proteins do the work. Every living cell — every virus, every you — runs this pipeline.', sections:[ {h:'Transcription', p:'RNA polymerase reads a DNA strand and builds a complementary mRNA copy. A → U, T → A, G → C, C → G. The copy can leave the nucleus.'}, {h:'Translation', p:'Ribosomes read mRNA three letters at a time (a codon). Each codon specifies one of 20 amino acids, or a stop. The chain folds into a protein.'}, {formula:'DNA → mRNA → ribosome → amino acids → protein'}, ], artifact:'codon-table', drill:'transcribe'}, {id:3, phase:2, title:'Mendelian Inheritance', sub:'dominant · recessive · Punnett', intro:'An Augustinian monk counted pea plants for eight years and discovered the first rule of genetics. One gene. Two alleles. Traits that skip generations and come back predictably.', sections:[ {h:'Alleles', p:'Each gene comes in versions. Capital letter = dominant, lowercase = recessive. Every organism has two copies (one from each parent). You show the dominant trait if you have at least one dominant allele.'}, {h:'The Punnett square', p:'Cross Aa × Aa. Offspring genotypes: 1 AA : 2 Aa : 1 aa. Phenotypes: 3 dominant : 1 recessive. This 3:1 ratio, repeated across thousands of pea plants, is how Mendel found the rules.'}, ], artifact:'punnett', drill:'punnett'}, {id:4, phase:3, title:'Natural Selection', sub:'variation · heritability · differential success', intro:'Darwin\'s dangerous idea, in three lines: individuals vary; variation is inherited; some variants survive and reproduce more than others. Repeat for enough generations and you get finches with fourteen beak shapes.', sections:[ {h:'The three conditions', p:'For evolution by natural selection, you need: (1) variation in the population, (2) that variation being heritable, and (3) differential reproductive success. All three, or nothing happens.'}, {callout:'Selection does not have a direction. It pushes toward whatever works in the current environment. Change the environment and a once-advantageous trait becomes a liability — the peppered moth, the polar bear.'}, ], artifact:'selection-sim', drill:'fitness'}, {id:5, phase:4, title:'Populations & Ecosystems', sub:'carrying capacity · trophic pyramids', intro:'Biology at scale. Populations grow exponentially until they can\'t, then oscillate around their carrying capacity. Energy flows from sun to plant to animal to animal, losing ~90% at each step.', sections:[ {h:'Logistic growth', p:'Populations grow fast when small, slow as they approach the carrying capacity K. dN/dt = rN(1 - N/K) — the equation that governs rabbits, bacteria, and human cities.'}, {formula:'dN/dt = rN(1 − N/K)'}, {h:'Trophic pyramids', p:'Primary producers (plants) → herbivores → carnivores → apex predators. Only ~10% of energy passes up each level, which is why apex predators are rare.'}, ], artifact:'logistic', drill:'logistic'}, {id:6, phase:5, title:'Homeostasis', sub:'feedback loops · set points', intro:'Every living thing maintains an internal environment very different from outside. Body temperature at 37°C, blood pH at 7.4, glucose at ~90 mg/dL. Homeostasis is the technology for staying the same.', sections:[ {h:'Negative feedback', p:'A perturbation triggers a response that counteracts it. Too hot → sweat → cool down. Too cold → shiver → warm up. Most of physiology is negative feedback loops.'}, {h:'Positive feedback', p:'Rare — because it\'s dangerous. Blood clotting, childbirth, action potentials. Each one ends in a definite outcome, then stops.'}, ], artifact:'feedback', drill:'feedback'}, ]; const CHALLENGES = [ {id:'b1', day:1, title:'Identify the organelle', difficulty:'easy', xp:15, prompt:'Which organelle has its own circular DNA, suggesting a bacterial ancestor?', options:['Nucleus','Mitochondrion','Golgi apparatus','Ribosome'], correct:1, hint:'Endosymbiotic theory.', solution:'Mitochondria (and chloroplasts) have their own circular DNA — remnants of their ancient bacterial origins.'}, {id:'b2', day:2, title:'Transcribe a sequence', difficulty:'medium', xp:25, prompt:'DNA template: 3′-TACGGA-5′. What is the mRNA (5′→3′)?', free:true, answer:'AUGCCU', unit:'', hint:'Complement + read 5′→3′. T→A, A→U, G→C, C→G.', solution:'mRNA = 5′-AUGCCU-3′. Each base is the complement of the template, read in reverse.'}, {id:'b3', day:3, title:'Monohybrid cross', difficulty:'medium', xp:30, prompt:'Aa × Aa. Fraction of offspring with aa genotype?', free:true, answer:'0.25', tol:0.01, unit:'', hint:'Punnett square: AA, Aa, Aa, aa → 1/4 aa.', solution:'1/4 or 0.25 — the Aa × Aa cross gives a 1:2:1 genotype ratio.'}, {id:'b4', day:4, title:'Hardy-Weinberg', difficulty:'hard', xp:40, prompt:'If q² = 0.16 (recessive homozygotes), what is the allele frequency q?', free:true, answer:'0.4', tol:0.02, unit:'', hint:'q = √(q²)', solution:'q = √0.16 = 0.4. Then p = 1 - q = 0.6 and heterozygotes = 2pq = 0.48.'}, {id:'b5', day:5, title:'Carrying capacity', difficulty:'medium', xp:30, prompt:'At N = K/2, dN/dt is at its maximum. True or false?', options:['True','False'], correct:0, hint:'Differentiate rN(1-N/K) and set to zero.', solution:'True — growth is fastest at half carrying capacity, where dN/dt = rK/4.'}, {id:'b6', day:6, title:'Negative feedback', difficulty:'easy', xp:20, prompt:'Which is an example of POSITIVE feedback?', options:['Sweating when hot','Shivering when cold','Blood clotting','Insulin release after a meal'], correct:2, hint:'Positive feedback amplifies toward a definite end.', solution:'Blood clotting: one activated factor activates more, rapidly producing a clot.'}, ]; const RANKS = ['Collector','Field Assistant','Taxonomist','Naturalist','Curator','Fellow']; const BADGES = [ {id:'b1', n:'Cytology', e:true, ic:'①'}, {id:'b2', n:'Central Dogma', e:true, ic:'②'}, {id:'b3', n:'Heredity', e:false, ic:'③'}, {id:'b4', n:'Selection', e:false, ic:'④'}, {id:'b5', n:'Ecology', e:false, ic:'⑤'}, {id:'b6', n:'Physiology', e:false, ic:'⑥'}, {id:'b7', n:'Anatomy', e:false, ic:'⑦'}, {id:'b8', n:'Behavior', e:false, ic:'⑧'}, ]; function App(){ const [theme,setTheme] = useState(()=>localStorage.getItem('dw_theme')||'light'); const [view,setView] = useState(()=>localStorage.getItem('dw_view')||'dash'); const [phase,setPhase] = useState(1); const [xp,setXp] = useState(()=>+localStorage.getItem('dw_xp')||0); const [completed,setCompleted] = useState(()=>{ try{return JSON.parse(localStorage.getItem('dw_comp'))||{}}catch{return {}} }); const [lesson,setLesson] = useState(null); const [challenge,setChallenge] = useState(null); const [toast,setToast] = useState(null); useEffect(()=>{document.documentElement.dataset.theme = theme; localStorage.setItem('dw_theme',theme)},[theme]); useEffect(()=>{localStorage.setItem('dw_view',view)},[view]); useEffect(()=>{localStorage.setItem('dw_xp',xp)},[xp]); useEffect(()=>{localStorage.setItem('dw_comp',JSON.stringify(completed))},[completed]); const award = (n,label)=>{setXp(x=>x+n); showToast(`+${n} XP · ${label||'EARNED'}`)}; const showToast = (m)=>{setToast(m); setTimeout(()=>setToast(null),1800)}; const markDone = (id)=>setCompleted(c=>({...c,[id]:true})); const rankIdx = Math.min(RANKS.length-1, Math.floor(xp/200)); const nextRankXp = (rankIdx+1)*200; return <>
Darwin
Natural History
Rank · {RANKS[rankIdx]}
XP
{xp}/{nextRankXp}
✦ 3 day streak
{[ ['dash','Field Notes'],['learn','Curriculum'],['challenges','Problems'], ['sandbox','Herbarium'],['profile','Ledger'] ].map(([k,l]) => )}
{view==='dash' && setLesson(id)} onOpenSandbox={()=>setView('sandbox')} completed={completed}/>} {view==='learn' && setLesson(id)} completed={completed}/>} {view==='challenges' && setChallenge(id)} completed={completed}/>} {view==='sandbox' && } {view==='profile' && }
{lesson !== null && d.id===lesson)} onClose={()=>setLesson(null)} onDone={(id)=>{markDone('d'+id); award(50,'LESSON COMPLETE'); setLesson(null)}} done={!!completed['d'+lesson]}/>} {challenge && c.id===challenge)} onClose={()=>setChallenge(null)} onSolve={(ch)=>{markDone(ch.id); award(ch.xp,'SOLVED'); setChallenge(null)}} done={!!completed[challenge]}/>} {toast &&
{toast}
} ; } function Dashboard({xp, phase, setPhase, onOpenDay, onOpenSandbox, completed}){ const lessonCount = Object.keys(completed).filter(k=>k.startsWith('d')).length; const probCount = Object.keys(completed).filter(k=>k.startsWith('b')).length; return <>
Today · Cells

Every living thing is a cell — or a colony of cells.

We begin where biology begins: with membranes, organelles, and the quiet chemistry that separates alive from not-alive. Today\'s lesson traces the ancient bargain between a cell and its mitochondria.

{lessonCount}
Lessons
{probCount}
Problems
{xp}
XP total
From the Voyage

"It is not the strongest that survives, nor the most intelligent, but the one most responsive to change."

— ATTRIBUTED TO DARWIN

Phase · {PHASES.find(p=>p.id===phase).name} // {phase} OF {PHASES.length}
{DAYS.filter(d=>d.phase===phase).map(d =>
onOpenDay(d.id)}>
{d.id.toString().padStart(2,'0')}
Day · {d.sub}

{d.title}

~20 min· 1 artifact· 1 drill
)}
Phases // TRACK
{PHASES.map(p =>
setPhase(p.id)} style={{cursor:'pointer',borderColor:phase===p.id?'var(--g)':'var(--line)'}}>
{p.id.toString().padStart(2,'0')}
{p.name}
)}
; } function Curriculum({phase, setPhase, onOpenDay, completed}){ return <>
Curriculum // {DAYS.filter(d=>d.phase===phase).length} LESSONS · PHASE {phase}
{PHASES.map(p => )}
{DAYS.filter(d=>d.phase===phase).map(d =>
onOpenDay(d.id)}> {completed['d'+d.id] &&
✓
}
Lesson · {d.id.toString().padStart(2,'0')}

{d.title}

{d.intro}

~20 min· {d.sections.length} sections· 1 artifact
)}
; } function LessonOverlay({day, onClose, onDone, done}){ const [step,setStep] = useState(0); const stepNames = ['Read','Artifact','Drill']; return
Lesson {day.id.toString().padStart(2,'0')} · {stepNames[step]}

{day.title}

{stepNames.map((s,i) => )}
{step===0 && <>

{day.intro}

{day.sections.map((s,i) => { if(s.formula) return
{s.formula}
; if(s.callout) return
{s.callout}
; return

{s.h}

{s.p}

; })} } {step===1 && <>

Study the specimen. Move the controls. Observe what changes.

} {step===2 && <>

Test the idea. Solve the drill to mark this lesson complete.

onDone(day.id)}/> }
{done?'✓ COMPLETE':'STEP '+(step+1)+' OF 3'}
{step<2 ? : }
; } function ArtifactWidget({kind}){ if(kind==='cell-diagram') return ; if(kind==='codon-table') return ; if(kind==='punnett') return ; if(kind==='selection-sim') return ; if(kind==='logistic') return ; if(kind==='feedback') return ; return
Artifact
Placeholder
; } function CellDiagram(){ const [zoom,setZoom] = useState(1); return
Artifact · Eukaryotic cell
Interactive specimen
setZoom(+e.target.value)}/>{zoom.toFixed(2)}×
nucleus mitochondrion chloroplast ER {[...Array(12)].map((_,i) => )} ribosomes
Fig. 01 — simplified eukaryotic cell, after Hooke & Leeuwenhoek.
; } function CodonLookup(){ const [seq,setSeq] = useState('AUGCCU'); const codons = seq.toUpperCase().replace(/[^AUGC]/g,'').match(/.{1,3}/g) || []; const table = { AUG:'Met (START)',UUU:'Phe',UUC:'Phe',UUA:'Leu',UUG:'Leu',CUU:'Leu',CUC:'Leu',CUA:'Leu',CUG:'Leu', AUU:'Ile',AUC:'Ile',AUA:'Ile',GUU:'Val',GUC:'Val',GUA:'Val',GUG:'Val', UCU:'Ser',UCC:'Ser',UCA:'Ser',UCG:'Ser',CCU:'Pro',CCC:'Pro',CCA:'Pro',CCG:'Pro', ACU:'Thr',ACC:'Thr',ACA:'Thr',ACG:'Thr',GCU:'Ala',GCC:'Ala',GCA:'Ala',GCG:'Ala', UAU:'Tyr',UAC:'Tyr',UAA:'STOP',UAG:'STOP',UGA:'STOP', CAU:'His',CAC:'His',CAA:'Gln',CAG:'Gln',AAU:'Asn',AAC:'Asn',AAA:'Lys',AAG:'Lys', GAU:'Asp',GAC:'Asp',GAA:'Glu',GAG:'Glu',UGU:'Cys',UGC:'Cys',UGG:'Trp', CGU:'Arg',CGC:'Arg',CGA:'Arg',CGG:'Arg',AGU:'Ser',AGC:'Ser',AGA:'Arg',AGG:'Arg', GGU:'Gly',GGC:'Gly',GGA:'Gly',GGG:'Gly' }; return
Artifact · Codon table
mRNA → amino acid
setSeq(e.target.value)} style={{padding:'6px 10px',border:'1px solid var(--line)',background:'var(--bg)',fontFamily:'IBM Plex Mono, monospace',fontSize:13,letterSpacing:2,textTransform:'uppercase',color:'var(--ink)'}}/>
{codons.map((c,i) => { const aa = table[c] || '?'; const stop = aa==='STOP'; return
{c}
{aa}
; })}
; } function PunnettArt(){ const [p1,setP1] = useState('Aa'); const [p2,setP2] = useState('Aa'); const cells = []; for(const a of p1) for(const b of p2) cells.push((a+b).split('').sort((x,y)=>{ // uppercase first if(x===x.toUpperCase() && y!==y.toUpperCase()) return -1; if(y===y.toUpperCase() && x!==x.toUpperCase()) return 1; return 0; }).join('')); const classify = g => { if(g[0]===g[0].toUpperCase() && g[1]===g[1].toUpperCase()) return 'dom'; if(g[0]!==g[0].toUpperCase() && g[1]!==g[1].toUpperCase()) return 'rec'; return 'het'; }; return
Artifact · Punnett square
Monohybrid cross
{p2[0]}
{p2[1]}
{p1[0]}
{cells[0]}
{cells[1]}
{p1[1]}
{cells[2]}
{cells[3]}
Homozygous dom: {cells.filter(c=>classify(c)==='dom').length}/4 · heterozygous: {cells.filter(c=>classify(c)==='het').length}/4 · recessive: {cells.filter(c=>classify(c)==='rec').length}/4
; } function SelectionSim(){ const [pressure,setPressure] = useState(0.5); const [gen,setGen] = useState(0); const [pop,setPop] = useState(() => Array.from({length:40},() => Math.random())); const run = () => { const next = []; for(let i=0;i<40;i++){ const fit = Math.random(); const survive = fit < (1 - pressure*(1-pop[Math.floor(Math.random()*pop.length)])); if(survive) next.push(Math.min(1, pop[Math.floor(Math.random()*pop.length)] + (Math.random()-0.3)*0.08)); } while(next.length<40) next.push(Math.random()); setPop(next); setGen(g=>g+1); }; const avg = pop.reduce((a,b)=>a+b,0)/pop.length; return
Artifact · Natural selection
Trait drift over generations
setPressure(+e.target.value)}/>{pressure.toFixed(2)}
{pop.map((v,i) => )} gen {gen} avg trait: {avg.toFixed(2)}
; } function LogisticArt(){ const [r,setR] = useState(0.3); const [K,setK] = useState(500); const pts = []; let N = 10; for(let t=0;t<=60;t++){ pts.push([t,N]); N = N + r*N*(1-N/K); } return
Artifact · Logistic growth
dN/dt = rN(1 − N/K)
setR(+e.target.value)}/>{r.toFixed(2)}
setK(+e.target.value)}/>{K}
K `${30+t*6.3},${140-Math.min(n,1000)/1000*120}`).join(' ')} stroke="var(--g)" strokeWidth="1.8" fill="none"/> N t
; } function FeedbackArt(){ const [setpt,setSetpt] = useState(37); const [disturb,setDisturb] = useState(0); const [t,setT] = useState(0); const [temp,setTemp] = useState(37); useEffect(()=>{ const id = setInterval(()=>{ setT(x=>x+0.2); setTemp(c => c + (setpt-c)*0.08 + disturb*0.3 + (Math.random()-0.5)*0.1); },100); return ()=>clearInterval(id); },[setpt,disturb]); const history = useRef([]); history.current = [...history.current, temp].slice(-100); return
Artifact · Negative feedback
Body temperature regulation
setSetpt(+e.target.value)}/>{setpt}°C
setDisturb(+e.target.value)}/>{disturb.toFixed(1)}
`${i*4.2},${70-(v-37)*8}`).join(' ')} stroke="var(--g)" strokeWidth="1.5" fill="none"/> temp time →
Current: {temp.toFixed(2)} °C
; } function DrillWidget({kind, onSolve}){ const [answer,setAnswer] = useState(''); const [result,setResult] = useState(null); const drills = { 'organelles': {q:'Which organelle performs aerobic respiration?', opts:['Nucleus','Ribosome','Mitochondrion','Golgi'], correct:2}, 'transcribe': {q:'DNA: 3′-AAT-5′. What is mRNA 5′→3′?', a:'AUU'}, 'punnett': {q:'Aa × aa. Fraction heterozygous offspring?', a:'0.5', tol:0.02}, 'fitness': {q:'If an allele has 10% advantage per generation, after 10 generations it becomes ~__× more common? (e.g. 2.59)', a:'2.59', tol:0.2}, 'logistic': {q:'At N=K, dN/dt = ?', opts:['0','rK','rK/4','K/r'], correct:0}, 'feedback': {q:'Shivering when cold is an example of ___ feedback.', opts:['positive','negative','zero','random'], correct:1}, }; const d = drills[kind] || drills['organelles']; const check = ()=>{ if(d.opts){ const idx = parseInt(answer); if(idx===d.correct){setResult('ok'); setTimeout(onSolve,500)} else setResult('no'); } else { const v = d.tol ? parseFloat(answer) : answer.trim().toUpperCase(); if(d.tol ? Math.abs(v-parseFloat(d.a))<=d.tol : v===d.a.toUpperCase()){setResult('ok'); setTimeout(onSolve,500)} else setResult('no'); } }; return
Drill
{d.q}
{d.opts ?
{d.opts.map((o,i) => )}
: setAnswer(e.target.value)} placeholder="your answer" style={{padding:'8px 12px',border:'1px solid var(--line)',background:'var(--bg)',color:'var(--ink)',fontFamily:'Playfair Display',fontStyle:'italic',fontSize:16,marginTop:10,width:'100%'}}/>}
{result==='ok' && ✓ Correct.} {result==='no' && Not quite. Try again.}
; } function Challenges({onOpen, completed}){ return <>
Problem set // {CHALLENGES.length} PROBLEMS
{CHALLENGES.map(c =>
onOpen(c.id)}> {completed[c.id] &&
✓
}
{c.difficulty} · {c.xp} XP

{c.title}

{c.prompt}

Lesson {c.day}
)}
; } function ChallengeOverlay({ch, onClose, onSolve, done}){ const [answer,setAnswer] = useState(''); const [result,setResult] = useState(null); const [showHint,setShowHint] = useState(false); const [showSol,setShowSol] = useState(false); const check = ()=>{ if(ch.options){ const idx = parseInt(answer); if(idx===ch.correct){setResult('ok'); setTimeout(()=>onSolve(ch),700)} else setResult('no'); } else { const v = ch.tol ? parseFloat(answer) : answer.trim().toUpperCase(); if(ch.tol ? Math.abs(v-parseFloat(ch.answer))<=ch.tol : v===ch.answer.toUpperCase()){setResult('ok'); setTimeout(()=>onSolve(ch),700)} else setResult('no'); } }; return
{ch.difficulty} · {ch.xp} XP

{ch.title}

{ch.prompt}

{ch.options ?
{ch.options.map((o,i) => )}
: setAnswer(e.target.value)} placeholder="your answer" style={{padding:'10px 14px',border:'1px solid var(--line)',background:'var(--bg)',color:'var(--ink)',fontFamily:'Playfair Display',fontStyle:'italic',fontSize:18,width:'100%'}}/>}
{result==='ok' && ✓ Correct.} {result==='no' && Not quite. Check your work.}
{showHint &&
Hint. {ch.hint}
} {showSol &&
Solution. {ch.solution}
}
{done?'✓ SOLVED':'OPEN'}
; } /* Sandbox — Herbarium (cell builder + phylogeny) */ function Sandbox({onAward}){ const [objects,setObjects] = useState([]); const [selected,setSelected] = useState(null); const [inspector,setInspector] = useState('specimen'); const [mode,setMode] = useState('cell'); // 'cell' | 'tree' const canvasRef = useRef(null); const draggingRef = useRef(null); const addOrg = (kind)=>{ const id = 'o'+Date.now(); const colors = {nucleus:'plum',mito:'red',chloro:'g',ribo:'sepia'}; setObjects(os => [...os, {id, kind, x:80+Math.random()*200, y:80+Math.random()*150}]); }; const onPointerDown = (e, obj)=>{ e.stopPropagation(); const r = canvasRef.current.getBoundingClientRect(); draggingRef.current = {id:obj.id, dx:e.clientX-r.left-obj.x, dy:e.clientY-r.top-obj.y}; setSelected(obj.id); }; const onPointerMove = (e)=>{ if(!draggingRef.current) return; const r = canvasRef.current.getBoundingClientRect(); const nx = e.clientX-r.left-draggingRef.current.dx; const ny = e.clientY-r.top-draggingRef.current.dy; setObjects(os => os.map(o => o.id===draggingRef.current.id ? {...o, x:nx, y:ny} : o)); }; const onPointerUp = ()=>{draggingRef.current = null}; const sel = objects.find(o=>o.id===selected); return

Mode

{mode==='cell' && <>

Organelles

Specimens

} {mode==='tree' && <>

Phylogeny

A cladogram of living kingdoms. Hover branches in the canvas.
}
setSelected(null)}>
{mode==='cell' && <> {objects.map(o => { const cls = 'prim '+(selected===o.id?'selected':''); const shape = { nucleus:
nucleus
, mito:
mito
, chloro:
Cl
, ribo:
}[o.kind]; return
onPointerDown(e,o)}>{shape}
; })} {objects.length===0 &&
Drag organelles from the rail, or load a specimen.
} } {mode==='tree' &&
Bacteria Archaea Eukarya (extinct) LUCA Three-domain tree of life (after Woese, 1977)
}
{['specimen','notes','taxonomy'].map(t => )}
{inspector==='specimen' && <>

Inspector

{sel ? <>
organelle{sel.kind}
x{sel.x.toFixed(0)}
y{sel.y.toFixed(0)}
:
Select an organelle.
}

Counts

total{objects.length}
nuclei{objects.filter(o=>o.kind==='nucleus').length}
mitochondria{objects.filter(o=>o.kind==='mito').length}
chloroplasts{objects.filter(o=>o.kind==='chloro').length}
} {inspector==='notes' && <>

Field notes