lido-player 0.0.2-beta-21-dev → 0.0.2-beta-23-dev

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/{decode-Buln7Iaf.js → decode-BDs2S8om.js}

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

package/dist/cjs/{index-Bb_TFgTA.js → index-D5olYRJo.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-DBCFoh1I.js');
+var index$1 = require('./index-DnaH8sO-.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -199,7 +199,51 @@ class RiveService {
     }
 }
 
+/**
+ * Mount a drag item on a balance plate without using the generic
+ * `drop-action="move"` flow. The generic flow creates a new source placeholder
+ * for every move, which makes a previously used plate become the item's source.
+ *
+ * A balance item gets exactly one home placeholder: its original source. It can
+ * then move freely between plate parents while continuing to inherit the plate's
+ * tilt translation.
+ */
+function placeDragOnBalancePlate(dragElement, dropElement) {
+    var _a;
+    const balanceEl = document.querySelector('lido-balance');
+    const plateParent = dropElement === null || dropElement === void 0 ? void 0 : dropElement.parentElement;
+    if (!balanceEl || !plateParent)
+        return;
+    const drag = dragElement;
+    if (!((_a = drag.__lidoBalanceHome) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+        const home = document.createElement('div');
+        home.className = 'lido-balance-source-placeholder';
+        home.setAttribute('aria-hidden', 'true');
+        drag.replaceWith(home);
+        drag.__lidoBalanceHome = home;
+    }
+    // Appending an existing element moves it; it does not leave a second
+    // placeholder in the previous plate.
+    plateParent.append(drag);
+    drag.style.position = 'absolute';
+    drag.style.zIndex = '1';
+    // The generic drag handler also uses transform. Disable transitions while
+    // changing parents and calculating the new local offset so this is one
+    // placement, rather than a right/left correction animation.
+    drag.style.transition = 'none';
+    drag.style.transform = 'translate(0, 0)';
+    const dropRect = dropElement.getBoundingClientRect();
+    const dragRect = drag.getBoundingClientRect();
+    const scale = calculateScale() || 1;
+    const x = (dropRect.left + dropRect.width / 2 - (dragRect.left + dragRect.width / 2)) / scale;
+    const y = (dropRect.top + dropRect.height / 2 - (dragRect.top + dragRect.height / 2)) / scale;
+    drag.style.transform = `translate(${x}px, ${y}px)`;
+    requestAnimationFrame(() => {
+        drag.style.transition = '';
+    });
+}
 function updateBalanceOnDrop(dragElement, dropElement) {
+    var _a, _b;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return;
@@ -207,7 +251,20 @@ function updateBalanceOnDrop(dragElement, dropElement) {
     const rightDrag = Array.from(document.querySelectorAll('[drop-to^="righthandle"]'));
     balanceEl.leftVal = calculateValue(leftDrag, balanceEl.operation);
     balanceEl.rightVal = calculateValue(rightDrag, balanceEl.operation);
+    const container = document.getElementById('lido-container');
+    const objectiveString = (_b = (_a = container === null || container === void 0 ? void 0 : container['objective']) !== null && _a !== void 0 ? _a : container === null || container === void 0 ? void 0 : container.getAttribute('objective')) !== null && _b !== void 0 ? _b : '';
+    const isCorrect = !!container && balanceResult(container, objectiveString);
+    const dropElements = container ? Array.from(container.querySelectorAll('[type="drop"]')) : [];
+    const filledDropCount = dropElements.filter(drop => !!(container === null || container === void 0 ? void 0 : container.querySelector(`[drop-to="${drop.id}"]`))).length;
+    const allDropsFilled = dropElements.length > 0 && filledDropCount === dropElements.length;
+    if (balanceEl.setFeedbackColor) {
+        balanceEl.setFeedbackColor(allDropsFilled && isCorrect ? '#81C127' : allDropsFilled ? '#FF0410' : '');
+    }
     if (balanceEl.updateTilt) {
+        if (!isCorrect) {
+            balanceEl.updateTilt(0, 0);
+            return;
+        }
         balanceEl.updateTilt(balanceEl.leftVal, balanceEl.rightVal);
     }
 }
@@ -396,6 +453,19 @@ function enableDraggingWithScaling(element) {
     let clone = null;
     let duplicateElement = null;
     let mutationFlag = false;
+    let pendingMoveFrame = null;
+    let latestClientX = 0;
+    let latestClientY = 0;
+    let hasPendingMove = false;
+    let touchTransformUpdated = false;
+    let touchDragScale = 1;
+    let touchDragScaleY = 1;
+    let touchOffsetX = 0;
+    let touchOffsetY = 0;
+    let touchStartElementLeft = 0;
+    let touchStartElementTop = 0;
+    let touchStartRect = null;
+    let isTouchDragging = false;
     // Fetch the container element
     const container = document.getElementById(LidoContainer);
     if (!container) {
@@ -406,6 +476,33 @@ function enableDraggingWithScaling(element) {
         return;
     handlingElementFlexibleWidth(element, 'drag');
     let dragingElementTransform;
+    const getContainerScale = () => {
+        const transform = window.getComputedStyle(container).transform;
+        const matrix3dMatch = transform.match(/matrix3d\(([^)]+)\)/);
+        const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+        if (matrix3dMatch) {
+            const values = matrix3dMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[4] ** 2 + values[5] ** 2) || 1,
+            };
+        }
+        if (matrixMatch) {
+            const values = matrixMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[2] ** 2 + values[3] ** 2) || 1,
+            };
+        }
+        return { scaleX: 1, scaleY: 1 };
+    };
+    const updateTouchDragScale = () => {
+        if (isTouchDragging) {
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+        }
+    };
     const onStart = (event) => {
         var _a, _b;
         if (container && container.getAttribute("game-completed") === "true")
@@ -422,17 +519,29 @@ function enableDraggingWithScaling(element) {
         if (event instanceof MouseEvent) {
             startX = event.clientX;
             startY = event.clientY;
+            touchStartRect = null;
         }
         else {
             startX = event.touches[0].clientX;
             startY = event.touches[0].clientY;
+            isTouchDragging = true;
+            touchStartRect = element.getBoundingClientRect();
+            touchOffsetX = startX - touchStartRect.left;
+            touchOffsetY = startY - touchStartRect.top;
+            touchStartElementLeft = touchStartRect.left;
+            touchStartElementTop = touchStartRect.top;
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+            element.style.willChange = 'transform';
+            window.addEventListener('resize', updateTouchDragScale);
         }
         // Apply dragging styles to the element
         element.style.opacity = '1';
         element.style.cursor = 'grabbing';
         if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!clone) {
                 clone = element.cloneNode(true);
                 clone.style.left = `${rect.left}px`;
@@ -451,7 +560,7 @@ function enableDraggingWithScaling(element) {
             const imgElement = element.querySelector('img');
             const src = imgElement === null || imgElement === void 0 ? void 0 : imgElement.getAttribute('src');
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!duplicateElement) {
                 duplicateElement = element.cloneNode(false);
                 duplicateElement.setAttribute('src', src);
@@ -524,31 +633,31 @@ function enableDraggingWithScaling(element) {
             target.style.opacity = value;
         }
     };
-    const onMove = (event) => {
-        if (!isDragging)
+    const processMove = () => {
+        pendingMoveFrame = null;
+        if (!isDragging || !hasPendingMove)
             return;
+        hasPendingMove = false;
+        const deferTouchDropValidation = touchTransformUpdated;
         if (isDraggingDisabled) {
             isDragging = false;
+            touchTransformUpdated = false;
             return;
         }
-        isClicked = false;
         element.style.transition = 'none';
-        const containerScale = calculateScale();
-        let dx = 0;
-        let dy = 0;
-        if (event instanceof MouseEvent) {
-            dx = (event.clientX - startX) / containerScale;
-            dy = (event.clientY - startY) / containerScale;
-        }
-        else {
-            dx = (event.touches[0].clientX - startX) / containerScale;
-            dy = (event.touches[0].clientY - startY) / containerScale;
-        }
-        // Calculate the new position considering scaling
-        const newLeft = initialX + dx;
-        const newTop = initialY + dy;
-        // Apply transform with translation without boundaries
-        element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
+        if (!touchTransformUpdated) {
+            const containerScale = calculateScale();
+            const dx = (latestClientX - startX) / containerScale;
+            const dy = (latestClientY - startY) / containerScale;
+            // Calculate the new position considering scaling
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            // Apply transform with translation without boundaries
+            element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
+        }
+        touchTransformUpdated = false;
+        if (deferTouchDropValidation)
+            return;
         // Check for overlaps and highlight only the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement$1(element, 'drop');
         const allElements = document.querySelectorAll("[type='drop']");
@@ -587,6 +696,44 @@ function enableDraggingWithScaling(element) {
             }
         }
     };
+    const onMove = (event) => {
+        if (!isDragging)
+            return;
+        if (isDraggingDisabled) {
+            isDragging = false;
+            return;
+        }
+        if (event instanceof MouseEvent) {
+            touchTransformUpdated = false;
+            latestClientX = event.clientX;
+            latestClientY = event.clientY;
+        }
+        else {
+            const touch = event.touches[0];
+            if (!touch)
+                return;
+            latestClientX = touch.clientX;
+            latestClientY = touch.clientY;
+        }
+        if (!(event instanceof MouseEvent)) {
+            element.style.transition = 'none';
+            const desiredLeft = latestClientX - touchOffsetX;
+            const desiredTop = latestClientY - touchOffsetY;
+            const dx = (desiredLeft - touchStartElementLeft) / touchDragScale;
+            const dy = (desiredTop - touchStartElementTop) / touchDragScaleY;
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            element.style.transform = `translate3d(${newLeft}px, ${newTop}px, 0)`;
+            touchTransformUpdated = true;
+        }
+        isClicked = false;
+        if (event instanceof MouseEvent) {
+            hasPendingMove = true;
+            if (pendingMoveFrame === null) {
+                pendingMoveFrame = requestAnimationFrame(processMove);
+            }
+        }
+    };
     let lastOverlappedElement = null;
     const removeDocumentDragListeners = () => {
         document.removeEventListener('mousemove', onMove);
@@ -594,9 +741,19 @@ function enableDraggingWithScaling(element) {
         document.removeEventListener('touchmove', onMove);
         document.removeEventListener('touchend', onEnd);
     };
+    const flushPendingMove = () => {
+        if (pendingMoveFrame === null)
+            return;
+        cancelAnimationFrame(pendingMoveFrame);
+        processMove();
+    };
     const onEnd = (endEv) => {
         var _a, _b, _c;
+        flushPendingMove();
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
         removeDocumentDragListeners();
         if (isClicked) {
             if (clone) {
@@ -702,6 +859,15 @@ function enableDraggingWithScaling(element) {
     };
     const cleanup = () => {
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
+        if (pendingMoveFrame !== null) {
+            cancelAnimationFrame(pendingMoveFrame);
+            pendingMoveFrame = null;
+        }
+        hasPendingMove = false;
+        touchTransformUpdated = false;
         observer.disconnect();
         removeDocumentDragListeners();
         element.removeEventListener('mousedown', onStart);
@@ -775,7 +941,8 @@ async function handleResetDragElement(dragElement, dropElement, dropHasDrag, sel
     dragElement.classList.remove('dropped');
     const container = document.getElementById(LidoContainer);
     const cloneArray = container.querySelectorAll(`#${dragElement.id}`);
-    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item && !item.classList.contains('dropped'));
+    const balanceHome = dragElement.__lidoBalanceHome;
+    const cloneDragElement = ((balanceHome === null || balanceHome === void 0 ? void 0 : balanceHome.isConnected) ? balanceHome : Array.from(cloneArray).find(item => dragElement !== item && !item.classList.contains('dropped')));
     dragElement.style.transition = 'transform 0.5s ease';
     if (cloneDragElement) {
         animateDragToTarget(dragElement, cloneDragElement, container);
@@ -792,6 +959,7 @@ async function handleResetDragElement(dragElement, dropElement, dropHasDrag, sel
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.position = 'unset';
             cloneDragElement.replaceWith(dragElement);
+            delete dragElement.__lidoBalanceHome;
         }, 500);
     }
     else {
@@ -1114,6 +1282,10 @@ async function onElementDropComplete(dragElement, dropElement) {
     }
     highlightElement();
     await onActivityComplete(dragElement, dropElement);
+    const dropAction = container.getAttribute('drop-action');
+    if (container.querySelector('lido-balance') && dropAction !== exports.DropAction.Move && dropAction !== exports.DropAction.InfiniteDrop) {
+        placeDragOnBalancePlate(dragElement, dropElement);
+    }
 }
 function updateDropBorder(element) {
     var _a;
@@ -1179,14 +1351,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1374,34 +1546,34 @@ function highlightSpeakingElement(element) {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1576,7 +1748,7 @@ class AudioPlayer {
             return el;
         return el.closest('lido-text');
     }
-    async play(targetElement) {
+    async play(targetElement, suppressHighlight = false) {
         this.registerVisibilityEvents();
         this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
@@ -1600,11 +1772,6 @@ class AudioPlayer {
             console.warn('[AudioPlayer] No lido-container found');
             return;
         }
-        // Check if speaking is disabled on the target element or its closest lido-text parent
-        targetElement.closest('lido-text');
-        // if(text && text.getAttribute('disable-speak')==='true'){
-        //   return;
-        // }
         if (container.getAttribute('highlight-word-by-word') === 'true') {
             const textElement = this.getLidoTextElement(targetElement);
             if (!textElement) {
@@ -1616,6 +1783,7 @@ class AudioPlayer {
             targetElement = textElement;
         }
         this.currentTargetElement = targetElement;
+        window.dispatchEvent(new CustomEvent('lidoAudioStarted', { detail: { target: targetElement } }));
         // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
         // If no direct audio attribute, check childrens for audio
@@ -1665,7 +1833,8 @@ class AudioPlayer {
                     this.wordRects = this.computeWordRects(targetElement);
                 }
                 else {
-                    highlightSpeakingElement(targetElement);
+                    if (!suppressHighlight)
+                        highlightSpeakingElement(targetElement);
                 }
                 // PLAY ONCE
                 await this.audioElement.play();
@@ -1689,18 +1858,17 @@ class AudioPlayer {
                 this.audioElement.onended = null; // cleanup
                 setDraggingDisabled(false);
                 if (container.getAttribute('highlight-word-by-word') !== 'true') {
-                    stopHighlightForSpeakingElement(targetElement);
+                    if (!suppressHighlight)
+                        stopHighlightForSpeakingElement(targetElement);
                 }
             }
         }
         // If no audio, use text-to-speech
         else if (targetElement.textContent) {
             try {
-                highlightSpeakingElement(targetElement);
-                // window.addEventListener('click', this.handleUserClick, true);
+                if (!suppressHighlight)
+                    highlightSpeakingElement(targetElement);
                 await speakText(targetElement.textContent, targetElement);
-                document.querySelectorAll('.speaking-highlight');
-                // highlightedElements.forEach(element => stopHighlightForSpeakingElement(element as HTMLElement));         
             }
             catch (error) { }
             finally {
@@ -1718,6 +1886,7 @@ class AudioPlayer {
         if (this.currentTargetElement === targetElement) {
             this.currentTargetElement = null;
         }
+        window.dispatchEvent(new CustomEvent('lidoAudioEnded', { detail: { target: targetElement } }));
     }
     // GLOBAL STOP EVENTS (container change, activity change…)
     registerGlobalStopEvents() {
@@ -2110,11 +2279,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -2337,11 +2506,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -73039,11 +73208,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = element.style.width;
@@ -73253,7 +73422,16 @@ async function onActivityComplete(dragElement, dropElement) {
     if (!container)
         return;
     const isBlender = container.getAttribute('template-id') === 'blender';
-    await executeActions("this.alignMatch='true'", dropElement, dragElement);
+    const isBalancing = !!container.querySelector('lido-balance');
+    const usesBalancePlacement = isBalancing
+        && container.getAttribute('drop-action') !== exports.DropAction.Move
+        && container.getAttribute('drop-action') !== exports.DropAction.InfiniteDrop;
+    // Balance plates perform their own single placement pass after this method.
+    // Running alignMatch first makes two transforms compete and produces a visible
+    // horizontal drift as the item is re-parented.
+    if (!usesBalancePlacement) {
+        await executeActions("this.alignMatch='true'", dropElement, dragElement);
+    }
     if (dragElement && dropElement) {
         let isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
         if (isBlender) {
@@ -73276,7 +73454,7 @@ async function onActivityComplete(dragElement, dropElement) {
             const onCorrect = ((_b = container.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
                 ? ''
                 : dropElement.getAttribute('onCorrect');
-            if (onCorrect && !isBlender) {
+            if (onCorrect && !isBlender && !isBalancing) {
                 await executeActions(onCorrect, dropElement, dragElement);
             }
             //for multiply beeds
@@ -73315,7 +73493,7 @@ async function onActivityComplete(dragElement, dropElement) {
                 }, 2000);
             }
             const onInCorrect = dropElement.getAttribute('onInCorrect');
-            if (onInCorrect && !isBlender) {
+            if (onInCorrect && !isBlender && !isBalancing) {
                 await executeActions(onInCorrect, dropElement, dragElement);
             }
         }
@@ -73483,6 +73661,13 @@ const validateObjectiveStatus = async () => {
     else {
         res = matchStringPattern(objectiveString, objectiveArray);
     }
+    const isBalancing = !!container.querySelector('lido-balance');
+    if (isBalancing && !res) {
+        const dropElements = Array.from(container.querySelectorAll('[type="drop"]'));
+        const filledDropCount = dropElements.filter(drop => !!container.querySelector(`[drop-to="${drop.id}"]`)).length;
+        if (filledDropCount < dropElements.length)
+            return;
+    }
     if (res) {
         container.setAttribute("game-completed", "true");
         const attach = container.getAttribute('appendToDropOnCompletion');

package/dist/cjs/{index-DBCFoh1I.js → index-DnaH8sO-.js}

@@ -22,7 +22,7 @@ const NAMESPACE = 'lido-player';
 const BUILD = /* lido-player */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@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;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:rgb(243, 77, 8) 0px 0px 40px !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-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}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\n    180deg,\n    rgba(255, 235, 59, 0.95),\n    rgba(255, 214, 0, 0.95)\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\n    height 25ms ease-out,\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}";
+const globalStyles = "@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;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:rgb(243, 77, 8) 0px 0px 40px !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-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}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\r\n    180deg,\r\n    rgba(255, 235, 59, 0.95),\r\n    rgba(255, 214, 0, 0.95)\r\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\r\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\r\n    height 25ms ease-out,\r\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}";
 
 /*
  Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com