/* global React */
const { useState, useEffect, useRef, useCallback, useMemo } = React;
// ============================================================
// LOGO
// ============================================================
function NeroLogo({ size = 22 }) {
return (
NeroView
);
}
function NeroMark({ size = 22 }) {
// simple "viewfinder" mark — circle inside ring, accent color
return (
);
}
// ============================================================
// COMPANY LOGO PLACEHOLDERS
// ============================================================
function CompanyLogo({ name, mark }) {
return (
{mark}
{name}
);
}
const LogoMarks = {
square: ,
triangle: ,
circle: ,
bars: ,
rings: ,
dot: ,
slash: ,
};
// ============================================================
// TAG / PILL
// ============================================================
function Tag({ children, accent, dot }) {
let cls = "tag";
if (accent) cls += " tag--accent";
if (dot) cls += " tag--dot";
return {children};
}
// ============================================================
// TRANSCRIPT SNIPPET
// ============================================================
function Transcript({ time, speaker, children }) {
return (
TRANSCRIPT · {speaker || "P-042"}
{time}
{children}
);
}
// ============================================================
// EMOTION / ATTENTION TIMELINE
// ============================================================
function EmotionTimeline({ height = 56, moments = [], data }) {
// generate a sample wavy data path
const points = useMemo(() => {
if (data) return data;
const N = 56;
return Array.from({ length: N }, (_, i) => {
const x = i / (N - 1);
const noise = Math.sin(i * 0.6) * 0.18 + Math.sin(i * 0.23) * 0.32 + Math.sin(i * 1.1) * 0.1;
return 0.5 + noise;
});
}, [data]);
const path = useMemo(() => {
const w = 100, h = 100;
return points.map((p, i) => {
const x = (i / (points.length - 1)) * w;
const y = (1 - p) * h;
return `${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`;
}).join(" ");
}, [points]);
return (