@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.3

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

@@ -1,156 +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))) })] }));
-}
+"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.js

@@ -1,34 +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}` : ''] }))] })] })] }));
-}
+"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.js

@@ -1,114 +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' })] })] })] }));
-}
+"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.js

@@ -1,11 +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" }) }));
-}
+"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.js

@@ -1,21 +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 }) })] }) })] }));
-}
+"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.js

@@ -1,15 +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' })] }));
-}
+"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.js

@@ -1,19 +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] })] })] }));
-}
+"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.js

@@ -1,148 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FileText, Headphones, Info } from 'lucide-react';
-import { EnglishCertificationQuestionCard } from './EnglishCertificationQuestionCard';
-import { EnglishCertificationPassagePanel } from './EnglishCertificationPassagePanel';
-import { EnglishCertificationReadingSection } from './EnglishCertificationReadingSection';
-import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
-import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
-import { isHtmlContent, stripInstruction } from './grouped-question-utils';
-/** Fixed split layout: equal-width passage / questions columns. */
-const SPLIT_VIEW_GRID = 'minmax(0, 1fr) minmax(0, 1fr)';
-/**
- * Splits a grouped reading part into its individual document groups while
- * preserving the original question order. Each document keeps its own passage
- * payload so the layout can stack them vertically on a single screen.
- */
-function buildDocumentGroups(part, sharedInstruction) {
-    const order = [];
-    const byGroup = new Map();
-    part.questions.forEach((question) => {
-        const groupId = question.group_id ?? question.id;
-        if (!byGroup.has(groupId)) {
-            byGroup.set(groupId, []);
-            order.push(groupId);
-        }
-        byGroup.get(groupId).push(question);
-    });
-    return order.map((groupId) => {
-        const questions = byGroup.get(groupId);
-        const payload = questions[0]?.questionGroup?.payload ?? {};
-        const rawPassage = payload.content ?? payload.passage ?? '';
-        const passage = stripInstruction(rawPassage, sharedInstruction);
-        const passageImageUrl = payload.imageUrl ?? payload.passageImageUrl ?? '';
-        return {
-            groupId,
-            questions,
-            passage,
-            // API exposes the group heading as `title`; older Reading payloads use
-            // `passageTitle`. Fall back to `title` so grouped MCQ headings show.
-            passageTitle: payload.passageTitle ?? payload.title ?? '',
-            passageSubtitle: payload.subtitle ?? '',
-            passageImageUrl,
-            hasPassageContent: Boolean(passage.trim()) || Boolean(passageImageUrl),
-        };
-    });
-}
-/**
- * Resolves the shared part instruction.
- *
- * Priority:
- * 1. `questionGroup.payload.instructions` — used by some grouped question types.
- * 2. `partInstructions` — the template-level instruction from the QuestionPart
- *    (e.g. Part 6 TOEIC where the instruction lives on the template part).
- * 3. `content.question` of the first question — legacy fallback.
- */
-function resolveSharedInstruction(part, partInstructions) {
-    const first = part.questions[0];
-    return (first?.questionGroup?.payload?.instructions ??
-        (partInstructions?.trim() || undefined) ??
-        first?.content?.question ??
-        '').trim();
-}
-/**
- * Ocean Edu branded split-view renderer for grouped reading parts.
- *
- * Renders every document of the part stacked vertically. Each document shows a
- * reading passage (title, optional image, body, source bar) on the left and its
- * MCQ questions on the right in a balanced 50/50 split.
- */
-export function EnglishCertificationGroupedQuestion({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode = false, isListeningPart = false, partAudioUrl, }) {
-    const startIndex = partConfig.startIndex ?? 0;
-    // Part-level instruction (e.g. "Read the texts that follow…") is shared by
-    // every document. Render it once at the top and strip it from each passage
-    // (the API prepends it to every document's content) to avoid duplication.
-    // Prefer part.instructions (set by groupQuestionsByPart from the template)
-    // which covers TOEIC Part 6 where the instruction lives on the template part
-    // rather than inside the question group payload.
-    const sharedInstruction = resolveSharedInstruction(part, part.instructions ?? partConfig.instructions);
-    // When the part carries template sections, render every question in a single
-    // document so the section loop in renderQuestions runs once and stacks each
-    // sub-section. Splitting by group_id here would duplicate the section headings
-    // and break per-section dispatch.
-    //
-    // The document still carries the shared passage when present: IELTS Reading
-    // parts ship a DOCUMENT group whose passage lives on each question's
-    // `questionGroup.payload` (content/title/subtitle). Surfacing it flips
-    // `hasPassageContent` to true so the split branch shows passage-left /
-    // questions-right (TOEIC Part 7 style). Mixed Listening parts (SECTION 2:
-    // CHOOSE + MATCH + WORD_FILL) carry no passage, so this stays false and the
-    // full-width no-passage branch is preserved.
-    const buildSectionedDocument = () => {
-        const payload = (part.questions[0]?.questionGroup?.payload ?? {});
-        const rawPassage = (payload.content ?? payload.passage ?? '');
-        const passage = stripInstruction(rawPassage, sharedInstruction);
-        const passageImageUrl = (payload.imageUrl ?? payload.passageImageUrl ?? '');
-        return {
-            groupId: part.partId,
-            questions: part.questions,
-            passage,
-            passageTitle: (payload.passageTitle ?? payload.title ?? ''),
-            passageSubtitle: (payload.subtitle ?? ''),
-            passageImageUrl,
-            hasPassageContent: Boolean(passage.trim()) || Boolean(passageImageUrl),
-        };
-    };
-    const documents = part.sections?.length
-        ? [buildSectionedDocument()]
-        : buildDocumentGroups(part, sharedInstruction);
-    if (!documents.length) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600", children: "No questions found for this part" }));
-    }
-    const showAudio = isListeningPart && Boolean(partAudioUrl);
-    /** Renders a document's question list (used by both split and full-width layouts). */
-    const renderQuestions = (document) => {
-        if (part.sections?.length) {
-            return (_jsx("div", { className: "flex-1 space-y-6 px-4 py-4", children: part.sections.map((section, sectionIdx) => {
-                    const sectionQuestions = document.questions.filter((question) => {
-                        const pos = part.questions.indexOf(question);
-                        return (pos >= section.startIndex - startIndex &&
-                            pos <= section.endIndex - startIndex);
-                    });
-                    if (!sectionQuestions.length)
-                        return null;
-                    return (_jsx(EnglishCertificationReadingSection, { part: part, section: section, questions: sectionQuestions, startIndex: startIndex, answers: answers, flaggedQuestions: flaggedQuestions, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode }, `${document.groupId}-section-${sectionIdx}`));
-                }) }));
-        }
-        return (_jsx("div", { className: "flex-1 space-y-3 px-4 py-4", children: document.questions.map((question) => {
-                const questionNumber = part.questions.indexOf(question) + 1;
-                const globalQuestionNumber = startIndex + questionNumber;
-                return (_jsx(EnglishCertificationQuestionCard, { question: question, globalQuestionNumber: globalQuestionNumber, answer: answers[question.id], isFlagged: flaggedQuestions.has(question.id), sharedInstruction: sharedInstruction, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode }, question.id));
-            }) }));
-    };
-    return (_jsxs("div", { className: "flex h-full flex-col gap-6 overflow-y-auto pb-4", children: [showAudio && (_jsx("div", { className: `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} w-full self-center`, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: partAudioUrl, partNumber: part.partNo }) })), sharedInstruction && (_jsx("div", { className: `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} w-full self-center`, children: _jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-[#bfd8f8] bg-gradient-to-r from-[#eef5ff] to-[#f7fbff] px-5 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md", children: [_jsx("span", { className: "mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full bg-[#1167e8] text-white", children: isListeningPart ? (_jsx(Headphones, { className: "h-3.5 w-3.5" })) : (_jsx(Info, { className: "h-3.5 w-3.5" })) }), _jsxs("div", { className: "min-w-0", children: [part.name && (_jsx("div", { className: "mb-1 text-xs font-black uppercase tracking-wide text-[#0b57d0]", children: part.name })), _jsx("p", { className: "text-base font-semibold leading-relaxed text-[#0f1730]", children: sharedInstruction })] })] }) })), documents.map((document) => {
-                const firstNumber = part.questions.indexOf(document.questions[0]) + startIndex + 1;
-                const lastNumber = part.questions.indexOf(document.questions[document.questions.length - 1]) +
-                    startIndex +
-                    1;
-                const passageIsHtml = isHtmlContent(document.passage);
-                // No-passage group (e.g. Listening grouped MCQ that only carries a
-                // heading like "Choose the correct letter, A, B or C"): hide the empty
-                // passage panel and render the group title as a banner above the
-                // full-width questions.
-                if (!document.hasPassageContent) {
-                    return (_jsxs("div", { className: `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} flex w-full flex-col gap-3 self-center`, children: [_jsxs("div", { className: "flex items-center gap-4 rounded-xl border border-[#d9e4f2] bg-white/90 px-5 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md", children: [_jsx("span", { className: "grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-[#eaf2ff] text-[#1167e8]", children: _jsx(FileText, { className: "h-6 w-6" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-[#bfd8f8] bg-[#eaf2ff] px-2.5 py-1 text-xs font-bold text-[#0b57d0]", children: ["Questions ", firstNumber, "\u2013", lastNumber] }), document.passageTitle && (_jsx("p", { className: "mt-2 text-lg font-bold leading-tight text-[#0f1730]", children: document.passageTitle })), document.passageSubtitle && (_jsx("p", { className: "mt-1 text-[15px] font-medium text-[#475569]", children: document.passageSubtitle }))] }), document.passageImageUrl && (_jsx("img", { src: document.passageImageUrl, alt: document.passageTitle || 'Illustration', className: "h-20 w-32 shrink-0 rounded-lg object-contain" }))] }), _jsx("section", { className: "flex flex-col overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md", children: renderQuestions(document) })] }, document.groupId));
-                }
-                return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex flex-wrap items-center gap-3 rounded-xl border border-[#d9e4f2] bg-white/85 px-4 py-3 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md", children: _jsxs("div", { className: "flex items-center gap-2.5 rounded-md border border-[#bfd8f8] bg-white/70 px-3 py-1.5 text-base font-bold text-[#0b57d0]", children: [_jsx("span", { className: "grid h-[18px] w-[18px] place-items-center rounded-full bg-[#1167e8] text-white", children: _jsx(Info, { className: "h-3 w-3" }) }), "Questions ", firstNumber, "\u2013", lastNumber, " refer to the following passage."] }) }), _jsxs("div", { className: "grid gap-4", style: { gridTemplateColumns: SPLIT_VIEW_GRID }, children: [_jsx("div", { className: "max-h-[calc(100vh-220px)] min-h-0 overflow-y-auto", children: _jsx(EnglishCertificationPassagePanel, { passage: document.passage, passageTitle: document.passageTitle, passageSubtitle: document.passageSubtitle, passageImageUrl: document.passageImageUrl, passageIsHtml: passageIsHtml, partName: part.name ?? '' }) }), _jsx("section", { className: "flex max-h-[calc(100vh-220px)] min-h-0 flex-col overflow-y-auto rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md", children: renderQuestions(document) })] })] }, document.groupId));
-            })] }));
-}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{FileText as a,Headphones as t,Info as r}from"lucide-react";import{EnglishCertificationQuestionCard as i}from"./EnglishCertificationQuestionCard";import{EnglishCertificationPassagePanel as n}from"./EnglishCertificationPassagePanel";import{EnglishCertificationReadingSection as l}from"./EnglishCertificationReadingSection";import{EnglishCertificationAudioPlayer as o}from"./EnglishCertificationAudioPlayer";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as d}from"./english-certification-theme";import{isHtmlContent as c,stripInstruction as p}from"./grouped-question-utils";export function EnglishCertificationGroupedQuestion({part:g,partConfig:u,answers:m,flaggedQuestions:f,onAnswerChange:h,onToggleFlag:x,isReviewMode:b=!1,isListeningPart:w=!1,partAudioUrl:N}){const v=u.startIndex??0,q=function(e,s){const a=e.questions[0];return(a?.questionGroup?.payload?.instructions??(s?.trim()||void 0)??a?.content?.question??"").trim()}(g,g.instructions??u.instructions),I=g.sections?.length?[(()=>{const e=g.questions[0]?.questionGroup?.payload??{},s=e.content??e.passage??"",a=p(s,q),t=e.imageUrl??e.passageImageUrl??"";return{groupId:g.partId,questions:g.questions,passage:a,passageTitle:e.passageTitle??e.title??"",passageSubtitle:e.subtitle??"",passageImageUrl:t,hasPassageContent:Boolean(a.trim())||Boolean(t)}})()]:function(e,s){const a=[],t=new Map;return e.questions.forEach(e=>{const s=e.group_id??e.id;t.has(s)||(t.set(s,[]),a.push(s)),t.get(s).push(e)}),a.map(e=>{const a=t.get(e),r=a[0]?.questionGroup?.payload??{},i=r.content??r.passage??"",n=p(i,s),l=r.imageUrl??r.passageImageUrl??"";return{groupId:e,questions:a,passage:n,passageTitle:r.passageTitle??r.title??"",passageSubtitle:r.subtitle??"",passageImageUrl:l,hasPassageContent:Boolean(n.trim())||Boolean(l)}})}(g,q);if(!I.length)return e("div",{className:"flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600",children:"No questions found for this part"});const y=w&&Boolean(N),_=s=>g.sections?.length?e("div",{className:"flex-1 space-y-6 px-4 py-4",children:g.sections.map((a,t)=>{const r=s.questions.filter(e=>{const s=g.questions.indexOf(e);return s>=a.startIndex-v&&s<=a.endIndex-v});return r.length?e(l,{part:g,section:a,questions:r,startIndex:v,answers:m,flaggedQuestions:f,onAnswerChange:h,onToggleFlag:x,isReviewMode:b},`${s.groupId}-section-${t}`):null})}):e("div",{className:"flex-1 space-y-3 px-4 py-4",children:s.questions.map(s=>{const a=g.questions.indexOf(s)+1;return e(i,{question:s,globalQuestionNumber:v+a,answer:m[s.id],isFlagged:f.has(s.id),sharedInstruction:q,onAnswerChange:h,onToggleFlag:x,isReviewMode:b},s.id)})});return s("div",{className:"flex h-full flex-col gap-6 overflow-y-auto pb-4",children:[y&&e("div",{className:`${d} w-full self-center`,children:e(o,{audioUrl:N,partNumber:g.partNo})}),q&&e("div",{className:`${d} w-full self-center`,children:s("div",{className:"flex items-start gap-3 rounded-xl border border-[#bfd8f8] bg-gradient-to-r from-[#eef5ff] to-[#f7fbff] px-5 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md",children:[e("span",{className:"mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full bg-[#1167e8] text-white",children:e(w?t:r,{className:"h-3.5 w-3.5"})}),s("div",{className:"min-w-0",children:[g.name&&e("div",{className:"mb-1 text-xs font-black uppercase tracking-wide text-[#0b57d0]",children:g.name}),e("p",{className:"text-base font-semibold leading-relaxed text-[#0f1730]",children:q})]})]})}),I.map(t=>{const i=g.questions.indexOf(t.questions[0])+v+1,l=g.questions.indexOf(t.questions[t.questions.length-1])+v+1,o=c(t.passage);return t.hasPassageContent?s("div",{className:"flex flex-col gap-3",children:[e("div",{className:"flex flex-wrap items-center gap-3 rounded-xl border border-[#d9e4f2] bg-white/85 px-4 py-3 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md",children:s("div",{className:"flex items-center gap-2.5 rounded-md border border-[#bfd8f8] bg-white/70 px-3 py-1.5 text-base font-bold text-[#0b57d0]",children:[e("span",{className:"grid h-[18px] w-[18px] place-items-center rounded-full bg-[#1167e8] text-white",children:e(r,{className:"h-3 w-3"})}),"Questions ",i,"–",l," refer to the following passage."]})}),s("div",{className:"grid gap-4",style:{gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)"},children:[e("div",{className:"max-h-[calc(100vh-220px)] min-h-0 overflow-y-auto",children:e(n,{passage:t.passage,passageTitle:t.passageTitle,passageSubtitle:t.passageSubtitle,passageImageUrl:t.passageImageUrl,passageIsHtml:o,partName:g.name??""})}),e("section",{className:"flex max-h-[calc(100vh-220px)] min-h-0 flex-col overflow-y-auto rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md",children:_(t)})]})]},t.groupId):s("div",{className:`${d} flex w-full flex-col gap-3 self-center`,children:[s("div",{className:"flex items-center gap-4 rounded-xl border border-[#d9e4f2] bg-white/90 px-5 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md",children:[e("span",{className:"grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-[#eaf2ff] text-[#1167e8]",children:e(a,{className:"h-6 w-6"})}),s("div",{className:"min-w-0 flex-1",children:[s("span",{className:"inline-flex items-center gap-1.5 rounded-md border border-[#bfd8f8] bg-[#eaf2ff] px-2.5 py-1 text-xs font-bold text-[#0b57d0]",children:["Questions ",i,"–",l]}),t.passageTitle&&e("p",{className:"mt-2 text-lg font-bold leading-tight text-[#0f1730]",children:t.passageTitle}),t.passageSubtitle&&e("p",{className:"mt-1 text-[15px] font-medium text-[#475569]",children:t.passageSubtitle})]}),t.passageImageUrl&&e("img",{src:t.passageImageUrl,alt:t.passageTitle||"Illustration",className:"h-20 w-32 shrink-0 rounded-lg object-contain"})]}),e("section",{className:"flex flex-col overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md",children:_(t)})]},t.groupId)})]})}