// shared.jsx — shared components for Finaz C02-B screens // All components expect to be rendered inside .screen wrapper which sets style/density. const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ─── Icons (inline SVG, 1.5 px stroke) ───────────────────────── */ const Icon = { arrowR: () => , arrowL: () => , play: () => , pause: () => , skip: () => , cc: () => , close: () => , lock: () => , check: () => , edit: () => , sparkle:() => , spark: () => , book: () => , beaker: () => , doc: () => , chart: () => , grid: () => , bug: () => , bal: () => , }; /* ─── Brand bar ──────────────────────────────────────────────── */ function Topbar({ crumbs, right, mastery }) { return (
FZ
Finaz C02-B
{crumbs && (
/ {crumbs.map((c, i) => ( {c} {i < crumbs.length - 1 && /} ))}
)}
{typeof mastery === 'number' && ( Mastery {mastery}% )} {right}
); } /* ─── Regla Finaz breadcrumb ─────────────────────────────────── */ function ReglaFinaz({ step }) { // step: 1..4 const steps = [ { n: 1, lbl: "Dato observable" }, { n: 2, lbl: "Hipótesis" }, { n: 3, lbl: "Evidencia pendiente" }, { n: 4, lbl: "Lenguaje prudente" }, ]; return (
Regla Finaz {steps.map((s, i) => (
{s.n < step ? '✓' : s.n} {s.lbl}
{i < steps.length - 1 && →} ))}
); } /* ─── Voice player ───────────────────────────────────────────── */ function VoicePlayer({ caption, progress = 0.34, time = "01:24 / 04:08", speed = "1x", cue }) { // caption: { voice: 's'|'m'|'t', name, cue, text } return (
{caption && ( <>
{caption.voice === 's' ? 'SO' : caption.voice === 'm' ? 'MA' : 'TF'}
{caption.name} {caption.text} {caption.cue && [ {caption.cue} ]}
)}
{time}
); } /* ─── Flash card (the "i" pop) ───────────────────────────────── */ function FlashCard({ term, onClose, anchor = "below" }) { const t = window.FinazData.glossary.find(g => g.id === term); if (!t) return null; const catColors = { working_capital: 'chip-accent', earnings_quality: 'chip-accent', forensic: 'chip-amber', normalization: 'chip-green', cash_flow: 'chip-accent', leases: 'chip-accent', notes: 'chip-accent', standards: 'chip-accent', }; return (
{t.term}
{t.cat} {onClose && }

{t.def}

{t.formula !== "—" && (
Fórmula
{t.formula}
)}
Ejemplo

{t.example}

Por qué importa

{t.why}

Misconception

{t.mis}

Flash question
{t.q}
Ver respuesta
{t.a}
); } /* ─── InfoI · clickable token with popover ───────────────────── */ function InfoI({ termId, children, consulted = false, anchor = "below" }) { const [open, setOpen] = useState(false); const [wasConsulted, setWasConsulted] = useState(consulted); return ( {children && ( { setOpen(o => !o); setWasConsulted(true); }}> {children} i )} {!children && ( { e.stopPropagation(); setOpen(o => !o); setWasConsulted(true); }}>i )} {open && ( <>
setOpen(false)} /> setOpen(false)} anchor={anchor} /> )} ); } /* ─── Tutor Finaz · right rail ──────────────────────────────── */ function TutorPanel({ message, actions = ["explain_formula", "show_hint", "ask_socratic_question", "open_inline_glossary"] }) { const labels = { explain_formula: ["Explicar fórmula", "explain_formula"], show_hint: ["Pedir pista", "show_hint"], ask_socratic_question: ["Pregunta socrática", "ask_socratic_question"], map_item_to_statement: ["Mapear al estado", "map_item_to_statement"], suggest_remediation: ["Sugerir remediación", "suggest_remediation"], open_inline_glossary: ["Abrir glosario", "open_inline_glossary"], }; return ( ); } /* ─── Disclaimer band ───────────────────────────────────────── */ function Disclaimer({ extra }) { return (
Contenido educativo. No constituye recomendación de inversión ni acusación legal. {extra || "es-ES · C02-B · v2.0.0"}
); } /* ─── Mastery ring ──────────────────────────────────────────── */ function Ring({ value = 0, size = 56, stroke = 4, showLabel = true }) { const r = (size - stroke) / 2; const circ = 2 * Math.PI * r; const off = circ - (value / 100) * circ; return (
{/* 75% mastery mark */} {showLabel &&
{value}
}
); } /* ─── Status dot + label ────────────────────────────────────── */ function StatusPill({ status }) { const map = { done: { cls: 'done', txt: 'completado' }, now: { cls: 'now', txt: 'en progreso' }, next: { cls: 'next', txt: 'siguiente' }, lock: { cls: 'lock', txt: 'bloqueado' }, }; const s = map[status] || map.next; return {s.txt}; } /* ─── Sparkline ─────────────────────────────────────────────── */ function Sparkline({ data, width = 60, height = 18, color = "var(--accent)" }) { const max = Math.max(...data), min = Math.min(...data); const range = (max - min) || 1; const pts = data.map((v, i) => `${(i / (data.length - 1)) * width},${height - ((v - min) / range) * height}`).join(" "); return ( ); } /* Export to globals so other JSX files can use them */ Object.assign(window, { Icon, Topbar, ReglaFinaz, VoicePlayer, FlashCard, InfoI, TutorPanel, Disclaimer, Ring, StatusPill, Sparkline, });