@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.3

package/dist/components/themes/cambridge-yle/CambridgeYleHeader.js

@@ -1,11 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import { CambridgeYleTimer } from './CambridgeYleTimer';
-import { Loader2 } from 'lucide-react';
-import arrowLeftImg from '../summer-sky/assets/images/arrow-left.png';
-import titleLogoImg from '../summer-sky/assets/images/title-logo.png';
-import submitImg from '../summer-sky/assets/images/submit.png';
-import hasAnsweredImg from '../summer-sky/assets/images/has_answered.png';
-export function CambridgeYleHeader({ totalQuestions, answeredCount, remainingSeconds, isSubmitting, isCameraActive, onSubmit, onClose, }) {
-    return (_jsxs("header", { className: "w-full bg-transparent px-4 pt-4 pb-0 sm:px-8 relative flex flex-wrap sm:flex-nowrap items-start sm:items-center justify-between z-50", children: [_jsx("div", { onClick: onClose, className: "cursor-pointer hover:scale-105 active:scale-95 transition-transform shrink-0", title: "Tho\u00E1t b\u00E0i thi", children: _jsx(Image, { src: arrowLeftImg, alt: "Quay l\u1EA1i", className: "w-[50px] sm:w-[80px]" }) }), _jsx("div", { className: "absolute left-1/2 -translate-x-1/2 -top-2 sm:top-0 pointer-events-none hidden sm:block", children: _jsx(Image, { src: titleLogoImg, alt: "Title Logo", className: "w-[200px] sm:w-[320px] h-auto" }) }), _jsx("div", { className: "sm:hidden flex-1 flex justify-center pointer-events-none", children: _jsx(Image, { src: titleLogoImg, alt: "Title Logo", className: "w-[150px] h-auto -mt-2" }) }), _jsxs("div", { className: "absolute right-4 sm:right-8 top-8 flex flex-row items-center gap-3 sm:gap-4 z-[100]", children: [isCameraActive && (_jsx("div", { className: "flex items-center justify-center rounded-full bg-white/20 p-2 backdrop-blur-sm shrink-0", title: "Camera \u0111ang ghi h\u00ECnh", children: _jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-red-500" }) })), _jsx(CambridgeYleTimer, { remainingSeconds: remainingSeconds, totalQuestions: totalQuestions, answeredCount: answeredCount }), _jsxs("div", { className: "flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] bg-[#FF9900] shadow-[0_4px_20px_rgba(0,0,0,0.25)] border-none shrink-0", title: "S\u1ED1 c\u00E2u h\u1ECFi \u0111\u00E3 ho\u00E0n th\u00E0nh", children: [_jsx(Image, { src: hasAnsweredImg, alt: "Progress", width: 75, height: 75, className: "w-[50px] sm:w-[65px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10" }), _jsxs("span", { className: "flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]", style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif', textShadow: '0 2px 4px rgba(0,0,0,0.2)' }, children: [answeredCount, "/", totalQuestions] })] }), _jsxs("button", { onClick: onSubmit, disabled: isSubmitting, className: `group cursor-pointer flex items-center h-[40px] sm:h-[50px] w-[130px] sm:w-[170px] rounded-[33.5px] shadow-[0_4px_20px_rgba(0,0,0,0.25)] transition-all duration-300 hover:scale-105 active:scale-95 disabled:pointer-events-none disabled:opacity-60 border-none shrink-0 ${isSubmitting ? 'bg-slate-400' : 'bg-[#16CA3B] hover:bg-[#15b736]'}`, children: [_jsx(Image, { src: submitImg, alt: "Submit", width: 75, height: 75, className: "w-[50px] sm:w-[65px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none transition-transform duration-300 group-hover:scale-110 z-10" }), isSubmitting ? (_jsx("div", { className: "flex-1 flex justify-center pr-[10px] sm:pr-[16px]", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-white" }) })) : (_jsx("span", { className: "flex-1 text-center font-bold text-[18px] sm:text-[20px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]", style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif', textShadow: '0 2px 4px rgba(0,0,0,0.2)' }, children: "N\u1ED9p b\u00E0i" }))] })] })] }));
-}
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import t from"next/image";import{CambridgeYleTimer as r}from"./CambridgeYleTimer";import{Loader2 as a}from"lucide-react";import i from"../summer-sky/assets/images/arrow-left.png";import n from"../summer-sky/assets/images/title-logo.png";import o from"../summer-sky/assets/images/submit.png";import m from"../summer-sky/assets/images/has_answered.png";export function CambridgeYleHeader({totalQuestions:l,answeredCount:p,remainingSeconds:x,isSubmitting:d,isCameraActive:c,onSubmit:h,onClose:u}){return s("header",{className:"w-full bg-transparent px-4 pt-4 pb-0 sm:px-8 relative flex flex-wrap sm:flex-nowrap items-start sm:items-center justify-between z-50",children:[e("div",{onClick:u,className:"cursor-pointer hover:scale-105 active:scale-95 transition-transform shrink-0",title:"Thoát bài thi",children:e(t,{src:i,alt:"Quay lại",className:"w-[50px] sm:w-[80px]"})}),e("div",{className:"absolute left-1/2 -translate-x-1/2 -top-2 sm:top-0 pointer-events-none hidden sm:block",children:e(t,{src:n,alt:"Title Logo",className:"w-[200px] sm:w-[320px] h-auto"})}),e("div",{className:"sm:hidden flex-1 flex justify-center pointer-events-none",children:e(t,{src:n,alt:"Title Logo",className:"w-[150px] h-auto -mt-2"})}),s("div",{className:"absolute right-4 sm:right-8 top-8 flex flex-row items-center gap-3 sm:gap-4 z-[100]",children:[c&&e("div",{className:"flex items-center justify-center rounded-full bg-white/20 p-2 backdrop-blur-sm shrink-0",title:"Camera đang ghi hình",children:e("div",{className:"h-3 w-3 animate-pulse rounded-full bg-red-500"})}),e(r,{remainingSeconds:x,totalQuestions:l,answeredCount:p}),s("div",{className:"flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] bg-[#FF9900] shadow-[0_4px_20px_rgba(0,0,0,0.25)] border-none shrink-0",title:"Số câu hỏi đã hoàn thành",children:[e(t,{src:m,alt:"Progress",width:75,height:75,className:"w-[50px] sm:w-[65px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10"}),s("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',textShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:[p,"/",l]})]}),s("button",{onClick:h,disabled:d,className:"group cursor-pointer flex items-center h-[40px] sm:h-[50px] w-[130px] sm:w-[170px] rounded-[33.5px] shadow-[0_4px_20px_rgba(0,0,0,0.25)] transition-all duration-300 hover:scale-105 active:scale-95 disabled:pointer-events-none disabled:opacity-60 border-none shrink-0 "+(d?"bg-slate-400":"bg-[#16CA3B] hover:bg-[#15b736]"),children:[e(t,{src:o,alt:"Submit",width:75,height:75,className:"w-[50px] sm:w-[65px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none transition-transform duration-300 group-hover:scale-110 z-10"}),d?e("div",{className:"flex-1 flex justify-center pr-[10px] sm:pr-[16px]",children:e(a,{className:"h-6 w-6 animate-spin text-white"})}):e("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[20px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',textShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:"Nộp bài"})]})]})]})}

package/dist/components/themes/cambridge-yle/CambridgeYleInstructionBanner.js

@@ -1,9 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Info, Megaphone } from 'lucide-react';
-export default function CambridgeYleInstructionBanner({ instruction, instructions, hasExample = false, children, isReviewMode = false, }) {
-    if (isReviewMode)
-        return null;
-    const hasInstructionsList = instructions && instructions.length > 0;
-    return (_jsxs("div", { className: "shrink-0 space-y-3 px-2 sm:px-6 mb-2 sm:mb-4", children: [instruction && (_jsxs("div", { className: "flex w-full items-center gap-4 sm:gap-5 rounded-[24px] bg-[#F8FBFF] border-2 border-dashed border-blue-300 px-5 py-4 transition-all hover:bg-blue-50/50", children: [_jsx("div", { className: "flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 rounded-[16px] bg-[#0070FF] shadow-[4px_4px_0px_rgba(191,219,254,1)] shrink-0 -rotate-6 transition-transform hover:rotate-0", children: _jsx(Megaphone, { className: "h-6 w-6 sm:h-7 sm:w-7 text-white", strokeWidth: 2.5 }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center", children: _jsxs("p", { className: "text-[15px] sm:text-[18px] font-black uppercase tracking-wide text-[#002868] leading-snug", style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif' }, children: [instruction, hasExample && _jsx("span", { className: "inline-block text-[#0070FF] ml-2 text-[14px] sm:text-[16px] font-bold tracking-normal bg-blue-100 px-3 py-0.5 rounded-full align-middle -mt-1", children: "THERE IS ONE EXAMPLE" })] }) })] })), children, hasInstructionsList && (_jsx("div", { className: "rounded-lg border border-blue-200 bg-white p-4 shadow-sm", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("h4", { className: "flex items-center gap-2 font-semibold text-blue-900", children: [_jsx(Info, { className: "h-4 w-4" }), "Instructions"] }), _jsx("ol", { className: "list-inside list-decimal space-y-1.5 text-sm text-gray-700", children: instructions.map((item, index) => (_jsx("li", { className: "leading-relaxed", children: item }, index))) })] }) }))] }));
-}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Info as t,Megaphone as l}from"lucide-react";export default function a({instruction:a,instructions:i,hasExample:r=!1,children:n,isReviewMode:d=!1}){if(d)return null;const c=i&&i.length>0;return s("div",{className:"shrink-0 space-y-3 px-2 sm:px-6 mb-2 sm:mb-4",children:[a&&s("div",{className:"flex w-full items-center gap-4 sm:gap-5 rounded-[24px] bg-[#F8FBFF] border-2 border-dashed border-blue-300 px-5 py-4 transition-all hover:bg-blue-50/50",children:[e("div",{className:"flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 rounded-[16px] bg-[#0070FF] shadow-[4px_4px_0px_rgba(191,219,254,1)] shrink-0 -rotate-6 transition-transform hover:rotate-0",children:e(l,{className:"h-6 w-6 sm:h-7 sm:w-7 text-white",strokeWidth:2.5})}),e("div",{className:"flex-1 flex flex-col justify-center",children:s("p",{className:"text-[15px] sm:text-[18px] font-black uppercase tracking-wide text-[#002868] leading-snug",style:{fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif'},children:[a,r&&e("span",{className:"inline-block text-[#0070FF] ml-2 text-[14px] sm:text-[16px] font-bold tracking-normal bg-blue-100 px-3 py-0.5 rounded-full align-middle -mt-1",children:"THERE IS ONE EXAMPLE"})]})})]}),n,c&&e("div",{className:"rounded-lg border border-blue-200 bg-white p-4 shadow-sm",children:s("div",{className:"space-y-3",children:[s("h4",{className:"flex items-center gap-2 font-semibold text-blue-900",children:[e(t,{className:"h-4 w-4"}),"Instructions"]}),e("ol",{className:"list-inside list-decimal space-y-1.5 text-sm text-gray-700",children:i.map((s,t)=>e("li",{className:"leading-relaxed",children:s},t))})]})})]})}

package/dist/components/themes/cambridge-yle/CambridgeYleNavButton.js

@@ -1,13 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Image from 'next/image';
-import prevBtnImg from '../summer-sky/assets/images/prev-question-btn.png';
-import nextBtnImg from '../summer-sky/assets/images/next-question-btn.png';
-export function CambridgeYleNavButton({ direction, onClick, disabled = false, }) {
-    const imgSrc = direction === 'prev' ? prevBtnImg : nextBtnImg;
-    const altText = direction === 'prev' ? 'Câu trước' : 'Câu tiếp theo';
-    return (_jsx("button", { onClick: onClick, disabled: disabled, className: `flex items-center justify-center transition-transform outline-none bg-transparent border-none
-        ${disabled
-            ? 'cursor-not-allowed opacity-45 grayscale pointer-events-none'
-            : 'cursor-pointer hover:scale-[1.05] active:scale-[0.95]'}
-      `, "aria-label": altText, title: disabled ? 'Không thể chuyển câu' : undefined, children: _jsx(Image, { src: imgSrc, alt: altText, className: "w-16 h-auto sm:w-20" }) }));
-}
+import{jsx as e}from"react/jsx-runtime";import t from"next/image";import n from"../summer-sky/assets/images/prev-question-btn.png";import r from"../summer-sky/assets/images/next-question-btn.png";export function CambridgeYleNavButton({direction:s,onClick:o,disabled:i=!1}){const a="prev"===s?"Câu trước":"Câu tiếp theo";return e("button",{onClick:o,disabled:i,className:`flex items-center justify-center transition-transform outline-none bg-transparent border-none\n        ${i?"cursor-not-allowed opacity-45 grayscale pointer-events-none":"cursor-pointer hover:scale-[1.05] active:scale-[0.95]"}\n      `,"aria-label":a,title:i?"Không thể chuyển câu":void 0,children:e(t,{src:"prev"===s?n:r,alt:a,className:"w-16 h-auto sm:w-20"})})}

package/dist/components/themes/cambridge-yle/CambridgeYlePartBanner.js

@@ -1,8 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import backgroundTitleImg from '../summer-sky/assets/images/background_title.png';
-export default function CambridgeYlePartBanner({ partName, isReviewMode = false, }) {
-    if (!partName || isReviewMode)
-        return null;
-    return (_jsxs("div", { className: "relative mx-auto flex shrink-0 items-center justify-center w-[260px] sm:w-[320px] h-[55px] sm:h-[70px] drop-shadow-[0_4px_6px_rgba(0,0,0,0.3)] mb-1 sm:mb-2 mt-0", children: [_jsx(Image, { src: backgroundTitleImg, alt: "Part Badge", fill: true, className: "object-fill pointer-events-none" }), _jsx("span", { className: "relative z-10 text-yellow-300 font-black uppercase text-[24px] sm:text-[30px] tracking-[0.08em] -translate-y-0.5 sm:-translate-y-1", style: { textShadow: '0px 2px 4px rgba(0,0,0,0.8)', fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif' }, children: partName })] }));
-}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import s from"next/image";import a from"../summer-sky/assets/images/background_title.png";export default function r({partName:r,isReviewMode:m=!1}){return!r||m?null:t("div",{className:"relative mx-auto flex shrink-0 items-center justify-center w-[260px] sm:w-[320px] h-[55px] sm:h-[70px] drop-shadow-[0_4px_6px_rgba(0,0,0,0.3)] mb-1 sm:mb-2 mt-0",children:[e(s,{src:a,alt:"Part Badge",fill:!0,className:"object-fill pointer-events-none"}),e("span",{className:"relative z-10 text-yellow-300 font-black uppercase text-[24px] sm:text-[30px] tracking-[0.08em] -translate-y-0.5 sm:-translate-y-1",style:{textShadow:"0px 2px 4px rgba(0,0,0,0.8)",fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif'},children:r})]})}

package/dist/components/themes/cambridge-yle/CambridgeYleProgressBar.js

@@ -1,6 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Trophy } from 'lucide-react';
-export function CambridgeYleProgressBar({ progress, className = '', }) {
-    const clampedProgress = Math.min(100, Math.max(0, progress));
-    return (_jsxs("div", { className: `flex items-center gap-2 sm:gap-3 ${className}`, children: [_jsx("div", { className: "relative h-2 w-full max-w-md overflow-hidden rounded-full bg-gray-200 sm:h-3", children: _jsx("div", { className: "h-full rounded-full bg-gradient-to-r from-orange-400 via-red-400 to-red-500 transition-all duration-300 ease-out", style: { width: `${clampedProgress}%` } }) }), _jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center sm:h-8 sm:w-8", children: _jsx(Trophy, { className: "h-5 w-5 text-yellow-500 sm:h-6 sm:w-6" }) })] }));
-}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trophy as s}from"lucide-react";export function CambridgeYleProgressBar({progress:a,className:l=""}){const t=Math.min(100,Math.max(0,a));return r("div",{className:`flex items-center gap-2 sm:gap-3 ${l}`,children:[e("div",{className:"relative h-2 w-full max-w-md overflow-hidden rounded-full bg-gray-200 sm:h-3",children:e("div",{className:"h-full rounded-full bg-gradient-to-r from-orange-400 via-red-400 to-red-500 transition-all duration-300 ease-out",style:{width:`${t}%`}})}),e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center sm:h-8 sm:w-8",children:e(s,{className:"h-5 w-5 text-yellow-500 sm:h-6 sm:w-6"})})]})}

package/dist/components/themes/cambridge-yle/CambridgeYleQuestionCard.js

@@ -1,5 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../../shared/lib/utils';
-export default function CambridgeYleQuestionCard({ children, className, }) {
-    return _jsx("div", { className: cn('relative w-full h-full flex flex-col', className), children: children });
-}
+import{jsx as l}from"react/jsx-runtime";import{cn as e}from"../../../shared/lib/utils";export default function r({children:r,className:i}){return l("div",{className:e("relative w-full h-full flex flex-col",i),children:r})}

package/dist/components/themes/cambridge-yle/CambridgeYleQuestionCardFullWidth.js

@@ -1,9 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../../shared/lib/utils';
-/**
- * Full-width question card container for coloring/painting questions.
- * Uses background without dashed separator (unlike CambridgeYleQuestionCard).
- */
-export default function CambridgeYleQuestionCardFullWidth({ children, className, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('relative mx-auto flex min-h-[70vh] w-full flex-1 flex-col rounded-2xl bg-white p-4 shadow-lg lg:hidden', className), children: _jsx("div", { className: "flex-1 overflow-auto", children: children }) }), _jsx("div", { className: cn('relative mx-auto hidden w-full max-w-[1400px] flex-1 min-h-0 flex-col rounded-[24px] border-[12px] border-[#3182CE] bg-white shadow-xl lg:flex', className), children: _jsx("div", { className: "flex-1 overflow-auto p-6 md:p-8", children: children }) })] }));
-}
+import{jsx as e,Fragment as l,jsxs as r}from"react/jsx-runtime";import{cn as a}from"../../../shared/lib/utils";export default function d({children:d,className:i}){return r(l,{children:[e("div",{className:a("relative mx-auto flex min-h-[70vh] w-full flex-1 flex-col rounded-2xl bg-white p-4 shadow-lg lg:hidden",i),children:e("div",{className:"flex-1 overflow-auto",children:d})}),e("div",{className:a("relative mx-auto hidden w-full max-w-[1400px] flex-1 min-h-0 flex-col rounded-[24px] border-[12px] border-[#3182CE] bg-white shadow-xl lg:flex",i),children:e("div",{className:"flex-1 overflow-auto p-6 md:p-8",children:d})})]})}

package/dist/components/themes/cambridge-yle/CambridgeYleSidebar.js

@@ -1,41 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../../shared/lib/utils';
-import Image from 'next/image';
-import phaoImg from './assets/images/phao.png';
-import sanhoImg from './assets/images/sanho.png';
-import saoImg from './assets/images/sao.png';
-import voocImg from './assets/images/vooc.png';
-const PART_ICONS = [phaoImg, sanhoImg, saoImg, voocImg];
-export function CambridgeYleSidebar({ parts, questions, currentQuestionGlobalIndex, onPartClick, onQuestionClick, isNavDisabled, className, }) {
-    const currentQuestion = questions[currentQuestionGlobalIndex];
-    const currentPartIndex = currentQuestion ? currentQuestion.partIndex : 0;
-    return (_jsxs("div", { className: cn("flex flex-col w-full h-full pb-4", className), children: [_jsxs("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-4 lg:p-6 pb-2", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4 justify-center uppercase tracking-widest text-[16px]", children: [_jsx("div", { className: "flex items-center justify-center p-1.5 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl text-white", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }), _jsx("polyline", { points: "2 17 12 22 22 17" }), _jsx("polyline", { points: "2 12 12 17 22 12" })] }) }), _jsx("span", { className: "font-black bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent", children: "Parts" })] }), _jsx("div", { className: "flex flex-col gap-2.5", children: parts.map((part, idx) => {
-                            const isCurrent = idx === currentPartIndex;
-                            const iconSrc = PART_ICONS[idx % PART_ICONS.length];
-                            const prevCategory = idx > 0 ? parts[idx - 1].category : null;
-                            const showCategoryTitle = part.category && part.category !== prevCategory;
-                            return (_jsxs("div", { className: "flex flex-col", children: [showCategoryTitle && (_jsxs("div", { className: "flex items-center gap-2 mt-5 mb-3 px-1", children: [_jsx("div", { className: "h-[4px] w-4 rounded-full bg-blue-500" }), _jsx("span", { className: "text-[14px] font-black uppercase tracking-[0.15em] text-blue-800", children: part.category?.replace(/_/g, ' ') }), _jsx("div", { className: "h-[2px] flex-1 rounded-full bg-blue-100" })] })), _jsxs("button", { type: "button", onClick: () => onPartClick(idx), disabled: isNavDisabled, className: cn("flex items-center justify-between p-2 px-[15px] rounded-[15px] transition-all border font-medium shadow-sm", isCurrent
-                                            ? "bg-blue-600 text-white border-blue-600"
-                                            : "bg-white text-slate-800 border-transparent", !isCurrent && !isNavDisabled ? "hover:border-blue-200" : "", isNavDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex items-center justify-center w-8 h-8 shrink-0", children: _jsx(Image, { src: iconSrc, alt: `part icon ${idx}`, className: "w-[30px] h-auto object-contain" }) }), _jsx("span", { className: "font-black text-[15px]", children: part.name || `Part ${part.partNo}` })] }), _jsxs("span", { className: cn("text-[13px] font-bold tracking-wide", isCurrent ? "text-blue-100" : "text-blue-900/60"), children: [part.answeredCount, "/", part.totalQuestions] })] })] }, idx));
-                        }) })] }), _jsx("div", { className: "px-6", children: _jsx("hr", { className: "border-t-2 border-dashed border-blue-100" }) }), _jsxs("div", { className: "flex-1 p-4 lg:p-6 pt-4 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4 justify-center uppercase tracking-widest text-[16px] shrink-0", children: [_jsx("div", { className: "flex items-center justify-center p-1.5 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl text-white", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1" }), _jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), _jsx("path", { d: "M12 11h4" }), _jsx("path", { d: "M12 16h4" }), _jsx("path", { d: "M8 11h.01" }), _jsx("path", { d: "M8 16h.01" })] }) }), _jsx("span", { className: "font-black bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent", children: "Question List" })] }), _jsx("div", { className: "flex-1 overflow-y-auto custom-scrollbar pr-1", children: _jsx("div", { className: "grid grid-cols-5 gap-2", children: questions.map((q) => {
-                                const isCurrent = q.globalIndex === currentQuestionGlobalIndex;
-                                const isAnswered = q.isAnswered;
-                                let btnStyle = "bg-white text-slate-800 shadow-sm border-transparent";
-                                if (isCurrent) {
-                                    btnStyle = "bg-blue-600 text-white border-blue-600 shadow-md";
-                                }
-                                else if (isAnswered) {
-                                    btnStyle = "bg-[#4ade80] text-white border-transparent shadow-sm";
-                                }
-                                if (!isCurrent && !isNavDisabled) {
-                                    btnStyle += " hover:shadow-md hover:text-blue-600";
-                                }
-                                if (isNavDisabled) {
-                                    btnStyle += " opacity-50 cursor-not-allowed";
-                                }
-                                else {
-                                    btnStyle += " cursor-pointer";
-                                }
-                                return (_jsx("button", { type: "button", onClick: () => onQuestionClick(q.globalIndex), disabled: isNavDisabled, className: cn("h-[44px] w-full rounded-[10px] flex items-center justify-center font-bold text-[15px] transition-all border", btnStyle), children: q.questionNumber }, q.globalIndex));
-                            }) }) }), _jsx("div", { className: "shrink-0 mt-4 pt-4 border-t border-blue-200/50", children: _jsxs("div", { className: "flex items-center justify-between text-[11px] xl:text-[11.5px] font-bold text-gray-700", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3.5 h-3.5 rounded-full bg-blue-600 shadow-sm" }), _jsx("span", { children: "Current" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3.5 h-3.5 rounded-full bg-green-500 shadow-sm" }), _jsx("span", { children: "Answered" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3.5 h-3.5 rounded-full bg-[#f4f9ff] border border-blue-200 shadow-sm" }), _jsx("span", { children: "Not answered" })] })] }) })] })] }));
-}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{cn as r}from"../../../shared/lib/utils";import s from"next/image";import l from"./assets/images/phao.png";import a from"./assets/images/sanho.png";import n from"./assets/images/sao.png";import i from"./assets/images/vooc.png";const o=[l,a,n,i];export function CambridgeYleSidebar({parts:l,questions:a,currentQuestionGlobalIndex:n,onPartClick:i,onQuestionClick:d,isNavDisabled:c,className:p}){const m=a[n],h=m?m.partIndex:0;return t("div",{className:r("flex flex-col w-full h-full pb-4",p),children:[t("div",{className:"flex-1 overflow-y-auto custom-scrollbar p-4 lg:p-6 pb-2",children:[t("div",{className:"flex items-center gap-2 mb-4 justify-center uppercase tracking-widest text-[16px]",children:[e("div",{className:"flex items-center justify-center p-1.5 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl text-white",children:t("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e("polygon",{points:"12 2 2 7 12 12 22 7 12 2"}),e("polyline",{points:"2 17 12 22 22 17"}),e("polyline",{points:"2 12 12 17 22 12"})]})}),e("span",{className:"font-black bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent",children:"Parts"})]}),e("div",{className:"flex flex-col gap-2.5",children:l.map((a,n)=>{const d=n===h,p=o[n%o.length],m=n>0?l[n-1].category:null,b=a.category&&a.category!==m;return t("div",{className:"flex flex-col",children:[b&&t("div",{className:"flex items-center gap-2 mt-5 mb-3 px-1",children:[e("div",{className:"h-[4px] w-4 rounded-full bg-blue-500"}),e("span",{className:"text-[14px] font-black uppercase tracking-[0.15em] text-blue-800",children:a.category?.replace(/_/g," ")}),e("div",{className:"h-[2px] flex-1 rounded-full bg-blue-100"})]}),t("button",{type:"button",onClick:()=>i(n),disabled:c,className:r("flex items-center justify-between p-2 px-[15px] rounded-[15px] transition-all border font-medium shadow-sm",d?"bg-blue-600 text-white border-blue-600":"bg-white text-slate-800 border-transparent",d||c?"":"hover:border-blue-200",c?"opacity-50 cursor-not-allowed":"cursor-pointer"),children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex items-center justify-center w-8 h-8 shrink-0",children:e(s,{src:p,alt:`part icon ${n}`,className:"w-[30px] h-auto object-contain"})}),e("span",{className:"font-black text-[15px]",children:a.name||`Part ${a.partNo}`})]}),t("span",{className:r("text-[13px] font-bold tracking-wide",d?"text-blue-100":"text-blue-900/60"),children:[a.answeredCount,"/",a.totalQuestions]})]})]},n)})})]}),e("div",{className:"px-6",children:e("hr",{className:"border-t-2 border-dashed border-blue-100"})}),t("div",{className:"flex-1 p-4 lg:p-6 pt-4 flex flex-col min-h-0",children:[t("div",{className:"flex items-center gap-2 mb-4 justify-center uppercase tracking-widest text-[16px] shrink-0",children:[e("div",{className:"flex items-center justify-center p-1.5 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl text-white",children:t("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e("rect",{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),e("path",{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),e("path",{d:"M12 11h4"}),e("path",{d:"M12 16h4"}),e("path",{d:"M8 11h.01"}),e("path",{d:"M8 16h.01"})]})}),e("span",{className:"font-black bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent",children:"Question List"})]}),e("div",{className:"flex-1 overflow-y-auto custom-scrollbar pr-1",children:e("div",{className:"grid grid-cols-5 gap-2",children:a.map(t=>{const s=t.globalIndex===n,l=t.isAnswered;let a="bg-white text-slate-800 shadow-sm border-transparent";return s?a="bg-blue-600 text-white border-blue-600 shadow-md":l&&(a="bg-[#4ade80] text-white border-transparent shadow-sm"),s||c||(a+=" hover:shadow-md hover:text-blue-600"),a+=c?" opacity-50 cursor-not-allowed":" cursor-pointer",e("button",{type:"button",onClick:()=>d(t.globalIndex),disabled:c,className:r("h-[44px] w-full rounded-[10px] flex items-center justify-center font-bold text-[15px] transition-all border",a),children:t.questionNumber},t.globalIndex)})})}),e("div",{className:"shrink-0 mt-4 pt-4 border-t border-blue-200/50",children:t("div",{className:"flex items-center justify-between text-[11px] xl:text-[11.5px] font-bold text-gray-700",children:[t("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"w-3.5 h-3.5 rounded-full bg-blue-600 shadow-sm"}),e("span",{children:"Current"})]}),t("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"w-3.5 h-3.5 rounded-full bg-green-500 shadow-sm"}),e("span",{children:"Answered"})]}),t("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"w-3.5 h-3.5 rounded-full bg-[#f4f9ff] border border-blue-200 shadow-sm"}),e("span",{children:"Not answered"})]})]})})]})]})}

package/dist/components/themes/cambridge-yle/CambridgeYleTimer.js

@@ -1,25 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import summerSkyClockImg from '@/components/themes/summer-sky/assets/images/clock.png';
-export function CambridgeYleTimer({ remainingSeconds, totalQuestions, answeredCount, }) {
-    const minutes = Math.floor(remainingSeconds / 60);
-    const seconds = remainingSeconds % 60;
-    const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-    // Use the same styles as the Speaking exam timer but relative positioning
-    // Warning colors can be added if needed based on remainingSeconds,
-    // but for now we'll match the default blue theme.
-    let bgColorClass = 'bg-[#001590]';
-    let shadowClass = 'shadow-[0_4px_20px_rgba(0,0,0,0.25)]';
-    // Optional warning states (similar to ExamTimer.module.css)
-    if (remainingSeconds <= 120) {
-        bgColorClass = 'bg-[rgba(220,38,38,0.85)]'; // Critical
-        shadowClass = 'shadow-[0_0_24px_rgba(220,38,38,0.5)] animate-pulse';
-    }
-    else if (remainingSeconds <= 300) {
-        bgColorClass = 'bg-[rgba(180,120,0,0.85)]'; // Warning
-    }
-    return (_jsxs("div", { className: `flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] backdrop-blur-[8px] transition-all duration-300 ease-in-out border-none ${bgColorClass} ${shadowClass}`, children: [_jsx(Image, { src: summerSkyClockImg, alt: "clock", width: 75, height: 75, className: "w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10" }), _jsx("span", { className: "flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]", style: {
-                    fontFamily: "'SVN-Volte Rounded', 'Quicksand', sans-serif",
-                    textShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
-                }, children: formattedTime })] }));
-}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import s from"next/image";import r from"../../../components/themes/summer-sky/assets/images/clock.png";export function CambridgeYleTimer({remainingSeconds:a,totalQuestions:n,answeredCount:p}){const o=a%60,x=`${Math.floor(a/60).toString().padStart(2,"0")}:${o.toString().padStart(2,"0")}`;let m="bg-[#001590]",i="shadow-[0_4px_20px_rgba(0,0,0,0.25)]";return a<=120?(m="bg-[rgba(220,38,38,0.85)]",i="shadow-[0_0_24px_rgba(220,38,38,0.5)] animate-pulse"):a<=300&&(m="bg-[rgba(180,120,0,0.85)]"),t("div",{className:`flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] backdrop-blur-[8px] transition-all duration-300 ease-in-out border-none ${m} ${i}`,children:[e(s,{src:r,alt:"clock",width:75,height:75,className:"w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10"}),e("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:"'SVN-Volte Rounded', 'Quicksand', sans-serif",textShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},children:x})]})}

package/dist/components/themes/cambridge-yle/index.js

@@ -1,13 +1 @@
-// Cambridge YLE Theme — Layout & UI components
-// Previously known as the "Movers" theme
-export { CambridgeYleExamLayout } from './CambridgeYleExamLayout';
-export { CambridgeYleHeader } from './CambridgeYleHeader';
-export { CambridgeYleNavButton } from './CambridgeYleNavButton';
-export { CambridgeYleProgressBar } from './CambridgeYleProgressBar';
-export { CambridgeYleTimer } from './CambridgeYleTimer';
-export { default as CambridgeYleQuestionCard } from './CambridgeYleQuestionCard';
-export { default as CambridgeYleQuestionCardFullWidth } from './CambridgeYleQuestionCardFullWidth';
-export { default as CambridgeYlePartBanner } from './CambridgeYlePartBanner';
-export { default as CambridgeYleInstructionBanner } from './CambridgeYleInstructionBanner';
-export { default as CambridgeYleAudioPlayer } from './CambridgeYleAudioPlayer';
-export { default as CambridgeYleExampleText } from './CambridgeYleExampleText';
+export{CambridgeYleExamLayout}from"./CambridgeYleExamLayout";export{CambridgeYleHeader}from"./CambridgeYleHeader";export{CambridgeYleNavButton}from"./CambridgeYleNavButton";export{CambridgeYleProgressBar}from"./CambridgeYleProgressBar";export{CambridgeYleTimer}from"./CambridgeYleTimer";export{default as CambridgeYleQuestionCard}from"./CambridgeYleQuestionCard";export{default as CambridgeYleQuestionCardFullWidth}from"./CambridgeYleQuestionCardFullWidth";export{default as CambridgeYlePartBanner}from"./CambridgeYlePartBanner";export{default as CambridgeYleInstructionBanner}from"./CambridgeYleInstructionBanner";export{default as CambridgeYleAudioPlayer}from"./CambridgeYleAudioPlayer";export{default as CambridgeYleExampleText}from"./CambridgeYleExampleText";

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

@@ -1,24 +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 { transformAnswerTheQuestion } from '../../../components/exams/take/exam-taking.utils';
-/**
- * Branded English Certification renderer for `ANSWER_THE_QUESTION`.
- *
- * Lists each question with an inline text input (plus optional prefix/suffix and
- * suggested answers). Reuses {@link transformAnswerTheQuestion} so the stored
- * answer shape (`{ [questionId]: { answer: string } }`) stays compatible with
- * the grading store.
- */
-export function EcAnswerTheQuestion({ part, answers, onAnswerChange, isReviewMode = false, }) {
-    const { questions, instruction, imageUrl, title, groupContent } = useMemo(() => transformAnswerTheQuestion(part.questions), [part.questions]);
-    const handleChange = (questionId, value) => {
-        onAnswerChange(questionId, { answer: value });
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [instruction && (_jsx("div", { className: "rounded-xl border border-[#d9e4f2] bg-[#e9f3ff] px-4 py-2.5 text-sm font-semibold uppercase tracking-wide text-[#0b57d0]", children: instruction })), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: title || 'Group image', className: "max-h-[280px] rounded-lg object-contain shadow-md" }) })), _jsx("div", { className: "flex flex-col gap-3", children: questions.map((q) => {
-                    const stored = answers[q.id]?.answer ?? q.exampleAnswer ?? '';
-                    return (_jsx("div", { id: `question-${q.id}`, className: cn('rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]', q.isExample && 'opacity-90'), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-xs font-bold text-white", children: q.questionNumber }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [q.imageUrl && (_jsx(ResolvedImage, { src: q.imageUrl, alt: `Question ${q.questionNumber}`, className: "max-h-28 w-auto rounded object-contain" })), _jsx("p", { className: "text-sm text-[#0f1730]", children: q.question }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [q.prefixText && (_jsx("span", { className: "text-sm text-[#64748b]", children: q.prefixText })), q.isExample ? (_jsx("span", { className: "rounded-lg border border-[#b9edc8] bg-[#ddf8e7] px-3 py-1.5 text-sm font-semibold text-[#15803d]", children: q.exampleAnswer })) : (_jsx("input", { type: "text", value: stored, disabled: isReviewMode, placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi\u2026", onChange: (e) => handleChange(q.id, e.target.value), className: cn('min-w-[200px] flex-1 rounded-lg border-2 border-[#9cc4f5] bg-white px-3 py-2 text-sm font-medium text-[#0f1730] outline-none transition-all focus:border-[#1167e8]', isReviewMode && 'cursor-not-allowed opacity-70') })), q.suffixText && (_jsx("span", { className: "text-sm text-[#64748b]", children: q.suffixText }))] }), q.suggestedAnswers && q.suggestedAnswers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5", children: q.suggestedAnswers.map((sa, idx) => (_jsx("span", { className: "rounded-full border border-[#e2ecf8] bg-[#f4f9ff] px-2.5 py-0.5 text-xs text-[#0b57d0]", children: sa }, `${q.id}-sa-${idx}`))) }))] })] }) }, q.id));
-                }) })] }));
-}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useMemo as t}from"react";import{ResolvedImage as r}from"../../../components/common/ResolvedImage";import{cn as a}from"../../../shared/lib/utils";import{transformAnswerTheQuestion as n}from"../../../components/exams/take/exam-taking.utils";export function EcAnswerTheQuestion({part:i,answers:l,onAnswerChange:d,isReviewMode:o=!1}){const{questions:c,instruction:m,imageUrl:x,title:p,groupContent:f}=t(()=>n(i.questions),[i.questions]);return s("div",{className:"flex flex-col gap-4",children:[m&&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:m}),x&&e("div",{className:"flex items-center justify-center",children:e(r,{src:x,alt:p||"Group image",className:"max-h-[280px] rounded-lg object-contain shadow-md"})}),e("div",{className:"flex flex-col gap-3",children:c.map(t=>{const n=l[t.id]?.answer??t.exampleAnswer??"";return e("div",{id:`question-${t.id}`,className:a("rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]",t.isExample&&"opacity-90"),children:s("div",{className:"flex items-start gap-3",children:[e("span",{className:"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-xs font-bold text-white",children:t.questionNumber}),s("div",{className:"min-w-0 flex-1 space-y-2",children:[t.imageUrl&&e(r,{src:t.imageUrl,alt:`Question ${t.questionNumber}`,className:"max-h-28 w-auto rounded object-contain"}),e("p",{className:"text-sm text-[#0f1730]",children:t.question}),s("div",{className:"flex flex-wrap items-center gap-2",children:[t.prefixText&&e("span",{className:"text-sm text-[#64748b]",children:t.prefixText}),t.isExample?e("span",{className:"rounded-lg border border-[#b9edc8] bg-[#ddf8e7] px-3 py-1.5 text-sm font-semibold text-[#15803d]",children:t.exampleAnswer}):e("input",{type:"text",value:n,disabled:o,placeholder:"Nhập câu trả lời…",onChange:e=>{return s=t.id,r=e.target.value,void d(s,{answer:r});var s,r},className:a("min-w-[200px] flex-1 rounded-lg border-2 border-[#9cc4f5] bg-white px-3 py-2 text-sm font-medium text-[#0f1730] outline-none transition-all focus:border-[#1167e8]",o&&"cursor-not-allowed opacity-70")}),t.suffixText&&e("span",{className:"text-sm text-[#64748b]",children:t.suffixText})]}),t.suggestedAnswers&&t.suggestedAnswers.length>0&&e("div",{className:"flex flex-wrap gap-1.5",children:t.suggestedAnswers.map((s,r)=>e("span",{className:"rounded-full border border-[#e2ecf8] bg-[#f4f9ff] px-2.5 py-0.5 text-xs text-[#0b57d0]",children:s},`${t.id}-sa-${r}`))})]})]})},t.id)})})]})}

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

@@ -1,88 +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 { transformMatchByWritingAnswer } from '../../../components/exams/take/exam-taking.utils';
-/** Letters A, B, C, … used to label the answer options. */
-const OPTION_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
-const BADGE_TONE_CLASS = {
-    empty: 'bg-[#eef3fb] text-[#94a3b8] border border-[#dbe5f2]',
-    filled: 'bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-white border border-transparent',
-    correct: 'bg-[#16a34a] text-white border border-transparent',
-    wrong: 'bg-[#ef4444] text-white border border-transparent',
-};
-/** Big rounded badge that mirrors the currently selected letter. */
-function LetterBadge({ letter, tone }) {
-    return (_jsx("span", { className: cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-base font-bold transition-colors', BADGE_TONE_CLASS[tone]), children: letter || '—' }));
-}
-/**
- * Branded English Certification renderer for `MATCH_BY_WRITING_ANSWER`.
- *
- * Shows a lettered answer bank (A–H) at the top, then each question with a
- * dropdown to pick its matching letter plus a big letter badge mirroring the
- * current selection. Selected letters are dimmed in the bank (take mode) so the
- * student can track which options are still free. Reuses
- * {@link transformMatchByWritingAnswer} so the stored answer shape
- * (`{ [questionId]: { answer: string } }`) stays compatible with the grading
- * store.
- */
-export function EcMatchByWritingAnswer({ part, answers, onAnswerChange, isReviewMode = false, }) {
-    const { questions, options, instruction, groupImageUrl } = useMemo(() => transformMatchByWritingAnswer(part.questions), [part.questions]);
-    /** Map each option's stored answer value → its display letter (A, B, C…). */
-    const answerToLetter = useMemo(() => {
-        const map = new Map();
-        options.forEach((opt, idx) => {
-            map.set(opt.answer, OPTION_LETTERS[idx] ?? String(idx + 1));
-        });
-        return map;
-    }, [options]);
-    /** Resolve the stored value for a question (selection or example fallback). */
-    const getStored = (q) => answers[q.id]?.answer ?? q.exampleAnswer ?? '';
-    /** Letters currently assigned across all questions — drives bank dimming. */
-    const usedLetters = useMemo(() => {
-        const set = new Set();
-        questions.forEach((q) => {
-            const value = getStored(q);
-            const letter = answerToLetter.get(value);
-            if (letter)
-                set.add(letter);
-        });
-        return set;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [questions, answers, answerToLetter]);
-    const handleSelect = (questionId, value) => {
-        onAnswerChange(questionId, { answer: value });
-    };
-    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 })), groupImageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: groupImageUrl, alt: "Group image", className: "max-h-[280px] rounded-lg object-contain shadow-md" }) })), options.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[#64748b]", children: "ANSWER OPTIONS" }), _jsx("div", { className: "mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2", children: options.map((opt, idx) => {
-                            const letter = OPTION_LETTERS[idx] ?? String(idx + 1);
-                            // Dim used options only in take mode so review stays comparable.
-                            const isUsed = !isReviewMode && usedLetters.has(letter);
-                            return (_jsxs("div", { className: cn('flex items-start gap-2.5 rounded-xl border border-[#e2ecf8] bg-[#f4f9ff] px-3 py-2 transition-opacity', isUsed && 'opacity-50'), children: [_jsxs("span", { className: "relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-xs font-bold text-white", children: [letter, isUsed && (_jsx("span", { className: "absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[#16a34a] text-[8px] text-white", children: "\u2713" }))] }), _jsxs("div", { className: "min-w-0 text-sm text-[#0f1730]", children: [opt.imageUrl && (_jsx(ResolvedImage, { src: opt.imageUrl, alt: opt.answer, className: "mb-1 max-h-24 w-auto rounded object-contain" })), _jsx("span", { className: "font-medium", children: opt.content || opt.answer })] })] }, `${opt.answer}-${idx}`));
-                        }) })] })), _jsx("div", { className: "flex flex-col gap-3", children: questions.map((q) => {
-                    const stored = getStored(q);
-                    const selectedLetter = answerToLetter.get(stored) ?? '';
-                    // Review correctness is only known for example rows (the
-                    // transformer exposes `exampleAnswer`); other rows stay neutral.
-                    const reviewCorrect = isReviewMode && q.isExample
-                        ? stored === (q.exampleAnswer ?? '')
-                        : undefined;
-                    const rowTint = reviewCorrect === true
-                        ? 'border-[#bbf7d0] bg-[#f0fdf4]'
-                        : reviewCorrect === false
-                            ? 'border-[#fecaca] bg-[#fef2f2]'
-                            : 'border-[#d9e4f2] bg-white/90';
-                    const badgeTone = reviewCorrect === true
-                        ? 'correct'
-                        : reviewCorrect === false
-                            ? 'wrong'
-                            : selectedLetter
-                                ? 'filled'
-                                : 'empty';
-                    return (_jsxs("div", { id: `question-${q.id}`, className: cn('flex items-center gap-3 rounded-xl border p-3 shadow-sm transition-colors', rowTint, q.isExample && 'opacity-90'), children: [_jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-xs font-bold text-white", children: q.questionNumber }), _jsxs("div", { className: "min-w-0 flex-1", children: [q.imageUrl && (_jsx(ResolvedImage, { src: q.imageUrl, alt: `Question ${q.questionNumber}`, className: "mb-2 max-h-28 w-auto rounded object-contain" })), _jsx("p", { className: "text-sm text-[#0f1730]", children: q.question })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(LetterBadge, { letter: selectedLetter, tone: badgeTone }), q.isExample ? (_jsx("span", { className: "rounded-lg border border-[#b9edc8] bg-[#ddf8e7] px-3 py-1.5 text-sm font-semibold text-[#15803d]", children: q.exampleAnswer })) : (_jsxs("select", { value: stored, disabled: isReviewMode, onChange: (e) => handleSelect(q.id, e.target.value), className: cn('h-9 min-w-[150px] rounded-lg border-2 border-[#9cc4f5] bg-white px-3 text-sm font-semibold text-[#0f1730] outline-none transition-all focus:border-[#1167e8]', isReviewMode && 'cursor-not-allowed opacity-70'), children: [_jsx("option", { value: "", children: "\u2014" }), options.map((opt, idx) => {
-                                                const letter = OPTION_LETTERS[idx] ?? String(idx + 1);
-                                                const label = opt.content || opt.answer;
-                                                return (_jsx("option", { value: opt.answer, children: label ? `${letter} — ${label}` : letter }, `${q.id}-${idx}`));
-                                            })] }))] })] }, q.id));
-                }) })] }));
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useMemo as r}from"react";import{ResolvedImage as n}from"../../../components/common/ResolvedImage";import{cn as s}from"../../../shared/lib/utils";import{transformMatchByWritingAnswer as a}from"../../../components/exams/take/exam-taking.utils";const o="ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),i={empty:"bg-[#eef3fb] text-[#94a3b8] border border-[#dbe5f2]",filled:"bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-white border border-transparent",correct:"bg-[#16a34a] text-white border border-transparent",wrong:"bg-[#ef4444] text-white border border-transparent"};function d({letter:t,tone:r}){return e("span",{className:s("flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-base font-bold transition-colors",i[r]),children:t||"—"})}export function EcMatchByWritingAnswer({part:i,answers:l,onAnswerChange:c,isReviewMode:m=!1}){const{questions:f,options:b,instruction:p,groupImageUrl:x}=r(()=>a(i.questions),[i.questions]),u=r(()=>{const e=new Map;return b.forEach((t,r)=>{e.set(t.answer,o[r]??String(r+1))}),e},[b]),g=e=>l[e.id]?.answer??e.exampleAnswer??"",h=r(()=>{const e=new Set;return f.forEach(t=>{const r=g(t),n=u.get(r);n&&e.add(n)}),e},[f,l,u]);return t("div",{className:"flex flex-col gap-4",children:[p&&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:p}),x&&e("div",{className:"flex items-center justify-center",children:e(n,{src:x,alt:"Group image",className:"max-h-[280px] rounded-lg object-contain shadow-md"})}),b.length>0&&t("div",{className:"rounded-2xl border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_14px_35px_rgba(13,71,161,0.10)]",children:[e("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-[#64748b]",children:"ANSWER OPTIONS"}),e("div",{className:"mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2",children:b.map((r,a)=>{const i=o[a]??String(a+1),d=!m&&h.has(i);return t("div",{className:s("flex items-start gap-2.5 rounded-xl border border-[#e2ecf8] bg-[#f4f9ff] px-3 py-2 transition-opacity",d&&"opacity-50"),children:[t("span",{className:"relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-xs font-bold text-white",children:[i,d&&e("span",{className:"absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[#16a34a] text-[8px] text-white",children:"✓"})]}),t("div",{className:"min-w-0 text-sm text-[#0f1730]",children:[r.imageUrl&&e(n,{src:r.imageUrl,alt:r.answer,className:"mb-1 max-h-24 w-auto rounded object-contain"}),e("span",{className:"font-medium",children:r.content||r.answer})]})]},`${r.answer}-${a}`)})})]}),e("div",{className:"flex flex-col gap-3",children:f.map(r=>{const a=g(r),i=u.get(a)??"",l=m&&r.isExample?a===(r.exampleAnswer??""):void 0,f=!0===l?"border-[#bbf7d0] bg-[#f0fdf4]":!1===l?"border-[#fecaca] bg-[#fef2f2]":"border-[#d9e4f2] bg-white/90",p=!0===l?"correct":!1===l?"wrong":i?"filled":"empty";return t("div",{id:`question-${r.id}`,className:s("flex items-center gap-3 rounded-xl border p-3 shadow-sm transition-colors",f,r.isExample&&"opacity-90"),children:[e("span",{className:"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-[#1f7cff] to-[#0b57d0] text-xs font-bold text-white",children:r.questionNumber}),t("div",{className:"min-w-0 flex-1",children:[r.imageUrl&&e(n,{src:r.imageUrl,alt:`Question ${r.questionNumber}`,className:"mb-2 max-h-28 w-auto rounded object-contain"}),e("p",{className:"text-sm text-[#0f1730]",children:r.question})]}),t("div",{className:"flex shrink-0 items-center gap-2",children:[e(d,{letter:i,tone:p}),r.isExample?e("span",{className:"rounded-lg border border-[#b9edc8] bg-[#ddf8e7] px-3 py-1.5 text-sm font-semibold text-[#15803d]",children:r.exampleAnswer}):t("select",{value:a,disabled:m,onChange:e=>{return t=r.id,n=e.target.value,void c(t,{answer:n});var t,n},className:s("h-9 min-w-[150px] rounded-lg border-2 border-[#9cc4f5] bg-white px-3 text-sm font-semibold text-[#0f1730] outline-none transition-all focus:border-[#1167e8]",m&&"cursor-not-allowed opacity-70"),children:[e("option",{value:"",children:"—"}),b.map((t,n)=>{const s=o[n]??String(n+1),a=t.content||t.answer;return e("option",{value:t.answer,children:a?`${s} — ${a}`:s},`${r.id}-${n}`)})]})]})]},r.id)})})]})}

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

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