@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

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

@@ -1 +1,192 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useEffect as n,useMemo as s,useCallback as a,memo as o}from"react";import{ResolvedImage as l}from"../../../components/common/ResolvedImage";import{cn as i}from"../../../shared/lib/utils";import{transformWordFillStructuredForm as d}from"../../../components/exams/take/exam-taking.utils";import{englishCertQuestionDomId as c}from"./english-cert-scroll";function b(e){const t=Number(e);return Number.isFinite(t)?String(t+1):e}function u(e,t){const r=e.trim();return t?r:r.toLowerCase()}function m(e,t){const r=Object.keys(e).map(e=>Number(e)).filter(e=>Number.isFinite(e)).sort((e,t)=>e-t);if(0===r.length)return`Question ${t}`;const n=r[0]+1,s=r[r.length-1]+1;return n===s?`Question ${n}`:`Questions ${n}–${s}`}const p={},f=o(function({question:a,initialAnswers:o,onBlankChange:d,isReviewMode:c}){const m=r(null),p=r(d);p.current=d;const f=r(!1),x=r(o),g=s(()=>a.content.replace(/\{([\w\d]+)\}/g,(e,t)=>`\n      <span class="ec-blank-wrapper" data-blank-wrapper="${t}">\n        <span class="ec-blank-number" data-blank-number="${t}">${b(t)}</span>\n        <input type="text" data-blank-key="${t}" class="ec-blank-input" />\n      </span>\n    `),[a.content]);return n(()=>{const e=m.current;if(!e)return;f.current||(e.innerHTML=g,f.current=!0);const t=e.querySelectorAll("input.ec-blank-input"),r=[];return t.forEach(t=>{const n=t.getAttribute("data-blank-key")||"",s=e.querySelector(`[data-blank-wrapper="${n}"]`),o=x.current[n]||"",l=a.answers[n]||"",d=o.trim().length>0,m=d&&u(o,a.caseSensitive)===u(l,a.caseSensitive),f=c&&!m&&l.trim().length>0;t.value=f?`${d?o:"(empty)"} → ${l}`:o,t.disabled=c,t.className=i("ec-blank-input inline-block min-w-[100px] max-w-[200px] rounded-t border-0 border-b-2 border-dashed border-[#1167e8] bg-blue-50/30 px-2 py-0.5 text-base font-semibold leading-tight text-[#0f1730] align-baseline outline-none transition-all hover:bg-blue-50/60 focus:border-solid focus:border-[#0b57d0] focus:bg-blue-50/80",c?m?"border-solid border-[#22c55e] bg-emerald-50 text-[#15803d]":d?"border-solid border-[#ef4444] bg-rose-50 text-red-700":"border-solid border-[#f97316] bg-amber-50 text-[#c2410c]":"");const g=e.querySelector(`[data-blank-number="${n}"]`);g&&(g.textContent=b(n),g.className=i("ec-blank-number mr-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-bold leading-none text-white align-baseline shadow-xs",c?m?"bg-[#22c55e]":d?"bg-[#ef4444]":"bg-[#f97316]":"bg-[#0b57d0]")),s&&(s.className=i("ec-blank-wrapper inline-flex items-baseline whitespace-nowrap align-baseline",c?"mx-1":"mx-0.5"));const h=e=>{const t=e.target;p.current(n,t.value)};t.addEventListener("input",h),r.push({el:t,handler:h})}),()=>{r.forEach(({el:e,handler:t})=>{e.removeEventListener("input",t)})}},[g,c]),t("div",{className:"space-y-3",children:[a.title&&e("h3",{className:"text-base font-semibold text-[#0f1730]",children:a.title}),a.imageUrl&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-[#d9e4f2]",children:e(l,{src:a.imageUrl,alt:a.title||"Question image",className:"max-h-56 w-auto object-contain"})})}),e("div",{ref:m,className:"ec-structured-content w-full overflow-x-auto rounded-xl border border-[#d9e4f2] bg-[#f4f9ff] p-5 text-base leading-relaxed text-[#0f1730] [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-4 [&_td]:py-3 [&_td]:align-top [&_th]:border [&_th]:border-[#d9e4f2] [&_th]:bg-[#e9f3ff] [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-semibold"}),c&&Object.keys(a.answers).length>0&&t("div",{className:"rounded-xl border border-[#d9e4f2] bg-white/70 p-3",children:[e("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-[#64748b]",children:"Correct answers"}),e("div",{className:"mt-1 flex flex-wrap gap-1.5",children:Object.entries(a.answers).map(([e,r])=>t("span",{className:"rounded border border-[#b9edc8] bg-[#ddf8e7] px-2 py-0.5 text-xs font-semibold text-[#15803d]",children:[e,": ",r]},e))})]})]})});export function EcWordFillStructuredForm({part:n,answers:o,onAnswerChange:i,isReviewMode:b=!1}){const{questions:u,instruction:x,groupTitle:g,groupContent:h,groupImageUrl:w}=s(()=>d(n.questions),[n.questions]),N=r(o);N.current=o;const v=r(i);v.current=i;const k=a((e,t,r)=>{const n=N.current[e]||{};v.current(e,{...n,[t]:r})},[]),y=s(()=>{const e={};return u.forEach(t=>{e[t.id]=(e,r)=>k(t.id,e,r)}),e},[u,k]);return t("div",{className:"flex flex-col gap-4",children:[x&&e("div",{className:"rounded-xl border border-[#d9e4f2] bg-[#e9f3ff] px-4 py-2.5 text-sm font-semibold uppercase tracking-wide text-[#0b57d0]",children:x}),g&&e("h2",{className:"text-center text-lg font-bold uppercase text-[#0b57d0]",children:g}),w&&e("div",{className:"flex items-center justify-center",children:e(l,{src:w,alt:g||"Group image",className:"max-h-[300px] rounded-lg object-contain shadow-md"})}),e("div",{className:"flex flex-col gap-4",children:u.map(r=>t("div",{id:c(r.id),className:"scroll-mt-24 rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)] backdrop-blur-md",children:[e("div",{className:"mb-2 flex items-center gap-2",children:e("span",{className:"inline-flex items-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] px-3 py-1 text-xs font-bold text-white shadow-sm",children:m(r.answers,r.questionNumber)})}),e(f,{question:r,initialAnswers:o[r.id]||p,onBlankChange:y[r.id],isReviewMode:b})]},r.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useMemo, useCallback, memo } from 'react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { cn } from '../../../shared/lib/utils';
+import { transformWordFillStructuredForm } from '../../../components/exams/take/exam-taking.utils';
+import { englishCertQuestionDomId } from './english-cert-scroll';
+/**
+ * Replace `{key}` placeholders in raw HTML with inline `<input>` elements so the
+ * full HTML structure (tables, forms, …) is preserved and inputs render inside
+ * the correct cells — never breaking onto new lines or squeezing the layout.
+ */
+/** Convert a 0-based blank key into the 1-based number shown to the student. */
+function toDisplayNumber(key) {
+    const numeric = Number(key);
+    return Number.isFinite(numeric) ? String(numeric + 1) : key;
+}
+function buildHtmlWithInputPlaceholders(html) {
+    return html.replace(/\{([\w\d]+)\}/g, (_match, key) => {
+        return `
+      <span class="ec-blank-wrapper" data-blank-wrapper="${key}">
+        <span class="ec-blank-number" data-blank-number="${key}">${toDisplayNumber(key)}</span>
+        <input type="text" data-blank-key="${key}" class="ec-blank-input" />
+      </span>
+    `;
+    });
+}
+function normalizeStructuredAnswer(value, caseSensitive) {
+    const normalized = value
+        .trim()
+        .replace(/[\p{P}]/gu, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return caseSensitive ? normalized : normalized.toLowerCase();
+}
+/**
+ * Build the card label from the blank keys (which are the IELTS question numbers).
+ * Returns "Questions x–y" for a numeric range, a single "Question n", or falls
+ * back to `Question {fallback}` when keys are non-numeric/empty.
+ */
+function formatBlankRange(answers, fallback) {
+    const numericKeys = Object.keys(answers)
+        .map((key) => Number(key))
+        .filter((n) => Number.isFinite(n))
+        .sort((a, b) => a - b);
+    if (numericKeys.length === 0) {
+        return `Question ${fallback}`;
+    }
+    // Keys are 0-based; display numbers are 1-based.
+    const min = numericKeys[0] + 1;
+    const max = numericKeys[numericKeys.length - 1] + 1;
+    return min === max ? `Question ${min}` : `Questions ${min}–${max}`;
+}
+/** Stable empty object so React.memo children are not broken by new `{}`. */
+const EMPTY_OBJECT = {};
+/**
+ * Renders one structured-form question's HTML with inline branded inputs.
+ *
+ * CRITICAL: We set `innerHTML` imperatively via a ref exactly ONCE on mount and
+ * attach native input listeners, bypassing React reconciliation. Using
+ * `dangerouslySetInnerHTML` would re-apply HTML on every render, destroying the
+ * DOM inputs and losing focus while the student types.
+ */
+const StructuredFormBody = memo(function StructuredFormBody({ question, initialAnswers, onBlankChange, isReviewMode, }) {
+    const containerRef = useRef(null);
+    const onBlankChangeRef = useRef(onBlankChange);
+    onBlankChangeRef.current = onBlankChange;
+    const mountedRef = useRef(false);
+    const initialAnswersRef = useRef(initialAnswers);
+    const processedHtml = useMemo(() => buildHtmlWithInputPlaceholders(question.content), [question.content]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (!mountedRef.current) {
+            container.innerHTML = processedHtml;
+            mountedRef.current = true;
+        }
+        const inputs = container.querySelectorAll('input.ec-blank-input');
+        const handlers = [];
+        inputs.forEach((input) => {
+            const key = input.getAttribute('data-blank-key') || '';
+            const wrapper = container.querySelector(`[data-blank-wrapper="${key}"]`);
+            const userAnswer = initialAnswersRef.current[key] || '';
+            const correctAnswer = question.answers[key] || '';
+            const hasUserAnswer = userAnswer.trim().length > 0;
+            const isCorrect = hasUserAnswer &&
+                normalizeStructuredAnswer(userAnswer, question.caseSensitive) ===
+                    normalizeStructuredAnswer(correctAnswer, question.caseSensitive);
+            const shouldShowReviewText = isReviewMode && !isCorrect && correctAnswer.trim().length > 0;
+            input.value = shouldShowReviewText
+                ? `${hasUserAnswer ? userAnswer : '(empty)'} → ${correctAnswer}`
+                : userAnswer;
+            input.disabled = isReviewMode;
+            const blankStyle = question.blankStyle || 'word';
+            const isLetter = blankStyle === 'letter';
+            const isPhrase = blankStyle === 'phrase';
+            if (isLetter) {
+                input.maxLength = Math.max(1, (correctAnswer || ' ').trim().length || 1);
+            }
+            input.className = cn('ec-blank-input inline-block bg-blue-50/30 text-base font-semibold leading-tight text-[#0f1730] align-baseline outline-none transition-all hover:bg-blue-50/60 focus:bg-blue-50/80', isLetter
+                ? 'h-8 w-8 rounded border-2 border-[#1167e8] px-0 text-center uppercase'
+                : isPhrase
+                    ? 'min-w-[9rem] max-w-[18rem] w-[14ch] rounded-t border-0 border-b-2 border-dashed border-[#1167e8] px-2 py-0.5 text-center focus:border-solid focus:border-[#0b57d0]'
+                    : // blankStyle=word — compact for one token
+                        'min-w-[4.5rem] max-w-[7.5rem] w-[8ch] rounded-t border-0 border-b-2 border-dashed border-[#1167e8] px-1 py-0.5 text-center focus:border-solid focus:border-[#0b57d0]', isReviewMode
+                ? isCorrect
+                    ? 'border-solid border-[#22c55e] bg-emerald-50 text-[#15803d]'
+                    : hasUserAnswer
+                        ? 'border-solid border-[#ef4444] bg-rose-50 text-red-700'
+                        : 'border-solid border-[#f97316] bg-amber-50 text-[#c2410c]'
+                : '');
+            if (!isLetter) {
+                input.size = isPhrase ? 18 : 10;
+            }
+            // letter inline box — host FE may not scan Tailwind
+            if (isLetter) {
+                input.style.display = 'inline-block';
+                input.style.width = '1.75rem';
+                input.style.height = '1.75rem';
+                input.style.minWidth = '1.75rem';
+                input.style.maxWidth = '1.75rem';
+                input.style.padding = '0';
+                input.style.margin = '0 2px';
+                input.style.borderWidth = '2px';
+                input.style.borderStyle = 'solid';
+                input.style.borderRadius = '4px';
+                input.style.textAlign = 'center';
+                input.style.fontWeight = '700';
+                input.style.textTransform = 'uppercase';
+                input.style.boxSizing = 'border-box';
+            }
+            const numberBadge = container.querySelector(`[data-blank-number="${key}"]`);
+            if (numberBadge) {
+                // Always set 1-based display number here so it is correct even if
+                // the cached innerHTML was built with a different formatter.
+                numberBadge.textContent = toDisplayNumber(key);
+                numberBadge.className = cn('ec-blank-number mr-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-bold leading-none text-white align-baseline shadow-xs', isReviewMode
+                    ? isCorrect
+                        ? 'bg-[#22c55e]'
+                        : hasUserAnswer
+                            ? 'bg-[#ef4444]'
+                            : 'bg-[#f97316]'
+                    : 'bg-[#0b57d0]');
+            }
+            if (wrapper) {
+                wrapper.className = cn('ec-blank-wrapper inline-flex items-baseline whitespace-nowrap align-baseline', isReviewMode ? 'mx-1' : 'mx-0.5');
+            }
+            const handler = (e) => {
+                const target = e.target;
+                onBlankChangeRef.current(key, target.value);
+            };
+            input.addEventListener('input', handler);
+            handlers.push({ el: input, handler });
+        });
+        return () => {
+            handlers.forEach(({ el, handler }) => {
+                el.removeEventListener('input', handler);
+            });
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [processedHtml, isReviewMode]);
+    return (_jsxs("div", { className: "space-y-3", children: [question.title && (_jsx("h3", { className: "text-base font-semibold text-[#0f1730]", children: question.title })), question.imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-[#d9e4f2]", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: question.title || 'Question image', className: "max-h-56 w-auto object-contain" }) }) })), _jsx("div", { ref: containerRef, className: "ec-structured-content w-full overflow-x-auto rounded-xl border border-[#d9e4f2] bg-[#f4f9ff] p-5 text-base leading-relaxed text-[#0f1730] [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-4 [&_td]:py-3 [&_td]:align-top [&_th]:border [&_th]:border-[#d9e4f2] [&_th]:bg-[#e9f3ff] [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-semibold" }), isReviewMode && Object.keys(question.answers).length > 0 && (_jsxs("div", { className: "rounded-xl border border-[#d9e4f2] bg-white/70 p-3", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[#64748b]", children: "Correct answers" }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(question.answers).map(([key, val]) => (_jsxs("span", { className: "rounded border border-[#b9edc8] bg-[#ddf8e7] px-2 py-0.5 text-xs font-semibold text-[#15803d]", children: [key, ": ", val] }, key))) })] }))] }));
+});
+/**
+ * Branded English Certification renderer for `WORD_FILL_STRUCTURED_FORM`.
+ *
+ * Replaces the shared Movers two-column grid (which squeezed IELTS tables into
+ * narrow columns) with a full-width branded layout. Reuses
+ * {@link transformWordFillStructuredForm} so the answer shape
+ * (`{ [questionId]: { [blankKey]: value } }`) stays compatible with the autosave
+ * and grading store.
+ */
+export function EcWordFillStructuredForm({ part, answers, onAnswerChange, isReviewMode = false, }) {
+    const { questions, instruction, groupTitle, groupContent, groupImageUrl } = useMemo(() => transformWordFillStructuredForm(part.questions), [part.questions]);
+    const answersRef = useRef(answers);
+    answersRef.current = answers;
+    const onAnswerChangeRef = useRef(onAnswerChange);
+    onAnswerChangeRef.current = onAnswerChange;
+    const handleBlankChange = useCallback((questionId, key, value) => {
+        const currentAnswer = answersRef.current[questionId] || {};
+        onAnswerChangeRef.current(questionId, { ...currentAnswer, [key]: value });
+    }, []);
+    const blankChangeCallbacks = useMemo(() => {
+        const map = {};
+        questions.forEach((q) => {
+            map[q.id] = (key, value) => handleBlankChange(q.id, key, value);
+        });
+        return map;
+    }, [questions, handleBlankChange]);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [instruction && (_jsx("div", { className: "rounded-xl border border-[#d9e4f2] bg-[#e9f3ff] px-4 py-2.5 text-sm font-semibold uppercase tracking-wide text-[#0b57d0]", children: instruction })), groupTitle && (_jsx("h2", { className: "text-center text-lg font-bold uppercase text-[#0b57d0]", children: groupTitle })), groupImageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: groupImageUrl, alt: groupTitle || 'Group image', className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), _jsx("div", { className: "flex flex-col gap-4", children: questions.map((q) => (_jsxs("div", { id: englishCertQuestionDomId(q.id), className: "scroll-mt-24 rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)] backdrop-blur-md", children: [_jsx("div", { className: "mb-2 flex items-center gap-2", children: _jsx("span", { className: "inline-flex items-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] px-3 py-1 text-xs font-bold text-white shadow-sm", children: formatBlankRange(q.answers, q.questionNumber) }) }), _jsx(StructuredFormBody, { question: q, initialAnswers: answers[q.id] || EMPTY_OBJECT, onBlankChange: blankChangeCallbacks[q.id], isReviewMode: isReviewMode })] }, q.id))) })] }));
+}

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

@@ -1 +1,60 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useMemo as r}from"react";import{ListChecks as s,PenLine as l,CheckCircle2 as a,AlertCircle as d}from"lucide-react";import{ResolvedImage as i}from"../../../components/common/ResolvedImage";import{HtmlOrText as o}from"../../../shared/lib/html-content";import{cn as n}from"../../../shared/lib/utils";import{transformWriteShortLetter as c}from"../../../components/exams/take/utils/question-transformers";import{englishCertQuestionDomId as m}from"./english-cert-scroll";export function EcWritingTask({part:f,answers:x,onAnswerChange:p,isReviewMode:u=!1}){const b=f.questions[0],h=r(()=>b?c(b):null,[b]),g=h?.minWords,w=h?.maxWords,v=b&&x[b.id]||"",N=function(e){const t=e.trim();return t?t.split(/\s+/).length:0}(v),y=r(()=>{if(g&&N<g){const e=g-N;return{text:`Add ${e} more word${1===e?"":"s"} to reach the minimum`,ok:!1}}if(w&&N>w){const e=N-w;return{text:`${e} word${1===e?"":"s"} over the maximum limit`,ok:!1}}return g||w?{text:"Word count requirement met",ok:!0}:null},[N,g,w]);if(!b||!h)return null;const{prompt:k,requirements:$,guideImages:j}=h,W=(!g||N>=g)&&(!w||N<=w),_=w||g||0,q=_?Math.min(100,Math.round(N/_*100)):0;return t("div",{id:m(b.id),className:"scroll-mt-24 flex flex-col gap-5",children:[t("div",{className:"flex flex-col gap-5",children:[t("div",{className:"overflow-hidden rounded-2xl border border-[#cfe0f7] bg-white shadow-[0_18px_40px_rgba(13,71,161,0.10)]",children:[k&&e(o,{value:k,as:"div",className:"whitespace-pre-line px-5 pb-4 pt-5 text-base leading-relaxed text-[#0f1730]"}),$&&$.length>0&&e("div",{className:n("px-5 pb-4",!k&&"pt-5"),children:t("div",{className:"rounded-xl border border-[#e3edfb] bg-[#f6faff] p-4",children:[t("div",{className:"flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-[#0b57d0]",children:[e(s,{className:"h-3.5 w-3.5"}),"Requirements"]}),e("ul",{className:"mt-2 list-inside list-disc space-y-1.5 text-sm text-[#0f1730]",children:$.map((t,r)=>e("li",{children:e(o,{value:t,as:"span"})},r))})]})}),g&&t("div",{className:"border-t border-[#e3edfb] bg-[#f9fbfe] px-5 py-3 text-sm font-semibold text-[#0f1730]",children:["Write at least ",g," words."]})]}),j&&j.length>0&&e("div",{className:"flex flex-col items-center justify-center gap-4 rounded-2xl border border-[#d9e4f2] bg-white/60 p-4",children:j.map((t,r)=>e(i,{src:t,alt:`Guide ${r+1}`,className:"w-full max-w-3xl rounded-xl bg-white object-contain shadow-sm"},r))})]}),t("div",{className:"overflow-hidden rounded-2xl border border-[#cfe0f7] bg-white shadow-[0_18px_40px_rgba(13,71,161,0.10)]",children:[t("div",{className:"flex items-center gap-1.5 border-b border-[#e3edfb] bg-[#f6faff] px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-[#0b57d0]",children:[e(l,{className:"h-3.5 w-3.5"}),"Your answer"]}),e("textarea",{value:v,disabled:u,placeholder:"Write your essay here…",onChange:e=>p(b.id,e.target.value),rows:14,className:n("w-full resize-y border-0 bg-white px-5 py-4 text-sm leading-relaxed text-[#0f1730] outline-none transition-all placeholder:text-[#9aa9c2] focus:bg-[#fbfdff]",u&&"cursor-not-allowed opacity-80")}),t("div",{className:"flex flex-col gap-2 border-t border-[#e3edfb] bg-[#f9fbfe] px-4 py-3",children:[t("div",{className:"flex items-center justify-between text-xs",children:[t("span",{className:n("inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-semibold",W?"bg-[#ddf8e7] text-[#15803d]":"bg-[#fde8e8] text-[#ef4444]"),children:[N," words"]}),(g||w)&&t("span",{className:"font-medium text-[#64748b]",children:[g?`Min ${g}`:"",g&&w?" · ":"",w?`Max ${w}`:""]})]}),_>0&&e("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-[#e3edfb]",children:e("div",{className:n("h-full rounded-full transition-all",W?"bg-[#15803d]":"bg-[#1167e8]"),style:{width:`${q}%`}})}),y&&t("div",{className:n("flex items-center gap-1.5 text-xs font-medium",y.ok?"text-[#15803d]":"text-[#64748b]"),children:[y.ok?e(a,{className:"h-3.5 w-3.5 shrink-0"}):e(d,{className:"h-3.5 w-3.5 shrink-0"}),y.text]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ListChecks, PenLine, CheckCircle2, AlertCircle } from 'lucide-react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { HtmlOrText } from '../../../shared/lib/html-content';
+import { cn } from '../../../shared/lib/utils';
+import { transformWriteShortLetter } from '../../../components/exams/take/utils/question-transformers';
+import { englishCertQuestionDomId } from './english-cert-scroll';
+/** Count words in a free-text answer (collapses whitespace). */
+function countWords(text) {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return 0;
+    return trimmed.split(/\s+/).length;
+}
+/**
+ * Branded English Certification renderer for `WRITE_A_SHORT_LETTER`.
+ *
+ * Shows the prompt, optional requirements/guide images and a large branded
+ * textarea with a live word counter. The stored answer is a plain string at
+ * `answers[questionId]`, matching the shared writing renderer so the grading
+ * store stays compatible.
+ */
+export function EcWritingTask({ part, answers, onAnswerChange, isReviewMode = false, }) {
+    const firstQuestion = part.questions[0];
+    const data = useMemo(() => (firstQuestion ? transformWriteShortLetter(firstQuestion) : null), [firstQuestion]);
+    const minWords = data?.minWords;
+    const maxWords = data?.maxWords;
+    const answer = (firstQuestion && answers[firstQuestion.id]) || '';
+    const wordCount = countWords(answer);
+    const statusMessage = useMemo(() => {
+        if (minWords && wordCount < minWords) {
+            const remaining = minWords - wordCount;
+            return { text: `Add ${remaining} more word${remaining === 1 ? '' : 's'} to reach the minimum`, ok: false };
+        }
+        if (maxWords && wordCount > maxWords) {
+            const over = wordCount - maxWords;
+            return { text: `${over} word${over === 1 ? '' : 's'} over the maximum limit`, ok: false };
+        }
+        if (minWords || maxWords) {
+            return { text: 'Word count requirement met', ok: true };
+        }
+        return null;
+    }, [wordCount, minWords, maxWords]);
+    if (!firstQuestion || !data) {
+        return null;
+    }
+    const { prompt, requirements, guideImages } = data;
+    const meetsMin = minWords ? wordCount >= minWords : true;
+    const withinMax = maxWords ? wordCount <= maxWords : true;
+    const isValid = meetsMin && withinMax;
+    const progressTarget = maxWords || minWords || 0;
+    const progressPct = progressTarget
+        ? Math.min(100, Math.round((wordCount / progressTarget) * 100))
+        : 0;
+    return (_jsxs("div", { id: englishCertQuestionDomId(firstQuestion.id), className: "scroll-mt-24 flex flex-col gap-5", children: [_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "overflow-hidden rounded-2xl border border-[#cfe0f7] bg-white shadow-[0_18px_40px_rgba(13,71,161,0.10)]", children: [prompt && (_jsx(HtmlOrText, { value: prompt, as: "div", className: "whitespace-pre-line px-5 pb-4 pt-5 text-base leading-relaxed text-[#0f1730]" })), requirements && requirements.length > 0 && (_jsx("div", { className: cn('px-5 pb-4', !prompt && 'pt-5'), children: _jsxs("div", { className: "rounded-xl border border-[#e3edfb] bg-[#f6faff] p-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-[#0b57d0]", children: [_jsx(ListChecks, { className: "h-3.5 w-3.5" }), "Requirements"] }), _jsx("ul", { className: "mt-2 list-inside list-disc space-y-1.5 text-sm text-[#0f1730]", children: requirements.map((req, idx) => (_jsx("li", { children: _jsx(HtmlOrText, { value: req, as: "span" }) }, idx))) })] }) })), minWords && (_jsxs("div", { className: "border-t border-[#e3edfb] bg-[#f9fbfe] px-5 py-3 text-sm font-semibold text-[#0f1730]", children: ["Write at least ", minWords, " words."] }))] }), guideImages && guideImages.length > 0 && (_jsx("div", { className: "flex flex-col items-center justify-center gap-4 rounded-2xl border border-[#d9e4f2] bg-white/60 p-4", children: guideImages.map((img, idx) => (_jsx(ResolvedImage, { src: img, alt: `Guide ${idx + 1}`, className: "w-full max-w-3xl rounded-xl bg-white object-contain shadow-sm" }, idx))) }))] }), _jsxs("div", { className: "overflow-hidden rounded-2xl border border-[#cfe0f7] bg-white shadow-[0_18px_40px_rgba(13,71,161,0.10)]", children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-[#e3edfb] bg-[#f6faff] px-4 py-2.5 text-xs font-bold uppercase tracking-wider text-[#0b57d0]", children: [_jsx(PenLine, { className: "h-3.5 w-3.5" }), "Your answer"] }), _jsx("textarea", { value: answer, disabled: isReviewMode, placeholder: "Write your essay here\u2026", onChange: (e) => onAnswerChange(firstQuestion.id, e.target.value), rows: 14, className: cn('w-full resize-y border-0 bg-white px-5 py-4 text-sm leading-relaxed text-[#0f1730] outline-none transition-all placeholder:text-[#9aa9c2] focus:bg-[#fbfdff]', isReviewMode && 'cursor-not-allowed opacity-80') }), _jsxs("div", { className: "flex flex-col gap-2 border-t border-[#e3edfb] bg-[#f9fbfe] px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between text-xs", children: [_jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-semibold', isValid
+                                            ? 'bg-[#ddf8e7] text-[#15803d]'
+                                            : 'bg-[#fde8e8] text-[#ef4444]'), children: [wordCount, " words"] }), (minWords || maxWords) && (_jsxs("span", { className: "font-medium text-[#64748b]", children: [minWords ? `Min ${minWords}` : '', minWords && maxWords ? ' · ' : '', maxWords ? `Max ${maxWords}` : ''] }))] }), progressTarget > 0 && (_jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[#e3edfb]", children: _jsx("div", { className: cn('h-full rounded-full transition-all', isValid ? 'bg-[#15803d]' : 'bg-[#1167e8]'), style: { width: `${progressPct}%` } }) })), statusMessage && (_jsxs("div", { className: cn('flex items-center gap-1.5 text-xs font-medium', statusMessage.ok ? 'text-[#15803d]' : 'text-[#64748b]'), children: [statusMessage.ok ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0" })) : (_jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0" })), statusMessage.text] }))] })] })] }));
+}

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

@@ -1 +1,108 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as a,useEffect as i}from"react";import{Play as d,Pause as l,RefreshCw as n,Lock as o}from"lucide-react";import{usePresignedFileUrl as s}from"../../../shared/lib/hooks/usePresignedFileUrl";import{cn as c}from"../../../shared/lib/utils";export function EnglishCertificationAudioPlayer({audioUrl:u,partNumber:m=0,isLoading:p=!1,isLocked:f=!1,onFirstPlay:b}){const g=t(null),{previewUrl:x}=s(u||void 0),[h,v]=a(!1),[y,w]=a(0),[N,L]=a(0),[E,_]=a(null),k=t(!1),P=p||!u||!!E||f,A=e=>{if(!e||isNaN(e))return"00:00";const r=Math.floor(e/60),t=Math.floor(e%60);return`${r.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`};i(()=>{const e=g.current;if(!e)return;const r=()=>w(e.currentTime),t=()=>{L(e.duration),_(null)},a=()=>v(!1),i=()=>{_("Failed to load audio file"),v(!1)};return e.addEventListener("timeupdate",r),e.addEventListener("loadedmetadata",t),e.addEventListener("ended",a),e.addEventListener("error",i),()=>{e.removeEventListener("timeupdate",r),e.removeEventListener("loadedmetadata",t),e.removeEventListener("ended",a),e.removeEventListener("error",i)}},[]),i(()=>{g.current&&x&&(g.current.src=x,w(0),v(!1),_(null))},[x]);const $=N>0?y/N*100:0,j=f?"Already played":E?"Audio unavailable":p?"Loading...":h?"Playing...":y>0?"Paused":"Ready to play";return r("div",{className:"grid w-full grid-cols-[64px_1fr] items-center gap-4 rounded-[10px] border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] sm:gap-[18px] sm:px-5",children:[e("audio",{ref:g}),e("button",{type:"button",onClick:()=>{g.current&&!f&&(h?(g.current.pause(),v(!1)):(k.current||(k.current=!0,b?.()),g.current.play().catch(e=>{_(`Failed to play audio: ${e.message}`)}),v(!0)))},disabled:P,className:"grid h-14 w-14 place-items-center rounded-full text-2xl text-white shadow-[0_12px_22px_rgba(11,87,208,0.22)] transition-transform hover:scale-[1.03] disabled:cursor-not-allowed disabled:opacity-50",style:{background:"linear-gradient(180deg, #1f7cff, #0b57d0)"},"aria-label":f?"Audio locked, already played":h?"Pause audio":"Play audio",children:f?e(o,{size:22}):h?e(l,{size:24}):e(d,{size:24,className:"ml-0.5"})}),r("div",{className:"min-w-0",children:[e("div",{className:"flex items-center justify-between gap-3",children:r("span",{className:"text-[18px] font-black text-[#0f1730]",children:["Listening Audio",m>0&&` · Part ${m}`]})}),r("div",{className:"mt-1 flex items-center gap-2.5",children:[e("span",{className:c("text-sm font-bold",E?"text-red-500":"text-[#64748b]"),children:E??j}),E&&r("button",{type:"button",onClick:()=>{const e=g.current;e&&x&&(_(null),w(0),v(!1),e.src=x,e.load())},disabled:!u,className:"inline-flex items-center gap-1.5 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-bold text-red-600 transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Retry loading audio",children:[e(n,{size:13}),"Retry"]})]}),r("div",{className:"mt-2 grid grid-cols-[46px_1fr_46px] items-center gap-2.5 text-sm font-bold tabular-nums text-[#0f1730]",children:[e("span",{children:A(y)}),e("div",{className:"relative h-2 w-full overflow-hidden rounded-full bg-[#dfe9f6]",role:"progressbar","aria-label":"Audio progress","aria-valuemin":0,"aria-valuemax":N||0,"aria-valuenow":y,children:e("div",{className:"absolute inset-y-0 left-0 rounded-full",style:{width:`${$}%`,background:"linear-gradient(90deg, #1f7cff, #0b57d0)"}})}),e("span",{children:N>0?A(N):"00:00"})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { Play, Pause, RefreshCw, Lock } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
+import { cn } from '../../../shared/lib/utils';
+/**
+ * Branded Ocean Edu audio bar for English Certification Listening sections.
+ *
+ * Enforces the TOEIC "play once" rule: no seeking/scrubbing and no replay —
+ * once playback starts, `onFirstPlay` locks the part permanently (survives
+ * reload via the caller's persisted state).
+ */
+export function EnglishCertificationAudioPlayer({ audioUrl, partNumber = 0, isLoading = false, isLocked = false, onFirstPlay, }) {
+    const audioRef = useRef(null);
+    // Resolve S3 storage keys to presigned URLs (HTTP URLs pass through unchanged)
+    const { previewUrl: resolvedAudioUrl } = usePresignedFileUrl(audioUrl || undefined);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [error, setError] = useState(null);
+    const hasNotifiedFirstPlayRef = useRef(false);
+    const isControlsDisabled = isLoading || !audioUrl || !!error || isLocked;
+    const togglePlayPause = () => {
+        if (!audioRef.current || isLocked)
+            return;
+        if (isPlaying) {
+            audioRef.current.pause();
+            setIsPlaying(false);
+        }
+        else {
+            if (!hasNotifiedFirstPlayRef.current) {
+                hasNotifiedFirstPlayRef.current = true;
+                onFirstPlay?.();
+            }
+            audioRef.current.play().catch((err) => {
+                setError(`Failed to play audio: ${err.message}`);
+            });
+            setIsPlaying(true);
+        }
+    };
+    const handleRetry = () => {
+        const audio = audioRef.current;
+        if (!audio || !resolvedAudioUrl)
+            return;
+        setError(null);
+        setCurrentTime(0);
+        setIsPlaying(false);
+        audio.src = resolvedAudioUrl;
+        audio.load();
+    };
+    const formatTime = (seconds) => {
+        if (!seconds || isNaN(seconds))
+            return '00:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    };
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
+        const handleLoadedMetadata = () => {
+            setDuration(audio.duration);
+            setError(null);
+        };
+        const handleEnded = () => setIsPlaying(false);
+        const handleError = () => {
+            setError('Failed to load audio file');
+            setIsPlaying(false);
+        };
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('loadedmetadata', handleLoadedMetadata);
+        audio.addEventListener('ended', handleEnded);
+        audio.addEventListener('error', handleError);
+        return () => {
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            audio.removeEventListener('ended', handleEnded);
+            audio.removeEventListener('error', handleError);
+        };
+    }, []);
+    useEffect(() => {
+        if (audioRef.current && resolvedAudioUrl) {
+            audioRef.current.src = resolvedAudioUrl;
+            setCurrentTime(0);
+            setIsPlaying(false);
+            setError(null);
+        }
+    }, [resolvedAudioUrl]);
+    const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
+    const statusLabel = isLocked
+        ? 'Already played'
+        : error
+            ? 'Audio unavailable'
+            : isLoading
+                ? 'Loading...'
+                : isPlaying
+                    ? 'Playing...'
+                    : currentTime > 0
+                        ? 'Paused'
+                        : 'Ready to play';
+    return (_jsxs("div", { className: "grid w-full grid-cols-[64px_1fr] items-center gap-4 rounded-[10px] border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] sm:gap-[18px] sm:px-5", children: [_jsx("audio", { ref: audioRef }), _jsx("button", { type: "button", onClick: togglePlayPause, disabled: isControlsDisabled, className: "grid h-14 w-14 place-items-center rounded-full text-2xl text-white shadow-[0_12px_22px_rgba(11,87,208,0.22)] transition-transform hover:scale-[1.03] disabled:cursor-not-allowed disabled:opacity-50", style: { background: 'linear-gradient(180deg, #1f7cff, #0b57d0)' }, "aria-label": isLocked ? 'Audio locked, already played' : isPlaying ? 'Pause audio' : 'Play audio', children: isLocked ? (_jsx(Lock, { size: 22 })) : isPlaying ? (_jsx(Pause, { size: 24 })) : (_jsx(Play, { size: 24, className: "ml-0.5" })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "flex items-center justify-between gap-3", children: _jsxs("span", { className: "text-[18px] font-black text-[#0f1730]", children: ["Listening Audio", partNumber > 0 && ` · Part ${partNumber}`] }) }), _jsxs("div", { className: "mt-1 flex items-center gap-2.5", children: [_jsx("span", { className: cn('text-sm font-bold', error ? 'text-red-500' : 'text-[#64748b]'), children: error ?? statusLabel }), error && (_jsxs("button", { type: "button", onClick: handleRetry, disabled: !audioUrl, className: "inline-flex items-center gap-1.5 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-bold text-red-600 transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Retry loading audio", children: [_jsx(RefreshCw, { size: 13 }), "Retry"] }))] }), _jsxs("div", { className: "mt-2 grid grid-cols-[46px_1fr_46px] items-center gap-2.5 text-sm font-bold tabular-nums text-[#0f1730]", children: [_jsx("span", { children: formatTime(currentTime) }), _jsx("div", { className: "relative h-2 w-full overflow-hidden rounded-full bg-[#dfe9f6]", role: "progressbar", "aria-label": "Audio progress", "aria-valuemin": 0, "aria-valuemax": duration || 0, "aria-valuenow": currentTime, children: _jsx("div", { className: "absolute inset-y-0 left-0 rounded-full", style: {
+                                        width: `${progressPercent}%`,
+                                        background: 'linear-gradient(90deg, #1f7cff, #0b57d0)',
+                                    } }) }), _jsx("span", { children: duration > 0 ? formatTime(duration) : '00:00' })] })] })] }));
+}

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

@@ -1 +1,11 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import i from"next/image";import{cn as a}from"../../../shared/lib/utils";export function EnglishCertificationBrand({className:t}){return e("div",{className:a("flex items-center",t),"aria-label":"Ocean Edu",children:e(i,{src:"/images/logo-ngang.png",alt:"Ocean Edu",width:180,height:40,priority:!0,className:"h-10 w-auto object-contain"})})}
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from 'next/image';
+import { cn } from '../../../shared/lib/utils';
+/**
+ * Ocean Edu brand lockup: horizontal logo image.
+ * Used in the English Certification header.
+ */
+export function EnglishCertificationBrand({ className }) {
+    return (_jsx("div", { className: cn('flex items-center', className), "aria-label": "Ocean Edu", children: _jsx(Image, { src: "/images/logo-ngang.png", alt: "Ocean Edu", width: 180, height: 40, priority: true, className: "h-10 w-auto object-contain" }) }));
+}

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

@@ -1 +1,34 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as i}from"react";import{List as r}from"lucide-react";import{Sheet as o,SheetContent as l,SheetHeader as n,SheetTitle as a}from"../../../components/ui/sheet";import{EnglishCertificationHeader as s}from"./EnglishCertificationHeader";import{EnglishCertificationNavigationPanel as c}from"./EnglishCertificationNavigationPanel";import{EnglishCertificationFooterBar as d}from"./EnglishCertificationFooterBar";import{ENGLISH_CERT_APP_BACKGROUND as h,ENGLISH_CERT_PRIMARY_GRADIENT as m}from"./english-certification-theme";export function EnglishCertificationExamLayout({children:f,headerProps:x,navigationProps:p,footerProps:b}){const[g,u]=i(!0),[w,k]=i(!1),v={...p,onQuestionClick:e=>{p.onQuestionClick(e),k(!1)},onPartClick:e=>{p.onPartClick(e),k(!1)}};return t("div",{className:"flex h-screen flex-col overflow-hidden text-[#0f1730]",style:{background:h},children:[e(s,{...x}),t("div",{className:"flex flex-1 gap-4 overflow-hidden px-4 py-4 lg:px-6",children:[e("main",{id:"exam-main-scroll-area",className:"min-w-0 flex-1 overflow-y-auto",children:f}),g&&t("aside",{className:"hidden w-[360px] shrink-0 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 lg:flex","aria-label":"Answer sheet navigation",children:[t("div",{className:"flex h-14 items-center justify-between px-5 text-white",style:{background:m},children:[e("h3",{className:"text-[18px] font-black tracking-[0.1em]",children:"ANSWER SHEET"}),e("button",{type:"button",onClick:()=>u(!1),className:"text-sm font-bold text-white/90 hover:text-white",children:"Hide ≪"})]}),e("div",{className:"flex-1 overflow-hidden",children:e(c,{...v})})]}),!g&&e("button",{type:"button",onClick:()=>u(!0),className:"fixed right-0 top-24 z-30 hidden rounded-l-lg border border-r-0 border-[#d9e4f2] bg-white px-2 py-3 text-sm font-bold text-[#0b57d0] shadow-sm hover:bg-blue-50 lg:block","aria-label":"Show answer sheet",children:"≫"})]}),b&&e(d,{...b}),e("button",{type:"button",onClick:()=>k(!0),className:"fixed bottom-24 right-4 z-30 flex h-12 w-12 items-center justify-center rounded-full text-white shadow-lg lg:hidden",style:{background:m},"aria-label":"Open answer sheet",children:e(r,{className:"h-5 w-5"})}),e(o,{open:w,onOpenChange:k,children:t(l,{side:"bottom",className:"h-[78vh] p-0",children:[e(n,{className:"flex h-14 flex-row items-center px-5 text-white",style:{background:m},children:e(a,{className:"text-[18px] font-black tracking-[0.1em] text-white",children:"ANSWER SHEET"})}),e("div",{className:"h-[calc(78vh-3.5rem)] overflow-hidden",children:e(c,{...v})})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { List } from 'lucide-react';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, } from '../../../components/ui/sheet';
+import { EnglishCertificationHeader, } from './EnglishCertificationHeader';
+import { EnglishCertificationNavigationPanel } from './EnglishCertificationNavigationPanel';
+import { EnglishCertificationFooterBar, } from './EnglishCertificationFooterBar';
+import { ENGLISH_CERT_APP_BACKGROUND, ENGLISH_CERT_PRIMARY_GRADIENT, } from './english-certification-theme';
+/**
+ * Ocean Edu branded exam-taking shell for English Certification exams.
+ *
+ * Layout: branded sticky header · main content + collapsible "Answer Sheet"
+ * sidebar · branded wave footer with navigation actions. On mobile the sidebar
+ * is replaced by a bottom-sheet opened via a floating button.
+ */
+export function EnglishCertificationExamLayout({ children, headerProps, navigationProps, footerProps, }) {
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isMobileSheetOpen, setIsMobileSheetOpen] = useState(false);
+    // Close the mobile Answer Sheet after the student picks a question/part so
+    // the chosen card is visible behind the sheet.
+    const panelProps = {
+        ...navigationProps,
+        onQuestionClick: (globalIndex) => {
+            navigationProps.onQuestionClick(globalIndex);
+            setIsMobileSheetOpen(false);
+        },
+        onPartClick: (partIndex) => {
+            navigationProps.onPartClick(partIndex);
+            setIsMobileSheetOpen(false);
+        },
+    };
+    return (_jsxs("div", { className: "flex h-screen flex-col overflow-hidden text-[#0f1730]", style: { background: ENGLISH_CERT_APP_BACKGROUND }, children: [_jsx(EnglishCertificationHeader, { ...headerProps }), _jsxs("div", { className: "flex flex-1 gap-4 overflow-hidden px-4 py-4 lg:px-6", children: [_jsx("main", { id: "exam-main-scroll-area", className: "min-w-0 flex-1 overflow-y-auto", children: children }), isSidebarOpen && (_jsxs("aside", { className: "hidden w-[360px] shrink-0 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 lg:flex", "aria-label": "Answer sheet navigation", children: [_jsxs("div", { className: "flex h-14 items-center justify-between px-5 text-white", style: { background: ENGLISH_CERT_PRIMARY_GRADIENT }, children: [_jsx("h3", { className: "text-[18px] font-black tracking-[0.1em]", children: "ANSWER SHEET" }), _jsx("button", { type: "button", onClick: () => setIsSidebarOpen(false), className: "text-sm font-bold text-white/90 hover:text-white", children: "Hide \u226A" })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(EnglishCertificationNavigationPanel, { ...panelProps }) })] })), !isSidebarOpen && (_jsx("button", { type: "button", onClick: () => setIsSidebarOpen(true), className: "fixed right-0 top-24 z-30 hidden rounded-l-lg border border-r-0 border-[#d9e4f2] bg-white px-2 py-3 text-sm font-bold text-[#0b57d0] shadow-sm hover:bg-blue-50 lg:block", "aria-label": "Show answer sheet", children: "\u226B" }))] }), footerProps && _jsx(EnglishCertificationFooterBar, { ...footerProps }), _jsx("button", { type: "button", onClick: () => setIsMobileSheetOpen(true), className: "fixed bottom-24 right-4 z-30 flex h-12 w-12 items-center justify-center rounded-full text-white shadow-lg lg:hidden", style: { background: ENGLISH_CERT_PRIMARY_GRADIENT }, "aria-label": "Open answer sheet", children: _jsx(List, { className: "h-5 w-5" }) }), _jsx(Sheet, { open: isMobileSheetOpen, onOpenChange: setIsMobileSheetOpen, children: _jsxs(SheetContent, { side: "bottom", className: "h-[78vh] p-0", children: [_jsx(SheetHeader, { className: "flex h-14 flex-row items-center px-5 text-white", style: { background: ENGLISH_CERT_PRIMARY_GRADIENT }, children: _jsx(SheetTitle, { className: "text-[18px] font-black tracking-[0.1em] text-white", children: "ANSWER SHEET" }) }), _jsx("div", { className: "h-[calc(78vh-3.5rem)] overflow-hidden", children: _jsx(EnglishCertificationNavigationPanel, { ...panelProps }) })] }) })] }));
+}

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

@@ -1 +1,15 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{cn as t}from"../../../shared/lib/utils";export function EnglishCertificationFlagButton({isFlagged:a,onToggle:s,size:i="default",className:n}){const o="sm"===i;return r("button",{type:"button",onClick:s,className:t("inline-flex items-center gap-1.5 rounded-md border font-bold transition-colors",o?"px-2 py-1 text-xs":"px-3 py-1.5 text-sm",a?"border-[#ff8a00] bg-[#fff1db] text-[#ff8a00]":"border-[#d9e4f2] bg-white text-[#64748b] hover:text-[#ff8a00]",n),"aria-label":a?"Unmark for review":"Mark for review","aria-pressed":a,children:[e("span",{className:"h-[14px] w-2 shrink-0 bg-current",style:{clipPath:"polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)"},"aria-hidden":"true"}),!o&&e("span",{children:a?"Marked":"Mark"})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../shared/lib/utils';
+/**
+ * Shared Ocean Edu "Mark for Review" control.
+ *
+ * Single source of truth for the mark/flag affordance so the bookmark flag
+ * looks identical on single-question and grouped-reading screens.
+ */
+export function EnglishCertificationFlagButton({ isFlagged, onToggle, size = 'default', className, }) {
+    const isCompact = size === 'sm';
+    return (_jsxs("button", { type: "button", onClick: onToggle, className: cn('inline-flex items-center gap-1.5 rounded-md border font-bold transition-colors', isCompact ? 'px-2 py-1 text-xs' : 'px-3 py-1.5 text-sm', isFlagged
+            ? 'border-[#ff8a00] bg-[#fff1db] text-[#ff8a00]'
+            : 'border-[#d9e4f2] bg-white text-[#64748b] hover:text-[#ff8a00]', className), "aria-label": isFlagged ? 'Unmark for review' : 'Mark for review', "aria-pressed": isFlagged, children: [_jsx("span", { className: "h-[14px] w-2 shrink-0 bg-current", style: { clipPath: 'polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)' }, "aria-hidden": "true" }), !isCompact && _jsx("span", { children: isFlagged ? 'Marked' : 'Mark' })] }));
+}

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

@@ -1 +1,19 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{cn as r}from"../../../shared/lib/utils";import{ENGLISH_CERT_FOOTER_NOTE as a,ENGLISH_CERT_FOOTER_WAVE as o,ENGLISH_CERT_PRIMARY_GRADIENT as l}from"./english-certification-theme";export function EnglishCertificationFooterBar({onPrevious:d,onClear:i,onToggleMark:s,onNext:n,isMarked:c=!1,isPreviousDisabled:x=!1,isNextDisabled:p=!1,showSecondaryActions:b=!0}){return t("footer",{className:"sticky bottom-0 z-40 flex flex-col gap-2 px-4 pt-3 lg:px-7",style:{background:`linear-gradient(180deg, rgba(255,255,255,0.94) 0 calc(100% - 64px), transparent calc(100% - 64px)), ${o} bottom/100% 64px no-repeat`},children:[t("div",{className:r("grid grid-cols-2 items-center gap-3 lg:gap-12",b?"lg:grid-cols-[240px_190px_1fr_200px]":"mx-auto w-full max-w-[520px] lg:grid-cols-2"),children:[e("button",{type:"button",onClick:d,disabled:x,className:r("h-[42px] rounded-md border border-[#d9e4f2] bg-white text-[15px] font-black text-[#0a3d9a] shadow-[0_5px_16px_rgba(13,71,161,0.08)] disabled:cursor-not-allowed disabled:opacity-50",!b&&"lg:w-[200px] lg:justify-self-start"),children:"←   Previous"}),b&&i&&e("button",{type:"button",onClick:i,className:"h-[42px] rounded-md border border-[#d9e4f2] bg-white text-[15px] font-black text-[#0a3d9a] shadow-[0_5px_16px_rgba(13,71,161,0.08)]",children:"◆   Clear Answer"}),b&&s&&t("button",{type:"button",onClick:s,className:r("h-[42px] rounded-md border bg-white text-[15px] font-black shadow-[0_5px_16px_rgba(13,71,161,0.08)] lg:w-[220px] lg:justify-self-center",c?"border-[#ff8a00] text-[#ff8a00]":"border-[#d9e4f2] text-[#0a3d9a]"),children:["▮   ",c?"Unmark Review":"Mark for Review"]}),e("button",{type:"button",onClick:n,disabled:p,className:r("h-[42px] rounded-md border border-[#0b57d0] text-[15px] font-black text-white shadow-[0_5px_16px_rgba(13,71,161,0.08)] disabled:cursor-not-allowed disabled:opacity-50",!b&&"lg:w-[200px] lg:justify-self-end"),style:{background:l},children:"Next   →"})]}),t("div",{className:"pointer-events-none hidden h-9 items-center gap-4 text-white lg:flex",children:[t("div",{className:"flex shrink-0 items-center gap-2 font-black tracking-wide",children:[e("span",{className:"grid h-[25px] w-[25px] place-items-center rounded-full border-2 border-white text-xs",children:"✦"}),"OCEAN EDU"]}),t("span",{className:"min-w-0 flex-1 text-center text-[13px] font-bold",children:["〰   ",a]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../shared/lib/utils';
+import { ENGLISH_CERT_FOOTER_NOTE, ENGLISH_CERT_FOOTER_WAVE, ENGLISH_CERT_PRIMARY_GRADIENT, } from './english-certification-theme';
+/**
+ * Branded Ocean Edu footer action bar for English Certification exam taking.
+ *
+ * Provides Previous / Clear Answer / Mark for Review / Next actions plus the
+ * decorative wave, brand lockup and encouragement note.
+ */
+export function EnglishCertificationFooterBar({ onPrevious, onClear, onToggleMark, onNext, isMarked = false, isPreviousDisabled = false, isNextDisabled = false, showSecondaryActions = true, }) {
+    return (_jsxs("footer", { className: "sticky bottom-0 z-40 flex flex-col gap-2 px-4 pt-3 lg:px-7", style: {
+            background: `linear-gradient(180deg, rgba(255,255,255,0.94) 0 calc(100% - 64px), transparent calc(100% - 64px)), ${ENGLISH_CERT_FOOTER_WAVE} bottom/100% 64px no-repeat`,
+        }, children: [_jsxs("div", { className: cn('grid grid-cols-2 items-center gap-3 lg:gap-12', showSecondaryActions
+                    ? 'lg:grid-cols-[240px_190px_1fr_200px]'
+                    : 'mx-auto w-full max-w-[520px] lg:grid-cols-2'), children: [_jsx("button", { type: "button", onClick: onPrevious, disabled: isPreviousDisabled, className: cn('h-[42px] rounded-md border border-[#d9e4f2] bg-white text-[15px] font-black text-[#0a3d9a] shadow-[0_5px_16px_rgba(13,71,161,0.08)] disabled:cursor-not-allowed disabled:opacity-50', !showSecondaryActions && 'lg:w-[200px] lg:justify-self-start'), children: "\u2190 \u00A0 Previous" }), showSecondaryActions && onClear && (_jsx("button", { type: "button", onClick: onClear, className: "h-[42px] rounded-md border border-[#d9e4f2] bg-white text-[15px] font-black text-[#0a3d9a] shadow-[0_5px_16px_rgba(13,71,161,0.08)]", children: "\u25C6 \u00A0 Clear Answer" })), showSecondaryActions && onToggleMark && (_jsxs("button", { type: "button", onClick: onToggleMark, className: cn('h-[42px] rounded-md border bg-white text-[15px] font-black shadow-[0_5px_16px_rgba(13,71,161,0.08)] lg:w-[220px] lg:justify-self-center', isMarked
+                            ? 'border-[#ff8a00] text-[#ff8a00]'
+                            : 'border-[#d9e4f2] text-[#0a3d9a]'), children: ["\u25AE \u00A0 ", isMarked ? 'Unmark Review' : 'Mark for Review'] })), _jsx("button", { type: "button", onClick: onNext, disabled: isNextDisabled, className: cn('h-[42px] rounded-md border border-[#0b57d0] text-[15px] font-black text-white shadow-[0_5px_16px_rgba(13,71,161,0.08)] disabled:cursor-not-allowed disabled:opacity-50', !showSecondaryActions && 'lg:w-[200px] lg:justify-self-end'), style: { background: ENGLISH_CERT_PRIMARY_GRADIENT }, children: "Next \u00A0 \u2192" })] }), _jsxs("div", { className: "pointer-events-none hidden h-9 items-center gap-4 text-white lg:flex", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-2 font-black tracking-wide", children: [_jsx("span", { className: "grid h-[25px] w-[25px] place-items-center rounded-full border-2 border-white text-xs", children: "\u2726" }), "OCEAN EDU"] }), _jsxs("span", { className: "min-w-0 flex-1 text-center text-[13px] font-bold", children: ["\u3030 \u00A0 ", ENGLISH_CERT_FOOTER_NOTE] })] })] }));
+}