js.foresight-devtools 0.0.2 → 1.0.0

package/dist/index.js

@@ -1,18 +1,1724 @@
-"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,
-/* 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.`);
-/* 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)
-/* istanbul ignore else @preserve */,this._t||(this._t=requestAnimationFrame(this._rc))})};unobserve=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})=>{
-/* 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;
-//# sourceMappingURL=index.js.map
+"use strict";var Ce=Object.defineProperty;var Pe=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var at=Object.prototype.hasOwnProperty;var rt=(n,s)=>{for(var e in s)Ce(n,e,{get:s[e],enumerable:!0})},lt=(n,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of st(s))!at.call(n,o)&&o!==e&&Ce(n,o,{get:()=>s[o],enumerable:!(t=Pe(s,o))||t.enumerable});return n};var dt=n=>lt(Ce({},"__esModule",{value:!0}),n),i=(n,s,e,t)=>{for(var o=t>1?void 0:t?Pe(s,e):s,a=n.length-1,r;a>=0;a--)(r=n[a])&&(o=(t?r(s,e,o):r(o))||o);return t&&o&&Ce(s,e,o),o};var xt={};rt(xt,{ForesightDevtools:()=>l});module.exports=dt(xt);var q=require("lit"),Le=require("lit/decorators.js");var re=require("lit"),G=require("lit/decorators.js"),De=require("lit/directives/class-map.js");var F=require("lit"),h=require("lit/decorators.js"),qe=require("lit/directives/map.js");var K=require("lit"),Ue=require("lit/decorators.js");var be=class extends K.LitElement{render(){return K.html`
+      <div class="tab-bar-elements">
+        <div class="tab-bar-info">
+          <div class="stats-chips">
+            <slot name="chips"></slot>
+          </div>
+        </div>
+        <div class="tab-bar-actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `}};be.styles=[K.css`
+      :host {
+      }
+      .tab-bar-info {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        flex: 1;
+      }
+
+      .stats-chips {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .chip {
+        font-size: 11px;
+        font-weight: 500;
+        padding: 4px 8px;
+        border: 1px solid #555;
+        white-space: nowrap;
+        letter-spacing: 0.3px;
+        background: rgba(40, 40, 40, 0.7);
+        color: #b0c4de;
+      }
+
+      .tab-bar-actions {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        position: relative;
+        flex-direction: row;
+      }
+      .tab-bar-elements {
+        display: flex;
+        justify-content: space-between;
+        padding: 4px 0 4px 0;
+        border-bottom: 1px solid #444;
+        position: sticky;
+        top: 0;
+        z-index: 5;
+        min-height: 36px;
+      }
+    `],be=i([(0,Ue.customElement)("tab-header")],be);var T=require("lit"),ve=require("lit/decorators.js");var $=class extends T.LitElement{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return T.html`
+      <div class="content-container">
+        ${this.hasContent?T.html`<slot></slot>`:T.html`<div class="no-content-message">${this.noContentMessage}</div>`}
+      </div>
+    `}};$.styles=[T.css`
+      :host {
+        overflow: hidden;
+      }
+
+      .content-container::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .content-container::-webkit-scrollbar-track {
+        background: rgba(30, 30, 30, 0.5);
+      }
+
+      .content-container::-webkit-scrollbar-thumb {
+        background-color: rgba(176, 196, 222, 0.5);
+        border: 2px solid rgba(0, 0, 0, 0.2);
+      }
+
+      .content-container::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(176, 196, 222, 0.7);
+      }
+
+      .content-container {
+        height: 100%;
+        min-height: 150px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(176, 196, 222, 0.5) rgba(30, 30, 30, 0.5);
+      }
+
+      .no-content-message {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        color: #afafaf;
+        font-style: italic;
+        font-family: "Courier New", monospace;
+      }
+    `],i([(0,ve.property)({type:String,attribute:"no-content-message"})],$.prototype,"noContentMessage",2),i([(0,ve.property)({type:Boolean})],$.prototype,"hasContent",2),$=i([(0,ve.customElement)("tab-content")],$);var Ne=require("lit"),fe=require("lit/decorators.js");var I=require("lit"),Se=require("lit/decorators.js");var d=class d extends I.LitElement{constructor(){super(...arguments);this.isDropdownOpen=!1;this.dropdownOptions=[];this._toggleDropdown=e=>{e.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(d.currentlyOpen&&d.currentlyOpen!==this&&d.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,d.currentlyOpen=this,requestAnimationFrame(()=>{this._positionDropdown()}))};this._handleOutsideClick=e=>{this.isDropdownOpen&&(e.composedPath().includes(this)||this._closeDropdown())}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),d.currentlyOpen===this&&(d.currentlyOpen=null)}_closeDropdown(){this.isDropdownOpen=!1,d.currentlyOpen===this&&(d.currentlyOpen=null)}_positionDropdown(){let e=this.shadowRoot?.querySelector(".trigger-button"),t=this.shadowRoot?.querySelector(".dropdown-menu");if(e&&t){let o=e.getBoundingClientRect(),a=t.offsetHeight||200,r=o.bottom+5,ue=window.innerWidth-o.right;window.innerHeight-o.bottom<a&&o.top>a?t.style.top=`${o.top-a-5}px`:t.style.top=`${r}px`,t.style.right=`${ue}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return I.html`
+      <div class="dropdown-container">
+        <button
+          class="${e}"
+          title="${this._getTriggerTitle()}"
+          @click="${this._toggleDropdown}"
+          aria-haspopup="true"
+          aria-expanded="${this.isDropdownOpen}"
+          aria-controls="dropdown-menu"
+          aria-label="${this._getTriggerLabel()}"
+        >
+          ${this._getTriggerIcon()}
+          <svg
+            class="arrow-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+
+        <div class="${t}" id="dropdown-menu" role="menu">
+          ${this.dropdownOptions.map(o=>I.html`
+              <button
+                value="${o.value}"
+                title="${o.title}"
+                class="${this._isOptionSelected(o)?"active":""}"
+                @click="${()=>this._handleOptionClick(o)}"
+                role="menuitem"
+              >
+                ${o.label}
+              </button>
+            `)}
+        </div>
+      </div>
+    `}};d.currentlyOpen=null,d.styles=[I.css`
+      :host {
+        display: inline-block;
+      }
+
+      .dropdown-container {
+        position: relative;
+        display: inline-block;
+      }
+
+      .trigger-button {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        transition: all 0.2s ease;
+      }
+
+      .trigger-button svg {
+        width: 16px;
+        height: 16px;
+        stroke: white;
+        transition: stroke 0.2s;
+      }
+
+      .trigger-button .arrow-icon {
+        width: 10px;
+        height: 10px;
+        stroke: white;
+        fill: none;
+        stroke-width: 2;
+        transition: transform 0.2s ease, stroke 0.2s;
+      }
+
+      .trigger-button:hover {
+        background-color: rgba(176, 196, 222, 0.1);
+      }
+
+      .trigger-button:hover svg,
+      .trigger-button:hover .arrow-icon {
+        stroke: #b0c4de;
+      }
+
+      .trigger-button.active {
+        background-color: rgba(176, 196, 222, 0.2);
+      }
+
+      .trigger-button.active svg {
+        stroke: #b0c4de;
+      }
+
+      .trigger-button.active .arrow-icon {
+        transform: rotate(180deg);
+        stroke: #b0c4de;
+      }
+
+      .dropdown-menu {
+        position: fixed;
+        z-index: 9999;
+        display: none;
+        flex-direction: column;
+        background-color: #3a3a3a;
+        border: 1px solid #555;
+        min-width: 200px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        overflow: hidden;
+      }
+
+      .dropdown-menu.active {
+        display: flex;
+      }
+
+      .dropdown-menu button {
+        background: none;
+        border: none;
+        color: #ccc;
+        font-size: 12px;
+        text-align: left;
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        position: relative;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .dropdown-menu button:hover {
+        background-color: #555;
+        color: white;
+      }
+
+      .dropdown-menu button.active {
+        color: #b0c4de;
+        font-weight: bold;
+        background-color: rgba(176, 196, 222, 0.1);
+      }
+
+      .dropdown-menu button.active::after {
+        content: "✓";
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #b0c4de;
+        font-weight: bold;
+      }
+    `],i([(0,Se.state)()],d.prototype,"isDropdownOpen",2),i([(0,Se.property)({type:Array})],d.prototype,"dropdownOptions",2);var P=d;var J=class extends P{constructor(){super(...arguments);this.selectedOptionValue=""}connectedCallback(){super.connectedCallback(),this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}willUpdate(e){e.has("dropdownOptions")&&this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}_handleOptionClick(e){e.value!==this.selectedOptionValue&&(this.selectedOptionValue=e.value,this.onSelectionChange?.(e.value)),this._closeDropdown()}_getTriggerIcon(){let e=this._getSelectedOption();return e?e.icon:Ne.html``}_isOptionSelected(e){return e.value===this.selectedOptionValue}_getTriggerTitle(){let e=this._getSelectedOption();return e?e.title:"Change selection"}_getTriggerLabel(){let e=this._getSelectedOption();return e?`Current selection: ${e.label}`:"No selection"}_getSelectedOption(){return this.dropdownOptions.find(e=>e.value===this.selectedOptionValue)}};i([(0,fe.property)({type:String})],J.prototype,"selectedOptionValue",2),i([(0,fe.property)({type:Function})],J.prototype,"onSelectionChange",2),J=i([(0,fe.customElement)("single-select-dropdown")],J);var Z=require("lit"),Te=require("lit/decorators.js");var X=class extends Z.LitElement{constructor(){super(...arguments);this.title=""}render(){return Z.html`
+      <span class="chip" title="${this.title}">
+        <slot></slot>
+      </span>
+    `}};X.styles=[Z.css`
+      :host {
+        display: inline-block;
+      }
+
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 8px;
+        background-color: rgba(255, 255, 255, 0.05);
+        color: #e8e8e8;
+        font-size: 10px;
+        font-weight: 500;
+        white-space: nowrap;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+        letter-spacing: 0.02em;
+        line-height: 1.2;
+        transition: all 0.2s ease;
+      }
+    `],i([(0,Te.property)({type:String})],X.prototype,"title",2),X=i([(0,Te.customElement)("chip-element")],X);var ee=require("lit"),N=require("lit/decorators.js");var U=require("lit"),_=require("lit/decorators.js");var Q=require("lit"),M=require("lit/decorators.js");var p=require("lit"),je=p.html`
+  <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="2" y="2" width="20" height="15" rx="2" ry="2"></rect>
+    <line x1="2" y1="17" x2="22" y2="17"></line>
+    <line x1="7" y1="21" x2="17" y2="21"></line>
+    <line x1="12" y1="17" x2="12" y2="21"></line>
+  </svg>
+`,Fe=p.html`
+  <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="4 17 10 11 4 5"></polyline>
+    <line x1="12" y1="19" x2="20" y2="19"></line>
+  </svg>
+`,Ve=p.html`
+  <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"
+  >
+    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+    <line x1="1" y1="1" x2="23" y2="23"></line>
+  </svg>
+`,ze=p.html`
+  <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"
+  >
+    <path d="M12 2v8" />
+    <path d="M12 10l-6 6" />
+    <path d="M12 10l6 6" />
+    <circle cx="6" cy="18" r="2" />
+    <circle cx="18" cy="18" r="2" />
+  </svg>
+`,Re=p.html`
+  <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"
+  >
+    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+`,Ae=p.html`
+  <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"
+  >
+    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+    <line x1="10" y1="9" x2="8" y2="9" />
+  </svg>
+`,He=p.html`
+  <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"
+  >
+    <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
+  </svg>
+`,b=p.html`
+  <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" />
+  </svg>
+`,Be=p.html`
+  <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"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+  </svg>
+`,Ge=p.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    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>
+`,We=p.html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    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>
+`,Ye=p.html`
+  <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"
+  >
+    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+    <line x1="12" y1="9" x2="12" y2="13"></line>
+    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+  </svg>
+`;var x=class extends Q.LitElement{constructor(){super(...arguments);this.title="Copy to clipboard";this.isCopied=!1;this.copyTimeout=null}async handleClick(e){if(!this.isCopied){if(this.onCopy)try{await this.onCopy(e)}catch(t){console.error("Error in onCopy function:",t)}this.isCopied=!0,this.copyTimeout&&clearTimeout(this.copyTimeout),this.copyTimeout=setTimeout(()=>{this.isCopied=!1,this.copyTimeout=null},2e3)}}disconnectedCallback(){super.disconnectedCallback(),this.copyTimeout&&(clearTimeout(this.copyTimeout),this.copyTimeout=null)}render(){return Q.html`
+      <button
+        class="copy-button ${this.isCopied?"copied":""}"
+        title="${this.title}"
+        @click=${this.handleClick}
+      >
+        ${this.isCopied?We:Ge}
+      </button>
+    `}};x.styles=Q.css`
+    .copy-button {
+      background: transparent;
+      border: 0px;
+      cursor: pointer;
+      padding: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.6;
+      transition: opacity 0.2s ease, background-color 0.2s ease;
+    }
+
+    :host([positioned]) .copy-button {
+      position: absolute;
+      top: 10px;
+      right: 1px;
+    }
+
+    .copy-button:hover {
+      background-color: rgba(176, 196, 222, 0.1);
+    }
+
+    .copy-button:hover svg {
+      stroke: #b0c4de;
+    }
+
+    .copy-button svg {
+      width: 14px;
+      height: 14px;
+      stroke: #ddd;
+      stroke-width: 2.5;
+    }
+
+    .copy-button.copied svg {
+      stroke: #4caf50;
+    }
+  `,i([(0,M.property)({type:String})],x.prototype,"title",2),i([(0,M.property)({type:Function})],x.prototype,"onCopy",2),i([(0,M.state)()],x.prototype,"isCopied",2),i([(0,M.state)()],x.prototype,"copyTimeout",2),x=i([(0,M.customElement)("copy-icon")],x);var f=class extends U.LitElement{constructor(){super(...arguments);this.borderColor="#555";this.showCopyButton=!1;this.itemId="";this.isExpanded=!1}toggleExpand(){this.onToggle&&this.onToggle(this.itemId)}async handleCopy(e){e.stopPropagation();let t=this.shadowRoot?.querySelector('slot[name="details"]');if(t){let a=t.assignedNodes().map(r=>r.textContent).join("");try{await navigator.clipboard.writeText(a)}catch(r){console.error("Failed to copy text: ",r)}}}render(){return this.style.setProperty("--border-color",this.borderColor),U.html`
+      <div class="item-entry ${this.isExpanded?"expanded":""}">
+        <div class="item-header ${this.isExpanded?"expanded":""}" @click="${this.toggleExpand}">
+          <div class="item-content">
+            <slot name="content"></slot>
+          </div>
+          <span class="item-toggle ${this.isExpanded?"expanded":""}">
+            <svg viewBox="0 0 24 24">
+              <polyline points="9,18 15,12 9,6"></polyline>
+            </svg>
+          </span>
+        </div>
+        ${this.isExpanded?U.html`
+              <div class="item-details">
+                <copy-icon
+                  positioned
+                  title="Copy Details"
+                  .onCopy=${e=>this.handleCopy(e)}
+                ></copy-icon>
+                <pre class="item-data">
+                  <slot name="details"></slot>
+                </pre>
+              </div>
+            `:""}
+      </div>
+    `}};f.styles=[U.css`
+      :host {
+        display: block;
+      }
+
+      .item-entry {
+        margin-bottom: 2px;
+        font-size: 11px;
+        line-height: 1.3;
+        overflow: hidden;
+        transition: all 0.2s ease;
+        border-left: 2px solid var(--border-color, #555);
+        padding-left: 6px;
+      }
+
+      .item-entry:hover:not(.expanded) {
+        background-color: rgba(255, 255, 255, 0.02);
+      }
+
+      .item-entry.expanded {
+        background-color: rgba(255, 255, 255, 0.03);
+      }
+
+      .item-header {
+        display: flex;
+        align-items: center;
+        padding: 3px 4px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        gap: 8px;
+        min-height: 20px;
+      }
+
+      .item-header:hover:not(.expanded) {
+        background-color: rgba(255, 255, 255, 0.03);
+      }
+
+      .item-details {
+        position: relative;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+      }
+
+      .item-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+        user-select: none;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-radius: 2px;
+      }
+
+      .item-toggle:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      .item-toggle svg {
+        width: 12px;
+        height: 12px;
+        fill: none;
+        stroke: #b0c4de;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        transition: all 0.2s ease;
+      }
+
+      .item-toggle:hover svg {
+        stroke: #d4e4f4;
+      }
+
+      .item-toggle.expanded svg {
+        transform: rotate(90deg);
+      }
+
+      .item-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .item-data {
+        color: #e0e0e0;
+        white-space: pre;
+        font-size: 11px;
+        margin: 0;
+        padding: 0;
+        font-family: "Courier New", monospace;
+        line-height: 1.3;
+        display: block;
+        overflow-x: auto;
+      }
+    `],i([(0,_.property)()],f.prototype,"borderColor",2),i([(0,_.property)()],f.prototype,"showCopyButton",2),i([(0,_.property)()],f.prototype,"itemId",2),i([(0,_.property)()],f.prototype,"isExpanded",2),i([(0,_.property)()],f.prototype,"onToggle",2),f=i([(0,_.customElement)("expandable-item")],f);var w=class extends ee.LitElement{constructor(){super(...arguments);this.isActive=!1;this.isExpanded=!1}getBorderColor(){return this.isActive?"#ffeb3b":this.elementData.isIntersectingWithViewport?"#4caf50":"#666"}getStatusIndicatorClass(){return this.isActive?"prefetching":this.elementData.isIntersectingWithViewport?"visible":"hidden"}formatElementDetails(){let e={tagName:this.elementData.element.tagName.toLowerCase(),isIntersecting:this.elementData.isIntersectingWithViewport,registerCount:this.elementData.registerCount,hitSlop:{top:this.elementData.elementBounds.hitSlop.top,right:this.elementData.elementBounds.hitSlop.right,bottom:this.elementData.elementBounds.hitSlop.bottom,left:this.elementData.elementBounds.hitSlop.left}};return JSON.stringify(e,null,2)}render(){return ee.html`
+      <expandable-item
+        .borderColor=${this.getBorderColor()}
+        .showCopyButton=${!0}
+        .itemId=${this.elementData.elementId}
+        .isExpanded=${this.isExpanded}
+        .onToggle=${this.onToggle}
+      >
+        <div slot="content" class="element-content">
+          <div class="status-indicator ${this.getStatusIndicatorClass()}"></div>
+          <span class="element-name ${this.isActive?"callback-active":""}">
+            ${this.elementData.name||"unnamed"}
+          </span>
+        </div>
+        <div slot="details">${this.formatElementDetails()}</div>
+      </expandable-item>
+    `}};w.styles=[ee.css`
+      :host {
+        display: block;
+      }
+
+      .element-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+      }
+
+      .status-indicator {
+        width: 8px;
+        height: 8px;
+        flex-shrink: 0;
+        transition: all 0.3s ease;
+      }
+
+      .status-indicator.visible {
+        background-color: #4caf50;
+        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+      }
+
+      .status-indicator.hidden {
+        background-color: #666;
+        box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2);
+      }
+
+      .status-indicator.prefetching {
+        background-color: #ffeb3b;
+        box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.4);
+      }
+
+      .element-name {
+        flex-grow: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 11px;
+        font-weight: 500;
+        color: #e8e8e8;
+      }
+
+      .element-name.callback-active {
+        color: #fff;
+        font-weight: 600;
+      }
+    `],i([(0,N.property)()],w.prototype,"elementData",2),i([(0,N.property)()],w.prototype,"isActive",2),i([(0,N.property)()],w.prototype,"isExpanded",2),i([(0,N.property)()],w.prototype,"onToggle",2),w=i([(0,N.customElement)("single-element")],w);var j=require("js.foresight");var c=class extends F.LitElement{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},total:0};this.visibleElementsCount=0;this.totalElementsCount=0;this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.activeCallbacks=new Set;this.expandedElementIds=new Set;this.elementIdCounter=0;this._abortController=null;this.handleSortChange=e=>{this.sortOrder=e};this.handleElementToggle=e=>{let t=new Set(this.expandedElementIds);t.has(e)?t.delete(e):t.add(e),this.expandedElementIds=t};this.sortByDocumentPosition=(e,t)=>{let o=e.element.compareDocumentPosition(t.element);return o&Node.DOCUMENT_POSITION_FOLLOWING?-1:o&Node.DOCUMENT_POSITION_PRECEDING?1:0};this.sortOrder=l.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:Re},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:Ae},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:He}]}generateElementId(){return(++this.elementIdCounter).toString()}updateVisibilityCounts(){let e=0,t=0;this.elementListItems.forEach(o=>{t++,o.isIntersectingWithViewport&&e++}),this.visibleElementsCount=e,this.totalElementsCount=t,this.dispatchEvent(new CustomEvent("visibility-count-updated",{detail:{visibleCount:e,totalCount:t},bubbles:!0,composed:!0}))}_generateHitsChipTitle(e){let t=[];return t.push(`Total Hits: ${e.total}`),t.push(""),t.push(`Mouse: Trajectory: ${e.mouse.trajectory}, Hover: ${e.mouse.hover}`),t.push(`Scroll: Up: ${e.scroll.up}, Down: ${e.scroll.down}, Left: ${e.scroll.left}, Right: ${e.scroll.right}`),t.push(`Tab: Forwards: ${e.tab.forwards}, Reverse: ${e.tab.reverse}`),t.join(`
+`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),this.updateVisibilityCounts(),j.ForesightManager.instance.addEventListener("elementRegistered",t=>{let o={...t.elementData,elementId:this.generateElementId()};this.elementListItems.set(t.elementData.element,o),this.updateVisibilityCounts()},{signal:e}),j.ForesightManager.instance.addEventListener("elementDataUpdated",t=>{let o=this.elementListItems.get(t.elementData.element);if(o){let a={...t.elementData,elementId:o.elementId};this.elementListItems.set(t.elementData.element,a),this.updateVisibilityCounts(),this.requestUpdate()}},{signal:e}),j.ForesightManager.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.updateVisibilityCounts(),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.requestUpdate(),this.activeCallbacks.delete(t.elementData.element)},{signal:e}),j.ForesightManager.instance.addEventListener("callbackInvoked",t=>{this.activeCallbacks.add(t.elementData.element),this.requestUpdate()},{signal:e}),j.ForesightManager.instance.addEventListener("callbackCompleted",t=>{this.handleCallbackCompleted(t.hitType),this.activeCallbacks.delete(t.elementData.element)},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}updateElementListFromManager(){let e=new Map;j.ForesightManager.instance.registeredElements.forEach((t,o)=>{e.set(o,{...t,elementId:this.generateElementId()})}),this.elementListItems=e}handleCallbackCompleted(e){switch(e.kind){case"mouse":this.hitCount.mouse[e.subType]++;break;case"tab":this.hitCount.tab[e.subType]++;break;case"scroll":this.hitCount.scroll[e.subType]++;break;default:}this.hitCount.total++,this.requestUpdate()}getSortedElements(){let e=Array.from(this.elementListItems.values());switch(this.sortOrder){case"insertionOrder":return e;case"documentOrder":return e.sort(this.sortByDocumentPosition);case"visibility":return e.sort((t,o)=>t.isIntersectingWithViewport!==o.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,o));default:return this.sortOrder,e}}render(){return F.html`
+      <tab-header>
+        <div slot="chips" class="chips-container">
+          <chip-element title="Number of visible registered elements / total registered elements">
+            ${this.visibleElementsCount}/${this.totalElementsCount} visible
+          </chip-element>
+          <chip-element title="${this._generateHitsChipTitle(this.hitCount)}">
+            ${this.hitCount.total} hits
+          </chip-element>
+        </div>
+        <div slot="actions">
+          <single-select-dropdown
+            .dropdownOptions="${this.sortDropdown}"
+            .selectedOptionValue="${this.sortOrder}"
+            .onSelectionChange="${this.handleSortChange}"
+          ></single-select-dropdown>
+        </div>
+      </tab-header>
+      <tab-content
+        .noContentMessage=${this.noContentMessage}
+        .hasContent=${!!this.elementListItems.size}
+      >
+        ${(0,qe.map)(this.getSortedElements(),e=>F.html`
+            <single-element
+              .elementData=${e}
+              .isActive=${this.activeCallbacks.has(e.element)}
+              .isExpanded=${this.expandedElementIds.has(e.elementId)}
+              .onToggle=${this.handleElementToggle}
+            ></single-element>
+          `)}
+      </tab-content>
+    `}};c.styles=F.css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .chips-container {
+      display: flex;
+      gap: 8px;
+    }
+
+    .element-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+    }
+
+    .status-indicator {
+      width: 8px;
+      height: 8px;
+      flex-shrink: 0;
+      transition: all 0.3s ease;
+    }
+
+    .status-indicator.visible {
+      background-color: #4caf50;
+      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+    }
+
+    .status-indicator.hidden {
+      background-color: #666;
+      box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2);
+    }
+
+    .status-indicator.prefetching {
+      background-color: #ffeb3b;
+      box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.4);
+    }
+
+    .element-name {
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 11px;
+      font-weight: 500;
+      color: #e8e8e8;
+    }
+
+    .element-name.callback-active {
+      color: #fff;
+      font-weight: 600;
+    }
+  `,i([(0,h.state)()],c.prototype,"hitCount",2),i([(0,h.state)()],c.prototype,"visibleElementsCount",2),i([(0,h.state)()],c.prototype,"totalElementsCount",2),i([(0,h.state)()],c.prototype,"sortDropdown",2),i([(0,h.state)()],c.prototype,"sortOrder",2),i([(0,h.state)()],c.prototype,"elementListItems",2),i([(0,h.state)()],c.prototype,"noContentMessage",2),i([(0,h.state)()],c.prototype,"activeCallbacks",2),i([(0,h.state)()],c.prototype,"expandedElementIds",2),c=i([(0,h.customElement)("element-tab")],c);var V=require("lit"),Me=require("lit/decorators.js");var te=class extends V.LitElement{constructor(){super(...arguments);this.activeTab="settings";this.tabs=["settings","elements","logs"]}_handleTabClick(e){this.dispatchEvent(new CustomEvent("tab-change",{detail:{tab:e},bubbles:!0,composed:!0}))}render(){return V.html`
+      <div class="tab-selector-wrapper">
+        ${this.tabs.map(e=>V.html`
+            <button
+              class="tab-button ${this.activeTab===e?"active":""}"
+              @click="${()=>this._handleTabClick(e)}"
+              data-tab="${e}"
+            >
+              ${e.charAt(0).toUpperCase()+e.slice(1)}
+            </button>
+          `)}
+      </div>
+    `}};te.styles=V.css`
+    .tab-selector-wrapper {
+      border-bottom: 2px solid #444;
+      margin-top: 12px;
+      display: flex;
+      justify-content: space-evenly;
+      width: 100%;
+    }
+
+    .tab-button {
+      background: none;
+      border: none;
+      color: #9e9e9e;
+      flex: 1;
+      padding: 8px;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s ease;
+      font-size: 13px;
+      font-weight: 500;
+      text-align: center;
+    }
+    .tab-button:hover {
+      color: #b0c4de;
+      background-color: rgba(176, 196, 222, 0.1);
+    }
+
+    .tab-button.active {
+      color: #b0c4de;
+      border-bottom-color: #b0c4de;
+    }
+  `,i([(0,Me.property)({type:String})],te.prototype,"activeTab",2),te=i([(0,Me.customElement)("tab-selector")],te);var _e=require("js.foresight"),k=require("lit"),v=require("lit/decorators.js"),Je=require("lit/directives/map.js");function Ke(n){try{switch(n.type){case"elementRegistered":return{type:"elementRegistered",name:n.elementData.name,id:n.elementData.element.id||"",registerCount:n.elementData.registerCount,hitslop:n.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),summary:n.elementData.registerCount===1?n.elementData.name:`${n.elementData.name} - ${pt(n.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",name:n.elementData.name,id:n.elementData.element.id||"",registerCount:n.elementData.registerCount,unregisterReason:n.unregisterReason,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),summary:`${n.elementData.name} - ${n.unregisterReason}`};case"elementDataUpdated":return{type:"elementDataUpdated",name:n.elementData.name,updatedProps:n.updatedProps||[],isIntersecting:n.elementData.isIntersectingWithViewport,localizedTimestamp:new Date().toLocaleTimeString(),summary:`${n.elementData.name} - ${n.updatedProps.toString()}`};case"callbackInvoked":return{type:"callbackInvoked",name:n.elementData.name,hitType:n.hitType,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),summary:`${n.elementData.name} - ${n.hitType.kind}`};case"callbackCompleted":let s=ct(n.elapsed);return{type:"callbackCompleted",...n.status==="error"?{status:"error",errorMessage:n.errorMessage}:{status:"success"},name:n.elementData.name,hitType:n.hitType,callbackRunTimeFormatted:s,callbackRunTimeRaw:n.elapsed,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),summary:`${n.elementData.name} - ${s}`};case"mouseTrajectoryUpdate":return{type:"mouseTrajectoryUpdate",currentPoint:n.trajectoryPositions?.currentPoint,predictedPoint:n.trajectoryPositions?.predictedPoint,positionCount:n.trajectoryPositions?.positions?.length||0,mousePredictionEnabled:n.predictionEnabled,localizedTimestamp:new Date().toLocaleTimeString(),summary:""};case"scrollTrajectoryUpdate":return{type:"scrollTrajectoryUpdate",currentPoint:n.currentPoint,predictedPoint:n.predictedPoint,scrollDirection:n.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),summary:n.scrollDirection};case"managerSettingsChanged":return{type:"managerSettingsChanged",globalSettings:n.managerData?.globalSettings||{},settingsChanged:n.updatedSettings,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),summary:n.updatedSettings.map(t=>t.setting).join(", ")};default:return{type:"serializationError",error:"Failed to serialize event data",errorMessage:JSON.stringify(n),localizedTimestamp:new Date().toLocaleTimeString(),summary:""}}}catch(s){return{type:"serializationError",error:"Failed to serialize event data",localizedTimestamp:new Date().toLocaleTimeString(),errorMessage:s instanceof Error?s.message:String(s),summary:""}}}function ct(n){return`${(n/1e3).toFixed(4)} s`}function pt(n){let s=["th","st","nd","rd"],e=n%100;return n+(s[(e-20)%10]||s[e]||s[0])}var ye=require("lit"),xe=require("lit/decorators.js");var z=class extends P{constructor(){super(...arguments);this.selectedValues=[]}_handleOptionClick(e){let t=this.selectedValues.includes(e.value);t?this.selectedValues=this.selectedValues.filter(a=>a!==e.value):this.selectedValues=[...this.selectedValues,e.value];let o=!t;this.onSelectionChange?.(e.value,o)}_getTriggerIcon(){return b}_isOptionSelected(e){return this.selectedValues.includes(e.value)}_getTriggerTitle(){let e=this.selectedValues.length;return e===0?"No items selected":e===1?"1 item selected":`${e} items selected`}_getTriggerLabel(){return`Filter options: ${this.selectedValues.length} selected`}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return ye.html`
+      <div class="dropdown-container">
+        <button
+          class="${e}"
+          title="${this._getTriggerTitle()}"
+          @click="${this._toggleDropdown}"
+          aria-haspopup="true"
+          aria-expanded="${this.isDropdownOpen}"
+          aria-controls="dropdown-menu"
+          aria-label="${this._getTriggerLabel()}"
+        >
+          ${this._getTriggerIcon()}
+          <span class="selected-count">${this.selectedValues.length}</span>
+          <svg
+            class="arrow-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+
+        <div class="${t}" id="dropdown-menu" role="menu">
+          ${this.dropdownOptions.map(o=>ye.html`
+              <button
+                value="${o.value}"
+                title="${o.title}"
+                class="${this._isOptionSelected(o)?"active":""}"
+                @click="${()=>this._handleOptionClick(o)}"
+                role="menuitem"
+              >
+                ${o.label}
+              </button>
+            `)}
+        </div>
+      </div>
+    `}};z.styles=[...P.styles,ye.css`
+      .dropdown-menu button.active::after {
+        content: "✓";
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #b0c4de;
+        font-weight: bold;
+      }
+
+      .selected-count {
+        font-size: 10px;
+        color: #b0c4de;
+        margin-left: 2px;
+      }
+    `],i([(0,xe.property)({type:Array})],z.prototype,"selectedValues",2),i([(0,xe.property)()],z.prototype,"onSelectionChange",2),z=i([(0,xe.customElement)("multi-select-dropdown")],z);var oe=require("lit"),ie=require("lit/decorators.js");var D=class extends oe.LitElement{constructor(e){super();this.isExpanded=!1;this.log=e}serializeLogDataWithoutSummary(e){let{summary:t,...o}=e;return JSON.stringify(o,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,t=`log-${e.type}`;e.type==="callbackCompleted"&&"status"in e&&e.status==="error"&&(t+=" error-status"),this.className=t;let o=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return oe.html`
+      <expandable-item
+        .borderColor=${o}
+        .itemId=${e.logId}
+        .isExpanded=${this.isExpanded}
+        .onToggle=${this.onToggle}
+      >
+        <div slot="content">
+          <div class="log-content">
+            <span class="log-time">${e.localizedTimestamp}</span>
+            <span class="log-type-badge">${this.getEventDisplayName(e.type)}</span>
+            <span class="log-summary">${this.truncateLogSummary(e.summary)}</span>
+          </div>
+        </div>
+        <div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
+      </expandable-item>
+    `}};D.styles=[oe.css`
+      :host {
+        display: block;
+      }
+
+      .log-time {
+        color: #b8b8b8;
+        font-weight: 500;
+        font-size: 10px;
+        font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+        min-width: 70px;
+        max-width: 70px;
+        text-align: left;
+        letter-spacing: 0.02em;
+        flex-shrink: 0;
+      }
+
+      .log-type-badge {
+        display: inline-flex;
+        align-items: center;
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        color: var(--log-color, #b0c4de);
+        min-width: 90px;
+        max-width: 90px;
+        white-space: nowrap;
+        text-align: left;
+        margin-left: 10px;
+        flex-shrink: 0;
+      }
+
+      .log-summary {
+        flex: 1;
+        color: #ccc;
+        font-size: 11px;
+        opacity: 0.9;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-left: 6px;
+        font-weight: 400;
+        min-width: 0;
+      }
+
+      .log-content {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        min-width: 0;
+      }
+
+      :host(.log-elementRegistered) {
+        --log-color: #2196f3;
+      }
+      :host(.log-callbackInvoked) {
+        --log-color: #00bcd4;
+      }
+      :host(.log-callbackCompleted) {
+        --log-color: #4caf50;
+      }
+      :host(.log-elementDataUpdated) {
+        --log-color: #ffc107;
+      }
+      :host(.log-elementUnregistered) {
+        --log-color: #ff9800;
+      }
+      :host(.log-managerSettingsChanged) {
+        --log-color: #f44336;
+      }
+      :host(.log-mouseTrajectoryUpdate) {
+        --log-color: #78909c;
+      }
+      :host(.log-scrollTrajectoryUpdate) {
+        --log-color: #607d8b;
+      }
+
+      :host(.log-callbackCompleted.error-status) {
+        --log-color: #f44336;
+        background-color: rgba(244, 67, 54, 0.1);
+      }
+    `],i([(0,ie.property)()],D.prototype,"log",2),i([(0,ie.property)()],D.prototype,"isExpanded",2),i([(0,ie.property)()],D.prototype,"onToggle",2),D=i([(0,ie.customElement)("single-log")],D);var m=class extends k.LitElement{constructor(){super();this.logs=[];this.expandedLogIds=new Set;this.MAX_LOGS=100;this.logIdCounter=0;this.noContentMessage="No logs available";this._abortController=null;this._eventListeners=new Map;this.handleLogLocationChange=e=>{this.logLocation=e};this.handleFilterChange=(e,t)=>{this.eventsEnabled={...this.eventsEnabled,[e]:t},t?this.addForesightEventListener(e):this.removeForesightEventListener(e)};this.handleLogToggle=e=>{let t=new Set(this.expandedLogIds);t.has(e)?t.delete(e):t.add(e),this.expandedLogIds=t};let{logging:{logLocation:e,...t}}=l.instance.devtoolsSettings;this.eventsEnabled=t,this.logLocation=e,this.logDropdown=[{value:"controlPanel",label:"Control Panel",title:"Log only to the control panel",icon:je},{value:"console",label:"Console",title:"Log only to the console",icon:Fe},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:ze},{value:"none",label:"None",title:"Dont log anywhere",icon:Ve}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:b},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:b},{value:"elementDataUpdated",label:"Element Data Updated",title:"Show element data update events",icon:b},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:b},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:b},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:b},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:b},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:b}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([e,t])=>t).map(([e,t])=>e)}shouldShowPerformanceWarning(){let e=this.logLocation==="console"||this.logLocation==="both",t=this.eventsEnabled.mouseTrajectoryUpdate||this.eventsEnabled.scrollTrajectoryUpdate||this.eventsEnabled.elementDataUpdated;return e&&t}getNoLogsMessage(){return Object.values(this.eventsEnabled).filter(Boolean).length===0?"Logging for all events is turned off":this.logLocation==="console"?"No logs to display. Logging location is set to console - check browser console for events.":this.logLocation==="none"?"No logs to display. Logging location is set to none":"Interact with Foresight to generate events."}clearLogs(){this.logs=[],this.expandedLogIds.clear(),this.noContentMessage="Logs cleared"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController,this.setupDynamicEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this.removeAllEventListeners()}setupDynamicEventListeners(){Object.entries(this.eventsEnabled).forEach(([e,t])=>{t&&this.addForesightEventListener(e)})}addForesightEventListener(e){if(this._eventListeners.has(e))return;let t=o=>{this.handleEvent(e,o)};this._eventListeners.set(e,t),_e.ForesightManager.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(_e.ForesightManager.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{_e.ForesightManager.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let o=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${o}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addEventLog(e){let t=Ke(e);if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}let o={...t,logId:(++this.logIdCounter).toString()};this.logs.unshift(o),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}render(){return k.html`
+      <tab-header>
+        <div slot="chips" class="chips-container">
+          <chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
+            ${this.logs.length} events
+          </chip-element>
+        </div>
+        <div slot="actions">
+          ${this.shouldShowPerformanceWarning()?k.html`
+                <div
+                  class="warning-container"
+                  title="Console logging can be slow with frequent trajectory events.
+Consider using 'Control Panel' only for better performance."
+                >
+                  ${Ye}
+                </div>
+              `:""}
+          <single-select-dropdown
+            .dropdownOptions="${this.logDropdown}"
+            .selectedOptionValue="${this.logLocation}"
+            .onSelectionChange="${this.handleLogLocationChange}"
+          ></single-select-dropdown>
+
+          <multi-select-dropdown
+            .dropdownOptions="${this.filterDropdown}"
+            .selectedValues="${this.getSelectedEventFilters()}"
+            .onSelectionChange="${this.handleFilterChange}"
+          ></multi-select-dropdown>
+          <button
+            class="clear-button"
+            title="Clear all logs"
+            ?disabled="${this.logs.length===0}"
+            @click="${this.clearLogs}"
+          >
+            ${Be}
+          </button>
+        </div>
+      </tab-header>
+      <tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!this.logs.length}>
+        ${this.logs.length===0?k.html`<div class="no-items">${this.getNoLogsMessage()}</div>`:(0,Je.map)(this.logs,e=>k.html`
+                <single-log
+                  .log=${e}
+                  .isExpanded=${this.expandedLogIds.has(e.logId)}
+                  .onToggle=${this.handleLogToggle}
+                ></single-log>
+              `)}
+      </tab-content>
+    `}};m.styles=[k.css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .chips-container {
+        display: flex;
+        gap: 4px;
+      }
+
+      .clear-button {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 6px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        vertical-align: top;
+      }
+
+      .clear-button svg {
+        width: 16px;
+        height: 16px;
+        stroke: white;
+        transition: stroke 0.2s;
+      }
+
+      .clear-button:hover {
+        background-color: rgba(176, 196, 222, 0.1);
+      }
+
+      .clear-button:hover svg {
+        stroke: #b0c4de;
+      }
+
+      .clear-button:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .clear-button:disabled:hover {
+        background: none;
+      }
+
+      .clear-button:disabled svg {
+        stroke: #666;
+      }
+
+      .no-items {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        text-align: center;
+        font-family: "Courier New", monospace;
+        font-style: italic;
+        padding: 20px;
+        color: #999;
+      }
+
+      .warning-container {
+        background: none;
+        border: none;
+        color: #ffc107;
+        cursor: help;
+        padding: 6px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        vertical-align: top;
+      }
+
+      .warning-container svg {
+        width: 16px;
+        height: 16px;
+        stroke: #ffc107;
+        fill: none;
+        transition: stroke 0.2s;
+      }
+
+      .warning-container:hover {
+        background-color: rgba(255, 193, 7, 0.1);
+      }
+
+      .warning-container:hover svg {
+        stroke: #ffdc3e;
+      }
+    `],i([(0,v.state)()],m.prototype,"logDropdown",2),i([(0,v.state)()],m.prototype,"filterDropdown",2),i([(0,v.state)()],m.prototype,"logLocation",2),i([(0,v.state)()],m.prototype,"eventsEnabled",2),i([(0,v.state)()],m.prototype,"logs",2),i([(0,v.state)()],m.prototype,"expandedLogIds",2),i([(0,v.property)()],m.prototype,"noContentMessage",2),m=i([(0,v.customElement)("log-tab")],m);var $e=require("js.foresight"),B=require("lit"),H=require("lit/decorators.js");var Oe="points",Xe="px",Ze="tabs",Qe="ms";var se=require("lit"),A=require("lit/decorators.js");var ne=require("lit"),we=require("lit/decorators.js");var R=class extends ne.LitElement{constructor(){super(...arguments);this.header="";this.description=""}render(){return ne.html`<div class="setting-item">
+      <label>
+        <span class="setting-header">${this.header}</span>
+        <span class="setting-description"> ${this.description} </span>
+      </label>
+      <div class="setting-controls">
+        <slot name="controls"></slot>
+      </div>
+    </div>`}};R.styles=[ne.css`
+      .setting-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 0;
+        border-bottom: 1px solid rgba(80, 80, 80, 0.2);
+      }
+
+      .setting-item:last-child {
+        border-bottom: none;
+      }
+      .setting-controls {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+      .setting-description {
+        font-size: 11px;
+        color: #9e9e9e;
+        line-height: 1.3;
+        font-weight: normal;
+      }
+      .setting-item label {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-weight: 500;
+        color: #fff;
+        font-size: 13px;
+        cursor: pointer;
+        min-width: 180px;
+      }
+      .setting-header {
+        font-weight: 500;
+        color: #fff;
+        font-size: 13px;
+      }
+    `],i([(0,we.property)({type:String})],R.prototype,"header",2),i([(0,we.property)({type:String})],R.prototype,"description",2),R=i([(0,we.customElement)("setting-item")],R);var et=require("js.foresight");var E=class extends se.LitElement{constructor(){super(...arguments);this.isChecked=!1;this.header="";this.description="";this.setting="enableMousePrediction"}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let o=t.checked;this.setting==="showNameTags"?this.dispatchEvent(new CustomEvent("setting-changed",{detail:{setting:this.setting,value:o},bubbles:!0})):et.ForesightManager.instance.alterGlobalSettings({[this.setting]:o})}}render(){return se.html`<setting-item header=${this.header} description=${this.description}>
+      <input
+        slot="controls"
+        type="checkbox"
+        .checked=${this.isChecked}
+        @change=${this.handleCheckboxChange}
+      />
+    </setting-item>`}};E.styles=[se.css`
+      input[type="checkbox"] {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        position: relative;
+        width: 44px;
+        height: 22px;
+        background-color: #444;
+        cursor: pointer;
+        outline: none;
+        transition: all 0.3s ease;
+        vertical-align: middle;
+        flex-shrink: 0;
+        margin: 0;
+        border: 2px solid #555;
+      }
+
+      input[type="checkbox"]::before {
+        content: "";
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background-color: white;
+        top: 1px;
+        left: 1px;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      }
+
+      input[type="checkbox"]:checked {
+        background-color: #b0c4de;
+        border-color: #b0c4de;
+      }
+
+      input[type="checkbox"]:checked::before {
+        transform: translateX(22px);
+        background-color: white;
+      }
+
+      input[type="checkbox"]:hover {
+        box-shadow: 0 0 0 3px rgba(176, 196, 222, 0.1);
+      }
+    `],i([(0,A.property)({type:Boolean})],E.prototype,"isChecked",2),i([(0,A.property)({type:String})],E.prototype,"header",2),i([(0,A.property)({type:String})],E.prototype,"description",2),i([(0,A.property)({type:String})],E.prototype,"setting",2),E=i([(0,A.customElement)("setting-item-checkbox")],E);var ae=require("lit"),u=require("lit/decorators.js");var tt=require("js.foresight");var g=class extends ae.LitElement{constructor(){super(...arguments);this.minValue=0;this.maxValue=100;this.currentValue=50;this.unit="px";this.header="";this.description="";this.setting="tabOffset";this.displayValue=50}handleRangeInput(e){let t=e.target;t instanceof HTMLInputElement&&(this.displayValue=parseInt(t.value,10))}handleRangeChange(e){let t=e.target;if(t instanceof HTMLInputElement){let o=parseInt(t.value,10);this.displayValue=o,tt.ForesightManager.instance.alterGlobalSettings({[this.setting]:o})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return ae.html`<setting-item header=${this.header} description=${this.description}>
+      <div slot="controls" class="range-wrapper">
+        <input
+          slot="controls"
+          type="range"
+          min="${this.minValue}"
+          max="${this.maxValue}"
+          step="1"
+          .value=${this.displayValue}
+          @input=${this.handleRangeInput}
+          @change=${this.handleRangeChange}
+        />
+        <span class="setting-range-value">${this.displayValue} ${this.unit}</span>
+      </div>
+    </setting-item>`}};g.styles=[ae.css`
+      .setting-range-value {
+        font-size: 12px;
+        color: #b0c4de;
+        font-weight: 500;
+        min-width: 45px;
+        text-align: right;
+      }
+
+      .range-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+      }
+
+      input[type="range"] {
+        margin: 0;
+        cursor: pointer;
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        height: 22px;
+        vertical-align: middle;
+        width: 100px;
+      }
+
+      input[type="range"]::-webkit-slider-runnable-track {
+        height: 6px;
+        background: #444;
+        border: 1px solid #555;
+      }
+
+      input[type="range"]::-moz-range-track {
+        height: 6px;
+        background: #444;
+        border: 1px solid #555;
+      }
+
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        margin-top: -7px;
+        background: #b0c4de;
+        height: 20px;
+        width: 20px;
+        border: 2px solid #333;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        transition: all 0.2s ease;
+      }
+
+      input[type="range"]::-moz-range-thumb {
+        background: #b0c4de;
+        height: 20px;
+        width: 20px;
+        border: 2px solid #333;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        transition: all 0.2s ease;
+      }
+
+      input[type="range"]:hover::-webkit-slider-thumb {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
+      }
+
+      input[type="range"]:hover::-moz-range-thumb {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
+      }
+    `],i([(0,u.property)({type:Number})],g.prototype,"minValue",2),i([(0,u.property)({type:Number})],g.prototype,"maxValue",2),i([(0,u.property)({type:Number})],g.prototype,"currentValue",2),i([(0,u.property)({type:String})],g.prototype,"unit",2),i([(0,u.property)({type:String})],g.prototype,"header",2),i([(0,u.property)({type:String})],g.prototype,"description",2),i([(0,u.property)({type:String})],g.prototype,"setting",2),i([(0,u.state)()],g.prototype,"displayValue",2),g=i([(0,u.customElement)("setting-item-range")],g);var C=class extends B.LitElement{constructor(){super();this.changedSettings=[];this._abortController=null;let e=l.instance.devtoolsSettings,t=$e.ForesightManager.instance.getManagerData.globalSettings;this.devtoolsSettings=Object.assign({},e),this.managerSettings=Object.assign({},t),this.initialSettings={devtools:Object.assign({},e),manager:Object.assign({},t)}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;$e.ForesightManager.instance.addEventListener("managerSettingsChanged",t=>{this.managerSettings=t.managerData.globalSettings,this._updateChangedSettings()},{signal:e}),this._updateChangedSettings()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}_updateChangedSettings(){let e=[];this._checkManagerSettingsChanges(e),this._checkDevtoolsSettingsChanges(e),this.changedSettings=e}_checkManagerSettingsChanges(e){let t=["enableMousePrediction","enableTabPrediction","enableScrollPrediction","trajectoryPredictionTime","positionHistorySize","tabOffset","scrollMargin"];for(let o of t){let a=this.initialSettings.manager[o],r=this.managerSettings[o];a!==r&&e.push({name:o,initial:a,current:r})}}_checkDevtoolsSettingsChanges(e){let t=["showNameTags"];for(let o of t){let a=this.initialSettings.devtools[o],r=this.devtoolsSettings[o];a!==r&&e.push({name:o,initial:a,current:r})}}_handleDevtoolsSettingChange(e){let{setting:t,value:o}=e.detail;t==="showNameTags"&&(this.devtoolsSettings={...this.devtoolsSettings,showNameTags:o},l.instance.alterDevtoolsSettings({showNameTags:o}),this._updateChangedSettings())}async handleCopySettings(){if(this.managerSettings)try{let e=this.generateSettingsCode(this.managerSettings);navigator.clipboard&&navigator.clipboard.writeText&&await navigator.clipboard.writeText(e)}catch(e){console.error("Failed to copy settings code:",e)}}generateSettingsCode(e){let t={enableMousePrediction:e.enableMousePrediction,enableTabPrediction:e.enableTabPrediction,enableScrollPrediction:e.enableScrollPrediction,positionHistorySize:e.positionHistorySize,trajectoryPredictionTime:e.trajectoryPredictionTime,tabOffset:e.tabOffset,scrollMargin:e.scrollMargin};return`ForesightManager.initialize(${JSON.stringify(t,null,2)})`}render(){if(!this.managerSettings||!this.devtoolsSettings)return B.html`<tab-content
+        .noContentMessage=${"Loading settings..."}
+        .hasContent=${!1}
+      ></tab-content>`;let e=this.managerSettings,t=this.changedSettings.length>0?`Settings that have been changed this session compared to your initialized settings.
+Click on the copy icon to easely copy the new setting into your project
+
+`+this.changedSettings.map(o=>`${o.name}: ${JSON.stringify(o.initial)} -> ${JSON.stringify(o.current)}`).join(`
+`):"No settings changed from initial values";return B.html`
+      <tab-header>
+        <div slot="chips" class="chips-container">
+          <chip-element .title=${t}> ${this.changedSettings.length} changed </chip-element>
+        </div>
+        <div slot="actions">
+          <copy-icon
+            title="Copy current settings as code"
+            .onCopy=${()=>this.handleCopySettings()}
+          ></copy-icon>
+        </div>
+      </tab-header>
+
+      <tab-content .hasContent=${!0}>
+        <div class="settings-content">
+          <div class="settings-section">
+            <div class="settings-group">
+              <h4>Mouse Prediction</h4>
+              <setting-item-checkbox
+                .isChecked=${e.enableMousePrediction}
+                header="Enable Mouse Prediction"
+                description="Execute callbacks when mouse is ${e.trajectoryPredictionTime}ms away from registered elements in mouse direction"
+                setting="enableMousePrediction"
+              ></setting-item-checkbox>
+              <setting-item-range
+                .currentValue=${e.trajectoryPredictionTime}
+                .maxValue=${200}
+                .minValue=${10}
+                .unit=${Qe}
+                header="Prediction Time"
+                description="How far into the future to calculate mouse trajectory path"
+                setting="trajectoryPredictionTime"
+              ></setting-item-range>
+              <setting-item-range
+                .currentValue=${e.positionHistorySize}
+                .maxValue=${30}
+                .minValue=${2}
+                .unit=${Oe}
+                header="Position History Size"
+                description="How far into the future, in ${Oe}, to calculate mouse trajectory path"
+                setting="positionHistorySize"
+              >
+              </setting-item-range>
+            </div>
+            <div class="settings-group">
+              <h4>Keyboard Navigation</h4>
+              <setting-item-checkbox
+                .isChecked=${e.enableTabPrediction}
+                header="Enable Tab Prediction"
+                description="Execute callbacks when user ${e.tabOffset} tabbable elements away from registered elements in tab direction"
+                setting="enableTabPrediction"
+              >
+              </setting-item-checkbox>
+              <setting-item-range
+                .currentValue=${e.tabOffset}
+                .maxValue=${20}
+                .minValue=${0}
+                .unit=${Ze}
+                header="Tab Offset"
+                description="Number of tabbable elements to look ahead when predicting navigation"
+                setting="tabOffset"
+              >
+              </setting-item-range>
+            </div>
+
+            <div class="settings-group">
+              <h4>Scroll Prediction</h4>
+              <setting-item-checkbox
+                .isChecked=${e.enableScrollPrediction}
+                header="Enable Scroll Prediction"
+                description="Execute callbacks when user is ${e.scrollMargin}px away from registered elements in scroll direction"
+                setting="enableScrollPrediction"
+              ></setting-item-checkbox>
+              <setting-item-range
+                .currentValue=${e.scrollMargin}
+                .maxValue=${300}
+                .minValue=${30}
+                .unit=${Xe}
+                header="Scroll Margin"
+                description="Pixel distance to check from mouse position in scroll direction"
+                setting="scrollMargin"
+              ></setting-item-range>
+            </div>
+
+            <!-- Developer Tools Group -->
+            <div class="settings-group">
+              <h4>Developer Tools</h4>
+              <setting-item-checkbox
+                .isChecked=${this.devtoolsSettings.showNameTags}
+                header="Show Name Tags"
+                description="Display name tags over each registered element in the debugger"
+                setting="showNameTags"
+                @setting-changed=${this._handleDevtoolsSettingChange}
+              ></setting-item-checkbox>
+            </div>
+          </div>
+        </div>
+      </tab-content>
+    `}};C.styles=B.css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .settings-content {
+      display: block;
+    }
+
+    .settings-section {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .settings-group {
+      background: rgba(30, 30, 30, 0.6);
+      padding: 16px;
+      border: 1px solid rgba(176, 196, 222, 0.1);
+    }
+
+    .settings-group h4 {
+      margin: 0 0 12px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #b0c4de;
+      border-bottom: 1px solid rgba(176, 196, 222, 0.2);
+      padding-bottom: 8px;
+    }
+  `,i([(0,H.state)()],C.prototype,"managerSettings",2),i([(0,H.state)()],C.prototype,"initialSettings",2),i([(0,H.state)()],C.prototype,"devtoolsSettings",2),i([(0,H.state)()],C.prototype,"changedSettings",2),C=i([(0,H.customElement)("settings-tab")],C);var y=class extends re.LitElement{constructor(){super();this.isMinimized=!1;this.visibleCount=0;this.totalCount=0;this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this._handleVisibilityCountChange=e=>{let t=e;this.visibleCount=t.detail.visibleCount,this.totalCount=t.detail.totalCount};let e=localStorage.getItem(this.localStorageSelectedTabKey);this.activeTab=e||"logs"}_handleTabChange(e){this.activeTab=e.detail.tab,localStorage.setItem(this.localStorageSelectedTabKey,this.activeTab)}connectedCallback(){super.connectedCallback(),this.addEventListener("visibility-count-updated",this._handleVisibilityCountChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("visibility-count-updated",this._handleVisibilityCountChange)}render(){return re.html`
+      <div class="control-wrapper ${this.isMinimized?"minimized":""}">
+        <div class="title-wrapper">
+          <button @click="${()=>this.isMinimized=!this.isMinimized}" class="minimize-button">
+            -
+          </button>
+          <h1>Foresight DevTools</h1>
+          <span
+            title="Number of visible registered elements / total registered elements"
+            class="title-element-count"
+            >${this.visibleCount}/${this.totalCount}</span
+          >
+        </div>
+
+        <div class="tab-container ${this.isMinimized?"hidden":""}">
+          <tab-selector
+            .activeTab="${this.activeTab}"
+            @tab-change="${this._handleTabChange}"
+          ></tab-selector>
+
+          <div class="tab-content">
+            <log-tab class=${(0,De.classMap)({active:this.activeTab==="logs"})}></log-tab>
+            <element-tab class=${(0,De.classMap)({active:this.activeTab==="elements"})}></element-tab>
+            <settings-tab
+              class=${(0,De.classMap)({active:this.activeTab==="settings"})}
+            ></settings-tab>
+          </div>
+        </div>
+      </div>
+    `}};y.styles=re.css`
+    .control-wrapper {
+      padding: 12px;
+      position: fixed;
+      bottom: 10px;
+      right: 10px;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
+      font-family: Arial, sans-serif;
+      font-size: 13px;
+      z-index: 10001;
+      pointer-events: auto;
+      display: flex;
+      flex-direction: column;
+      width: 450px;
+      height: 450px;
+      transition: width 0.3s ease, height 0.3s ease;
+      box-sizing: border-box;
+    }
+    .control-wrapper.minimized {
+      width: 230px;
+      height: 45px;
+    }
+
+    .title-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0;
+      flex-shrink: 0;
+    }
+
+    .title-wrapper h1 {
+      margin: 0;
+      font-size: 15px;
+    }
+
+    .title-element-count {
+      font-size: 14px;
+      text-align: right;
+    }
+
+    .minimize-button {
+      background: none;
+      border: none;
+      color: white;
+      font-size: 22px;
+      cursor: pointer;
+      line-height: 1;
+      padding: 0;
+    }
+
+    .tab-container {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .tab-container.hidden {
+      display: none;
+    }
+
+    .tab-content {
+      flex: 1;
+      position: relative;
+    }
+
+    .tab-content > * {
+      display: none;
+    }
+
+    .tab-content > .active {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  `,i([(0,G.state)()],y.prototype,"activeTab",2),i([(0,G.state)()],y.prototype,"isMinimized",2),i([(0,G.state)()],y.prototype,"visibleCount",2),i([(0,G.state)()],y.prototype,"totalCount",2),y=i([(0,G.customElement)("control-panel")],y);customElements.get("control-panel")||customElements.define("control-panel",y);var me=require("lit"),nt=require("lit/decorators.js");var de=require("lit"),W=require("lit/decorators.js"),le=require("js.foresight");var L=class extends de.LitElement{constructor(){super(...arguments);this.overlayMap=new Map;this.callbackAnimations=new Map;this._abortController=null}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;le.ForesightManager.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),le.ForesightManager.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),le.ForesightManager.instance.addEventListener("elementDataUpdated",t=>{t.updatedProps.includes("bounds")&&this.createOrUpdateElementOverlay(t.elementData),t.updatedProps.includes("visibility")&&(t.elementData.isIntersectingWithViewport||this.removeElementOverlay(t.elementData))},{signal:e}),le.ForesightManager.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),le.ForesightManager.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let o=t;this.updateNameTagVisibility(o.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let o=document.createElement("div");o.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(o);let a={expandedOverlay:t,nameLabel:o};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:o,nameLabel:a}=e,{expandedRect:r}=t.elementBounds,ue=r.right-r.left,Ie=r.bottom-r.top;o.style.width=`${ue}px`,o.style.height=`${Ie}px`,o.style.transform=`translate3d(${r.left}px, ${r.top}px, 0)`,l.instance.devtoolsSettings.showNameTags?(a.textContent=t.name,a.style.display="block",a.style.transform=`translate3d(${r.left}px, ${r.top-25}px, 0)`):a.style.display="none"}createOrUpdateElementOverlay(e){let t=this.overlayMap.get(e.element);t||(t=this.createElementOverlays(e)),this.updateElementOverlays(t,e)}removeElementOverlay(e){let t=this.overlayMap.get(e.element);t&&(t.expandedOverlay.remove(),t.nameLabel.remove(),this.overlayMap.delete(e.element)),this.clearCallbackAnimationTimeout(e.element)}clearCallbackAnimationTimeout(e){let t=this.callbackAnimations.get(e);t&&(clearTimeout(t.timeoutId),this.callbackAnimations.delete(e))}highlightElementCallback(e,t){let o=this.overlayMap.get(e.element);if(o)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":o.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":o.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":o.expandedOverlay.classList.add("invoked-by-tab");break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(t){let o=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:o})}}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let o=t.nameLabel;e?o.style.display="block":o.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}render(){return de.html` <div id="overlays-container"></div> `}};L.styles=[de.css`
+      :host {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 9999;
+      }
+
+      .expanded-overlay {
+        position: absolute;
+        will-change: transform, box-shadow;
+        border: 1px dashed rgba(100, 116, 139, 0.4);
+        background-color: rgba(100, 116, 139, 0.05);
+        transition: border-color 0.2s ease, background-color 0.2s ease;
+      }
+
+      .expanded-overlay.invoked-by-scroll {
+        --glow-color-rgb: 234, 179, 8;
+        border-color: #eab308;
+        background-color: rgba(var(--glow-color-rgb), 0.1);
+        animation: callback-glow 2s ease-in-out infinite;
+      }
+
+      .expanded-overlay.invoked-by-mouse {
+        --glow-color-rgb: 59, 130, 246;
+        border-color: #3b82f6;
+        background-color: rgba(var(--glow-color-rgb), 0.1);
+        animation: callback-glow 2s ease-in-out infinite;
+      }
+
+      .expanded-overlay.invoked-by-tab {
+        --glow-color-rgb: 249, 115, 22;
+        border-color: #f97316;
+        background-color: rgba(var(--glow-color-rgb), 0.1);
+        animation: callback-glow 2s ease-in-out infinite;
+      }
+      @keyframes callback-glow {
+        0% {
+          box-shadow: 0 0 5px 2px rgba(var(--glow-color-rgb), 0.3);
+        }
+        50% {
+          box-shadow: 0 0 15px 4px rgba(var(--glow-color-rgb), 0.6);
+        }
+        100% {
+          box-shadow: 0 0 5px 2px rgba(var(--glow-color-rgb), 0.3);
+        }
+      }
+
+      .name-label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        will-change: transform;
+        background-color: rgba(27, 31, 35, 0.85);
+        backdrop-filter: blur(4px);
+        color: white;
+        padding: 4px 8px;
+        font-size: 11px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+          sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        z-index: 10001;
+        white-space: nowrap;
+        pointer-events: none;
+      }
+    `],i([(0,W.state)()],L.prototype,"overlayMap",2),i([(0,W.state)()],L.prototype,"callbackAnimations",2),i([(0,W.query)("#overlays-container")],L.prototype,"containerElement",2),L=i([(0,W.customElement)("element-overlays")],L);var pe=require("lit"),ce=require("lit/decorators.js"),it=require("lit/directives/style-map.js"),ke=require("js.foresight");var O=class extends pe.LitElement{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=ke.ForesightManager.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestTrajectory=null;this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1)};this.handleTrajectoryUpdate=e=>{this._mousePredictionIsEnabled&&(this._isVisible=!0,this._latestTrajectory=e.trajectoryPositions,this._isUpdateScheduled||(this._isUpdateScheduled=!0,requestAnimationFrame(this.renderTrajectory)))};this.renderTrajectory=()=>{if(!this._latestTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestTrajectory,o=t.x-e.x,a=t.y-e.y,r=Math.sqrt(o*o+a*a);if(r===0)this._trajectoryStyles={display:"none"};else{let ue=Math.atan2(a,o)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${ue}deg)`,width:`${r}px`}}this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;ke.ForesightManager.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),ke.ForesightManager.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),ke.ForesightManager.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return pe.html` <div class="trajectory-line" style=${(0,it.styleMap)(e)}></div> `}};O.styles=[pe.css`
+      :host {
+        display: block;
+      }
+
+      .trajectory-line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        will-change: transform, width;
+        transform-origin: left center;
+        height: 4px;
+        background: linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.4));
+        z-index: 9999;
+        border-radius: 2px;
+        box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
+      }
+
+      .trajectory-line::after {
+        content: "";
+        position: absolute;
+        right: -6px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid #3b82f6;
+        border-top: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
+      }
+    `],i([(0,ce.state)()],O.prototype,"_mousePredictionIsEnabled",2),i([(0,ce.state)()],O.prototype,"_isVisible",2),i([(0,ce.state)()],O.prototype,"_trajectoryStyles",2),O=i([(0,ce.customElement)("mouse-trajectory")],O);var he=require("lit"),Y=require("lit/decorators.js"),ot=require("lit/directives/style-map.js"),ge=require("js.foresight");var S=class extends he.LitElement{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=ge.ForesightManager.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=ge.ForesightManager.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let o=e.updatedSettings.find(a=>a.setting==="scrollMargin");o&&(this._scrollMargin=o.newValue)};this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,requestAnimationFrame(this.renderScrollTrajectory)))};this.renderScrollTrajectory=()=>{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,o=t.x-e.x,a=t.y-e.y,r=Math.atan2(a,o)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${r}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;ge.ForesightManager.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),ge.ForesightManager.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),ge.ForesightManager.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",width:`${this._scrollMargin}px`,...this._trajectoryStyles};return he.html` <div class="scroll-trajectory-line" style=${(0,ot.styleMap)(e)}></div> `}};S.styles=[he.css`
+      :host {
+        display: block;
+      }
+
+      .scroll-trajectory-line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        will-change: transform, width;
+        transform-origin: left center;
+        height: 4px;
+        background: repeating-linear-gradient(
+          90deg,
+          #eab308 0px,
+          #eab308 8px,
+          transparent 8px,
+          transparent 16px
+        );
+        z-index: 9999;
+        border-radius: 2px;
+        animation: scroll-dash-flow 1.5s linear infinite;
+        box-shadow: 0 0 12px rgba(234, 179, 8, 0.4);
+      }
+
+      .scroll-trajectory-line::after {
+        content: "";
+        position: absolute;
+        right: -6px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid #eab308;
+        border-top: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6));
+        animation: scroll-arrow-pulse 1.5s ease-in-out infinite;
+      }
+
+      @keyframes scroll-dash-flow {
+        0% {
+          background-position: 0px 0px;
+        }
+        100% {
+          background-position: 16px 0px;
+        }
+      }
+
+      @keyframes scroll-arrow-pulse {
+        0%,
+        100% {
+          transform: translateY(-50%) scale(1);
+          filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6));
+        }
+        50% {
+          transform: translateY(-50%) scale(1.2);
+          filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
+        }
+      }
+    `],i([(0,Y.state)()],S.prototype,"_scrollPredictionIsEnabled",2),i([(0,Y.state)()],S.prototype,"_scrollMargin",2),i([(0,Y.state)()],S.prototype,"_isVisible",2),i([(0,Y.state)()],S.prototype,"_trajectoryStyles",2),S=i([(0,Y.customElement)("scroll-trajectory")],S);var Ee=class extends me.LitElement{render(){return me.html`
+      <div id="overlay-container">
+        <mouse-trajectory></mouse-trajectory>
+        <scroll-trajectory></scroll-trajectory>
+        <element-overlays></element-overlays>
+      </div>
+    `}};Ee.styles=[me.css`
+      :host {
+        display: block;
+      }
+      #overlay-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 9999;
+      }
+    `],Ee=i([(0,nt.customElement)("debug-overlay")],Ee);var l=class extends q.LitElement{constructor(){super(...arguments);this.isInitialized=!1;this.devtoolsSettings={showDebugger:!0,isControlPanelDefaultMinimized:!1,showNameTags:!0,sortElementList:"visibility",logging:{logLocation:"controlPanel",callbackCompleted:!0,callbackInvoked:!0,elementDataUpdated:!1,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1}}}static initialize(e){l._instance||(l._instance=document.createElement("foresight-devtools"),document.body.appendChild(l._instance));let t=l._instance;return t.isInitialized=!0,e!==void 0&&t.alterDevtoolsSettings(e),t}static get instance(){return l._instance?l._instance:l.initialize()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}shouldUpdateSetting(e,t){return e!==void 0&&e!==t}alterDevtoolsSettings(e){e&&(this.shouldUpdateSetting(e.showNameTags,this.devtoolsSettings.showNameTags)&&(this.devtoolsSettings.showNameTags=e.showNameTags,this.dispatchEvent(new CustomEvent("showNameTagsChanged",{detail:{showNameTags:e.showNameTags},bubbles:!0}))),this.shouldUpdateSetting(e.showDebugger,this.devtoolsSettings.showDebugger)&&(this.devtoolsSettings.showDebugger=e.showDebugger,this.requestUpdate()),this.shouldUpdateSetting(e.isControlPanelDefaultMinimized,this.devtoolsSettings.isControlPanelDefaultMinimized)&&(this.devtoolsSettings.isControlPanelDefaultMinimized=e.isControlPanelDefaultMinimized),this.shouldUpdateSetting(e.sortElementList,this.devtoolsSettings.sortElementList)&&(this.devtoolsSettings.sortElementList=e.sortElementList),e.logging&&(this.shouldUpdateSetting(e.logging.logLocation,this.devtoolsSettings.logging.logLocation)&&(this.devtoolsSettings.logging.logLocation=e.logging.logLocation),this.shouldUpdateSetting(e.logging.callbackCompleted,this.devtoolsSettings.logging.callbackCompleted)&&(this.devtoolsSettings.logging.callbackCompleted=e.logging.callbackCompleted),this.shouldUpdateSetting(e.logging.callbackInvoked,this.devtoolsSettings.logging.callbackInvoked)&&(this.devtoolsSettings.logging.callbackInvoked=e.logging.callbackInvoked),this.shouldUpdateSetting(e.logging.elementDataUpdated,this.devtoolsSettings.logging.elementDataUpdated)&&(this.devtoolsSettings.logging.elementDataUpdated=e.logging.elementDataUpdated),this.shouldUpdateSetting(e.logging.elementRegistered,this.devtoolsSettings.logging.elementRegistered)&&(this.devtoolsSettings.logging.elementRegistered=e.logging.elementRegistered),this.shouldUpdateSetting(e.logging.elementUnregistered,this.devtoolsSettings.logging.elementUnregistered)&&(this.devtoolsSettings.logging.elementUnregistered=e.logging.elementUnregistered),this.shouldUpdateSetting(e.logging.managerSettingsChanged,this.devtoolsSettings.logging.managerSettingsChanged)&&(this.devtoolsSettings.logging.managerSettingsChanged=e.logging.managerSettingsChanged),this.shouldUpdateSetting(e.logging.mouseTrajectoryUpdate,this.devtoolsSettings.logging.mouseTrajectoryUpdate)&&(this.devtoolsSettings.logging.mouseTrajectoryUpdate=e.logging.mouseTrajectoryUpdate),this.shouldUpdateSetting(e.logging.scrollTrajectoryUpdate,this.devtoolsSettings.logging.scrollTrajectoryUpdate)&&(this.devtoolsSettings.logging.scrollTrajectoryUpdate=e.logging.scrollTrajectoryUpdate)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?q.html``:q.html`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[q.css`
+      :host {
+        display: block;
+      }
+    `],l._instance=null,i([(0,Le.state)()],l.prototype,"isInitialized",2),l=i([(0,Le.customElement)("foresight-devtools")],l);0&&(module.exports={ForesightDevtools});
+//# sourceMappingURL=index.js.map