/* global React */
const { useState, useEffect, useRef } = React;
// ───────── Pill ─────────
function Pill({ children, dot = true }) {
return (
{dot && }
{children}
);
}
// ───────── Type-on prompt line ─────────
function TypeLine({ prompt, command, delay = 0, speed = 30, onDone }) {
const [out, setOut] = useState("");
const [done, setDone] = useState(false);
useEffect(() => {
let cancelled = false;
let i = 0;
const start = setTimeout(() => {
const tick = setInterval(() => {
if (cancelled) return;
i++;
setOut(command.slice(0, i));
if (i >= command.length) {
clearInterval(tick);
setDone(true);
onDone && onDone();
}
}, speed);
}, delay);
return () => { cancelled = true; clearTimeout(start); };
}, [command]);
return (
{prompt}{" "}
{out}
{!done && _}
);
}
// ───────── Copy button ─────────
function CopyBtn({ text }) {
const [ok, setOk] = useState(false);
return (
);
}
// ───────── Section header (terminal command style) ─────────
function SectionHead({ id, cmd, title, meta }) {
return (
{cmd}
{title}
{meta && {meta}}
);
}
// ───────── Brackets wrapper ─────────
function Brackets({ children, style }) {
return (
{children}
);
}
// ───────── Side rail nav ─────────
function SideRail({ sections }) {
const [active, setActive] = useState(sections[0]?.id);
useEffect(() => {
const obs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) setActive(e.target.id);
});
},
{ rootMargin: "-40% 0px -50% 0px", threshold: 0 }
);
sections.forEach((s) => {
const el = document.getElementById(s.id);
if (el) obs.observe(el);
});
return () => obs.disconnect();
}, []);
return (
);
}
// ───────── Top status bar ─────────
function TopBar({ prompt }) {
const [time, setTime] = useState(() => new Date());
useEffect(() => {
const t = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(t);
}, []);
const hh = time.toUTCString().slice(17, 25);
return (
●
{prompt}
uplink stable
UTC {hh}
SYS-2026
);
}
// ───────── Marquee ─────────
function Marquee({ items }) {
const content = items.concat(items).concat(items);
return (
{content.map((t, i) => (
{t}
◆
))}
);
}
Object.assign(window, { Pill, TypeLine, CopyBtn, SectionHead, Brackets, SideRail, TopBar, Marquee });