// ──────────────────────────────────────────────────────────────
// LIULIAN — atom components shared across pages
// ──────────────────────────────────────────────────────────────
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/** A tiny seeded RNG so generated visuals are stable across renders. */
function rng(seed) {
return () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
}
/** Pure SVG sparkline. */
function Sparkline({ data, width = 80, height = 22, stroke = "currentColor", fill, dashed = false, lastDot = false }) {
if (!data || !data.length) return null;
const min = Math.min(...data);
const max = Math.max(...data);
const span = max - min || 1;
const stepX = data.length > 1 ? width / (data.length - 1) : width;
const points = data.map((v, i) => [i * stepX, height - 2 - ((v - min) / span) * (height - 4)]);
const d = points.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
const area = fill ? d + ` L ${width},${height} L 0,${height} Z` : null;
const last = points[points.length - 1];
return (
);
}
/** Column-level mini histogram, hairline bars. */
function MiniHistogram({ buckets = 16, seed = 1, color = "var(--ink)", width = 80, height = 22 }) {
const r = useMemo(() => rng(seed), [seed]);
const bars = useMemo(() => Array.from({ length: buckets }, () => 0.3 + Math.abs(r() - 0.5) * 1.6), [buckets, seed]);
const max = Math.max(...bars);
const gap = 1;
const bw = (width - gap * (buckets - 1)) / buckets;
return (
);
}
/** Status by typography — italic running, bold failed, muted otherwise. */
function StatusLabel({ value }) {
if (value === "running") return running;
if (value === "failed") return failed;
if (value === "pending") return pending;
if (value === "queued") return queued;
if (value === "completed")return completed;
return {value};
}
/** Section heading — Fraunces with a tiny scientific specimen line beneath. */
function PageTitle({ title, kicker, specimen, right }) {
return (
{kicker &&
{kicker}
}
{title}
{specimen &&
{specimen}
}
{right}
}
);
}
/** Section divider with running serif label and right-aligned mono meta. */
function RunningHead({ label, meta, italicLabel = true }) {
return (
);
}
/** Square segmented control. */
function Segmented({ options, value, onChange, size = "md" }) {
return (
{options.map((o, i) => {
const v = typeof o === "string" ? o : o.value;
const lbl = typeof o === "string" ? o : o.label;
const active = v === value;
return (
);
})}
);
}
/** Margin-note: Tufte-style. */
function MarginNote({ children }) {
return (
);
}
/** Rose-curve loader — math-curve aesthetic from the references. */
function RoseLoader({ size = 14, color = "var(--bern)" }) {
return (
);
}
/** Big number block (KPI). */
function KPI({ label, value, unit, sub, accent }) {
return (
{label}
{value}{unit && {unit}}
{sub &&
{sub}
}
);
}
/** A 6-char hash chip. */
function HashChip({ value, prefix = "" }) {
return {prefix}{value};
}
/** Resource-name with id underneath. */
function NameWithId({ name, id, idLabel }) {
return (
{name}
{idLabel ? idLabel + " · " : ""}{id}
);
}
/** Live clock — UTC, ticks every second. */
function LiveClock() {
const [t, setT] = useState(() => new Date());
useEffect(() => { const i = setInterval(() => setT(new Date()), 1000); return () => clearInterval(i); }, []);
const iso = t.toISOString();
return {iso.slice(0, 10)} {iso.slice(11, 19)} UTC;
}
Object.assign(window, {
Sparkline, MiniHistogram, StatusLabel, PageTitle, RunningHead, Segmented,
MarginNote, RoseLoader, KPI, HashChip, NameWithId, LiveClock, rng,
});