lido-player 0.0.2-beta-24 → 0.0.2-beta-25-dev

package/dist/cjs/{decode-BCvdWRyT.js → decode-BSImuLEU.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjM03fsg.js');
+var index = require('./index-DRw2yVbg.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/cjs/{index-DjM03fsg.js → index-DRw2yVbg.js}

@@ -2066,7 +2066,9 @@ class AudioPlayer {
         const duration = timeline[timeline.length - 1].endMs - timeline[0].startMs;
         const averageWordMs = duration / timeline.length;
         const speedLead = averageWordMs < 190 ? 120 : averageWordMs < 260 ? 90 : 60;
-        return Math.max(profile.preemptiveOffsetMs, speedLead);
+        // Advance the estimated highlight slightly to compensate for perceived lag.
+        const playbackLeadAdjustmentMs = 40;
+        return Math.max(profile.preemptiveOffsetMs, speedLead) + playbackLeadAdjustmentMs;
     }
     getTimelineIndex(timeline, currentMs) {
         if (!timeline.length)
@@ -2739,6 +2741,7 @@ function slidingWithScaling(element) {
     };
     // Start observing the element
     observer.observe(parentElement, observerConfig);
+    let mostOverlappedElement;
     const onMove = (event) => {
         if (!isDragging)
             return;
@@ -2759,12 +2762,14 @@ function slidingWithScaling(element) {
         // Get the dimensions and scale-corrected position of the container and element
         const containerRect = parentElement.getBoundingClientRect();
         const elementRect = element.getBoundingClientRect();
-        const numbers = element.style.transform.match(/-?\d+(\.\d+)?/g);
-        const result = numbers.map(Number);
-        const initialElementLeftPx = elementRect.left / parentElementScale - result[0];
-        const initialElementTopPx = elementRect.top - result[1];
-        const initialElementRightPx = elementRect.right / parentElementScale - result[0];
-        const initialElementBottomPx = elementRect.bottom - result[1];
+        // Firefox serializes translate(x, 0) as translate(x), so parsing the
+        // inline string can lose Y and produce NaN. Read the computed matrix instead.
+        const transform = window.getComputedStyle(element).transform;
+        const translation = new DOMMatrixReadOnly(transform === 'none' ? undefined : transform);
+        const initialElementLeftPx = elementRect.left / parentElementScale - translation.m41;
+        const initialElementTopPx = elementRect.top - translation.m42;
+        const initialElementRightPx = elementRect.right / parentElementScale - translation.m41;
+        const initialElementBottomPx = elementRect.bottom - translation.m42;
         const maxRight = containerRect.right - initialElementRightPx;
         const maxLeft = containerRect.left - initialElementLeftPx;
         const maxTop = containerRect.top - initialElementTopPx;
@@ -2774,7 +2779,7 @@ function slidingWithScaling(element) {
         // Apply transform with translation within boundaries
         element.style.transform = `translate(${newLeftClamp}px, ${newTopClamp}px)`;
         // Check for overlaps and highlight only the most overlapping element
-        let mostOverlappedElement = findMostoverlappedElement$1(element, 'slide');
+        mostOverlappedElement = findMostoverlappedElement$1(element, 'slide');
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
             if (mostOverlappedElement != element) {
@@ -2835,6 +2840,7 @@ function slidingWithScaling(element) {
         setTimeout(() => {
             if (overlapElement) {
                 void slideCompleted(element);
+                updateReorderCorrectness(container, element, mostOverlappedElement);
                 overlapElement = false;
             }
         }, 300);
@@ -2877,18 +2883,50 @@ const isArrangeLettersComplete = (slideValues, objectiveString) => {
     return slideValues.length === objectiveValues.length
         && slideValues.every((value, index) => value === objectiveValues[index]);
 };
-const updateReorderCorrectness = (container, slideValues, objectiveValues) => {
-    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
-    slideElements.forEach((element, index) => {
-        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
-        if (isCorrect) {
-            applyBorderToClickableCell(element, '#65BC46');
-        }
-        else {
-            element.style.removeProperty('box-shadow');
-        }
-    });
+const updateReorderCorrectness = (container, slideElement, overlappedElement) => {
+    const allSlideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    const elementIndex = allSlideElements.indexOf(slideElement);
+    const overlappedElementIndex = allSlideElements.indexOf(overlappedElement);
+    const objectiveString = document.getElementById(LidoContainer)['objective'];
+    const objectiveArray = objectiveString.split(',');
+    const slideValues = getSlideValuesForValidation(container, allSlideElements);
+    const isCorrect = elementIndex >= 0 && elementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[elementIndex], [objectiveArray[elementIndex].trim()])
+        : false;
+    const isCorrectOverlap = overlappedElementIndex >= 0 && overlappedElementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[overlappedElementIndex], [objectiveArray[overlappedElementIndex].trim()])
+        : false;
+    if (isCorrect && isCorrectOverlap) {
+        updateElementCategoryClass(slideElement, true);
+        updateElementCategoryClass(overlappedElement, true);
+    }
+    else if (isCorrect) {
+        updateElementCategoryClass(slideElement, true);
+        updateElementCategoryClass(overlappedElement, false);
+    }
+    else if (isCorrectOverlap) {
+        updateElementCategoryClass(slideElement, false);
+        updateElementCategoryClass(overlappedElement, true);
+    }
+    else {
+        updateElementCategoryClass(slideElement, false);
+        updateElementCategoryClass(overlappedElement, false);
+    }
 };
+function updateElementCategoryClass(element, isCorrect) {
+    if (!element)
+        return;
+    const correctClass = 'category-dropped-onCorrect';
+    const incorrectClass = 'category-dropped-onInCorrect';
+    if (isCorrect) {
+        element.classList.add(correctClass);
+        element.classList.remove(incorrectClass);
+    }
+    else {
+        element.classList.add(incorrectClass);
+        element.classList.remove(correctClass);
+    }
+}
 const isReorderComplete = (slideValues, objectiveString) => {
     if (!objectiveString)
         return false;
@@ -2916,7 +2954,10 @@ const slideCompleted = async (slideElement) => {
         updateArrangeLettersCorrectness(container, slideValues, objectiveArray);
     }
     else if (isReorderContainer(container)) {
-        updateReorderCorrectness(container, slideValues, objectiveArray);
+        if (isReorderComplete(slideValues, objectiveString)) {
+            allSlideElements.forEach(item => updateElementCategoryClass(item, true));
+        }
+        // updateReorderCorrectness(container, slideValues, objectiveArray);
     }
     if (container.getAttribute('is-continue-on-correct') === 'true') {
         storingEachActivityScore(true);
@@ -72973,6 +73014,22 @@ const initEventsForElement = async (element, type) => {
     }
     onTouchListenerForOnTouch(element);
 };
+/**
+ * Re-enable the gameplay handlers for interactive children that were created
+ * while the player was in edit mode. This is intentionally limited to the
+ * drag/drop elements used by Food Jar; other templates retain their existing
+ * component-load initialization path.
+ */
+const initializePlayModeDragDropElements = async (root) => {
+    const elements = root.querySelectorAll('[type="drag"], [type="drop"]');
+    for (const element of Array.from(elements)) {
+        const type = element.getAttribute('type') || undefined;
+        const initializedElement = element;
+        if (initializedElement.__lidoInitializationKey === `${type || ''}:true`)
+            continue;
+        await initEventsForElement(element, type);
+    }
+};
 // Function to execute actions parsed from the onMatch string
 const executeActions = async (actionsString, thisElement, element, options = {}) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -73256,12 +73313,25 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     const element = dragElement;
     const isAppend = container.getAttribute('drop-action') === exports.DropAction.Move;
     const isInfinite = container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop;
+    const isCreateSentence = container.getAttribute('template-id') === 'createSentence';
+    // Reserve the source slot synchronously so an overlapping drag sees the
+    // updated source layout before the dropped element is reparented.
+    let sourcePlaceholder = null;
+    if (isAppend && isCreateSentence) {
+        const computedStyle = window.getComputedStyle(dragElement);
+        sourcePlaceholder = document.createElement('div');
+        sourcePlaceholder.style.width = `${dragElement.offsetWidth}px`;
+        sourcePlaceholder.style.height = `${dragElement.offsetHeight}px`;
+        sourcePlaceholder.style.margin = computedStyle.margin;
+        sourcePlaceholder.style.visibility = 'hidden';
+        dragElement.replaceWith(sourcePlaceholder);
+    }
     if (isAppend || isInfinite) {
-        setTimeout(() => {
+        const finishDrop = () => {
             var _a, _b;
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.transition = '';
-            let dummyElement = document.createElement('div');
+            let dummyElement = sourcePlaceholder || document.createElement('div');
             if (isInfinite) {
                 dummyElement = cloneElementWithComputedStyles(dragElement);
                 dummyElement.classList.remove('dropped');
@@ -73276,7 +73346,9 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 }, 100);
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
-            dragElement.replaceWith(dummyElement);
+            if (!sourcePlaceholder) {
+                dragElement.replaceWith(dummyElement);
+            }
             const keyframes = `
       @keyframes widthDecrease {
         0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
@@ -73284,9 +73356,15 @@ const afterDropDragHandling = (dragElement, dropElement) => {
       }
     `;
             if (!isInfinite) {
-                dummyElement.style.width = element.style.width;
-                dummyElement.style.height = element.style.height;
-                dummyElement.style.margin = element.style.margin;
+                dummyElement.style.width = sourcePlaceholder
+                    ? sourcePlaceholder.style.width
+                    : element.style.width;
+                dummyElement.style.height = sourcePlaceholder
+                    ? sourcePlaceholder.style.height
+                    : element.style.height;
+                dummyElement.style.margin = sourcePlaceholder
+                    ? sourcePlaceholder.style.margin
+                    : element.style.margin;
                 const styleSheet = document.styleSheets[0];
                 styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
                 dummyElement.style.animation = `widthDecrease 0.5s`;
@@ -73316,7 +73394,13 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
             const scaledTop = (dropCenterY - dragCenterY) / containerScale;
             dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
-        }, 700);
+        };
+        if (isAppend && isCreateSentence) {
+            finishDrop();
+        }
+        else {
+            setTimeout(finishDrop, 700);
+        }
     }
 };
 // function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
@@ -74584,6 +74668,7 @@ exports.handleFloatElementPosition = handleFloatElementPosition;
 exports.handlingChildElements = handlingChildElements;
 exports.highlightElement = highlightElement;
 exports.initEventsForElement = initEventsForElement;
+exports.initializePlayModeDragDropElements = initializePlayModeDragDropElements;
 exports.matchStringPattern = matchStringPattern;
 exports.nextUrl = nextUrl;
 exports.parseProp = parseProp;

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjM03fsg.js');
+var index = require('./index-DRw2yVbg.js');
 require('./index-DBCFoh1I.js');
 
 

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DBCFoh1I.js');
-var index$1 = require('./index-DjM03fsg.js');
+var index$1 = require('./index-DRw2yVbg.js');
 
 var rive$1 = {exports: {}};
 
@@ -11776,6 +11776,22 @@ const instruction$4 = {
 	palegramcqimages: "palegramcqimagesEngAudio"
 };
 var en = {
+	" balloon": "Balloon",
+	" box": "Box",
+	" egg": "Egg",
+	" flower": "Flower",
+	" heart": "Heart",
+	" house": "House",
+	" lamp": "Lamp",
+	" moon": "Moon",
+	" rectangle": "Rectangle",
+	" star": "Star",
+	" watermelon": "Watermelon",
+	" trophy": "Trophy",
+	" dog": "Dog",
+	" fish": "Fish",
+	" bird": "Bird",
+	" arrow": "Arrow",
 	"Do you want to exit? button": "Do you want to exit?",
 	"Exit button": "Exit",
 	"Continue playing button": "Continue playing",
@@ -11833,6 +11849,22 @@ const instruction$2 = {
 	palegramcqimages: "palegramcqimagesHiAudio"
 };
 var hi = {
+	" balloon": "गुब्बारा",
+	" box": "डिब्बा",
+	" egg": "अंडा",
+	" flower": "फूल",
+	" heart": "दिल",
+	" house": "घर",
+	" lamp": "दीपक",
+	" moon": "चंद्रमा",
+	" rectangle": "आयत",
+	" star": "तारा",
+	" watermelon": "तरबूज",
+	" trophy": "ट्रॉफी",
+	" dog": "कुत्ता",
+	" fish": "मछली",
+	" bird": "चिड़िया",
+	" arrow": "तीर",
 	"Do you want to exit? button": "क्या आप बाहर निकलना चाहते हैं?",
 	"Exit button": "बाहर निकलें",
 	"Continue playing button": "खेलना जारी रखें",
@@ -11875,6 +11907,22 @@ const instruction$1 = {
 	palegramcqimages: "palegramcqimagesKaAudio"
 };
 var kn = {
+	" balloon": "ಪುಗ್ಗ",
+	" box": "ಡಬ್ಬ",
+	" egg": "ಮೊಟ್ಟೆ",
+	" flower": "ಹೂವು",
+	" heart": "ಹೃದಯ",
+	" house": "ಮನೆ",
+	" lamp": "ದೀಪ",
+	" moon": "ಚಂದ್ರ",
+	" rectangle": "ಆಯತ",
+	" star": "ನಕ್ಷತ್ರ",
+	" watermelon": "ಕಲ್ಲಂಗಡಿ",
+	" trophy": "ಟ್ರೋಫಿ",
+	" dog": "ನಾಯಿ",
+	" fish": "ಮೀನು",
+	" bird": "ಹಕ್ಕಿ",
+	" arrow": "ಬಾಣ",
 	"Do you want to exit? button": "ನೀವು ನಿರ್ಗಮಿಸಲು ಬಯಸುವಿರಾ?",
 	"Exit button": "ನಿರ್ಗಮಿಸು",
 	"Continue playing button": "ಆಟವನ್ನು ಮುಂದುವರಿಸಿ",
@@ -11936,7 +11984,7 @@ instance
     },
 });
 
-const lidoContainerCss = () => `.lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}`;
+const lidoContainerCss = () => `.lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}lido-container[template-id="writeCard"] #arrow{box-sizing:border-box;border:10px solid transparent;box-shadow:0px 8px 0px 0px #8b310f;animation:flash-card-next-attention 1.4s ease-in-out infinite}lido-container[template-id="writeCard"] #arrow.fading{opacity:1 !important}@keyframes flash-card-next-attention{0%,100%{border-color:#ffc34d;filter:drop-shadow(0 0 0 rgba(255, 195, 77, 0))}50%{border-color:#fff1a8;filter:drop-shadow(0 0 10px rgba(255, 195, 77, 0.95))}}`;
 
 const LidoContainer = class {
     constructor(hostRef) {
@@ -12096,6 +12144,33 @@ const LidoContainer = class {
         this.speakFlag = false;
         this.handleWindowResize = () => this.scaleContainer(this.el);
         this.handleWindowLoad = () => this.scaleContainer(this.el);
+        this.shouldInitializePlayModeDragDrop = false;
+        this.isWriteCardContainer = () => this.templateId === 'writeCard';
+        this.syncWriteCardArrowHighlight = () => {
+            if (!this.isWriteCardContainer())
+                return;
+            const arrow = this.el.querySelector('#arrow');
+            if (!arrow)
+                return;
+            const style = window.getComputedStyle(arrow);
+            const hidden = style.display === 'none' ||
+                style.visibility === 'hidden' ||
+                style.opacity === '0';
+            arrow.classList.toggle('flash-card-next-glowing', !hidden);
+        };
+        this.observeWriteCardArrow = () => {
+            var _a;
+            if (!this.isWriteCardContainer())
+                return;
+            (_a = this.writeCardArrowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.writeCardArrowObserver = new MutationObserver(() => this.syncWriteCardArrowHighlight());
+            this.writeCardArrowObserver.observe(this.el, {
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class', 'style', 'visible'],
+            });
+            this.syncWriteCardArrowHighlight();
+        };
     }
     cleanupInteractionHandlers() {
         this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach(element => {
@@ -12106,6 +12181,17 @@ const LidoContainer = class {
         const langToApply = newLang || this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
     }
+    canplayChanged(newValue, oldValue) {
+        if (this.templateId !== 'foodJar' || !newValue || oldValue !== false)
+            return;
+        this.shouldInitializePlayModeDragDrop = true;
+    }
+    componentDidRender() {
+        if (!this.shouldInitializePlayModeDragDrop || !this.canplay)
+            return;
+        this.shouldInitializePlayModeDragDrop = false;
+        void index$1.initializePlayModeDragDropElements(this.el);
+    }
     componentWillLoad() {
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
@@ -12341,10 +12427,12 @@ const LidoContainer = class {
             setTimeout(() => {
                 this.el.setAttribute("onEntry", `${this.templateId}.speak='${!this.speakFlag}'; ` + this.el.getAttribute("onEntry"));
                 index$1.initEventsForElement(this.el, this.type);
+                this.observeWriteCardArrow();
             }, 100);
         }
         else {
             index$1.initEventsForElement(this.el, this.type);
+            this.observeWriteCardArrow();
         }
         if (this.customStyle) {
             const styleElement = document.createElement('style');
@@ -12360,9 +12448,12 @@ const LidoContainer = class {
         index$1.Timer.getI().start();
     }
     disconnectedCallback() {
+        var _a;
         this.cleanupInteractionHandlers();
         window.removeEventListener('resize', this.handleWindowResize);
         window.removeEventListener('load', this.handleWindowLoad);
+        (_a = this.writeCardArrowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.writeCardArrowObserver = undefined;
         document.body.style.backgroundColor = '';
         document.body.style.backgroundImage = '';
         index$1.resetFloatState();
@@ -12379,12 +12470,15 @@ const LidoContainer = class {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (index.h(index.Host, { key: '9dd374c6cdfcc88a5b18e7dc7fec527c853a4719', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '8295782a74ce6ef8ca9a623de8a28b539d9f6d4f', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: 'eb3c995b777986e07dcb6aa935ef38d41aa1e7e7' })));
+        return (index.h(index.Host, { key: 'c4063b11ee7b13e43701fa1573129c043f20bce3', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: 'de5f9d8a8711ddc533dd105640e64152035dee9f', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: 'ec46b584fa6d4982e69d8b8b2e72e8991bdc2458' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "Lang": [{
                 "languageChanged": 0
+            }],
+        "canplay": [{
+                "canplayChanged": 0
             }]
     }; }
 };
@@ -12500,7 +12594,7 @@ const LidoFlash = class {
             arrow.classList.add('flash-card-next-glowing');
         };
         this.onAudioEnded = (event) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
             const instruction = this.instructionText();
             if (!target || (target !== instruction && target.id !== 'lido-avatar' && !this.el.contains(target)))
@@ -12537,7 +12631,6 @@ const LidoFlash = class {
                 if (playbackContext !== this.goodJobPlaybackContext || playbackId !== this.goodJobPlaybackId)
                     return;
                 this.goodJobPlaybackId = undefined;
-                (_d = this.nextArrow()) === null || _d === void 0 ? void 0 : _d.classList.remove('flash-card-next-glowing');
                 index$1.executeActions("this.avatarAnimate='Idle'", target);
             }
         };
@@ -12608,11 +12701,19 @@ const LidoFlash = class {
             (_a = this.nextArrow()) === null || _a === void 0 ? void 0 : _a.classList.remove('flash-card-next-glowing');
         };
         this.speakFront = () => {
-            var _a;
+            var _a, _b;
             const text = this.frontText();
             if (this.instructionDone && !this.flipped && text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
                 this.startNarration(text);
             }
+            else if (this.instructionDone && !this.flipped && (!text || !((_b = text.textContent) === null || _b === void 0 ? void 0 : _b.trim()))) {
+                if (this.autoFlipTimer)
+                    window.clearTimeout(this.autoFlipTimer);
+                this.autoFlipTimer = window.setTimeout(() => {
+                    if (!this.flipped)
+                        this.handleFlip();
+                }, this.autoFlipAfter);
+            }
         };
         this.clearNarrationTimers = () => {
             if (this.narrationGraceTimer)
@@ -12678,6 +12779,8 @@ const LidoFlash = class {
                 mascot.setAttribute('audio', scaffoldAudio);
             }
             this.setArrowVisible(true);
+            // Keep the next action highlighted after mascot audio ends.
+            arrow.classList.add('flash-card-next-glowing');
             if (mascot) {
                 this.goodJobPlaybackContext = {};
                 this.goodJobPlaybackId = undefined;
@@ -12758,12 +12861,12 @@ const LidoFlash = class {
     }
     /* ---------- Render ---------- */
     render() {
-        return (index.h(index.Host, { key: '9098ad4c1f41ac70e6737438209f2f3027153b3b', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: (event) => {
+        return (index.h(index.Host, { key: '57b9dc5ecf618dc381a58e107fa2990b84f5517a', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: (event) => {
                 var _a, _b;
                 if ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '#lido-avatar'))
                     return;
                 this.handleFlip();
-            }, "disable-speak": this.disableSpeak }, index.h("div", { key: 'b235e008f35e29db21991d76bd83fccac471ba75', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: '7b2306efdc5a4dac6edfe5004ae34ef486b73dd5', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: '3d164fa2faa72b7ffcbaf20482bfea2148aeaaf4', class: "card-face card-back" }, this.back != null ? this.back : index.h("slot", { name: "back" })))));
+            }, "disable-speak": this.disableSpeak }, index.h("div", { key: '3712fc66e33323bdd55e0abb747370ee461dc808', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: 'eb8af2e445393592c0e8a3e4c5934c71dcab4b4e', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: 'efa14cc7ea506714342151b12a9724bdcdb1eba8', class: "card-face card-back" }, this.back != null ? this.back : index.h("slot", { name: "back" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -13104,8 +13207,8 @@ const LidoHome = class {
     }
     translateHomeText(key) {
         var _a;
-        const lang = (_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim();
-        return lang ? instance.getFixedT(lang)(key) : instance.t(key);
+        const lang = ((_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim()) || instance.language || 'en';
+        return instance.getFixedT(lang)(key);
     }
     onCommonAudioPathChange(path) {
         this.publishCommonAudioPath(path);
@@ -13211,7 +13314,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BCvdWRyT.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BSImuLEU.js'); }).then(function (n) { return n.decode; });
             const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer || ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
             if (typeof brotliDecompressBuffer !== 'function') {
                 throw new Error('BrotliDecompressBuffer function not found in brotli/dec/decode');
@@ -13445,10 +13548,7 @@ const LidoHome = class {
         })
             .filter(Boolean);
         if (tagName === 'lido-text' && props.string) {
-            props.string = instance.t(props.string);
-        }
-        if (tagName === 'lido-text' && props.string) {
-            props.string = instance.t(props.string);
+            props.string = this.translateHomeText(props.string);
         }
         // Map XML tags to Stencil components
         const componentMapping = {
@@ -17561,7 +17661,7 @@ const LidoRoot = class {
             return index.h("div", null, "Error loading XML data. Please check the path or URL.");
         }
         // Once the XML data is loaded, pass it to the `lido-home` component
-        return (index.h("lido-home", Object.assign({ showNav: true, activeContainerIndexes: [], initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl }, (this.zipUrl ? { zipUrl: this.zipUrl } : {}), { exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl })));
+        return (index.h("lido-home", Object.assign({ showNav: true, activeContainerIndexes: [], initialIndex: this.initialIndex, canplay: this.canplay, Lang: this.Lang, xmlData: this.xmlData, baseUrl: this.baseUrl }, (this.zipUrl ? { zipUrl: this.zipUrl } : {}), { exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -18319,7 +18419,7 @@ const LidoText = class {
     }
     render() {
         const displayText = instance.t(this.string).replace(/_phonics?/gi, '');
-        return (index.h(index.Host, { key: 'f15f324ad2bf6bf540e1b99bebc18aee13e0f76e', class: "lido-text", value: this.value, "required-drops": this.requiredDrops, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
+        return (index.h(index.Host, { key: '4fd148b3700fa894e6dc38810453a08a1c6858d1', class: "lido-text", value: this.value, "required-drops": this.requiredDrops, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
     }
     get el() { return index.getElement(this); }
 };