// Main App — assembles shell, tab routing, search, tweaks
const TABS = [
{ id: "overview", label: "Overview", num: "01" },
{ id: "vocabulary", label: "Era vocabulary", num: "02" },
{ id: "geography", label: "Geography & flaps", num: "03" },
{ id: "archetypes", label: "Archetypes", num: "04" },
{ id: "samenight", label: "Same-night", num: "05" },
{ id: "validation", label: "Validation", num: "06" },
{ id: "narratives", label: "Narratives", num: "07" },
];
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"density": "regular",
"accent": "#d99c5c",
"scanlines": true
}/*EDITMODE-END*/;
function App() {
const data = window.UAP_DATA;
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [tab, setTab] = useState("overview");
const [query, setQuery] = useState("");
const [selectedState, setSelectedState] = useState(null);
const [selectedArchetype, setSelectedArchetype] = useState(null);
const tt = useTooltip();
// Apply tweaks to
useEffect(() => {
const root = document.documentElement;
root.setAttribute("data-theme", t.theme);
root.setAttribute("data-density", t.density);
root.style.setProperty("--accent", t.accent);
// derive soft/line variants
root.style.setProperty("--accent-soft", t.accent + "2e");
root.style.setProperty("--accent-line", t.accent + "8c");
document.body.style.backgroundImage = t.scanlines ? "" : "none";
}, [t]);
// Cmd-K / Ctrl-K focus search
useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
e.preventDefault();
document.getElementById("search-input")?.focus();
}
if (e.key === "Escape") {
setQuery(""); setSelectedState(null); setSelectedArchetype(null);
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
const matchCount = useMemo(() => {
if (!query) return null;
const q = query.toLowerCase();
return {
narratives: data.narratives.filter(n =>
n.text.toLowerCase().includes(q) || n.place.toLowerCase().includes(q)).length,
states: data.states.filter(s => s.name.toLowerCase().includes(q) || s.st.toLowerCase() === q).length,
vocab: data.vocab.filter(v => v.term.includes(q)).length,
archetypes: data.archetypes.filter(a => a.desc.toLowerCase().includes(q) ||
a.terms.some(term => term.includes(q))).length,
};
}, [query, data]);
const onJumpTab = (id) => { setTab(id); window.scrollTo({ top: 0, behavior: "smooth" }); };
const onSelectState = (st) => { setSelectedState(st); };
const onSelectArchetype = (id) => { setSelectedArchetype(id); };
const tabProps = { data, tt, query, onJumpTab, onSelectState, onSelectArchetype };
return (
<>
{/* Classification band */}
corpus analysis · open data · MIT-licensed pipeline
148K RAW → 112K CLEANED
384d EMBEDDINGS
v3.0
{/* Top bar */}
{/* Stat row */}
{/* Search results */}
{query && matchCount && (
matching “{query}” →
{matchCount.narratives} narratives
{matchCount.vocab} vocabulary terms
{matchCount.archetypes} archetypes
{matchCount.states} states
)}
{/* Tabs */}
{/* Body */}
{tab === "overview" && }
{tab === "vocabulary" && }
{tab === "geography" && }
{tab === "archetypes" && }
{tab === "samenight" && }
{tab === "validation" && }
{tab === "narratives" && }
{/* Footer */}
setTweak("theme", v)} />
setTweak("accent", v)} />
setTweak("scanlines", v)} />
setTweak("density", v)} />
{tt.node}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();