@tinyweb_dev/oe-exam-sdk 0.1.0 → 0.1.2

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

@@ -1,56 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { ResolvedImage } from '../../../components/common/ResolvedImage';
-import { cn } from '../../../shared/lib/utils';
-import { transformWordFillParagraph } from '../../../components/exams/take/exam-taking.utils';
-/**
- * Branded English Certification renderer for `WORD_FILL_PARAGRAPH`.
- *
- * Shows an optional word bank, then the paragraph with inline blanks. Supports
- * `WITH_WORD_BANK` (dropdown selecting a bank word) and `DEFAULT` (free text
- * input). Reuses {@link transformWordFillParagraph} so the stored answer shape
- * (`{ [questionId]: string[] }` indexed by blank) stays compatible with the
- * grading store.
- */
-export function EcWordFillParagraph({ part, answers, onAnswerChange, isReviewMode = false, }) {
-    const data = useMemo(() => transformWordFillParagraph(part.questions), [part.questions]);
-    const { questionId, paragraph, title, imageUrl, wordBank, viewMode, instruction } = data;
-    const currentAnswers = answers[questionId] || [];
-    const segments = useMemo(() => paragraph.split(/(\{\d+\})/), [paragraph]);
-    const useWordBank = viewMode === 'WITH_WORD_BANK';
-    const usedWords = new Set(currentAnswers.filter(Boolean));
-    const setBlank = (blankIndex, value) => {
-        if (isReviewMode)
-            return;
-        const next = [...currentAnswers];
-        next[blankIndex] = value;
-        onAnswerChange(questionId, next);
-    };
-    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 })), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: title || 'Illustration', className: "max-h-[280px] rounded-lg object-contain shadow-md" }) })), useWordBank && wordBank.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[#64748b]", children: "Word bank" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: wordBank.map((item, idx) => {
-                            const isUsed = usedWords.has(item.word);
-                            return (_jsx("span", { className: cn('rounded-full border px-3 py-1 text-sm font-semibold transition-all', item.isExample
-                                    ? 'border-[#b9edc8] bg-[#ddf8e7] text-[#15803d]'
-                                    : isUsed
-                                        ? 'border-[#d9e4f2] bg-[#f4f9ff] text-[#94a3b8] line-through'
-                                        : 'border-[#9cc4f5] bg-white text-[#0b57d0]'), children: item.word }, `${item.word}-${idx}`));
-                        }) })] })), _jsx("div", { className: "rounded-2xl border border-[#d9e4f2] bg-white/90 p-5 text-base leading-loose text-[#0f1730] shadow-[0_14px_35px_rgba(13,71,161,0.10)]", children: segments.map((segment, idx) => {
-                    const blankMatch = segment.match(/^\{(\d+)\}$/);
-                    if (!blankMatch) {
-                        return _jsx("span", { children: segment }, idx);
-                    }
-                    const blankIndex = parseInt(blankMatch[1], 10);
-                    const studentAnswer = currentAnswers[blankIndex] || '';
-                    if (useWordBank) {
-                        return (_jsxs("span", { className: "mx-1 inline-flex items-baseline gap-1 align-baseline", children: [_jsxs("span", { className: "text-[11px] font-bold text-[#1f7cff]", children: ["(", blankIndex + 1, ")"] }), _jsxs("select", { value: studentAnswer, disabled: isReviewMode, onChange: (e) => setBlank(blankIndex, e.target.value), className: cn('rounded-lg border-2 px-2 py-1 text-sm font-semibold outline-none transition-all', studentAnswer
-                                        ? 'border-[#1167e8] text-[#0b57d0]'
-                                        : 'border-[#9cc4f5] text-[#64748b]', isReviewMode && 'cursor-not-allowed opacity-70'), children: [_jsx("option", { value: "", children: "\u2014\u2014\u2014" }), wordBank
-                                            .filter((w) => !w.isExample)
-                                            .map((w, wi) => (_jsx("option", { value: w.word, children: w.word }, `${blankIndex}-${wi}`)))] })] }, idx));
-                    }
-                    return (_jsxs("span", { className: "mx-1 inline-flex items-baseline gap-1 align-baseline", children: [_jsxs("span", { className: "text-[11px] font-bold text-[#1f7cff]", children: ["(", blankIndex + 1, ")"] }), _jsx("input", { type: "text", value: studentAnswer, disabled: isReviewMode, placeholder: "\u00B7\u00B7\u00B7", onChange: (e) => setBlank(blankIndex, e.target.value), style: { width: `${Math.max(4, studentAnswer.length + 1)}ch` }, className: cn('inline-block min-w-[4ch] max-w-[16ch] border-b-2 bg-transparent px-1 text-center text-sm font-semibold outline-none transition-colors', studentAnswer
-                                    ? 'border-[#1167e8] text-[#0b57d0]'
-                                    : 'border-[#9cc4f5] text-[#64748b]', isReviewMode && 'cursor-not-allowed opacity-70') })] }, idx));
-                }) })] }));
-}
-//# sourceMappingURL=EcWordFillParagraph.js.map
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useMemo as r}from"react";import{ResolvedImage as a}from"../../../components/common/ResolvedImage";import{cn as n}from"../../../shared/lib/utils";import{transformWordFillParagraph as o}from"../../../components/exams/take/exam-taking.utils";export function EcWordFillParagraph({part:l,answers:s,onAnswerChange:i,isReviewMode:d=!1}){const c=r(()=>o(l.questions),[l.questions]),{questionId:m,paragraph:p,title:x,imageUrl:b,wordBank:f,viewMode:h,instruction:u}=c,g=s[m]||[],w=r(()=>p.split(/(\{\d+\})/),[p]),N="WITH_WORD_BANK"===h,v=new Set(g.filter(Boolean)),y=(e,t)=>{if(d)return;const r=[...g];r[e]=t,i(m,r)};return t("div",{className:"flex flex-col gap-4",children:[u&&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:u}),b&&e("div",{className:"flex items-center justify-center",children:e(a,{src:b,alt:x||"Illustration",className:"max-h-[280px] rounded-lg object-contain shadow-md"})}),N&&f.length>0&&t("div",{className:"rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]",children:[e("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-[#64748b]",children:"Word bank"}),e("div",{className:"mt-2 flex flex-wrap gap-2",children:f.map((t,r)=>{const a=v.has(t.word);return e("span",{className:n("rounded-full border px-3 py-1 text-sm font-semibold transition-all",t.isExample?"border-[#b9edc8] bg-[#ddf8e7] text-[#15803d]":a?"border-[#d9e4f2] bg-[#f4f9ff] text-[#94a3b8] line-through":"border-[#9cc4f5] bg-white text-[#0b57d0]"),children:t.word},`${t.word}-${r}`)})})]}),e("div",{className:"rounded-2xl border border-[#d9e4f2] bg-white/90 p-5 text-base leading-loose text-[#0f1730] shadow-[0_14px_35px_rgba(13,71,161,0.10)]",children:w.map((r,a)=>{const o=r.match(/^\{(\d+)\}$/);if(!o)return e("span",{children:r},a);const l=parseInt(o[1],10),s=g[l]||"";return t("span",N?{className:"mx-1 inline-flex items-baseline gap-1 align-baseline",children:[t("span",{className:"text-[11px] font-bold text-[#1f7cff]",children:["(",l+1,")"]}),t("select",{value:s,disabled:d,onChange:e=>y(l,e.target.value),className:n("rounded-lg border-2 px-2 py-1 text-sm font-semibold outline-none transition-all",s?"border-[#1167e8] text-[#0b57d0]":"border-[#9cc4f5] text-[#64748b]",d&&"cursor-not-allowed opacity-70"),children:[e("option",{value:"",children:"———"}),f.filter(e=>!e.isExample).map((t,r)=>e("option",{value:t.word,children:t.word},`${l}-${r}`))]})]}:{className:"mx-1 inline-flex items-baseline gap-1 align-baseline",children:[t("span",{className:"text-[11px] font-bold text-[#1f7cff]",children:["(",l+1,")"]}),e("input",{type:"text",value:s,disabled:d,placeholder:"···",onChange:e=>y(l,e.target.value),style:{width:`${Math.max(4,s.length+1)}ch`},className:n("inline-block min-w-[4ch] max-w-[16ch] border-b-2 bg-transparent px-1 text-center text-sm font-semibold outline-none transition-colors",s?"border-[#1167e8] text-[#0b57d0]":"border-[#9cc4f5] text-[#64748b]",d&&"cursor-not-allowed opacity-70")})]},a)})})]})}

package/dist/components/themes/english-certification/EcWordFillStructuredForm.d.ts

@@ -17,4 +17,3 @@ interface EcWordFillStructuredFormProps {
  */
 export declare function EcWordFillStructuredForm({ part, answers, onAnswerChange, isReviewMode, }: EcWordFillStructuredFormProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=EcWordFillStructuredForm.d.ts.map

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

@@ -1,157 +1 @@
-'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';
-/**
- * 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();
-    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;
-            input.className = cn('ec-blank-input inline-block w-[110px] border-0 border-b-2 border-dashed bg-transparent px-1 py-0 text-base font-semibold leading-tight align-middle outline-none transition-colors', isReviewMode
-                ? isCorrect
-                    ? 'border-[#22c55e] text-[#15803d]'
-                    : hasUserAnswer
-                        ? 'border-[#ef4444] text-red-700'
-                        : 'border-[#f97316] text-[#c2410c]'
-                : 'border-[#1167e8] text-[#0f1730] hover:border-[#0b57d0] focus:border-[#0b57d0]');
-            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-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[11px] font-bold leading-none text-white align-middle', isReviewMode
-                    ? isCorrect
-                        ? 'bg-[#22c55e]'
-                        : hasUserAnswer
-                            ? 'bg-[#ef4444]'
-                            : 'bg-[#f97316]'
-                    : 'bg-[#0b57d0]');
-            }
-            if (wrapper) {
-                wrapper.className = cn('ec-blank-wrapper inline-flex items-center whitespace-nowrap align-middle', 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: `question-${q.id}`, className: "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))) })] }));
-}
-//# sourceMappingURL=EcWordFillStructuredForm.js.map
+"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 i}from"react";import{ResolvedImage as o}from"../../../components/common/ResolvedImage";import{cn as l}from"../../../shared/lib/utils";import{transformWordFillStructuredForm as d}from"../../../components/exams/take/exam-taking.utils";function c(e){const t=Number(e);return Number.isFinite(t)?String(t+1):e}function b(e,t){const r=e.trim();return t?r:r.toLowerCase()}function u(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 m={},p=i(function({question:a,initialAnswers:i,onBlankChange:d,isReviewMode:u}){const m=r(null),p=r(d);p.current=d;const f=r(!1),x=r(i),h=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}">${c(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=h,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}"]`),i=x.current[n]||"",o=a.answers[n]||"",d=i.trim().length>0,m=d&&b(i,a.caseSensitive)===b(o,a.caseSensitive),f=u&&!m&&o.trim().length>0;t.value=f?`${d?i:"(empty)"} → ${o}`:i,t.disabled=u,t.className=l("ec-blank-input inline-block w-[110px] border-0 border-b-2 border-dashed bg-transparent px-1 py-0 text-base font-semibold leading-tight align-middle outline-none transition-colors",u?m?"border-[#22c55e] text-[#15803d]":d?"border-[#ef4444] text-red-700":"border-[#f97316] text-[#c2410c]":"border-[#1167e8] text-[#0f1730] hover:border-[#0b57d0] focus:border-[#0b57d0]");const h=e.querySelector(`[data-blank-number="${n}"]`);h&&(h.textContent=c(n),h.className=l("ec-blank-number mr-1 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[11px] font-bold leading-none text-white align-middle",u?m?"bg-[#22c55e]":d?"bg-[#ef4444]":"bg-[#f97316]":"bg-[#0b57d0]")),s&&(s.className=l("ec-blank-wrapper inline-flex items-center whitespace-nowrap align-middle",u?"mx-1":"mx-0.5"));const g=e=>{const t=e.target;p.current(n,t.value)};t.addEventListener("input",g),r.push({el:t,handler:g})}),()=>{r.forEach(({el:e,handler:t})=>{e.removeEventListener("input",t)})}},[h,u]),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(o,{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"}),u&&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:i,onAnswerChange:l,isReviewMode:c=!1}){const{questions:b,instruction:f,groupTitle:x,groupContent:h,groupImageUrl:g}=s(()=>d(n.questions),[n.questions]),w=r(i);w.current=i;const N=r(l);N.current=l;const v=a((e,t,r)=>{const n=w.current[e]||{};N.current(e,{...n,[t]:r})},[]),k=s(()=>{const e={};return b.forEach(t=>{e[t.id]=(e,r)=>v(t.id,e,r)}),e},[b,v]);return t("div",{className:"flex flex-col gap-4",children:[f&&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:f}),x&&e("h2",{className:"text-center text-lg font-bold uppercase text-[#0b57d0]",children:x}),g&&e("div",{className:"flex items-center justify-center",children:e(o,{src:g,alt:x||"Group image",className:"max-h-[300px] rounded-lg object-contain shadow-md"})}),e("div",{className:"flex flex-col gap-4",children:b.map(r=>t("div",{id:`question-${r.id}`,className:"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:u(r.answers,r.questionNumber)})}),e(p,{question:r,initialAnswers:i[r.id]||m,onBlankChange:k[r.id],isReviewMode:c})]},r.id))})]})}

package/dist/components/themes/english-certification/EcWritingTask.d.ts

@@ -16,4 +16,3 @@ interface EcWritingTaskProps {
  */
 export declare function EcWritingTask({ part, answers, onAnswerChange, isReviewMode, }: EcWritingTaskProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=EcWritingTask.d.ts.map

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

@@ -1,35 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { ResolvedImage } from '../../../components/common/ResolvedImage';
-import { cn } from '../../../shared/lib/utils';
-import { transformWriteShortLetter } from '../../../components/exams/take/exam-taking.utils';
-/** 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(() => transformWriteShortLetter(firstQuestion), [firstQuestion]);
-    if (!firstQuestion) {
-        return null;
-    }
-    const { prompt, requirements, minWords, maxWords, guideImages } = data;
-    const answer = answers[firstQuestion.id] || '';
-    const wordCount = countWords(answer);
-    const meetsMin = minWords ? wordCount >= minWords : true;
-    const withinMax = maxWords ? wordCount <= maxWords : true;
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [part.instructions && (_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: part.instructions })), prompt && (_jsx("div", { className: "whitespace-pre-line rounded-2xl border border-[#d9e4f2] bg-white/90 p-5 text-base leading-relaxed text-[#0f1730] shadow-[0_14px_35px_rgba(13,71,161,0.10)]", children: prompt })), requirements && requirements.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-[#d9e4f2] bg-white/70 p-4", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[#64748b]", children: "Y\u00EAu c\u1EA7u" }), _jsx("ul", { className: "mt-2 list-inside list-disc space-y-1 text-sm text-[#0f1730]", children: requirements.map((req, idx) => (_jsx("li", { children: req }, idx))) })] })), guideImages && guideImages.length > 0 && (_jsx("div", { className: "flex flex-col items-center justify-center gap-4 py-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: "rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]", children: [_jsx("textarea", { value: answer, disabled: isReviewMode, placeholder: "Vi\u1EBFt b\u00E0i c\u1EE7a b\u1EA1n \u1EDF \u0111\u00E2y\u2026", onChange: (e) => onAnswerChange(firstQuestion.id, e.target.value), rows: 12, className: cn('w-full resize-y rounded-xl border-2 border-[#9cc4f5] bg-[#f4f9ff] px-4 py-3 text-sm leading-relaxed text-[#0f1730] outline-none transition-all focus:border-[#1167e8]', isReviewMode && 'cursor-not-allowed opacity-80') }), _jsxs("div", { className: "mt-2 flex items-center justify-between text-xs", children: [_jsxs("span", { className: cn('font-semibold', !meetsMin || !withinMax ? 'text-[#ef4444]' : 'text-[#15803d]'), children: [wordCount, " t\u1EEB"] }), (minWords || maxWords) && (_jsxs("span", { className: "text-[#64748b]", children: [minWords ? `Tối thiểu ${minWords}` : '', minWords && maxWords ? ' · ' : '', maxWords ? `Tối đa ${maxWords}` : ''] }))] })] })] }));
-}
-//# sourceMappingURL=EcWritingTask.js.map
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useMemo as r}from"react";import{ResolvedImage as s}from"../../../components/common/ResolvedImage";import{cn as i}from"../../../shared/lib/utils";import{transformWriteShortLetter as a}from"../../../components/exams/take/exam-taking.utils";export function EcWritingTask({part:n,answers:l,onAnswerChange:d,isReviewMode:o=!1}){const c=n.questions[0],m=r(()=>a(c),[c]);if(!c)return null;const{prompt:x,requirements:p,minWords:f,maxWords:u,guideImages:b}=m,h=l[c.id]||"",g=function(e){const t=e.trim();return t?t.split(/\s+/).length:0}(h),w=!f||g>=f,N=!u||g<=u;return t("div",{className:"flex flex-col gap-4",children:[n.instructions&&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:n.instructions}),x&&e("div",{className:"whitespace-pre-line rounded-2xl border border-[#d9e4f2] bg-white/90 p-5 text-base leading-relaxed text-[#0f1730] shadow-[0_14px_35px_rgba(13,71,161,0.10)]",children:x}),p&&p.length>0&&t("div",{className:"rounded-2xl border border-[#d9e4f2] bg-white/70 p-4",children:[e("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-[#64748b]",children:"Yêu cầu"}),e("ul",{className:"mt-2 list-inside list-disc space-y-1 text-sm text-[#0f1730]",children:p.map((t,r)=>e("li",{children:t},r))})]}),b&&b.length>0&&e("div",{className:"flex flex-col items-center justify-center gap-4 py-4",children:b.map((t,r)=>e(s,{src:t,alt:`Guide ${r+1}`,className:"w-full max-w-3xl rounded-xl bg-white object-contain shadow-sm"},r))}),t("div",{className:"rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]",children:[e("textarea",{value:h,disabled:o,placeholder:"Viết bài của bạn ở đây…",onChange:e=>d(c.id,e.target.value),rows:12,className:i("w-full resize-y rounded-xl border-2 border-[#9cc4f5] bg-[#f4f9ff] px-4 py-3 text-sm leading-relaxed text-[#0f1730] outline-none transition-all focus:border-[#1167e8]",o&&"cursor-not-allowed opacity-80")}),t("div",{className:"mt-2 flex items-center justify-between text-xs",children:[t("span",{className:i("font-semibold",w&&N?"text-[#15803d]":"text-[#ef4444]"),children:[g," từ"]}),(f||u)&&t("span",{className:"text-[#64748b]",children:[f?`Tối thiểu ${f}`:"",f&&u?" · ":"",u?`Tối đa ${u}`:""]})]})]})]})}

package/dist/components/themes/english-certification/EnglishCertificationAudioPlayer.d.ts

@@ -11,4 +11,3 @@ interface EnglishCertificationAudioPlayerProps {
  */
 export declare function EnglishCertificationAudioPlayer({ audioUrl, partNumber, isLoading, }: EnglishCertificationAudioPlayerProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=EnglishCertificationAudioPlayer.d.ts.map

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

@@ -1,115 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from 'react';
-import { Play, Pause, RotateCcw, RefreshCw } 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.
- *
- * Handles play/pause/reset, progress and presigned-URL resolution while
- * adopting the compact Ocean Edu audio-bar look.
- */
-export function EnglishCertificationAudioPlayer({ audioUrl, partNumber = 0, isLoading = false, }) {
-    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 togglePlayPause = () => {
-        if (!audioRef.current)
-            return;
-        if (isPlaying) {
-            audioRef.current.pause();
-            setIsPlaying(false);
-        }
-        else {
-            audioRef.current.play().catch((err) => {
-                setError(`Failed to play audio: ${err.message}`);
-            });
-            setIsPlaying(true);
-        }
-    };
-    const handleReset = () => {
-        if (!audioRef.current)
-            return;
-        audioRef.current.currentTime = 0;
-        audioRef.current.pause();
-        setIsPlaying(false);
-        setCurrentTime(0);
-    };
-    const handleRetry = () => {
-        const audio = audioRef.current;
-        if (!audio || !resolvedAudioUrl)
-            return;
-        setError(null);
-        setCurrentTime(0);
-        setIsPlaying(false);
-        audio.src = resolvedAudioUrl;
-        audio.load();
-    };
-    const handleProgressChange = (e) => {
-        const newTime = parseFloat(e.target.value);
-        if (!audioRef.current)
-            return;
-        audioRef.current.currentTime = newTime;
-        setCurrentTime(newTime);
-    };
-    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 = 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: isLoading || !audioUrl || !!error, 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": isPlaying ? 'Pause audio' : 'Play audio', children: isPlaying ? _jsx(Pause, { size: 24 }) : _jsx(Play, { size: 24, className: "ml-0.5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("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}`] }), _jsx("button", { type: "button", onClick: handleReset, disabled: isLoading || !audioUrl || !!error, className: "flex h-8 w-8 items-center justify-center rounded-full border border-[#d9e4f2] text-[#0b57d0] transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Replay from start", children: _jsx(RotateCcw, { size: 16 }) })] }), _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) }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 rounded-full", style: {
-                                            width: `${progressPercent}%`,
-                                            background: 'linear-gradient(90deg, #1f7cff, #0b57d0)',
-                                        } }), _jsx("input", { type: "range", min: "0", max: duration || 0, step: "0.1", value: currentTime, onChange: handleProgressChange, disabled: isLoading || !audioUrl || !!error, className: "relative z-10 h-2 w-full cursor-pointer appearance-none rounded-full bg-[#dfe9f6] accent-[#0b57d0] disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Audio progress" })] }), _jsx("span", { children: duration > 0 ? formatTime(duration) : '00:00' })] })] })] }));
-}
-//# sourceMappingURL=EnglishCertificationAudioPlayer.js.map
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as a,useEffect as n}from"react";import{Play as i,Pause as d,RotateCcw as l,RefreshCw as s}from"lucide-react";import{usePresignedFileUrl as o}from"../../../shared/lib/hooks/usePresignedFileUrl";import{cn as c}from"../../../shared/lib/utils";export function EnglishCertificationAudioPlayer({audioUrl:u,partNumber:p=0,isLoading:m=!1}){const b=t(null),{previewUrl:f}=o(u||void 0),[g,x]=a(!1),[h,v]=a(0),[y,N]=a(0),[w,L]=a(null),E=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")}`};n(()=>{const e=b.current;if(!e)return;const r=()=>v(e.currentTime),t=()=>{N(e.duration),L(null)},a=()=>x(!1),n=()=>{L("Failed to load audio file"),x(!1)};return e.addEventListener("timeupdate",r),e.addEventListener("loadedmetadata",t),e.addEventListener("ended",a),e.addEventListener("error",n),()=>{e.removeEventListener("timeupdate",r),e.removeEventListener("loadedmetadata",t),e.removeEventListener("ended",a),e.removeEventListener("error",n)}},[]),n(()=>{b.current&&f&&(b.current.src=f,v(0),x(!1),L(null))},[f]);const _=y>0?h/y*100:0,k=w?"Audio unavailable":m?"Loading...":g?"Playing...":h>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:b}),e("button",{type:"button",onClick:()=>{b.current&&(g?(b.current.pause(),x(!1)):(b.current.play().catch(e=>{L(`Failed to play audio: ${e.message}`)}),x(!0)))},disabled:m||!u||!!w,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":g?"Pause audio":"Play audio",children:g?e(d,{size:24}):e(i,{size:24,className:"ml-0.5"})}),r("div",{className:"min-w-0",children:[r("div",{className:"flex items-center justify-between gap-3",children:[r("span",{className:"text-[18px] font-black text-[#0f1730]",children:["Listening Audio",p>0&&` · Part ${p}`]}),e("button",{type:"button",onClick:()=>{b.current&&(b.current.currentTime=0,b.current.pause(),x(!1),v(0))},disabled:m||!u||!!w,className:"flex h-8 w-8 items-center justify-center rounded-full border border-[#d9e4f2] text-[#0b57d0] transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Replay from start",children:e(l,{size:16})})]}),r("div",{className:"mt-1 flex items-center gap-2.5",children:[e("span",{className:c("text-sm font-bold",w?"text-red-500":"text-[#64748b]"),children:w??k}),w&&r("button",{type:"button",onClick:()=>{const e=b.current;e&&f&&(L(null),v(0),x(!1),e.src=f,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(s,{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:E(h)}),r("div",{className:"relative",children:[e("div",{className:"pointer-events-none absolute inset-y-0 left-0 rounded-full",style:{width:`${_}%`,background:"linear-gradient(90deg, #1f7cff, #0b57d0)"}}),e("input",{type:"range",min:"0",max:y||0,step:"0.1",value:h,onChange:e=>{const r=parseFloat(e.target.value);b.current&&(b.current.currentTime=r,v(r))},disabled:m||!u||!!w,className:"relative z-10 h-2 w-full cursor-pointer appearance-none rounded-full bg-[#dfe9f6] accent-[#0b57d0] disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Audio progress"})]}),e("span",{children:y>0?E(y):"00:00"})]})]})]})}

package/dist/components/themes/english-certification/EnglishCertificationBrand.d.ts

@@ -8,4 +8,3 @@ interface EnglishCertificationBrandProps {
  */
 export declare function EnglishCertificationBrand({ className }: EnglishCertificationBrandProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=EnglishCertificationBrand.d.ts.map

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

@@ -1,12 +1 @@
-'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" }) }));
-}
-//# sourceMappingURL=EnglishCertificationBrand.js.map
+"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"})})}

package/dist/components/themes/english-certification/EnglishCertificationExamLayout.d.ts

@@ -17,4 +17,3 @@ interface EnglishCertificationExamLayoutProps {
  */
 export declare function EnglishCertificationExamLayout({ children, headerProps, navigationProps, footerProps, }: EnglishCertificationExamLayoutProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=EnglishCertificationExamLayout.d.ts.map

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

@@ -1,22 +1 @@
-'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);
-    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, { ...navigationProps }) })] })), !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, { ...navigationProps }) })] }) })] }));
-}
-//# sourceMappingURL=EnglishCertificationExamLayout.js.map
+"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 d}from"./EnglishCertificationNavigationPanel";import{EnglishCertificationFooterBar as c}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,w]=i(!0),[u,v]=i(!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:()=>w(!1),className:"text-sm font-bold text-white/90 hover:text-white",children:"Hide ≪"})]}),e("div",{className:"flex-1 overflow-hidden",children:e(d,{...p})})]}),!g&&e("button",{type:"button",onClick:()=>w(!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(c,{...b}),e("button",{type:"button",onClick:()=>v(!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:u,onOpenChange:v,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(d,{...p})})]})})]})}

package/dist/components/themes/english-certification/EnglishCertificationFlagButton.d.ts

@@ -20,4 +20,3 @@ interface EnglishCertificationFlagButtonProps {
  */
 export declare function EnglishCertificationFlagButton({ isFlagged, onToggle, size, className, }: EnglishCertificationFlagButtonProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=EnglishCertificationFlagButton.d.ts.map

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

@@ -1,16 +1 @@
-'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' })] }));
-}
-//# sourceMappingURL=EnglishCertificationFlagButton.js.map
+"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"})]})}

package/dist/components/themes/english-certification/EnglishCertificationFooterBar.d.ts

@@ -20,4 +20,3 @@ export interface EnglishCertificationFooterBarProps {
  * decorative wave, brand lockup and encouragement note.
  */
 export declare function EnglishCertificationFooterBar({ onPrevious, onClear, onToggleMark, onNext, isMarked, isPreviousDisabled, isNextDisabled, showSecondaryActions, }: EnglishCertificationFooterBarProps): import("react").JSX.Element;
-//# sourceMappingURL=EnglishCertificationFooterBar.d.ts.map

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

@@ -1,20 +1 @@
-'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] })] })] }));
-}
-//# sourceMappingURL=EnglishCertificationFooterBar.js.map
+"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]})]})]})}

package/dist/components/themes/english-certification/EnglishCertificationGroupedQuestion.d.ts

@@ -22,4 +22,3 @@ interface EnglishCertificationGroupedQuestionProps {
  */
 export declare function EnglishCertificationGroupedQuestion({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode, isListeningPart, partAudioUrl, }: EnglishCertificationGroupedQuestionProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=EnglishCertificationGroupedQuestion.d.ts.map