/* Primitives UI partagées + icônes ligne */
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- Icônes (ligne fine, géométriques) ---------- */
function Icon({ name, size = 20, stroke = 1.6, style }) {
const p = { fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
const paths = {
today: <>,
learn: <>,
chat: <>,
pen: <>,
chart: <>,
refresh: <>,
plus: <>,
ear: <>,
wrench: <>,
play: <>,
pause: <>,
prev: <>,
next: <>,
repeat: <>,
eye: <>,
eyeoff: <>,
chevron: <>,
chevronR: <>,
flag: <>,
check: <>,
settings: <>,
book: <>,
grid: <>,
speaker: <>,
list: <>,
spark: <>,
globe: <>,
moon: <>,
sun: <>,
lock: <>,
search: <>,
download: <>,
upload: <>,
trash: <>,
copy: <>,
dot: <>,
sparkles: <>,
layers: <>,
pause2: <>,
};
return (
);
}
/* ---------- Eyebrow ---------- */
function Eyebrow({ children, style }) {
return {children}
;
}
/* ---------- Button ---------- */
function Btn({ kind = "secondary", size, icon, iconR, children, ...rest }) {
const cls = `btn btn-${kind}${size ? " btn-" + size : ""}`;
return (
);
}
/* ---------- Progress bar ---------- */
function Progress({ value, height = 6, color = "var(--accent)", track = "var(--rule)" }) {
return (
);
}
/* ---------- Statline (bandeau court, remplace gros blocs de stats) ---------- */
function StatStrip({ items }) {
return (
{items.map((it, i) => (
))}
{children}
}
);
}
/* ---------- Traduction masquée (révélée au survol/clic) ---------- */
function Hideable({ children, mode = "hover", className, style }) {
// mode: 'hover' | 'tap' | 'shown'
const [revealed, setRevealed] = useState(false);
const show = mode === "shown" || revealed;
const hiddenText = "Traduction masquée";
const handlers = mode === "hover"
? { onMouseEnter: () => setRevealed(true), onMouseLeave: () => setRevealed(false) }
: mode === "tap"
? { onClick: () => setRevealed(r => !r) }
: {};
return (
{show ? children : hiddenText}
);
}
/* ---------- Audio : bouton haut-parleur + mot cliquable ----------
Philosophie : tout ce qui est en coréen est lisible d'un clic.
speak() choisit l'audio pré-généré si connu, sinon TTS ko-KR (cf. engine/audio.js). */
function play(text, ref, rate, url) {
if (window.LangAudio) window.LangAudio.speak(text, { ref, rate, url });
}
function SpeakBtn({ text, audioRef, audioUrl, rate, size = 30, title = "Écouter", style, onPlayed }) {
return (
);
}
/* LE MOT EST LE BOUTON (charte II.12).
Tout bloc coréen cliquable porte un cadre accent -> clic = on l'entend.
Pas d'icône haut-parleur à côté. `frame={false}` pour un clic discret sans cadre. */
function Speakable({ text, audioRef, audioUrl, rate, children, className, style, as = "span", frame = true, gloss, glossRevealed = true, suppressGlossHover = false }) {
const Tag = as;
const [open, setOpen] = useState(false);
// En contexte de rappel actif, le NOM ACCESSIBLE ne doit pas livrer le sens avant
// l'effort (PROBLEMATIQUES_SEANCES §2.3) : tant que la glose n'est pas révélée
// (carte retournée / vérifiée), l'aria-label n'annonce que le coréen + l'action audio.
// `suppressGlossHover` ferme EN PLUS le tooltip visuel : utilisé par les cartes/runner
// en rappel pour qu'un survol ne donne pas la réponse (§6.1). La lecture glosée des
// dialogues ne le passe pas -> l'aide au survol y reste disponible.
const announceGloss = gloss && glossRevealed;
const canHoverGloss = !!gloss && !suppressGlossHover;
const label = announceGloss ? `${text}, ${gloss}. Cliquer pour écouter.` : `${text || "Texte coréen"}. Cliquer pour écouter.`;
const framed = frame
? { border: "1.5px solid var(--accent-line)", borderRadius: 8, padding: "1px 7px", background: "transparent" }
: { borderRadius: 5 };
const speak = (e) => {
e.stopPropagation();
play(text, audioRef, rate, audioUrl);
if (canHoverGloss) setOpen(o => !o);
};
const keySpeak = (e) => {
if (e.key !== "Enter" && e.key !== " ") return;
e.preventDefault();
speak(e);
};
const tag = (
{ e.currentTarget.style.outline = "2px solid var(--accent-line)"; e.currentTarget.style.outlineOffset = "2px"; if (canHoverGloss) setOpen(true); }}
onBlur={e => { e.currentTarget.style.outline = "none"; if (gloss) setOpen(false); }}
onMouseEnter={e => { e.currentTarget.style.background = "var(--accent-tint)"; if (frame) e.currentTarget.style.borderColor = "var(--accent)"; if (canHoverGloss) setOpen(true); }}
onMouseLeave={e => { e.currentTarget.style.background = "transparent"; if (frame) e.currentTarget.style.borderColor = "var(--accent-line)"; if (gloss) setOpen(false); }}>
{children != null ? children : text}
);
if (!gloss) return tag;
return (
{tag}
{open && (
{gloss}
)}
);
}
function normalizeImageBank(bank) {
if (Array.isArray(bank)) return { images: bank };
return bank && Array.isArray(bank.images) ? bank : { images: [] };
}
function imageUrl(image) {
const path = String((image && (image.url || image.localPath)) || "").replace(/\\/g, "/");
if (!path) return "";
if (/^(https?:|data:|blob:|\/)/i.test(path)) return path;
return "/" + path.replace(/^\/+/, "");
}
function imagesForItem(imageBank, itemIds, useCase) {
const ids = new Set((Array.isArray(itemIds) ? itemIds : [itemIds]).filter(Boolean).map(String));
if (!ids.size) return [];
const payload = normalizeImageBank(imageBank);
return payload.images.filter((image) => {
const imageIds = Array.isArray(image.itemIds) ? image.itemIds.map(String) : [];
if (!imageIds.some((id) => ids.has(id))) return false;
if (!useCase) return true;
return Array.isArray(image.useCases) && image.useCases.includes(useCase);
});
}
function primaryImageForItem(imageBank, itemIds, useCase) {
const matches = imagesForItem(imageBank, itemIds, useCase);
return matches[0] || null;
}
function LearningImage({ image, compact = false, wide = false, style }) {
const src = imageUrl(image);
if (!src) return null;
const imageHeight = compact ? "clamp(88px, 24vw, 112px)" : "clamp(112px, 30vw, 148px)";
return (
);
}
/* ---------- Glose kr -> fr partagée (cartes + dialogues) ----------
Sens exact, sinon on retire la particule/terminaison finale et on tente la
forme de dictionnaire. Aucune traduction inventée : tout vient de gloss.json. */
const GLOSS_SUFFIXES = ["이라고", "드립니다", "습니다", "이에요", "으세요", "겠습니다", "겠어요", "았어요", "었어요", "였어요", "예요", "라고", "세요", "해요", "하면", "으면", "아요", "어요", "워요", "와요", "여요", "으로", "에서", "에게", "한테", "까지", "부터", "이야", "면", "요", "은", "는", "이", "가", "을", "를", "에", "도", "만", "의", "와", "과", "아", "어", "해", "?", ".", "!", ","].sort((a, b) => b.length - a.length);
function glossLookup(map, base) {
if (!base) return "";
const cands = [base, base + "다", base + "하다", base + "기"];
for (const c of cands) if (map[c]) return map[c];
return "";
}
function resolveGloss(map, seg) {
if (!map || !seg) return "";
const s = String(seg).trim();
if (map[s]) return map[s];
let cur = s;
for (let i = 0; i < 2; i++) {
const hit = glossLookup(map, cur);
if (hit) return hit;
let stripped = false;
for (const suf of GLOSS_SUFFIXES) {
if (cur.length > suf.length && cur.endsWith(suf)) { cur = cur.slice(0, -suf.length); stripped = true; break; }
}
if (!stripped) break;
}
return glossLookup(map, cur);
}
/* ---------- Polissage d'affichage des libellés (PROBLEMATIQUES_SEANCES §6.5) ----------
Couche unique partagée par Aujourd'hui, le runner et les dialogues : beaucoup de
clés de données/templates servent aussi de tags internes (Fluidite, Dictee ciblee,
identites, debut…). Plutôt que d'accentuer les données brutes, on polit À L'AFFICHAGE.
Centralisé ici (chargé en premier) pour éviter trois copies qui divergent. */
const POLISH_REPLACEMENTS = [
[/\bEcoute\b/g, "Écoute"], [/\becoute\b/g, "écoute"],
[/\bDictee\b/g, "Dictée"], [/\bdictee\b/g, "dictée"],
[/\bFluidite\b/g, "Fluidité"], [/\bfluidite\b/g, "fluidité"],
[/\bReparation\b/g, "Réparation"], [/\breparation\b/g, "réparation"],
[/\bComprehension\b/g, "Compréhension"], [/\bcomprehension\b/g, "compréhension"],
[/\bcomprehensible\b/g, "compréhensible"],
[/\bRepetition\b/g, "Répétition"], [/\brepetition\b/g, "répétition"],
[/\bReplique\b/g, "Réplique"], [/\breplique\b/g, "réplique"],
[/\bguidee\b/g, "guidée"], [/\bciblee\b/g, "ciblée"],
[/\bcontrolee\b/g, "contrôlée"], [/\bdifferee\b/g, "différée"],
[/\bfrequentiels\b/g, "fréquentiels"], [/\bfrequentiel\b/g, "fréquentiel"],
[/\bfrequents\b/g, "fréquents"], [/\bfrequent\b/g, "fréquent"],
[/\bidentites\b/g, "identités"], [/\bidentite\b/g, "identité"],
[/\bdebut\b/g, "début"], [/\brole\b/g, "rôle"],
[/\bReservation\b/g, "Réservation"], [/\breservation\b/g, "réservation"],
[/\bPresentation\b/g, "Présentation"], [/\bpresentation\b/g, "présentation"],
[/\bCafe\b/g, "Café"], [/\bcafe\b/g, "café"],
[/\bRecu\b/g, "Reçu"], [/\brecu\b/g, "reçu"],
[/\bapres\b/g, "après"], [/\bModele\b/g, "Modèle"], [/\bmodele\b/g, "modèle"],
[/\bcorrespond a\b/g, "correspond à"], [/\ba ce sens\b/g, "à ce sens"],
[/\ba emporter\b/g, "à emporter"], [/\bA emporter\b/g, "À emporter"],
[/\bs'il vous plait\b/g, "s'il vous plaît"],
];
function polishLabel(text) {
if (!text) return text;
let out = String(text);
for (let i = 0; i < POLISH_REPLACEMENTS.length; i++) {
out = out.replace(POLISH_REPLACEMENTS[i][0], POLISH_REPLACEMENTS[i][1]);
}
return out;
}
Object.assign(window, { Icon, Eyebrow, Btn, Progress, StatStrip, Collapsible, Hideable, SpeakBtn, Speakable, resolveGloss, polishLabel });
/* ---------- State primitives: empty / loading / error ---------- */
function EmptyState({ icon = "layers", title, body, action }) {
return (
{title}
{body &&
{body}
}
{action &&
{action}
}
);
}
function Skeleton({ h = 14, w = "100%", r = 7, style }) {
return ;
}
function LoadingCard({ lines = 3 }) {
return (
{Array.from({ length: lines }).map((_, i) => )}
);
}
function ErrorState({ title = "Données indisponibles", body, onRetry }) {
return (
{title}
{body &&
{body}
}
{onRetry &&
Recharger
}
);
}
/* ---------- Segmented (generic) ---------- */
function Segmented({ value, options, onChange, size = "md" }) {
return (
{options.map(o => {
const v = typeof o === "object" ? o.value : o;
const l = typeof o === "object" ? o.label : o;
const disabled = typeof o === "object" && !!o.disabled;
const on = v === value;
return (
);
})}
);
}
/* ---------- Filter chips (multi/single) ---------- */
function FilterChips({ options, value, onChange }) {
return (
{options.map(o => {
const v = typeof o === "object" ? o.value : o;
const l = typeof o === "object" ? o.label : o;
const on = v === value;
return (
);
})}
);
}
/* ---------- Tile (square action tile) ---------- */
function Tile({ icon, label, kr, meta, badge, onClick, accent, disabled, title }) {
return (
);
}
/* ---------- Glossed token ---------- */
function TokenGloss({ token, onReport }) {
const [open, setOpen] = useState(false);
const audio = token.audio || {};
return (
{open && (
{token.g}
{onReport && }
)}
);
}
/* ---------- Bars (mini) ---------- */
function MiniBars({ data, max, labelKey, valKey, height = 110 }) {
const m = max || Math.max(...data.map(d => d[valKey]));
return (
{data.map((d, i) => (
{d[valKey]}
{d[labelKey]}
))}