lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-dev

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, g as getAssetPath, h, H as Host, a as getElement, c as createEvent } from './index-37c2ad2d.js';
-import { c as commonjsGlobal, s as setVisibilityWithDelay, i as initEventsForElement, a as convertUrlToRelative, R as RiveService, p as parseProp, e as equationCheck, b as storingEachActivityScore, d as executeActions, N as NextContainerKey, h as handlingChildElements, g as attachSpeakIcon, j as calculateScale, k as handleFloatElementPosition, l as handleElementClick, m as dispatchActivityChangeEvent, A as ActivityScoreKey, n as dispatchGameCompletedEvent, o as dispatchGameExitEvent, q as AudioPlayer, r as generateUUIDFallback, t as exitUrl, u as prevUrl, v as nextUrl, w as speakUrl, P as PrevContainerKey, L as LidoContainer$1, x as getCancelBtnPopup, y as triggerPrevcontainer, z as setCancelBtnPopup, B as getDefaultExportFromCjs, C as tinyColor, S as SelectedValuesKey, D as triggerNextContainer, E as DropAction, F as validateObjectiveStatus, G as fraction, T as TraceMode, H as speakIcon, I as fingerUrl } from './utils-b5eb2360.js';
+import { c as commonjsGlobal, s as setVisibilityWithDelay, i as initEventsForElement, a as convertUrlToRelative, R as RiveService, p as parseProp, e as equationCheck, b as storingEachActivityScore, d as executeActions, N as NextContainerKey, h as handlingChildElements, g as attachSpeakIcon, j as calculateScale, k as handleFloatElementPosition, l as handleElementClick, m as dispatchActivityChangeEvent, A as ActivityScoreKey, n as dispatchGameCompletedEvent, o as dispatchGameExitEvent, q as AudioPlayer, r as generateUUIDFallback, t as exitUrl, u as prevUrl, v as nextUrl, w as speakUrl, P as PrevContainerKey, L as LidoContainer$1, x as getCancelBtnPopup, S as SelectedValuesKey, y as matchStringPattern, z as triggerNextContainer, B as triggerPrevcontainer, C as setCancelBtnPopup, D as getDefaultExportFromCjs, E as tinyColor, F as DropAction, G as validateObjectiveStatus, H as fraction, T as TraceMode, I as speakIcon, J as fingerUrl } from './utils-eefe4a1c.js';
 
 var rive = {exports: {}};
 
@@ -6586,7 +6586,7 @@ const LidoAvatar = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (h(Host, { key: 'dc25762d0edf77a71e93ca1cc3ea160a1778858e', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '70c803f3b58d3cd4a4f94f66eab40a7af656ef36', class: "lido-canvas" })));
+        return (h(Host, { key: '8a31ce98213ff51bf7cfc776690b6770bbeae604', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '922568310a3be177e3185f86c54df95d16a0e42b', class: "lido-canvas" })));
     }
     get el() { return getElement(this); }
 };
@@ -6856,10 +6856,10 @@ const LidoCalculator = class {
 };
 LidoCalculator.style = LidoCalculatorStyle0;
 
-const lidoCanvasCss = ":host{display:flex;justify-content:center;align-items:center}.lido-pad{background:red;border:2px solid #ccc;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}button{padding:6px 14px;border:none;background:transparent;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;position:relative;top:-44%;left:16%;z-index:10}#lido-img1{height:50px;width:60px}canvas{touch-action:none;display:block}";
+const lidoCanvasCss = ":host{display:flex;justify-content:center;align-items:center}.lido-canvas{background:red;border:2px solid #ccc;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}#lido-exit-button{padding:6px 14px;border:none;background:transparent;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;position:relative;top:-43%;left:18%;z-index:10}canvas{touch-action:none;display:block}";
 const LidoCanvasStyle0 = lidoCanvasCss;
 
-const WritingPad = class {
+const LidoCanvas = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         // Flag to track drawing state
@@ -6946,11 +6946,11 @@ const WritingPad = class {
         this.loadBackground();
     }
     render() {
-        return (h(Host, { key: '546c916c460a7581d5ecb9c1c5c07d7630cb64c1', id: "lido-canvas", class: "lido-pad", style: this.style }, h("button", { key: 'f0693ce43a33908dcdd833b48b7a849b73b37cc2', onClick: () => this.clearCanvas() }, h("img", { key: 'e3c029b206565ced465a5f1e352b98a11d54d71f', id: "lido-img1", src: "https://cdn-icons-png.flaticon.com/256/458/458595.png", alt: "Clear" })), h("canvas", { key: '1c07d610b7840cdc3f4359539a6d721f50130462', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+        return (h(Host, { key: '6768ff870d132528267f2e824fdc6edf5a5fa2be', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'ba3d5456edfa4618b6c3f57b97fa18cef45f7ae9', id: "lido-exit-button", onClick: () => this.clearCanvas() }, h("lido-text", { key: '3484c9005819e3d08adf8d36b247d3c45610d0b5', visible: "true", height: "92px", width: "43px", id: "lido-exit-icon", "font-color": "white", onEntry: "this.font-weight='900';", "font-size": "96px", string: 'X' })), h("canvas", { key: 'cd4167cefde8d4cf159779c46283cafbc3b0afcc', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
     }
     get el() { return getElement(this); }
 };
-WritingPad.style = LidoCanvasStyle0;
+LidoCanvas.style = LidoCanvasStyle0;
 
 const lidoCellCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}";
 const LidoCellStyle0 = lidoCellCss;
@@ -7080,7 +7080,7 @@ const LidoCell = class {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: 'eaf89c6fa3df6df4438063d4e2c2ca59cbf8aa25', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '9efb1d5e7de65783cab4de3e5479260c85ffc3b1' })));
+        return (h(Host, { key: '0f7d35324da319917dec546cbb1f25065897bb02', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '2a337b5fae7641bbe78c5f1aa1c96e12c1281f4a' })));
     }
     get el() { return getElement(this); }
 };
@@ -7165,7 +7165,7 @@ const LidoCol = class {
         };
     }
     render() {
-        return (h(Host, { key: 'fe37cc1654101a3d347e2cef52872467ae078139', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'b27f20f62c30398c343d7aa472a0a211af5eed0e' })));
+        return (h(Host, { key: '7845d3364dd13cb42959f67610254ee892119c39', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '09a68a30534c5ea83d7166acd720b4b8f23f494e' })));
     }
     get el() { return getElement(this); }
 };
@@ -9804,7 +9804,8 @@ const en = {
 	"Do you want to exit?": "Do you want to exit?",
 	Exit: Exit$5,
 	"Continue playing": "Continue playing",
-	"Drop the elements to match the given symbol order": "Drop the elements to match the given symbol order"
+	"Drop the elements to match the given symbol order": "Drop the elements to match the given symbol order",
+	"Fill  in  the  blanks": "Fill  in  the  blanks"
 };
 
 const Exit$4 = "Quitter";
@@ -9812,7 +9813,8 @@ const fr = {
 	"Do you want to exit?": "Voulez-vous quitter?",
 	Exit: Exit$4,
 	"Continue playing": "Continuer à jouer",
-	"Drop the elements to match the given symbol order": "Déposez les éléments pour correspondre au symbole donné"
+	"Drop the elements to match the given symbol order": "Déposez les éléments pour correspondre au symbole donné",
+	"Fill  in  the  blanks": "Remplissez les blancs"
 };
 
 const Exit$3 = "बाहर निकलें";
@@ -9820,7 +9822,8 @@ const hi = {
 	"Do you want to exit?": "क्या आप बाहर निकलना चाहते हैं?",
 	Exit: Exit$3,
 	"Continue playing": "खेलना जारी रखें",
-	"Drop the elements to match the given symbol order": "दिए गए चिन्ह से मिलाने के लिए तत्वों को ड्रॉप करें"
+	"Drop the elements to match the given symbol order": "दिए गए चिन्ह से मिलाने के लिए तत्वों को ड्रॉप करें",
+	"Fill  in  the  blanks": "रिक्त स्थान भरें"
 };
 
 const Exit$2 = "ನಿರ್ಗಮಿಸು";
@@ -9828,7 +9831,8 @@ const ka = {
 	"Do you want to exit?": "ನೀವು ನಿರ್ಗಮಿಸಲು ಬಯಸುವಿರಾ?",
 	Exit: Exit$2,
 	"Continue playing": "ಆಟವನ್ನು ಮುಂದುವರಿಸಿ",
-	"Drop the elements to match the given symbol order": "ನೀಡಿರುವ ಸಂಕೇತಕ್ಕೆ ಹೊಂದುವಂತೆ ಅಂಶಗಳನ್ನು ಬಿಡಿ"
+	"Drop the elements to match the given symbol order": "ನೀಡಿರುವ ಸಂಕೇತಕ್ಕೆ ಹೊಂದುವಂತೆ ಅಂಶಗಳನ್ನು ಬಿಡಿ",
+	"Fill  in  the  blanks": "ಖಾಲಿ ಸ್ಥಳಗಳನ್ನು ಭರ್ತಿ ಮಾಡಿ"
 };
 
 const Exit$1 = "బయటకు వెళ్ళు";
@@ -9836,7 +9840,8 @@ const te = {
 	"Do you want to exit?": "మీరు బయటకు వెళ్లాలనుకుంటున్నారా?",
 	Exit: Exit$1,
 	"Continue playing": "ఆటను కొనసాగించు",
-	"Drop the elements to match the given symbol order": "ఇచ్చిన చిహ్నానికి సరిపడేలా అంశాలను డ్రాప్ చేయండి"
+	"Drop the elements to match the given symbol order": "ఇచ్చిన చిహ్నానికి సరిపడేలా అంశాలను డ్రాప్ చేయండి",
+	"Fill  in  the  blanks": "ఖాళీలను నింపండి"
 };
 
 const Exit = "Sair";
@@ -9844,7 +9849,8 @@ const port = {
 	"Do you want to exit?": "Você deseja sair?",
 	Exit: Exit,
 	"Continue playing": "Continuar jogando",
-	"Drop the elements to match the given symbol order": "Solte os elementos para corresponder à ordem dos símbolos fornecida"
+	"Drop the elements to match the given symbol order": "Solte os elementos para corresponder à ordem dos símbolos fornecida",
+	"Fill  in  the  blanks": "Preencha os espaços em branco"
 };
 
 instance
@@ -9964,13 +9970,34 @@ const LidoContainer = class {
      * @param container The container element to be scaled.
      */
     scaleContainer(container) {
+        // Calculate the scale factor based on the closest parent element's width and height (1600x900 reference)
+        const parentElement = this.getClosestParentWithWidth();
+        let scaleFactor = 0;
+        if (parentElement) {
+            const parentWidth = parentElement.clientWidth;
+            const parentHeight = parentElement.clientHeight;
+            const scaleX = parentWidth / 1600;
+            const scaleY = parentHeight / 900;
+            scaleFactor = Math.min(scaleX, scaleY);
+        }
         // Center the container and apply scaling
-        container.style.transform = `translate(-50%, -50%) scale(${calculateScale()})`;
+        container.style.transform = `translate(-50%, -50%) scale(${scaleFactor != 0 ? scaleFactor : calculateScale()})`;
         container.style.left = '50%';
         container.style.top = '50%';
         container.style.position = 'absolute'; // Ensure proper positioning
         this.screenOrientation();
     }
+    // Find and return the nearest parent element that has a measurable (non-zero) width
+    getClosestParentWithWidth() {
+        let parent = this.el.parentElement;
+        while (parent) {
+            if (parent.offsetWidth > 0) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+    }
     screenOrientation() {
         if (window.innerHeight > window.innerWidth) {
             this.el.style.height = '1600px';
@@ -9999,6 +10026,7 @@ const LidoContainer = class {
     componentDidLoad() {
         this.scaleContainer(this.el);
         const backGroundImage = this.bgImage ? convertUrlToRelative(this.bgImage) : '';
+        document.body.style.pointerEvents = 'auto';
         document.body.style.backgroundColor = this.bgColor;
         document.body.style.backgroundImage = backGroundImage ? `url(${backGroundImage})` : 'none';
         document.body.style.backgroundPosition = backGroundImage ? `bottom` : 'none';
@@ -10032,7 +10060,7 @@ const LidoContainer = class {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '5d7f2f02c5a231a18897942ea0d2f3a200efa502', id: "lido-container", locale: this.locale, "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 }, h("slot", { key: 'b82aff47d621fc4f9d6abe5b7add974853f69219' })));
+        return (h(Host, { key: '338ef0be8cc9d052764785ce9314254be7c8a7f8', id: "lido-container", locale: this.locale, "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 }, h("slot", { key: '59d66b47f4749a99ece4da48dbaebaf720cb0b2b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10116,7 +10144,7 @@ const LidoFlash = class {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: '0db825b0f188f46db6699e3d470296d7302a72fc', 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: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: '78432618dca6729d9a5fa75f9ee162178ec6b8e2', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'c06cab1f3d256a2fcfd44fbeb9e04c47bbe6ba63', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '804ffc2d68292dc9dcb800bcc49a0698092cea43', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'b8f000d4e9d04d9954f81dc7e05b109dc16cb223', 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: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'cea63b67d1b6a925ab0520eaa7c5166288bcd71e', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '3517e09bb91ac4c6fb2c066539f2d4f51436938f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '5a14a4ab70898852046f1128c99e5a285c1c37f7', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10196,7 +10224,7 @@ const LidoHomeStyle0 = indexCss;
 const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px yellow)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 40px yellow)\r\n            drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}}";
 const LidoHomeStyle1 = animationCss;
 
-const lidoHomeCss = ".lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;visibility:hidden;position:absolute;left:50%;padding:0 5px;z-index:1;width:100vw;max-width:100vw;box-sizing:border-box;height:0px}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1}.lido-btn-dot-container{flex-shrink:1;flex-grow:1;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;min-width:0;height:0px}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8b310f;background-color:#f34d08;cursor:pointer;visibility:hidden;flex-shrink:0}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #f34d08;border-radius:16px;box-shadow:0px 8px #f34d08;flex-shrink:0;}#main-audio:active,.popup-button:active .lido-exit-button:active{margin-bottom:-8px;box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}@media (max-width: 768px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0 8px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0 8px}.lido-dot{height:16px;width:16px;margin:0 2.5px}}@media (max-width: 480px){#lido-arrow-left,#lido-arrow-right{width:74px;height:74px;margin:0px 5px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0px 5px}.lido-dot{height:15px;width:15px;margin:0 1.5px}.lido-dot-container{padding:0 3px}}@media (max-width: 375px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 3px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 3px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 2px}}@media (max-width: 320px){#lido-arrow-left,#lido-arrow-right,.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 2px}.lido-dot{height:12px;width:12px;margin:0 0.5px}.lido-dot-container{padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 5px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 5px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 5px}}.popup-exit-text{white-space:nowrap;font-size:22px;font-weight:600;margin-top:-8%}.lido-alert-parent{z-index:10000 !important;position:absolute;top:0;left:0}.popup-button{width:80px;height:80px;z-index:1000;cursor:pointer;display:flex;align-items:center;justify-content:center;border:4px solid #F34D08;border-radius:16px;box-shadow:0 8px 0 #F34D08}.nav-for-lanai{position:absolute;top:0%;left:0%;max-width:none;width:100%;height:auto;visibility:visible}";
+const lidoHomeCss = ".lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;visibility:hidden;position:absolute;left:50%;padding:0 5px;z-index:1;width:100vw;max-width:100vw;box-sizing:border-box;height:0px}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1}.lido-btn-dot-container{flex-shrink:1;flex-grow:1;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;min-width:0;height:0px}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8b310f;background-color:#f34d08;cursor:pointer;visibility:hidden;flex-shrink:0}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #f34d08;border-radius:16px;box-shadow:0px 8px #f34d08;flex-shrink:0;}#main-audio:active,.popup-button:active .lido-exit-button:active{margin-bottom:-8px;box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}@media (max-width: 768px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0 8px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0 8px}.lido-dot{height:16px;width:16px;margin:0 2.5px}}@media (max-width: 480px){#lido-arrow-left,#lido-arrow-right{width:74px;height:74px;margin:0px 5px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0px 5px}.lido-dot{height:15px;width:15px;margin:0 1.5px}.lido-dot-container{padding:0 3px}}@media (max-width: 375px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 3px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 3px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 2px}}@media (max-width: 320px){#lido-arrow-left,#lido-arrow-right,.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 2px}.lido-dot{height:12px;width:12px;margin:0 0.5px}.lido-dot-container{padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 5px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 5px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 5px}}.popup-exit-text{white-space:nowrap;font-size:22px;font-weight:600;margin-top:-8%}.lido-alert-parent{z-index:10000 !important;position:absolute;top:0;left:0}.popup-button{width:80px;height:80px;z-index:1000;cursor:pointer;display:flex;align-items:center;justify-content:center;border:4px solid #F34D08;border-radius:16px;box-shadow:0 8px 0 #F34D08}.nav-for-lanai{position:absolute;top:0%;left:0%;max-width:none;width:100%;height:auto;visibility:visible}.parent_dots{pointer-events:none}";
 const LidoHomeStyle2 = lidoHomeCss;
 
 const LidoHome = class {
@@ -10276,7 +10304,6 @@ const LidoHome = class {
                     rightbtn.style.visibility = 'hidden';
                 }
                 else {
-                    rightbtn.style.pointerEvents = 'auto';
                     rightbtn.style.visibility = 'visible';
                 }
             }, 100);
@@ -10487,6 +10514,9 @@ const LidoHome = class {
         if (tagName === 'lido-text' && props.string) {
             props.string = instance.t(props.string);
         }
+        if (tagName === 'lido-text' && props.string) {
+            props.string = instance.t(props.string);
+        }
         // Map XML tags to Stencil components
         const componentMapping = {
             'lido-container': (h("lido-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl, height: this.height }), children)),
@@ -10536,6 +10566,16 @@ const LidoHome = class {
         this.containers = containers;
         console.log("container :::", containers);
     }
+    areAllDropsFilled() {
+        const drops = Array.from(document.querySelectorAll('[type="drop"]'));
+        const drags = Array.from(document.querySelectorAll('[type="drag"]')).filter(drag => drag.getAttribute('drop-to'));
+        console.log('drops', drops);
+        console.log('drags', drags);
+        return drops.every(drop => {
+            const dropId = drop.id;
+            return drags.some(drag => drag.getAttribute('drop-to') === dropId);
+        });
+    }
     async btnpopup() {
         setCancelBtnPopup(false);
         await AudioPlayer.getI().stop();
@@ -10555,6 +10595,18 @@ const LidoHome = class {
                 await new Promise(resolve => setTimeout(resolve, 300));
             }
         }
+        if (this.areAllDropsFilled()) {
+            const objectiveString = container['objective'];
+            const objectiveArray = JSON.parse(localStorage.getItem(SelectedValuesKey) || '[]');
+            const res = matchStringPattern(objectiveString, objectiveArray);
+            console.log('Resultt', res);
+            if (res) {
+                triggerNextContainer();
+            }
+        }
+        else {
+            console.log('Not yet filled ');
+        }
     }
     scaleNavbarContainer() {
         setTimeout(() => {
@@ -13771,7 +13823,7 @@ const LidoMathMatrix = class {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '23ae408830e71329f11ee18e3aa3700e7a86e969', class: "math-matrix", style: {
+        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -13854,7 +13906,7 @@ const LidoPos = class {
         };
     }
     render() {
-        return (h(Host, { key: 'd456c09ab61fd1674f001f939f2b27a089806f44', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca5a14fcc51d2b6a1756772b358e4654d8aee761' })));
+        return (h(Host, { key: '0eea8147ee3845668e83bed01164dce740aae785', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca9378dc185eeb4d495ab3045d6b17424de908dc' })));
     }
     get el() { return getElement(this); }
 };
@@ -13935,7 +13987,7 @@ const LidoRandom = class {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'a85f168b0399fe5745439ad9d16d77965d1f7a39', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '69dd6da05d9855b18ba475cee27e523c4c2e6291' })));
+        return (h(Host, { key: 'cc8bb9d31ff6c36201d266f5579288c92c05bf82', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'd91a2403fa78320cbae40456dc0c86b44493bb5a' })));
     }
     get el() { return getElement(this); }
 };
@@ -14093,7 +14145,7 @@ const LidoRow = class {
         };
     }
     render() {
-        return (h(Host, { key: '0c2548741cde2b82c2add3e1a60cbd68905ffede', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'bc2c6f95f984e82bdb905f850d4ad23c11183697' })));
+        return (h(Host, { key: '2d2f701dda922276d2485e91f15c8912c90d7b8d', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'b00002ecc9d5de422094beffc33ae5137b958fa3' })));
     }
     get el() { return getElement(this); }
 };
@@ -14150,7 +14202,7 @@ const LidoShape = class {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: 'de698fc2f34f63c9bbdf1e308772cf47ebc80d9c', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
+        return (h(Host, { key: '7a626d9f00854cf190c08524153086d0e9f139af', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
     }
     get el() { return getElement(this); }
 };
@@ -14525,6 +14577,7 @@ const LidoTrace = class {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
+        this.freeTraceUpdateCounter = 0;
         this.idleTimer = null;
         this.fingerImg = null;
     }
@@ -14541,8 +14594,8 @@ const LidoTrace = class {
             circle: null,
             paths: [],
             svg: null,
-            proximityThreshold: 100, // General proximity threshold
-            freeTraceProximityThreshold: 50, // Reduced proximity threshold for free trace
+            proximityThreshold: 375, // Increased general proximity threshold (was 100)
+            freeTraceProximityThreshold: 350, // Increased proximity for free trace (was 50)
             rafId: null,
             pointerMoveEvent: null,
             activePointerId: null,
@@ -14878,7 +14931,7 @@ const LidoTrace = class {
     }
     // Modified handlePointerMove function
     handlePointerMove(state) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!state.isDragging)
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
@@ -14890,6 +14943,15 @@ const LidoTrace = class {
             x: parseFloat(state.circle.getAttribute('cx')),
             y: parseFloat(state.circle.getAttribute('cy')),
         };
+        // Only update if pointer moved a minimum distance (to reduce unnecessary updates)
+        const MOVE_THRESHOLD = 1; // px
+        if (state.lastPointerPos) {
+            const dx = pointerPos.x - state.lastPointerPos.x;
+            const dy = pointerPos.y - state.lastPointerPos.y;
+            if (dx * dx + dy * dy < MOVE_THRESHOLD * MOVE_THRESHOLD) {
+                return;
+            }
+        }
         const currentPath = state.paths[state.currentPathIndex];
         if (!currentPath) {
             console.error('No valid path found at the current index');
@@ -14917,48 +14979,76 @@ const LidoTrace = class {
         }
         // For free trace mode and blind free trace mode, allow free drawing only if within the reduced proximity threshold
         if (state.mode === TraceMode.FreeTrace || state.mode === TraceMode.BlindFreeTrace) {
+            // Throttle: Only update every 2nd event (for reducing excessive dom updates)
+            this.freeTraceUpdateCounter = (this.freeTraceUpdateCounter || 0) + 1;
+            if (this.freeTraceUpdateCounter % 2 !== 0) {
+                return;
+            }
             // Initialize the currentFreePath array if it's not created
             if (!state.currentFreePath) {
                 state.currentFreePath = [];
             }
-            // Create a new path element if it's the first trace for the current path index
+            // Create a new polyline element if it's the first trace for the current path index
             if (!state.currentFreePath[state.currentPathIndex]) {
-                const newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                // newPath.setAttribute('stroke', 'green');
+                const newPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
                 const strokeWidth = state.paths[state.currentPathIndex].style['stroke-width'] || state.paths[state.currentPathIndex].getAttribute('stroke-width');
-                newPath.setAttribute('stroke-width', strokeWidth);
-                newPath.setAttribute('fill', 'none');
-                newPath.setAttribute('stroke-linecap', 'round');
-                newPath.setAttribute('stroke', 'lightgreen');
-                // Start the new path at the current pointer position
-                newPath.setAttribute('d', `M${pointerPos.x},${pointerPos.y}`);
-                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPath);
-                state.currentFreePath[state.currentPathIndex] = newPath;
+                newPolyline.setAttribute('stroke-width', strokeWidth);
+                newPolyline.setAttribute('fill', 'none');
+                newPolyline.setAttribute('stroke-linecap', 'round');
+                newPolyline.setAttribute('stroke', 'lightgreen');
+                newPolyline.setAttribute('points', `${pointerPos.x},${pointerPos.y}`);
+                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPolyline);
+                state.currentFreePath[state.currentPathIndex] = newPolyline;
+                // Store points array for this polyline
+                state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
+                state.currentFreePolylinePoints[state.currentPathIndex] = [
+                    { x: pointerPos.x, y: pointerPos.y }
+                ];
                 // Reset lastPointerPos for the new path
                 state.lastPointerPos = pointerPos;
+                // Add a points counter to limit path growth
+                state.freeTracePointsCount = 1;
+            }
+            // Limit the number of points in the free trace path for performance
+            const MAX_FREE_TRACE_POINTS = 10;
+            state.freeTracePointsCount = (state.freeTracePointsCount || 1) + 1;
+            if (state.freeTracePointsCount > MAX_FREE_TRACE_POINTS) {
+                // If limit reached, skip adding more points
+                return;
             }
-            // Get the previous position to draw a smooth curve
-            const previousPos = state.lastPointerPos || pointerPos;
-            // Create a quadratic curve from the previous point to the current point
-            const newPathData = state.currentFreePath[state.currentPathIndex].getAttribute('d');
-            const midPointX = (previousPos.x + pointerPos.x) / 2;
-            const midPointY = (previousPos.y + pointerPos.y) / 2;
-            const updatedPathData = `${newPathData} Q ${previousPos.x},${previousPos.y} ${midPointX},${midPointY}`;
-            // Update the path's 'd' attribute with the new curve
-            state.currentFreePath[state.currentPathIndex].setAttribute('d', updatedPathData);
+            // Add the new point to the polyline's points array
+            state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
+            let pointsArr = state.currentFreePolylinePoints[state.currentPathIndex] || [];
+            pointsArr.push({ x: pointerPos.x, y: pointerPos.y });
+            state.currentFreePolylinePoints[state.currentPathIndex] = pointsArr;
+            // Update the polyline's points attribute
+            const pointsStr = pointsArr.map(pt => `${pt.x},${pt.y}`).join(' ');
+            state.currentFreePath[state.currentPathIndex].setAttribute('points', pointsStr);
             // Move the draggable circle with the freehand trace
             state.circle.setAttribute('cx', pointerPos.x.toString());
             state.circle.setAttribute('cy', pointerPos.y.toString());
-            // Make sure the red dot (circle) is always on top
-            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
+            // Only re-append if not already children list
+            const childNodes = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.childNodes;
+            let circleFound = false;
+            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
+                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
+                if (child && child.tagName === 'circle') {
+                    circleFound = true;
+                    break; // No need to continue once found
+                }
+            }
+            // If not found, append the circle
+            if (!circleFound && state.circle) {
+                (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle);
+            }
             // Update the last pointer position
             state.lastPointerPos = pointerPos;
-            const currentPathLength = currentPath.getTotalLength();
-            const distanceToEnd = currentPathLength - closestPoint.length;
-            // If close to the end of the path, move to the next path
-            if (distanceToEnd < 5) {
+            // For polyline, estimate the end by number of points (not path length)
+            if (pointsArr.length >= MAX_FREE_TRACE_POINTS) {
                 this.moveToNextPath(state);
                 state.currentFreePath[state.currentPathIndex] = null; // Reset free path for next path
+                state.currentFreePolylinePoints[state.currentPathIndex] = [];
+                state.freeTracePointsCount = 0;
             }
             // this.resetIdleTimer(state); // ← keep timer alive
             return; // Exit early since we're in free trace or blind free trace mode
@@ -14966,24 +15056,57 @@ const LidoTrace = class {
         // In normal modes, allow movement and drawing only within the general proximity threshold
         if (state.isDragging && closestPoint.length >= state.lastLength) {
             state.lastLength = closestPoint.length;
-            state.circle.setAttribute('cx', closestPoint.x.toString());
-            state.circle.setAttribute('cy', closestPoint.y.toString());
-            // Make sure the red dot (circle) is always on top
-            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
-            (_d = currentPath.greenPath) === null || _d === void 0 ? void 0 : _d.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
-        }
-        // Check if the current path is completed
-        if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
-            this.moveToNextPath(state);
-        }
-        else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
-            //   this.loadAnotherSVG(state, true);
-            this.moveToNextContainer();
+            // Only update the circle if it moved enough
+            if (Math.abs(closestPoint.x - circlePos.x) > MOVE_THRESHOLD || Math.abs(closestPoint.y - circlePos.y) > MOVE_THRESHOLD) {
+                state.circle.setAttribute('cx', closestPoint.x.toString());
+                state.circle.setAttribute('cy', closestPoint.y.toString());
+            }
+            // Only re-append if not already children list
+            const childNodes = (_d = state.svg) === null || _d === void 0 ? void 0 : _d.childNodes;
+            let circleFound = false;
+            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
+                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
+                if (child && child.tagName === 'circle') {
+                    circleFound = true;
+                    break; // No need to continue once found
+                }
+            }
+            // If not found, append the circle
+            if (!circleFound && state.circle) {
+                (_e = state.svg) === null || _e === void 0 ? void 0 : _e.appendChild(state.circle);
+            }
+            (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
+            // Completion logic for closed paths: only allow completion if almost all points are traced
+            const COMPLETION_THRESHOLD = 0.90; // 90% of the path must be traced
+            let percentComplete = state.lastLength / state.totalPathLength;
+            let startPoint = currentPath.getPointAtLength(0);
+            let endPoint = currentPath.getPointAtLength(currentPath.getTotalLength());
+            let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
+            if (pathIsClosed && state.totalPathLength > 50) {
+                if (percentComplete >= COMPLETION_THRESHOLD) {
+                    if (state.currentPathIndex < state.paths.length - 1) {
+                        this.moveToNextPath(state);
+                    }
+                    else if (state.currentPathIndex === state.paths.length - 1) {
+                        this.moveToNextContainer();
+                    }
+                }
+            }
+            else {
+                // For open paths, allow completion if near the end
+                if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+                    this.moveToNextPath(state);
+                }
+                else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+                    this.moveToNextContainer();
+                }
+            }
         }
         // this.resetIdleTimer(state); // ← keep timer alive
     }
     // Move to the next container after completing the current SVG
     async moveToNextContainer() {
+        this.isDragging = false;
         if (this.moving)
             return; // Prevent multiple calls
         this.moving = true; // Set moving to true to prevent re-entrance
@@ -15002,9 +15125,12 @@ const LidoTrace = class {
             this.moving = false;
             return;
         }
+        console.log('onCorrect:', this.onCorrect);
+        console.log('el :', this.el);
         if (this.el && this.onCorrect) {
             await executeActions(this.onCorrect, this.el);
         }
+        console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -15022,13 +15148,13 @@ const LidoTrace = class {
         const dy = p1.y - p2.y;
         return dx * dx + dy * dy;
     }
-    // Find the closest point on the given path to the specified point using two-pass sampling
+    // Find the closest point on the given path to the specified point using two-pass sampling (optimized)
     getClosestPointOnPath(pathNode, point) {
         const pathLength = pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
-        // First pass: coarse sampling
-        const coarseStep = 20; // Increased step for better performance
+        // Optimized: Increase coarse steps for better performance
+        const coarseStep = 40; // was 20
         let coarseClosestPoint = { x: 0, y: 0, length: 0 };
         let coarseMinDistanceSquared = Infinity;
         for (let i = 0; i <= pathLength; i += coarseStep) {
@@ -15044,7 +15170,7 @@ const LidoTrace = class {
             }
         }
         // Second pass: fine sampling around coarseClosestPoint
-        const fineStep = 2; // Increased step to reduce computations
+        const fineStep = 6; // was 2
         const searchStart = Math.max(coarseClosestPoint.length - coarseStep, 0);
         const searchEnd = Math.min(coarseClosestPoint.length + coarseStep, pathLength);
         for (let i = searchStart; i <= searchEnd; i += fineStep) {
@@ -15204,7 +15330,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (h(Host, { key: 'b562e07d98a06f422ce5b8ca1d08f9c4307a313c', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'fc2cb8355a26e5b483c24c59641bd20fa37e853b', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '3f12119394502b6750874aaa50f43bf42e9f63cc', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '4fddd90d12251c4020006690f8c769ab452c8f6a', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return getElement(this); }
@@ -15292,10 +15418,10 @@ const LidoWrap = class {
         };
     }
     render() {
-        return (h(Host, { key: '12959a9a9c3b2df63ab977c39dceca4f1c771bf6', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'f19b29798a33592a1e5e15851f7f18266dbe35aa' })));
+        return (h(Host, { key: '50bc5770105477d0ef7cb080957c8d00198c8b09', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'fcd1f5801e34171d1925e39f6c543f229a5d42bd' })));
     }
     get el() { return getElement(this); }
 };
 LidoWrap.style = LidoWrapStyle0;
 
-export { LidoAvatar as lido_avatar, LidoBalance as lido_balance, LidoCalculator as lido_calculator, WritingPad as lido_canvas, LidoCell as lido_cell, LidoCol as lido_col, LidoContainer as lido_container, LidoFlash as lido_flash_card, LidoFloat as lido_float, LidoHome as lido_home, LidoImage as lido_image, LidoKeyboard as lido_keyboard, LidoMathMatrix as lido_math_matrix, LidoPos as lido_pos, LidoRandom as lido_random, LidoRoot as lido_root, LidoRow as lido_row, LidoShape as lido_shape, LidoSlideFill as lido_slide_fill, LidoText as lido_text, LidoTrace as lido_trace, LidoWrap as lido_wrap };
+export { LidoAvatar as lido_avatar, LidoBalance as lido_balance, LidoCalculator as lido_calculator, LidoCanvas as lido_canvas, LidoCell as lido_cell, LidoCol as lido_col, LidoContainer as lido_container, LidoFlash as lido_flash_card, LidoFloat as lido_float, LidoHome as lido_home, LidoImage as lido_image, LidoKeyboard as lido_keyboard, LidoMathMatrix as lido_math_matrix, LidoPos as lido_pos, LidoRandom as lido_random, LidoRoot as lido_root, LidoRow as lido_row, LidoShape as lido_shape, LidoSlideFill as lido_slide_fill, LidoText as lido_text, LidoTrace as lido_trace, LidoWrap as lido_wrap };