@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

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

@@ -1 +1,166 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{FileText as t,Info as a}from"lucide-react";import{EnglishCertificationQuestionCard as i}from"./EnglishCertificationQuestionCard";import{EnglishCertificationPassagePanel as r}from"./EnglishCertificationPassagePanel";import{EnglishCertificationReadingSection as n}from"./EnglishCertificationReadingSection";import{EnglishCertificationAudioPlayer as o}from"./EnglishCertificationAudioPlayer";import{EnglishCertificationInstructionBanner as l}from"./EnglishCertificationInstructionBanner";import{EnglishCertificationPartHeader as d}from"./EnglishCertificationPartHeader";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as c}from"./english-certification-theme";import{ENGLISH_CERT_STICKY_AUDIO_ATTR as p,englishCertQuestionDomId as g}from"./english-cert-scroll";import{isHtmlContent as u,stripInstruction as m}from"./grouped-question-utils";import{ResolvedImage as f}from"../../../components/common/ResolvedImage";function h(e){const s=e.articles;return Array.isArray(s)?s:[]}function x(e){return e.some(e=>Boolean(e?.content?.trim())||Boolean(e?.imageUrl))}export function EnglishCertificationGroupedQuestion({part:b,partConfig:w,answers:N,flaggedQuestions:v,onAnswerChange:I,onToggleFlag:q,isReviewMode:y=!1,isListeningPart:C=!1,partAudioUrl:T,isAudioLocked:U=!1,onAudioFirstPlay:_}){const P=w.startIndex??0,k=function(e,s){const t=e.questions[0];return(t?.questionGroup?.payload?.instructions??(s?.trim()||void 0)??t?.content?.question??"").trim()}(b,b.instructions??w.instructions),A=b.sections?.length?[(()=>{const e=b.questions[0]?.questionGroup?.payload??{},s=e.content??e.passage??"",t=m(s,k),a=e.imageUrl??e.passageImageUrl??"",i=h(e);return{groupId:b.partId,questions:b.questions,passage:t,passageTitle:e.passageTitle??e.title??"",passageSubtitle:e.subtitle??"",passageImageUrl:a,articles:i,hasPassageContent:Boolean(t.trim())||Boolean(a)||x(i)}})()]:function(e,s){const t=[],a=new Map;return e.questions.forEach(e=>{const s=e.group_id??e.id;a.has(s)||(a.set(s,[]),t.push(s)),a.get(s).push(e)}),t.map(e=>{const t=a.get(e),i=t[0]?.questionGroup?.payload??{},r=i.content??i.passage??"",n=m(r,s),o=i.imageUrl??i.passageImageUrl??"",l=h(i);return{groupId:e,questions:t,passage:n,passageTitle:i.passageTitle??i.title??"",passageSubtitle:i.subtitle??"",passageImageUrl:o,articles:l,hasPassageContent:Boolean(n.trim())||Boolean(o)||x(l)}})}(b,k);if(!A.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 B=A.some(e=>e.hasPassageContent),E=C&&Boolean(T),F=s=>b.sections?.length?e("div",{className:"flex-1 space-y-6 px-4 py-4",children:b.sections.map((t,a)=>{const i=s.questions.filter(e=>{const s=b.questions.indexOf(e);return s>=t.startIndex-P&&s<=t.endIndex-P});return i.length?e(n,{part:b,section:t,questions:i,startIndex:P,answers:N,flaggedQuestions:v,onAnswerChange:I,onToggleFlag:q,isReviewMode:y},`${s.groupId}-section-${a}`):null})}):e("div",{className:"flex-1 space-y-3 px-4 py-4",children:s.questions.map(s=>{const t=b.questions.indexOf(s)+1;return e(i,{question:s,globalQuestionNumber:P+t,answer:N[s.id],isFlagged:v.has(s.id),sharedInstruction:k,onAnswerChange:I,onToggleFlag:q,isReviewMode:y,domId:g(s.id)},s.id)})});return s("div",{className:"flex h-full flex-col gap-6 overflow-y-auto pb-4",children:[e(d,{partName:b.name,partNo:b.partNo,skill:w.category,isFullWidth:B}),e(l,{instruction:k,isListeningPart:C,isFullWidth:B}),E&&e("div",{[p]:"",className:`sticky top-0 z-20 ${c} w-full self-center`,children:e(o,{audioUrl:T,partNumber:b.partNo,isLocked:U,onFirstPlay:_})}),A.map(i=>{const n=b.questions.indexOf(i.questions[0])+P+1,o=b.questions.indexOf(i.questions[i.questions.length-1])+P+1,l=u(i.passage);return i.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(a,{className:"h-3 w-3"})}),"Questions ",n,"–",o," refer to the following passage."]})}),s("div",{className:"grid gap-4",style:{gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)"},children:[e("div",{className:"h-full max-h-[calc(100vh-220px)] min-h-0 overflow-y-auto",children:e(r,{passage:i.passage,passageTitle:i.passageTitle,passageSubtitle:i.passageSubtitle,passageImageUrl:i.passageImageUrl,articles:i.articles,passageIsHtml:l})}),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:F(i)})]})]},i.groupId):s("div",{className:`${c} 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(t,{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 ",n,"–",o]}),i.passageTitle&&e("p",{className:"mt-2 text-lg font-bold leading-tight text-[#0f1730]",children:i.passageTitle}),i.passageSubtitle&&e("p",{className:"mt-1 text-[15px] font-medium text-[#475569]",children:i.passageSubtitle})]}),i.passageImageUrl&&e(f,{src:i.passageImageUrl,alt:i.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:F(i)})]},i.groupId)})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, Info } from 'lucide-react';
+import { EnglishCertificationQuestionCard } from './EnglishCertificationQuestionCard';
+import { EnglishCertificationPassagePanel } from './EnglishCertificationPassagePanel';
+import { EnglishCertificationReadingSection } from './EnglishCertificationReadingSection';
+import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
+import { EnglishCertificationInstructionBanner } from './EnglishCertificationInstructionBanner';
+import { EnglishCertificationPartHeader } from './EnglishCertificationPartHeader';
+import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
+import { ENGLISH_CERT_STICKY_AUDIO_ATTR, englishCertQuestionDomId, } from './english-cert-scroll';
+import { isHtmlContent, stripInstruction } from './grouped-question-utils';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+/** Fixed split layout: equal-width passage / questions columns. */
+const SPLIT_VIEW_GRID = 'minmax(0, 1fr) minmax(0, 1fr)';
+/** Extracts the article list from a group payload (empty when absent). */
+function extractArticles(payload) {
+    const raw = payload.articles;
+    return Array.isArray(raw) ? raw : [];
+}
+/** True when any article carries body text or an image worth displaying. */
+function articlesHaveContent(articles) {
+    return articles.some((article) => Boolean(article?.content?.trim()) || Boolean(article?.imageUrl));
+}
+/**
+ * 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 ?? '';
+        const articles = extractArticles(payload);
+        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,
+            articles,
+            hasPassageContent: Boolean(passage.trim()) || Boolean(passageImageUrl) || articlesHaveContent(articles),
+        };
+    });
+}
+/**
+ * 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, isAudioLocked = false, onAudioFirstPlay, }) {
+    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 ?? '');
+        const articles = extractArticles(payload);
+        return {
+            groupId: part.partId,
+            questions: part.questions,
+            passage,
+            passageTitle: (payload.passageTitle ?? payload.title ?? ''),
+            passageSubtitle: (payload.subtitle ?? ''),
+            passageImageUrl,
+            articles,
+            hasPassageContent: Boolean(passage.trim()) || Boolean(passageImageUrl) || articlesHaveContent(articles),
+        };
+    };
+    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 isFullWidth = documents.some((doc) => doc.hasPassageContent);
+    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, domId: englishCertQuestionDomId(question.id) }, question.id));
+            }) }));
+    };
+    return (_jsxs("div", { className: "flex h-full flex-col gap-6 overflow-y-auto pb-4", children: [_jsx(EnglishCertificationPartHeader, { partName: part.name, partNo: part.partNo, skill: partConfig.category, isFullWidth: isFullWidth }), _jsx(EnglishCertificationInstructionBanner, { instruction: sharedInstruction, isListeningPart: isListeningPart, isFullWidth: isFullWidth }), showAudio && (_jsx("div", { [ENGLISH_CERT_STICKY_AUDIO_ATTR]: '', className: `sticky top-0 z-20 ${ENGLISH_CERT_CONTENT_WIDTH_CLASS} w-full self-center`, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: partAudioUrl, partNumber: part.partNo, isLocked: isAudioLocked, onFirstPlay: onAudioFirstPlay }) })), 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(ResolvedImage, { 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: "h-full 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, articles: document.articles, passageIsHtml: passageIsHtml }) }), _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));
+            })] }));
+}

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

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

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

@@ -1 +1,79 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Headphones as t,Info as i}from"lucide-react";import{ENGLISH_CERT_COLORS as r,ENGLISH_CERT_CONTENT_WIDTH_CLASS as l,ENGLISH_CERT_PRIMARY_GRADIENT as s}from"./english-certification-theme";import{isHtmlContent as a}from"./grouped-question-utils";export function EnglishCertificationInstructionBanner({instruction:o,isListeningPart:c=!1,isFullWidth:d=!1}){if(!o)return null;const p=c?t:i,m=a(o),h=m?o:(f=o).replace(/^\s*directions\s*[:.\\-–]?\s*/i,"").trim()||f;var f;return n("div",{className:d?"w-full":`${l} w-full self-center`,children:[n("div",{className:"overflow-hidden rounded-2xl",style:{boxShadow:"0 4px 6px -1px rgba(11,87,208,0.08), 0 12px_28px rgba(11,87,208,0.10)",border:`1px solid ${r.blue600}26`},children:[n("div",{className:"flex items-center gap-3 px-5 py-3",style:{background:s},children:[e("span",{className:"grid h-8 w-8 shrink-0 place-items-center rounded-lg",style:{background:"rgba(255,255,255,0.18)"},children:e(p,{className:"h-4 w-4 text-white",strokeWidth:2.5})}),e("span",{className:"text-[11px] font-black uppercase tracking-[0.22em] text-white/90",children:"Directions"}),e("div",{className:"ml-auto flex items-center gap-1","aria-hidden":!0,children:[.5,.35,.2].map((n,t)=>e("span",{className:"h-1.5 w-1.5 rounded-full bg-white",style:{opacity:n}},t))})]}),e("div",{className:"px-6 py-5",style:{background:"linear-gradient(160deg, #f8fbff 0%, #eef5ff 100%)"},children:m?e("div",{className:"ec-instruction-html text-[15px] leading-[1.8] text-[#0f1730]",dangerouslySetInnerHTML:{__html:h}}):e("p",{className:"text-[15px] font-semibold leading-[1.8] text-[#0f1730]",children:h})})]}),e("style",{children:`\n                /* Base paragraphs */\n                .ec-instruction-html p {\n                    margin-bottom: 0.5rem;\n                    font-size: 15px;\n                    font-weight: 600;\n                    color: #0f1730;\n                }\n                .ec-instruction-html p:last-child {\n                    margin-bottom: 0;\n                }\n\n                /* Bold labels ("Directions:", "Example:") */\n                .ec-instruction-html strong {\n                    font-weight: 700;\n                    color: ${r.blue700};\n                }\n\n                /* "Example:" paragraph — inset callout block */\n                .ec-instruction-html p:has(> strong:first-child):not(:first-child) {\n                    margin-top: 1rem;\n                    padding: 0.7rem 1rem;\n                    background: rgba(11, 87, 208, 0.06);\n                    border-left: 3px solid ${r.blue600};\n                    border-radius: 0 8px 8px 0;\n                }\n\n                /* Lines that follow inside an inset callout */\n                .ec-instruction-html p:has(> strong:first-child) ~ p {\n                    padding-left: 1rem;\n                    font-size: 14.5px;\n                    font-weight: 500;\n                    color: #1e2d4d;\n                }\n            `})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Headphones, Info } from 'lucide-react';
+import { ENGLISH_CERT_COLORS, ENGLISH_CERT_CONTENT_WIDTH_CLASS, ENGLISH_CERT_PRIMARY_GRADIENT, } from './english-certification-theme';
+import { isHtmlContent } from './grouped-question-utils';
+/**
+ * Drops a leading "Directions:" prefix (legacy plain-text format) so it isn't
+ * repeated below the styled "Directions" header. Only applied to plain text —
+ * HTML instructions (which may include a worked "Example:" section after the
+ * directions paragraph) are rendered as-is, since safely stripping just the
+ * leading label from arbitrary rich markup isn't reliable.
+ */
+function stripDirectionsPrefix(text) {
+    return text.replace(/^\s*directions\s*[:.\\-–]?\s*/i, '').trim() || text;
+}
+/**
+ * Premium branded "Directions" callout block.
+ *
+ * Design:
+ * - Gradient header strip with icon + "DIRECTIONS" label — clear visual anchor.
+ * - Cream-white body with generous padding for readability.
+ * - HTML instructions rendered as rich prose with "Example:" sections styled
+ *   as an inset callout for TOEIC-style worked examples.
+ * - Plain-text instructions get the same header but a simple prose paragraph.
+ */
+export function EnglishCertificationInstructionBanner({ instruction, isListeningPart = false, isFullWidth = false, }) {
+    if (!instruction)
+        return null;
+    const Icon = isListeningPart ? Headphones : Info;
+    const htmlInstruction = isHtmlContent(instruction);
+    const body = htmlInstruction ? instruction : stripDirectionsPrefix(instruction);
+    return (_jsxs("div", { className: isFullWidth ? 'w-full' : `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} w-full self-center`, children: [_jsxs("div", { className: "overflow-hidden rounded-2xl", style: {
+                    boxShadow: '0 4px 6px -1px rgba(11,87,208,0.08), 0 12px_28px rgba(11,87,208,0.10)',
+                    border: `1px solid ${ENGLISH_CERT_COLORS.blue600}26`,
+                }, children: [_jsxs("div", { className: "flex items-center gap-3 px-5 py-3", style: { background: ENGLISH_CERT_PRIMARY_GRADIENT }, children: [_jsx("span", { className: "grid h-8 w-8 shrink-0 place-items-center rounded-lg", style: { background: 'rgba(255,255,255,0.18)' }, children: _jsx(Icon, { className: "h-4 w-4 text-white", strokeWidth: 2.5 }) }), _jsx("span", { className: "text-[11px] font-black uppercase tracking-[0.22em] text-white/90", children: "Directions" }), _jsx("div", { className: "ml-auto flex items-center gap-1", "aria-hidden": true, children: [0.5, 0.35, 0.2].map((op, i) => (_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-white", style: { opacity: op } }, i))) })] }), _jsx("div", { className: "px-6 py-5", style: {
+                            background: 'linear-gradient(160deg, #f8fbff 0%, #eef5ff 100%)',
+                        }, children: htmlInstruction ? (
+                        /* ── Rich HTML (TOEIC-style with Example block) ────── */
+                        _jsx("div", { className: "ec-instruction-html text-[15px] leading-[1.8] text-[#0f1730]", 
+                            // The instruction HTML comes from the exam CMS and is
+                            // not user-generated, so dangerouslySetInnerHTML is safe here.
+                            dangerouslySetInnerHTML: { __html: body } })) : (
+                        /* ── Plain text ─────────────────────────────────────── */
+                        _jsx("p", { className: "text-[15px] font-semibold leading-[1.8] text-[#0f1730]", children: body })) })] }), _jsx("style", { children: `
+                /* Base paragraphs */
+                .ec-instruction-html p {
+                    margin-bottom: 0.5rem;
+                    font-size: 15px;
+                    font-weight: 600;
+                    color: #0f1730;
+                }
+                .ec-instruction-html p:last-child {
+                    margin-bottom: 0;
+                }
+
+                /* Bold labels ("Directions:", "Example:") */
+                .ec-instruction-html strong {
+                    font-weight: 700;
+                    color: ${ENGLISH_CERT_COLORS.blue700};
+                }
+
+                /* "Example:" paragraph — inset callout block */
+                .ec-instruction-html p:has(> strong:first-child):not(:first-child) {
+                    margin-top: 1rem;
+                    padding: 0.7rem 1rem;
+                    background: rgba(11, 87, 208, 0.06);
+                    border-left: 3px solid ${ENGLISH_CERT_COLORS.blue600};
+                    border-radius: 0 8px 8px 0;
+                }
+
+                /* Lines that follow inside an inset callout */
+                .ec-instruction-html p:has(> strong:first-child) ~ p {
+                    padding-left: 1rem;
+                    font-size: 14.5px;
+                    font-weight: 500;
+                    color: #1e2d4d;
+                }
+            ` })] }));
+}

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

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

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

@@ -1 +1,79 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t}from"react";import{cn as d}from"../../../shared/lib/utils";import{Check as a,CheckCircle2 as o,X as i,XCircle as l}from"lucide-react";export function EnglishCertificationOptionSelector({options:n,selectedOptionId:s,onSelect:c,disabled:b=!1,isReviewMode:h=!1,correctOptionId:x,variant:p="cards"}){const f=t([]),g=n.findIndex(e=>e.id===s),m=g>=0?g:0,w=(e,r)=>{if(b)return;let t;switch(e.key){case"ArrowRight":case"ArrowDown":t=(r+1)%n.length;break;case"ArrowLeft":case"ArrowUp":t=(r-1+n.length)%n.length;break;default:return}e.preventDefault();const d=n[t];c(d.id),f.current[t]?.focus()};return e("div","compact"===p?{className:"flex flex-col gap-1",role:"radiogroup",children:n.map((t,a)=>{const i=t.id===s,n=h&&t.id===x,p=h&&i&&t.id!==x;return r("button",{ref:e=>{f.current[a]=e},type:"button",role:"radio","aria-checked":i,disabled:b,tabIndex:a===m?0:-1,onClick:()=>!b&&c(t.id),onKeyDown:e=>w(e,a),className:d("flex items-center gap-2.5 rounded-md border border-transparent px-2.5 py-1.5 text-left text-base transition-all","hover:border-[#c8def7] hover:bg-[#f4f9ff]",i&&!h&&"border-[#99c5f8] bg-[#eff7ff] shadow-[inset_0_0_0_1px_rgba(17,103,232,0.08)]",n&&"border-[#b9edc8] bg-[#ddf8e7]",p&&"border-red-300 bg-red-50",b&&"cursor-not-allowed opacity-60"),children:[e("span",{className:d("grid h-4 w-4 shrink-0 place-items-center rounded-full border-2 border-[#94a3b8]",i&&!h&&"border-[#0b57d0]",n&&"border-[#22c55e]",p&&"border-red-500"),children:i&&e("span",{className:d("h-2 w-2 rounded-full bg-[#0b57d0]",n&&"bg-[#22c55e]",p&&"bg-red-500")})}),e("span",{className:"font-bold text-[#23304c]",children:t.label}),e("span",{className:"flex-1 leading-snug text-[#1e293b]",children:t.text}),h&&n&&e(o,{className:"h-4 w-4 shrink-0 text-[#22c55e]","aria-label":"Correct"}),h&&p&&e(l,{className:"h-4 w-4 shrink-0 text-red-500","aria-label":"Incorrect"})]},t.id)})}:"list"===p?{className:"flex flex-col gap-3",role:"radiogroup",children:n.map((t,o)=>{const l=t.id===s,n=h&&t.id===x,p=h&&l&&t.id!==x,g=l&&!h;return r("button",{ref:e=>{f.current[o]=e},type:"button",role:"radio","aria-checked":l,disabled:b,tabIndex:o===m?0:-1,onClick:()=>!b&&c(t.id),onKeyDown:e=>w(e,o),className:d("flex items-center gap-4 rounded-2xl border-2 p-4 text-left transition-all","border-[#e5eefb] bg-white shadow-[0_5px_16px_rgba(13,71,161,0.08)]","hover:border-[#bfd8f8] hover:bg-[#fbfdff] hover:shadow-[0_10px_22px_rgba(13,71,161,0.14)]",g&&"border-transparent text-white shadow-[0_16px_30px_rgba(11,87,208,0.25)]",n&&"border-[#22c55e] bg-[#ddf8e7]",p&&"border-red-400 bg-red-50",b&&"cursor-not-allowed opacity-60"),style:g?{background:"linear-gradient(180deg, #1f7cff, #0b57d0)"}:void 0,children:[e("span",{className:d("grid h-11 w-11 shrink-0 place-items-center rounded-full border-2 text-lg font-black transition-colors","border-[#bfd8f8] bg-[#eef5ff] text-[#0b57d0]",g&&"border-white/70 bg-white/15 text-white",n&&"border-[#22c55e] bg-white text-[#22c55e]",p&&"border-red-500 bg-white text-red-500"),children:t.label}),e("span",{className:d("flex-1 text-[15px] font-semibold leading-relaxed text-[#0f1730]",g&&"text-white",n&&"text-[#15803d]",p&&"text-red-700"),children:t.text}),(g||n)&&e("span",{className:"grid h-7 w-7 shrink-0 place-items-center rounded-full bg-white text-[#0b57d0] shadow-[0_2px_6px_rgba(11,87,208,0.25)]",children:e(a,{className:"h-4 w-4",strokeWidth:3})}),p&&e("span",{className:"grid h-7 w-7 shrink-0 place-items-center rounded-full bg-white text-red-500 shadow-[0_2px_6px_rgba(239,68,68,0.25)]",children:e(i,{className:"h-4 w-4",strokeWidth:3})})]},t.id)})}:{className:"grid gap-4 sm:gap-5",style:{gridTemplateColumns:`repeat(${Math.min(n.length,4)}, minmax(0, 1fr))`},role:"radiogroup",children:n.map((t,o)=>{const l=t.id===s,n=h&&t.id===x,p=h&&l&&t.id!==x,g=l&&!h;return r("button",{ref:e=>{f.current[o]=e},type:"button",role:"radio","aria-checked":l,disabled:b,tabIndex:o===m?0:-1,onClick:()=>!b&&c(t.id),onKeyDown:e=>w(e,o),className:d("relative flex min-h-[104px] flex-col items-center justify-center rounded-2xl border-2 p-3 transition-all","border-[#e5eefb] bg-white shadow-[0_5px_16px_rgba(13,71,161,0.08)]","hover:-translate-y-0.5 hover:border-[#bfd8f8] hover:shadow-[0_10px_22px_rgba(13,71,161,0.14)]",g&&"border-transparent text-white shadow-[0_16px_30px_rgba(11,87,208,0.25)] hover:-translate-y-0.5",n&&"border-[#22c55e] bg-[#ddf8e7]",p&&"border-red-400 bg-red-50",b&&"cursor-not-allowed opacity-60 hover:translate-y-0"),style:g?{background:"linear-gradient(180deg, #1f7cff, #0b57d0)"}:void 0,children:[e("span",{className:d("grid h-[52px] w-[52px] place-items-center rounded-full border-2 text-2xl font-black transition-colors","border-[#bfd8f8] bg-[#eef5ff] text-[#0b57d0]",g&&"border-white/70 bg-white/15 text-white",n&&"border-[#22c55e] bg-white text-[#22c55e]",p&&"border-red-500 bg-white text-red-500"),children:t.label}),t.text&&e("span",{className:d("mt-2 text-center text-sm font-semibold leading-snug text-[#0f1730]",g&&"text-white",n&&"text-[#15803d]",p&&"text-red-700"),children:t.text}),(g||n)&&e("span",{className:"absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full bg-white text-[#0b57d0] shadow-[0_2px_6px_rgba(11,87,208,0.25)]",children:e(a,{className:"h-3.5 w-3.5",strokeWidth:3})}),p&&e("span",{className:"absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full bg-white text-red-500 shadow-[0_2px_6px_rgba(239,68,68,0.25)]",children:e(i,{className:"h-3.5 w-3.5",strokeWidth:3})})]},t.id)})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from '../../../shared/lib/utils';
+import { Check, CheckCircle2, X, XCircle } from 'lucide-react';
+/**
+ * Shared A–D answer selector for all English Certification question types.
+ *
+ * Renders either large branded cards or compact rows, and shows
+ * correct/incorrect indicators in review mode.
+ */
+export function EnglishCertificationOptionSelector({ options, selectedOptionId, onSelect, disabled = false, isReviewMode = false, correctOptionId, variant = 'cards', }) {
+    const buttonRefs = useRef([]);
+    // Roving tabindex: only the selected option (or the first, if none selected)
+    // is in the tab order; arrow keys move focus + selection between options,
+    // matching native <input type="radio"> group behavior.
+    const selectedIndex = options.findIndex((option) => option.id === selectedOptionId);
+    const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    const handleKeyDown = (event, index) => {
+        if (disabled)
+            return;
+        let nextIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = (index + 1) % options.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex = (index - 1 + options.length) % options.length;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const nextOption = options[nextIndex];
+        onSelect(nextOption.id);
+        buttonRefs.current[nextIndex]?.focus();
+    };
+    if (variant === 'compact') {
+        return (_jsx("div", { className: "flex flex-col gap-1", role: "radiogroup", children: options.map((option, index) => {
+                const isSelected = option.id === selectedOptionId;
+                const isCorrect = isReviewMode && option.id === correctOptionId;
+                const isWrong = isReviewMode && isSelected && option.id !== correctOptionId;
+                return (_jsxs("button", { ref: (el) => {
+                        buttonRefs.current[index] = el;
+                    }, type: "button", role: "radio", "aria-checked": isSelected, disabled: disabled, tabIndex: index === tabbableIndex ? 0 : -1, onClick: () => !disabled && onSelect(option.id), onKeyDown: (event) => handleKeyDown(event, index), className: cn('flex items-center gap-2.5 rounded-md border border-transparent px-2.5 py-1.5 text-left text-base transition-all', 'hover:border-[#c8def7] hover:bg-[#f4f9ff]', isSelected &&
+                        !isReviewMode &&
+                        'border-[#99c5f8] bg-[#eff7ff] shadow-[inset_0_0_0_1px_rgba(17,103,232,0.08)]', isCorrect && 'border-[#b9edc8] bg-[#ddf8e7]', isWrong && 'border-red-300 bg-red-50', disabled && 'cursor-not-allowed opacity-60'), children: [_jsx("span", { className: cn('grid h-4 w-4 shrink-0 place-items-center rounded-full border-2 border-[#94a3b8]', isSelected && !isReviewMode && 'border-[#0b57d0]', isCorrect && 'border-[#22c55e]', isWrong && 'border-red-500'), children: isSelected && (_jsx("span", { className: cn('h-2 w-2 rounded-full bg-[#0b57d0]', isCorrect && 'bg-[#22c55e]', isWrong && 'bg-red-500') })) }), _jsx("span", { className: "font-bold text-[#23304c]", children: option.label }), _jsx("span", { className: "flex-1 leading-snug text-[#1e293b]", children: option.text }), isReviewMode && isCorrect && (_jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-[#22c55e]", "aria-label": "Correct" })), isReviewMode && isWrong && (_jsx(XCircle, { className: "h-4 w-4 shrink-0 text-red-500", "aria-label": "Incorrect" }))] }, option.id));
+            }) }));
+    }
+    if (variant === 'list') {
+        return (_jsx("div", { className: "flex flex-col gap-3", role: "radiogroup", children: options.map((option, index) => {
+                const isSelected = option.id === selectedOptionId;
+                const isCorrect = isReviewMode && option.id === correctOptionId;
+                const isWrong = isReviewMode && isSelected && option.id !== correctOptionId;
+                const isActive = isSelected && !isReviewMode;
+                return (_jsxs("button", { ref: (el) => {
+                        buttonRefs.current[index] = el;
+                    }, type: "button", role: "radio", "aria-checked": isSelected, disabled: disabled, tabIndex: index === tabbableIndex ? 0 : -1, onClick: () => !disabled && onSelect(option.id), onKeyDown: (event) => handleKeyDown(event, index), className: cn('flex items-center gap-4 rounded-2xl border-2 p-4 text-left transition-all', 'border-[#e5eefb] bg-white shadow-[0_5px_16px_rgba(13,71,161,0.08)]', 'hover:border-[#bfd8f8] hover:bg-[#fbfdff] hover:shadow-[0_10px_22px_rgba(13,71,161,0.14)]', isActive &&
+                        'border-transparent text-white shadow-[0_16px_30px_rgba(11,87,208,0.25)]', isCorrect && 'border-[#22c55e] bg-[#ddf8e7]', isWrong && 'border-red-400 bg-red-50', disabled && 'cursor-not-allowed opacity-60'), style: isActive
+                        ? { background: 'linear-gradient(180deg, #1f7cff, #0b57d0)' }
+                        : undefined, children: [_jsx("span", { className: cn('grid h-11 w-11 shrink-0 place-items-center rounded-full border-2 text-lg font-black transition-colors', 'border-[#bfd8f8] bg-[#eef5ff] text-[#0b57d0]', isActive && 'border-white/70 bg-white/15 text-white', isCorrect && 'border-[#22c55e] bg-white text-[#22c55e]', isWrong && 'border-red-500 bg-white text-red-500'), children: option.label }), _jsx("span", { className: cn('flex-1 text-[15px] font-semibold leading-relaxed text-[#0f1730]', isActive && 'text-white', isCorrect && 'text-[#15803d]', isWrong && 'text-red-700'), children: option.text }), (isActive || isCorrect) && (_jsx("span", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full bg-white text-[#0b57d0] shadow-[0_2px_6px_rgba(11,87,208,0.25)]", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) })), isWrong && (_jsx("span", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full bg-white text-red-500 shadow-[0_2px_6px_rgba(239,68,68,0.25)]", children: _jsx(X, { className: "h-4 w-4", strokeWidth: 3 }) }))] }, option.id));
+            }) }));
+    }
+    // 'cards' variant — large A–D answer cards.
+    return (_jsx("div", { className: "grid gap-4 sm:gap-5", style: { gridTemplateColumns: `repeat(${Math.min(options.length, 4)}, minmax(0, 1fr))` }, role: "radiogroup", children: options.map((option, index) => {
+            const isSelected = option.id === selectedOptionId;
+            const isCorrect = isReviewMode && option.id === correctOptionId;
+            const isWrong = isReviewMode && isSelected && option.id !== correctOptionId;
+            const isActive = isSelected && !isReviewMode;
+            return (_jsxs("button", { ref: (el) => {
+                    buttonRefs.current[index] = el;
+                }, type: "button", role: "radio", "aria-checked": isSelected, disabled: disabled, tabIndex: index === tabbableIndex ? 0 : -1, onClick: () => !disabled && onSelect(option.id), onKeyDown: (event) => handleKeyDown(event, index), className: cn('relative flex min-h-[104px] flex-col items-center justify-center rounded-2xl border-2 p-3 transition-all', 'border-[#e5eefb] bg-white shadow-[0_5px_16px_rgba(13,71,161,0.08)]', 'hover:-translate-y-0.5 hover:border-[#bfd8f8] hover:shadow-[0_10px_22px_rgba(13,71,161,0.14)]', isActive &&
+                    'border-transparent text-white shadow-[0_16px_30px_rgba(11,87,208,0.25)] hover:-translate-y-0.5', isCorrect && 'border-[#22c55e] bg-[#ddf8e7]', isWrong && 'border-red-400 bg-red-50', disabled && 'cursor-not-allowed opacity-60 hover:translate-y-0'), style: isActive
+                    ? { background: 'linear-gradient(180deg, #1f7cff, #0b57d0)' }
+                    : undefined, children: [_jsx("span", { className: cn('grid h-[52px] w-[52px] place-items-center rounded-full border-2 text-2xl font-black transition-colors', 'border-[#bfd8f8] bg-[#eef5ff] text-[#0b57d0]', isActive && 'border-white/70 bg-white/15 text-white', isCorrect && 'border-[#22c55e] bg-white text-[#22c55e]', isWrong && 'border-red-500 bg-white text-red-500'), children: option.label }), option.text && (_jsx("span", { className: cn('mt-2 text-center text-sm font-semibold leading-snug text-[#0f1730]', isActive && 'text-white', isCorrect && 'text-[#15803d]', isWrong && 'text-red-700'), children: option.text })), (isActive || isCorrect) && (_jsx("span", { className: "absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full bg-white text-[#0b57d0] shadow-[0_2px_6px_rgba(11,87,208,0.25)]", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) })), isWrong && (_jsx("span", { className: "absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full bg-white text-red-500 shadow-[0_2px_6px_rgba(239,68,68,0.25)]", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }))] }, option.id));
+        }) }));
+}

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

@@ -1 +1,47 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{BookOpen as l,Headphones as t,Pencil as r,Mic as n}from"lucide-react";import{ENGLISH_CERT_COLORS as i,ENGLISH_CERT_CONTENT_WIDTH_CLASS as c,ENGLISH_CERT_PRIMARY_GRADIENT as s}from"./english-certification-theme";export function EnglishCertificationPartHeader({partName:o,partNo:d,skill:p,subtitle:h,isFullWidth:u=!1}){if(!o&&void 0===d)return null;const{Icon:b,label:x}=function(e){switch((e??"").toUpperCase()){case"LISTENING":return{Icon:t,label:"Listening",color:"#0b57d0"};case"READING":return{Icon:l,label:"Reading",color:"#0f6cbf"};case"WRITING":return{Icon:r,label:"Writing",color:"#1255a0"};case"SPEAKING":return{Icon:n,label:"Speaking",color:"#0d4fa3"};default:return{Icon:l,label:null,color:i.blue700}}}(p),g=o?o.replace(/^part\s*/i,"").toUpperCase():String(d??""),m=d??o?.match(/\d+/)?.[0]??"";return e("div",{className:u?"w-full":`${c} w-full self-center`,children:a("div",{className:"relative overflow-hidden rounded-2xl",style:{background:s,boxShadow:"0 8px 32px rgba(11,87,208,0.28), 0 2px 8px rgba(11,87,208,0.16)"},children:[e("span",{"aria-hidden":!0,className:"pointer-events-none absolute -right-4 -top-3 select-none font-black leading-none text-white/10",style:{fontSize:"clamp(80px, 12vw, 110px)"},children:m}),e("div",{"aria-hidden":!0,className:"pointer-events-none absolute -left-12 -top-12 h-48 w-48 rounded-full",style:{background:"radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%)"}}),a("div",{className:"relative flex items-center gap-5 px-7 py-5",children:[e("div",{className:"grid h-14 w-14 shrink-0 place-items-center rounded-2xl shadow-[0_4px_16px_rgba(0,0,0,0.20)]",style:{background:"rgba(255,255,255,0.18)",backdropFilter:"blur(8px)"},children:e(b,{className:"h-6 w-6 text-white",strokeWidth:2})}),a("div",{className:"min-w-0 flex-1",children:[x&&e("span",{className:"mb-1.5 inline-flex items-center gap-1.5 rounded-full px-3 py-0.5 text-[10px] font-black uppercase tracking-[0.2em]",style:{background:"rgba(255,255,255,0.20)",color:"rgba(255,255,255,0.90)"},children:x}),a("p",{className:"text-2xl font-black leading-none tracking-tight text-white drop-shadow-sm",children:["Part"," ",e("span",{className:"rounded-lg px-2.5 py-0.5 text-[22px] font-black",style:{background:"rgba(255,255,255,0.22)"},children:g})]}),h&&e("p",{className:"mt-1 text-[13px] font-medium text-white/75",children:h})]})]}),e("svg",{"aria-hidden":!0,className:"block w-full",height:"18",viewBox:"0 0 940 18",preserveAspectRatio:"none",fill:"none",children:e("path",{d:"M0 8C160 0 300 16 470 8C640 0 780 16 940 8V18H0V8Z",fill:"rgba(255,255,255,0.10)"})})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookOpen, Headphones, Pencil, Mic } from 'lucide-react';
+import { ENGLISH_CERT_COLORS, ENGLISH_CERT_CONTENT_WIDTH_CLASS, ENGLISH_CERT_PRIMARY_GRADIENT, } from './english-certification-theme';
+function skillMeta(skill) {
+    switch ((skill ?? '').toUpperCase()) {
+        case 'LISTENING':
+            return { Icon: Headphones, label: 'Listening', color: '#0b57d0' };
+        case 'READING':
+            return { Icon: BookOpen, label: 'Reading', color: '#0f6cbf' };
+        case 'WRITING':
+            return { Icon: Pencil, label: 'Writing', color: '#1255a0' };
+        case 'SPEAKING':
+            return { Icon: Mic, label: 'Speaking', color: '#0d4fa3' };
+        default:
+            return { Icon: BookOpen, label: null, color: ENGLISH_CERT_COLORS.blue700 };
+    }
+}
+/**
+ * Premium standalone Part title header for English Certification exams.
+ *
+ * Design decisions:
+ * - Full-bleed gradient card matching the brand palette (never plain text).
+ * - Large ghost number in the background gives spatial identity.
+ * - Skill badge + icon communicate exam section at a glance.
+ * - Decorative wave SVG and a thin accent bar at the bottom tie it
+ *   to the footer / audio-player language.
+ */
+export function EnglishCertificationPartHeader({ partName, partNo, skill, subtitle, isFullWidth = false, }) {
+    if (!partName && partNo === undefined)
+        return null;
+    const { Icon, label } = skillMeta(skill);
+    // Normalise display: strip leading "PART " so we can control formatting.
+    const displayName = partName
+        ? partName.replace(/^part\s*/i, '').toUpperCase()
+        : String(partNo ?? '');
+    const bigNumber = partNo ?? (partName?.match(/\d+/)?.[0] ?? '');
+    return (_jsx("div", { className: isFullWidth ? 'w-full' : `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} w-full self-center`, children: _jsxs("div", { className: "relative overflow-hidden rounded-2xl", style: {
+                background: ENGLISH_CERT_PRIMARY_GRADIENT,
+                boxShadow: '0 8px 32px rgba(11,87,208,0.28), 0 2px 8px rgba(11,87,208,0.16)',
+            }, children: [_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute -right-4 -top-3 select-none font-black leading-none text-white/10", style: { fontSize: 'clamp(80px, 12vw, 110px)' }, children: bigNumber }), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute -left-12 -top-12 h-48 w-48 rounded-full", style: {
+                        background: 'radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%)',
+                    } }), _jsxs("div", { className: "relative flex items-center gap-5 px-7 py-5", children: [_jsx("div", { className: "grid h-14 w-14 shrink-0 place-items-center rounded-2xl shadow-[0_4px_16px_rgba(0,0,0,0.20)]", style: { background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(8px)' }, children: _jsx(Icon, { className: "h-6 w-6 text-white", strokeWidth: 2 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [label && (_jsx("span", { className: "mb-1.5 inline-flex items-center gap-1.5 rounded-full px-3 py-0.5 text-[10px] font-black uppercase tracking-[0.2em]", style: {
+                                        background: 'rgba(255,255,255,0.20)',
+                                        color: 'rgba(255,255,255,0.90)',
+                                    }, children: label })), _jsxs("p", { className: "text-2xl font-black leading-none tracking-tight text-white drop-shadow-sm", children: ["Part", ' ', _jsx("span", { className: "rounded-lg px-2.5 py-0.5 text-[22px] font-black", style: { background: 'rgba(255,255,255,0.22)' }, children: displayName })] }), subtitle && (_jsx("p", { className: "mt-1 text-[13px] font-medium text-white/75", children: subtitle }))] })] }), _jsx("svg", { "aria-hidden": true, className: "block w-full", height: "18", viewBox: "0 0 940 18", preserveAspectRatio: "none", fill: "none", children: _jsx("path", { d: "M0 8C160 0 300 16 470 8C640 0 780 16 940 8V18H0V8Z", fill: "rgba(255,255,255,0.10)" }) })] }) }));
+}