lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

package/dist/esm/{lido-avatar_19.entry.js → lido-avatar_21.entry.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, g as getAssetPath, h, H as Host, a as getElement } from './index-f47852d4.js';
-import { c as commonjsGlobal, s as setVisibilityWithDelay, i as initEventsForElement, a as convertUrlToRelative, R as RiveService, h as handlingChildElements, b as attachSpeakIcon, p as parseProp, d as calculateScale, e as handleFloatElementPosition, g as handleElementClick, j as clearLocalStorage, k as dispatchActivityChangeEvent, A as ActivityScoreKey, l as dispatchGameCompletedEvent, m as dispatchGameExitEvent, n as AudioPlayer, o as generateUUIDFallback, q as exitUrl, r as prevUrl, t as nextUrl, u as speakUrl, N as NextContainerKey, P as PrevContainerKey, L as LidoContainer$1, v as getCancelBtnPopup, S as SelectedValuesKey, w as matchStringPattern, x as triggerNextContainer, y as triggerPrevcontainer, z as executeActions, B as setCancelBtnPopup, C as getDefaultExportFromCjs, D as tinyColor, E as storingEachActivityScore, F as DropAction, G as fraction, T as TraceMode, H as speakIcon, I as fingerUrl } from './utils-9ce243d8.js';
+import { r as registerInstance, g as getAssetPath, h, H as Host, a as getElement, c as createEvent } from './index-170e58c7.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-5df09162.js';
 
 var rive = {exports: {}};
 
@@ -6592,6 +6592,267 @@ const LidoAvatar = class {
 };
 LidoAvatar.style = LidoAvatarStyle0;
 
+const lidoBalanceCss = "#lido-balance{position:relative;height:500px;width:1205px;top:20%;left:-91px;z-index:0}.lido-balance-symbol{position:absolute;top:64%;left:50%;transform:translate(-50%, -50%);font-size:5vw;font-weight:bold;color:black;pointer-events:none;z-index:999}@media (orientation: portrait){#pivotimg{position:absolute;height:auto;width:23%;bottom:18%;left:38%;z-index:100}}@media (orientation: landscape){#pivotimg{position:absolute;height:auto;width:23%;bottom:8%;left:38%;z-index:100}}.lido-balance .pivot svg{width:100%;height:auto}#scaleimg{position:absolute;width:73%;height:auto;top:61%;left:14%;z-index:90}.lido-balance .scale svg{width:100%;height:auto}@media (orientation: landscape){#handlerimg{position:absolute;width:35%;height:auto;top:49%;left:2%}}@media (orientation:portrait ){#handlerimg{position:absolute;width:35%;height:auto;top:53%;left:2%}}.lido-balance .handler svg{width:100%;height:auto;fill:brown}@media (orientation: landscape){#handimg{position:absolute;width:35%;height:auto;top:49%;right:2%}}@media (orientation:portrait){#handimg{position:absolute;width:35%;height:auto;top:53%;right:2%}}.lido-balance .hand svg{width:100%;height:auto;fill:brown}.pivot svg path:nth-of-type(1){fill:brown}.pivot svg path[d^=\"M78.9414\"]{fill:white}";
+const LidoBalanceStyle0 = lidoBalanceCss;
+
+const LidoBalance = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.currentAngle = 0;
+        this.pivotimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Display%20stand.svg';
+        this.scaleimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Bar.svg';
+        this.handlerimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Stands.svg';
+        this.fill = 'brown';
+        this.tilt = 0;
+        this.maxTilt = 9.5;
+        this.onEntry = '';
+        this.height = 'auto';
+        this.width = 'auto';
+        this.x = '0px';
+        this.y = '0px';
+        this.z = '0';
+        this.visible = false;
+        this.margin = '';
+        this.padding = '';
+        this.balanceSymbol = '=';
+        this.showSymbol = false;
+        this.operation = 'count';
+        this.pivotSvg = '';
+        this.scaleSvg = '';
+        this.handlerSvg = '';
+        this.style = {};
+        this.tiltf = 0;
+        this.leftVal = 0;
+        this.rightVal = 0;
+    }
+    async revealSymbol() {
+        this.showSymbol = true;
+    }
+    async hideSymbol() {
+        this.showSymbol = false;
+    }
+    async componentWillLoad() {
+        this.updateStyles();
+        this.pivotSvg = await this.fetchAndApplyFill(this.pivotimage);
+        this.scaleSvg = await this.fetchAndApplyFill(this.scaleimage);
+        this.handlerSvg = await this.fetchAndApplyFill(this.handlerimage);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.animateBalance();
+        }, 4000);
+        this.leftParentEl = document.getElementById("leftparent");
+        this.rightParentEl = document.getElementById("rightparent");
+        initEventsForElement(this.el);
+    }
+    disconnectedCallback() {
+        if (this.animationFrameId != null)
+            cancelAnimationFrame(this.animationFrameId);
+    }
+    async fetchAndApplyFill(url) {
+        try {
+            const res = await fetch(url);
+            if (!res.ok)
+                return '';
+            let svg = await res.text();
+            svg = svg.replace(/fill="[^"]*"/g, '');
+            svg = svg.replace(/stroke="[^"]*"/g, '');
+            svg = svg.replace(/<svg([^>]*)>/, `<svg$1 fill="${this.fill}" stroke="${this.fill}">`);
+            return svg;
+        }
+        catch (e) {
+            console.error('SVG fetch failed:', e);
+            return '';
+        }
+    }
+    tiltChanged(newValue) {
+        this.tiltf = newValue;
+    }
+    async updateTilt(leftVal, rightVal) {
+        const diff = rightVal - leftVal;
+        const newTilt = Math.max(-5, Math.min(5, diff));
+        this.tiltf = newTilt;
+    }
+    animateBalance() {
+        const rotate = () => {
+            let targetAngle = (this.tiltf / 5) * this.maxTilt;
+            if (targetAngle > this.maxTilt)
+                targetAngle = this.maxTilt;
+            if (targetAngle < -this.maxTilt)
+                targetAngle = -this.maxTilt;
+            this.currentAngle += (targetAngle - this.currentAngle) * 0.1;
+            if (this.currentAngle > this.maxTilt)
+                this.currentAngle = this.maxTilt;
+            if (this.currentAngle < -this.maxTilt)
+                this.currentAngle = -this.maxTilt;
+            if (this.scaleEl) {
+                this.scaleEl.style.transform = `rotate(${this.currentAngle}deg)`;
+                this.scaleEl.style.transformOrigin = '50% 80%';
+            }
+            if (this.leftParentEl && this.rightParentEl) {
+                const maxOffset = 60;
+                const offset = (this.currentAngle / this.maxTilt) * maxOffset;
+                this.leftParentEl.style.transform = `translateY(${-offset}px)`;
+                this.rightParentEl.style.transform = `translateY(${offset}px)`;
+            }
+            if (this.leftHandleEl && this.rightHandleEl) {
+                const isPortrait = window.innerHeight > window.innerWidth;
+                const maxOffset = isPortrait ? 40 : 60;
+                const offset = (this.currentAngle / this.maxTilt) * maxOffset;
+                this.leftHandleEl.style.transform = `translateY(${-offset}px)`;
+                this.rightHandleEl.style.transform = `translateY(${offset}px)`;
+            }
+            this.animationFrameId = requestAnimationFrame(rotate);
+        };
+        rotate();
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: parseProp(this.height, orientation),
+            width: parseProp(this.width, orientation),
+            top: parseProp(this.y, orientation),
+            left: parseProp(this.x, orientation),
+            zIndex: this.z,
+            display: parseProp(`${this.visible}`, orientation) === "true" ? 'flex' : 'none',
+            margin: parseProp(this.margin, orientation),
+            padding: parseProp(this.padding, orientation),
+        };
+    }
+    render() {
+        return (h(Host, { key: '868cc05ae503a6e04039c615815102470eb402d4', id: "lido-balance", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '2627a49d1ad5045bd9a3ac217354c9be98f1f52b', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: 'c5b2432f5e3c62ebbb7f17146f18e22e7e2b29bb', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: 'd5e8051aedb784189f19a1e7b0dfd645e95ed4a5', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '3779886d4fc8dfadc0791f69cb87df78d5f843c8', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'df5d4094c302548bf64f166643a3f05d262d95b1', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "tilt": ["tiltChanged"]
+    }; }
+};
+LidoBalance.style = LidoBalanceStyle0;
+
+const lidoCalculatorCss = "#lidoCalculator{border-radius:19px;border:5px solid #029A9A;position:relative;display:flex;flex-direction:column;padding:2%;box-sizing:border-box}.lido-calculator-btn-special{background-color:#014D4D !important;--btn-shadow-color:#0a2f2f !important}.lido-calculator-btn-default{background-color:#029A9A !important;color:#000;--btn-shadow-color:#0f4242 !important}#lido-calculator-penIcon{--btn-bg-color:#FB7038 !important;--btn-shadow-px:0 8px 0 !important;--btn-shadow-color:#D74B12 !important;border-radius:5px !important}.lido-calculator-displayParent{width:89%;height:107px;background-color:rgb(68, 186, 186);border-radius:5px;margin:14px auto 17px auto;overflow:hidden;display:flex;align-items:end}.lido-calculator-display{width:97%;height:94px;background:#029A9A;color:#fff;text-align:right;display:flex;justify-content:flex-end;align-items:center;font-size:72px;font-weight:700;font-family:'Baloo Bhai 2', serif;border-radius:5px 0px 0px 5px;box-sizing:border-box;margin:0 0px -6px auto}.lido-calculator-buttons{flex:1;display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;gap:0%;width:100%;justify-items:center;align-items:center;position:relative;top:-1%}.lido-calculator-buttons lido-text{display:flex !important;justify-content:center;align-items:center;width:96px !important;height:80px !important;font-size:72px !important;font-weight:700 !important;color:#fff;border-radius:5px !important;cursor:pointer;text-align:center;line-height:1;box-sizing:border-box;transition:transform 0.1s}.lido-calculator-buttons lido-text:active{transform:scale(0.95)}";
+const LidoCalculatorStyle0 = lidoCalculatorCss;
+
+const LidoCalculator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onOk = createEvent(this, "onOk", 7);
+        this.userAnswers = []; // store all calculator inputs
+        this.width = '479px';
+        this.visible = false;
+        this.height = '711px';
+        this.objective = '';
+        this.onEntry = '';
+        this.x = '0px';
+        this.y = '0px';
+        this.bgColor = '#60DADA';
+        this.penIcon = "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/Pen--Streamline-Solar%201.svg";
+        this.displayValue = '';
+        this.style = {};
+    }
+    updateValueAttr() {
+        this.el.setAttribute('value', this.displayValue);
+    }
+    componentWillLoad() {
+        if (!this.objective) {
+            const container = this.el.closest('lido-container');
+            if (container) {
+                this.objective = (container.getAttribute('objective') || '').replace('=', '').trim();
+            }
+        }
+        this.updateValueAttr();
+    }
+    handleClick(value) {
+        const MAX_LENGTH = 10;
+        if (value === 'OK') {
+            this.verifyAnswer();
+        }
+        else if (value === '←') {
+            this.displayValue = this.displayValue.slice(0, -1);
+        }
+        else {
+            if (this.displayValue.length < MAX_LENGTH) {
+                this.displayValue += value;
+            }
+        }
+        this.updateValueAttr();
+    }
+    async verifyAnswer() {
+        const userInput = this.displayValue.trim();
+        if (!userInput)
+            return;
+        let isCorrect = false;
+        const container = this.el.closest('lido-container');
+        if (!container)
+            return;
+        if (this.objective && this.objective.length === 1) {
+            isCorrect = userInput === this.objective;
+        }
+        // --- Multiple Objectives ---
+        else if (this.objective && this.objective.includes(',')) {
+            const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
+            const objectives = this.objective.split(',').map(obj => obj.trim());
+            const currentIndex = this.userAnswers.length;
+            // Compare current input with corresponding objective 
+            if (currentIndex < objectives.length && Number(userInput) === Number(objectives[currentIndex])) {
+                isCorrect = true;
+            }
+            else {
+                isCorrect = false;
+            }
+            //  Store behavior based on mode
+            if (isContinueOnCorrect) {
+                // PRACTICE MODE → store only correct answers 
+                if (isCorrect) {
+                    this.userAnswers.push(Number(userInput));
+                }
+            }
+            else {
+                // TEST MODE → store all user inputs 
+                this.userAnswers.push(Number(userInput));
+            }
+        }
+        else if (this.objective === '') {
+            const equationAttr = container.getAttribute('equationCheck') || '';
+            if (!equationAttr)
+                return;
+            try {
+                const calculatedValue = equationCheck(equationAttr);
+                isCorrect = Number(calculatedValue) === Number(userInput.trim());
+                console.log('Equation check:', calculatedValue, userInput, isCorrect);
+            }
+            catch (err) {
+                console.error('Error evaluating equation:', err);
+                isCorrect = false;
+            }
+        }
+        this.onOk.emit(isCorrect);
+        if (isCorrect) {
+            this.displayValue = "";
+            storingEachActivityScore(isCorrect);
+            const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
+            await executeActions(onCorrect, container);
+            if (this.objective.length === 0) {
+                window.dispatchEvent(new CustomEvent(NextContainerKey));
+            }
+        }
+        else {
+            this.displayValue = "";
+            storingEachActivityScore(isCorrect);
+            const onInCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onInCorrect')) || '';
+            await executeActions(onInCorrect, container);
+        }
+    }
+    render() {
+        const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
+        return (h(Host, { key: '61d14ce0ff858db8ff04b502c0d303f18f5552b8', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '86318d0fb2a707af14fca1b1a615536e7bcdb9a3', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'd552cf17bedcbb321af0c7fb5fc0b44c89be4561', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "96px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '46f9003a72906617169fb76b19a208e6f6cbb0bc', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'a7ffc6dbdaabfa944e115eeecf08cc53808c0234', class: "lido-calculator-displayParent" }, h("div", { key: '27926d1370cbdd4423404ad1f78b1ade381288d9', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '58288a987ea3090da498fff03220d4d4b24aa7c5', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+                'lido-calculator-btn-special': num === '←' || num === 'OK',
+                'lido-calculator-btn-default': num !== '←' && num !== 'OK'
+            }, onClick: () => this.handleClick(num) }))))));
+    }
+    get el() { return getElement(this); }
+};
+LidoCalculator.style = LidoCalculatorStyle0;
+
 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;
 
@@ -6720,7 +6981,7 @@ const LidoCell = class {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: '8c2593f5b6493530e0ab725b7f9f543f884d086d', 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: '1497f2f179a474a4a2a8944d03c0841d055b1b6d' })));
+        return (h(Host, { key: '00183a8d67c4c64eae2d2bb2e3db5def7ffe3caf', 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: '33fbb691c5c8f015bc9c6cf1e86c237758f126c3' })));
     }
     get el() { return getElement(this); }
 };
@@ -6805,7 +7066,7 @@ const LidoCol = class {
         };
     }
     render() {
-        return (h(Host, { key: '753487ca4817b020aaf7e34dadff00a61c826dfc', 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: 'a9d9f0f2c30dc02e6468e597b5a02e032d786538' })));
+        return (h(Host, { key: '1cf21bb1e817c9078213312aa7165423eaf54ea7', 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: 'c3bc168ccccacf1425b5d93853bc27ab2962436f' })));
     }
     get el() { return getElement(this); }
 };
@@ -6853,6 +7114,7 @@ const LidoContainer = class {
         this.showPrevButton = 'false';
         this.showNextButton = 'false';
         this.delayVisible = '';
+        this.disableSpeak = false;
     }
     convertToPixels(height, parentElement = document.body) {
         if (!height)
@@ -6935,7 +7197,7 @@ const LidoContainer = class {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '782cc0c88592899d58f942245db8e0561714d35c', id: "lido-container", "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 }, h("slot", { key: 'e23be1cba95353ad3678c2d1d41b4d23ae76f2d9' })));
+        return (h(Host, { key: '1f61c4443b96466e2802b5550e8d999319b41ce7', id: "lido-container", "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: '2df61e731d3a9de3fd9cdb23f47035ee2e35c30a' })));
     }
     get el() { return getElement(this); }
 };
@@ -7016,7 +7278,7 @@ const LidoFlash = class {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'e0140af2e33c8cdc9d5c94743bcd83b98d0ce2f4', 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: '11b7e0be1957e15ac5644b73b4ffbd00a27a93ff', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'acd9ae1eb8b1d6ac2658dbdcb26d9d7f6549811c', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: 'd62cbfdd84fcc6596aefe6d8d55f7e5ffeaaa5f2', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'df221d302a1e91eb995af2f70aa69957cb769ffe', 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: 'd799a3525d9af4ba98d7750a3a76a313dd9cdd76', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'fb7734ca5648e2cf8a91d551b383a5c2c3eae255', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '6071da403b17a079f80f0c5dd576dac7b5a2c357', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7084,16 +7346,16 @@ const LidoFloat = class {
         };
     }
     render() {
-        return (h(Host, { key: '2866d98e4a22a5825c24f23324473016c5e8c33f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: 'dd0a4405b91e1ddb95e90d6dfa1e16f8ac106c58' })));
+        return (h(Host, { key: 'b4c271689b52272251d5623e53b67ef78389c012', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '852149328b2a8e85e84fdf9e2a4a64bb2ec8ad3a' })));
     }
     get el() { return getElement(this); }
 };
 LidoFloat.style = LidoFloatStyle0;
 
-const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:0 2px 4px rgba(151, 150, 150, 0.1) !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}";
+const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:0 2px 4px rgba(151, 150, 150, 0.1) !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}";
 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}}";
+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)\n            drop-shadow(0 0 10px yellow)\n            drop-shadow(0 0 20px yellow)\n            drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)\n            drop-shadow(0 0 20px yellow)\n            drop-shadow(0 0 40px yellow)\n            drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)\n            drop-shadow(0 0 10px yellow)\n            drop-shadow(0 0 20px yellow)\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}";
@@ -7115,7 +7377,7 @@ const LidoHome = class {
             if (index != undefined && index == this.currentContainerIndex)
                 return;
             // Clear selected values from localStorage on container transition
-            clearLocalStorage();
+            // clearmemoryStorage();
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
@@ -7145,7 +7407,7 @@ const LidoHome = class {
             if (this.currentContainerIndex <= 0)
                 return;
             // Clear selected values from localStorage on container transition
-            clearLocalStorage();
+            // clearmemoryStorage();
             // Move to the previous container
             this.currentContainerIndex--;
             // Dispatch event to update the UI or state
@@ -7187,7 +7449,7 @@ const LidoHome = class {
                     dispatchGameExitEvent();
                     AudioPlayer.getI().stop();
                     localStorage.removeItem(ActivityScoreKey);
-                    clearLocalStorage();
+                    // clearmemoryStorage();
                     alertElement.remove();
                     this.currentContainerIndex = 0;
                 }
@@ -7226,7 +7488,7 @@ const LidoHome = class {
         };
         if (this.currentContainerIndex === 0) {
             localStorage.removeItem(ActivityScoreKey);
-            clearLocalStorage();
+            // clearmemoryStorage();
         }
         // Listen for 'NextContainerKey' event to transition between containers
         window.addEventListener(NextContainerKey, () => {
@@ -7244,7 +7506,7 @@ const LidoHome = class {
         window.addEventListener('beforeunload', () => {
             AudioPlayer.getI().stop();
             localStorage.removeItem(ActivityScoreKey);
-            clearLocalStorage();
+            // clearmemoryStorage();
         });
     }
     componentDidLoad() {
@@ -7387,6 +7649,8 @@ const LidoHome = class {
             'lido-float': h("lido-float", Object.assign({}, props), children),
             'lido-keyboard': h("lido-keyboard", Object.assign({}, props), children),
             'lido-math-matrix': h("lido-math-matrix", Object.assign({}, props), children),
+            'lido-balance': h("lido-balance", Object.assign({}, props), children),
+            'lido-calculator': h("lido-calculator", Object.assign({}, props), children),
         };
         // If the tag is known, return the corresponding Stencil component, otherwise log a warning
         if (componentMapping[tagName]) {
@@ -7410,16 +7674,6 @@ const LidoHome = class {
         });
         this.containers = 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();
@@ -7439,18 +7693,6 @@ 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(() => {
@@ -10450,10 +10692,10 @@ const LidoKeyboard = class {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer$1);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: 'b01d3c5bab495def25c14239a3c94e9f6af15b4f', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '1e475df899a9e8cead3d4ee313d6e0b09a1e766f', class: "input-area" }, h("input", { key: '1d27787a42dc81ba97d5045718d726683bf8f32a', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '5695c9662b22bd7c3d7c7dfc49481641e795b290', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (h(Host, { key: 'e4cd1fc51d8d3c87ed011120f13454bbef1883b3', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '114224c18345951e749db6f1eba242cc1179431f', class: "input-area" }, h("input", { key: '14741df7dc29f51420c1164ddebf60fd464fade4', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '3bb801fbcab03b58a628c4c365f46113e9829fdc', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), h("lido-text", { key: 'd1a786e8f4015c7aeaeffe7a677f1f7e106b3691', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'bdd01380b832949bf2abbe4481ac000c1f3a358f', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: 'd54959bfe639803c7e048d5112514a7dccbf9dc4', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: '46212bcfe4e5c22744d13d8235d82bdb73bce802', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'a886ac1d7ceadda37eadd4bed59bd5096d46619f', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '5238d1dc1bafda2ffab63932d1f5d29ef449bf4b', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -10477,14 +10719,14 @@ const LidoKeyboard = class {
 };
 LidoKeyboard.style = LidoKeyboardStyle0;
 
-const lidoMathMatrixCss = ".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:cover;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--inactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px}";
+const lidoMathMatrixCss = ".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%;text-align:center;align-content:center;font-size:42px;font-weight:800;font-family:'Baloo Bhai 2';box-sizing:content-box}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:contain;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--deactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px;font-weight:600;font-family:'Baloo Bhai 2'}";
 const LidoMathMatrixStyle0 = lidoMathMatrixCss;
 
 const LidoMathMatrix = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.rows = 7;
-        this.cols = 5;
+        this.rows = "7";
+        this.cols = "5";
         this.defualtFill = 0;
         this.leftIndex = false;
         this.topIndex = false;
@@ -10492,8 +10734,8 @@ const LidoMathMatrix = class {
         this.clickable = true;
         this.activeOnlyVisible = false;
         this.matrixImage = undefined;
-        this.activeBgColor = 'red';
-        this.inactiveBgColor = 'transparent';
+        this.activeBgColor = 'transparent';
+        this.deactiveBgColor = 'transparent';
         this.border = '2px solid green';
         this.height = '100%';
         this.width = '100%';
@@ -10502,16 +10744,30 @@ const LidoMathMatrix = class {
         this.margin = undefined;
         this.padding = undefined;
         this.visible = 'false';
+        this.text = undefined;
+        this.type = undefined;
+        this.value = undefined;
+        this.tabIndex = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.fontColor = undefined;
+        this.previousFilledSlot = -1;
+        this.previousFilledSlotElement = null;
         this.style = {};
     }
+    updateValue(index) {
+        this.el.setAttribute('value', index);
+    }
     componentDidLoad() {
         const slotElements = this.el.querySelectorAll('.slot');
+        initEventsForElement(this.el, this.type);
         slotElements.forEach((el, i) => {
             const slot = el;
             slot.style.setProperty('--active-bg-color', this.activeBgColor);
-            slot.style.setProperty('--inactive-bg-color', this.inactiveBgColor);
+            slot.style.setProperty('--deactive-bg-color', this.deactiveBgColor);
             this.clickable ? (slot.style.pointerEvents = '') : (slot.style.pointerEvents = 'none');
             slot.style.border = this.border;
+            slot.style.color = this.fontColor;
             if (slot.className.includes('slot-active')) {
                 slot.style.visibility = 'visible';
                 if (this.matrixImage) {
@@ -10552,6 +10808,10 @@ const LidoMathMatrix = class {
                 const item = el;
                 item.style.width = `${slotMaxValues}px`;
                 item.style.height = `${slotMaxValues}px`;
+                if (this.type === 'drop' || this.type === 'drag' || this.type === 'checkerBlock') {
+                    this.el.style.width = 'auto';
+                    this.el.style.height = 'auto';
+                }
                 if ((!this.topIndex && item.classList.contains('topIndex')) ||
                     (!this.leftIndex && item.classList.contains('leftIndex')) ||
                     (!this.bottomIndex && item.classList.contains('bottomIndex'))) {
@@ -10570,11 +10830,16 @@ const LidoMathMatrix = class {
             zIndex: this.z,
             display: parseProp(`${this.visible}`, orientation) === 'true' ? 'flex' : 'none',
             borderRadius: parseProp(this.borderRadius, orientation),
+            left: parseProp(this.x, orientation),
+            top: parseProp(this.y, orientation),
+            cols: parseProp(`${this.cols}`, orientation),
+            rows: parseProp(`${this.rows}`, orientation),
         };
+        // console.log("cols and rows : ", );
     }
     handleClickSlot(element) {
         const index = parseInt(element.className.split(' ')[1].split('-')[1]);
-        const slotElements = document.querySelectorAll('.slot');
+        const slotElements = this.el.querySelectorAll('.slot');
         slotElements.forEach((el, i) => {
             const slotEl = el;
             if (i < index) {
@@ -10589,10 +10854,72 @@ const LidoMathMatrix = class {
                 slotEl.classList.add('slot-inactive');
             }
         });
+        if (this.previousFilledSlot !== -1) {
+            // Clear the text from the previously filled slot
+            if (this.previousFilledSlotElement !== null) {
+                this.previousFilledSlotElement.textContent = '';
+            }
+        }
+        // Display the slot value/text on the clicked slot itself
+        element.textContent = index.toString();
+        // Track this slot as the previously filled slot for next click
+        this.previousFilledSlot = index;
+        this.previousFilledSlotElement = element;
+        // If the slot is the bottom-most slot for this matrix, dispatch a generic event
+        // so templates or global handlers can handle bottom-slot behaviour (e.g., MultiplyBeadsAnimation).
+        if (index === slotElements.length) {
+            try {
+                const event = new CustomEvent('math-matrix-bottom-click', {
+                    detail: {
+                        matrix: this.el,
+                        cols: this.style.cols,
+                        rows: this.style.rows,
+                    },
+                    bubbles: true,
+                    composed: true,
+                });
+                // dispatch from the host so listeners on container or document receive it
+                this.el.dispatchEvent(event);
+            }
+            catch (err) {
+                console.warn('Error dispatching math-matrix-bottom-click from handleClickSlot', err);
+            }
+        }
+        this.updateValue(index.toString());
+        // trigger the next container if right slot was clicked
+        validateObjectiveStatus();
+    }
+    getSlotData() {
+        const data = {};
+        if (!this.text)
+            return data;
+        this.text.split(',').forEach((item, index) => {
+            const [rawText, rawColor] = item.split('-');
+            const num = parseInt(rawText.trim());
+            if (!isNaN(num)) {
+                data[index] = { text: rawText.trim(), color: rawColor === null || rawColor === void 0 ? void 0 : rawColor.trim() };
+            }
+        });
+        return data;
     }
     render() {
         let slotNumber = 1;
-        return (h(Host, { key: 'bfde8ad01e4b47a0b13dc0fd325d78e5014cfef9', class: "math-matrix", style: { height: this.style.height, width: this.style.width, z: this.style.z, display: this.style.display } }, Array.from({ length: this.rows + 1 }, (_, rowIndex) => (h("div", { class: "slot-parent", key: `row-${rowIndex}` }, h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "topIndex" }, rowIndex), Array.from({ length: this.cols }, (_, colIndex) => rowIndex === 0 ? (h("div", { class: "leftIndex" }, ++colIndex)) : (h("div", { class: `slot slot-${slotNumber++} ${this.defualtFill + 1 >= slotNumber ? 'slot-active' : 'slot-inactive'}`, onClick: () => this.handleClickSlot(event.target), key: `slot-${rowIndex}-${colIndex}`, style: { borderRadius: this.style.borderRadius } }))), h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "bottomIndex" }, this.cols * rowIndex))))));
+        const slotData = this.getSlotData();
+        return (h(Host, { key: '66d627c33553f3f6473c6d1b465c9af7cc6741d3', class: "math-matrix", style: {
+                height: this.style.height,
+                width: this.style.width,
+                z: this.style.z,
+                display: this.style.display,
+                top: this.style.top,
+                left: this.style.left,
+            }, type: this.type, value: this.value, "tab-index": this.tabIndex, rows: this.style.rows, cols: this.style.cols, text: this.text }, Array.from({ length: parseInt(this.style.rows) + 1 }, (_, rowIndex) => (h("div", { class: "slot-parent", key: `row-${rowIndex}` }, h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "topIndex" }, rowIndex), Array.from({ length: parseInt(this.style.cols) }, (_, colIndex) => {
+            var _a, _b;
+            return rowIndex === 0 ? (h("div", { class: "leftIndex" }, ++colIndex)) : (h("div", { class: `slot slot-${slotNumber} ${this.defualtFill >= slotNumber ? 'slot-active' : 'slot-inactive'}`, onClick: (ev) => this.handleClickSlot(ev.currentTarget), key: `slot-${rowIndex}-${colIndex}`, style: {
+                    borderRadius: this.style.borderRadius,
+                    backgroundColor: ((_a = slotData[slotNumber - 1]) === null || _a === void 0 ? void 0 : _a.color) || '',
+                } }, (_b = slotData[slotNumber - 1]) === null || _b === void 0 ? void 0 :
+                _b.text, slotNumber++ && null));
+        }), h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "bottomIndex" }, parseInt(this.style.cols) * rowIndex))))));
     }
     get el() { return getElement(this); }
 };
@@ -10661,7 +10988,7 @@ const LidoPos = class {
         };
     }
     render() {
-        return (h(Host, { key: '3c032fcd1655362851d75d7ed55b26a9d12b7e6f', 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: '99bb4083a93a247133cc6df2d439c437e3d5cb1b' })));
+        return (h(Host, { key: '20b34af6af7a1f061789d00ade88dc79eec595ef', 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: 'dae7759306330a01ecfb66be08debe8ec1f97d6e' })));
     }
     get el() { return getElement(this); }
 };
@@ -10742,7 +11069,7 @@ const LidoRandom = class {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'a5f930317fec6552ac0c9daf09da0348a49dcbf0', 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: '1451bbc2df4f459d4af93bf6b0a6dfc52dc2113e' })));
+        return (h(Host, { key: '328c7a0533a52a1be5cee0d71fc7a43338e5290f', 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: 'c1a93405cbbd2a06a92134c4ff5853204215c317' })));
     }
     get el() { return getElement(this); }
 };
@@ -10886,7 +11213,7 @@ const LidoRow = class {
         };
     }
     render() {
-        return (h(Host, { key: '03f15dcfc2abc394d0313d4b40dd6465a19dc34a', 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: 'fbb5e6ce6b8436d718c043561e0d92908baaabdc' })));
+        return (h(Host, { key: '4c1f45afe8866df81a6a798afe348e03fa1f4292', 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: '194de56621025a4b1a4fdb6ccae347f34dc19fdb' })));
     }
     get el() { return getElement(this); }
 };
@@ -10943,7 +11270,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: '887f02445ef694f84ebc85e05e4dfb740d0bc78b', 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: '6712d974e85c5d82dabb5ed0d482ece4b18af16a', 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); }
 };
@@ -11142,7 +11469,7 @@ const LidoSlideFill = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a7be214e99b8917ebe3d4ae0275036e77967d3b7', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: 'e3210823de751a3fdff90b54bf93fc13890ca28a', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '57ee54a6a0e7d3bbac893ce535a3375ea529e75a', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '386330e0562851f2f00aba169018c23bf5ffa4b7', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11277,7 +11604,7 @@ const LidoText = class {
         }
     }
     render() {
-        return (h(Host, { key: '44444c496287fcacce28fa0073d1b87a80d07874', class: "lido-text", value: this.value, 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, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, this.string) : this.string));
+        return (h(Host, { key: '6b5b31a544cc63cfd4030aa1b56e41cc255b12cf', class: "lido-text", value: this.value, 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, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, this.string) : this.string));
     }
     get el() { return getElement(this); }
 };
@@ -11318,7 +11645,6 @@ const LidoTrace = class {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
-        this.freeTraceUpdateCounter = 0;
         this.idleTimer = null;
         this.fingerImg = null;
     }
@@ -11335,8 +11661,8 @@ const LidoTrace = class {
             circle: null,
             paths: [],
             svg: null,
-            proximityThreshold: 375, // Increased general proximity threshold (was 100)
-            freeTraceProximityThreshold: 350, // Increased proximity for free trace (was 50)
+            proximityThreshold: 100, // General proximity threshold
+            freeTraceProximityThreshold: 50, // Reduced proximity threshold for free trace
             rafId: null,
             pointerMoveEvent: null,
             activePointerId: null,
@@ -11672,7 +11998,7 @@ const LidoTrace = class {
     }
     // Modified handlePointerMove function
     handlePointerMove(state) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         if (!state.isDragging)
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
@@ -11684,15 +12010,6 @@ 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');
@@ -11720,76 +12037,48 @@ 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 polyline element if it's the first trace for the current path index
+            // Create a new path element if it's the first trace for the current path index
             if (!state.currentFreePath[state.currentPathIndex]) {
-                const newPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+                const newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                // newPath.setAttribute('stroke', 'green');
                 const strokeWidth = state.paths[state.currentPathIndex].style['stroke-width'] || state.paths[state.currentPathIndex].getAttribute('stroke-width');
-                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 }
-                ];
+                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;
                 // 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;
             }
-            // 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);
+            // 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);
             // Move the draggable circle with the freehand trace
             state.circle.setAttribute('cx', pointerPos.x.toString());
             state.circle.setAttribute('cy', pointerPos.y.toString());
-            // 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);
-            }
+            // 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
             // Update the last pointer position
             state.lastPointerPos = pointerPos;
-            // For polyline, estimate the end by number of points (not path length)
-            if (pointsArr.length >= MAX_FREE_TRACE_POINTS) {
+            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) {
                 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
@@ -11797,62 +12086,24 @@ 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;
-            // 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
-            console.log('lastLength, totalPathLength', state.lastLength, state.totalPathLength);
-            console.log('percentComplete', percentComplete);
-            console.log('startPoint, endPoint', startPoint, endPoint);
-            console.log('distance squared between start & end:', this.getDistanceSquared(startPoint, endPoint));
-            console.log('pathIsClosed:', pathIsClosed);
-            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();
-                }
-            }
+            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();
         }
         // 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
@@ -11863,19 +12114,17 @@ const LidoTrace = class {
             await this.playTraceAnimation();
         }
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
-        console.log('Total SVGs:', this.svgUrls.length);
+        const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
+            await new Promise(resolve => setTimeout(resolve, delay));
             this.currentSvgIndex++;
             await this.initializeSVG();
             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
@@ -11893,13 +12142,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 (optimized)
+    // Find the closest point on the given path to the specified point using two-pass sampling
     getClosestPointOnPath(pathNode, point) {
         const pathLength = pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
-        // Optimized: Increase coarse steps for better performance
-        const coarseStep = 40; // was 20
+        // First pass: coarse sampling
+        const coarseStep = 20; // Increased step for better performance
         let coarseClosestPoint = { x: 0, y: 0, length: 0 };
         let coarseMinDistanceSquared = Infinity;
         for (let i = 0; i <= pathLength; i += coarseStep) {
@@ -11915,7 +12164,7 @@ const LidoTrace = class {
             }
         }
         // Second pass: fine sampling around coarseClosestPoint
-        const fineStep = 6; // was 2
+        const fineStep = 2; // Increased step to reduce computations
         const searchStart = Math.max(coarseClosestPoint.length - coarseStep, 0);
         const searchEnd = Math.min(coarseClosestPoint.length + coarseStep, pathLength);
         for (let i = searchStart; i <= searchEnd; i += fineStep) {
@@ -12075,7 +12324,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (h(Host, { key: 'ca50ce7efcc822c69b8bd673993dace0b7ccad75', 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: 'e473c6c488d952be730ee0a659d216afe41d34a2', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '6be6d97477a80afc0275eef5b17718a5f43ce358', 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: '4e650d7142c61549aec021fd2a8da4e592eaf94e', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return getElement(this); }
@@ -12163,10 +12412,10 @@ const LidoWrap = class {
         };
     }
     render() {
-        return (h(Host, { key: '8f9a578e3bf8c491373b7564b93c05de92a3e1a7', 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: '0dbba1d2c88bac9a29bb81340698f5f3cb36c7be' })));
+        return (h(Host, { key: '7e2bb4af31b5aff0f063a9f6c3cab96cdd25f31f', 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: '03179b28e45692e61aff0bf3634ef0a72bab0726' })));
     }
     get el() { return getElement(this); }
 };
 LidoWrap.style = LidoWrapStyle0;
 
-export { LidoAvatar as lido_avatar, 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, 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 };