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

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-DjsCseV8.js');
+var index$1 = require('./index-DBCFoh1I.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';

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

@@ -25,7 +25,7 @@ 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}";
 
 /*
- Stencil Client Platform v4.45.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -113,9 +113,7 @@ var consoleError = (e, el) => (0, console.error)(e, el);
 
 // src/client/client-load-module.ts
 var cmpModules = /* @__PURE__ */ new Map();
-var failedLoadAttempts = /* @__PURE__ */ new Map();
 var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
-  var _a;
   const exportName = cmpMeta.$tagName$.replace(/-/g, "_");
   const bundleId = cmpMeta.$lazyBundleId$;
   if (!bundleId) {
@@ -125,11 +123,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
   if (module) {
     return module[exportName];
   }
-  const retryCount = (_a = failedLoadAttempts.get(bundleId)) != null ? _a : 0;
-  const cacheBustParams = [
-    retryCount > 0 ? `s-retry=${retryCount}` : "",
-    ""
-  ].filter(Boolean).join("&");
   
         if (!hmrVersionId || !BUILD.hotModuleReplacement) {
           const processMod = importedModule => {
@@ -149,17 +142,15 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`
+    `./${bundleId}.entry.js${""}`
   ).then(
     (importedModule) => {
       {
-        failedLoadAttempts.delete(bundleId);
         cmpModules.set(bundleId, importedModule);
       }
       return importedModule[exportName];
     },
     (e) => {
-      failedLoadAttempts.set(bundleId, retryCount + 1);
       consoleError(e, hostRef.$hostElement$);
     }
   );
@@ -170,8 +161,6 @@ var styles = /* @__PURE__ */ new Map();
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
-var MAX_LAZY_LOAD_RETRIES = 3;
-var LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
 var win = typeof window !== "undefined" ? window : {};
 var plt = {
   $flags$: 0,
@@ -198,10 +187,6 @@ var supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /* @_
 var queuePending = false;
 var queueDomReads = [];
 var queueDomWrites = [];
-var scheduleFlush = () => {
-  var _a;
-  return ((_a = win.document) == null ? void 0 : _a.hidden) ? nextTick(flush) : plt.raf(flush);
-};
 var queueTask = (queue, write) => (cb) => {
   queue.push(cb);
   if (!queuePending) {
@@ -209,7 +194,7 @@ var queueTask = (queue, write) => (cb) => {
     if (write && plt.$flags$ & 4 /* queueSync */) {
       nextTick(flush);
     } else {
-      scheduleFlush();
+      plt.raf(flush);
     }
   }
 };
@@ -228,7 +213,7 @@ var flush = () => {
   {
     consume(queueDomWrites);
     if (queuePending = queueDomReads.length > 0) {
-      scheduleFlush();
+      plt.raf(flush);
     }
   }
 };
@@ -309,7 +294,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
       slottedNodes.push(childNode);
       if (typeof slotName !== "undefined") return slottedNodes;
     }
-    slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
+    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
   }
   return slottedNodes;
 }
@@ -553,11 +538,6 @@ var h = (nodeName, vnodeData, ...children) => {
       } else if (child != null && typeof child !== "boolean") {
         if (simple = typeof nodeName !== "function" && !isComplexType(child)) {
           child = String(child);
-        } else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
-          {
-            consoleError("Invalid vNode child");
-          }
-          continue;
         }
         if (simple && lastSimple) {
           vNodeChildren[vNodeChildren.length - 1].$text$ += child;
@@ -802,7 +782,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       }
     }
     if (newValue == null || newValue === false) {
-      if (newValue !== false || elm.getAttribute(memberName) === "" || flags & 4 /* isHost */ && !isEnumeratedAttribute(memberName)) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
         if (xlink) {
           elm.removeAttributeNS(XLINK_NS, memberName);
         } else {
@@ -819,8 +799,6 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
   }
 };
-var ENUMERATED_ATTRIBUTES = /* @__PURE__ */ new Set(["draggable", "contenteditable", "spellcheck"]);
-var isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => {
   if (typeof value === "object" && value && "baseVal" in value) {
@@ -1089,7 +1067,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       if (idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
         } else {
           patch(elmToMove, newStartVnode, isInitialRender);
           oldCh[idxInOld] = void 0;
@@ -1188,10 +1166,7 @@ var markSlotContentForRelocation = (elm) => {
       const slotName = childNode["s-sn"];
       for (j = hostContentNodes.length - 1; j >= 0; j--) {
         node = hostContentNodes[j];
-        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && // let an exact named-slot match override a stale default-slot claim. Skip this for
-        // `slotName === ''` itself - a matched default node's cached `s-sn` is `''` too, which
-        // would trivially "match" on every re-render and force pointless re-insertion.
-        (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"] || slotName !== "" && getSlotName(node) === slotName)) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -1259,7 +1234,7 @@ var insertBefore = (parent, newNode, reference, isInitialLoad) => {
       return newNode;
     }
   }
-  if ((parent == null ? void 0 : parent.__insertBefore)) {
+  if (parent.__insertBefore) {
     return parent.__insertBefore(newNode, reference);
   } else {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -1626,7 +1601,6 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 };
 
 // src/runtime/proxy-component.ts
-var reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
@@ -1697,26 +1671,21 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                 }
                 return;
               }
-              const parsedValue = parsePropertyValue(
-                newValue,
-                memberFlags);
-              const setterSetVal = (val) => {
+              const setterSetVal = () => {
                 const currentValue = ref.$lazyInstance$[memberName];
                 if (!ref.$instanceValues$.get(memberName) && currentValue) {
                   ref.$instanceValues$.set(memberName, currentValue);
                 }
-                ref.$lazyInstance$[memberName] = val;
+                ref.$lazyInstance$[memberName] = parsePropertyValue(
+                  newValue,
+                  memberFlags);
                 setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
               };
               if (ref.$lazyInstance$) {
-                setterSetVal(parsedValue);
+                setterSetVal();
               } else {
-                ref.$instanceValues$.set(memberName, parsedValue);
                 ref.$fetchedCbList$.push(() => {
-                  const pendingValue = ref.$instanceValues$.get(memberName);
-                  if (ref.$lazyInstance$[memberName] !== pendingValue) {
-                    setterSetVal(pendingValue);
-                  }
+                  setterSetVal();
                 });
               }
             }
@@ -1764,20 +1733,13 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          const propMemberFlags = propFlags ? propFlags[1][0] : 0;
-          const isBooleanTarget = propMemberFlags & 4 /* Boolean */;
-          if (propMemberFlags & 512 /* ReflectAttr */ && propMemberFlags & 8 /* Any */ && // a complex value is never written to an attribute, so a change while the prop holds
-          // one is always external
-          !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) {
-            return;
-          }
+          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
           const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
           if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
-          const currentValue = propMemberFlags & 4096 /* Setter */ ? hostRef.$instanceValues$.get(propName) : this[propName];
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -1803,12 +1765,10 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
 
 // src/runtime/initialize-component.ts
 var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
-  var _a;
   let Cstr;
   try {
     if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
       hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-      hostRef.$flags$ &= -1025 /* hasFailedLoad */;
       const bundleId = cmpMeta.$lazyBundleId$;
       if (bundleId) {
         const CstrImport = loadModule(cmpMeta, hostRef);
@@ -1820,11 +1780,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
           Cstr = CstrImport;
         }
         if (!Cstr) {
-          hostRef.$flags$ &= -33 /* hasInitializedComponent */;
-          hostRef.$loadRetryCount$ = ((_a = hostRef.$loadRetryCount$) != null ? _a : 0) + 1;
-          if (hostRef.$loadRetryCount$ < MAX_LAZY_LOAD_RETRIES) {
-            hostRef.$flags$ |= 1024 /* hasFailedLoad */;
-          }
           throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
         }
         if (!Cstr.isProxied) {
@@ -1889,7 +1844,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
     }
-    if (hostRef.$onReadyResolve$ && !(hostRef.$flags$ & 1024 /* hasFailedLoad */)) {
+    if (hostRef.$onReadyResolve$) {
       hostRef.$onReadyResolve$(elm);
     }
   }
@@ -1941,8 +1896,6 @@ var connectedCallback = (elm) => {
     } else {
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
-      } else if (hostRef.$flags$ & 1024 /* hasFailedLoad */) {
-        setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
         hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
       }
@@ -2069,7 +2022,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         }
         disconnectedCallback() {
           plt.jmp(() => disconnectedCallback(this));
-          nextTick(() => {
+          plt.raf(() => {
             var _a3;
             const hostRef = getHostRef(this);
             if (!hostRef) {

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BY9fvbr8.js');
-require('./index-DjsCseV8.js');
+var index = require('./index-Bb_TFgTA.js');
+require('./index-DBCFoh1I.js');
 
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DjsCseV8.js');
-var index$1 = require('./index-BY9fvbr8.js');
+var index = require('./index-DBCFoh1I.js');
+var index$1 = require('./index-Bb_TFgTA.js');
 
 var rive$1 = {exports: {}};
 
@@ -12954,7 +12954,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-Bny56MQ9.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-Buln7Iaf.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');
@@ -18181,6 +18181,7 @@ const LidoTrace = class {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
+        this.activeTraceState = 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.
@@ -18195,6 +18196,7 @@ const LidoTrace = class {
     // Handle the pointermove event with optimizations
     // Update the path trace as the red circle moves
     async initializeSVG() {
+        this.cleanupTraceState(this.activeTraceState);
         let state = {
             fileIndex: -1,
             currentPathIndex: 0,
@@ -18217,7 +18219,10 @@ const LidoTrace = class {
             dragOffset: null,
             isCompletingPath: false,
             touchProximityThreshold: null,
+            pointerTransform: null,
+            pointerRect: null,
         };
+        this.activeTraceState = state;
         const url = this.svgUrls[this.currentSvgIndex];
         if (!url || url.trim() === '') {
             console.error('No SVG URL provided or index out of bounds.');
@@ -18244,6 +18249,27 @@ const LidoTrace = class {
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleWindowResize);
         window.removeEventListener('load', this.handleWindowLoad);
+        this.cleanupTraceState(this.activeTraceState);
+        this.activeTraceState = null;
+    }
+    /** Release listeners, pending frames, timers, and cached SVG geometry. */
+    cleanupTraceState(state) {
+        var _a;
+        if (!state)
+            return;
+        (_a = state.cleanup) === null || _a === void 0 ? void 0 : _a.call(state);
+        if (state.rafId)
+            cancelAnimationFrame(state.rafId);
+        state.rafId = null;
+        state.pointerMoveEvent = null;
+        state.pathSamples = [];
+        state.paths = [];
+        state.svg = null;
+        if (this.idleTimer !== null) {
+            clearTimeout(this.idleTimer);
+            this.idleTimer = null;
+        }
+        this.hideFingerHint();
     }
     /** ───────────────────────────────────────────────────────────
      *  Idle‑timer helpers
@@ -18442,6 +18468,18 @@ const LidoTrace = class {
             path._lidoTraceStart = path.getPointAtLength(0);
             path._lidoTraceEnd = path.getPointAtLength(pathLength);
             path._lidoTraceIsClosed = this.getDistanceSquared(path._lidoTraceStart, path._lidoTraceEnd) < 200;
+            // Index the path once. Repeated getPointAtLength calls are expensive on
+            // low-end SVG implementations and used to dominate every pointer frame.
+            const sampleCount = 192;
+            const sampleStep = pathLength / sampleCount || 1;
+            const samples = [];
+            for (let sampleIndex = 0; sampleIndex <= sampleCount; sampleIndex++) {
+                const length = Math.min(pathLength, sampleIndex * sampleStep);
+                const point = path.getPointAtLength(length);
+                samples.push({ x: point.x, y: point.y, length });
+            }
+            path._lidoTraceSamples = samples;
+            path._lidoTraceSampleStep = sampleStep;
             // /** give every path an id so <mpath> can follow it */
             path.setAttribute('id', 'lido-path-' + index); //  ← NEW
             // Create green path for tracing effect
@@ -18476,7 +18514,7 @@ const LidoTrace = class {
                 state.flowMarkers = this.createFlowMarkersForPath(path);
             }
         });
-        state.totalPathLength = state.paths[state.currentPathIndex].getTotalLength();
+        state.totalPathLength = state.paths[state.currentPathIndex]._lidoTraceLength;
     }
     // Set up the draggable circle at the start of the first path
     setupDraggableCircle(state) {
@@ -18501,10 +18539,14 @@ const LidoTrace = class {
             return;
         state.svg.style.touchAction = 'none';
         state.circle.style.touchAction = 'none';
-        // Handle pointerdown on the circle to start dragging
-        state.circle.addEventListener('pointerdown', (evt) => {
+        // Keep named handlers so the detached SVG can be fully released when the
+        // next trace starts. Anonymous handlers here previously retained every
+        // completed trace for the lifetime of the page.
+        const onPointerDown = (evt) => {
             evt.preventDefault(); // Prevent default actions like text selection
-            const pointerPos = this.getPointerPosition(evt, state.svg);
+            state.pointerRect = state.svg.getBoundingClientRect();
+            state.pointerTransform = this.getSvgViewBoxTransform(state.svg, state.pointerRect);
+            const pointerPos = this.getPointerPosition(evt, state.svg, state.pointerTransform, state.pointerRect);
             const circlePos = {
                 x: parseFloat(state.circle.getAttribute('cx')),
                 y: parseFloat(state.circle.getAttribute('cy')),
@@ -18529,9 +18571,9 @@ const LidoTrace = class {
             }
             this.hideFingerHint(); // ← NEW
             this.resetIdleTimer(state); // ← NEW
-        }, { passive: false });
+        };
         // Handle pointermove on the SVG to update the circle position
-        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.addEventListener('pointermove', (evt) => {
+        const onPointerMove = (evt) => {
             if (!state.isDragging || evt.pointerId !== state.activePointerId)
                 return;
             evt.preventDefault();
@@ -18542,7 +18584,7 @@ const LidoTrace = class {
                     state.rafId = null;
                 });
             }
-        });
+        };
         // Handle pointerup and pointercancel on the SVG to stop dragging
         const endDrag = (evt) => {
             if (evt.pointerId === state.activePointerId) {
@@ -18554,12 +18596,25 @@ const LidoTrace = class {
                 this.resetIdleTimer(state); // ← NEW
             }
         };
-        (_b = state.svg) === null || _b === void 0 ? void 0 : _b.addEventListener('pointerup', endDrag);
-        (_c = state.svg) === null || _c === void 0 ? void 0 : _c.addEventListener('pointercancel', endDrag);
+        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerup', endDrag);
+        (_b = state.svg) === null || _b === void 0 ? void 0 : _b.addEventListener('pointercancel', endDrag);
         // Optional: Prevent context menu on long press
-        (_d = state.svg) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', (evt) => {
+        const onContextMenu = (evt) => {
             evt.preventDefault();
-        });
+        };
+        state.circle.addEventListener('pointerdown', onPointerDown, { passive: false });
+        (_c = state.svg) === null || _c === void 0 ? void 0 : _c.addEventListener('pointermove', onPointerMove);
+        (_d = state.svg) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', onContextMenu);
+        state.cleanup = () => {
+            var _a, _b, _c, _d, _e;
+            (_a = state.circle) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', onPointerDown);
+            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointermove', onPointerMove);
+            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerup', endDrag);
+            (_d = state.svg) === null || _d === void 0 ? void 0 : _d.removeEventListener('pointercancel', endDrag);
+            (_e = state.svg) === null || _e === void 0 ? void 0 : _e.removeEventListener('contextmenu', onContextMenu);
+            state.isDragging = false;
+            state.activePointerId = null;
+        };
     }
     // Modified handlePointerMove function
     async handlePointerMove(state) {
@@ -18572,7 +18627,7 @@ const LidoTrace = class {
             return;
         this.hideFingerHint(); // user is active, remove hint
         const evt = state.pointerMoveEvent;
-        const rawPointerPos = this.getPointerPosition(evt, state.svg);
+        const rawPointerPos = this.getPointerPosition(evt, state.svg, state.pointerTransform, state.pointerRect);
         const pointerPos = state.dragOffset
             ? {
                 x: rawPointerPos.x - state.dragOffset.x,
@@ -18836,9 +18891,9 @@ const LidoTrace = class {
         index$1.triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
-    getPointerPosition(evt, svg) {
+    getPointerPosition(evt, svg, cachedTransform, cachedRect) {
         var _a;
-        const viewBoxPoint = this.getPointerPositionFromViewBox(evt, svg);
+        const viewBoxPoint = this.getPointerPositionFromViewBox(evt, svg, cachedTransform, cachedRect);
         if (viewBoxPoint)
             return viewBoxPoint;
         const svgPoint = svg.createSVGPoint();
@@ -18847,13 +18902,13 @@ const LidoTrace = class {
         const ctm = (_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse();
         return ctm ? svgPoint.matrixTransform(ctm) : { x: evt.clientX, y: evt.clientY };
     }
-    getPointerPositionFromViewBox(evt, svg) {
-        const rect = svg.getBoundingClientRect();
+    getPointerPositionFromViewBox(evt, svg, cachedTransform, cachedRect) {
+        const rect = cachedRect || svg.getBoundingClientRect();
         const viewBox = svg.viewBox.baseVal;
         if (!rect.width || !rect.height || !viewBox.width || !viewBox.height) {
             return null;
         }
-        const { offsetX, offsetY, scaleX, scaleY } = this.getSvgViewBoxTransform(svg, rect);
+        const { offsetX, offsetY, scaleX, scaleY } = cachedTransform || this.getSvgViewBoxTransform(svg, rect);
         return {
             x: viewBox.x + (evt.clientX - rect.left - offsetX) / scaleX,
             y: viewBox.y + (evt.clientY - rect.top - offsetY) / scaleY,
@@ -18913,6 +18968,40 @@ const LidoTrace = class {
     getClosestPointOnPath(pathNode, point, lastLength) {
         var _a;
         const pathLength = (_a = pathNode._lidoTraceLength) !== null && _a !== void 0 ? _a : pathNode.getTotalLength();
+        const samples = pathNode._lidoTraceSamples;
+        const sampleStep = pathNode._lidoTraceSampleStep;
+        if ((samples === null || samples === void 0 ? void 0 : samples.length) && sampleStep) {
+            const searchWindow = lastLength === undefined ? pathLength : 150;
+            const searchStart = lastLength === undefined ? 0 : Math.max(0, lastLength - searchWindow);
+            const searchEnd = lastLength === undefined ? pathLength : Math.min(pathLength, lastLength + searchWindow);
+            let nearest = samples[Math.max(0, Math.min(samples.length - 1, Math.round((lastLength || 0) / sampleStep)))];
+            let nearestDistance = Infinity;
+            for (const sample of samples) {
+                if (sample.length < searchStart || sample.length > searchEnd)
+                    continue;
+                const distance = this.getDistanceSquared(point, sample);
+                if (distance < nearestDistance) {
+                    nearestDistance = distance;
+                    nearest = sample;
+                }
+            }
+            // Refine only around the cached winner. This keeps the path accurate
+            // while reducing hot-path geometry calls from roughly 50 to a handful.
+            const refinementStep = 6;
+            const refineStart = Math.max(searchStart, nearest.length - sampleStep);
+            const refineEnd = Math.min(searchEnd, nearest.length + sampleStep);
+            let closestPoint = Object.assign({}, nearest);
+            let minDistanceSquared = nearestDistance;
+            for (let length = refineStart; length <= refineEnd; length += refinementStep) {
+                const candidate = pathNode.getPointAtLength(length);
+                const distance = this.getDistanceSquared(point, candidate);
+                if (distance < minDistanceSquared) {
+                    minDistanceSquared = distance;
+                    closestPoint = { x: candidate.x, y: candidate.y, length };
+                }
+            }
+            return closestPoint;
+        }
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
         const coarseStep = 40;
@@ -19105,7 +19194,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '2f62ab117a595ba9af7f926ad7240902caf7fd99', 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 }, index.h("div", { key: '5a14b9bc1ff4d71ffc740c8afaa1d07754044a9d', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: 'f4c270d9319e1115d966a6d9b697a4413ca87885', 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 }, index.h("div", { key: 'efbbaf5c796c9cfe8516fe5d47265e3a01b28a25', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/lido-player.cjs.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DjsCseV8.js');
+var index = require('./index-DBCFoh1I.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.45.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.5 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjsCseV8.js');
+var index = require('./index-DBCFoh1I.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/collection/collection-manifest.json

@@ -26,7 +26,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.45.1",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],