@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/themes/english-certification/EnglishCertificationHeader.js

@@ -1,31 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Loader2 } from 'lucide-react';
-import { cn } from '../../../shared/lib/utils';
-import { EnglishCertificationBrand } from './EnglishCertificationBrand';
-/**
- * Formats seconds into HH:MM:SS string.
- * Always shows hours for the 2-hour standardized exams.
- */
-function formatTime(seconds) {
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = seconds % 60;
-    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
-}
-/**
- * Formats a Date into HH:MM local time string.
- */
-function formatSavedAt(date) {
-    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
-}
-/**
- * Branded Ocean Edu top header bar for English Certification exam taking.
- *
- * Layout (desktop): brand block · test name · part/range meta · timer · submit.
- */
-export function EnglishCertificationHeader({ examName, remainingSeconds, totalQuestions, answeredCount, isSubmitting, onSubmit, lastSavedAt, isSaving, partLabel, partSubLabel, questionRange, }) {
-    const isWarning = remainingSeconds <= 900 && remainingSeconds > 300; // 5-15 min
-    const isCritical = remainingSeconds <= 300; // ≤5 min
-    return (_jsxs("header", { className: cn('sticky top-0 z-50 flex h-[74px] items-center gap-4 border-b border-[#d9e4f2] px-4 lg:px-6', 'bg-white/95 shadow-[0_8px_26px_rgba(10,61,154,0.08)] backdrop-blur-md'), children: [_jsx("div", { className: "flex shrink-0 items-center gap-3", children: _jsx("div", { className: "hidden border-r border-[#d9e4f2] pr-4 sm:block", children: _jsx(EnglishCertificationBrand, {}) }) }), _jsxs("div", { className: "hidden min-w-0 lg:block", children: [_jsx("strong", { className: "block truncate text-[17px] font-semibold leading-tight text-[#0f1730]", children: examName }), _jsx("span", { className: "mt-1 block text-sm font-bold text-[#64748b]", children: "English Certification" })] }), _jsxs("div", { className: "flex flex-1 items-center justify-center gap-5 text-center", children: [partLabel && (_jsxs("div", { className: "leading-tight text-[#0b57d0]", children: [_jsx("div", { className: "text-sm font-black tracking-wide", children: partLabel }), partSubLabel && (_jsx("div", { className: "mt-1 text-xs font-semibold text-[#27324a]", children: partSubLabel }))] })), questionRange && (_jsxs("div", { className: "whitespace-nowrap text-[15px] font-bold text-[#0f1730]", children: ["Questions ", _jsx("span", { className: "text-[#0b57d0]", children: questionRange })] }))] }), _jsxs("div", { className: "flex shrink-0 flex-col items-center border-l border-[#d9e4f2] pl-4", children: [_jsx("span", { className: cn('font-mono text-xl font-black leading-none tracking-wide tabular-nums lg:text-2xl', !isWarning && !isCritical && 'text-[#0b57d0]', isWarning && 'text-orange-500', isCritical && 'animate-pulse text-red-500'), "aria-live": "polite", "aria-label": `Time remaining: ${formatTime(remainingSeconds)}`, children: formatTime(remainingSeconds) }), _jsx("span", { className: "mt-1 text-[11px] font-semibold text-[#64748b]", children: "Time Remaining" }), (isSaving || lastSavedAt) && (_jsx("span", { className: "mt-0.5 flex items-center gap-1 text-[10px] text-slate-400", children: isSaving ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }), "Saving..."] })) : lastSavedAt ? (_jsxs(_Fragment, { children: ["Saved ", formatSavedAt(lastSavedAt)] })) : null }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [_jsxs("div", { className: "hidden text-right sm:block", children: [_jsxs("div", { className: "text-sm font-semibold text-[#0f1730]", children: [_jsx("span", { className: "text-[#0b57d0]", children: answeredCount }), _jsxs("span", { className: "text-slate-400", children: ["/", totalQuestions] })] }), _jsx("div", { className: "text-[11px] text-slate-400", children: "Answered" })] }), _jsx("button", { type: "button", onClick: onSubmit, disabled: isSubmitting, className: cn('inline-flex h-12 items-center gap-1.5 rounded-lg px-5 text-sm font-black tracking-wide text-white', 'bg-gradient-to-b from-[#ffad31] to-[#ff8a00] shadow-[0_12px_24px_rgba(255,138,0,0.3)]', 'transition-all hover:-translate-y-0.5 hover:brightness-[0.98]', 'disabled:cursor-not-allowed disabled:opacity-60'), children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Submitting..."] })) : ('SUBMIT TEST') })] })] }));
-}
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{Loader2 as i}from"lucide-react";import{cn as n}from"../../../shared/lib/utils";import{EnglishCertificationBrand as s}from"./EnglishCertificationBrand";function l(e){const t=Math.floor(e/3600),a=Math.floor(e%3600/60),i=e%60;return`${String(t).padStart(2,"0")}:${String(a).padStart(2,"0")}:${String(i).padStart(2,"0")}`}export function EnglishCertificationHeader({examName:r,remainingSeconds:d,totalQuestions:c,answeredCount:o,isSubmitting:m,onSubmit:x,lastSavedAt:h,isSaving:b,partLabel:p,partSubLabel:g,questionRange:f}){const u=d<=900&&d>300,N=d<=300;return t("header",{className:n("sticky top-0 z-50 flex h-[74px] items-center gap-4 border-b border-[#d9e4f2] px-4 lg:px-6","bg-white/95 shadow-[0_8px_26px_rgba(10,61,154,0.08)] backdrop-blur-md"),children:[e("div",{className:"flex shrink-0 items-center gap-3",children:e("div",{className:"hidden border-r border-[#d9e4f2] pr-4 sm:block",children:e(s,{})})}),t("div",{className:"hidden min-w-0 lg:block",children:[e("strong",{className:"block truncate text-[17px] font-semibold leading-tight text-[#0f1730]",children:r}),e("span",{className:"mt-1 block text-sm font-bold text-[#64748b]",children:"English Certification"})]}),t("div",{className:"flex flex-1 items-center justify-center gap-5 text-center",children:[p&&t("div",{className:"leading-tight text-[#0b57d0]",children:[e("div",{className:"text-sm font-black tracking-wide",children:p}),g&&e("div",{className:"mt-1 text-xs font-semibold text-[#27324a]",children:g})]}),f&&t("div",{className:"whitespace-nowrap text-[15px] font-bold text-[#0f1730]",children:["Questions ",e("span",{className:"text-[#0b57d0]",children:f})]})]}),t("div",{className:"flex shrink-0 flex-col items-center border-l border-[#d9e4f2] pl-4",children:[e("span",{className:n("font-mono text-xl font-black leading-none tracking-wide tabular-nums lg:text-2xl",!u&&!N&&"text-[#0b57d0]",u&&"text-orange-500",N&&"animate-pulse text-red-500"),"aria-live":"polite","aria-label":`Time remaining: ${l(d)}`,children:l(d)}),e("span",{className:"mt-1 text-[11px] font-semibold text-[#64748b]",children:"Time Remaining"}),(b||h)&&e("span",{className:"mt-0.5 flex items-center gap-1 text-[10px] text-slate-400",children:b?t(a,{children:[e(i,{className:"h-2.5 w-2.5 animate-spin"}),"Saving..."]}):h?t(a,{children:["Saved ",(v=h,v.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit",hour12:!1}))]}):null})]}),t("div",{className:"flex shrink-0 items-center gap-3",children:[t("div",{className:"hidden text-right sm:block",children:[t("div",{className:"text-sm font-semibold text-[#0f1730]",children:[e("span",{className:"text-[#0b57d0]",children:o}),t("span",{className:"text-slate-400",children:["/",c]})]}),e("div",{className:"text-[11px] text-slate-400",children:"Answered"})]}),e("button",{type:"button",onClick:x,disabled:m,className:n("inline-flex h-12 items-center gap-1.5 rounded-lg px-5 text-sm font-black tracking-wide text-white","bg-gradient-to-b from-[#ffad31] to-[#ff8a00] shadow-[0_12px_24px_rgba(255,138,0,0.3)]","transition-all hover:-translate-y-0.5 hover:brightness-[0.98]","disabled:cursor-not-allowed disabled:opacity-60"),children:m?t(a,{children:[e(i,{className:"h-4 w-4 animate-spin"}),"Submitting..."]}):"SUBMIT TEST"})]})]});var v}

package/dist/components/themes/english-certification/EnglishCertificationNavigationPanel.js

@@ -1,71 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo } from 'react';
-import { cn } from '../../../shared/lib/utils';
-/** Returns true when an answer entry counts as "answered". */
-function isAnswered(answer) {
-    if (answer === undefined || answer === null || answer === '')
-        return false;
-    if (typeof answer === 'object' && 'optionId' in answer) {
-        return Boolean(answer.optionId);
-    }
-    return true;
-}
-/**
- * Branded Ocean Edu "Answer Sheet" navigation panel.
- *
- * Shows an Answered / Unanswered / Marked summary, a per-part question grid
- * (answered, current, marked states) and a legend, bound to real store data.
- */
-export function EnglishCertificationNavigationPanel({ parts, questions, answers, flaggedQuestions, currentIndex, onQuestionClick, onPartClick, }) {
-    const buttonRefs = useRef(new Map());
-    // Scroll current button into view when currentIndex changes.
-    useEffect(() => {
-        const btn = buttonRefs.current.get(currentIndex);
-        btn?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    }, [currentIndex]);
-    const { answeredCount, markedCount, unansweredCount } = useMemo(() => {
-        const answered = questions.filter((q) => isAnswered(answers[q.id])).length;
-        const marked = questions.filter((q) => flaggedQuestions.has(q.id)).length;
-        return {
-            answeredCount: answered,
-            markedCount: marked,
-            unansweredCount: questions.length - answered,
-        };
-    }, [questions, answers, flaggedQuestions]);
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "grid grid-cols-3 gap-3 p-4 pb-2", children: [_jsx(SummaryBox, { label: "Answered", value: answeredCount, variant: "answered" }), _jsx(SummaryBox, { label: "Unanswered", value: unansweredCount, variant: "unanswered" }), _jsx(SummaryBox, { label: "Marked", value: markedCount, variant: "marked" })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: [parts.map((part, partIdx) => {
-                        const startGlobal = part.startIndex ?? 0;
-                        const endGlobal = part.endIndex ?? startGlobal;
-                        const totalInPart = endGlobal - startGlobal + 1;
-                        return (_jsxs("section", { className: "mb-5", children: [_jsx("button", { type: "button", onClick: () => onPartClick(partIdx), className: cn('mb-3 w-full text-left text-[15px] font-black text-[#17213a] transition-colors hover:text-[#0b57d0]', currentIndex >= startGlobal &&
-                                        currentIndex <= endGlobal &&
-                                        'text-[#0b57d0]'), children: part.name || `Part ${partIdx + 1}` }), _jsx("div", { className: "grid grid-cols-5 gap-2.5", children: Array.from({ length: totalInPart }, (_, i) => {
-                                        const globalIdx = startGlobal + i;
-                                        const question = questions[globalIdx];
-                                        if (!question)
-                                            return null;
-                                        const answered = isAnswered(answers[question.id]);
-                                        const flagged = flaggedQuestions.has(question.id);
-                                        const current = globalIdx === currentIndex;
-                                        const displayNum = globalIdx + 1;
-                                        return (_jsxs("button", { ref: (el) => {
-                                                if (el)
-                                                    buttonRefs.current.set(globalIdx, el);
-                                                else
-                                                    buttonRefs.current.delete(globalIdx);
-                                            }, type: "button", onClick: () => onQuestionClick(globalIdx), className: cn('relative flex h-[50px] items-center justify-center rounded-md border text-[15px] font-bold transition-all', 'focus-visible:ring-2 focus-visible:ring-[#1167e8] focus-visible:ring-offset-1', answered
-                                                ? 'border-[#b9edc8] bg-[#ddf8e7] text-[#111827]'
-                                                : 'border-[#d9e4f2] bg-white text-[#111827]', current &&
-                                                'border-[#1167e8] text-[#0b57d0] shadow-[inset_0_0_0_1px_#1167e8]'), "aria-label": `Question ${displayNum}${answered ? ', answered' : ', unanswered'}${flagged ? ', marked' : ''}`, "aria-current": current ? 'true' : undefined, children: [displayNum, flagged && (_jsx("span", { className: "absolute -top-px right-2 h-[18px] w-[9px] bg-[#ff8a00]", style: {
-                                                        clipPath: 'polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)',
-                                                    }, "aria-hidden": "true" }))] }, question.id));
-                                    }) })] }, partIdx));
-                    }), _jsxs("div", { className: "mt-2 rounded-md border border-[#d9e4f2] bg-white/70 p-4", children: [_jsx(LegendRow, { variant: "current", children: "Current Question" }), _jsx(LegendRow, { variant: "answered", children: "Answered" }), _jsx(LegendRow, { variant: "none", children: "Not Answered" }), _jsx(LegendRow, { variant: "marked", children: "Marked for Review" })] })] })] }));
-}
-function SummaryBox({ label, value, variant, }) {
-    return (_jsx("div", { className: "grid min-h-[78px] place-items-center rounded-md border border-[#d9e4f2] bg-white text-center", children: _jsxs("div", { children: [_jsx("span", { className: cn('block text-[11px] font-black uppercase tracking-wide', variant === 'answered' && 'text-[#0a3d9a]', variant === 'unanswered' && 'text-[#17213a]', variant === 'marked' && 'text-[#f97316]'), children: label }), _jsx("strong", { className: cn('mt-2 block text-[28px] leading-none', variant === 'answered' && 'text-[#0b57d0]', variant === 'unanswered' && 'text-[#17213a]', variant === 'marked' && 'text-[#f97316]'), children: value })] }) }));
-}
-function LegendRow({ variant, children, }) {
-    return (_jsxs("div", { className: "my-3 flex items-center gap-3.5 text-sm font-semibold text-[#334155]", children: [variant === 'marked' ? (_jsx("span", { className: "h-[18px] w-2.5 bg-[#ff8a00]", style: { clipPath: 'polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)' } })) : (_jsx("span", { className: cn('h-[22px] w-[22px] rounded border border-[#d9e4f2] bg-white', variant === 'current' &&
-                    'border-[#1167e8] shadow-[inset_0_0_0_1px_#1167e8]', variant === 'answered' && 'border-[#b9edc8] bg-[#ddf8e7]') })), children] }));
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useEffect as n,useMemo as a}from"react";import{cn as d}from"../../../shared/lib/utils";function i(e){return null!=e&&""!==e&&("object"!=typeof e||!("optionId"in e)||Boolean(e.optionId))}export function EnglishCertificationNavigationPanel({parts:o,questions:c,answers:u,flaggedQuestions:b,currentIndex:m,onQuestionClick:f,onPartClick:x}){const h=r(new Map);n(()=>{const e=h.current.get(m);e?.scrollIntoView({block:"nearest",behavior:"smooth"})},[m]);const{answeredCount:p,markedCount:g,unansweredCount:w}=a(()=>{const e=c.filter(e=>i(u[e.id])).length;return{answeredCount:e,markedCount:c.filter(e=>b.has(e.id)).length,unansweredCount:c.length-e}},[c,u,b]);return t("div",{className:"flex h-full flex-col",children:[t("div",{className:"grid grid-cols-3 gap-3 p-4 pb-2",children:[e(s,{label:"Answered",value:p,variant:"answered"}),e(s,{label:"Unanswered",value:w,variant:"unanswered"}),e(s,{label:"Marked",value:g,variant:"marked"})]}),t("div",{className:"flex-1 overflow-y-auto px-4 pb-4",children:[o.map((r,n)=>{const a=r.startIndex??0,s=r.endIndex??a,l=s-a+1;return t("section",{className:"mb-5",children:[e("button",{type:"button",onClick:()=>x(n),className:d("mb-3 w-full text-left text-[15px] font-black text-[#17213a] transition-colors hover:text-[#0b57d0]",m>=a&&m<=s&&"text-[#0b57d0]"),children:r.name||`Part ${n+1}`}),e("div",{className:"grid grid-cols-5 gap-2.5",children:Array.from({length:l},(r,n)=>{const s=a+n,l=c[s];if(!l)return null;const o=i(u[l.id]),x=b.has(l.id),p=s===m,g=s+1;return t("button",{ref:e=>{e?h.current.set(s,e):h.current.delete(s)},type:"button",onClick:()=>f(s),className:d("relative flex h-[50px] items-center justify-center rounded-md border text-[15px] font-bold transition-all","focus-visible:ring-2 focus-visible:ring-[#1167e8] focus-visible:ring-offset-1",o?"border-[#b9edc8] bg-[#ddf8e7] text-[#111827]":"border-[#d9e4f2] bg-white text-[#111827]",p&&"border-[#1167e8] text-[#0b57d0] shadow-[inset_0_0_0_1px_#1167e8]"),"aria-label":`Question ${g}${o?", answered":", unanswered"}${x?", marked":""}`,"aria-current":p?"true":void 0,children:[g,x&&e("span",{className:"absolute -top-px right-2 h-[18px] w-[9px] bg-[#ff8a00]",style:{clipPath:"polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)"},"aria-hidden":"true"})]},l.id)})})]},n)}),t("div",{className:"mt-2 rounded-md border border-[#d9e4f2] bg-white/70 p-4",children:[e(l,{variant:"current",children:"Current Question"}),e(l,{variant:"answered",children:"Answered"}),e(l,{variant:"none",children:"Not Answered"}),e(l,{variant:"marked",children:"Marked for Review"})]})]})]})}function s({label:r,value:n,variant:a}){return e("div",{className:"grid min-h-[78px] place-items-center rounded-md border border-[#d9e4f2] bg-white text-center",children:t("div",{children:[e("span",{className:d("block text-[11px] font-black uppercase tracking-wide","answered"===a&&"text-[#0a3d9a]","unanswered"===a&&"text-[#17213a]","marked"===a&&"text-[#f97316]"),children:r}),e("strong",{className:d("mt-2 block text-[28px] leading-none","answered"===a&&"text-[#0b57d0]","unanswered"===a&&"text-[#17213a]","marked"===a&&"text-[#f97316]"),children:n})]})})}function l({variant:r,children:n}){return t("div",{className:"my-3 flex items-center gap-3.5 text-sm font-semibold text-[#334155]",children:[e("span","marked"===r?{className:"h-[18px] w-2.5 bg-[#ff8a00]",style:{clipPath:"polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)"}}:{className:d("h-[22px] w-[22px] rounded border border-[#d9e4f2] bg-white","current"===r&&"border-[#1167e8] shadow-[inset_0_0_0_1px_#1167e8]","answered"===r&&"border-[#b9edc8] bg-[#ddf8e7]")}),n]})}

package/dist/components/themes/english-certification/EnglishCertificationOptionSelector.js

@@ -1,33 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../../shared/lib/utils';
-import { CheckCircle2, XCircle } from 'lucide-react';
-/**
- * Shared A–D answer selector for all English Certification question types.
- *
- * Renders either large branded cards or compact rows, and shows
- * correct/incorrect indicators in review mode.
- */
-export function EnglishCertificationOptionSelector({ options, selectedOptionId, onSelect, disabled = false, isReviewMode = false, correctOptionId, variant = 'cards', }) {
-    if (variant === 'compact') {
-        return (_jsx("div", { className: "flex flex-col gap-1", role: "radiogroup", children: options.map((option) => {
-                const isSelected = option.id === selectedOptionId;
-                const isCorrect = isReviewMode && option.id === correctOptionId;
-                const isWrong = isReviewMode && isSelected && option.id !== correctOptionId;
-                return (_jsxs("button", { type: "button", role: "radio", "aria-checked": isSelected, disabled: disabled, onClick: () => !disabled && onSelect(option.id), className: cn('flex items-center gap-2.5 rounded-md border border-transparent px-2.5 py-1.5 text-left text-base transition-all', 'hover:border-[#c8def7] hover:bg-[#f4f9ff]', isSelected &&
-                        !isReviewMode &&
-                        'border-[#99c5f8] bg-[#eff7ff] shadow-[inset_0_0_0_1px_rgba(17,103,232,0.08)]', isCorrect && 'border-[#b9edc8] bg-[#ddf8e7]', isWrong && 'border-red-300 bg-red-50', disabled && 'cursor-not-allowed opacity-60'), children: [_jsx("span", { className: cn('grid h-4 w-4 shrink-0 place-items-center rounded-full border-2 border-[#94a3b8]', isSelected && !isReviewMode && 'border-[#0b57d0]', isCorrect && 'border-[#22c55e]', isWrong && 'border-red-500'), children: isSelected && (_jsx("span", { className: cn('h-2 w-2 rounded-full bg-[#0b57d0]', isCorrect && 'bg-[#22c55e]', isWrong && 'bg-red-500') })) }), _jsx("span", { className: "font-bold text-[#23304c]", children: option.label }), _jsx("span", { className: "flex-1 leading-snug text-[#1e293b]", children: option.text }), isReviewMode && isCorrect && (_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-[#22c55e]", "aria-label": "Correct" })), isReviewMode && isWrong && (_jsx(XCircle, { className: "h-4 w-4 shrink-0 text-red-500", "aria-label": "Incorrect" }))] }, option.id));
-            }) }));
-    }
-    // 'cards' variant — large A–D answer cards.
-    return (_jsx("div", { className: "grid gap-4 sm:gap-6", style: { gridTemplateColumns: `repeat(${Math.min(options.length, 4)}, minmax(0, 1fr))` }, role: "radiogroup", children: options.map((option) => {
-            const isSelected = option.id === selectedOptionId;
-            const isCorrect = isReviewMode && option.id === correctOptionId;
-            const isWrong = isReviewMode && isSelected && option.id !== correctOptionId;
-            const isActive = isSelected && !isReviewMode;
-            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": isSelected, disabled: disabled, onClick: () => !disabled && onSelect(option.id), className: cn('relative flex min-h-[96px] flex-col items-center justify-center rounded-[10px] border p-3 transition-all', 'border-[#d9e4f2] bg-white shadow-[0_5px_16px_rgba(13,71,161,0.08)]', 'hover:-translate-y-0.5', isActive &&
-                    'border-[#0b57d0] text-white shadow-[0_16px_30px_rgba(11,87,208,0.25)]', isCorrect && 'border-[#22c55e] bg-[#ddf8e7]', isWrong && 'border-red-400 bg-red-50', disabled && 'cursor-not-allowed opacity-60'), style: isActive
-                    ? { background: 'linear-gradient(180deg, #1f7cff, #0b57d0)' }
-                    : undefined, children: [_jsx("span", { className: cn('grid h-[52px] w-[52px] place-items-center rounded-full border-[1.5px] text-2xl font-black', 'border-[#0b57d0] bg-white text-[#0b57d0]', isActive && 'border-white', isCorrect && 'border-[#22c55e] text-[#22c55e]', isWrong && 'border-red-500 text-red-500'), children: option.label }), option.text && (_jsx("span", { className: cn('mt-2 line-clamp-2 text-center text-sm font-semibold text-[#0f1730]', isActive && 'text-white', isCorrect && 'text-[#15803d]', isWrong && 'text-red-700'), children: option.text })), (isActive || isCorrect) && (_jsx("span", { className: "absolute right-2.5 top-2.5 grid h-[23px] w-[23px] place-items-center rounded-full bg-white text-[15px] font-black text-[#0b57d0]", children: "\u2713" }))] }, option.id));
-        }) }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{cn as t}from"../../../shared/lib/utils";import{CheckCircle2 as d,XCircle as a}from"lucide-react";export function EnglishCertificationOptionSelector({options:o,selectedOptionId:l,onSelect:i,disabled:n=!1,isReviewMode:s=!1,correctOptionId:c,variant:b="cards"}){return e("div","compact"===b?{className:"flex flex-col gap-1",role:"radiogroup",children:o.map(o=>{const b=o.id===l,p=s&&o.id===c,x=s&&b&&o.id!==c;return r("button",{type:"button",role:"radio","aria-checked":b,disabled:n,onClick:()=>!n&&i(o.id),className:t("flex items-center gap-2.5 rounded-md border border-transparent px-2.5 py-1.5 text-left text-base transition-all","hover:border-[#c8def7] hover:bg-[#f4f9ff]",b&&!s&&"border-[#99c5f8] bg-[#eff7ff] shadow-[inset_0_0_0_1px_rgba(17,103,232,0.08)]",p&&"border-[#b9edc8] bg-[#ddf8e7]",x&&"border-red-300 bg-red-50",n&&"cursor-not-allowed opacity-60"),children:[e("span",{className:t("grid h-4 w-4 shrink-0 place-items-center rounded-full border-2 border-[#94a3b8]",b&&!s&&"border-[#0b57d0]",p&&"border-[#22c55e]",x&&"border-red-500"),children:b&&e("span",{className:t("h-2 w-2 rounded-full bg-[#0b57d0]",p&&"bg-[#22c55e]",x&&"bg-red-500")})}),e("span",{className:"font-bold text-[#23304c]",children:o.label}),e("span",{className:"flex-1 leading-snug text-[#1e293b]",children:o.text}),s&&p&&e(d,{className:"h-4 w-4 shrink-0 text-[#22c55e]","aria-label":"Correct"}),s&&x&&e(a,{className:"h-4 w-4 shrink-0 text-red-500","aria-label":"Incorrect"})]},o.id)})}:{className:"grid gap-4 sm:gap-6",style:{gridTemplateColumns:`repeat(${Math.min(o.length,4)}, minmax(0, 1fr))`},role:"radiogroup",children:o.map(d=>{const a=d.id===l,o=s&&d.id===c,b=s&&a&&d.id!==c,p=a&&!s;return r("button",{type:"button",role:"radio","aria-checked":a,disabled:n,onClick:()=>!n&&i(d.id),className:t("relative flex min-h-[96px] flex-col items-center justify-center rounded-[10px] border p-3 transition-all","border-[#d9e4f2] bg-white shadow-[0_5px_16px_rgba(13,71,161,0.08)]","hover:-translate-y-0.5",p&&"border-[#0b57d0] text-white shadow-[0_16px_30px_rgba(11,87,208,0.25)]",o&&"border-[#22c55e] bg-[#ddf8e7]",b&&"border-red-400 bg-red-50",n&&"cursor-not-allowed opacity-60"),style:p?{background:"linear-gradient(180deg, #1f7cff, #0b57d0)"}:void 0,children:[e("span",{className:t("grid h-[52px] w-[52px] place-items-center rounded-full border-[1.5px] text-2xl font-black","border-[#0b57d0] bg-white text-[#0b57d0]",p&&"border-white",o&&"border-[#22c55e] text-[#22c55e]",b&&"border-red-500 text-red-500"),children:d.label}),d.text&&e("span",{className:t("mt-2 line-clamp-2 text-center text-sm font-semibold text-[#0f1730]",p&&"text-white",o&&"text-[#15803d]",b&&"text-red-700"),children:d.text}),(p||o)&&e("span",{className:"absolute right-2.5 top-2.5 grid h-[23px] w-[23px] place-items-center rounded-full bg-white text-[15px] font-black text-[#0b57d0]",children:"✓"})]},d.id)})})}

package/dist/components/themes/english-certification/EnglishCertificationPassagePanel.js

@@ -1,16 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useImageUrl } from '../../../shared/lib/hooks/useImageUrl';
-/**
- * Reading passage panel for grouped English Certification parts.
- *
- * Extracted into its own component so it can call {@link useImageUrl} to resolve
- * the passage image. The API persists images as S3 keys (e.g.
- * `questions/images/...`) which must be exchanged for a presigned URL before
- * they can be rendered. Local paths (`/...`) and absolute URLs pass through
- * unchanged.
- */
-export function EnglishCertificationPassagePanel({ passage, passageTitle, passageSubtitle, passageImageUrl, passageIsHtml, partName, }) {
-    const resolvedImageUrl = useImageUrl(passageImageUrl || null);
-    return (_jsxs("article", { className: "flex flex-col overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md", children: [_jsx("div", { className: "flex h-[52px] items-end border-b border-[#d9e4f2] bg-white/70 px-5", children: _jsx("span", { className: "flex h-full items-center border-b-[3px] border-[#0b57d0] text-sm font-black tracking-wide text-[#0a3d9a]", children: "PASSAGE" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "px-6 pt-6 leading-relaxed", children: [passageTitle && (_jsx("h1", { className: "mb-1 text-[clamp(20px,1.6vw,28px)] font-black leading-tight text-[#061a55]", children: passageTitle })), passageSubtitle && (_jsx("p", { className: "mb-4 text-[15px] font-semibold text-[#475569]", children: passageSubtitle })), resolvedImageUrl && (_jsx("div", { className: "mb-4 overflow-hidden rounded-lg border border-[#d9e4f2]", children: _jsx("img", { src: resolvedImageUrl, alt: "passage", className: "h-auto w-full object-cover" }) })), passageIsHtml ? (_jsx("div", { className: "ec-passage-html text-[15.8px] leading-relaxed text-[#1e293b] [&_p]:mb-3 [&_strong]:font-bold [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6 [&_table]:my-3 [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-2 [&_td]:py-1", dangerouslySetInnerHTML: { __html: passage } })) : (_jsx("div", { className: "whitespace-pre-wrap text-[15.8px] text-[#1e293b]", children: passage }))] }), _jsxs("div", { className: "mt-4 flex items-center gap-2.5 border-t border-[#d9e4f2] bg-white/92 px-5 py-3 text-[13px] font-bold text-[#334155] backdrop-blur-md", children: [_jsx("span", { className: "grid h-[18px] w-[18px] place-items-center rounded-full border-2 border-[#1167e8] text-[11px] font-black text-[#1167e8]", children: "i" }), partName || 'Reading', " \u00B7 Reading passage"] })] })] }));
-}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useImageUrl as t}from"../../../shared/lib/hooks/useImageUrl";export function EnglishCertificationPassagePanel({passage:l,passageTitle:r,passageSubtitle:d,passageImageUrl:s,passageIsHtml:i,partName:o}){const c=t(s||null);return a("article",{className:"flex flex-col overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md",children:[e("div",{className:"flex h-[52px] items-end border-b border-[#d9e4f2] bg-white/70 px-5",children:e("span",{className:"flex h-full items-center border-b-[3px] border-[#0b57d0] text-sm font-black tracking-wide text-[#0a3d9a]",children:"PASSAGE"})}),a("div",{className:"flex-1",children:[a("div",{className:"px-6 pt-6 leading-relaxed",children:[r&&e("h1",{className:"mb-1 text-[clamp(20px,1.6vw,28px)] font-black leading-tight text-[#061a55]",children:r}),d&&e("p",{className:"mb-4 text-[15px] font-semibold text-[#475569]",children:d}),c&&e("div",{className:"mb-4 overflow-hidden rounded-lg border border-[#d9e4f2]",children:e("img",{src:c,alt:"passage",className:"h-auto w-full object-cover"})}),e("div",i?{className:"ec-passage-html text-[15.8px] leading-relaxed text-[#1e293b] [&_p]:mb-3 [&_strong]:font-bold [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6 [&_table]:my-3 [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-2 [&_td]:py-1",dangerouslySetInnerHTML:{__html:l}}:{className:"whitespace-pre-wrap text-[15.8px] text-[#1e293b]",children:l})]}),a("div",{className:"mt-4 flex items-center gap-2.5 border-t border-[#d9e4f2] bg-white/92 px-5 py-3 text-[13px] font-bold text-[#334155] backdrop-blur-md",children:[e("span",{className:"grid h-[18px] w-[18px] place-items-center rounded-full border-2 border-[#1167e8] text-[11px] font-black text-[#1167e8]",children:"i"}),o||"Reading"," · Reading passage"]})]})]})}

package/dist/components/themes/english-certification/EnglishCertificationQuestionCard.js

@@ -1,22 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EnglishCertificationOptionSelector } from './EnglishCertificationOptionSelector';
-import { EnglishCertificationFlagButton } from './EnglishCertificationFlagButton';
-/**
- * Single MCQ rendered as a standalone Ocean Edu white card.
- *
- * Replaces the former shared-section/divider layout so each question matches the
- * target mockup (own card, number chip, flag button, compact options).
- */
-export function EnglishCertificationQuestionCard({ question, globalQuestionNumber, answer, isFlagged, sharedInstruction, onAnswerChange, onToggleFlag, isReviewMode = false, }) {
-    const content = question.content || {};
-    const rawOptions = content.options || [];
-    const questionText = content.question?.trim() ?? '';
-    // Skip per-question text when it merely repeats the shared part instruction.
-    const showQuestionText = questionText.length > 0 && questionText !== sharedInstruction;
-    return (_jsx("article", { className: "rounded-xl border border-[#d9e4f2] bg-white/90 px-4 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md transition-colors", children: _jsxs("div", { className: "grid grid-cols-[44px_1fr_32px] gap-1", children: [_jsx("div", { className: "grid h-9 w-9 place-items-center rounded-full bg-[#eef5ff] text-base font-black leading-none text-[#0b57d0]", children: globalQuestionNumber }), _jsxs("div", { className: "min-w-0", children: [showQuestionText && (_jsx("div", { className: "mb-2 text-base font-black leading-snug text-[#10172f]", children: questionText })), _jsx(EnglishCertificationOptionSelector, { options: rawOptions.map((option, optIdx) => ({
-                                id: option?.id || String.fromCharCode(65 + optIdx),
-                                label: option?.id || String.fromCharCode(65 + optIdx),
-                                text: option?.text || String(option ?? ''),
-                            })), selectedOptionId: answer?.optionId ?? null, onSelect: (optionId) => onAnswerChange(question.id, { optionId }), isReviewMode: isReviewMode, disabled: isReviewMode, variant: "compact" })] }), _jsx(EnglishCertificationFlagButton, { isFlagged: isFlagged, onToggle: () => onToggleFlag(question.id), size: "sm", className: "self-start justify-self-end" })] }) }));
-}
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{EnglishCertificationOptionSelector as t}from"./EnglishCertificationOptionSelector";import{EnglishCertificationFlagButton as n}from"./EnglishCertificationFlagButton";export function EnglishCertificationQuestionCard({question:o,globalQuestionNumber:r,answer:s,isFlagged:a,sharedInstruction:l,onAnswerChange:d,onToggleFlag:c,isReviewMode:g=!1}){const m=o.content||{},f=m.options||[],p=m.question?.trim()??"",u=p.length>0&&p!==l;return e("article",{className:"rounded-xl border border-[#d9e4f2] bg-white/90 px-4 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md transition-colors",children:i("div",{className:"grid grid-cols-[44px_1fr_32px] gap-1",children:[e("div",{className:"grid h-9 w-9 place-items-center rounded-full bg-[#eef5ff] text-base font-black leading-none text-[#0b57d0]",children:r}),i("div",{className:"min-w-0",children:[u&&e("div",{className:"mb-2 text-base font-black leading-snug text-[#10172f]",children:p}),e(t,{options:f.map((e,i)=>({id:e?.id||String.fromCharCode(65+i),label:e?.id||String.fromCharCode(65+i),text:e?.text||String(e??"")})),selectedOptionId:s?.optionId??null,onSelect:e=>d(o.id,{optionId:e}),isReviewMode:g,disabled:g,variant:"compact"})]}),e(n,{isFlagged:a,onToggle:()=>c(o.id),size:"sm",className:"self-start justify-self-end"})]})})}

package/dist/components/themes/english-certification/EnglishCertificationQuestionItem.js

@@ -1,37 +1 @@
-'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '../../../components/ui/dialog';
-import { ResolvedImage } from '../../../components/common/ResolvedImage';
-import { EnglishCertificationOptionSelector } from './EnglishCertificationOptionSelector';
-import { EnglishCertificationFlagButton } from './EnglishCertificationFlagButton';
-import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
-/**
- * Ocean Edu branded card for a single multiple-choice question.
- *
- * Renders the question badge, instruction, optional photo with zoom and the
- * A–D answer cards. Audio is intentionally NOT rendered here — listening parts
- * show one shared audio bar at the top of the question list.
- */
-export function EnglishCertificationQuestionItem({ question, questionNumber, questionConfig, defaultQuestion, isListeningPart = false, answer, isFlagged, onAnswerChange, onToggleFlag, isReviewMode = false, domId, }) {
-    const [isImageOpen, setIsImageOpen] = useState(false);
-    const selectedOptionId = answer?.optionId ?? null;
-    const options = useMemo(() => {
-        const rawOptions = question.content?.options;
-        if (!Array.isArray(rawOptions))
-            return [];
-        return rawOptions.map((opt, idx) => ({
-            id: String(opt?.id || `${question.id}-opt-${idx}`),
-            label: String.fromCharCode(65 + idx),
-            text: String(opt?.text || opt?.value || opt || ''),
-        }));
-    }, [question.content?.options, question.id]);
-    const hasImageConfig = questionConfig.includes('imageUrl');
-    const imageUrl = question.content?.imageUrl;
-    const shouldShowImage = hasImageConfig && Boolean(imageUrl);
-    const questionText = question.content?.question?.trim() || defaultQuestion || '';
-    const fallbackInstruction = isListeningPart
-        ? 'Look at the picture and listen to the four statements. Choose the best answer.'
-        : 'Read the question carefully and choose the best answer.';
-    return (_jsxs("div", { id: domId, className: `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} scroll-mt-24 overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md`, children: [_jsxs("div", { className: "flex items-center justify-between px-9 pt-6", children: [_jsxs("span", { className: "inline-flex h-[42px] items-center rounded-lg px-[18px] text-base font-black text-white shadow-[0_8px_16px_rgba(11,87,208,0.18)]", style: { background: 'linear-gradient(180deg, #1f7cff, #0b57d0)' }, children: ["Question ", questionNumber] }), _jsx(EnglishCertificationFlagButton, { isFlagged: isFlagged, onToggle: () => onToggleFlag(question.id) })] }), _jsxs("div", { className: "px-9 pb-8", children: [_jsxs("div", { className: "my-4 flex items-center gap-3 text-[17px] font-bold text-[#0f1730]", children: [isListeningPart && (_jsx("span", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#0b57d0] text-white", children: "\uD83D\uDD0A" })), _jsx("span", { children: questionText || fallbackInstruction })] }), shouldShowImage && imageUrl && (_jsxs("button", { type: "button", onClick: () => setIsImageOpen(true), className: "group relative mx-auto mb-6 block w-full overflow-hidden rounded-[13px] border border-[#cbdcf0] shadow-[0_16px_35px_rgba(6,26,85,0.13)]", "aria-label": "Open image in large view", children: [_jsx(ResolvedImage, { src: imageUrl, alt: `Question ${questionNumber} visual prompt`, className: "h-auto max-h-[360px] w-full object-cover transition-transform group-hover:scale-[1.01]" }), _jsx("span", { className: "absolute right-3 top-3 grid h-9 w-9 place-items-center rounded-full bg-black/55 text-lg text-white", children: "\u2315" })] })), _jsx("div", { className: "w-full", children: _jsx(EnglishCertificationOptionSelector, { options: options, selectedOptionId: selectedOptionId, onSelect: (optionId) => onAnswerChange(question.id, { optionId }), disabled: isReviewMode, isReviewMode: isReviewMode, variant: "cards" }) })] }), shouldShowImage && imageUrl && (_jsx(Dialog, { open: isImageOpen, onOpenChange: setIsImageOpen, children: _jsxs(DialogContent, { className: "max-w-4xl border-none bg-transparent p-0 shadow-none", children: [_jsx(DialogHeader, { className: "sr-only", children: _jsx(DialogTitle, { children: "Question image" }) }), _jsx("div", { className: "overflow-hidden rounded-lg bg-white", children: _jsx(ResolvedImage, { src: imageUrl, alt: `Question ${questionNumber} enlarged visual prompt`, className: "h-auto w-full object-contain" }) })] }) }))] }));
-}
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useState as o}from"react";import{Dialog as i,DialogContent as r,DialogHeader as a,DialogTitle as s}from"../../../components/ui/dialog";import{ResolvedImage as l}from"../../../components/common/ResolvedImage";import{EnglishCertificationOptionSelector as d}from"./EnglishCertificationOptionSelector";import{EnglishCertificationFlagButton as c}from"./EnglishCertificationFlagButton";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as m}from"./english-certification-theme";export function EnglishCertificationQuestionItem({question:p,questionNumber:h,questionConfig:u,defaultQuestion:g,isListeningPart:f=!1,answer:b,isFlagged:x,onAnswerChange:w,onToggleFlag:v,isReviewMode:N=!1,domId:C}){const[_,k]=o(!1),y=b?.optionId??null,j=n(()=>{const e=p.content?.options;return Array.isArray(e)?e.map((e,t)=>({id:String(e?.id||`${p.id}-opt-${t}`),label:String.fromCharCode(65+t),text:String(e?.text||e?.value||e||"")})):[]},[p.content?.options,p.id]),I=u.includes("imageUrl"),Q=p.content?.imageUrl,q=I&&Boolean(Q),S=p.content?.question?.trim()||g||"",$=f?"Look at the picture and listen to the four statements. Choose the best answer.":"Read the question carefully and choose the best answer.";return e("div",{id:C,className:`${m} scroll-mt-24 overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md`,children:[e("div",{className:"flex items-center justify-between px-9 pt-6",children:[e("span",{className:"inline-flex h-[42px] items-center rounded-lg px-[18px] text-base font-black text-white shadow-[0_8px_16px_rgba(11,87,208,0.18)]",style:{background:"linear-gradient(180deg, #1f7cff, #0b57d0)"},children:["Question ",h]}),t(c,{isFlagged:x,onToggle:()=>v(p.id)})]}),e("div",{className:"px-9 pb-8",children:[e("div",{className:"my-4 flex items-center gap-3 text-[17px] font-bold text-[#0f1730]",children:[f&&t("span",{className:"grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#0b57d0] text-white",children:"🔊"}),t("span",{children:S||$})]}),q&&Q&&e("button",{type:"button",onClick:()=>k(!0),className:"group relative mx-auto mb-6 block w-full overflow-hidden rounded-[13px] border border-[#cbdcf0] shadow-[0_16px_35px_rgba(6,26,85,0.13)]","aria-label":"Open image in large view",children:[t(l,{src:Q,alt:`Question ${h} visual prompt`,className:"h-auto max-h-[360px] w-full object-cover transition-transform group-hover:scale-[1.01]"}),t("span",{className:"absolute right-3 top-3 grid h-9 w-9 place-items-center rounded-full bg-black/55 text-lg text-white",children:"⌕"})]}),t("div",{className:"w-full",children:t(d,{options:j,selectedOptionId:y,onSelect:e=>w(p.id,{optionId:e}),disabled:N,isReviewMode:N,variant:"cards"})})]}),q&&Q&&t(i,{open:_,onOpenChange:k,children:e(r,{className:"max-w-4xl border-none bg-transparent p-0 shadow-none",children:[t(a,{className:"sr-only",children:t(s,{children:"Question image"})}),t("div",{className:"overflow-hidden rounded-lg bg-white",children:t(l,{src:Q,alt:`Question ${h} enlarged visual prompt`,className:"h-auto w-full object-contain"})})]})})]})}

package/dist/components/themes/english-certification/EnglishCertificationQuestionRenderer.js

@@ -1,72 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SkillEnum } from '../../../shared/types/common.types';
-import { EnglishCertificationSingleQuestionList } from './EnglishCertificationSingleQuestionList';
-import { EnglishCertificationGroupedQuestion } from './EnglishCertificationGroupedQuestion';
-import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
-import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
-import { EcWordFillStructuredForm } from './EcWordFillStructuredForm';
-import { EcMatchByWritingAnswer } from './EcMatchByWritingAnswer';
-import { EcAnswerTheQuestion } from './EcAnswerTheQuestion';
-import { EcWordFillParagraph } from './EcWordFillParagraph';
-import { EcWritingTask } from './EcWritingTask';
-/**
- * Question types that the branded English Certification theme renders natively
- * as multiple-choice cards (TOEIC + IELTS MCQ variants such as TRUE/FALSE/NOT GIVEN).
- */
-const EC_NATIVE_MCQ_TYPES = new Set(['CHOOSE_THE_CORRECT_ANSWER']);
-/**
- * Dispatcher for English Certification question rendering based on part config.
- *
- * - CHOOSE_THE_CORRECT_ANSWER → branded EC MCQ list / grouped split-view.
- * - DOCUMENT-group Reading parts → branded split-view (passage + questions).
- * - All other IELTS types are rendered by DEDICATED branded EC renderers
- *   (full-width, structured to match TOEIC) — never delegated to the shared
- *   Movers renderer, which squeezed IELTS tables into narrow columns.
- */
-export function EnglishCertificationQuestionRenderer({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode = false, }) {
-    if (!part.questions.length) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600", children: "No questions found for this part" }));
-    }
-    // Part-level audio (Listening sections always show the audio bar so students
-    // see the player even before the admin uploads the audio file).
-    const isListeningPart = partConfig.category === SkillEnum.LISTENING;
-    const partAudioUrl = isListeningPart
-        ? part.audioUrl ?? partConfig.audioUrl ?? ''
-        : undefined;
-    const questionType = part.questionType;
-    // Reading parts with a DOCUMENT passage (TOEIC Part 6/7 and IELTS Reading)
-    // use the branded split view: passage on the left, all questions on the
-    // right. IELTS Reading mixes sub-section types, handled inside the renderer.
-    const hasDocumentGroup = Boolean(part.isGroup) && part.group?.type === 'DOCUMENT';
-    const isGroupedMcq = partConfig.isGroup && EC_NATIVE_MCQ_TYPES.has(questionType);
-    // Mixed multi-section parts (e.g. Listening SECTION 2) are kept whole by
-    // groupQuestionsByPart with their sections attached. Route them to the
-    // grouped renderer, which stacks each sub-section via ReadingSection.
-    const hasSections = Boolean(part.sections?.length);
-    if (hasDocumentGroup || isGroupedMcq || hasSections) {
-        return (_jsx("div", { className: "h-full", children: _jsx(EnglishCertificationGroupedQuestion, { part: part, partConfig: partConfig, answers: answers, flaggedQuestions: flaggedQuestions, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode, isListeningPart: isListeningPart, partAudioUrl: partAudioUrl }) }));
-    }
-    // Native branded MCQ list (non-grouped CHOOSE_THE_CORRECT_ANSWER).
-    if (EC_NATIVE_MCQ_TYPES.has(questionType)) {
-        return (_jsx(EnglishCertificationSingleQuestionList, { part: part, partConfig: partConfig, answers: answers, flaggedQuestions: flaggedQuestions, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode, isListeningPart: isListeningPart, partAudioUrl: partAudioUrl }));
-    }
-    // Dedicated branded EC renderers for the remaining IELTS question types.
-    const renderDedicated = () => {
-        switch (questionType) {
-            case 'WORD_FILL_STRUCTURED_FORM':
-                return (_jsx(EcWordFillStructuredForm, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'MATCH_BY_WRITING_ANSWER':
-                return (_jsx(EcMatchByWritingAnswer, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'ANSWER_THE_QUESTION':
-                return (_jsx(EcAnswerTheQuestion, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'WORD_FILL_PARAGRAPH':
-                return (_jsx(EcWordFillParagraph, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'WRITE_A_SHORT_LETTER':
-                return (_jsx(EcWritingTask, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            default:
-                return (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-700", children: ["Lo\u1EA1i c\u00E2u h\u1ECFi \"", questionType, "\" ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3 trong giao di\u1EC7n n\u00E0y."] }));
-        }
-    };
-    return (_jsxs("div", { className: "flex flex-col items-center gap-5 pb-4", children: [isListeningPart && (_jsx("div", { className: ENGLISH_CERT_CONTENT_WIDTH_CLASS, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: partAudioUrl ?? '', partNumber: part.partNo }) })), _jsx("div", { className: `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} w-full`, children: renderDedicated() })] }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{SkillEnum as i}from"../../../shared/types/common.types";import{EnglishCertificationSingleQuestionList as n}from"./EnglishCertificationSingleQuestionList";import{EnglishCertificationGroupedQuestion as o}from"./EnglishCertificationGroupedQuestion";import{EnglishCertificationAudioPlayer as s}from"./EnglishCertificationAudioPlayer";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as t}from"./english-certification-theme";import{EcWordFillStructuredForm as a}from"./EcWordFillStructuredForm";import{EcMatchByWritingAnswer as l}from"./EcMatchByWritingAnswer";import{EcAnswerTheQuestion as d}from"./EcAnswerTheQuestion";import{EcWordFillParagraph as c}from"./EcWordFillParagraph";import{EcWritingTask as g}from"./EcWritingTask";const u=new Set(["CHOOSE_THE_CORRECT_ANSWER"]);export function EnglishCertificationQuestionRenderer({part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:E=!1}){if(!p.questions.length)return e("div",{className:"flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600",children:"No questions found for this part"});const A=m.category===i.LISTENING,C=A?p.audioUrl??m.audioUrl??"":void 0,T=p.questionType,N=Boolean(p.isGroup)&&"DOCUMENT"===p.group?.type,_=m.isGroup&&u.has(T),v=Boolean(p.sections?.length);if(N||_||v)return e("div",{className:"h-full",children:e(o,{part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:E,isListeningPart:A,partAudioUrl:C})});if(u.has(T))return e(n,{part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:E,isListeningPart:A,partAudioUrl:C});return r("div",{className:"flex flex-col items-center gap-5 pb-4",children:[A&&e("div",{className:t,children:e(s,{audioUrl:C??"",partNumber:p.partNo})}),e("div",{className:`${t} w-full`,children:(()=>{switch(T){case"WORD_FILL_STRUCTURED_FORM":return e(a,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"MATCH_BY_WRITING_ANSWER":return e(l,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"ANSWER_THE_QUESTION":return e(d,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"WORD_FILL_PARAGRAPH":return e(c,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"WRITE_A_SHORT_LETTER":return e(g,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});default:return r("div",{className:"rounded-xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-700",children:['Loại câu hỏi "',T,'" chưa được hỗ trợ trong giao diện này.']})}})()})]})}

package/dist/components/themes/english-certification/EnglishCertificationReadingSection.js

@@ -1,90 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EnglishCertificationOptionSelector } from './EnglishCertificationOptionSelector';
-import { EnglishCertificationFlagButton } from './EnglishCertificationFlagButton';
-import { EcWordFillStructuredForm } from './EcWordFillStructuredForm';
-import { EcMatchByWritingAnswer } from './EcMatchByWritingAnswer';
-import { EcAnswerTheQuestion } from './EcAnswerTheQuestion';
-import { EcWordFillParagraph } from './EcWordFillParagraph';
-import { EcWritingTask } from './EcWritingTask';
-/**
- * Maps a question's options to the selector shape.
- *
- * Handles three shapes:
- * - `{ id, text }` objects (standard MCQ options).
- * - plain strings from `section.defaultValue` (IELTS TRUE/FALSE/NOT GIVEN),
- *   where the string itself is both the stored value and the displayed text.
- */
-function mapOptions(rawOptions) {
-    return rawOptions.map((option, optIdx) => {
-        const letter = String.fromCharCode(65 + optIdx);
-        if (typeof option === 'string') {
-            // IELTS TRUE/FALSE/NOT GIVEN — store the string as the option id.
-            return { id: option, label: letter, text: option };
-        }
-        return {
-            id: String(option?.id || letter),
-            label: String(option?.id || letter),
-            text: String(option?.text ?? option?.value ?? option ?? ''),
-        };
-    });
-}
-/**
- * Renders one sub-section of an IELTS Reading part inside the right-hand
- * question column.
- *
- * - CHOOSE_THE_CORRECT_ANSWER (incl. TRUE/FALSE/NOT GIVEN) → branded MCQ cards.
- * - Any other type (ANSWER_THE_QUESTION, WORD_FILL_PARAGRAPH,
- *   WORD_FILL_STRUCTURED_FORM, MATCH_BY_WRITING_ANSWER, …) is delegated to the
- *   shared TOEIC-style renderer so the proven transformers/answer shapes apply.
- */
-export function EnglishCertificationReadingSection({ part, section, questions, startIndex, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode = false, }) {
-    if (!questions.length)
-        return null;
-    const sectionInstruction = (section.instructions || section.name || '').trim();
-    const isMcq = section.questionType === 'CHOOSE_THE_CORRECT_ANSWER';
-    if (isMcq) {
-        return (_jsxs("div", { className: "flex flex-col gap-3", children: [sectionInstruction && (_jsx("p", { className: "text-sm font-semibold leading-relaxed text-[#0b57d0]", children: sectionInstruction })), _jsx("div", { className: "divide-y divide-[#e8eef7]", children: questions.map((question) => {
-                        const globalNumber = part.questions.indexOf(question) + startIndex + 1;
-                        const content = question.content || {};
-                        const rawOptions = Array.isArray(content.options)
-                            ? content.options
-                            : section.defaultValue ?? [];
-                        const questionText = content.question?.trim() ?? '';
-                        const answer = answers[question.id];
-                        return (_jsxs("article", { className: "grid grid-cols-[44px_1fr_32px] gap-1 py-4", children: [_jsxs("div", { className: "text-[18px] font-black leading-snug text-[#0b57d0]", children: [globalNumber, "."] }), _jsxs("div", { className: "min-w-0", children: [questionText && (_jsx("div", { className: "mb-2 text-[15px] font-black leading-snug text-[#10172f]", children: questionText })), _jsx(EnglishCertificationOptionSelector, { options: mapOptions(rawOptions), selectedOptionId: answer?.optionId ?? null, onSelect: (optionId) => onAnswerChange(question.id, { optionId }), isReviewMode: isReviewMode, disabled: isReviewMode, variant: "compact" })] }), _jsx(EnglishCertificationFlagButton, { isFlagged: flaggedQuestions.has(question.id), onToggle: () => onToggleFlag(question.id), size: "sm", className: "self-start justify-self-end" })] }, question.id));
-                    }) })] }));
-    }
-    // Build a synthetic sub-part carrying only this section's questions so the
-    // dedicated branded EC renderers can transform/render it standalone.
-    const subPart = {
-        ...part,
-        questionType: section.questionType,
-        questions,
-        instructions: sectionInstruction || part.instructions,
-        isGroup: false,
-        group: undefined,
-        sections: undefined,
-        viewMode: section.viewMode,
-        wordBankConfig: section.wordBankConfig,
-        startIndex: section.startIndex,
-        endIndex: section.endIndex,
-    };
-    const renderSubSection = () => {
-        switch (section.questionType) {
-            case 'WORD_FILL_STRUCTURED_FORM':
-                return (_jsx(EcWordFillStructuredForm, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'MATCH_BY_WRITING_ANSWER':
-                return (_jsx(EcMatchByWritingAnswer, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'ANSWER_THE_QUESTION':
-                return (_jsx(EcAnswerTheQuestion, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'WORD_FILL_PARAGRAPH':
-                return (_jsx(EcWordFillParagraph, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            case 'WRITE_A_SHORT_LETTER':
-                return (_jsx(EcWritingTask, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-            default:
-                return (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700", children: ["Lo\u1EA1i c\u00E2u h\u1ECFi \"", section.questionType, "\" ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3."] }));
-        }
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [sectionInstruction && (_jsx("p", { className: "text-sm font-semibold leading-relaxed text-[#0b57d0]", children: sectionInstruction })), renderSubSection()] }));
-}
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{EnglishCertificationOptionSelector as t}from"./EnglishCertificationOptionSelector";import{EnglishCertificationFlagButton as n}from"./EnglishCertificationFlagButton";import{EcWordFillStructuredForm as r}from"./EcWordFillStructuredForm";import{EcMatchByWritingAnswer as s}from"./EcMatchByWritingAnswer";import{EcAnswerTheQuestion as o}from"./EcAnswerTheQuestion";import{EcWordFillParagraph as a}from"./EcWordFillParagraph";import{EcWritingTask as d}from"./EcWritingTask";function l(e){return e.map((e,i)=>{const t=String.fromCharCode(65+i);return"string"==typeof e?{id:e,label:t,text:e}:{id:String(e?.id||t),label:String(e?.id||t),text:String(e?.text??e?.value??e??"")}})}export function EnglishCertificationReadingSection({part:c,section:m,questions:u,startIndex:p,answers:g,flaggedQuestions:f,onAnswerChange:x,onToggleFlag:h,isReviewMode:w=!1}){if(!u.length)return null;const R=(m.instructions||m.name||"").trim();if("CHOOSE_THE_CORRECT_ANSWER"===m.questionType)return i("div",{className:"flex flex-col gap-3",children:[R&&e("p",{className:"text-sm font-semibold leading-relaxed text-[#0b57d0]",children:R}),e("div",{className:"divide-y divide-[#e8eef7]",children:u.map(r=>{const s=c.questions.indexOf(r)+p+1,o=r.content||{},a=Array.isArray(o.options)?o.options:m.defaultValue??[],d=o.question?.trim()??"",u=g[r.id];return i("article",{className:"grid grid-cols-[44px_1fr_32px] gap-1 py-4",children:[i("div",{className:"text-[18px] font-black leading-snug text-[#0b57d0]",children:[s,"."]}),i("div",{className:"min-w-0",children:[d&&e("div",{className:"mb-2 text-[15px] font-black leading-snug text-[#10172f]",children:d}),e(t,{options:l(a),selectedOptionId:u?.optionId??null,onSelect:e=>x(r.id,{optionId:e}),isReviewMode:w,disabled:w,variant:"compact"})]}),e(n,{isFlagged:f.has(r.id),onToggle:()=>h(r.id),size:"sm",className:"self-start justify-self-end"})]},r.id)})})]});const v={...c,questionType:m.questionType,questions:u,instructions:R||c.instructions,isGroup:!1,group:void 0,sections:void 0,viewMode:m.viewMode,wordBankConfig:m.wordBankConfig,startIndex:m.startIndex,endIndex:m.endIndex};return i("div",{className:"flex flex-col gap-3",children:[R&&e("p",{className:"text-sm font-semibold leading-relaxed text-[#0b57d0]",children:R}),(()=>{switch(m.questionType){case"WORD_FILL_STRUCTURED_FORM":return e(r,{part:v,answers:g,onAnswerChange:x,isReviewMode:w});case"MATCH_BY_WRITING_ANSWER":return e(s,{part:v,answers:g,onAnswerChange:x,isReviewMode:w});case"ANSWER_THE_QUESTION":return e(o,{part:v,answers:g,onAnswerChange:x,isReviewMode:w});case"WORD_FILL_PARAGRAPH":return e(a,{part:v,answers:g,onAnswerChange:x,isReviewMode:w});case"WRITE_A_SHORT_LETTER":return e(d,{part:v,answers:g,onAnswerChange:x,isReviewMode:w});default:return i("div",{className:"rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700",children:['Loại câu hỏi "',m.questionType,'" chưa được hỗ trợ.']})}})()]})}

package/dist/components/themes/english-certification/EnglishCertificationSingleQuestion.js

@@ -1,18 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
-import { EnglishCertificationQuestionItem } from './EnglishCertificationQuestionItem';
-import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
-/**
- * Ocean Edu branded renderer for a single (non-grouped) question.
- *
- * Thin wrapper around {@link EnglishCertificationQuestionItem} that prepends the
- * shared audio bar for listening parts. Kept for review mode and any
- * one-question-per-screen flow; multi-question screens use the question list.
- */
-export function EnglishCertificationSingleQuestion({ question, questionNumber, questionConfig, defaultQuestion, partAudioUrl, isListeningPart = false, answer, isFlagged, onAnswerChange, onToggleFlag, isReviewMode = false, }) {
-    // Resolve effective audio: prefer the question's own audio, otherwise fall
-    // back to the part-level audio (TOEIC Listening Part 1/2 define audio per part).
-    const effectiveAudioUrl = question.audio_url || partAudioUrl || '';
-    return (_jsxs("div", { className: "flex flex-col items-center gap-5", children: [effectiveAudioUrl && (_jsx("div", { className: ENGLISH_CERT_CONTENT_WIDTH_CLASS, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: effectiveAudioUrl, partNumber: question.part_no }) })), _jsx(EnglishCertificationQuestionItem, { question: question, questionNumber: questionNumber, questionConfig: questionConfig, defaultQuestion: defaultQuestion, isListeningPart: isListeningPart, answer: answer, isFlagged: isFlagged, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode })] }));
-}
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{EnglishCertificationAudioPlayer as n}from"./EnglishCertificationAudioPlayer";import{EnglishCertificationQuestionItem as t}from"./EnglishCertificationQuestionItem";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as o}from"./english-certification-theme";export function EnglishCertificationSingleQuestion({question:s,questionNumber:r,questionConfig:a,defaultQuestion:l,partAudioUrl:u,isListeningPart:g=!1,answer:m,isFlagged:c,onAnswerChange:f,onToggleFlag:d,isReviewMode:h=!1}){const p=s.audio_url||u||"";return i("div",{className:"flex flex-col items-center gap-5",children:[p&&e("div",{className:o,children:e(n,{audioUrl:p,partNumber:s.part_no})}),e(t,{question:s,questionNumber:r,questionConfig:a,defaultQuestion:l,isListeningPart:g,answer:m,isFlagged:c,onAnswerChange:f,onToggleFlag:d,isReviewMode:h})]})}

package/dist/components/themes/english-certification/EnglishCertificationSingleQuestionList.js

@@ -1,29 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
-import { EnglishCertificationQuestionItem } from './EnglishCertificationQuestionItem';
-import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
-/** Stable DOM id for a question card, used for Answer-Sheet scroll-to. */
-export function englishCertQuestionDomId(questionId) {
-    return `ec-question-${questionId}`;
-}
-/**
- * Renders every question of a single-question part (or section) on one screen.
- *
- * Listening parts show a single shared audio bar at the top; all questions then
- * stack vertically. Navigation across parts/sections is handled by the footer.
- */
-export function EnglishCertificationSingleQuestionList({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode = false, isListeningPart = false, partAudioUrl, }) {
-    const startIndex = partConfig.startIndex ?? 0;
-    const questionConfig = Array.isArray(partConfig.questionConfig)
-        ? partConfig.questionConfig
-        : [];
-    const defaultQuestion = partConfig.defaultQuestion;
-    const showAudio = isListeningPart && Boolean(partAudioUrl);
-    return (_jsxs("div", { className: "flex flex-col items-center gap-5 pb-4", children: [showAudio && (_jsx("div", { className: ENGLISH_CERT_CONTENT_WIDTH_CLASS, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: partAudioUrl, partNumber: part.partNo }) })), part.questions.map((question, idx) => {
-                const effectiveQuestionConfig = question.audio_url
-                    ? Array.from(new Set([...questionConfig, 'audioUrl']))
-                    : questionConfig;
-                return (_jsx(EnglishCertificationQuestionItem, { domId: englishCertQuestionDomId(question.id), question: question, questionNumber: startIndex + idx + 1, questionConfig: effectiveQuestionConfig, defaultQuestion: defaultQuestion, isListeningPart: isListeningPart, answer: answers[question.id], isFlagged: flaggedQuestions.has(question.id), onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode }, question.id));
-            })] }));
-}
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{EnglishCertificationAudioPlayer as n}from"./EnglishCertificationAudioPlayer";import{EnglishCertificationQuestionItem as t}from"./EnglishCertificationQuestionItem";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as o}from"./english-certification-theme";export function englishCertQuestionDomId(e){return`ec-question-${e}`}export function EnglishCertificationSingleQuestionList({part:r,partConfig:s,answers:a,flaggedQuestions:u,onAnswerChange:l,onToggleFlag:g,isReviewMode:d=!1,isListeningPart:m=!1,partAudioUrl:f}){const c=s.startIndex??0,p=Array.isArray(s.questionConfig)?s.questionConfig:[],h=s.defaultQuestion,C=m&&Boolean(f);return i("div",{className:"flex flex-col items-center gap-5 pb-4",children:[C&&e("div",{className:o,children:e(n,{audioUrl:f,partNumber:r.partNo})}),r.questions.map((i,n)=>{const o=i.audio_url?Array.from(new Set([...p,"audioUrl"])):p;return e(t,{domId:englishCertQuestionDomId(i.id),question:i,questionNumber:c+n+1,questionConfig:o,defaultQuestion:h,isListeningPart:m,answer:a[i.id],isFlagged:u.has(i.id),onAnswerChange:l,onToggleFlag:g,isReviewMode:d},i.id)})]})}

package/dist/components/themes/english-certification/english-certification-theme.js

@@ -1,58 +1 @@
-/**
- * English Certification theme — shared design tokens and reusable class fragments.
- *
- * A branded Ocean Edu look shared across standardized English certification
- * exams (TOEIC, IELTS, …). Centralises colours, radii, shadows and branded SVG
- * assets so the look stays consistent and easy to tune.
- */
-/** Brand palette (hex) reused by inline styles and gradients. */
-export const ENGLISH_CERT_COLORS = {
-    blue950: '#061a55',
-    blue900: '#072b7a',
-    blue800: '#0a3d9a',
-    blue700: '#0b57d0',
-    blue600: '#1167e8',
-    blue500: '#1f7cff',
-    blue100: '#e9f3ff',
-    blue50: '#f4f9ff',
-    orange600: '#f97316',
-    orange500: '#ff8a00',
-    orange100: '#fff1db',
-    green500: '#22c55e',
-    green100: '#ddf8e7',
-    red500: '#ef4444',
-    text: '#0f1730',
-    muted: '#64748b',
-    border: '#d9e4f2',
-};
-/** Fixed layout dimensions (px). */
-export const ENGLISH_CERT_LAYOUT = {
-    headerHeight: 74,
-    footerHeight: 76,
-    radius: 12,
-    /** Shared max content width (px) for question card, image, audio bar and answers. */
-    contentMaxWidth: 940,
-};
-/**
- * Shared content-width class fragment (Tailwind).
- * Centres the inner content blocks (image, audio bar, answer grid) so they line
- * up consistently across every question screen.
- */
-export const ENGLISH_CERT_CONTENT_WIDTH_CLASS = 'mx-auto w-full max-w-[940px]';
-/**
- * Full-page gradient background applied to the app shell.
- * Combines two soft radial highlights with a vertical base gradient.
- */
-export const ENGLISH_CERT_APP_BACKGROUND = 'radial-gradient(circle at 20% -10%, rgba(31,124,255,0.13), transparent 28%),' +
-    'radial-gradient(circle at 70% 0%, rgba(0,184,255,0.13), transparent 24%),' +
-    'linear-gradient(180deg, #f9fdff 0%, #edf7ff 52%, #f9fdff 100%)';
-/** Reusable glass-card class fragment (Tailwind). */
-export const ENGLISH_CERT_CARD_CLASS = 'rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md';
-/** Branded gradient used for the answer-sheet header and primary actions. */
-export const ENGLISH_CERT_PRIMARY_GRADIENT = 'linear-gradient(180deg, #1f7cff, #0b57d0)';
-/**
- * Decorative footer wave (URL-encoded SVG) shown along the bottom action bar.
- */
-export const ENGLISH_CERT_FOOTER_WAVE = "url(\"data:image/svg+xml,%3Csvg width='1600' height='80' viewBox='0 0 1600 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 44C190 20 334 28 520 44C746 64 850 15 1070 34C1258 50 1408 38 1600 28V80H0V44Z' fill='%230B57D0'/%3E%3Cpath d='M0 50C230 26 346 50 540 55C760 61 872 26 1088 45C1280 62 1430 40 1600 38V80H0V50Z' fill='%23051A55' fill-opacity='0.35'/%3E%3C/svg%3E\")";
-/** Encouraging tagline shown in the branded footer. */
-export const ENGLISH_CERT_FOOTER_NOTE = 'Believe in yourself. You are stronger than you think.';
+export const ENGLISH_CERT_COLORS={blue950:"#061a55",blue900:"#072b7a",blue800:"#0a3d9a",blue700:"#0b57d0",blue600:"#1167e8",blue500:"#1f7cff",blue100:"#e9f3ff",blue50:"#f4f9ff",orange600:"#f97316",orange500:"#ff8a00",orange100:"#fff1db",green500:"#22c55e",green100:"#ddf8e7",red500:"#ef4444",text:"#0f1730",muted:"#64748b",border:"#d9e4f2"};export const ENGLISH_CERT_LAYOUT={headerHeight:74,footerHeight:76,radius:12,contentMaxWidth:940};export const ENGLISH_CERT_CONTENT_WIDTH_CLASS="mx-auto w-full max-w-[940px]";export const ENGLISH_CERT_APP_BACKGROUND="radial-gradient(circle at 20% -10%, rgba(31,124,255,0.13), transparent 28%),radial-gradient(circle at 70% 0%, rgba(0,184,255,0.13), transparent 24%),linear-gradient(180deg, #f9fdff 0%, #edf7ff 52%, #f9fdff 100%)";export const ENGLISH_CERT_CARD_CLASS="rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md";export const ENGLISH_CERT_PRIMARY_GRADIENT="linear-gradient(180deg, #1f7cff, #0b57d0)";export const ENGLISH_CERT_FOOTER_WAVE="url(\"data:image/svg+xml,%3Csvg width='1600' height='80' viewBox='0 0 1600 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 44C190 20 334 28 520 44C746 64 850 15 1070 34C1258 50 1408 38 1600 28V80H0V44Z' fill='%230B57D0'/%3E%3Cpath d='M0 50C230 26 346 50 540 55C760 61 872 26 1088 45C1280 62 1430 40 1600 38V80H0V50Z' fill='%23051A55' fill-opacity='0.35'/%3E%3C/svg%3E\")";export const ENGLISH_CERT_FOOTER_NOTE="Believe in yourself. You are stronger than you think.";