/* global React */
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
// ===== Shared context =====
const AppCtx = createContext(null);
const useApp = () => useContext(AppCtx);
// ===== Utility atoms =====
const Rule = ({ v, w, style }) => (
);
const Dot = ({ c, size = 6 }) => (
);
// Small caps label
const Label = ({ children, color, spacing }) => (
{children}
);
// Decorative diamond
const Diamond = ({ size = 4, c }) => (
);
// Ornamental divider with center diamond
const Ornament = ({ label }) => (
);
// Placeholder portrait — subtle striped SVG
const Portrait = ({ seed = 'a', tint = 'var(--her)', label }) => {
const pattern = `portrait-${seed}`;
return (
);
};
// Pulse waveform — ECG-style for her, token-bar for him
const Waveform = ({ kind = 'ecg', color, bpm = 72, animate = true }) => {
const canvasRef = useRef(null);
const rafRef = useRef(0);
useEffect(() => {
const c = canvasRef.current;
if (!c) return;
const ctx = c.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const w = c.clientWidth, h = c.clientHeight;
c.width = w * dpr; c.height = h * dpr;
ctx.scale(dpr, dpr);
let offset = 0;
const speed = animate ? (bpm / 60) * 0.9 : 0;
const ecgShape = (x) => {
// x in [0, 1)
const t = x % 1;
if (t < 0.3) return Math.sin(t * Math.PI / 0.3) * 0.04;
if (t < 0.36) return 0;
if (t < 0.40) return -0.12; // Q
if (t < 0.44) return 0.85; // R (spike up)
if (t < 0.48) return -0.35; // S
if (t < 0.55) return 0;
if (t < 0.75) return Math.sin((t - 0.55) * Math.PI / 0.2) * 0.18; // T
return 0;
};
const render = () => {
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = color;
ctx.lineWidth = 1.2;
ctx.beginPath();
const mid = h / 2;
const cycles = 2.4;
for (let px = 0; px < w; px++) {
const u = (px / w) * cycles + offset;
let y;
if (kind === 'ecg') {
y = mid - ecgShape(u) * h * 0.45;
} else {
// token stream — quantized bars
const seed = Math.floor(u * 14);
const jitter = Math.sin(seed * 12.9898) * 43758.5453;
const v = (jitter - Math.floor(jitter));
const local = (u * 14) % 1;
const envelope = Math.sin(local * Math.PI);
y = mid - (v * 0.6 + 0.05) * envelope * h * 0.4;
}
if (px === 0) ctx.moveTo(px, y); else ctx.lineTo(px, y);
}
ctx.stroke();
// faint baseline
ctx.strokeStyle = color;
ctx.globalAlpha = 0.15;
ctx.beginPath();
ctx.moveTo(0, mid); ctx.lineTo(w, mid);
ctx.stroke();
ctx.globalAlpha = 1;
offset += 0.004 * speed;
rafRef.current = requestAnimationFrame(render);
};
render();
return () => cancelAnimationFrame(rafRef.current);
}, [color, bpm, kind, animate]);
return ;
};
// Live-ticking number
const TickerNum = ({ value, min = -1, max = 1, decimals = 0, interval = 1200, suffix = '' }) => {
const [v, setV] = useState(value);
useEffect(() => {
const id = setInterval(() => {
const delta = (Math.random() - 0.5) * 2;
const range = Math.max(1, Math.abs(value) * 0.02);
setV(Math.max(value + min, Math.min(value + max, value + delta * range)));
}, interval);
return () => clearInterval(id);
}, [value, interval, min, max]);
const shown = decimals > 0 ? v.toFixed(decimals) : Math.round(v);
return {shown}{suffix};
};
Object.assign(window, {
AppCtx, useApp,
Rule, Dot, Label, Diamond, Ornament,
Portrait, Waveform, TickerNum,
});