lido-player 0.0.2-alpha-96 → 0.0.2-alpha-98

package/dist/cjs/{decode-BMS5SH1_.js → decode-afeNWInB.js}

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

package/dist/cjs/{index-qIQYfLu7.js → index-DMfHwNdL.js}

@@ -335,6 +335,7 @@ 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;
@@ -489,11 +490,14 @@ function enableDraggingWithScaling(element) {
             const dropObject = buildDragSelectedMapFromDOM();
             const storedTabIndexes = Object.keys(dropObject).map(Number);
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
-                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
+                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && container.getAttribute("template-id") !== "blender") {
                     if (otherElement) {
                         otherElement.style.opacity = "0.3";
                     }
                 }
+                if (otherElement !== mostOverlappedElement) {
+                    otherElement.style.opacity = "1";
+                }
             }
             else {
                 if (otherElement) {
@@ -564,6 +568,13 @@ function enableDraggingWithScaling(element) {
             return;
         }
         onElementDropComplete(element, mostOverlappedElement);
+        if (templateId === "blender" && element && mostOverlappedElement) {
+            const allElements = document.querySelectorAll(`*`);
+            allElements.forEach(el => {
+                removeHighlight(el);
+            });
+            mostOverlappedElement.classList.add("highlight-element");
+        }
         executeActions("this.updateCountBlender='true'", container);
         if (((_b = element.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.Diagonal) {
             if (mostOverlappedElement) {
@@ -1007,7 +1018,7 @@ function updateDropBorder(element) {
     }
     const dropId = element.id;
     const dragSelectedElements = document.querySelectorAll(`[${DropToAttr}="${dropId}"]`);
-    if (dragSelectedElements.length > 0) {
+    if (dragSelectedElements.length > 0 && container.getAttribute("template-id") !== "blender") {
         element.classList.add('filled');
         element.classList.remove('empty');
         element.classList.remove('highlight-element');
@@ -1089,10 +1100,12 @@ 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
-        const allElements = document.querySelectorAll(`*`);
-        allElements.forEach(el => {
-            removeHighlight(el);
-        });
+        if (container.getAttribute("template-id") !== "blender") {
+            const allElements = document.querySelectorAll(`*`);
+            allElements.forEach(el => {
+                removeHighlight(el);
+            });
+        }
         // await new Promise(resolve => setTimeout(resolve, 500));
         await onElementDropComplete(selectedDragElement, selectedDropElement);
         // ensure count update for click-to-drop flow
@@ -1280,6 +1293,8 @@ function stopHighlightForSpeakingElement(element) {
 }
 function highlightElement() {
     const container = document.querySelector(LidoContainer);
+    if (container.getAttribute("template-id") === "blender")
+        return;
     if (!container)
         return;
     const dropElements = buildDropHasDragFromDOM();
@@ -73660,14 +73675,30 @@ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr)
         targetY = startY + (dropCount * stepY);
     }
     // ------------ APPLY TRANSFORM SMOOTHLY --------------
+    // reset size first so centering and final placement use the resized bounds
+    dragElement.style.width = "auto";
+    dragElement.style.height = "auto";
+    // ------------ APPLY TRANSFORM SMOOTHLY --------------
     const dx = (targetX - dragRect.left) / scale;
     const dy = (targetY - dragRect.top) / scale;
     dragElement.style.transition = "transform .2s ease-out";
     dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
+    const resizedDragRect = dragElement.getBoundingClientRect();
+    const dropCenterX = dropRect.left + dropWidth / 2;
+    const dropCenterY = dropRect.top + dropHeight / 2;
+    const resizedDragCenterX = resizedDragRect.left + resizedDragRect.width / 2;
+    const resizedDragCenterY = resizedDragRect.top + resizedDragRect.height / 2;
+    const centerDx = (dropCenterX - resizedDragCenterX) / scale;
+    const centerDy = (dropCenterY - resizedDragCenterY) / scale;
+    dragElement.style.transition = "none";
+    dragElement.style.transform = `translate(${centerDx}px, ${centerDy}px)`;
+    // Force the browser to apply the centered position before animating to the stack slot.
+    dragElement.getBoundingClientRect();
+    requestAnimationFrame(() => {
+        dragElement.style.transition = "transform .2s ease-out";
+        dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
+    });
     dropElement.dataset.dropCount = String(dropCount + 1);
-    // reset size
-    dragElement.style.width = "auto";
-    dragElement.style.height = "auto";
 }
 const updateCalculatorAnswer = (el) => {
     const container = document.getElementById(LidoContainer);

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-qIQYfLu7.js');
+var index = require('./index-DMfHwNdL.js');
 require('./index-Dl8SlqP-.js');
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Dl8SlqP-.js');
-var index$1 = require('./index-qIQYfLu7.js');
+var index$1 = require('./index-DMfHwNdL.js');
 
 var rive$1 = {exports: {}};
 
@@ -12874,7 +12874,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BMS5SH1_.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-afeNWInB.js'); }).then(function (n) { return n.decode; });
             const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer || ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
             if (typeof brotliDecompressBuffer !== 'function') {
                 throw new Error('BrotliDecompressBuffer function not found in brotli/dec/decode');

package/dist/collection/utils/utils.js

@@ -1524,14 +1524,30 @@ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr)
         targetY = startY + (dropCount * stepY);
     }
     // ------------ APPLY TRANSFORM SMOOTHLY --------------
+    // reset size first so centering and final placement use the resized bounds
+    dragElement.style.width = "auto";
+    dragElement.style.height = "auto";
+    // ------------ APPLY TRANSFORM SMOOTHLY --------------
     const dx = (targetX - dragRect.left) / scale;
     const dy = (targetY - dragRect.top) / scale;
     dragElement.style.transition = "transform .2s ease-out";
     dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
+    const resizedDragRect = dragElement.getBoundingClientRect();
+    const dropCenterX = dropRect.left + dropWidth / 2;
+    const dropCenterY = dropRect.top + dropHeight / 2;
+    const resizedDragCenterX = resizedDragRect.left + resizedDragRect.width / 2;
+    const resizedDragCenterY = resizedDragRect.top + resizedDragRect.height / 2;
+    const centerDx = (dropCenterX - resizedDragCenterX) / scale;
+    const centerDy = (dropCenterY - resizedDragCenterY) / scale;
+    dragElement.style.transition = "none";
+    dragElement.style.transform = `translate(${centerDx}px, ${centerDy}px)`;
+    // Force the browser to apply the centered position before animating to the stack slot.
+    dragElement.getBoundingClientRect();
+    requestAnimationFrame(() => {
+        dragElement.style.transition = "transform .2s ease-out";
+        dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
+    });
     dropElement.dataset.dropCount = String(dropCount + 1);
-    // reset size
-    dragElement.style.width = "auto";
-    dragElement.style.height = "auto";
 }
 export const updateCalculatorAnswer = (el) => {
     const container = document.getElementById(LidoContainer);

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

@@ -61,6 +61,7 @@ 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;
@@ -221,11 +222,14 @@ export function enableDraggingWithScaling(element) {
             const dropObject = buildDragSelectedMapFromDOM();
             const storedTabIndexes = Object.keys(dropObject).map(Number);
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
-                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
+                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && container.getAttribute("template-id") !== "blender") {
                     if (otherElement) {
                         otherElement.style.opacity = "0.3";
                     }
                 }
+                if (otherElement !== mostOverlappedElement) {
+                    otherElement.style.opacity = "1";
+                }
             }
             else {
                 if (otherElement) {
@@ -296,6 +300,13 @@ export function enableDraggingWithScaling(element) {
             return;
         }
         onElementDropComplete(element, mostOverlappedElement);
+        if (templateId === "blender" && element && mostOverlappedElement) {
+            const allElements = document.querySelectorAll(`*`);
+            allElements.forEach(el => {
+                removeHighlight(el);
+            });
+            mostOverlappedElement.classList.add("highlight-element");
+        }
         executeActions("this.updateCountBlender='true'", container);
         if (((_b = element.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.Diagonal) {
             if (mostOverlappedElement) {
@@ -740,7 +751,7 @@ export function updateDropBorder(element) {
     }
     const dropId = element.id;
     const dragSelectedElements = document.querySelectorAll(`[${DropToAttr}="${dropId}"]`);
-    if (dragSelectedElements.length > 0) {
+    if (dragSelectedElements.length > 0 && container.getAttribute("template-id") !== "blender") {
         element.classList.add('filled');
         element.classList.remove('empty');
         element.classList.remove('highlight-element');
@@ -825,10 +836,12 @@ 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
-        const allElements = document.querySelectorAll(`*`);
-        allElements.forEach(el => {
-            removeHighlight(el);
-        });
+        if (container.getAttribute("template-id") !== "blender") {
+            const allElements = document.querySelectorAll(`*`);
+            allElements.forEach(el => {
+                removeHighlight(el);
+            });
+        }
         // await new Promise(resolve => setTimeout(resolve, 500));
         await onElementDropComplete(selectedDragElement, selectedDropElement);
         // ensure count update for click-to-drop flow

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

@@ -105,6 +105,8 @@ export function stopHighlightForSpeakingElement(element) {
 }
 export function highlightElement() {
     const container = document.querySelector(LidoContainer);
+    if (container.getAttribute("template-id") === "blender")
+        return;
     if (!container)
         return;
     const dropElements = buildDropHasDragFromDOM();