// bauhaus-shared.jsx — Chrome (Header / Footer / HelpOverlay) and the small
// widgets that more than one page renders (SectionLabel, LiveDot, Pill, EmptyNote).
(function() {
const { useState } = React;
// ─── Cross-page utility widgets ─────────────────────────────────────────────
window.SectionLabel = function SectionLabel({ n, children }) {
return (
── {n} / {children}
);
};
window.LiveDot = function LiveDot() {
return (
LIVE
);
};
window.Pill = function Pill({ kind }) {
const map = {
'closed-source': { glyph: '■', label: 'Closed-source' },
'open-source': { glyph: '◇', label: 'Open-source' },
art: { glyph: '●', label: 'Art' },
engineering: { glyph: '■', label: 'Engineering' },
};
const m = map[kind];
if (!m) return null;
return (
{m.glyph}
{m.label}
);
};
window.NewsFlash = function NewsFlash({ items, nav }) {
if (!items || items.length === 0) return null;
const TYPE_MS = 95; // ms per word while typing
const ERASE_MS = 40; // ms per word while erasing
const HOLD_MS = 3200; // pause once fully typed before erasing
const reduceMotion = React.useMemo(() => (
typeof matchMedia !== 'undefined' &&
matchMedia('(prefers-reduced-motion: reduce)').matches
), []);
const wordLists = React.useMemo(
() => items.map(it => (it.text || '').split(/\s+/).filter(Boolean)),
[items]
);
const [idx, setIdx] = React.useState(0);
const [count, setCount] = React.useState(0);
const [phase, setPhase] = React.useState('typing'); // typing | erasing
React.useEffect(() => {
const item = items[idx];
const words = wordLists[idx];
if (!item || !words) return;
let t;
if (reduceMotion) {
setCount(words.length);
t = setTimeout(() => {
setIdx((idx + 1) % items.length);
setCount(0);
}, 4500);
return () => clearTimeout(t);
}
if (phase === 'typing') {
if (count < words.length) {
t = setTimeout(() => setCount(c => c + 1), TYPE_MS);
} else {
t = setTimeout(() => setPhase('erasing'), HOLD_MS);
}
} else {
if (count > 0) {
t = setTimeout(() => setCount(c => c - 1), ERASE_MS);
} else {
setIdx((idx + 1) % items.length);
setPhase('typing');
}
}
return () => clearTimeout(t);
}, [count, phase, idx, items, wordLists, reduceMotion]);
const item = items[idx];
const shown = (wordLists[idx] || []).slice(0, count).join(' ');
const linkProps = item.url ? {
href: item.url,
target: item.url.startsWith('http') ? '_blank' : undefined,
rel: item.url.startsWith('http') ? 'noreferrer' : undefined,
onClick: (e) => {
if (item.url.startsWith('#/')) {
e.preventDefault();
nav && nav(item.url.slice(1));
}
},
} : null;
return (