lido-player 0.0.2-beta-16-dev → 0.0.2-beta-17-dev

package/dist/collection/components/trace/lido-trace.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, getAssetPath } from "@stencil/core";
 import { convertUrlToRelative, executeActions, triggerNextContainer, speakIcon, setVisibilityWithDelay, parseProp, storingEachActivityScore, calculateScore, } from "../../utils/utils";
 import { fingerUrl, LidoContainer, TraceMode } from "../../utils/constants";
 // Enum for different tracing modes
@@ -88,7 +88,7 @@ export class LidoTrace {
         /**
          * URL for the finger hint image
          */
-        this.fingerHintUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
+        this.fingerHintUrl = getAssetPath('assets/Tracing-hand.svg');
         /**
          * Indicates whether to highlight the text associated with the SVG when the trace is completed.
          */
@@ -112,6 +112,8 @@ export class LidoTrace {
         this.isDragging = false;
         this.activePointerId = null;
         // Counter for throttling free trace updates
+        // This is only an internal counter. Keeping it out of @State prevents a
+        // Stencil component re-render while the user is dragging.
         this.freeTraceUpdateCounter = 0;
         /** ───────────────────────────────────────────────────────────
          *  NEW: idle‑timer + finger‑hint state
@@ -144,6 +146,7 @@ export class LidoTrace {
             lastPointerPos: null,
             dragOffset: null,
             isCompletingPath: false,
+            touchProximityThreshold: null,
         };
         const url = this.svgUrls[this.currentSvgIndex];
         if (!url || url.trim() === '') {
@@ -363,6 +366,12 @@ export class LidoTrace {
     setupDrawingPath(state) {
         state.paths.forEach((path, index) => {
             const pathLength = path.getTotalLength();
+            // Geometry calls are expensive on slower SVG implementations. Cache
+            // the length once and reuse it during pointer movement.
+            path._lidoTraceLength = pathLength;
+            path._lidoTraceStart = path.getPointAtLength(0);
+            path._lidoTraceEnd = path.getPointAtLength(pathLength);
+            path._lidoTraceIsClosed = this.getDistanceSquared(path._lidoTraceStart, path._lidoTraceEnd) < 200;
             // /** give every path an id so <mpath> can follow it */
             path.setAttribute('id', 'lido-path-' + index); //  ← NEW
             // Create green path for tracing effect
@@ -484,7 +493,7 @@ export class LidoTrace {
     }
     // Modified handlePointerMove function
     async handlePointerMove(state) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (!state.isDragging)
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
@@ -584,19 +593,9 @@ export class LidoTrace {
             // 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);
+            // Keep the original safety check without scanning every SVG child.
+            if (state.circle.parentNode !== state.svg) {
+                (_b = state.svg) === null || _b === void 0 ? void 0 : _b.appendChild(state.circle);
             }
             // Update the last pointer position
             state.lastPointerPos = pointerPos;
@@ -640,27 +639,15 @@ export class LidoTrace {
                 state.circle.setAttribute('cx', guidedClosestPoint.x.toString());
                 state.circle.setAttribute('cy', guidedClosestPoint.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);
+            // Keep the original safety check without scanning every SVG child.
+            if (state.circle.parentNode !== state.svg) {
+                (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle);
             }
-            (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
+            (_d = currentPath.greenPath) === null || _d === void 0 ? void 0 : _d.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.95; // 95% 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
+            const pathIsClosed = (_e = currentPath._lidoTraceIsClosed) !== null && _e !== void 0 ? _e : false;
             if (pathIsClosed && state.totalPathLength > 50) {
                 if (percentComplete >= COMPLETION_THRESHOLD) {
                     if (state.isCompletingPath)
@@ -854,7 +841,8 @@ export class LidoTrace {
     }
     // Find the closest point on the given path to the specified point using two-pass sampling (optimized)
     getClosestPointOnPath(pathNode, point, lastLength) {
-        const pathLength = pathNode.getTotalLength();
+        var _a;
+        const pathLength = (_a = pathNode._lidoTraceLength) !== null && _a !== void 0 ? _a : pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
         const coarseStep = 40;
@@ -1047,7 +1035,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '31f7f62d73ed98ce0a3b224435e7b64574cf506c', 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: '6cf11b7d5f9aeb3c58cbb462e63d3f340384a403', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '4955636a199ba56ca7f6d73144aca42ab4e3f411', 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: 'b732946e97fefb0d4cb192e5c9b6863568ff64be', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -1060,7 +1048,7 @@ export class LidoTrace {
             "$": ["lido-trace.css"]
         };
     }
-    static get assetsDirs() { return ["svg", "images"]; }
+    static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
             "showSpeakIcon": {
@@ -1361,7 +1349,7 @@ export class LidoTrace {
                 "setter": false,
                 "reflect": false,
                 "attribute": "finger-hint-url",
-                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg'"
+                "defaultValue": "getAssetPath('assets/Tracing-hand.svg')"
             },
             "onInCorrect": {
                 "type": "string",
@@ -1493,7 +1481,6 @@ export class LidoTrace {
             "fileIndex": {},
             "isDragging": {},
             "activePointerId": {},
-            "freeTraceUpdateCounter": {},
             "idleTimer": {},
             "fingerImg": {}
         };

package/dist/collection/css/index.css

@@ -1,6 +1,10 @@
-@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');
+@font-face {
+  font-family: 'Baloo Bhai 2';
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2');
+}
 body {
   overflow: hidden;
   background-position: center;
@@ -189,7 +193,6 @@ body {
   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;

package/dist/collection/stories/Templates/blender/blender.stories.js

@@ -39,13 +39,16 @@ function buildObjectiveFromNumber(num) {
     const objective = [hStr, tStr, oStr].filter(s => s !== "").join(",");
     return {
         objective, // same as before
+        hundreds,
+        tens,
+        ones,
     };
 }
 function getContainerXml(args) {
-    const { objective } = buildObjectiveFromNumber(args.number);
+    const { objective, hundreds, tens, ones } = buildObjectiveFromNumber(args.number);
     return `
     <main>
-        <lido-container id="lido-container" visible="true" template-id="dragAndDrop" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Blender.png" drop-action="infinite-drop" is-allow-only-correct="${args.isAllowOnlyCorrect}">
+        <lido-container id="lido-container" visible="true" template-id="blender" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Blender.png" drop-action="infinite-drop" is-allow-only-correct="${args.isAllowOnlyCorrect}">
 
 			<!-- Chimple Avatar -->
 			<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1332px, portrait.-8%" y="landscape.547px, portrait.1%" aria-hidden="true" z="0" bg-color="transparent" visible="true" onEntry="">
@@ -65,7 +68,7 @@ function getContainerXml(args) {
 						<lido-text id="hundreds" height="70px" width="108px" visible="true" value="000" string="000" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
 						</lido-text>
 					</lido-cell>
-					<lido-text id="hundredsDrop" value="100" dropAttr="landscape.stackcascade,portrait.verticalstack" is-allow-only-one-drop="false" type="drop" tab-index="1" layout="row" bg-color="white" visible="true" height="landscape.359px,portrait.752px" width="landscape.698px,portrait.290px" onEntry="this.justify-content='flex-start';">
+					<lido-text id="hundredsDrop" value="100" required-drops="${hundreds}" dropAttr="landscape.stackcascade,portrait.verticalstack" is-allow-only-one-drop="false" type="drop" tab-index="1" layout="row" bg-color="white" visible="true" height="landscape.359px,portrait.752px"  width="landscape.698px,portrait.290px" onEntry="this.justify-content='flex-start';">
 					</lido-text>
 				</lido-cell>
 
@@ -77,7 +80,8 @@ function getContainerXml(args) {
 						<lido-text id="tens" height="70px" width="77px" visible="true"  value="00" string="00" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
 						</lido-text>
 					</lido-cell>
-					<lido-text id="tensDrop" value="10" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="2" layout="row" bg-color="white" visible="true" height="landscape.357px,portrait.752px" width="landscape.414px,portrait.290px" onEntry="this.justify-content='flex-start';" >
+					<lido-text id="tensDrop" value="10" required-drops="${tens}" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="2" layout="row" bg-color="white" visible="true" 
+				 height="landscape.357px,portrait.752px" width="landscape.414px,portrait.290px" onEntry="this.justify-content='flex-start';" >
 					</lido-text>
 				</lido-cell>
 
@@ -89,7 +93,7 @@ function getContainerXml(args) {
 						<lido-text id="units" height="70px" width="55px" visible="true"  value="0" string="0" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
 						</lido-text>
 					</lido-cell>
-					<lido-text id="unitsDrop" value="1" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="3" layout="row" bg-color="white" visible="true" height="landscape.360px,portrait.752px" width="landscape.310px,portrait.290px" onEntry="this.justify-content='flex-start';">
+					<lido-text id="unitsDrop" value="1" required-drops="${ones}" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="3" layout="row" bg-color="white" visible="true" height="landscape.360px,portrait.752px" width="landscape.310px,portrait.290px" onEntry="this.justify-content='flex-start';">
 					</lido-text>
 				</lido-cell>
 			</lido-cell>

package/dist/collection/utils/audioPlayer.js

@@ -4,9 +4,18 @@ import { setDraggingDisabled } from "./utilsHandlers/dragDropHandler";
 import { NextContainerKey, PrevContainerKey, ActivityChangeKey, GameCompletedKey, GameExitKey, ActivityEndKey, LessonEndKey, LidoContainer } from "./constants";
 import { LANGUAGE_PROFILES, FAST_WORDS_BY_LANG } from "./constants";
 export class AudioPlayer {
+    resolvePlaybackWait() {
+        if (!this.endPromiseResolve) {
+            return;
+        }
+        const resolve = this.endPromiseResolve;
+        this.endPromiseResolve = null;
+        resolve();
+    }
     constructor() {
         this.currentTargetElement = null;
         this.pendingReplayElement = null;
+        this.playbackHasStarted = false;
         this.highlightOverlay = null;
         this.wordRects = [];
         this.activeWordIndex = -1;
@@ -64,15 +73,12 @@ export class AudioPlayer {
             window.speechSynthesis.cancel();
         }
         // Resolve any pending "ended" wait so callers can continue.
-        if (this.endPromiseResolve) {
-            const resolve = this.endPromiseResolve;
-            this.endPromiseResolve = null;
-            resolve();
-        }
+        this.resolvePlaybackWait();
         if (!preserveReplay) {
             this.pendingReplayElement = null;
         }
         this.currentTargetElement = null;
+        this.playbackHasStarted = false;
         this.audioElement.pause();
         this.audioElement.currentTime = 0;
         this.audioElement.src = '';
@@ -110,6 +116,7 @@ export class AudioPlayer {
     }
     async play(targetElement) {
         this.registerVisibilityEvents();
+        this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
             this.pendingReplayElement = targetElement;
             await this.stop(true);
@@ -163,6 +170,24 @@ export class AudioPlayer {
         if (audioUrl) {
             audioUrl = convertUrlToRelative(audioUrl);
             this.audioElement.src = audioUrl;
+            this.audioElement.onplaying = () => {
+                this.playbackHasStarted = true;
+            };
+            this.audioElement.onpause = () => {
+                if (this.playbackHasStarted && !this.audioElement.ended) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onstalled = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onerror = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
             try {
                 // setDraggingDisabled(true);
                 const language = container.getAttribute('Lang') || 'en';
@@ -192,10 +217,7 @@ export class AudioPlayer {
                 await new Promise(resolve => {
                     this.endPromiseResolve = resolve;
                     this.audioElement.onended = () => {
-                        if (this.endPromiseResolve === resolve) {
-                            this.endPromiseResolve = null;
-                        }
-                        resolve();
+                        this.resolvePlaybackWait();
                     };
                 });
             }

package/dist/collection/utils/utils.js

@@ -337,10 +337,11 @@ export const executeActions = async (actionsString, thisElement, element) => {
                         if (dropTo === "hundredsDrop")
                             hundreds++;
                     });
-                    const unitsValue = units * 1;
-                    const tensValue = tens * 10;
-                    const hundredsValue = hundreds * 100;
-                    const totalValue = unitsValue + tensValue + hundredsValue;
+                    // Blender displays the number of blocks placed in each column.
+                    // Blender's drag/drop values are also the required block counts.
+                    const unitsValue = units;
+                    const tensValue = tens;
+                    const hundredsValue = hundreds;
                     // ✅ Update Lido Text Boxes
                     const unitsBox = document.getElementById("units");
                     const tensBox = document.getElementById("tens");
@@ -601,18 +602,27 @@ export const calculateScore = () => {
     gameScore.totalRightMovesCount += rightMoves;
     gameScore.totalWrongMovesCount += wrongMoves;
     let finalScore = Math.floor((rightMoves / (rightMoves + wrongMoves)) * 100);
+    console.log('[Activity Score]', { rightMoves, wrongMoves, activityScore: finalScore });
     storeActivityScore(finalScore);
     gameScore.rightMoves = 0;
     gameScore.wrongMoves = 0;
 };
 export async function onActivityComplete(dragElement, dropElement) {
-    var _a, _b;
+    var _a, _b, _c;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
+    const isBlender = container.getAttribute('template-id') === 'blender';
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
     if (dragElement && dropElement) {
-        const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        let isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        if (isBlender) {
+            const requiredDrops = Number((_a = dropElement.getAttribute('required-drops')) !== null && _a !== void 0 ? _a : 0);
+            const placedDrops = document.querySelectorAll(`[drop-to="${dropElement.id}"]`).length;
+            // Blender accepts every count from 1 through the required count.
+            // Zero or an overfilled drop zone uses the incorrect action.
+            isCorrect = placedDrops > 0 && placedDrops <= requiredDrops;
+        }
         // storing each activity score based on isCorrect for (all drag-drop events)
         // storingEachActivityScore(isCorrect);
         if (isCorrect) {
@@ -621,10 +631,10 @@ export async function onActivityComplete(dragElement, dropElement) {
                 console.log("Right Moves : ", gameScore.rightMoves);
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
             }
-            const onCorrect = ((_a = container.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
+            const onCorrect = ((_b = container.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
                 ? ''
                 : dropElement.getAttribute('onCorrect');
-            if (onCorrect) {
+            if (onCorrect && !isBlender) {
                 await executeActions(onCorrect, dropElement, dragElement);
             }
             //for multiply beeds
@@ -639,7 +649,7 @@ export async function onActivityComplete(dragElement, dropElement) {
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
             }
             const onInCorrect = dropElement.getAttribute('onInCorrect');
-            if (onInCorrect) {
+            if (onInCorrect && !isBlender) {
                 await executeActions(onInCorrect, dropElement, dragElement);
             }
         }
@@ -648,7 +658,7 @@ export async function onActivityComplete(dragElement, dropElement) {
     const sortedValues = getSortedValuesArrayFromMap(dragScore);
     container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
     //localStorage
-    let drag = JSON.parse((_b = localStorage.getItem(DragMapKey)) !== null && _b !== void 0 ? _b : '{}');
+    let drag = JSON.parse((_c = localStorage.getItem(DragMapKey)) !== null && _c !== void 0 ? _c : '{}');
     const index = dropElement.getAttribute('tab-index');
     if (!drag[index]) {
         drag[index] = [];

package/dist/collection/utils/utilsHandlers/animationHandler.js

@@ -60,7 +60,7 @@ export function dragDropAnimation(container, dragElement, dropElement) {
         dropElement.classList.remove('zoom-fade-in');
         dragElement.classList.add('zoom-fade-out');
         dropElement.classList.add('zoom-fade-out');
-        setTimeout(() => {
+        const cleanup = () => {
             div.remove();
             container.style.pointerEvents = 'auto';
             if (isObjectiveComplete) {
@@ -68,6 +68,13 @@ export function dragDropAnimation(container, dragElement, dropElement) {
                 triggerNextContainer();
                 container.removeAttribute(AnimationVanishedValuesKey);
             }
-        }, 800); // match animation duration
+        };
+        const templateId = (container.getAttribute('template-id') || '').toLowerCase();
+        if (templateId === 'letterpairing' || templateId === 'numberpair') {
+            cleanup();
+        }
+        else {
+            setTimeout(cleanup, 800); // match animation duration
+        }
     }, 250);
 }

package/dist/collection/utils/utilsHandlers/clickHandler.js

@@ -65,6 +65,14 @@ export function addClickListenerForClickType(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    const isBubbleTypeKeyboardKey = (container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'bubbleType' &&
+        element.closest('lido-keyboard') !== null;
+    // BubbleType manages key clicks and audio in lido-keyboard.tsx directly.
+    // Letting the generic click handler attach here creates a competing stop/play
+    // path that can interrupt the first bubble audio.
+    if (isBubbleTypeKeyboardKey) {
+        return;
+    }
     element.style.cursor = 'pointer';
     if (!element) {
         console.error('No element provided.');

package/dist/collection/utils/utilsHandlers/dragDropHandler.js

@@ -5,6 +5,7 @@ import { DropLength, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, Lido
 import { dispatchElementDropEvent } from "../customEvents";
 import { highlightElement, removeHighlight } from "./highlightHandler";
 import { dragDropAnimation } from "./animationHandler";
+const isBlenderTemplate = (container) => (container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'blender';
 export function buildDropHasDragFromDOM() {
     const dropHasDrag = {};
     const dropElements = document.querySelectorAll("[type='drop']");
@@ -63,7 +64,6 @@ export function enableDraggingWithScaling(element) {
     let mutationFlag = false;
     // Fetch the container element
     const container = document.getElementById(LidoContainer);
-    const templateId = container.getAttribute("template-id");
     if (!container) {
         console.error(`Container with ID "container" not found.`);
         return;
@@ -230,7 +230,7 @@ export function enableDraggingWithScaling(element) {
         allElements.forEach(otherElement => {
             var _a;
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
-                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && container.getAttribute("template-id") !== "blender") {
+                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && !isBlenderTemplate(container)) {
                     if (otherElement) {
                         setOpacityIfChanged(otherElement, "0.3");
                     }
@@ -318,7 +318,7 @@ export function enableDraggingWithScaling(element) {
         else {
             onElementDropComplete(element, mostOverlappedElement);
         }
-        if (templateId === "blender" && element && mostOverlappedElement) {
+        if (isBlenderTemplate(container) && element && mostOverlappedElement) {
             const allElements = document.querySelectorAll(`*`);
             allElements.forEach(el => {
                 removeHighlight(el);
@@ -546,7 +546,7 @@ export async function handleResetDragElement(dragElement, dropElement, dropHasDr
     highlightElement();
 }
 export async function onElementDropComplete(dragElement, dropElement) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const container = document.getElementById(LidoContainer);
     const selectedValueData = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : "[]";
     const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
@@ -769,28 +769,48 @@ export async function onElementDropComplete(dragElement, dropElement) {
     // Add pulse and highlight effect for a successful match
     const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
-    if (container.getAttribute("template-id") !== "blender") {
+    if (!isBlenderTemplate(container)) {
         storingEachActivityScore(isCorrect);
     }
     dragElement.style.opacity = '1';
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
+    if (isBlenderTemplate(container)) {
+        const requiredDrops = Number((_j = dropElement.getAttribute('required-drops')) !== null && _j !== void 0 ? _j : 0);
+        const placedDrops = document.querySelectorAll(`[${DropToAttr}="${dropElement.id}"]`).length;
+        const action = placedDrops > 0 && placedDrops <= requiredDrops
+            ? dropElement.getAttribute('onCorrect')
+            : dropElement.getAttribute('onInCorrect');
+        if (action) {
+            await executeActions(action, dropElement, dragElement);
+        }
+    }
     highlightElement();
     await onActivityComplete(dragElement, dropElement);
 }
 export function updateDropBorder(element) {
+    var _a;
     if (!element || !element.classList.contains('drop-element'))
         return;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     const showBorder = container.getAttribute('show-drop-border');
-    if (showBorder !== 'true') {
+    if (showBorder !== 'true' && !isBlenderTemplate(container)) {
         return;
     }
     const dropId = element.id;
     const dragSelectedElements = document.querySelectorAll(`[${DropToAttr}="${dropId}"]`);
-    if (dragSelectedElements.length > 0 && container.getAttribute("template-id") !== "blender") {
+    if (isBlenderTemplate(container)) {
+        const requiredDrops = Number((_a = element.getAttribute('required-drops')) !== null && _a !== void 0 ? _a : 0);
+        const placedDrops = dragSelectedElements.length;
+        const showCorrectBorder = placedDrops > 0 && placedDrops <= requiredDrops;
+        element.classList.toggle('empty', !showCorrectBorder);
+        element.classList.remove('filled');
+        element.style.setProperty('border', showCorrectBorder ? '5px dashed green' : '5px dashed #f34d08', 'important');
+        return;
+    }
+    if (dragSelectedElements.length > 0 && !isBlenderTemplate(container)) {
         element.classList.add('filled');
         element.classList.remove('empty');
         element.classList.remove('highlight-element');
@@ -880,7 +900,7 @@ export async function onClickDropOrDragElement(element, type) {
         // Move the drag element to the drop position
         selectedDragElement.style.transform = `translate(${translateX}px, ${translateY}px)`;
         // Remove highlights after moving the element
-        if (container.getAttribute("template-id") !== "blender") {
+        if (!isBlenderTemplate(container)) {
             const allElements = document.querySelectorAll(`*`);
             allElements.forEach(el => {
                 removeHighlight(el);

package/dist/collection/utils/utilsHandlers/lidoCalculatorHandler.js

@@ -4,27 +4,24 @@ const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 /* ------------------ animation ------------------ */
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, container) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
-      }`;
-        const styleSheet = document.styleSheets[0];
-        styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
-        activeCell.style.animation = `widthDecrease 0s`;
-        activeCell.addEventListener("animationend", () => {
-            activeCell.remove();
+        let removed = false;
+        const removeActiveCell = () => {
+            if (removed)
+                return;
+            removed = true;
+            if (activeCell.isConnected) {
+                activeCell.remove();
+            }
             // Trigger next container only after the last calculate cell is removed
             const remainingCalculateTypes = container.querySelectorAll("[type='calculate']");
             if (remainingCalculateTypes.length === 0) {
                 setTimeout(() => triggerNextContainer(), 2000);
             }
             resolve();
-        }, { once: true });
+        };
+        // Nimble uses a zero-duration removal; remove synchronously so progression
+        // does not depend on a browser animationend event.
+        removeActiveCell();
     });
 };
 /* ------------------ PRACTICE MODE ------------------ */