onPick(idx)}
data-line={idx}
style={{
display: 'flex', cursor: 'pointer', padding: '0 12px',
background: active ? theme.activeBg : (matchesSearch ? 'rgba(255, 235, 0, 0.10)' : (isControl ? theme.controlBg : 'transparent')),
borderLeft: '3px solid ' + (active ? theme.activeBar : 'transparent'),
minHeight: 22,
}}>
{/* gutter */}
{String(idx + 1).padStart(4, '0')}
{/* tokens */}
{tokens.map((tok, ti) => {
if (tok.empty && hideEmpty) {
return {tok.raw};
}
let color = theme.kinds[tok.kind] || theme.ink;
let weight = 400;
if (tok.kind === 'rec') {
color = familyColor;
weight = 700;
}
const op = tok.empty ? 0.18 : 1;
return (
{tok.raw}
);
})}
);
}
// ─── Main viewer ──────────────────────────────────────────────────────────
function Viewer({ lines, version, active, onPick, themeName: themeNameProp, onThemeChange, compact }) {
const [themeName, setThemeName] = useState(themeNameProp || 'editorial');
const [hideEmpty, setHideEmpty] = useState(false);
const [foldControl, setFoldControl] = useState(false);
const [search, setSearch] = useState('');
const [showLegend, setShowLegend] = useState(false);
const scrollRef = useRef(null);
useEffect(() => { if (themeNameProp) setThemeName(themeNameProp); }, [themeNameProp]);
const setTheme = useCallback((n) => { setThemeName(n); onThemeChange && onThemeChange(n); }, [onThemeChange]);
const theme = THEMES[themeName] || THEMES.editorial;
// record-type counts for the legend
const counts = useMemo(() => {
const c = {};
lines.forEach((l) => { const r = l.slice(0, 3); c[r] = (c[r] || 0) + 1; });
return c;
}, [lines]);
// visible lines (fold collapses runs of control lines? no — keep all visible, just style)
const visibleLines = lines;
// Auto-scroll active line into view
useEffect(() => {
if (!scrollRef.current || active == null) return;
const el = scrollRef.current.querySelector(`[data-line="${active}"]`);
if (el) {
const box = scrollRef.current;
const top = el.offsetTop;
const h = box.clientHeight;
if (top < box.scrollTop || top > box.scrollTop + h - 22) {
box.scrollTop = Math.max(0, top - h / 2);
}
}
}, [active]);
const copyAll = useCallback(() => {
const text = lines.join('\n');
if (navigator.clipboard) navigator.clipboard.writeText(text);
}, [lines]);
const downloadFile = useCallback(() => {
const text = lines.join('\r\n');
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = `transmission-v${version}.V${(version || '').replace(/\D/g, '').slice(0, 2)}1`;
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(url), 1000);
}, [lines, version]);
return (
{/* toolbar */}
{!compact && (
{/* theme picker */}
THEME
{Object.keys(THEMES).map((k) => (
))}
{/* toggles */}
{/* search */}
setSearch(e.target.value)}
placeholder="filter lines…" className="ff-mono"
style={{ width: 180, padding: '5px 9px', fontSize: 11,
background: 'var(--paper)', border: '1px solid var(--rule)' }} />
{/* copy / download */}
)}
{/* legend */}
{showLegend && (
RECORD FAMILIES · {Object.keys(counts).length} types in transmission
{Object.entries(RECORD_FAMILIES).map(([fam, codes]) => {
const present = codes.filter((c) => counts[c]);
if (!present.length) return null;
return (
{fam}
{present.map((c) => (
{c}·{counts[c]}
))}
);
})}
FIELD KINDS
{[
['text', 'text'], ['num', 'numeric'], ['date', 'date'], ['time', 'time'],
['flag', 'flag'], ['ipi', 'IPI'], ['iswc', 'ISWC'],
].map(([k, l]) => (
● {l}
))}
● empty
)}
{/* lines */}
{visibleLines.map((line, i) => (
))}
{/* footer status */}
{!compact && (
{lines.length.toLocaleString()} lines · {lines.reduce((s, l) => s + l.length + 2, 0).toLocaleString()} bytes · CWR v{version}
{themeName} theme · click any field for inspector
)}