// crovi-primitives.jsx — small reusable visual atoms for the hero animation.
// Theme: 'dark' (default) or 'light'. Set window.CROVI_THEME = 'light' before
// this script loads to get the cream/editorial palette.
const __THEME = (typeof window !== 'undefined' && window.CROVI_THEME === 'light') ? 'light' : 'dark';
const __isLight = __THEME === 'light';
// T(str): tokenizing transform that maps dark-ink surface oklch values to the
// cream palette when in light mode. Identity in dark mode.
//
// Rule:
// - Keep colors that are clearly brand (chroma > 0.06) or already light
// (L >= 0.7). Brand teal, amber, and brand-fill highlights pass through.
// - Flip everything else by mapping the dark luminance to a warm light one:
// newL = clamp(0.96 - L * 0.78, 0, 1)
// and warming blue surfaces (H 230–270) to hue 80. Brand-tinted surfaces
// (e.g. oklch(0.16 0.02 195)) keep their hue but become light tints.
//
// Template literals resolve before T() runs, so dynamic heat/pulse-based
// colors arrive here as fully-numeric strings and flip cleanly.
function paletteTransform(str) {
if (typeof str !== 'string' || str.indexOf('oklch(') === -1) return str;
return str.replace(
/oklch\(\s*([\d.]+)\s+([\d.]+)\s+(\d+(?:\.\d+)?)\s*(\/\s*[^)]+)?\s*\)/g,
function (full, lStr, cStr, hStr, alpha) {
const L = parseFloat(lStr), Ch = parseFloat(cStr), H = parseFloat(hStr);
if (L >= 0.7) return full;
if (Ch > 0.06) return full;
const newL = Math.max(0, Math.min(1, 0.96 - L * 0.78));
const newH = (H >= 230 && H <= 270) ? 80 : H;
return `oklch(${newL.toFixed(3)} ${cStr} ${newH}${alpha || ''})`;
}
);
}
const Tx = __isLight ? paletteTransform : function (s) { return s; };
const C = __isLight ? {
// Light/warm cream palette (anchors: --bg #F2EFE9, --bg-card #E8E5DE,
// --bg-feed #DFDBD4, --bg-sunk #D6D1C8, text #1A1814 / #6B6560 / #A09890)
ink: '#F2EFE9',
ink2: '#E8E5DE',
ink3: '#D6D1C8',
inkText: '#1A1814',
inkText2:'#6B6560',
inkText3:'#A09890',
brand: 'oklch(0.68 0.12 195)',
brandHi: 'oklch(0.74 0.14 195)',
brandInk:'oklch(0.42 0.11 195)',
brandFill:'oklch(0.92 0.05 195)',
brandGlow:'oklch(0.74 0.14 195 / 0.35)',
amber: 'oklch(0.72 0.13 45)',
amberHi: 'oklch(0.78 0.13 45)',
amberGlow:'oklch(0.78 0.13 45 / 0.3)',
display: "'Lustria', Georgia, serif",
body: "'IBM Plex Sans', system-ui, sans-serif",
mono: "'Geist Mono', 'JetBrains Mono', ui-monospace, monospace",
} : {
ink: '#0B0E14',
ink2: '#11151D',
ink3: '#1A202C',
inkText: '#E8E5DE',
inkText2: '#8A94A6',
inkText3: '#4A5469',
brand: 'oklch(0.68 0.12 195)',
brandHi: 'oklch(0.74 0.14 195)',
brandInk:'oklch(0.42 0.11 195)',
brandFill:'oklch(0.92 0.05 195)',
brandGlow:'oklch(0.74 0.14 195 / 0.35)',
amber: 'oklch(0.72 0.13 45)',
amberHi: 'oklch(0.78 0.13 45)',
amberGlow:'oklch(0.78 0.13 45 / 0.3)',
display: "'Lustria', Georgia, serif",
body: "'IBM Plex Sans', system-ui, sans-serif",
mono: "'Geist Mono', 'JetBrains Mono', ui-monospace, monospace",
};
// ── Live pulsing dot (teal) ─────────────────────────────────────────────────
function LiveDot({ size = 8, color = C.brandHi, time = 0 }) {
// pulse: 2.2s, opacity 1→0.55, scale 1→0.85
const phase = (time % 2.2) / 2.2;
const wave = Math.sin(phase * Math.PI * 2) * 0.5 + 0.5; // 0..1
const opacity = 1 - wave * 0.45;
const scale = 1 - wave * 0.15;
return (
);
}
// ── Mono eyebrow / chip text ─────────────────────────────────────────────────
function Mono({ children, size = 11, color = C.inkText3, tracking = '0.14em', style }) {
return (
{children}
);
}
// ── Generic node card (for agents, providers, humans) ───────────────────────
// Renders a small rounded card with optional glow. Children = inside.
function NodeCard({
x, y, w = 220, h = 84,
variant = 'system', // 'agent' | 'human' | 'system' | 'audit'
active = false,
faded = false,
children,
style,
}) {
const isAgent = variant === 'agent' || variant === 'audit';
const border = isAgent && active ? C.brandHi
: variant === 'audit' ? C.brandHi
: C.ink3;
const glow = isAgent && active ? `0 0 24px ${C.brandGlow}` : 'none';
const bg = variant === 'human'
? Tx('oklch(0.18 0.012 60 / 0.9)')
: Tx('oklch(0.14 0.015 250 / 0.92)');
return (
{children}
);
}
// ── Sparkle icon (agent marker) ─────────────────────────────────────────────
function Sparkle({ size = 14, color = C.brandHi }) {
return (
);
}
// ── Status row inside a node card ───────────────────────────────────────────
function NodeHeader({ icon, title, sub, accent = C.brandHi }) {
return (
{icon}
{title}
{sub && (
{sub}
)}