@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/results/utils/transform-speaking-review.js

@@ -1 +1,183 @@
-import{ResultTemplateType as t}from"../../../api/result-review";export const SPEAKING_ANSWER_COMPLETED="completed";export const SPEAKING_STORY_IMAGES_TYPE="LISTEN_AND_SPEAK_WITH_STORY_IMAGES";function e(t){if(null==t)return null;if("string"==typeof t)return t||null;if("object"==typeof t&&null!==t){const e=t;if("string"==typeof e.answer)return e.answer||null;if("string"==typeof e.audioKey)return e.audioKey||null;if("string"==typeof e.objectId)return"completed"}return null}function n(t){if(!t||"object"!=typeof t)return"";const e=t;return"string"==typeof e.audioUrl?e.audioUrl:"string"==typeof e.audio?e.audio:"string"==typeof e.questionAudio?e.questionAudio:"string"==typeof e.interlocutorAudioUrl?e.interlocutorAudioUrl:""}function o(t){if(!t||"object"!=typeof t)return"";const e=t;return"string"==typeof e.partnerAudioUrl?e.partnerAudioUrl:""}function r(t){const e=null!=t.sectionId?`_${t.sectionId}`:"";return`${t.partId??"unknown"}_${t.questionType}${e}`}function s(t,e,n){if(n<=1)return`Part ${t}`;return`Part ${t}${String.fromCharCode(97+e)}`}export function transformSpeakingResultForReview(t,i,u){const{answers:a,examName:c,submittedAt:l,totalScore:p,maxScore:d,isPendingGrading:f}=t,m=Boolean(f),g=new Map;for(const t of a){const e=r(t),n=g.get(e);n?n.push(t):g.set(e,[t])}const A=new Map,S=new Map;for(const[,t]of g){const e=t[0]?.partNo??0;S.set(e,(S.get(e)??0)+1)}const q=[];for(const[,t]of g){t.sort((t,e)=>t.questionNumber-e.questionNumber);const r=t[0];if(!r)continue;const i=r.partId??"unknown",a=r.partNo??0,c=r.questionType,l=r.sectionId,p=A.get(a)??0;A.set(a,p+1);const d=u?.find(t=>String(t.id)===String(i));let f,g=d?.instructions??"";if(d?.sections&&null!=l){const t=d.sections.find(t=>t.sectionId===l);if(t?.name)f=t.name;else{f=s(a,p,S.get(a)??1)}t?.instructions&&(g=t.instructions)}else{f=s(a,p,S.get(a)??1)}const N=`Part ${a}`,y=t.map((t,r)=>{const s=(i=t.studentAnswer)&&"object"==typeof i?i:null;var i;return{questionId:t.questionId,answerId:t.id??t.questionId,questionNumber:r+1,audioUrl:n(t.questionContent),studentAnswerKey:e(t.studentAnswer),isExample:t.isExample??!1,partnerAudioUrl:o(t.questionContent),score:t.score,maxScore:t.maxScore,isPendingGrading:m,isCorrect:t.isCorrect,questionType:t.questionType,questionContent:t.questionContent,studentAnswer:t.studentAnswer,correctAnswer:t.correctAnswer,questionGroup:t.questionGroup??null,aiAssessment:s?.aiAssessment,llmAssessment:s?.llmAssessment,classification:s?.classification,gradingStatus:t.gradingStatus??null}});let I=r.questionGroup?.payload??null;if(c===SPEAKING_STORY_IMAGES_TYPE&&!I){const t=r.questionContent;t?.images&&(I={images:t.images})}q.push({partId:i,partNo:a,partName:N,partSectionName:f,instructions:g,questionType:c,questions:y,groupPayload:I})}return q.sort((t,e)=>t.partNo!==e.partNo?t.partNo-e.partNo:(t.questions[0]?.questionNumber??0)-(e.questions[0]?.questionNumber??0)),{parts:q,examName:c??"",examSubTitle:t.roomName??"",studentName:i,submittedAt:String(l??""),totalScore:m?null:p,maxScore:d,isPendingGrading:m}}export function isSpeakingTemplateType(e){return e===t.SPEAKING}
+/**
+ * Transform DetailedResult API response to SpeakingReviewData format.
+ * Source: oe-exam-fe/.../speaking-review/_utils/transform-speaking-review.ts
+ */
+import { ResultTemplateType, } from '../../../api/result-review';
+export const SPEAKING_ANSWER_COMPLETED = 'completed';
+export const SPEAKING_STORY_IMAGES_TYPE = 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES';
+function extractStudentAnswerKey(studentAnswer) {
+    if (studentAnswer === null || studentAnswer === undefined) {
+        return null;
+    }
+    if (typeof studentAnswer === 'string') {
+        return studentAnswer || null;
+    }
+    if (typeof studentAnswer === 'object' && studentAnswer !== null) {
+        const obj = studentAnswer;
+        if (typeof obj['answer'] === 'string') {
+            return obj['answer'] || null;
+        }
+        if (typeof obj['audioKey'] === 'string') {
+            return obj['audioKey'] || null;
+        }
+        if (typeof obj['objectId'] === 'string')
+            return SPEAKING_ANSWER_COMPLETED;
+    }
+    return null;
+}
+function extractQuestionAudioUrl(questionContent) {
+    if (!questionContent || typeof questionContent !== 'object')
+        return '';
+    const content = questionContent;
+    if (typeof content['audioUrl'] === 'string')
+        return content['audioUrl'];
+    if (typeof content['audio'] === 'string')
+        return content['audio'];
+    if (typeof content['questionAudio'] === 'string')
+        return content['questionAudio'];
+    if (typeof content['interlocutorAudioUrl'] === 'string')
+        return content['interlocutorAudioUrl'];
+    return '';
+}
+function extractPartnerAudioUrl(questionContent) {
+    if (!questionContent || typeof questionContent !== 'object')
+        return '';
+    const content = questionContent;
+    if (typeof content['partnerAudioUrl'] === 'string')
+        return content['partnerAudioUrl'];
+    return '';
+}
+function buildSectionKey(answer) {
+    const sectionSuffix = answer.sectionId != null ? `_${answer.sectionId}` : '';
+    return `${answer.partId ?? 'unknown'}_${answer.questionType}${sectionSuffix}`;
+}
+function deriveSectionName(partNo, sectionIdx, totalSections) {
+    if (totalSections <= 1) {
+        return `Part ${partNo}`;
+    }
+    const suffix = String.fromCharCode(97 + sectionIdx);
+    return `Part ${partNo}${suffix}`;
+}
+function asAnswerRecord(value) {
+    if (!value || typeof value !== 'object')
+        return null;
+    return value;
+}
+/**
+ * Main transformer: convert ResultReviewDetail to SpeakingReviewData.
+ */
+export function transformSpeakingResultForReview(result, studentName, templateParts) {
+    const { answers, examName, submittedAt, totalScore, maxScore, isPendingGrading } = result;
+    const pending = Boolean(isPendingGrading);
+    const sectionMap = new Map();
+    for (const answer of answers) {
+        const key = buildSectionKey(answer);
+        const bucket = sectionMap.get(key);
+        if (bucket) {
+            bucket.push(answer);
+        }
+        else {
+            sectionMap.set(key, [answer]);
+        }
+    }
+    const partSectionCounters = new Map();
+    const partSectionTotals = new Map();
+    for (const [, sectionAnswers] of sectionMap) {
+        const partNo = sectionAnswers[0]?.partNo ?? 0;
+        partSectionTotals.set(partNo, (partSectionTotals.get(partNo) ?? 0) + 1);
+    }
+    const parts = [];
+    for (const [, sectionAnswers] of sectionMap) {
+        sectionAnswers.sort((a, b) => a.questionNumber - b.questionNumber);
+        const firstAnswer = sectionAnswers[0];
+        if (!firstAnswer)
+            continue;
+        const partId = firstAnswer.partId ?? 'unknown';
+        const partNo = firstAnswer.partNo ?? 0;
+        const questionType = firstAnswer.questionType;
+        const sectionId = firstAnswer.sectionId;
+        const sectionIdx = partSectionCounters.get(partNo) ?? 0;
+        partSectionCounters.set(partNo, sectionIdx + 1);
+        const templatePart = templateParts?.find((tp) => String(tp.id) === String(partId));
+        let instructions = templatePart?.instructions ?? '';
+        let partSectionName;
+        if (templatePart?.sections && sectionId != null) {
+            const templateSection = templatePart.sections.find((section) => section.sectionId === sectionId);
+            if (templateSection?.name) {
+                partSectionName = templateSection.name;
+            }
+            else {
+                const totalSections = partSectionTotals.get(partNo) ?? 1;
+                partSectionName = deriveSectionName(partNo, sectionIdx, totalSections);
+            }
+            if (templateSection?.instructions) {
+                instructions = templateSection.instructions;
+            }
+        }
+        else {
+            const totalSections = partSectionTotals.get(partNo) ?? 1;
+            partSectionName = deriveSectionName(partNo, sectionIdx, totalSections);
+        }
+        const partName = `Part ${partNo}`;
+        const questions = sectionAnswers.map((answer, idx) => {
+            const studentAnswerRecord = asAnswerRecord(answer.studentAnswer);
+            return {
+                questionId: answer.questionId,
+                answerId: answer.id ?? answer.questionId,
+                questionNumber: idx + 1,
+                audioUrl: extractQuestionAudioUrl(answer.questionContent),
+                studentAnswerKey: extractStudentAnswerKey(answer.studentAnswer),
+                isExample: answer.isExample ?? false,
+                partnerAudioUrl: extractPartnerAudioUrl(answer.questionContent),
+                score: answer.score,
+                maxScore: answer.maxScore,
+                isPendingGrading: pending,
+                isCorrect: answer.isCorrect,
+                questionType: answer.questionType,
+                questionContent: answer.questionContent,
+                studentAnswer: answer.studentAnswer,
+                correctAnswer: answer.correctAnswer,
+                questionGroup: answer.questionGroup ?? null,
+                aiAssessment: studentAnswerRecord?.['aiAssessment'],
+                llmAssessment: studentAnswerRecord?.['llmAssessment'],
+                classification: studentAnswerRecord?.['classification'],
+                gradingStatus: answer.gradingStatus ?? null,
+            };
+        });
+        let groupPayload = firstAnswer.questionGroup?.payload ?? null;
+        if (questionType === SPEAKING_STORY_IMAGES_TYPE && !groupPayload) {
+            const content = firstAnswer.questionContent;
+            if (content?.['images']) {
+                groupPayload = { images: content['images'] };
+            }
+        }
+        parts.push({
+            partId,
+            partNo,
+            partName,
+            partSectionName,
+            instructions,
+            questionType,
+            questions,
+            groupPayload,
+        });
+    }
+    parts.sort((a, b) => {
+        if (a.partNo !== b.partNo)
+            return a.partNo - b.partNo;
+        return (a.questions[0]?.questionNumber ?? 0) - (b.questions[0]?.questionNumber ?? 0);
+    });
+    return {
+        parts,
+        examName: examName ?? '',
+        examSubTitle: result.roomName ?? '',
+        studentName,
+        submittedAt: String(submittedAt ?? ''),
+        totalScore: pending ? null : totalScore,
+        maxScore,
+        isPendingGrading: pending,
+    };
+}
+export function isSpeakingTemplateType(type) {
+    return type === ResultTemplateType.SPEAKING;
+}

package/dist/components/shared/RichTextEditor.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface RichTextEditorProps {
+    value?: string;
+    onChange: (html: string) => void;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    minHeightClassName?: string;
+}
+export declare function RichTextEditor({ value, onChange, label, disabled, minHeightClassName, }: RichTextEditorProps): React.JSX.Element;

package/dist/components/shared/RichTextEditor.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+const EMPTY_CONTENT = '<p></p>';
+const HEADING_LEVELS = [1, 2, 3];
+function getToolbarButtonClass(isActive) {
+    return `rounded px-3 py-1 text-sm ${isActive ? 'bg-blue-500 text-white' : 'border bg-white text-gray-700 hover:bg-gray-100'}`;
+}
+export function RichTextEditor({ value, onChange, label, disabled = false, minHeightClassName = 'min-h-[250px]', }) {
+    const [mounted, setMounted] = useState(false);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: [StarterKit],
+        editable: !disabled,
+        content: value || EMPTY_CONTENT,
+        onUpdate: ({ editor: currentEditor }) => {
+            onChange(currentEditor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: `tiptap-editor focus:outline-none ${minHeightClassName} p-4 bg-white border border-gray-200 rounded-b-md prose prose-sm max-w-none`,
+            },
+        },
+    });
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    useEffect(() => {
+        editor?.setEditable(!disabled);
+    }, [disabled, editor]);
+    useEffect(() => {
+        const nextValue = value || EMPTY_CONTENT;
+        if (editor && nextValue !== editor.getHTML()) {
+            setTimeout(() => editor.commands.setContent(nextValue), 0);
+        }
+    }, [value, editor]);
+    if (!mounted) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [label ? _jsx("div", { children: label }) : null, _jsxs("div", { className: "flex flex-col rounded-md border border-gray-300 shadow-sm", children: [_jsxs("div", { className: "relative flex flex-wrap gap-2 rounded-t-md border-b border-gray-300 bg-gray-50 p-2", children: [_jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBold().run(), disabled: disabled || !editor?.can().chain().focus().toggleBold().run(), className: `${getToolbarButtonClass(!!editor?.isActive('bold'))} font-bold`, children: "B" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleItalic().run(), disabled: disabled || !editor?.can().chain().focus().toggleItalic().run(), className: `${getToolbarButtonClass(!!editor?.isActive('italic'))} italic`, children: "I" }), _jsx("div", { className: "mx-1 h-6 w-px self-center bg-gray-300" }), HEADING_LEVELS.map((level) => (_jsxs("button", { type: "button", onClick: () => editor
+                                    ?.chain()
+                                    .focus()
+                                    .toggleHeading({ level })
+                                    .run(), disabled: disabled, className: `${getToolbarButtonClass(!!editor?.isActive('heading', { level }))} font-bold`, children: ["H", level] }, level))), _jsx("div", { className: "mx-1 h-6 w-px self-center bg-gray-300" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBulletList().run(), disabled: disabled, className: getToolbarButtonClass(!!editor?.isActive('bulletList')), children: "\u2022 List" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleOrderedList().run(), disabled: disabled, className: getToolbarButtonClass(!!editor?.isActive('orderedList')), children: "1. List" })] }), _jsx(EditorContent, { editor: editor })] })] }));
+}

package/dist/components/shared/audio/SpeakingAudioPlayer.js

@@ -1 +1,100 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as r}from"react";import{Pause as i,Play as o}from"lucide-react";import{usePresignedFileUrl as d}from"../../../shared/lib/hooks/usePresignedFileUrl";import{useDelayedAutoPlay as l}from"../../../shared/lib/hooks/useDelayedAutoPlay";import s from"./SpeakingAudioPlayer.module.css";const u=[.4,.6,.85,.55,.75,1,.65,.45,.7,.9,.6,.5,.8,.65,.95,.7,.5,.6,.8,.45];export function SpeakingAudioPlayer({audioUrl:c,onPlayingChange:m,autoPlay:p=!1}){const v=t(null),[h,y]=n(!1),[g,f]=n(0),[L,E]=n(0),{previewUrl:N}=d(c||void 0);r(()=>{const e=v.current;if(!e)return;const a=()=>{e.duration&&!isNaN(e.duration)&&isFinite(e.duration)&&E(e.duration)},t=()=>{f(e.currentTime),a()},n=()=>{y(!0),m?.(!0)},r=()=>{y(!1),m?.(!1)},i=()=>{y(!1),f(0),m?.(!1)};return a(),e.addEventListener("loadedmetadata",a),e.addEventListener("durationchange",a),e.addEventListener("canplay",a),e.addEventListener("timeupdate",t),e.addEventListener("play",n),e.addEventListener("pause",r),e.addEventListener("ended",i),()=>{e.removeEventListener("loadedmetadata",a),e.removeEventListener("durationchange",a),e.removeEventListener("canplay",a),e.removeEventListener("timeupdate",t),e.removeEventListener("play",n),e.removeEventListener("pause",r),e.removeEventListener("ended",i)}},[N]),r(()=>{y(!1),f(0),E(0)},[N]),l({audioRef:v,audioUrl:N,enabled:p});const b=L>0?g/L:0,P=!N;return a("div",{className:s.audioPill,children:[e("audio",{ref:v,...N?{src:N}:{},preload:"metadata"}),e("button",{type:"button",className:`${s.playButton} ${h?s.playButtonPlaying:""} ${P?s.playButtonDisabled:""}`,onClick:P?void 0:()=>{const e=v.current;e&&(h?e.pause():e.play().catch(e=>{console.warn("Audio play request was interrupted:",e)}))},disabled:P,"aria-label":P?"Không có âm thanh đính kèm":h?"Tạm dừng":"Nghe câu hỏi",title:P?"Không có âm thanh đính kèm":h?"Tạm dừng":"Nghe câu hỏi",children:h?e(i,{className:s.playIcon,fill:"currentColor"}):e(o,{className:s.playIcon,fill:"currentColor",style:{marginLeft:"2px"}})}),e("div",{className:s.waveform,"aria-hidden":"true",children:u.map((a,t)=>{const n=(t+.5)/u.length<=b;return e("span",{className:`${s.waveBar} ${h&&n?s.waveBarPlaying:""}`,style:{height:100*a+"%",background:n?"linear-gradient(180deg, #ffc93c, #ff9900)":"#d8e0ea",animationDelay:h&&n?t%6*.1+"s":void 0}},t)})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SpeakingAudioPlayer
+ *
+ * A small, simple, kid-friendly "listen to the question" audio player for light
+ * backgrounds (Summer Sky theme). Renders a compact pill: a sky-blue play/replay
+ * button + a sunny-amber waveform that fills left→right with playback progress
+ * (display-only — no fiddly seek, no time digits). Optionally auto-plays a few
+ * seconds after a new question loads. Used by speaking renderers (e.g. describe-image).
+ */
+import { useRef, useState, useEffect } from 'react';
+import { Pause, Play } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
+import { useDelayedAutoPlay } from '../../../shared/lib/hooks/useDelayedAutoPlay';
+import styles from './SpeakingAudioPlayer.module.css';
+// Fixed waveform shape (bar heights, 0–1). Bars span the full width; played
+// bars are tinted amber, the rest stay grey.
+const WAVEFORM = [
+    0.4, 0.6, 0.85, 0.55, 0.75, 1, 0.65, 0.45, 0.7, 0.9,
+    0.6, 0.5, 0.8, 0.65, 0.95, 0.7, 0.5, 0.6, 0.8, 0.45,
+];
+export function SpeakingAudioPlayer({ audioUrl, onPlayingChange, autoPlay = false }) {
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const { previewUrl: resolvedAudioUrl } = usePresignedFileUrl(audioUrl || undefined);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const updateDuration = () => {
+            if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
+                setDuration(audio.duration);
+            }
+        };
+        const handleTimeUpdate = () => {
+            setCurrentTime(audio.currentTime);
+            updateDuration();
+        };
+        // Drive playing state from the element itself so both manual clicks and
+        // delayed auto-play stay in sync with the UI.
+        const handlePlay = () => { setIsPlaying(true); onPlayingChange?.(true); };
+        const handlePause = () => { setIsPlaying(false); onPlayingChange?.(false); };
+        const handleEnded = () => {
+            setIsPlaying(false);
+            setCurrentTime(0);
+            onPlayingChange?.(false);
+        };
+        updateDuration();
+        audio.addEventListener('loadedmetadata', updateDuration);
+        audio.addEventListener('durationchange', updateDuration);
+        audio.addEventListener('canplay', updateDuration);
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('play', handlePlay);
+        audio.addEventListener('pause', handlePause);
+        audio.addEventListener('ended', handleEnded);
+        return () => {
+            audio.removeEventListener('loadedmetadata', updateDuration);
+            audio.removeEventListener('durationchange', updateDuration);
+            audio.removeEventListener('canplay', updateDuration);
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('play', handlePlay);
+            audio.removeEventListener('pause', handlePause);
+            audio.removeEventListener('ended', handleEnded);
+        };
+    }, [resolvedAudioUrl]);
+    useEffect(() => {
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+    }, [resolvedAudioUrl]);
+    // Auto-play (default 3s delay) when a new question audio loads, if enabled.
+    // The hook retries on first interaction if the browser blocks autoplay.
+    useDelayedAutoPlay({ audioRef, audioUrl: resolvedAudioUrl, enabled: autoPlay });
+    const handlePlayPause = () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (isPlaying) {
+            audio.pause();
+        }
+        else {
+            audio.play().catch((err) => {
+                console.warn('Audio play request was interrupted:', err);
+            });
+        }
+    };
+    const progressRatio = duration > 0 ? currentTime / duration : 0;
+    const isDisabled = !resolvedAudioUrl;
+    return (_jsxs("div", { className: styles.audioPill, children: [_jsx("audio", { ref: audioRef, ...(resolvedAudioUrl ? { src: resolvedAudioUrl } : {}), preload: "metadata" }), _jsx("button", { type: "button", className: `${styles.playButton} ${isPlaying ? styles.playButtonPlaying : ''} ${isDisabled ? styles.playButtonDisabled : ''}`, onClick: isDisabled ? undefined : handlePlayPause, disabled: isDisabled, "aria-label": isDisabled ? 'Không có âm thanh đính kèm' : isPlaying ? 'Tạm dừng' : 'Nghe câu hỏi', title: isDisabled ? 'Không có âm thanh đính kèm' : isPlaying ? 'Tạm dừng' : 'Nghe câu hỏi', children: isPlaying ? (_jsx(Pause, { className: styles.playIcon, fill: "currentColor" })) : (_jsx(Play, { className: styles.playIcon, fill: "currentColor", style: { marginLeft: '2px' } })) }), _jsx("div", { className: styles.waveform, "aria-hidden": "true", children: WAVEFORM.map((h, i) => {
+                    const played = (i + 0.5) / WAVEFORM.length <= progressRatio;
+                    return (_jsx("span", { className: `${styles.waveBar} ${isPlaying && played ? styles.waveBarPlaying : ''}`, style: {
+                            height: `${h * 100}%`,
+                            background: played ? 'linear-gradient(180deg, #ffc93c, #ff9900)' : '#d8e0ea',
+                            animationDelay: isPlaying && played ? `${(i % 6) * 0.1}s` : undefined,
+                        } }, i));
+                }) })] }));
+}

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

@@ -1 +1,140 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as a,useState as r,useEffect as l,useMemo as n}from"react";import{Pause as s,Play as i,RotateCcw as o}from"lucide-react";import{usePresignedFileUrl as d}from"../../../shared/lib/hooks/usePresignedFileUrl";const c=[.75,1,1.25,1.5];export default function u({audioSrc:u,onPlay:h,onPause:m,compact:b=!1,dense:f=!1}){const{previewUrl:p}=d(u),v=a(null),[x,g]=r(!1),[w,N]=r(0),[y,k]=r(0),[M,L]=r(1),E=n(()=>{const e=[];let t=7;for(let a=0;a<j;a++){t=(9301*t+49297)%233280;const r=.25+t/233280*.75,l=.25*Math.sin(a/(j-1)*Math.PI)+.75;e.push(Math.max(.2,r*l))}return e},[j=48]);var j;l(()=>{const e=v.current;if(!e)return;const t=()=>{e.duration&&!isNaN(e.duration)&&isFinite(e.duration)&&k(e.duration)},a=()=>{N(e.currentTime),t()},r=()=>{g(!1),N(0)};return t(),e.addEventListener("loadedmetadata",t),e.addEventListener("durationchange",t),e.addEventListener("canplay",t),e.addEventListener("timeupdate",a),e.addEventListener("ended",r),()=>{e.removeEventListener("loadedmetadata",t),e.removeEventListener("durationchange",t),e.removeEventListener("canplay",t),e.removeEventListener("timeupdate",a),e.removeEventListener("ended",r)}},[]),l(()=>{v.current&&(v.current.playbackRate=M)},[M]);const C=()=>{const e=v.current;e&&(x?(e.pause(),g(!1),m?.()):(e.play().catch(()=>{g(!1)}),g(!0),h?.()))},P=e=>{const t=Math.max(0,e),a=Math.floor(t/60),r=Math.floor(t%60);return`${String(a).padStart(2,"0")}:${String(r).padStart(2,"0")}`},S=y>0?w/y:0,T=100*S,$=Math.max(0,y-w);if(b)return t("div",{className:f?"relative w-full overflow-hidden rounded-2xl border-2 border-blue-200/90 bg-gradient-to-r from-blue-50/90 via-white to-blue-50/90 p-2.5 sm:p-3 shadow-xs transition-all hover:border-blue-400 hover:shadow-sm":"relative w-full overflow-hidden rounded-2xl border-2 border-blue-200/90 bg-gradient-to-r from-blue-50/90 via-white to-blue-50/90 p-3 sm:p-4 shadow-xs transition-all hover:border-blue-400 hover:shadow-sm",children:[e("audio",{ref:v,src:p||void 0,preload:"metadata"}),t("div",{className:"flex items-center gap-3 sm:gap-4",children:[t("button",{type:"button",onClick:C,className:(f?"h-10 w-10 sm:h-11 sm:w-11":"h-12 w-12")+" relative flex shrink-0 items-center justify-center rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-500/30 transition-all duration-200 hover:scale-105 hover:from-blue-700 hover:to-indigo-700 active:scale-95","aria-label":x?"Pause":"Play",children:[x?e(s,{className:(f?"h-4 w-4 sm:h-5 sm:w-5":"h-5 w-5")+" fill-current"}):e(i,{className:(f?"ml-0.5 h-4 w-4 sm:h-5 sm:w-5":"ml-0.5 h-5 w-5")+" fill-current"}),x&&e("span",{className:"pointer-events-none absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-40"})]}),t("div",{className:"flex min-w-0 flex-1 flex-col justify-center gap-1.5",children:[t("div",{className:"flex items-center justify-between px-0.5",children:[e("span",{className:"text-xs font-black uppercase tracking-widest text-blue-900",children:"AUDIO"}),t("div",{className:"flex items-center gap-1 rounded-md bg-white px-2 py-0.5 text-xs font-mono font-bold text-slate-600 border border-blue-100 shadow-2xs",children:[e("span",{className:"text-blue-600",children:P(w)}),e("span",{className:"text-slate-300",children:"/"}),e("span",{children:P(y)})]})]}),t("div",{className:"relative flex items-center",children:[e("div",{className:"h-2.5 w-full overflow-hidden rounded-full bg-blue-100/80 shadow-inner",children:e("div",{className:"h-full rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 transition-[width] duration-150",style:{width:`${T}%`}})}),e("input",{type:"range",min:"0",max:y||0,step:"0.1",value:w,onChange:e=>{const t=parseFloat(e.target.value);v.current&&(v.current.currentTime=t),N(t)},className:"absolute inset-0 w-full cursor-pointer opacity-0","aria-label":"Seek"})]})]})]})]});const F=56,D=26.5,I=2*Math.PI*D;return t("div",{className:"relative overflow-hidden rounded-2xl border-2 border-blue-100 bg-white p-3.5 shadow-sm transition-shadow hover:border-blue-200 hover:shadow-md",children:[e("audio",{ref:v,src:p||void 0,preload:"metadata"}),e("div",{className:"pointer-events-none absolute -right-6 -top-6 h-20 w-20 rounded-full bg-blue-100 opacity-60 blur-xl"}),t("div",{className:"relative flex items-center gap-3",children:[t("button",{type:"button",onClick:()=>{const e=v.current;e&&(e.currentTime=Math.max(0,e.currentTime-5),N(e.currentTime))},className:"relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-blue-600 active:scale-95","aria-label":"Rewind 5 seconds",title:"Quay lại 5 giây",children:[e(o,{className:"h-4 w-4",strokeWidth:2.5}),e("span",{className:"pointer-events-none absolute bottom-1 right-1 text-[8px] font-black leading-none",children:"5"})]}),t("div",{className:"relative shrink-0",style:{width:F,height:F},children:[t("svg",{width:F,height:F,className:"absolute inset-0 -rotate-90","aria-hidden":!0,children:[e("circle",{cx:28,cy:28,r:D,fill:"none",stroke:"rgb(239 246 255)",strokeWidth:3}),e("circle",{cx:28,cy:28,r:D,fill:"none",stroke:"url(#audio-ring-gradient)",strokeWidth:3,strokeLinecap:"round",strokeDasharray:I,strokeDashoffset:I*(1-S),className:"transition-[stroke-dashoffset] duration-150"}),e("defs",{children:t("linearGradient",{id:"audio-ring-gradient",x1:"0",y1:"0",x2:"1",y2:"1",children:[e("stop",{offset:"0%",stopColor:"#3B82F6"}),e("stop",{offset:"100%",stopColor:"#06b6d4"})]})})]}),t("button",{type:"button",onClick:C,className:"absolute inset-1.5 flex items-center justify-center rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-500/30 transition-all hover:shadow-xl hover:shadow-blue-500/50 hover:from-blue-700 hover:to-indigo-700 active:scale-95","aria-label":x?"Pause":"Play",children:[x?e(s,{className:"h-4 w-4 fill-current"}):e(i,{className:"ml-0.5 h-4 w-4 fill-current"}),x&&e("span",{className:"pointer-events-none absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-40"})]})]}),t("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[e("div",{onClick:e=>{const t=v.current;if(!t||!y)return;const a=e.currentTarget.getBoundingClientRect(),r=Math.min(1,Math.max(0,(e.clientX-a.left)/a.width))*y;t.currentTime=r,N(r)},className:"group/wave relative flex h-8 cursor-pointer items-center gap-[2px]",role:"slider","aria-label":"Seek","aria-valuemin":0,"aria-valuemax":y||0,"aria-valuenow":w,children:E.map((t,a)=>{const r=(a+.5)/48,l=r<=S,n=Math.abs(r-S)<1/48/2;return e("span",{className:`flex-1 rounded-full transition-all duration-200 ${l?"bg-blue-500":"bg-slate-200 group-hover/wave:bg-slate-300"} ${n&&x?"animate-wave-pulse":""}`,style:{height:100*t+"%"}},a)})}),t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-baseline gap-1.5",children:[t("span",{className:"font-mono text-sm font-bold tabular-nums text-slate-800",children:["−",P($)]}),t("span",{className:"font-mono text-[10px] tabular-nums text-slate-400",children:["/ ",P(y)]})]}),e("div",{className:"flex items-center gap-0.5 rounded-full border border-slate-200 bg-white p-0.5 shadow-sm",children:c.map(e=>t("button",{type:"button",onClick:()=>L(e),className:"rounded-full px-2 py-0.5 font-mono text-[10px] font-semibold tabular-nums transition-all "+(M===e?"bg-coral-500 text-white shadow-sm":"text-slate-500 hover:bg-slate-100 hover:text-slate-700"),children:[e,"×"]},e))})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { Pause, Play, RotateCcw } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
+const PLAYBACK_SPEEDS = [0.75, 1, 1.25, 1.5];
+const WAVEFORM_BARS = 48;
+/** Deterministic pseudo-random bar heights — stable per render, no flicker on re-render. */
+function useWaveformHeights(count) {
+    return useMemo(() => {
+        const heights = [];
+        let seed = 7;
+        for (let i = 0; i < count; i++) {
+            // LCG-like deterministic noise
+            seed = (seed * 9301 + 49297) % 233280;
+            const rnd = seed / 233280;
+            // Bias towards mid-range heights for a natural-looking waveform
+            const h = 0.25 + rnd * 0.75;
+            // Soft envelope — taller in the middle, shorter at edges
+            const envelope = Math.sin((i / (count - 1)) * Math.PI) * 0.25 + 0.75;
+            heights.push(Math.max(0.2, h * envelope));
+        }
+        return heights;
+    }, [count]);
+}
+export default function CambridgeYleAudioPlayer({ audioSrc, onPlay, onPause, compact = false, dense = false, }) {
+    const { previewUrl: resolvedAudioSrc } = usePresignedFileUrl(audioSrc);
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [speed, setSpeed] = useState(1);
+    const barHeights = useWaveformHeights(WAVEFORM_BARS);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const updateDuration = () => {
+            if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
+                setDuration(audio.duration);
+            }
+        };
+        const handleTimeUpdate = () => {
+            setCurrentTime(audio.currentTime);
+            updateDuration();
+        };
+        const handleEnded = () => {
+            setIsPlaying(false);
+            setCurrentTime(0);
+        };
+        updateDuration();
+        audio.addEventListener('loadedmetadata', updateDuration);
+        audio.addEventListener('durationchange', updateDuration);
+        audio.addEventListener('canplay', updateDuration);
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('ended', handleEnded);
+        return () => {
+            audio.removeEventListener('loadedmetadata', updateDuration);
+            audio.removeEventListener('durationchange', updateDuration);
+            audio.removeEventListener('canplay', updateDuration);
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('ended', handleEnded);
+        };
+    }, []);
+    useEffect(() => {
+        if (audioRef.current)
+            audioRef.current.playbackRate = speed;
+    }, [speed]);
+    const handlePlayPause = () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (isPlaying) {
+            audio.pause();
+            setIsPlaying(false);
+            onPause?.();
+        }
+        else {
+            audio.play().catch(() => {
+                // Source unplayable — reset UI instead of leaving a floating rejection.
+                setIsPlaying(false);
+            });
+            setIsPlaying(true);
+            onPlay?.();
+        }
+    };
+    const handleRewind = () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        audio.currentTime = Math.max(0, audio.currentTime - 5);
+        setCurrentTime(audio.currentTime);
+    };
+    const handleWaveformClick = (e) => {
+        const audio = audioRef.current;
+        if (!audio || !duration)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+        const newTime = ratio * duration;
+        audio.currentTime = newTime;
+        setCurrentTime(newTime);
+    };
+    const formatTime = (time) => {
+        const safe = Math.max(0, time);
+        const minutes = Math.floor(safe / 60);
+        const seconds = Math.floor(safe % 60);
+        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+    };
+    const progress = duration > 0 ? currentTime / duration : 0;
+    const progressPct = progress * 100;
+    const remaining = Math.max(0, duration - currentTime);
+    // --------------------- COMPACT MODE ---------------------
+    if (compact) {
+        return (_jsxs("div", { className: dense
+                ? 'relative w-full overflow-hidden rounded-2xl border-2 border-blue-200/90 bg-gradient-to-r from-blue-50/90 via-white to-blue-50/90 p-2.5 sm:p-3 shadow-xs transition-all hover:border-blue-400 hover:shadow-sm'
+                : 'relative w-full overflow-hidden rounded-2xl border-2 border-blue-200/90 bg-gradient-to-r from-blue-50/90 via-white to-blue-50/90 p-3 sm:p-4 shadow-xs transition-all hover:border-blue-400 hover:shadow-sm', children: [_jsx("audio", { ref: audioRef, src: resolvedAudioSrc || undefined, preload: "metadata" }), _jsxs("div", { className: "flex items-center gap-3 sm:gap-4", children: [_jsxs("button", { type: "button", onClick: handlePlayPause, className: `${dense ? 'h-10 w-10 sm:h-11 sm:w-11' : 'h-12 w-12'} relative flex shrink-0 items-center justify-center rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-500/30 transition-all duration-200 hover:scale-105 hover:from-blue-700 hover:to-indigo-700 active:scale-95`, "aria-label": isPlaying ? 'Pause' : 'Play', children: [isPlaying ? (_jsx(Pause, { className: `${dense ? 'h-4 w-4 sm:h-5 sm:w-5' : 'h-5 w-5'} fill-current` })) : (_jsx(Play, { className: `${dense ? 'ml-0.5 h-4 w-4 sm:h-5 sm:w-5' : 'ml-0.5 h-5 w-5'} fill-current` })), isPlaying && (_jsx("span", { className: "pointer-events-none absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-40" }))] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between px-0.5", children: [_jsx("span", { className: "text-xs font-black uppercase tracking-widest text-blue-900", children: "AUDIO" }), _jsxs("div", { className: "flex items-center gap-1 rounded-md bg-white px-2 py-0.5 text-xs font-mono font-bold text-slate-600 border border-blue-100 shadow-2xs", children: [_jsx("span", { className: "text-blue-600", children: formatTime(currentTime) }), _jsx("span", { className: "text-slate-300", children: "/" }), _jsx("span", { children: formatTime(duration) })] })] }), _jsxs("div", { className: "relative flex items-center", children: [_jsx("div", { className: "h-2.5 w-full overflow-hidden rounded-full bg-blue-100/80 shadow-inner", children: _jsx("div", { className: "h-full rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 transition-[width] duration-150", style: { width: `${progressPct}%` } }) }), _jsx("input", { type: "range", min: "0", max: duration || 0, step: "0.1", value: currentTime, onChange: (e) => {
+                                                const newTime = parseFloat(e.target.value);
+                                                if (audioRef.current)
+                                                    audioRef.current.currentTime = newTime;
+                                                setCurrentTime(newTime);
+                                            }, className: "absolute inset-0 w-full cursor-pointer opacity-0", "aria-label": "Seek" })] })] })] })] }));
+    }
+    // --------------------- FULL MODE ---------------------
+    // Circular progress ring math
+    const RING_SIZE = 56;
+    const RING_STROKE = 3;
+    const RING_RADIUS = (RING_SIZE - RING_STROKE) / 2;
+    const RING_CIRC = 2 * Math.PI * RING_RADIUS;
+    return (_jsxs("div", { className: "relative overflow-hidden rounded-2xl border-2 border-blue-100 bg-white p-3.5 shadow-sm transition-shadow hover:border-blue-200 hover:shadow-md", children: [_jsx("audio", { ref: audioRef, src: resolvedAudioSrc || undefined, preload: "metadata" }), _jsx("div", { className: "pointer-events-none absolute -right-6 -top-6 h-20 w-20 rounded-full bg-blue-100 opacity-60 blur-xl" }), _jsxs("div", { className: "relative flex items-center gap-3", children: [_jsxs("button", { type: "button", onClick: handleRewind, className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-blue-600 active:scale-95", "aria-label": "Rewind 5 seconds", title: "Quay l\u1EA1i 5 gi\u00E2y", children: [_jsx(RotateCcw, { className: "h-4 w-4", strokeWidth: 2.5 }), _jsx("span", { className: "pointer-events-none absolute bottom-1 right-1 text-[8px] font-black leading-none", children: "5" })] }), _jsxs("div", { className: "relative shrink-0", style: { width: RING_SIZE, height: RING_SIZE }, children: [_jsxs("svg", { width: RING_SIZE, height: RING_SIZE, className: "absolute inset-0 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: RING_SIZE / 2, cy: RING_SIZE / 2, r: RING_RADIUS, fill: "none", stroke: "rgb(239 246 255)", strokeWidth: RING_STROKE }), _jsx("circle", { cx: RING_SIZE / 2, cy: RING_SIZE / 2, r: RING_RADIUS, fill: "none", stroke: "url(#audio-ring-gradient)", strokeWidth: RING_STROKE, strokeLinecap: "round", strokeDasharray: RING_CIRC, strokeDashoffset: RING_CIRC * (1 - progress), className: "transition-[stroke-dashoffset] duration-150" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "audio-ring-gradient", x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "#3B82F6" }), _jsx("stop", { offset: "100%", stopColor: "#06b6d4" })] }) })] }), _jsxs("button", { type: "button", onClick: handlePlayPause, className: "absolute inset-1.5 flex items-center justify-center rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-500/30 transition-all hover:shadow-xl hover:shadow-blue-500/50 hover:from-blue-700 hover:to-indigo-700 active:scale-95", "aria-label": isPlaying ? 'Pause' : 'Play', children: [isPlaying ? (_jsx(Pause, { className: "h-4 w-4 fill-current" })) : (_jsx(Play, { className: "ml-0.5 h-4 w-4 fill-current" })), isPlaying && (_jsx("span", { className: "pointer-events-none absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-40" }))] })] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("div", { onClick: handleWaveformClick, className: "group/wave relative flex h-8 cursor-pointer items-center gap-[2px]", role: "slider", "aria-label": "Seek", "aria-valuemin": 0, "aria-valuemax": duration || 0, "aria-valuenow": currentTime, children: barHeights.map((h, i) => {
+                                    const barPos = (i + 0.5) / WAVEFORM_BARS;
+                                    const isFilled = barPos <= progress;
+                                    const isCurrent = Math.abs(barPos - progress) < 1 / WAVEFORM_BARS / 2;
+                                    return (_jsx("span", { className: `flex-1 rounded-full transition-all duration-200 ${isFilled
+                                            ? 'bg-blue-500'
+                                            : 'bg-slate-200 group-hover/wave:bg-slate-300'} ${isCurrent && isPlaying ? 'animate-wave-pulse' : ''}`, style: { height: `${h * 100}%` } }, i));
+                                }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-baseline gap-1.5", children: [_jsxs("span", { className: "font-mono text-sm font-bold tabular-nums text-slate-800", children: ["\u2212", formatTime(remaining)] }), _jsxs("span", { className: "font-mono text-[10px] tabular-nums text-slate-400", children: ["/ ", formatTime(duration)] })] }), _jsx("div", { className: "flex items-center gap-0.5 rounded-full border border-slate-200 bg-white p-0.5 shadow-sm", children: PLAYBACK_SPEEDS.map((s) => (_jsxs("button", { type: "button", onClick: () => setSpeed(s), className: `rounded-full px-2 py-0.5 font-mono text-[10px] font-semibold tabular-nums transition-all ${speed === s
+                                                ? 'bg-coral-500 text-white shadow-sm'
+                                                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-700'}`, children: [s, "\u00D7"] }, s))) })] })] })] })] }));
+}

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

@@ -1 +1,10 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ChevronLeft as o,ChevronRight as r}from"lucide-react";import{cn as s}from"../../../shared/lib/utils";import a from"next/image";import i from"./assets/images/rangsanho.png";export function CambridgeYleBottomNav({onPrevious:n,onNext:l,isFirstQuestion:d,isLastQuestion:c,isNavDisabled:b,className:m}){return t("div",{className:s("flex items-center justify-between py-2 relative",m),children:[t("button",{onClick:n,disabled:d||b,className:s("flex items-center gap-2 px-8 py-3 rounded-full font-bold text-[15px] transition-all duration-300 z-10",d||b?"opacity-50 cursor-not-allowed bg-white border-2 border-gray-200 text-gray-400":"bg-white border-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:shadow-md cursor-pointer active:scale-95 shadow-sm"),children:[e(o,{size:20,strokeWidth:3}),"Previous"]}),e("div",{className:"absolute left-1/2 bottom-[-4px] -translate-x-1/2 flex items-end pointer-events-none z-0",children:e(a,{src:i,alt:"Rặng san hô",className:"h-[72px] w-auto object-contain"})}),t("button",{onClick:l,disabled:c||b,className:s("flex items-center gap-2 px-10 py-3 rounded-full font-bold text-[15px] transition-all duration-300 shadow-md z-10 border-2 border-transparent",c||b?"opacity-50 cursor-not-allowed bg-gray-300 text-gray-500 shadow-none":"bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg cursor-pointer active:scale-95"),children:["Next",e(r,{size:20,strokeWidth:3})]})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../shared/lib/utils';
+export function CambridgeYleBottomNav({ onPrevious, onNext, isFirstQuestion, isLastQuestion, isNavDisabled, className, }) {
+    return (_jsxs("div", { className: cn("flex items-center justify-between gap-3 py-0.5", className), children: [_jsxs("button", { onClick: onPrevious, disabled: isFirstQuestion || isNavDisabled, className: cn("flex items-center justify-center gap-1 px-3 py-1.5 sm:px-4 rounded-full font-bold text-[12px] sm:text-[13px] transition-all duration-300", (isFirstQuestion || isNavDisabled)
+                    ? "opacity-50 cursor-not-allowed bg-white border border-gray-200 text-gray-400"
+                    : "bg-white border border-blue-200 text-blue-600 hover:bg-blue-50 hover:shadow-md cursor-pointer active:scale-95 shadow-sm"), children: [_jsx(ChevronLeft, { className: "h-4 w-4", strokeWidth: 3 }), "Previous"] }), _jsxs("button", { onClick: onNext, disabled: isLastQuestion || isNavDisabled, className: cn("flex items-center justify-center gap-1 px-4 py-1.5 sm:px-5 rounded-full font-bold text-[12px] sm:text-[13px] transition-all duration-300 shadow-md border border-transparent", (isLastQuestion || isNavDisabled)
+                    ? "opacity-50 cursor-not-allowed bg-gray-300 text-gray-500 shadow-none"
+                    : "bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg cursor-pointer active:scale-95"), children: ["Next", _jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 3 })] })] }));
+}

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

@@ -1,2 +1,2 @@
 import type { StandardExamLayoutProps } from '../types';
-export declare function CambridgeYleExamLayout({ children, onPrevious, onNext, onClose, isFirstQuestion, isLastQuestion, isNavDisabled, headerProps, sidebarProps, partName, }: StandardExamLayoutProps): import("react").JSX.Element;
+export declare function CambridgeYleExamLayout({ children, onPrevious, onNext, onClose, isFirstQuestion, isLastQuestion, isNavDisabled, headerProps, sidebarProps, }: StandardExamLayoutProps): import("react").JSX.Element;

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

@@ -1 +1,18 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{CambridgeYleHeader as i}from"./CambridgeYleHeader";import{CambridgeYleSidebar as l}from"./CambridgeYleSidebar";import{CambridgeYleBottomNav as s}from"./CambridgeYleBottomNav";import{CambridgeYleNavButton as a}from"./CambridgeYleNavButton";import{cn as d}from"../../../shared/lib/utils";import o from"../summer-sky/assets/images/background-v2.png";import n from"../summer-sky/assets/images/ocean-frame.png";export function CambridgeYleExamLayout({children:t,onPrevious:m,onNext:c,onClose:p,isFirstQuestion:x,isLastQuestion:f,isNavDisabled:u,headerProps:b,sidebarProps:h,partName:v}){return r("div",{className:"relative flex h-screen flex-col overflow-hidden bg-cover bg-center bg-no-repeat",style:{backgroundImage:`url(${o.src})`},children:[e("div",{className:"absolute inset-0 bg-black/10"}),e("div",{className:"relative z-50",children:e(i,{...b,onClose:p})}),r("div",{className:"relative z-10 flex flex-1 min-h-0 items-stretch justify-center p-2 pt-0 pb-2 sm:px-4 sm:pt-0 sm:pb-4 lg:px-[2%] lg:pt-0 lg:pb-[20px] max-w-[1500px] mx-auto w-full gap-2 xl:gap-4",children:[e("div",{className:"hidden xl:flex shrink-0 items-center",children:e(a,{direction:"prev",onClick:m,disabled:x||u})}),r("div",{className:"flex flex-1 w-full relative drop-shadow-xl min-h-0",children:[e("div",{className:"absolute inset-0 pointer-events-none",style:{background:`url(${n.src}) no-repeat center center`,backgroundSize:"100% 100%",zIndex:0}}),r("div",{className:"flex flex-1 w-full relative z-10 p-[12px] sm:p-[16px] md:p-[24px]",children:[h&&e("div",{className:"hidden lg:flex w-[30%] shrink-0 bg-[#eef7ff] rounded-l-[20px] md:rounded-l-[32px] border-r-2 border-blue-100 flex-col overflow-hidden",children:e(l,{...h})}),r("div",{className:d("flex w-full min-h-0 flex-col flex-1 relative bg-white overflow-hidden",h?"rounded-r-[20px] md:rounded-r-[32px]":"rounded-[20px] md:rounded-[32px]"),children:[e("div",{id:"exam-main-scroll-area",className:"flex-1 min-h-0 overflow-auto",children:t}),e("div",{className:"hidden shrink-0 bg-white p-1 sm:px-6 border-t border-blue-200/50",children:e(s,{onPrevious:m,onNext:c,isFirstQuestion:x,isLastQuestion:f,isNavDisabled:u})})]})]})]}),e("div",{className:"hidden xl:flex shrink-0 items-center",children:e(a,{direction:"next",onClick:c,disabled:f||u})})]})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CambridgeYleHeader } from './CambridgeYleHeader';
+import { CambridgeYleSidebar } from './CambridgeYleSidebar';
+import { CambridgeYleBottomNav } from './CambridgeYleBottomNav';
+import { CambridgeYleNavButton } from './CambridgeYleNavButton';
+import { cn } from '../../../shared/lib/utils';
+import backgroundSummerSky from '../summer-sky/assets/images/background-v2.png';
+import oceanFrameImg from '../summer-sky/assets/images/ocean-frame.png';
+export function CambridgeYleExamLayout({ children, onPrevious, onNext, onClose, isFirstQuestion, isLastQuestion, isNavDisabled, headerProps, sidebarProps, }) {
+    // No longer using dynamic decor images for title badge
+    return (_jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-cover bg-center bg-no-repeat", style: {
+            backgroundImage: `url(${backgroundSummerSky.src})`,
+        }, children: [_jsx("div", { className: "absolute inset-0 bg-black/10" }), _jsx("div", { className: "relative z-50", style: { marginBottom: '10px' }, children: _jsx(CambridgeYleHeader, { ...headerProps, onClose: onClose }) }), _jsxs("div", { className: "relative z-10 flex flex-1 min-h-0 items-stretch justify-center p-2 pt-0 pb-2 sm:px-4 sm:pt-0 sm:pb-4 lg:px-[2%] lg:pt-0 lg:pb-[20px] max-w-[1500px] mx-auto w-full gap-2 xl:gap-4", children: [_jsx("div", { className: "hidden lg:flex shrink-0 items-center self-stretch", children: _jsx(CambridgeYleNavButton, { direction: "prev", onClick: onPrevious, disabled: isFirstQuestion || isNavDisabled }) }), _jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1 drop-shadow-xl", children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
+                                    background: `url(${oceanFrameImg.src}) no-repeat center center`,
+                                    backgroundSize: '100% 100%',
+                                    zIndex: 0
+                                } }), _jsxs("div", { className: "flex flex-1 w-full relative z-10 p-[6px] sm:p-[12px] md:p-[18px] xl:p-[24px]", children: [sidebarProps && (_jsx("div", { className: "hidden lg:flex w-[250px] xl:w-[290px] 2xl:w-[330px] shrink-0 bg-[#eef7ff] rounded-l-[20px] md:rounded-l-[32px] border-r-2 border-blue-100 flex-col overflow-hidden", children: _jsx(CambridgeYleSidebar, { ...sidebarProps }) })), _jsxs("div", { className: cn("flex w-full min-h-0 flex-col flex-1 relative bg-white overflow-hidden", sidebarProps ? "rounded-r-[20px] md:rounded-r-[32px]" : "rounded-[20px] md:rounded-[32px]"), children: [_jsx("div", { id: "exam-main-scroll-area", className: "flex-1 min-h-0 overflow-auto", children: children }), _jsx("div", { className: "lg:hidden shrink-0 bg-white px-3 py-1 border-t border-blue-200/50", children: _jsx(CambridgeYleBottomNav, { onPrevious: onPrevious, onNext: onNext, isFirstQuestion: isFirstQuestion, isLastQuestion: isLastQuestion, isNavDisabled: isNavDisabled }) })] })] })] }), _jsx("div", { className: "hidden lg:flex shrink-0 items-center self-stretch", children: _jsx(CambridgeYleNavButton, { direction: "next", onClick: onNext, disabled: isLastQuestion || isNavDisabled }) })] })] }));
+}

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

@@ -1 +1,11 @@
-import{jsx as e,jsxs as n,Fragment as s}from"react/jsx-runtime";export default function t({text:t,highlightedWord:a}){return n("div",{className:"text-base",children:[e("span",{className:"font-bold",children:"Example:"})," ",(()=>{if(!a)return e("span",{children:t});const r=t.split(a);return e(s,{children:r.map((s,t)=>n("span",{children:[s,t<r.length-1&&e("span",{className:"font-bold",children:a})]},t))})})()]})}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function CambridgeYleExampleText({ text, highlightedWord, }) {
+    const renderText = () => {
+        if (!highlightedWord) {
+            return _jsx("span", { children: text });
+        }
+        const parts = text.split(highlightedWord);
+        return (_jsx(_Fragment, { children: parts.map((part, index) => (_jsxs("span", { children: [part, index < parts.length - 1 && (_jsx("span", { className: "font-bold", children: highlightedWord }))] }, index))) }));
+    };
+    return (_jsxs("div", { className: "text-base", children: [_jsx("span", { className: "font-bold", children: "Example:" }), " ", renderText()] }));
+}

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

@@ -1 +1,11 @@
-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"})]})]})]})}
+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-2 pt-2 sm:px-4 sm:pt-2.5 lg:px-8 lg:pt-3 pb-0 relative flex 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-[20px] h-auto sm:w-[24px] md:w-[32px] lg:w-[44px] xl:w-[64px]" }) }), _jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none hidden lg:block", children: _jsx(Image, { src: titleLogoImg, alt: "Title Logo", className: "w-[150px] lg:w-[200px] xl:w-[280px] h-auto" }) }), _jsx("div", { className: "lg:hidden flex-1 flex justify-center pointer-events-none", children: _jsx(Image, { src: titleLogoImg, alt: "Title Logo", className: "w-[110px] sm:w-[130px] h-auto -mt-1" }) }), _jsxs("div", { className: "absolute right-2 sm:right-4 md:right-6 lg:right-8 top-2 sm:top-3 lg:top-5 flex flex-row items-center gap-1 sm:gap-1.5 md:gap-2 lg:gap-3 z-[100]", children: [isCameraActive && (_jsx("div", { className: "flex items-center justify-center rounded-full bg-white/20 p-1 sm:p-1.5 backdrop-blur-sm shrink-0", title: "Camera \u0111ang ghi h\u00ECnh", children: _jsx("div", { className: "h-2 w-2 sm:h-2.5 sm:w-2.5 animate-pulse rounded-full bg-red-500" }) })), _jsx(CambridgeYleTimer, { remainingSeconds: remainingSeconds, totalQuestions: totalQuestions, answeredCount: answeredCount }), _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] 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-[29px] sm:w-[33px] md:w-[37px] lg:w-[42px] xl:w-[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" }), _jsxs("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: [answeredCount, "/", totalQuestions] })] }), _jsxs("button", { onClick: onSubmit, disabled: isSubmitting, className: `group cursor-pointer flex items-center h-[26px] sm:h-[29px] md:h-[32px] lg:h-[34px] xl:h-[46px] w-[76px] sm:w-[86px] md:w-[94px] lg:w-[100px] xl:w-[140px] 2xl:w-[160px] 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-[29px] sm:w-[33px] md:w-[37px] lg:w-[42px] xl:w-[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 transition-transform duration-300 group-hover:scale-110" }), isSubmitting ? (_jsx("div", { className: "flex-1 flex justify-center pr-[3px] sm:pr-[4px] md:pr-[5px] lg:pr-[7px] xl:pr-[12px]", children: _jsx(Loader2, { className: "h-3 w-3 sm:h-4 sm:w-4 animate-spin text-white" }) })) : (_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: "N\u1ED9p" }))] })] })] }));
+}