js.foresight-devtools 0.0.2 → 0.0.3

package/dist/Debugger/ForesightDebugger.d.ts

@@ -1,5 +1,5 @@
-import { ForesightManager } from 'js.foresight';
-import type { DebuggerSettings, ForesightDebuggerData } from '../types';
+import { ForesightManager } from "js.foresight";
+import type { DebuggerSettings, ForesightDebuggerData } from "../types";
 export type ElementOverlays = {
     expandedOverlay: HTMLElement;
     nameLabel: HTMLElement;
@@ -38,9 +38,9 @@ export declare class ForesightDebugger {
      *
      * @param element - The ForesightElement to remove from debugging visualization
      */
-    private handleRemoveElement;
+    private handleUnregisterElement;
     private handleCallbackFired;
-    private handleAddElement;
+    private handleRegisterElement;
     private handleMouseTrajectoryUpdate;
     private handleScrollTrajectoryUpdate;
     private handleSettingsChanged;

package/dist/devtools.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -82,9 +82,9 @@ declare class ForesightDebugger {
      *
      * @param element - The ForesightElement to remove from debugging visualization
      */
-    private handleRemoveElement;
+    private handleUnregisterElement;
     private handleCallbackFired;
-    private handleAddElement;
+    private handleRegisterElement;
     private handleMouseTrajectoryUpdate;
     private handleScrollTrajectoryUpdate;
     private handleSettingsChanged;

package/dist/index.js

@@ -1,6 +1,6 @@
-"use strict";const e=e=>(e=>(e=>null!=e&&"object"==typeof e||!1)(e)&&"number"==typeof e.nodeType&&[1,2,3,4,5,6,7,8,9,10,11].some(t=>e.nodeType===t)||!1)(e)&&1===e.nodeType||!1;const t=["all","intersecting","update"],n="PositionObserver Error";var i=class{entries;static version="1.1.0";_t;_r;_cm;_w;_h;_rm;_th;_c;constructor(i,o){if("function"!=typeof i)throw new Error(`${n}: ${i} is not a function.`);this.entries=new Map,this._c=i,this._t=0;const s=e(o?.root)?o.root:document?.documentElement;this._r=s,this._rm=o?.rootMargin,this._th=o?.threshold,
+"use strict";const e=e=>(e=>(e=>null!=e&&"object"==typeof e||!1)(e)&&"number"==typeof e.nodeType&&[1,2,3,4,5,6,7,8,9,10,11].some(t=>e.nodeType===t)||!1)(e)&&1===e.nodeType||!1;const t=["all","intersecting","update"],n="PositionObserver Error";var i=class{entries;static version="1.1.0";_t;_r;_cm;_w;_h;_rm;_th;_c;constructor(i,s){if("function"!=typeof i)throw new Error(`${n}: ${i} is not a function.`);this.entries=new Map,this._c=i,this._t=0;const o=e(s?.root)?s.root:document?.documentElement;this._r=o,this._rm=s?.rootMargin,this._th=s?.threshold,
 /* istanbul ignore next @preserve */
-this._cm=t.indexOf(o?.callbackMode||"intersecting"),this._w=s.clientWidth,this._h=s.clientHeight}observe=t=>{if(!e(t))throw new Error(`${n}: ${t} is not an instance of Element.`);
+this._cm=t.indexOf(s?.callbackMode||"intersecting"),this._w=o.clientWidth,this._h=o.clientHeight}observe=t=>{if(!e(t))throw new Error(`${n}: ${t} is not an instance of Element.`);
 /* istanbul ignore else @preserve - a guard must be set */this._r.contains(t)&&this._n(t).then(e=>{
 /* istanbul ignore else @preserve - don't allow duplicate entries */
 e.boundingClientRect&&!this.getEntry(t)&&this.entries.set(t,e)
@@ -8,11 +8,11 @@ e.boundingClientRect&&!this.getEntry(t)&&this.entries.set(t,e)
 /* istanbul ignore else @preserve */
 this.entries.has(e)&&this.entries.delete(e)};_rc=()=>{
 /* istanbul ignore if @preserve - a guard must be set */
-if(!this.entries.size)return void(this._t=0);const{clientWidth:e,clientHeight:t}=this._r,n=new Promise(n=>{const i=[];this.entries.forEach(({target:n,boundingClientRect:o,isIntersecting:s})=>{
+if(!this.entries.size)return void(this._t=0);const{clientWidth:e,clientHeight:t}=this._r,n=new Promise(n=>{const i=[];this.entries.forEach(({target:n,boundingClientRect:s,isIntersecting:o})=>{
 /* istanbul ignore if @preserve - a guard must be set when target has been removed */
 this._r.contains(n)&&this._n(n).then(r=>{
 /* istanbul ignore if @preserve - make sure to only count visible entries */
-if(!r.isIntersecting){if(1===this._cm)return;if(2===this._cm)return void(s&&(this.entries.set(n,r),i.push(r)))}const{left:a,top:l}=r.boundingClientRect;
-/* istanbul ignore else @preserve - only schedule entries that changed position */o.top===l&&o.left===a&&this._w===e&&this._h===t||(this.entries.set(n,r),i.push(r))})}),this._w=e,this._h=t,n(i)});this._t=requestAnimationFrame(async()=>{const e=await n;
-/* istanbul ignore else @preserve */e.length&&this._c(e,this),this._rc()})};_n=e=>new Promise(t=>{new IntersectionObserver(([e],n)=>{n.disconnect(),t(e)},{threshold:this._th,rootMargin:this._rm}).observe(e)});getEntry=e=>this.entries.get(e);disconnect=()=>{cancelAnimationFrame(this._t),this.entries.clear(),this._t=0}};var o=function(e,t){void 0===t&&(t=2);var n=" ".repeat(t);if("object"==typeof e&&null!==e&&!Array.isArray(e)){var i=Object.entries(e);if(0===i.length)return"{}";var s=i.map(function(e){var i=e[0],s=e[1];return"".concat(n,"  ").concat(i,": ").concat(o(s,t+2))}).join(",\n");return"{\n".concat(s,"\n").concat(n,"}")}return"string"==typeof e?"'".concat(e,"'"):"boolean"==typeof e||"number"==typeof e?String(e):null===e?"null":void 0===e?"undefined":Array.isArray(e)?JSON.stringify(e):String(e)};function s(e,t,n){var i=document.createElement(e);return n.id&&(i.id=n.id),n.className&&(i.className=n.className),n.data&&i.setAttribute("data-value",n.data),t.appendChild(i)}function r(e,t,n){var i=document.createElement("style");return i.textContent=e,i.id=n,t.appendChild(i)}var a=function(e){return e?"👁️":"🚫"},l="points",c="tabs",d="ms",h='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',g="<em>No elements registered.</em>",u=function(){function e(e,t){this.elementListItemsContainer=null,this.elementCountSpan=null,this.callbackCountSpan=null,this.elementListItems=new Map,this.trajectoryEnabledCheckbox=null,this.tabEnabledCheckbox=null,this.scrollEnabledCheckbox=null,this.historySizeSlider=null,this.historyValueSpan=null,this.predictionTimeSlider=null,this.predictionValueSpan=null,this.tabOffsetSlider=null,this.tabOffsetValueSpan=null,this.scrollMarginSlider=null,this.scrollMarginValueSpan=null,this.showNameTagsCheckbox=null,this.sortOptionsPopup=null,this.sortButton=null,this.containerMinimizeButton=null,this.allSettingsSectionsContainer=null,this.debuggerElementsSection=null,this.isContainerMinimized=!1,this.isMouseSettingsMinimized=!0,this.isKeyboardSettingsMinimized=!0,this.isScrollSettingsMinimized=!0,this.isGeneralSettingsMinimized=!0,this.SESSION_STORAGE_KEY="jsforesightDebuggerSectionStates",this.copySettingsButton=null,this.minimizedElementCount=null,this.copyTimeoutId=null,this.closeSortDropdownHandler=null,this.foresightManagerInstance=e,this.debuggerInstance=t}return e.initialize=function(t,n,i,o){e.isInitiated||(e.debuggerControlPanelInstance=new e(t,n));var s=e.debuggerControlPanelInstance;return s._setupDOMAndListeners(i,o),s},e.prototype._setupDOMAndListeners=function(e,t){this.controlsContainer||(this.shadowRoot=e,this.isContainerMinimized=t.isControlPanelDefaultMinimized,this.controlsContainer=this.createControlContainer(),this.shadowRoot.appendChild(this.controlsContainer),this.controlPanelStyleElement=r(this.getStyles(),this.shadowRoot,"debug-control-panel"),this.queryDOMElements(),this.originalSectionStates(),this.setupEventListeners(),this.updateContainerVisibilityState(),this.updateControlsState(this.foresightManagerInstance.getManagerData.globalSettings,t))},Object.defineProperty(e,"isInitiated",{get:function(){return!!e.debuggerControlPanelInstance},enumerable:!1,configurable:!0}),e.prototype.loadSectionStatesFromSessionStorage=function(){var e,t,n,i,o=sessionStorage.getItem(this.SESSION_STORAGE_KEY),s={};return o&&(s=JSON.parse(o)),this.isMouseSettingsMinimized=null===(e=s.mouse)||void 0===e||e,this.isKeyboardSettingsMinimized=null===(t=s.keyboard)||void 0===t||t,this.isScrollSettingsMinimized=null===(n=s.scroll)||void 0===n||n,this.isGeneralSettingsMinimized=null===(i=s.general)||void 0===i||i,s},e.prototype.saveSectionStatesToSessionStorage=function(){var e={mouse:this.isMouseSettingsMinimized,keyboard:this.isKeyboardSettingsMinimized,scroll:this.isScrollSettingsMinimized,general:this.isGeneralSettingsMinimized};try{sessionStorage.setItem(this.SESSION_STORAGE_KEY,JSON.stringify(e))}catch(e){console.error("Foresight Debugger: Could not save section states to session storage.",e)}},e.prototype.queryDOMElements=function(){this.trajectoryEnabledCheckbox=this.controlsContainer.querySelector("#trajectory-enabled"),this.tabEnabledCheckbox=this.controlsContainer.querySelector("#tab-enabled"),this.scrollEnabledCheckbox=this.controlsContainer.querySelector("#scroll-enabled"),this.historySizeSlider=this.controlsContainer.querySelector("#history-size"),this.historyValueSpan=this.controlsContainer.querySelector("#history-value"),this.predictionTimeSlider=this.controlsContainer.querySelector("#prediction-time"),this.predictionValueSpan=this.controlsContainer.querySelector("#prediction-value"),this.tabOffsetSlider=this.controlsContainer.querySelector("#tab-offset"),this.tabOffsetValueSpan=this.controlsContainer.querySelector("#tab-offset-value"),this.scrollMarginSlider=this.controlsContainer.querySelector("#scroll-margin"),this.scrollMarginValueSpan=this.controlsContainer.querySelector("#scroll-margin-value"),this.elementListItemsContainer=this.controlsContainer.querySelector("#element-list-items-container"),this.showNameTagsCheckbox=this.controlsContainer.querySelector("#toggle-name-tags"),this.sortOptionsPopup=this.controlsContainer.querySelector("#sort-options-popup"),this.sortButton=this.controlsContainer.querySelector(".sort-button"),this.elementCountSpan=this.controlsContainer.querySelector("#element-count"),this.callbackCountSpan=this.controlsContainer.querySelector("#callback-count"),this.containerMinimizeButton=this.controlsContainer.querySelector(".minimize-button"),this.allSettingsSectionsContainer=this.controlsContainer.querySelector(".all-settings-sections-container"),this.debuggerElementsSection=this.controlsContainer.querySelector(".debugger-elements"),this.copySettingsButton=this.controlsContainer.querySelector(".copy-settings-button"),this.minimizedElementCount=this.controlsContainer.querySelector(".minimized-element-count")},e.prototype.handleCopySettings=function(){var e,t,n,i=this;this.copySettingsButton&&navigator.clipboard.writeText((e=this.foresightManagerInstance.getManagerData.globalSettings,t="ForesightManager.initialize",n=Object.entries(e).filter(function(e){var t=e[0];return"resizeScrollThrottleDelay"!==String(t)}).map(function(e){var t=e[0],n=e[1];return"  ".concat(String(t),": ").concat(o(n))}).join(",\n"),"".concat(t,"({\n").concat(n,"\n})"))).then(function(){i.copySettingsButton.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',i.copyTimeoutId&&clearTimeout(i.copyTimeoutId),i.copyTimeoutId=setTimeout(function(){i.copySettingsButton&&(i.copySettingsButton.innerHTML=h),i.copyTimeoutId=null},3e3)}).catch(function(e){console.error("Foresight Debugger: Could not copy settings to clipboard",e)})},e.prototype.createInputEventListener=function(e,t,n,i){var o=this;e&&t&&e.addEventListener("input",function(e){var s,r=parseInt(e.target.value,10);t.textContent="".concat(r," ").concat(n),o.foresightManagerInstance.alterGlobalSettings(((s={})[i]=r,s))})},e.prototype.createChangeEventListener=function(e,t){var n=this;if(e){var i=this.debuggerInstance.getDebuggerData.settings;e.addEventListener("change",function(e){var o,s,r=e.target.checked;t in i?n.debuggerInstance.alterDebuggerSettings(((o={})[t]=r,o)):n.foresightManagerInstance.alterGlobalSettings(((s={})[t]=r,s))})}},e.prototype.createSectionVisibilityToggleEventListener=function(e,t){var n=this,i=null==e?void 0:e.querySelector(".debugger-section-header");null==i||i.addEventListener("click",function(i){i.stopPropagation(),n.toggleMinimizeSection(e,n[t]=!n[t])})},e.prototype.setupEventListeners=function(){var e,t,n,i,o=this;this.createChangeEventListener(this.trajectoryEnabledCheckbox,"enableMousePrediction"),this.createChangeEventListener(this.tabEnabledCheckbox,"enableTabPrediction"),this.createChangeEventListener(this.scrollEnabledCheckbox,"enableScrollPrediction"),this.createChangeEventListener(this.showNameTagsCheckbox,"showNameTags"),this.createInputEventListener(this.historySizeSlider,this.historyValueSpan,l,"positionHistorySize"),this.createInputEventListener(this.predictionTimeSlider,this.predictionValueSpan,d,"trajectoryPredictionTime"),this.createInputEventListener(this.tabOffsetSlider,this.tabOffsetValueSpan,c,"tabOffset"),this.createInputEventListener(this.scrollMarginSlider,this.scrollMarginValueSpan,"px","scrollMargin"),null===(e=this.sortButton)||void 0===e||e.addEventListener("click",function(e){var t;e.stopPropagation(),null===(t=o.sortOptionsPopup)||void 0===t||t.classList.toggle("active")}),null===(t=this.sortOptionsPopup)||void 0===t||t.addEventListener("click",function(e){var t,n=e.target.closest("[data-sort]");if(n){var i=n.dataset.sort;o.debuggerInstance.alterDebuggerSettings({sortElementList:i}),o.sortAndReorderElements(),o.updateSortOptionUI(i),null===(t=o.sortOptionsPopup)||void 0===t||t.classList.remove("active")}}),this.closeSortDropdownHandler=function(e){var t,n;(null===(t=o.sortOptionsPopup)||void 0===t?void 0:t.classList.contains("active"))&&!(null===(n=o.sortButton)||void 0===n?void 0:n.contains(e.target))&&o.sortOptionsPopup.classList.remove("active")},document.addEventListener("click",this.closeSortDropdownHandler),null===(n=this.containerMinimizeButton)||void 0===n||n.addEventListener("click",function(){o.isContainerMinimized=!o.isContainerMinimized,o.updateContainerVisibilityState()}),null===(i=this.copySettingsButton)||void 0===i||i.addEventListener("click",this.handleCopySettings.bind(this)),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".mouse-settings-section"),"isMouseSettingsMinimized"),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".keyboard-settings-section"),"isKeyboardSettingsMinimized"),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".scroll-settings-section"),"isScrollSettingsMinimized"),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".general-settings-section"),"isGeneralSettingsMinimized")},e.prototype.toggleMinimizeSection=function(e,t){if(e){var n=e.querySelector(".debugger-section-content"),i=e.querySelector(".section-minimize-button");n&&i&&(t?(n.style.display="none",i.textContent="+"):(n.style.display="flex",i.textContent="-")),this.saveSectionStatesToSessionStorage()}},e.prototype.originalSectionStates=function(){var e,t,n,i,o,s=this.loadSectionStatesFromSessionStorage();this.toggleMinimizeSection(this.controlsContainer.querySelector(".mouse-settings-section"),null===(e=s.mouse)||void 0===e||e),this.toggleMinimizeSection(this.controlsContainer.querySelector(".keyboard-settings-section"),null===(t=s.keyboard)||void 0===t||t),this.toggleMinimizeSection(this.controlsContainer.querySelector(".scroll-settings-section"),null===(n=s.scroll)||void 0===n||n),this.toggleMinimizeSection(this.controlsContainer.querySelector(".general-settings-section"),null===(i=s.general)||void 0===i||i);var r=null===(o=this.debuggerElementsSection)||void 0===o?void 0:o.querySelector(".debugger-section-content");r&&(r.style.display="flex")},e.prototype.updateContainerVisibilityState=function(){this.containerMinimizeButton&&(this.isContainerMinimized?(this.controlsContainer.classList.add("minimized"),this.containerMinimizeButton.textContent="+",this.allSettingsSectionsContainer&&(this.allSettingsSectionsContainer.style.display="none"),this.debuggerElementsSection&&(this.debuggerElementsSection.style.display="none"),this.copySettingsButton&&(this.copySettingsButton.style.display="none"),this.minimizedElementCount&&(this.minimizedElementCount.style.display="")):(this.controlsContainer.classList.remove("minimized"),this.containerMinimizeButton.textContent="-",this.allSettingsSectionsContainer&&(this.allSettingsSectionsContainer.style.display=""),this.debuggerElementsSection&&(this.debuggerElementsSection.style.display=""),this.copySettingsButton&&(this.copySettingsButton.style.display=""),this.minimizedElementCount&&(this.minimizedElementCount.style.display="none")))},e.prototype.updateSortOptionUI=function(e){var t;null===(t=this.sortOptionsPopup)||void 0===t||t.querySelectorAll("[data-sort]").forEach(function(t){var n=t;n.dataset.sort===e?n.classList.add("active-sort-option"):n.classList.remove("active-sort-option")})},e.prototype.updateControlsState=function(e,t){var n;this.trajectoryEnabledCheckbox&&(this.trajectoryEnabledCheckbox.checked=e.enableMousePrediction),this.tabEnabledCheckbox&&(this.tabEnabledCheckbox.checked=e.enableTabPrediction),this.scrollEnabledCheckbox&&(this.scrollEnabledCheckbox.checked=e.enableScrollPrediction),this.showNameTagsCheckbox&&(this.showNameTagsCheckbox.checked=t.showNameTags),this.updateSortOptionUI(null!==(n=t.sortElementList)&&void 0!==n?n:"visibility"),this.historySizeSlider&&this.historyValueSpan&&(this.historySizeSlider.value=e.positionHistorySize.toString(),this.historyValueSpan.textContent="".concat(e.positionHistorySize," ").concat(l)),this.predictionTimeSlider&&this.predictionValueSpan&&(this.predictionTimeSlider.value=e.trajectoryPredictionTime.toString(),this.predictionValueSpan.textContent="".concat(e.trajectoryPredictionTime," ").concat(d)),this.tabOffsetSlider&&this.tabOffsetValueSpan&&(this.tabOffsetSlider.value=e.tabOffset.toString(),this.tabOffsetValueSpan.textContent="".concat(e.tabOffset," ").concat(c)),this.scrollMarginSlider&&this.scrollMarginValueSpan&&(this.scrollMarginSlider.value=e.scrollMargin.toString(),this.scrollMarginValueSpan.textContent="".concat(e.scrollMargin," ").concat("px"))},e.prototype.refreshRegisteredElementCountDisplay=function(e){if(this.elementCountSpan&&this.callbackCountSpan){var t=0;e.forEach(function(e){e.isIntersectingWithViewport&&t++});var n=e.size,i=this.foresightManagerInstance.getManagerData.globalCallbackHits,o=i.tab,s=i.mouse,r=i.scroll,a=i.total,l=["Element Visibility Status","━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Visible in Viewport: ".concat(t),"Not in Viewport: ".concat(n-t),"Total Registered Elements: ".concat(n),"","Note: Only elements visible in the viewport","are actively tracked by intersection observers."];this.minimizedElementCount&&(this.minimizedElementCount.textContent="".concat(t,"/").concat(n),this.minimizedElementCount.title=l.join("\n")),this.elementCountSpan.textContent="Visible: ".concat(t,"/").concat(n," ~ "),this.elementCountSpan.title=l.join("\n"),this.callbackCountSpan.textContent="Mouse: ".concat(s.hover+s.trajectory," Tab: ").concat(o.forwards+o.reverse," Scroll: ").concat(r.down+r.left+r.right+r.up),this.callbackCountSpan.title=["Callback Execution Stats","━━━━━━━━━━━━━━━━━━━━━━━━","Mouse Callbacks","   • Trajectory: ".concat(s.trajectory),"   • Hover: ".concat(s.hover),"   • Subtotal: ".concat(s.hover+s.trajectory),"","Keyboard Callbacks:","   • Tab Forward: ".concat(o.forwards),"   • Tab Reverse: ".concat(o.reverse),"   • Subtotal: ".concat(o.forwards+o.reverse),"","Scroll Callbacks:","   • Up: ".concat(r.up," | Down: ").concat(r.down),"   • Left: ".concat(r.left," | Right: ").concat(r.right),"   • Subtotal: ".concat(r.up+r.down+r.left+r.right),"","Total Callbacks: "+a].join("\n")}},e.prototype.removeElementFromList=function(e){if(this.elementListItemsContainer){var t=this.elementListItems.get(e.element);if(t){t.remove(),this.elementListItems.delete(e.element);var n=this.foresightManagerInstance.registeredElements;this.refreshRegisteredElementCountDisplay(n),0===this.elementListItems.size&&(this.elementListItemsContainer.innerHTML=g)}}},e.prototype.updateElementVisibilityStatus=function(e){if(this.elementListItemsContainer){var t=this.elementListItems.get(e.element);if(t){t.classList.toggle("not-in-viewport",!e.isIntersectingWithViewport);var n=t.querySelector(".intersecting-indicator");if(n){var i=a(e.isIntersectingWithViewport);n.textContent=i}this.refreshRegisteredElementCountDisplay(this.foresightManagerInstance.registeredElements),this.sortAndReorderElements()}else this.addElementToList(e)}},e.prototype.sortAndReorderElements=function(){var e,t=this;if(this.elementListItemsContainer){var n=null!==(e=this.debuggerInstance.getDebuggerData.settings.sortElementList)&&void 0!==e?e:"visibility",i=Array.from(this.foresightManagerInstance.registeredElements.values());if("insertionOrder"!==n){var o=function(e,t){var n=e.element.compareDocumentPosition(t.element);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0};"visibility"===n?i.sort(function(e,t){return e.isIntersectingWithViewport!==t.isIntersectingWithViewport?e.isIntersectingWithViewport?-1:1:o(e,t)}):"documentOrder"===n&&i.sort(o)}var s=document.createDocumentFragment();i.length&&(i.forEach(function(e){var n=t.elementListItems.get(e.element);n&&s.appendChild(n)}),this.elementListItemsContainer.innerHTML="",this.elementListItemsContainer.appendChild(s))}},e.prototype.addElementToList=function(e,t){if(void 0===t&&(t=!0),this.elementListItemsContainer&&(this.elementListItemsContainer.innerHTML===g&&(this.elementListItemsContainer.innerHTML=""),!this.elementListItems.has(e.element))){var n=document.createElement("div");n.className="element-list-item",this.updateListItemContent(n,e),this.elementListItemsContainer.appendChild(n),this.elementListItems.set(e.element,n),this.refreshRegisteredElementCountDisplay(this.foresightManagerInstance.registeredElements),t&&this.sortAndReorderElements()}},e.prototype.updateListItemContent=function(e,t){var n=a(t.isIntersectingWithViewport);e.classList.toggle("not-in-viewport",!t.isIntersectingWithViewport);var i="N/A";if(t.elementBounds.hitSlop){var o=t.elementBounds.hitSlop,s=o.top,r=o.right,l=o.bottom,c=o.left;i="T:".concat(s," R:").concat(r," B:").concat(l," L:").concat(c)}var d=["".concat(t.name||"Unnamed Element"),"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Viewport Status:",t.isIntersectingWithViewport?"   ✓ In viewport - actively tracked by observers":"   ✗ Not in viewport - not being tracked","","Hit Slop:",t.elementBounds.hitSlop?["     Top: ".concat(t.elementBounds.hitSlop.top,"px, Bottom: ").concat(t.elementBounds.hitSlop.bottom,"px "),"     Right: ".concat(t.elementBounds.hitSlop.right,"px, Left: ").concat(t.elementBounds.hitSlop.left,"px")].join("\n"):"   • Not defined - using element's natural boundaries",""].join("\n");e.title=d,e.innerHTML='\n    <span class="intersecting-indicator">'.concat(n,'</span>\n    <span class="element-name">').concat(t.name||"Unnamed Element",'</span>\n    <span class="hit-slop">').concat(i,"</span>\n  ")},e.prototype.cleanup=function(){var e,t;null===(e=this.controlsContainer)||void 0===e||e.remove(),null===(t=this.controlPanelStyleElement)||void 0===t||t.remove(),this.copyTimeoutId&&(clearTimeout(this.copyTimeoutId),this.copyTimeoutId=null),this.closeSortDropdownHandler&&(document.removeEventListener("click",this.closeSortDropdownHandler),this.closeSortDropdownHandler=null),this.controlsContainer=null,this.controlPanelStyleElement=null,this.elementListItemsContainer=null,this.elementCountSpan=null,this.callbackCountSpan=null,this.elementListItems.clear(),this.containerMinimizeButton=null,this.allSettingsSectionsContainer=null,this.debuggerElementsSection=null,this.trajectoryEnabledCheckbox=null,this.tabEnabledCheckbox=null,this.scrollEnabledCheckbox=null,this.historySizeSlider=null,this.historyValueSpan=null,this.predictionTimeSlider=null,this.predictionValueSpan=null,this.tabOffsetSlider=null,this.tabOffsetValueSpan=null,this.scrollMarginSlider=null,this.scrollMarginValueSpan=null,this.showNameTagsCheckbox=null,this.sortOptionsPopup=null,this.sortButton=null,this.copySettingsButton=null},e.prototype.createControlContainer=function(){var e=document.createElement("div");return e.id="debug-controls",e.innerHTML='\n      <div class="debugger-title-container">\n        <button class="minimize-button">-</button>\n        <div class="title-group">\n          <h2>Foresight Debugger</h2>\n         <span class="info-icon" title="'.concat(["Foresight Debugger Information","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Session-Only Changes:","All adjustments made here apply only to the","current browser session and won't persist.","","Permanent Configuration:","To make lasting changes, update the initial","values in your ForesightManager.initialize().","","You can copy the current debugger settings","with the button on the right"].join("\n"),'">i</span>\n        </div>\n           <button class="copy-settings-button" title="').concat(["Copy Settings to Clipboard","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Copies the current configuration as a","formatted method call that you can paste","directly into your code."].join("\n"),'">\n          ').concat(h,'\n        </button>\n        <span class="minimized-element-count">\n        </span>\n      </div>\n\n      <div class="all-settings-sections-container">\n        <div class="debugger-section mouse-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>Mouse Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n          <div class="debugger-section-content mouse-settings-content">\n            <div class="control-row">\n             <label for="trajectory-enabled">\n                Enable Mouse Prediction\n                <span class="info-icon" title="').concat(["Mouse Prediction Control","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","When enabled: Predicts mouse movement","trajectory and triggers callbacks before","the cursor reaches the target element.","","When disabled: Only direct hover events","trigger actions (next to tab/scroll).","","Property: enableMousePrediction"].join("\n"),'">i</span>\n              </label>\n              <input type="checkbox" id="trajectory-enabled">\n            </div>\n            <div class="control-row">\n             <label for="history-size">\n                History Size\n                <span class="info-icon" title="').concat(["Position History","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Controls how many past mouse positions","are stored for velocity calculations.","","Higher values:","   • More accurate trajectory predictions","   • Smoother movement detection","   • Slightly increased processing overhead","","Lower values:","   • Faster response to direction changes","   • Less memory usage","   • May be less accurate for fast movements","","Property: positionHistorySize"].join("\n"),'">i</span>\n              </label>\n              <input type="range" id="history-size" min="').concat(2,'" max="').concat(30,'">\n              <span id="history-value"></span>\n            </div>\n            <div class="control-row">\n            <label for="prediction-time">\n                Prediction Time\n                <span class="info-icon" title="').concat(["Trajectory Prediction Time","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","How far into the future (in ".concat(d,")"),"to calculate the mouse trajectory path.","","Larger values:","   • Elements are detected sooner","   • More time for preloading/preparation","   • May trigger false positives for curved paths","","Smaller values:","   • More precise targeting","   • Reduced false positive rate","   • Less time for preparation","","Property: trajectoryPredictionTime"].join("\n"),'">i</span>\n              </label>\n              <input type="range" id="prediction-time" min="').concat(10,'" max="').concat(200,'" step="10">\n              <span id="prediction-value"></span>\n            </div>\n          </div>\n        </div>\n\n        <div class="debugger-section keyboard-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>Keyboard Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n          <div class="debugger-section-content keyboard-settings-content">\n            <div class="control-row">\n             <label for="tab-enabled">\n                Enable Tab Prediction\n                <span class="info-icon" title="').concat(["Tab Navigation Prediction","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","When enabled: Callbacks are executed when","the user is ".concat(this.foresightManagerInstance.getManagerData.globalSettings.tabOffset," (tabOffset) ").concat(c," away from"),"a registered element during tab navigation.","","(works with Shift+Tab too).","","Property: enableTabPrediction"].join("\n"),'">i</span>\n              </label>\n              <input type="checkbox" id="tab-enabled">\n            </div>\n            <div class="control-row">\n               <label for="tab-offset">\n                Tab Offset\n                <span class="info-icon" title="').concat(["Tab Offset","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Number of tabbable elements to look ahead","when predicting tab navigation targets.","","How it works:","   • Tracks the current focused element","   • Looks ahead by the specified offset","   • Triggers callbacks for registered elements","     within that range","","Property: tabOffset"].join("\n"),'">i</span>\n              </label>\n              <input type="range" id="tab-offset" min="').concat(0,'" max="').concat(20,'" step="1">\n              <span id="tab-offset-value"></span>\n            </div>\n          </div>\n        </div>\n\n        <div class="debugger-section scroll-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>Scroll Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n        <div class="debugger-section-content scroll-settings-content">\n          <div class="control-row">\n          <label for="scroll-enabled">\n              Enable Scroll Prediction\n              <span class="info-icon" title="').concat(["Scroll Prediction","━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Enables predictive scrolling based on mouse","position and scroll direction.","","When enabled, calculates scroll direction from","mouse movement and triggers callbacks for","elements that intersect the predicted path.","","Property: enableScrollPrediction"].join("\n"),'">i</span>\n            </label>\n            <input type="checkbox" id="scroll-enabled">\n          </div>\n          <div class="control-row">\n            <label for="scroll-margin">\n              Scroll Margin\n              <span class="info-icon" title="').concat(["Scroll Margin","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sets the pixel distance to check from the","mouse position in the scroll direction.","","Higher values check further ahead, allowing","earlier detection of elements that will come","into view during scrolling.","","Property: scrollMargin"].join("\n"),'">i</span>\n            </label>\n            <input type="range" id="scroll-margin" min="').concat(30,'" max="').concat(300,'" step="10">\n            <span id="scroll-margin-value"></span>\n          </div>\n        </div>\n\n        <div class="debugger-section general-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>General Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n          <div class="debugger-section-content general-settings-content">\n           <div class="control-row">\n              <label for="toggle-name-tags">\n                Show Name Tags\n                <span class="info-icon" title="').concat(["Visual Debug Name Tags","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","When enabled: Displays name tags over","each registered element in debug mode.","","Property: debuggerSettings.showNameTags"].join("\n"),'">i</span>\n              </label>\n              <input type="checkbox" id="toggle-name-tags">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class="debugger-section debugger-elements">\n        <div class="debugger-section-header elements-list-header">\n          <h3>Elements <span id="element-count"></span> <span id="callback-count"></span></h3>\n          <div class="header-controls">\n            <div class="sort-control-container">\n              <button class="sort-button" title="Change element list sort order">\n                ').concat('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>','\n              </button>\n              <div id="sort-options-popup">\n              <button\n                data-sort="visibility"\n                title="').concat(["Sort by Visibility","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sorts elements by their viewport visibility","(visible elements first), with a secondary","sort by their order in the document.","","Property: debuggerSettings.sortElementList","Value: 'visibility'"].join("\n"),'">\n                  Visibility\n                </button>\n                <button\n                  data-sort="documentOrder"\n                  title="').concat(["Sort by Document Order","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sorts elements based on their order of","appearance in the document's structure","(matching the HTML source).","","Property: debuggerSettings.sortElementList","Value: 'documentOrder'"].join("\n"),'"\n                >\n                  Document Order\n                </button>\n                <button\n                  data-sort="insertionOrder"\n                  title="').concat(["Sort by Insertion Order","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sorts elements based on the order they","were registered with the ForesightManager.","","Property: debuggerSettings.sortElementList","Value: 'insertionOrder'"].join("\n"),'"\n                >\n                  Insertion Order\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="debugger-section-content element-list">\n          <div id="element-list-items-container">\n          </div>\n        </div>\n      </div>\n    '),e},e.prototype.getStyles=function(){return'\n      #debug-controls {\n        position: fixed; bottom: 10px; right: 10px;\n        background-color: rgba(0, 0, 0, 0.90); color: white; padding: 12px;\n        border-radius: 5px; font-family: Arial, sans-serif; font-size: 13px;\n        z-index: 10001; pointer-events: auto; display: flex; flex-direction: column; gap: 8px;\n        width: 400px;\n        transition: width 0.3s ease, height 0.3s ease;\n      }\n      #debug-controls.minimized {\n        width: 250px;\n        overflow: hidden;\n        padding: 12px 0; \n      }\n      #debug-controls.minimized .debugger-title-container {\n        padding-left: 10px; \n        padding-right: 10px;\n        gap: 10px; \n      }\n      #debug-controls.minimized .debugger-title-container h2 {\n        display: inline;\n        font-size: 14px;\n        margin: 0;\n        white-space: nowrap;\n      }\n      #debug-controls.minimized .info-icon {\n        display: none;\n      }\n\n      #element-count,#callback-count {\n        font-size: 12px;\n        color: #9e9e9e;\n      }\n\n      .debugger-title-container {\n        display: flex;\n        align-items: center;\n        justify-content: space-between; \n        padding: 0 0px; \n      }\n      .title-group { \n        display: flex;\n        align-items: center;\n        gap: 8px; \n\n      }\n      .minimize-button {\n        background: none; border: none; color: white;\n        font-size: 22px; cursor: pointer;\n        line-height: 1;\n        padding-inline: 0px;\n      }\n      .debugger-title-container h2 { margin: 0; font-size: 15px; }\n\n      .copy-settings-button {\n        background: none; border: none; color: white;\n        cursor: pointer; padding: 0;\n        display: flex; align-items: center; justify-content: center;\n      }\n\n      .copy-settings-button svg {\n        width: 16px; height: 16px;\n        stroke: white;\n      }\n\n      .minimized-element-count {\n         font-size: 14px;\n         min-width: 30px;\n         text-align: right;\n      }\n\n      .all-settings-sections-container {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      .debugger-section-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-top: 5px;\n        margin-bottom: 2px;\n        padding-bottom: 2px;\n        border-bottom: 1px solid #444;\n      }\n      .debugger-section-header.collapsible {\n        cursor: pointer;\n      }\n      .debugger-section-header h3 {\n         margin: 0;\n         font-size: 14px;\n         font-weight: bold;\n         color: #b0c4de;\n         flex-grow: 1;\n      }\n\n      .section-minimize-button {\n        background: none;\n        border: none;\n        color: white;\n        font-size: 18px;\n        cursor: pointer;\n        padding: 0px;\n        line-height: 1;\n      }\n\n      #debug-controls .control-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n      }\n      #debug-controls label {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        cursor: pointer;\n      }\n      #debug-controls .control-row:has(input[type="checkbox"]) label {\n        flex-grow: 1;\n      }\n      #debug-controls .control-row input[type="checkbox"] {\n        appearance: none; -webkit-appearance: none; -moz-appearance: none;\n        position: relative; width: 40px; height: 18px;\n        background-color: #555; border-radius: 10px; cursor: pointer;\n        outline: none; transition: background-color 0.2s ease;\n        vertical-align: middle; flex-shrink: 0; margin: 0;\n      }\n      #debug-controls .control-row input[type="checkbox"]::before {\n        content: ""; position: absolute; width: 14px; height: 14px;\n        border-radius: 50%; background-color: white; top: 2px; left: 2px;\n        transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.4);\n      }\n      #debug-controls .control-row input[type="checkbox"]:checked {\n        background-color: #b0c4de;\n      }\n      #debug-controls .control-row input[type="checkbox"]:checked::before {\n        transform: translateX(22px);\n      }\n      #debug-controls .control-row:has(input[type="range"]) label {\n        flex-basis: 170px; flex-shrink: 0;\n      }\n      #debug-controls input[type="range"] {\n        flex-grow: 1; margin: 0; cursor: pointer; -webkit-appearance: none;\n        appearance: none; background: transparent; height: 18px; vertical-align: middle;\n      }\n      #debug-controls input[type="range"]::-webkit-slider-runnable-track {\n        height: 6px; background: #555; border-radius: 3px;\n      }\n      #debug-controls input[type="range"]::-moz-range-track {\n        height: 6px; background: #555; border-radius: 3px;\n      }\n      #debug-controls input[type="range"]::-webkit-slider-thumb {\n        -webkit-appearance: none; appearance: none; margin-top: -5px;\n        background: #b0c4de; height: 16px; width: 16px;\n        border-radius: 50%; border: 1px solid #333;\n      }\n      #debug-controls input[type="range"]::-moz-range-thumb {\n        background: #b0c4de; height: 16px; width: 16px;\n        border-radius: 50%; border: 1px solid #333; border: none;\n      }\n      #debug-controls .control-row:has(input[type="range"]) span:not(.info-icon) {\n        width: 55px; min-width: 55px; text-align: right; flex-shrink: 0;\n      }\n      .info-icon {\n        display: inline-flex; align-items: center; justify-content: center;\n        width: 16px; height: 16px; border-radius: 50%;\n        background-color: #555; color: white; font-size: 10px;\n        font-style: italic; font-weight: bold; font-family: \'Georgia\', serif;\n        cursor: help; user-select: none; flex-shrink: 0;\n      }\n      .debugger-section {\n        display: flex; flex-direction: column; gap: 6px;\n      }\n      .debugger-section-content {\n        display: none; flex-direction: column; gap: 8px;\n      }\n\n      /* Element List Styles */\n      .elements-list-header { cursor: default; }\n      .header-controls {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n      .sort-control-container {\n        position: relative;\n      }\n      .sort-button {\n        background: none; border: none; color: white; cursor: pointer;\n        padding: 0; display: flex; align-items: center; justify-content: center;\n      }\n      .sort-button svg {\n        width: 16px; height: 16px; stroke: #b0c4de; transition: stroke 0.2s;\n      }\n      .sort-button:hover svg { stroke: white; }\n      \n      #sort-options-popup {\n        position: absolute;\n        bottom: calc(100% + 5px);\n        right: -5px;\n        z-index: 10;\n        display: none;\n        flex-direction: column;\n        gap: 4px;\n        background-color: #3a3a3a;\n        border: 1px solid #555;\n        border-radius: 4px;\n        padding: 3px;\n        width: 200px;\n        box-shadow: 0 4px 8px rgba(0,0,0,0.3);\n      }\n      #sort-options-popup.active {\n        display: flex;\n      }\n      #sort-options-popup button {\n        background: none; border: none; color: #ccc;\n        font-size: 12px; text-align: left; padding: 5px 8px;\n        cursor: pointer; border-radius: 3px;\n        transition: background-color 0.2s, color 0.2s;\n        display: flex;\n        align-items: center;\n        height: 26px;\n      }\n      #sort-options-popup button:hover {\n        background-color: #555;\n        color: white;\n      }\n      #sort-options-popup button.active-sort-option {\n        color: #b0c4de;\n        font-weight: bold;\n      }\n      #sort-options-popup button.active-sort-option::before {\n        content: \'✓\';\n        margin-right: 6px;\n        width: 10px;\n      }\n      #sort-options-popup button::before {\n        content: \'\';\n        margin-right: 6px;\n        width: 10px;\n      }\n\n      .element-list { /* Scroll container */\n        min-height: '.concat(237,"px;\n        max-height: ").concat(237,"px; \n        overflow-y: auto;\n        background-color: rgba(20, 20, 20, 0.5);\n        border-radius: 3px;\n        padding: 0;\n        display: flex;\n      }\n\n      /* Modern Scrollbar Styling */\n      .element-list::-webkit-scrollbar { width: 8px; }\n      .element-list::-webkit-scrollbar-track { background: rgba(30, 30, 30, 0.5); border-radius: 4px; }\n      .element-list::-webkit-scrollbar-thumb { background-color: rgba(176, 196, 222, 0.5); border-radius: 4px; border: 2px solid rgba(0, 0, 0, 0.2); }\n      .element-list::-webkit-scrollbar-thumb:hover { background-color: rgba(176, 196, 222, 0.7); }\n      .element-list { scrollbar-width: thin; scrollbar-color: rgba(176, 196, 222, 0.5) rgba(30, 30, 30, 0.5); }\n\n      #element-list-items-container { \n        display: flex;\n        flex-wrap: wrap;\n        gap: ").concat(3,"px;\n        padding: ").concat(6,"px;\n        min-height: ").concat(225,"px;\n        box-sizing: border-box;\n        align-content: flex-start;\n      }\n      #element-list-items-container > em {\n        flex-basis: 100%;\n        text-align: center;\n        padding: 10px 0;\n        font-style: italic;\n        color: #ccc;\n        font-size: 12px;\n      }\n      .element-list-item {\n        flex-basis: calc((100% - (").concat(0," * ").concat(3,"px)) / ").concat(1,");\n        flex-grow: 0;\n        flex-shrink: 0;\n        height: ").concat(35,"px;\n        box-sizing: border-box;\n        padding: 3px 5px;\n        border-radius: 2px;\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        background-color: rgba(50,50,50,0.7);\n        transition: background-color 0.2s ease, opacity 0.2s ease;\n        font-size: 11px; \n        overflow: hidden;\n      }\n      \n      /* Viewport intersection styling */\n      .element-list-item.not-in-viewport { opacity: 0.4; }\n      \n      .element-list-item .element-name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: 12px; \n        font-weight: bold;\n      }\n      .element-list-item .intersecting-indicator {\n        font-size: 12px;\n        flex-shrink: 0;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 16px;\n        height: 16px;\n      }\n      .element-list-item .hit-behavior,\n      .element-list-item .hit-slop {\n        font-size: 10px; \n        color: #b0b0b0;\n        padding: 2px 5px; \n        border-radius: 3px; \n        background-color: rgba(0,0,0,0.2);\n        flex-shrink: 0;\n      }\n    ")},e}();function p(e,t,n){var i=e.expandedOverlay,o=e.nameLabel,s=t.elementBounds.expandedRect,r=s.right-s.left,a=s.bottom-s.top;i.style.width="".concat(r,"px"),i.style.height="".concat(a,"px"),i.style.transform="translate3d(".concat(s.left,"px, ").concat(s.top,"px, 0)"),i.style.display="block",o.textContent=t.name,""!==t.name&&n?(o.style.display="block",o.style.transform="translate3d(".concat(s.left,"px, ").concat(s.top-25,"px, 0)")):o.style.display="none"}var b=!0;function m(e,t){return void 0!==e&&e!==t}var y=function(){function e(e){var t=this;this.callbackAnimations=new Map,this._debuggerSettings={showDebugger:true,isControlPanelDefaultMinimized:false,showNameTags:b,sortElementList:"visibility"},this.debugElementOverlays=new Map,this.predictedMouseIndicator=null,this.mouseTrajectoryLine=null,this.scrollTrajectoryLine=null,this.managerSubscriptionsController=null,this.animationPositionObserver=null,this.handleAnimationPositionChange=function(e){for(var n=0,i=e;n<i.length;n++){var o=i[n],s=t.callbackAnimations.get(o.target);if(s){var r=o.boundingClientRect,a=s.hitSlop,l=s.overlay,c=r.left-a.left,d=r.top-a.top,h=r.width+a.left+a.right,g=r.height+a.top+a.bottom;l.style.transform="translate3d(".concat(c,"px, ").concat(d,"px, 0)"),l.style.width="".concat(h,"px"),l.style.height="".concat(g,"px")}}},this.handleElementDataUpdated=function(e){var n;switch(e.updatedProp){case"bounds":t.createOrUpdateElementOverlay(e.elementData);break;case"visibility":e.elementData.isIntersectingWithViewport||t.removeElementOverlay(e.elementData),null===(n=t.controlPanel)||void 0===n||n.updateElementVisibilityStatus(e.elementData)}},this.handleRemoveElement=function(e){var n;null===(n=t.controlPanel)||void 0===n||n.removeElementFromList(e.elementData),t.removeElementOverlay(e.elementData)},this.handleCallbackFired=function(e){t.showCallbackAnimation(e.elementData)},this.handleAddElement=function(e){t.createOrUpdateElementOverlay(e.elementData),t.controlPanel.addElementToList(e.elementData,e.sort)},this.handleMouseTrajectoryUpdate=function(e){if(t.shadowRoot&&t.debugContainer&&t.predictedMouseIndicator&&t.mouseTrajectoryLine){t.scrollTrajectoryLine&&(t.scrollTrajectoryLine.style.display="none");var n=e.trajectoryPositions,i=n.predictedPoint,o=n.currentPoint;if(t.predictedMouseIndicator.style.transform="translate3d(".concat(i.x,"px, ").concat(i.y,"px, 0) translate3d(-50%, -50%, 0)"),t.predictedMouseIndicator.style.display=e.predictionEnabled?"block":"none",0!==i.x||0!==i.y)if(e.predictionEnabled){var s=i.x-o.x,r=i.y-o.y,a=Math.sqrt(s*s+r*r),l=180*Math.atan2(r,s)/Math.PI;t.mouseTrajectoryLine.style.transform="translate3d(".concat(o.x,"px, ").concat(o.y,"px, 0) rotate(").concat(l,"deg)"),t.mouseTrajectoryLine.style.width="".concat(a,"px"),t.mouseTrajectoryLine.style.display="block"}else t.mouseTrajectoryLine.style.display="none";else t.predictedMouseIndicator.style.display="none"}},this.handleScrollTrajectoryUpdate=function(e){if(t.scrollTrajectoryLine){var n=e.predictedPoint.x-e.currentPoint.x,i=e.predictedPoint.y-e.currentPoint.y,o=Math.sqrt(n*n+i*i),s=180*Math.atan2(i,n)/Math.PI;t.scrollTrajectoryLine.style.transform="translate3d(".concat(e.currentPoint.x,"px, ").concat(e.currentPoint.y,"px, 0) rotate(").concat(s,"deg)"),t.scrollTrajectoryLine.style.width="".concat(o,"px"),t.scrollTrajectoryLine.style.display="block"}},this.handleSettingsChanged=function(e){var n;null===(n=t.controlPanel)||void 0===n||n.updateControlsState(e.newSettings,t._debuggerSettings)},this.foresightManagerInstance=e}return Object.defineProperty(e.prototype,"getDebuggerData",{get:function(){return{settings:this._debuggerSettings}},enumerable:!1,configurable:!0}),e.initialize=function(t,n){if("undefined"==typeof window||"undefined"==typeof window||"ontouchstart"in window)return null;e.isInitiated||(e.debuggerInstance=new e(t));var i=e.debuggerInstance;return i.subscribeToManagerEvents(),i.alterDebuggerSettings(n),i.shadowHost||i._setupDOM(),i},Object.defineProperty(e,"instance",{get:function(){if(!e.debuggerInstance)throw new Error("ForesightDebugger has not been initialized. Call ForesightDebugger.initialize() first.");return e.debuggerInstance},enumerable:!1,configurable:!0}),e.prototype._setupDOM=function(){this.shadowHost||(this.shadowHost=s("div",document.body,{id:"jsforesight-debugger-shadow-host"}),this.shadowRoot=this.shadowHost.attachShadow({mode:"open"}),this.debugContainer=s("div",this.shadowRoot,{id:"jsforesight-debug-container"}),this.predictedMouseIndicator=s("div",this.debugContainer,{className:"jsforesight-mouse-predicted"}),this.mouseTrajectoryLine=s("div",this.debugContainer,{className:"jsforesight-trajectory-line"}),this.scrollTrajectoryLine=s("div",this.debugContainer,{className:"jsforesight-scroll-trajectory-line"}),this.controlPanel=u.initialize(this.foresightManagerInstance,e.debuggerInstance,this.shadowRoot,this._debuggerSettings),r(f,this.shadowRoot,"screen-visuals"),this.animationPositionObserver=new i(this.handleAnimationPositionChange))},Object.defineProperty(e,"isInitiated",{get:function(){return!!e.debuggerInstance},enumerable:!1,configurable:!0}),e.prototype.alterDebuggerSettings=function(t){m(null==t?void 0:t.showNameTags,this._debuggerSettings.showNameTags)&&(this._debuggerSettings.showNameTags=t.showNameTags,this.toggleNameTagVisibility()),m(null==t?void 0:t.isControlPanelDefaultMinimized,this._debuggerSettings.isControlPanelDefaultMinimized)&&(this._debuggerSettings.isControlPanelDefaultMinimized=t.isControlPanelDefaultMinimized),m(null==t?void 0:t.sortElementList,this._debuggerSettings.sortElementList)&&(this._debuggerSettings.sortElementList=t.sortElementList),m(null==t?void 0:t.showDebugger,this._debuggerSettings.showDebugger)&&(this._debuggerSettings.showDebugger=t.showDebugger,this._debuggerSettings.showDebugger?e.initialize(this.foresightManagerInstance):this.cleanup())},e.prototype.subscribeToManagerEvents=function(){this.managerSubscriptionsController=new AbortController;var e=this.managerSubscriptionsController.signal,t=this.foresightManagerInstance;t.addEventListener("elementRegistered",this.handleAddElement,{signal:e}),t.addEventListener("elementUnregistered",this.handleRemoveElement,{signal:e}),t.addEventListener("elementDataUpdated",this.handleElementDataUpdated,{signal:e}),t.addEventListener("mouseTrajectoryUpdate",this.handleMouseTrajectoryUpdate,{signal:e}),t.addEventListener("scrollTrajectoryUpdate",this.handleScrollTrajectoryUpdate,{signal:e}),t.addEventListener("managerSettingsChanged",this.handleSettingsChanged,{signal:e}),t.addEventListener("callbackFired",this.handleCallbackFired,{signal:e})},e.prototype.createElementOverlays=function(e){var t={expandedOverlay:s("div",this.debugContainer,{className:"jsforesight-expanded-overlay",data:e.name}),nameLabel:s("div",this.debugContainer,{className:"jsforesight-name-label"})};return this.debugElementOverlays.set(e.element,t),t},e.prototype.createOrUpdateElementOverlay=function(e){var t;if(this.debugContainer&&this.shadowRoot){var n=this.debugElementOverlays.get(e.element);n||(n=this.createElementOverlays(e)),p(n,e,null!==(t=this._debuggerSettings.showNameTags)&&void 0!==t?t:b)}},e.prototype.toggleNameTagVisibility=function(){var e=this;this.foresightManagerInstance.registeredElements.forEach(function(t){var n,i=e.debugElementOverlays.get(t.element);i&&p(i,t,null!==(n=e._debuggerSettings.showNameTags)&&void 0!==n?n:b)})},e.prototype.removeElementOverlay=function(e){var t=this.debugElementOverlays.get(e.element);t&&(t.expandedOverlay.remove(),t.nameLabel.remove(),this.debugElementOverlays.delete(e.element))},e.prototype.showCallbackAnimation=function(e){var t,n,i=this,o=e.element,r=e.elementBounds,a=this.callbackAnimations.get(o);a&&(clearTimeout(a.timeoutId),a.overlay.remove(),null===(t=this.animationPositionObserver)||void 0===t||t.unobserve(o),this.callbackAnimations.delete(o));var l=s("div",this.debugContainer,{className:"jsforesight-callback-indicator"}),c=r.expandedRect,d=c.left,h=c.top,g=c.right-d,u=c.bottom-h;l.style.display="block",l.style.transform="translate3d(".concat(d,"px, ").concat(h,"px, 0)"),l.style.width="".concat(g,"px"),l.style.height="".concat(u,"px"),l.classList.add("animate");var p=setTimeout(function(){var e;l.remove(),i.callbackAnimations.delete(o),null===(e=i.animationPositionObserver)||void 0===e||e.unobserve(o)},500);this.callbackAnimations.set(o,{hitSlop:e.elementBounds.hitSlop,overlay:l,timeoutId:p}),null===(n=this.animationPositionObserver)||void 0===n||n.observe(o)},e.prototype.cleanup=function(){var e,t,n;null===(e=this.managerSubscriptionsController)||void 0===e||e.abort(),null===(t=this.controlPanel)||void 0===t||t.cleanup(),null===(n=this.shadowHost)||void 0===n||n.remove(),this.debugElementOverlays.clear(),this.shadowHost=null,this.shadowRoot=null,this.debugContainer=null,this.predictedMouseIndicator=null,this.mouseTrajectoryLine=null,this.scrollTrajectoryLine=null,this.controlPanel=null},e}(),f='\n      #jsforesight-debug-container { \n        position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n        pointer-events: none; z-index: 9999;\n      }\n\n      .jsforesight-expanded-overlay, \n      .jsforesight-name-label, \n      .jsforesight-callback-indicator,\n      .jsforesight-mouse-predicted,\n      .jsforesight-scroll-trajectory-line,\n      .jsforesight-trajectory-line {\n        position: absolute;\n        top: 0;\n        left: 0;\n        will-change: transform; \n      }\n      .jsforesight-trajectory-line{\n        display: none;\n      }\n      .jsforesight-expanded-overlay {\n        border: 1px dashed rgba(100, 116, 139, 0.4);\n        background-color: rgba(100, 116, 139, 0.05);\n        box-sizing: border-box;\n        border-radius: 8px;\n      }\n      .jsforesight-mouse-predicted {\n        display: none !important;\n        /* transform is now set dynamically via JS for performance */\n      }\n      .jsforesight-trajectory-line {\n        height: 4px;\n        background: linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.4));\n        transform-origin: left center;\n        z-index: 9999;\n        border-radius: 2px;\n        box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);\n        position: relative;\n        /* width and transform are set dynamically via JS for performance */\n      }\n      .jsforesight-trajectory-line::after {\n        content: \'\';\n        position: absolute;\n        right: -6px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 0;\n        height: 0;\n        border-left: 8px solid #3b82f6;\n        border-top: 4px solid transparent;\n        border-bottom: 4px solid transparent;\n        filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));\n      }\n      .jsforesight-name-label {\n        background-color: rgba(27, 31, 35, 0.85);\n        backdrop-filter: blur(4px);\n        color: white;\n        padding: 4px 8px;\n        font-size: 11px;\n        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";\n        border-radius: 4px;\n        z-index: 10001;\n        white-space: nowrap;\n        pointer-events: none;\n      }\n      .jsforesight-callback-indicator {\n        border: 4px solid oklch(65% 0.22 280); \n        border-radius: 8px;\n        box-sizing: border-box;\n        pointer-events: none;\n        opacity: 0;\n        z-index: 10002;\n        display: none; \n      }\n      .jsforesight-callback-indicator.animate {\n        animation: jsforesight-callback-pulse 0.5s ease-out forwards;\n      }\n        \n      .jsforesight-scroll-trajectory-line {\n      height: 4px;\n      background: repeating-linear-gradient(\n        90deg,\n        #22c55e 0px,\n        #22c55e 8px,\n        transparent 8px,\n        transparent 16px\n      );\n      transform-origin: left center;\n      z-index: 9999;\n      border-radius: 2px;\n      display: none;\n      animation: scroll-dash-flow 1.5s linear infinite;\n      position: relative;\n      box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);\n      }\n\n      .jsforesight-scroll-trajectory-line::after {\n      content: \'\';\n      position: absolute;\n      right: -6px;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 0;\n      height: 0;\n      border-left: 8px solid #22c55e;\n      border-top: 4px solid transparent;\n      border-bottom: 4px solid transparent;\n      filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));\n      animation: scroll-arrow-pulse 1.5s ease-in-out infinite;\n      }\n\n      @keyframes scroll-dash-flow {\n      0% { background-position: 0px 0px; }\n      100% { background-position: 16px 0px; }\n      }\n\n      @keyframes scroll-arrow-pulse {\n      0%, 100% { \n        transform: translateY(-50%) scale(1);\n        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));\n      }\n      50% {\n        transform: translateY(-50%) scale(1.2);\n        filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.8));\n      }\n      }\n\n\n  \n      @keyframes jsforesight-callback-pulse {\n        0% {\n          opacity: 1;\n          box-shadow: 0 0 15px oklch(65% 0.22 280 / 0.7);\n        }\n        100% {\n          opacity: 0;\n          box-shadow: 0 0 25px oklch(65% 0.22 280 / 0);\n        }\n      }\n    ';exports.DebuggerControlPanel=u,exports.ForesightDebugger=y;
+if(!r.isIntersecting){if(1===this._cm)return;if(2===this._cm)return void(o&&(this.entries.set(n,r),i.push(r)))}const{left:a,top:l}=r.boundingClientRect;
+/* istanbul ignore else @preserve - only schedule entries that changed position */s.top===l&&s.left===a&&this._w===e&&this._h===t||(this.entries.set(n,r),i.push(r))})}),this._w=e,this._h=t,n(i)});this._t=requestAnimationFrame(async()=>{const e=await n;
+/* istanbul ignore else @preserve */e.length&&this._c(e,this),this._rc()})};_n=e=>new Promise(t=>{new IntersectionObserver(([e],n)=>{n.disconnect(),t(e)},{threshold:this._th,rootMargin:this._rm}).observe(e)});getEntry=e=>this.entries.get(e);disconnect=()=>{cancelAnimationFrame(this._t),this.entries.clear(),this._t=0}};const s=(e,t=2)=>{const n=" ".repeat(t);if("object"==typeof e&&null!==e&&!Array.isArray(e)){const i=Object.entries(e);if(0===i.length)return"{}";return`{\n${i.map(([e,i])=>`${n}  ${e}: ${s(i,t+2)}`).join(",\n")}\n${n}}`}return"string"==typeof e?`'${e}'`:"boolean"==typeof e||"number"==typeof e?String(e):null===e?"null":void 0===e?"undefined":Array.isArray(e)?JSON.stringify(e):String(e)};function o(e,t,n){const i=document.createElement(e);return n.id&&(i.id=n.id),n.className&&(i.className=n.className),n.data&&i.setAttribute("data-value",n.data),t.appendChild(i)}function r(e,t,n){const i=document.createElement("style");return i.textContent=e,i.id=n,t.appendChild(i)}const a=e=>e?"👁️":"🚫",l=!0,c="points",d="tabs",h="ms",g='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',p="<em>No elements registered.</em>";class u{constructor(e,t){this.elementListItemsContainer=null,this.elementCountSpan=null,this.callbackCountSpan=null,this.elementListItems=new Map,this.trajectoryEnabledCheckbox=null,this.tabEnabledCheckbox=null,this.scrollEnabledCheckbox=null,this.historySizeSlider=null,this.historyValueSpan=null,this.predictionTimeSlider=null,this.predictionValueSpan=null,this.tabOffsetSlider=null,this.tabOffsetValueSpan=null,this.scrollMarginSlider=null,this.scrollMarginValueSpan=null,this.showNameTagsCheckbox=null,this.sortOptionsPopup=null,this.sortButton=null,this.containerMinimizeButton=null,this.allSettingsSectionsContainer=null,this.debuggerElementsSection=null,this.isContainerMinimized=!1,this.isMouseSettingsMinimized=!0,this.isKeyboardSettingsMinimized=!0,this.isScrollSettingsMinimized=!0,this.isGeneralSettingsMinimized=!0,this.SESSION_STORAGE_KEY="jsforesightDebuggerSectionStates",this.copySettingsButton=null,this.minimizedElementCount=null,this.copyTimeoutId=null,this.closeSortDropdownHandler=null,this.foresightManagerInstance=e,this.debuggerInstance=t}static initialize(e,t,n,i){u.isInitiated||(u.debuggerControlPanelInstance=new u(e,t));const s=u.debuggerControlPanelInstance;return s._setupDOMAndListeners(n,i),s}_setupDOMAndListeners(e,t){this.controlsContainer||(this.shadowRoot=e,this.isContainerMinimized=t.isControlPanelDefaultMinimized,this.controlsContainer=this.createControlContainer(),this.shadowRoot.appendChild(this.controlsContainer),this.controlPanelStyleElement=r(this.getStyles(),this.shadowRoot,"debug-control-panel"),this.queryDOMElements(),this.originalSectionStates(),this.setupEventListeners(),this.updateContainerVisibilityState(),this.updateControlsState(this.foresightManagerInstance.getManagerData.globalSettings,t))}static get isInitiated(){return!!u.debuggerControlPanelInstance}loadSectionStatesFromSessionStorage(){const e=sessionStorage.getItem(this.SESSION_STORAGE_KEY);let t={};return e&&(t=JSON.parse(e)),this.isMouseSettingsMinimized=t.mouse??!0,this.isKeyboardSettingsMinimized=t.keyboard??!0,this.isScrollSettingsMinimized=t.scroll??!0,this.isGeneralSettingsMinimized=t.general??!0,t}saveSectionStatesToSessionStorage(){const e={mouse:this.isMouseSettingsMinimized,keyboard:this.isKeyboardSettingsMinimized,scroll:this.isScrollSettingsMinimized,general:this.isGeneralSettingsMinimized};try{sessionStorage.setItem(this.SESSION_STORAGE_KEY,JSON.stringify(e))}catch(e){console.error("Foresight Debugger: Could not save section states to session storage.",e)}}queryDOMElements(){this.trajectoryEnabledCheckbox=this.controlsContainer.querySelector("#trajectory-enabled"),this.tabEnabledCheckbox=this.controlsContainer.querySelector("#tab-enabled"),this.scrollEnabledCheckbox=this.controlsContainer.querySelector("#scroll-enabled"),this.historySizeSlider=this.controlsContainer.querySelector("#history-size"),this.historyValueSpan=this.controlsContainer.querySelector("#history-value"),this.predictionTimeSlider=this.controlsContainer.querySelector("#prediction-time"),this.predictionValueSpan=this.controlsContainer.querySelector("#prediction-value"),this.tabOffsetSlider=this.controlsContainer.querySelector("#tab-offset"),this.tabOffsetValueSpan=this.controlsContainer.querySelector("#tab-offset-value"),this.scrollMarginSlider=this.controlsContainer.querySelector("#scroll-margin"),this.scrollMarginValueSpan=this.controlsContainer.querySelector("#scroll-margin-value"),this.elementListItemsContainer=this.controlsContainer.querySelector("#element-list-items-container"),this.showNameTagsCheckbox=this.controlsContainer.querySelector("#toggle-name-tags"),this.sortOptionsPopup=this.controlsContainer.querySelector("#sort-options-popup"),this.sortButton=this.controlsContainer.querySelector(".sort-button"),this.elementCountSpan=this.controlsContainer.querySelector("#element-count"),this.callbackCountSpan=this.controlsContainer.querySelector("#callback-count"),this.containerMinimizeButton=this.controlsContainer.querySelector(".minimize-button"),this.allSettingsSectionsContainer=this.controlsContainer.querySelector(".all-settings-sections-container"),this.debuggerElementsSection=this.controlsContainer.querySelector(".debugger-elements"),this.copySettingsButton=this.controlsContainer.querySelector(".copy-settings-button"),this.minimizedElementCount=this.controlsContainer.querySelector(".minimized-element-count")}handleCopySettings(){var e,t;this.copySettingsButton&&navigator.clipboard.writeText((e=this.foresightManagerInstance.getManagerData.globalSettings,t="ForesightManager.initialize",`${t}({\n${Object.entries(e).filter(([e])=>"resizeScrollThrottleDelay"!==String(e)).map(([e,t])=>`  ${String(e)}: ${s(t)}`).join(",\n")}\n})`)).then(()=>{this.copySettingsButton.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',this.copyTimeoutId&&clearTimeout(this.copyTimeoutId),this.copyTimeoutId=setTimeout(()=>{this.copySettingsButton&&(this.copySettingsButton.innerHTML=g),this.copyTimeoutId=null},3e3)}).catch(e=>{console.error("Foresight Debugger: Could not copy settings to clipboard",e)})}createInputEventListener(e,t,n,i){e&&t&&e.addEventListener("input",e=>{const s=parseInt(e.target.value,10);t.textContent=`${s} ${n}`,this.foresightManagerInstance.alterGlobalSettings({[i]:s})})}createChangeEventListener(e,t){if(!e)return;const n=this.debuggerInstance.getDebuggerData.settings;e.addEventListener("change",e=>{const i=e.target.checked;t in n?this.debuggerInstance.alterDebuggerSettings({[t]:i}):this.foresightManagerInstance.alterGlobalSettings({[t]:i})})}createSectionVisibilityToggleEventListener(e,t){const n=e?.querySelector(".debugger-section-header");n?.addEventListener("click",n=>{n.stopPropagation(),this.toggleMinimizeSection(e,this[t]=!this[t])})}setupEventListeners(){this.createChangeEventListener(this.trajectoryEnabledCheckbox,"enableMousePrediction"),this.createChangeEventListener(this.tabEnabledCheckbox,"enableTabPrediction"),this.createChangeEventListener(this.scrollEnabledCheckbox,"enableScrollPrediction"),this.createChangeEventListener(this.showNameTagsCheckbox,"showNameTags"),this.createInputEventListener(this.historySizeSlider,this.historyValueSpan,c,"positionHistorySize"),this.createInputEventListener(this.predictionTimeSlider,this.predictionValueSpan,h,"trajectoryPredictionTime"),this.createInputEventListener(this.tabOffsetSlider,this.tabOffsetValueSpan,d,"tabOffset"),this.createInputEventListener(this.scrollMarginSlider,this.scrollMarginValueSpan,"px","scrollMargin"),this.sortButton?.addEventListener("click",e=>{e.stopPropagation(),this.sortOptionsPopup?.classList.toggle("active")}),this.sortOptionsPopup?.addEventListener("click",e=>{const t=e.target.closest("[data-sort]");if(!t)return;const n=t.dataset.sort;this.debuggerInstance.alterDebuggerSettings({sortElementList:n}),this.sortAndReorderElements(),this.updateSortOptionUI(n),this.sortOptionsPopup?.classList.remove("active")}),this.closeSortDropdownHandler=e=>{this.sortOptionsPopup?.classList.contains("active")&&!this.sortButton?.contains(e.target)&&this.sortOptionsPopup.classList.remove("active")},document.addEventListener("click",this.closeSortDropdownHandler),this.containerMinimizeButton?.addEventListener("click",()=>{this.isContainerMinimized=!this.isContainerMinimized,this.updateContainerVisibilityState()}),this.copySettingsButton?.addEventListener("click",this.handleCopySettings.bind(this)),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".mouse-settings-section"),"isMouseSettingsMinimized"),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".keyboard-settings-section"),"isKeyboardSettingsMinimized"),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".scroll-settings-section"),"isScrollSettingsMinimized"),this.createSectionVisibilityToggleEventListener(this.controlsContainer.querySelector(".general-settings-section"),"isGeneralSettingsMinimized")}toggleMinimizeSection(e,t){if(!e)return;const n=e.querySelector(".debugger-section-content"),i=e.querySelector(".section-minimize-button");n&&i&&(t?(n.style.display="none",i.textContent="+"):(n.style.display="flex",i.textContent="-")),this.saveSectionStatesToSessionStorage()}originalSectionStates(){const e=this.loadSectionStatesFromSessionStorage();this.toggleMinimizeSection(this.controlsContainer.querySelector(".mouse-settings-section"),e.mouse??!0),this.toggleMinimizeSection(this.controlsContainer.querySelector(".keyboard-settings-section"),e.keyboard??!0),this.toggleMinimizeSection(this.controlsContainer.querySelector(".scroll-settings-section"),e.scroll??!0),this.toggleMinimizeSection(this.controlsContainer.querySelector(".general-settings-section"),e.general??!0);const t=this.debuggerElementsSection?.querySelector(".debugger-section-content");t&&(t.style.display="flex")}updateContainerVisibilityState(){this.containerMinimizeButton&&(this.isContainerMinimized?(this.controlsContainer.classList.add("minimized"),this.containerMinimizeButton.textContent="+",this.allSettingsSectionsContainer&&(this.allSettingsSectionsContainer.style.display="none"),this.debuggerElementsSection&&(this.debuggerElementsSection.style.display="none"),this.copySettingsButton&&(this.copySettingsButton.style.display="none"),this.minimizedElementCount&&(this.minimizedElementCount.style.display="")):(this.controlsContainer.classList.remove("minimized"),this.containerMinimizeButton.textContent="-",this.allSettingsSectionsContainer&&(this.allSettingsSectionsContainer.style.display=""),this.debuggerElementsSection&&(this.debuggerElementsSection.style.display=""),this.copySettingsButton&&(this.copySettingsButton.style.display=""),this.minimizedElementCount&&(this.minimizedElementCount.style.display="none")))}updateSortOptionUI(e){this.sortOptionsPopup?.querySelectorAll("[data-sort]").forEach(t=>{const n=t;n.dataset.sort===e?n.classList.add("active-sort-option"):n.classList.remove("active-sort-option")})}updateControlsState(e,t){this.trajectoryEnabledCheckbox&&(this.trajectoryEnabledCheckbox.checked=e.enableMousePrediction),this.tabEnabledCheckbox&&(this.tabEnabledCheckbox.checked=e.enableTabPrediction),this.scrollEnabledCheckbox&&(this.scrollEnabledCheckbox.checked=e.enableScrollPrediction),this.showNameTagsCheckbox&&(this.showNameTagsCheckbox.checked=t.showNameTags),this.updateSortOptionUI(t.sortElementList??"visibility"),this.historySizeSlider&&this.historyValueSpan&&(this.historySizeSlider.value=e.positionHistorySize.toString(),this.historyValueSpan.textContent=`${e.positionHistorySize} ${c}`),this.predictionTimeSlider&&this.predictionValueSpan&&(this.predictionTimeSlider.value=e.trajectoryPredictionTime.toString(),this.predictionValueSpan.textContent=`${e.trajectoryPredictionTime} ${h}`),this.tabOffsetSlider&&this.tabOffsetValueSpan&&(this.tabOffsetSlider.value=e.tabOffset.toString(),this.tabOffsetValueSpan.textContent=`${e.tabOffset} ${d}`),this.scrollMarginSlider&&this.scrollMarginValueSpan&&(this.scrollMarginSlider.value=e.scrollMargin.toString(),this.scrollMarginValueSpan.textContent=`${e.scrollMargin} px`)}refreshRegisteredElementCountDisplay(e){if(!this.elementCountSpan||!this.callbackCountSpan)return;let t=0;e.forEach(e=>{e.isIntersectingWithViewport&&t++});const n=e.size,{tab:i,mouse:s,scroll:o,total:r}=this.foresightManagerInstance.getManagerData.globalCallbackHits,a=["Element Visibility Status","━━━━━━━━━━━━━━━━━━━━━━━━━━━━",`Visible in Viewport: ${t}`,"Not in Viewport: "+(n-t),`Total Registered Elements: ${n}`,"","Note: Only elements visible in the viewport","are actively tracked by intersection observers."];this.minimizedElementCount&&(this.minimizedElementCount.textContent=`${t}/${n}`,this.minimizedElementCount.title=a.join("\n")),this.elementCountSpan.textContent=`Visible: ${t}/${n} ~ `,this.elementCountSpan.title=a.join("\n"),this.callbackCountSpan.textContent=`Mouse: ${s.hover+s.trajectory} Tab: ${i.forwards+i.reverse} Scroll: ${o.down+o.left+o.right+o.up}`,this.callbackCountSpan.title=["Callback Execution Stats","━━━━━━━━━━━━━━━━━━━━━━━━","Mouse Callbacks",`   • Trajectory: ${s.trajectory}`,`   • Hover: ${s.hover}`,`   • Subtotal: ${s.hover+s.trajectory}`,"","Keyboard Callbacks:",`   • Tab Forward: ${i.forwards}`,`   • Tab Reverse: ${i.reverse}`,`   • Subtotal: ${i.forwards+i.reverse}`,"","Scroll Callbacks:",`   • Up: ${o.up} | Down: ${o.down}`,`   • Left: ${o.left} | Right: ${o.right}`,`   • Subtotal: ${o.up+o.down+o.left+o.right}`,"","Total Callbacks: "+r].join("\n")}removeElementFromList(e){if(!this.elementListItemsContainer)return;const t=this.elementListItems.get(e.element);if(t){t.remove(),this.elementListItems.delete(e.element);const n=this.foresightManagerInstance.registeredElements;this.refreshRegisteredElementCountDisplay(n),0===this.elementListItems.size&&(this.elementListItemsContainer.innerHTML=p)}}updateElementVisibilityStatus(e){if(!this.elementListItemsContainer)return;const t=this.elementListItems.get(e.element);if(!t)return void this.addElementToList(e);t.classList.toggle("not-in-viewport",!e.isIntersectingWithViewport);const n=t.querySelector(".intersecting-indicator");if(n){const t=a(e.isIntersectingWithViewport);n.textContent=t}this.refreshRegisteredElementCountDisplay(this.foresightManagerInstance.registeredElements),this.sortAndReorderElements()}sortAndReorderElements(){if(!this.elementListItemsContainer)return;const e=this.debuggerInstance.getDebuggerData.settings.sortElementList??"visibility",t=Array.from(this.foresightManagerInstance.registeredElements.values());if("insertionOrder"!==e){const n=(e,t)=>{const n=e.element.compareDocumentPosition(t.element);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0};"visibility"===e?t.sort((e,t)=>e.isIntersectingWithViewport!==t.isIntersectingWithViewport?e.isIntersectingWithViewport?-1:1:n(e,t)):"documentOrder"===e&&t.sort(n)}const n=document.createDocumentFragment();t.length&&(t.forEach(e=>{const t=this.elementListItems.get(e.element);t&&n.appendChild(t)}),this.elementListItemsContainer.innerHTML="",this.elementListItemsContainer.appendChild(n))}addElementToList(e,t=!0){if(!this.elementListItemsContainer)return;if(this.elementListItemsContainer.innerHTML===p&&(this.elementListItemsContainer.innerHTML=""),this.elementListItems.has(e.element))return;const n=document.createElement("div");n.className="element-list-item",this.updateListItemContent(n,e),this.elementListItemsContainer.appendChild(n),this.elementListItems.set(e.element,n),this.refreshRegisteredElementCountDisplay(this.foresightManagerInstance.registeredElements)}updateListItemContent(e,t){const n=a(t.isIntersectingWithViewport);e.classList.toggle("not-in-viewport",!t.isIntersectingWithViewport);let i="N/A";if(t.elementBounds.hitSlop){const{top:e,right:n,bottom:s,left:o}=t.elementBounds.hitSlop;i=`T:${e} R:${n} B:${s} L:${o}`}const s=[`${t.name||"Unnamed Element"}`,"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Viewport Status:",t.isIntersectingWithViewport?"   ✓ In viewport - actively tracked by observers":"   ✗ Not in viewport - not being tracked","","Hit Slop:",t.elementBounds.hitSlop?[`     Top: ${t.elementBounds.hitSlop.top}px, Bottom: ${t.elementBounds.hitSlop.bottom}px `,`     Right: ${t.elementBounds.hitSlop.right}px, Left: ${t.elementBounds.hitSlop.left}px`].join("\n"):"   • Not defined - using element's natural boundaries",""].join("\n");e.title=s,e.innerHTML=`\n    <span class="intersecting-indicator">${n}</span>\n    <span class="element-name">${t.name||"Unnamed Element"}</span>\n    <span class="hit-slop">${i}</span>\n  `}cleanup(){this.controlsContainer?.remove(),this.controlPanelStyleElement?.remove(),this.copyTimeoutId&&(clearTimeout(this.copyTimeoutId),this.copyTimeoutId=null),this.closeSortDropdownHandler&&(document.removeEventListener("click",this.closeSortDropdownHandler),this.closeSortDropdownHandler=null),this.controlsContainer=null,this.controlPanelStyleElement=null,this.elementListItemsContainer=null,this.elementCountSpan=null,this.callbackCountSpan=null,this.elementListItems.clear(),this.containerMinimizeButton=null,this.allSettingsSectionsContainer=null,this.debuggerElementsSection=null,this.trajectoryEnabledCheckbox=null,this.tabEnabledCheckbox=null,this.scrollEnabledCheckbox=null,this.historySizeSlider=null,this.historyValueSpan=null,this.predictionTimeSlider=null,this.predictionValueSpan=null,this.tabOffsetSlider=null,this.tabOffsetValueSpan=null,this.scrollMarginSlider=null,this.scrollMarginValueSpan=null,this.showNameTagsCheckbox=null,this.sortOptionsPopup=null,this.sortButton=null,this.copySettingsButton=null}createControlContainer(){const e=document.createElement("div");return e.id="debug-controls",e.innerHTML=`\n      <div class="debugger-title-container">\n        <button class="minimize-button">-</button>\n        <div class="title-group">\n          <h2>Foresight Debugger</h2>\n         <span class="info-icon" title="${["Foresight Debugger Information","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Session-Only Changes:","All adjustments made here apply only to the","current browser session and won't persist.","","Permanent Configuration:","To make lasting changes, update the initial","values in your ForesightManager.initialize().","","You can copy the current debugger settings","with the button on the right"].join("\n")}">i</span>\n        </div>\n           <button class="copy-settings-button" title="${["Copy Settings to Clipboard","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Copies the current configuration as a","formatted method call that you can paste","directly into your code."].join("\n")}">\n          ${g}\n        </button>\n        <span class="minimized-element-count">\n        </span>\n      </div>\n\n      <div class="all-settings-sections-container">\n        <div class="debugger-section mouse-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>Mouse Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n          <div class="debugger-section-content mouse-settings-content">\n            <div class="control-row">\n             <label for="trajectory-enabled">\n                Enable Mouse Prediction\n                <span class="info-icon" title="${["Mouse Prediction Control","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","When enabled: Predicts mouse movement","trajectory and triggers callbacks before","the cursor reaches the target element.","","When disabled: Only direct hover events","trigger actions (next to tab/scroll).","","Property: enableMousePrediction"].join("\n")}">i</span>\n              </label>\n              <input type="checkbox" id="trajectory-enabled">\n            </div>\n            <div class="control-row">\n             <label for="history-size">\n                History Size\n                <span class="info-icon" title="${["Position History","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Controls how many past mouse positions","are stored for velocity calculations.","","Higher values:","   • More accurate trajectory predictions","   • Smoother movement detection","   • Slightly increased processing overhead","","Lower values:","   • Faster response to direction changes","   • Less memory usage","   • May be less accurate for fast movements","","Property: positionHistorySize"].join("\n")}">i</span>\n              </label>\n              <input type="range" id="history-size" min="2" max="30">\n              <span id="history-value"></span>\n            </div>\n            <div class="control-row">\n            <label for="prediction-time">\n                Prediction Time\n                <span class="info-icon" title="${["Trajectory Prediction Time","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━",`How far into the future (in ${h})`,"to calculate the mouse trajectory path.","","Larger values:","   • Elements are detected sooner","   • More time for preloading/preparation","   • May trigger false positives for curved paths","","Smaller values:","   • More precise targeting","   • Reduced false positive rate","   • Less time for preparation","","Property: trajectoryPredictionTime"].join("\n")}">i</span>\n              </label>\n              <input type="range" id="prediction-time" min="10" max="200" step="10">\n              <span id="prediction-value"></span>\n            </div>\n          </div>\n        </div>\n\n        <div class="debugger-section keyboard-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>Keyboard Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n          <div class="debugger-section-content keyboard-settings-content">\n            <div class="control-row">\n             <label for="tab-enabled">\n                Enable Tab Prediction\n                <span class="info-icon" title="${["Tab Navigation Prediction","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","When enabled: Callbacks are executed when",`the user is ${this.foresightManagerInstance.getManagerData.globalSettings.tabOffset} (tabOffset) ${d} away from`,"a registered element during tab navigation.","","(works with Shift+Tab too).","","Property: enableTabPrediction"].join("\n")}">i</span>\n              </label>\n              <input type="checkbox" id="tab-enabled">\n            </div>\n            <div class="control-row">\n               <label for="tab-offset">\n                Tab Offset\n                <span class="info-icon" title="${["Tab Offset","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Number of tabbable elements to look ahead","when predicting tab navigation targets.","","How it works:","   • Tracks the current focused element","   • Looks ahead by the specified offset","   • Triggers callbacks for registered elements","     within that range","","Property: tabOffset"].join("\n")}">i</span>\n              </label>\n              <input type="range" id="tab-offset" min="0" max="20" step="1">\n              <span id="tab-offset-value"></span>\n            </div>\n          </div>\n        </div>\n\n        <div class="debugger-section scroll-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>Scroll Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n        <div class="debugger-section-content scroll-settings-content">\n          <div class="control-row">\n          <label for="scroll-enabled">\n              Enable Scroll Prediction\n              <span class="info-icon" title="${["Scroll Prediction","━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Enables predictive scrolling based on mouse","position and scroll direction.","","When enabled, calculates scroll direction from","mouse movement and triggers callbacks for","elements that intersect the predicted path.","","Property: enableScrollPrediction"].join("\n")}">i</span>\n            </label>\n            <input type="checkbox" id="scroll-enabled">\n          </div>\n          <div class="control-row">\n            <label for="scroll-margin">\n              Scroll Margin\n              <span class="info-icon" title="${["Scroll Margin","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sets the pixel distance to check from the","mouse position in the scroll direction.","","Higher values check further ahead, allowing","earlier detection of elements that will come","into view during scrolling.","","Property: scrollMargin"].join("\n")}">i</span>\n            </label>\n            <input type="range" id="scroll-margin" min="30" max="300" step="10">\n            <span id="scroll-margin-value"></span>\n          </div>\n        </div>\n\n        <div class="debugger-section general-settings-section">\n          <div class="debugger-section-header collapsible">\n            <h3>General Settings</h3>\n            <button class="section-minimize-button">-</button>\n          </div>\n          <div class="debugger-section-content general-settings-content">\n           <div class="control-row">\n              <label for="toggle-name-tags">\n                Show Name Tags\n                <span class="info-icon" title="${["Visual Debug Name Tags","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","When enabled: Displays name tags over","each registered element in debug mode.","","Property: debuggerSettings.showNameTags"].join("\n")}">i</span>\n              </label>\n              <input type="checkbox" id="toggle-name-tags">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class="debugger-section debugger-elements">\n        <div class="debugger-section-header elements-list-header">\n          <h3>Elements <span id="element-count"></span> <span id="callback-count"></span></h3>\n          <div class="header-controls">\n            <div class="sort-control-container">\n              <button class="sort-button" title="Change element list sort order">\n                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>\n              </button>\n              <div id="sort-options-popup">\n              <button\n                data-sort="visibility"\n                title="${["Sort by Visibility","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sorts elements by their viewport visibility","(visible elements first), with a secondary","sort by their order in the document.","","Property: debuggerSettings.sortElementList","Value: 'visibility'"].join("\n")}">\n                  Visibility\n                </button>\n                <button\n                  data-sort="documentOrder"\n                  title="${["Sort by Document Order","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sorts elements based on their order of","appearance in the document's structure","(matching the HTML source).","","Property: debuggerSettings.sortElementList","Value: 'documentOrder'"].join("\n")}"\n                >\n                  Document Order\n                </button>\n                <button\n                  data-sort="insertionOrder"\n                  title="${["Sort by Insertion Order","━━━━━━━━━━━━━━━━━━━━━━━━━━━━━","Sorts elements based on the order they","were registered with the ForesightManager.","","Property: debuggerSettings.sortElementList","Value: 'insertionOrder'"].join("\n")}"\n                >\n                  Insertion Order\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="debugger-section-content element-list">\n          <div id="element-list-items-container">\n          </div>\n        </div>\n      </div>\n    `,e}getStyles(){return'\n      #debug-controls {\n        position: fixed; bottom: 10px; right: 10px;\n        background-color: rgba(0, 0, 0, 0.90); color: white; padding: 12px;\n        border-radius: 5px; font-family: Arial, sans-serif; font-size: 13px;\n        z-index: 10001; pointer-events: auto; display: flex; flex-direction: column; gap: 8px;\n        width: 400px;\n        transition: width 0.3s ease, height 0.3s ease;\n      }\n      #debug-controls.minimized {\n        width: 250px;\n        overflow: hidden;\n        padding: 12px 0; \n      }\n      #debug-controls.minimized .debugger-title-container {\n        padding-left: 10px; \n        padding-right: 10px;\n        gap: 10px; \n      }\n      #debug-controls.minimized .debugger-title-container h2 {\n        display: inline;\n        font-size: 14px;\n        margin: 0;\n        white-space: nowrap;\n      }\n      #debug-controls.minimized .info-icon {\n        display: none;\n      }\n\n      #element-count,#callback-count {\n        font-size: 12px;\n        color: #9e9e9e;\n      }\n\n      .debugger-title-container {\n        display: flex;\n        align-items: center;\n        justify-content: space-between; \n        padding: 0 0px; \n      }\n      .title-group { \n        display: flex;\n        align-items: center;\n        gap: 8px; \n\n      }\n      .minimize-button {\n        background: none; border: none; color: white;\n        font-size: 22px; cursor: pointer;\n        line-height: 1;\n        padding-inline: 0px;\n      }\n      .debugger-title-container h2 { margin: 0; font-size: 15px; }\n\n      .copy-settings-button {\n        background: none; border: none; color: white;\n        cursor: pointer; padding: 0;\n        display: flex; align-items: center; justify-content: center;\n      }\n\n      .copy-settings-button svg {\n        width: 16px; height: 16px;\n        stroke: white;\n      }\n\n      .minimized-element-count {\n         font-size: 14px;\n         min-width: 30px;\n         text-align: right;\n      }\n\n      .all-settings-sections-container {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      .debugger-section-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-top: 5px;\n        margin-bottom: 2px;\n        padding-bottom: 2px;\n        border-bottom: 1px solid #444;\n      }\n      .debugger-section-header.collapsible {\n        cursor: pointer;\n      }\n      .debugger-section-header h3 {\n         margin: 0;\n         font-size: 14px;\n         font-weight: bold;\n         color: #b0c4de;\n         flex-grow: 1;\n      }\n\n      .section-minimize-button {\n        background: none;\n        border: none;\n        color: white;\n        font-size: 18px;\n        cursor: pointer;\n        padding: 0px;\n        line-height: 1;\n      }\n\n      #debug-controls .control-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n      }\n      #debug-controls label {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        cursor: pointer;\n      }\n      #debug-controls .control-row:has(input[type="checkbox"]) label {\n        flex-grow: 1;\n      }\n      #debug-controls .control-row input[type="checkbox"] {\n        appearance: none; -webkit-appearance: none; -moz-appearance: none;\n        position: relative; width: 40px; height: 18px;\n        background-color: #555; border-radius: 10px; cursor: pointer;\n        outline: none; transition: background-color 0.2s ease;\n        vertical-align: middle; flex-shrink: 0; margin: 0;\n      }\n      #debug-controls .control-row input[type="checkbox"]::before {\n        content: ""; position: absolute; width: 14px; height: 14px;\n        border-radius: 50%; background-color: white; top: 2px; left: 2px;\n        transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.4);\n      }\n      #debug-controls .control-row input[type="checkbox"]:checked {\n        background-color: #b0c4de;\n      }\n      #debug-controls .control-row input[type="checkbox"]:checked::before {\n        transform: translateX(22px);\n      }\n      #debug-controls .control-row:has(input[type="range"]) label {\n        flex-basis: 170px; flex-shrink: 0;\n      }\n      #debug-controls input[type="range"] {\n        flex-grow: 1; margin: 0; cursor: pointer; -webkit-appearance: none;\n        appearance: none; background: transparent; height: 18px; vertical-align: middle;\n      }\n      #debug-controls input[type="range"]::-webkit-slider-runnable-track {\n        height: 6px; background: #555; border-radius: 3px;\n      }\n      #debug-controls input[type="range"]::-moz-range-track {\n        height: 6px; background: #555; border-radius: 3px;\n      }\n      #debug-controls input[type="range"]::-webkit-slider-thumb {\n        -webkit-appearance: none; appearance: none; margin-top: -5px;\n        background: #b0c4de; height: 16px; width: 16px;\n        border-radius: 50%; border: 1px solid #333;\n      }\n      #debug-controls input[type="range"]::-moz-range-thumb {\n        background: #b0c4de; height: 16px; width: 16px;\n        border-radius: 50%; border: 1px solid #333; border: none;\n      }\n      #debug-controls .control-row:has(input[type="range"]) span:not(.info-icon) {\n        width: 55px; min-width: 55px; text-align: right; flex-shrink: 0;\n      }\n      .info-icon {\n        display: inline-flex; align-items: center; justify-content: center;\n        width: 16px; height: 16px; border-radius: 50%;\n        background-color: #555; color: white; font-size: 10px;\n        font-style: italic; font-weight: bold; font-family: \'Georgia\', serif;\n        cursor: help; user-select: none; flex-shrink: 0;\n      }\n      .debugger-section {\n        display: flex; flex-direction: column; gap: 6px;\n      }\n      .debugger-section-content {\n        display: none; flex-direction: column; gap: 8px;\n      }\n\n      /* Element List Styles */\n      .elements-list-header { cursor: default; }\n      .header-controls {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n      .sort-control-container {\n        position: relative;\n      }\n      .sort-button {\n        background: none; border: none; color: white; cursor: pointer;\n        padding: 0; display: flex; align-items: center; justify-content: center;\n      }\n      .sort-button svg {\n        width: 16px; height: 16px; stroke: #b0c4de; transition: stroke 0.2s;\n      }\n      .sort-button:hover svg { stroke: white; }\n      \n      #sort-options-popup {\n        position: absolute;\n        bottom: calc(100% + 5px);\n        right: -5px;\n        z-index: 10;\n        display: none;\n        flex-direction: column;\n        gap: 4px;\n        background-color: #3a3a3a;\n        border: 1px solid #555;\n        border-radius: 4px;\n        padding: 3px;\n        width: 200px;\n        box-shadow: 0 4px 8px rgba(0,0,0,0.3);\n      }\n      #sort-options-popup.active {\n        display: flex;\n      }\n      #sort-options-popup button {\n        background: none; border: none; color: #ccc;\n        font-size: 12px; text-align: left; padding: 5px 8px;\n        cursor: pointer; border-radius: 3px;\n        transition: background-color 0.2s, color 0.2s;\n        display: flex;\n        align-items: center;\n        height: 26px;\n      }\n      #sort-options-popup button:hover {\n        background-color: #555;\n        color: white;\n      }\n      #sort-options-popup button.active-sort-option {\n        color: #b0c4de;\n        font-weight: bold;\n      }\n      #sort-options-popup button.active-sort-option::before {\n        content: \'✓\';\n        margin-right: 6px;\n        width: 10px;\n      }\n      #sort-options-popup button::before {\n        content: \'\';\n        margin-right: 6px;\n        width: 10px;\n      }\n\n      .element-list { /* Scroll container */\n        min-height: 237px;\n        max-height: 237px; \n        overflow-y: auto;\n        background-color: rgba(20, 20, 20, 0.5);\n        border-radius: 3px;\n        padding: 0;\n        display: flex;\n      }\n\n      /* Modern Scrollbar Styling */\n      .element-list::-webkit-scrollbar { width: 8px; }\n      .element-list::-webkit-scrollbar-track { background: rgba(30, 30, 30, 0.5); border-radius: 4px; }\n      .element-list::-webkit-scrollbar-thumb { background-color: rgba(176, 196, 222, 0.5); border-radius: 4px; border: 2px solid rgba(0, 0, 0, 0.2); }\n      .element-list::-webkit-scrollbar-thumb:hover { background-color: rgba(176, 196, 222, 0.7); }\n      .element-list { scrollbar-width: thin; scrollbar-color: rgba(176, 196, 222, 0.5) rgba(30, 30, 30, 0.5); }\n\n      #element-list-items-container { \n        display: flex;\n        flex-wrap: wrap;\n        gap: 3px;\n        padding: 6px;\n        min-height: 225px;\n        box-sizing: border-box;\n        align-content: flex-start;\n      }\n      #element-list-items-container > em {\n        flex-basis: 100%;\n        text-align: center;\n        padding: 10px 0;\n        font-style: italic;\n        color: #ccc;\n        font-size: 12px;\n      }\n      .element-list-item {\n        flex-basis: calc((100% - (0 * 3px)) / 1);\n        flex-grow: 0;\n        flex-shrink: 0;\n        height: 35px;\n        box-sizing: border-box;\n        padding: 3px 5px;\n        border-radius: 2px;\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        background-color: rgba(50,50,50,0.7);\n        transition: background-color 0.2s ease, opacity 0.2s ease;\n        font-size: 11px; \n        overflow: hidden;\n      }\n      \n      /* Viewport intersection styling */\n      .element-list-item.not-in-viewport { opacity: 0.4; }\n      \n      .element-list-item .element-name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: 12px; \n        font-weight: bold;\n      }\n      .element-list-item .intersecting-indicator {\n        font-size: 12px;\n        flex-shrink: 0;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 16px;\n        height: 16px;\n      }\n      .element-list-item .hit-behavior,\n      .element-list-item .hit-slop {\n        font-size: 10px; \n        color: #b0b0b0;\n        padding: 2px 5px; \n        border-radius: 3px; \n        background-color: rgba(0,0,0,0.2);\n        flex-shrink: 0;\n      }\n    '}}function b(e,t,n){const{expandedOverlay:i,nameLabel:s}=e,{expandedRect:o}=t.elementBounds,r=o.right-o.left,a=o.bottom-o.top;i.style.width=`${r}px`,i.style.height=`${a}px`,i.style.transform=`translate3d(${o.left}px, ${o.top}px, 0)`,i.style.display="block",s.textContent=t.name,""!==t.name&&n?(s.style.display="block",s.style.transform=`translate3d(${o.left}px, ${o.top-25}px, 0)`):s.style.display="none"}function m(e,t){return void 0!==e&&e!==t}class y{constructor(e){this.callbackAnimations=new Map,this._debuggerSettings={showDebugger:true,isControlPanelDefaultMinimized:false,showNameTags:l,sortElementList:"visibility"},this.debugElementOverlays=new Map,this.predictedMouseIndicator=null,this.mouseTrajectoryLine=null,this.scrollTrajectoryLine=null,this.managerSubscriptionsController=null,this.animationPositionObserver=null,this.handleAnimationPositionChange=e=>{for(const t of e){const e=this.callbackAnimations.get(t.target);if(e){const n=t.boundingClientRect,{hitSlop:i,overlay:s}=e,o=n.left-i.left,r=n.top-i.top,a=n.width+i.left+i.right,l=n.height+i.top+i.bottom;s.style.transform=`translate3d(${o}px, ${r}px, 0)`,s.style.width=`${a}px`,s.style.height=`${l}px`}}},this.handleElementDataUpdated=e=>{switch(e.updatedProp){case"bounds":this.createOrUpdateElementOverlay(e.elementData);break;case"visibility":e.elementData.isIntersectingWithViewport||this.removeElementOverlay(e.elementData),this.controlPanel?.updateElementVisibilityStatus(e.elementData)}},this.handleUnregisterElement=e=>{this.controlPanel?.removeElementFromList(e.elementData),this.removeElementOverlay(e.elementData)},this.handleCallbackFired=e=>{this.showCallbackAnimation(e.elementData)},this.handleRegisterElement=e=>{this.createOrUpdateElementOverlay(e.elementData),this.controlPanel.addElementToList(e.elementData)},this.handleMouseTrajectoryUpdate=e=>{if(!this.shadowRoot||!this.debugContainer)return;if(!this.predictedMouseIndicator||!this.mouseTrajectoryLine)return;this.scrollTrajectoryLine&&(this.scrollTrajectoryLine.style.display="none");const{predictedPoint:t,currentPoint:n}=e.trajectoryPositions;if(this.predictedMouseIndicator.style.transform=`translate3d(${t.x}px, ${t.y}px, 0) translate3d(-50%, -50%, 0)`,this.predictedMouseIndicator.style.display=e.predictionEnabled?"block":"none",0===t.x&&0===t.y)return void(this.predictedMouseIndicator.style.display="none");if(!e.predictionEnabled)return void(this.mouseTrajectoryLine.style.display="none");const i=t.x-n.x,s=t.y-n.y,o=Math.sqrt(i*i+s*s),r=180*Math.atan2(s,i)/Math.PI;this.mouseTrajectoryLine.style.transform=`translate3d(${n.x}px, ${n.y}px, 0) rotate(${r}deg)`,this.mouseTrajectoryLine.style.width=`${o}px`,this.mouseTrajectoryLine.style.display="block"},this.handleScrollTrajectoryUpdate=e=>{if(!this.scrollTrajectoryLine)return;const t=e.predictedPoint.x-e.currentPoint.x,n=e.predictedPoint.y-e.currentPoint.y,i=Math.sqrt(t*t+n*n),s=180*Math.atan2(n,t)/Math.PI;this.scrollTrajectoryLine.style.transform=`translate3d(${e.currentPoint.x}px, ${e.currentPoint.y}px, 0) rotate(${s}deg)`,this.scrollTrajectoryLine.style.width=`${i}px`,this.scrollTrajectoryLine.style.display="block"},this.handleSettingsChanged=e=>{this.controlPanel?.updateControlsState(e.managerData.globalSettings,this._debuggerSettings)},this.foresightManagerInstance=e}get getDebuggerData(){return{settings:this._debuggerSettings}}static initialize(e,t){if("undefined"==typeof window||"undefined"==typeof window||"ontouchstart"in window)return null;y.isInitiated||(y.debuggerInstance=new y(e));const n=y.debuggerInstance;return n.subscribeToManagerEvents(),n.alterDebuggerSettings(t),n.shadowHost||n._setupDOM(),n}static get instance(){if(!y.debuggerInstance)throw new Error("ForesightDebugger has not been initialized. Call ForesightDebugger.initialize() first.");return y.debuggerInstance}_setupDOM(){this.shadowHost||(this.shadowHost=o("div",document.body,{id:"jsforesight-debugger-shadow-host"}),this.shadowRoot=this.shadowHost.attachShadow({mode:"open"}),this.debugContainer=o("div",this.shadowRoot,{id:"jsforesight-debug-container"}),this.predictedMouseIndicator=o("div",this.debugContainer,{className:"jsforesight-mouse-predicted"}),this.mouseTrajectoryLine=o("div",this.debugContainer,{className:"jsforesight-trajectory-line"}),this.scrollTrajectoryLine=o("div",this.debugContainer,{className:"jsforesight-scroll-trajectory-line"}),this.controlPanel=u.initialize(this.foresightManagerInstance,y.debuggerInstance,this.shadowRoot,this._debuggerSettings),r(f,this.shadowRoot,"screen-visuals"),this.animationPositionObserver=new i(this.handleAnimationPositionChange))}static get isInitiated(){return!!y.debuggerInstance}alterDebuggerSettings(e){m(e?.showNameTags,this._debuggerSettings.showNameTags)&&(this._debuggerSettings.showNameTags=e.showNameTags,this.toggleNameTagVisibility()),m(e?.isControlPanelDefaultMinimized,this._debuggerSettings.isControlPanelDefaultMinimized)&&(this._debuggerSettings.isControlPanelDefaultMinimized=e.isControlPanelDefaultMinimized),m(e?.sortElementList,this._debuggerSettings.sortElementList)&&(this._debuggerSettings.sortElementList=e.sortElementList),m(e?.showDebugger,this._debuggerSettings.showDebugger)&&(this._debuggerSettings.showDebugger=e.showDebugger,this._debuggerSettings.showDebugger?y.initialize(this.foresightManagerInstance):this.cleanup())}subscribeToManagerEvents(){this.managerSubscriptionsController=new AbortController;const e=this.managerSubscriptionsController.signal,t=this.foresightManagerInstance;t.addEventListener("elementRegistered",this.handleRegisterElement,{signal:e}),t.addEventListener("elementUnregistered",this.handleUnregisterElement,{signal:e}),t.addEventListener("elementDataUpdated",this.handleElementDataUpdated,{signal:e}),t.addEventListener("mouseTrajectoryUpdate",this.handleMouseTrajectoryUpdate,{signal:e}),t.addEventListener("scrollTrajectoryUpdate",this.handleScrollTrajectoryUpdate,{signal:e}),t.addEventListener("managerSettingsChanged",this.handleSettingsChanged,{signal:e}),t.addEventListener("callbackFired",this.handleCallbackFired,{signal:e})}createElementOverlays(e){const t={expandedOverlay:o("div",this.debugContainer,{className:"jsforesight-expanded-overlay",data:e.name}),nameLabel:o("div",this.debugContainer,{className:"jsforesight-name-label"})};return this.debugElementOverlays.set(e.element,t),t}createOrUpdateElementOverlay(e){if(!this.debugContainer||!this.shadowRoot)return;let t=this.debugElementOverlays.get(e.element);t||(t=this.createElementOverlays(e)),b(t,e,this._debuggerSettings.showNameTags??l)}toggleNameTagVisibility(){this.foresightManagerInstance.registeredElements.forEach(e=>{const t=this.debugElementOverlays.get(e.element);t&&b(t,e,this._debuggerSettings.showNameTags??l)})}removeElementOverlay(e){const t=this.debugElementOverlays.get(e.element);t&&(t.expandedOverlay.remove(),t.nameLabel.remove(),this.debugElementOverlays.delete(e.element))}showCallbackAnimation(e){const{element:t,elementBounds:n}=e,i=this.callbackAnimations.get(t);i&&(clearTimeout(i.timeoutId),i.overlay.remove(),this.animationPositionObserver?.unobserve(t),this.callbackAnimations.delete(t));const s=o("div",this.debugContainer,{className:"jsforesight-callback-indicator"}),{left:r,top:a,right:l,bottom:c}=n.expandedRect,d=l-r,h=c-a;s.style.display="block",s.style.transform=`translate3d(${r}px, ${a}px, 0)`,s.style.width=`${d}px`,s.style.height=`${h}px`,s.classList.add("animate");const g=setTimeout(()=>{s.remove(),this.callbackAnimations.delete(t),this.animationPositionObserver?.unobserve(t)},500);this.callbackAnimations.set(t,{hitSlop:e.elementBounds.hitSlop,overlay:s,timeoutId:g}),this.animationPositionObserver?.observe(t)}cleanup(){this.managerSubscriptionsController?.abort(),this.controlPanel?.cleanup(),this.shadowHost?.remove(),this.debugElementOverlays.clear(),this.shadowHost=null,this.shadowRoot=null,this.debugContainer=null,this.predictedMouseIndicator=null,this.mouseTrajectoryLine=null,this.scrollTrajectoryLine=null,this.controlPanel=null}}const f='\n      #jsforesight-debug-container { \n        position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n        pointer-events: none; z-index: 9999;\n      }\n\n      .jsforesight-expanded-overlay, \n      .jsforesight-name-label, \n      .jsforesight-callback-indicator,\n      .jsforesight-mouse-predicted,\n      .jsforesight-scroll-trajectory-line,\n      .jsforesight-trajectory-line {\n        position: absolute;\n        top: 0;\n        left: 0;\n        will-change: transform; \n      }\n      .jsforesight-trajectory-line{\n        display: none;\n      }\n      .jsforesight-expanded-overlay {\n        border: 1px dashed rgba(100, 116, 139, 0.4);\n        background-color: rgba(100, 116, 139, 0.05);\n        box-sizing: border-box;\n        border-radius: 8px;\n      }\n      .jsforesight-mouse-predicted {\n        display: none !important;\n        /* transform is now set dynamically via JS for performance */\n      }\n      .jsforesight-trajectory-line {\n        height: 4px;\n        background: linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.4));\n        transform-origin: left center;\n        z-index: 9999;\n        border-radius: 2px;\n        box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);\n        position: relative;\n        /* width and transform are set dynamically via JS for performance */\n      }\n      .jsforesight-trajectory-line::after {\n        content: \'\';\n        position: absolute;\n        right: -6px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 0;\n        height: 0;\n        border-left: 8px solid #3b82f6;\n        border-top: 4px solid transparent;\n        border-bottom: 4px solid transparent;\n        filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));\n      }\n      .jsforesight-name-label {\n        background-color: rgba(27, 31, 35, 0.85);\n        backdrop-filter: blur(4px);\n        color: white;\n        padding: 4px 8px;\n        font-size: 11px;\n        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";\n        border-radius: 4px;\n        z-index: 10001;\n        white-space: nowrap;\n        pointer-events: none;\n      }\n      .jsforesight-callback-indicator {\n        border: 4px solid oklch(65% 0.22 280); \n        border-radius: 8px;\n        box-sizing: border-box;\n        pointer-events: none;\n        opacity: 0;\n        z-index: 10002;\n        display: none; \n      }\n      .jsforesight-callback-indicator.animate {\n        animation: jsforesight-callback-pulse 0.5s ease-out forwards;\n      }\n        \n      .jsforesight-scroll-trajectory-line {\n      height: 4px;\n      background: repeating-linear-gradient(\n        90deg,\n        #22c55e 0px,\n        #22c55e 8px,\n        transparent 8px,\n        transparent 16px\n      );\n      transform-origin: left center;\n      z-index: 9999;\n      border-radius: 2px;\n      display: none;\n      animation: scroll-dash-flow 1.5s linear infinite;\n      position: relative;\n      box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);\n      }\n\n      .jsforesight-scroll-trajectory-line::after {\n      content: \'\';\n      position: absolute;\n      right: -6px;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 0;\n      height: 0;\n      border-left: 8px solid #22c55e;\n      border-top: 4px solid transparent;\n      border-bottom: 4px solid transparent;\n      filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));\n      animation: scroll-arrow-pulse 1.5s ease-in-out infinite;\n      }\n\n      @keyframes scroll-dash-flow {\n      0% { background-position: 0px 0px; }\n      100% { background-position: 16px 0px; }\n      }\n\n      @keyframes scroll-arrow-pulse {\n      0%, 100% { \n        transform: translateY(-50%) scale(1);\n        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));\n      }\n      50% {\n        transform: translateY(-50%) scale(1.2);\n        filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.8));\n      }\n      }\n\n\n  \n      @keyframes jsforesight-callback-pulse {\n        0% {\n          opacity: 1;\n          box-shadow: 0 0 15px oklch(65% 0.22 280 / 0.7);\n        }\n        100% {\n          opacity: 0;\n          box-shadow: 0 0 25px oklch(65% 0.22 280 / 0);\n        }\n      }\n    ';exports.DebuggerControlPanel=u,exports.ForesightDebugger=y;
 //# sourceMappingURL=index.js.map