@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/themes/cambridge-yle/CambridgeYleInstructionBanner.d.ts

@@ -4,6 +4,7 @@ interface CambridgeYleInstructionBannerProps {
     hasExample?: boolean;
     children?: React.ReactNode;
     isReviewMode?: boolean;
+    compact?: boolean;
 }
-export default function CambridgeYleInstructionBanner({ instruction, instructions, hasExample, children, isReviewMode, }: CambridgeYleInstructionBannerProps): import("react").JSX.Element;
+export default function CambridgeYleInstructionBanner({ instruction, instructions, hasExample, children, isReviewMode, compact, }: CambridgeYleInstructionBannerProps): import("react").JSX.Element;
 export {};

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

@@ -1 +1,19 @@
-"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))})]})})]})}
+'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, compact = false, }) {
+    if (isReviewMode)
+        return null;
+    const hasInstructionsList = instructions && instructions.length > 0;
+    return (_jsxs("div", { className: compact
+            ? 'mb-1 shrink-0 space-y-1.5 px-1 xl:mb-4 xl:space-y-3 xl:px-6'
+            : 'mb-2 shrink-0 space-y-3 px-2 sm:mb-4 sm:px-6', children: [instruction && (_jsxs("div", { className: compact
+                    ? 'flex w-full items-center gap-2 rounded-[14px] border-2 border-dashed border-blue-300 bg-[#F8FBFF] px-3 py-2 transition-all hover:bg-blue-50/50 lg:gap-3 lg:px-4 lg:py-2.5 xl:gap-5 xl:rounded-[24px] xl:px-5 xl:py-4'
+                    : 'flex w-full items-center gap-4 rounded-[24px] border-2 border-dashed border-blue-300 bg-[#F8FBFF] px-5 py-4 transition-all hover:bg-blue-50/50 sm:gap-5', children: [_jsx("div", { className: compact
+                            ? 'flex h-8 w-8 shrink-0 -rotate-6 items-center justify-center rounded-[10px] bg-[#0070FF] shadow-[3px_3px_0px_rgba(191,219,254,1)] transition-transform hover:rotate-0 lg:h-9 lg:w-9 xl:h-14 xl:w-14 xl:rounded-[16px] xl:shadow-[4px_4px_0px_rgba(191,219,254,1)]'
+                            : 'flex h-12 w-12 shrink-0 -rotate-6 items-center justify-center rounded-[16px] bg-[#0070FF] shadow-[4px_4px_0px_rgba(191,219,254,1)] transition-transform hover:rotate-0 sm:h-14 sm:w-14', children: _jsx(Megaphone, { className: compact ? 'h-4 w-4 text-white lg:h-5 lg:w-5 xl:h-7 xl:w-7' : 'h-6 w-6 text-white sm:h-7 sm:w-7', strokeWidth: 2.5 }) }), _jsx("div", { className: "flex flex-1 flex-col justify-center", children: _jsxs("p", { className: compact
+                                ? 'text-[12px] font-black uppercase leading-tight tracking-wide text-[#002868] lg:text-[13px] xl:text-[18px] xl:leading-snug'
+                                : 'text-[15px] font-black uppercase leading-snug tracking-wide text-[#002868] sm:text-[18px]', style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif' }, children: [instruction, hasExample && (_jsx("span", { className: compact
+                                        ? 'ml-1 inline-block rounded-full bg-blue-100 px-1.5 py-0.5 align-middle text-[10px] font-bold tracking-normal text-[#0070FF] xl:-mt-1 xl:ml-2 xl:px-3 xl:text-[16px]'
+                                        : 'ml-2 -mt-1 inline-block rounded-full bg-blue-100 px-3 py-0.5 align-middle text-[14px] font-bold tracking-normal text-[#0070FF] sm:text-[16px]', 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))) })] }) }))] }));
+}

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

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

package/dist/components/themes/cambridge-yle/CambridgeYlePartBanner.d.ts

@@ -4,5 +4,5 @@ interface CambridgeYlePartBannerProps {
     partName?: string;
     isReviewMode?: boolean;
 }
-export default function CambridgeYlePartBanner({ partName, isReviewMode, }: CambridgeYlePartBannerProps): import("react").JSX.Element;
+export default function CambridgeYlePartBanner(_props: CambridgeYlePartBannerProps): any;
 export {};

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

@@ -1 +1,3 @@
-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})]})}
+export default function CambridgeYlePartBanner(_props) {
+    return null;
+}

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

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

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

@@ -1 +1,5 @@
-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})}
+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 });
+}

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

@@ -1 +1,9 @@
-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})})]})}
+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 }) })] }));
+}

package/dist/components/themes/cambridge-yle/CambridgeYleSidebar.d.ts

@@ -11,7 +11,8 @@ export interface SidebarPart {
 export interface SidebarQuestion {
     globalIndex: number;
     partIndex: number;
-    questionNumber: number;
+    questionNumber: number | string;
+    subQuestionNumber?: number | string;
     isAnswered: boolean;
 }
 export interface CambridgeYleSidebarProps {

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

@@ -1 +1,61 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{cn as r}from"../../../shared/lib/utils";import l from"next/image";import{useEffect as s,useRef as n}from"react";import a from"./assets/images/phao.png";import o from"./assets/images/sanho.png";import i from"./assets/images/sao.png";import c from"./assets/images/vooc.png";const d=[a,o,i,c];export function CambridgeYleSidebar({parts:a,questions:o,currentQuestionGlobalIndex:i,onPartClick:c,onQuestionClick:p,isNavDisabled:m,className:u}){const h=o[i],b=h?h.partIndex:0,x=n(null),f=n([]),g=(n(null),n(new Map));return s(()=>{const e=x.current,t=f.current[b];if(!e||!t)return;const r=e.getBoundingClientRect(),l=t.getBoundingClientRect(),s=l.top<r.top,n=l.bottom>r.bottom;(s||n)&&t.scrollIntoView({block:"nearest",behavior:"smooth"})},[b]),s(()=>{const e=g.current.get(i);e?.scrollIntoView({block:"center",behavior:"smooth"})},[i]),t("div",{className:r("flex flex-col w-full h-full pb-4",u),children:[t("div",{ref:x,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:a.map((s,n)=>{const o=n===b,i=d[n%d.length],p=n>0?a[n-1].category:null,u=s.category&&s.category!==p;return t("div",{ref:e=>{f.current[n]=e},className:"flex flex-col",children:[u&&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:s.category?.replace(/_/g," ")}),e("div",{className:"h-[2px] flex-1 rounded-full bg-blue-100"})]}),t("button",{type:"button",onClick:()=>c(n),disabled:m,className:r("flex items-center justify-between p-2 px-[15px] rounded-[15px] transition-all border font-medium shadow-sm",o?"bg-blue-600 text-white border-blue-600":"bg-white text-slate-800 border-transparent",o||m?"":"hover:border-blue-200",m?"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(l,{src:i,alt:`part icon ${n}`,className:"w-[30px] h-auto object-contain"})}),e("span",{className:"font-black text-[15px]",children:s.name||`Part ${s.partNo}`})]}),t("div",{className:"flex items-center gap-2 shrink-0",children:[null!=s.points&&s.points>0&&t("span",{className:r("text-[12px] font-black tracking-wide whitespace-nowrap",o?"text-yellow-200":"text-amber-500"),children:[s.points," điểm"]}),t("span",{className:r("text-[13px] font-bold tracking-wide",o?"text-blue-100":"text-blue-900/60"),children:[s.answeredCount,"/",s.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:o.map(t=>{const l=t.globalIndex===i,s=t.isAnswered;let n="bg-white text-slate-800 shadow-sm border-transparent";return l?n="bg-blue-600 text-white border-blue-600 shadow-md":s&&(n="bg-[#4ade80] text-white border-transparent shadow-sm"),l||m||(n+=" hover:shadow-md hover:text-blue-600"),n+=m?" opacity-50 cursor-not-allowed":" cursor-pointer",e("button",{ref:e=>{e?g.current.set(t.globalIndex,e):g.current.delete(t.globalIndex)},type:"button",onClick:()=>p(t.globalIndex),disabled:m,className:r("h-[44px] w-full rounded-[10px] flex items-center justify-center font-bold text-[15px] transition-all border",n),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"})]})]})})]})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../shared/lib/utils';
+import { Fragment, useEffect, useRef } from 'react';
+export function CambridgeYleSidebar({ parts, questions, currentQuestionGlobalIndex, onPartClick, onQuestionClick, isNavDisabled, className, }) {
+    const currentQuestion = questions[currentQuestionGlobalIndex];
+    const currentPartIndex = currentQuestion ? currentQuestion.partIndex : 0;
+    const partsScrollRef = useRef(null);
+    const partRefs = useRef([]);
+    const questionScrollRef = useRef(null);
+    const questionRefs = useRef(new Map());
+    useEffect(() => {
+        const container = partsScrollRef.current;
+        const activePart = partRefs.current[currentPartIndex];
+        if (!container || !activePart)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const activeRect = activePart.getBoundingClientRect();
+        const isAbove = activeRect.top < containerRect.top;
+        const isBelow = activeRect.bottom > containerRect.bottom;
+        if (isAbove || isBelow) {
+            activePart.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+    }, [currentPartIndex]);
+    useEffect(() => {
+        const activeBtn = questionRefs.current.get(currentQuestionGlobalIndex);
+        activeBtn?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }, [currentQuestionGlobalIndex]);
+    return (_jsxs("div", { className: cn("flex flex-col w-full h-full pb-3", className), children: [_jsxs("div", { ref: partsScrollRef, className: "shrink-0 max-h-[35%] overflow-y-auto custom-scrollbar px-2.5 pt-2 pb-1 xl:px-5 xl:pt-4 xl:pb-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 mb-1.5 xl:mb-3 xl:gap-2 justify-center uppercase tracking-widest text-[12px] xl:text-[14.5px]", children: [_jsx("div", { className: "flex items-center justify-center p-1 xl:p-1.5 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg xl:rounded-xl text-white", children: _jsxs("svg", { className: "h-3.5 w-3.5 xl:h-4 xl:w-4", 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: "grid grid-cols-3 gap-1.5 xl:gap-2", children: parts.map((part, idx) => {
+                            const isCurrent = idx === currentPartIndex;
+                            const prevCategory = idx > 0 ? parts[idx - 1].category : null;
+                            const showCategoryTitle = part.category && part.category !== prevCategory;
+                            return (_jsxs(Fragment, { children: [showCategoryTitle && (_jsxs("div", { className: "col-span-3 flex min-w-0 items-center gap-1.5 mt-2 mb-1 px-1 xl:gap-2 xl:mt-3 xl:mb-1.5", children: [_jsx("div", { className: "h-[3px] w-3 shrink-0 rounded-full bg-blue-500 xl:h-[3.5px] xl:w-3.5" }), _jsx("span", { className: "min-w-0 truncate whitespace-nowrap text-[10.5px] xl:text-[12.5px] font-black uppercase tracking-[0.1em] text-blue-800", title: part.category?.replace(/_/g, ' '), children: part.category?.replace(/_/g, ' ') }), _jsx("div", { className: "h-[2px] min-w-0 flex-1 rounded-full bg-blue-100" })] })), _jsxs("button", { ref: (el) => { partRefs.current[idx] = el; }, type: "button", onClick: () => onPartClick(idx), disabled: isNavDisabled, className: cn("flex flex-col items-center justify-center py-1 px-1 xl:py-1.5 xl:px-1.5 rounded-md xl:rounded-lg transition-all border font-medium shadow-sm min-w-0 text-center", 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: [_jsx("span", { className: "font-black text-[11px] xl:text-[13px] truncate w-full", children: part.name || `Part ${part.partNo}` }), _jsxs("span", { className: cn('text-[10px] xl:text-[11.5px] font-bold tracking-wide mt-0.5', isCurrent ? 'text-blue-100' : 'text-blue-900/60'), children: [part.answeredCount, "/", part.totalQuestions] })] })] }, idx));
+                        }) })] }), _jsx("div", { className: "px-5", children: _jsx("hr", { className: "border-t-2 border-dashed border-blue-100" }) }), _jsxs("div", { className: "flex-1 px-2.5 pt-2 pb-2 xl:p-5 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 mb-2 xl:gap-2 xl:mb-4 justify-center uppercase tracking-widest text-[12.5px] xl:text-[15.5px] shrink-0", children: [_jsx("div", { className: "flex items-center justify-center p-1 xl:p-1.5 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg xl:rounded-xl text-white", children: _jsxs("svg", { className: "h-3.5 w-3.5 xl:h-4 xl:w-4", 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-1.5 xl: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", { ref: (el) => {
+                                        if (el)
+                                            questionRefs.current.set(q.globalIndex, el);
+                                        else
+                                            questionRefs.current.delete(q.globalIndex);
+                                    }, type: "button", onClick: () => onQuestionClick(q.globalIndex), disabled: isNavDisabled, className: cn("h-[36px] xl:h-[40px] 2xl:h-[42px] w-full rounded-[9px] flex items-center justify-center font-bold text-[13px] xl:text-[14px] 2xl:text-[14.5px] transition-all border", btnStyle), children: q.subQuestionNumber !== undefined ? (_jsxs("span", { className: "inline-flex items-start justify-center leading-none", children: [_jsx("span", { children: q.questionNumber }), _jsxs("span", { className: "text-[9.5px] xl:text-[10.5px] opacity-75 font-semibold ml-0.5 -mt-0.5", children: [".", q.subQuestionNumber] })] })) : (q.questionNumber) }, q.globalIndex));
+                            }) }) })] })] }));
+}

package/dist/components/themes/cambridge-yle/CambridgeYleTimer.d.ts

@@ -3,5 +3,5 @@ interface CambridgeYleTimerProps {
     totalQuestions: number;
     answeredCount: number;
 }
-export declare function CambridgeYleTimer({ remainingSeconds, totalQuestions, answeredCount, }: CambridgeYleTimerProps): import("react").JSX.Element;
+export declare function CambridgeYleTimer({ remainingSeconds, }: CambridgeYleTimerProps): import("react").JSX.Element;
 export {};

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

@@ -1 +1,25 @@
-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})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import summerSkyClockImg from '../summer-sky/assets/images/clock.png';
+export function CambridgeYleTimer({ remainingSeconds, }) {
+    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-[76px] sm:w-[86px] md:w-[94px] lg:w-[100px] xl:w-[140px] 2xl:w-[160px] h-[26px] sm:h-[29px] md:h-[32px] lg:h-[34px] xl:h-[46px] 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-[29px] h-[29px] sm:w-[33px] sm:h-[33px] md:w-[37px] md:h-[37px] lg:w-[42px] lg:h-[42px] xl:w-[60px] xl:h-[60px] -ml-[2px] sm:-ml-[3px] md:-ml-[4px] lg:-ml-[6px] -mt-[3px] sm:-mt-[4px] md:-mt-[6px] lg:-mt-[8px] 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-[10px] sm:text-[11px] md:text-[13px] lg:text-[14px] xl:text-[21px] 2xl:text-[23px] leading-none tracking-[-0.03em] uppercase text-white pr-[3px] sm:pr-[4px] md:pr-[5px] lg:pr-[7px] xl:pr-[12px]", style: {
+                    fontFamily: "'SVN-Volte Rounded', 'Quicksand', sans-serif",
+                    textShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
+                }, children: formattedTime })] }));
+}

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

@@ -1 +1,13 @@
-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";
+// 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';

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

@@ -1 +1,25 @@
-"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";import{englishCertQuestionDomId as i}from"./english-cert-scroll";export function EcAnswerTheQuestion({part:l,answers:o,onAnswerChange:d,isReviewMode:c=!1}){const{questions:m,imageUrl:x,title:p}=t(()=>n(l.questions),[l.questions]);return s("div",{className:"flex flex-col gap-4",children:[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:m.map(t=>{const n=o[t.id]?.answer??t.exampleAnswer??"";return e("div",{id:i(t.id),className:a("scroll-mt-24 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:c,placeholder:"Enter your answer…",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]",c&&"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)})})]})}
+'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';
+import { englishCertQuestionDomId } from './english-cert-scroll';
+/**
+ * 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, imageUrl, title } = useMemo(() => transformAnswerTheQuestion(part.questions), [part.questions]);
+    const handleChange = (questionId, value) => {
+        onAnswerChange(questionId, { answer: value });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [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: englishCertQuestionDomId(q.id), className: cn('scroll-mt-24 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: "Enter your answer\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));
+                }) })] }));
+}

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

@@ -1 +1,89 @@
-"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";import{englishCertQuestionDomId as o}from"./english-cert-scroll";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),l={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",l[r]),children:t||"—"})}export function EcMatchByWritingAnswer({part:l,answers:c,onAnswerChange:m,isReviewMode:f=!1}){const{questions:b,options:p,groupImageUrl:x}=r(()=>a(l.questions),[l.questions]),u=r(()=>{const e=new Map;return p.forEach((t,r)=>{e.set(t.answer,i[r]??String(r+1))}),e},[p]),h=e=>c[e.id]?.answer??e.exampleAnswer??"",g=r(()=>{const e=new Set;return b.forEach(t=>{const r=h(t),n=u.get(r);n&&e.add(n)}),e},[b,c,u]);return t("div",{className:"flex flex-col gap-4",children:[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"})}),p.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:p.map((r,a)=>{const o=i[a]??String(a+1),l=!f&&g.has(o);return t("div",{className:s("flex items-start gap-2.5 rounded-xl border border-[#e2ecf8] bg-[#f4f9ff] px-3 py-2 transition-opacity",l&&"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:[o,l&&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:b.map(r=>{const a=h(r),l=u.get(a)??"",c=f&&r.isExample?a===(r.exampleAnswer??""):void 0,b=!0===c?"border-[#bbf7d0] bg-[#f0fdf4]":!1===c?"border-[#fecaca] bg-[#fef2f2]":"border-[#d9e4f2] bg-white/90",x=!0===c?"correct":!1===c?"wrong":l?"filled":"empty";return t("div",{id:o(r.id),className:s("scroll-mt-24 flex items-center gap-3 rounded-xl border p-3 shadow-sm transition-colors",b,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:l,tone:x}),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:f,onChange:e=>{return t=r.id,n=e.target.value,void m(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]",f&&"cursor-not-allowed opacity-70"),children:[e("option",{value:"",children:"—"}),p.map((t,n)=>{const s=i[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)})})]})}
+'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';
+import { englishCertQuestionDomId } from './english-cert-scroll';
+/** 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, 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: [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: englishCertQuestionDomId(q.id), className: cn('scroll-mt-24 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));
+                }) })] }));
+}

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

@@ -1 +1,56 @@
-"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 l}from"../../../components/exams/take/exam-taking.utils";import{englishCertQuestionDomId as o}from"./english-cert-scroll";export function EcWordFillParagraph({part:s,answers:i,onAnswerChange:d,isReviewMode:c=!1}){const m=r(()=>l(s.questions),[s.questions]),{questionId:p,paragraph:x,title:b,imageUrl:f,wordBank:h,viewMode:u}=m,g=i[p]||[],w=r(()=>x.split(/(\{\d+\})/),[x]),N="WITH_WORD_BANK"===u,v=new Set(g.filter(Boolean)),_=(e,t)=>{if(c)return;const r=[...g];r[e]=t,d(p,r)};return t("div",{id:o(p),className:"scroll-mt-24 flex flex-col gap-4",children:[f&&e("div",{className:"flex items-center justify-center",children:e(a,{src:f,alt:b||"Illustration",className:"max-h-[280px] rounded-lg object-contain shadow-md"})}),N&&h.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:h.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 l=r.match(/^\{(\d+)\}$/);if(!l)return e("span",{children:r},a);const o=parseInt(l[1],10),s=g[o]||"";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:["(",o+1,")"]}),t("select",{value:s,disabled:c,onChange:e=>_(o,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]",c&&"cursor-not-allowed opacity-70"),children:[e("option",{value:"",children:"———"}),h.filter(e=>!e.isExample).map((t,r)=>e("option",{value:t.word,children:t.word},`${o}-${r}`))]})]}:{className:"mx-1 inline-flex items-baseline gap-1 align-baseline",children:[t("span",{className:"text-[11px] font-bold text-[#1f7cff]",children:["(",o+1,")"]}),e("input",{type:"text",value:s,disabled:c,placeholder:"···",onChange:e=>_(o,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]",c&&"cursor-not-allowed opacity-70")})]},a)})})]})}
+'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';
+import { englishCertQuestionDomId } from './english-cert-scroll';
+/**
+ * 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 } = 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", { id: englishCertQuestionDomId(questionId), className: "scroll-mt-24 flex flex-col gap-4", children: [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));
+                }) })] }));
+}