js.foresight-devtools 1.3.4 → 1.4.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit from 'lit';
 import { LitElement, TemplateResult, PropertyValues } from 'lit';
 import { ForesightEvent, ForesightElementData, ForesightManagerSettings as ForesightManagerSettings$1 } from 'js.foresight';
-import { ForesightEvent as ForesightEvent$1, ElementCallbackInfo, HitSlop, UpdatedDataPropertyNames, CallbackHitType, Point, ScrollDirection, ForesightManagerSettings, UpdatedManagerSetting, CallbackHits, ForesightElementData as ForesightElementData$1 } from 'js.foresight/types/types';
+import { ForesightEvent as ForesightEvent$1, ElementCallbackInfo, HitSlop, UpdatedDataPropertyNames, CallbackHitType, Point, ScrollDirection, ForesightManagerSettings, UpdatedManagerSetting, CallbackHits, ForesightElementData as ForesightElementData$1, ForesightManagerData } from 'js.foresight/types/types';
 
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
@@ -361,6 +361,7 @@ interface ManagerDataPayload extends PayloadBase {
     registeredElements: Array<Omit<ForesightElementData$1, "element"> & {
         elementInfo: string;
     }>;
+    loadedModules: ForesightManagerData["loadedModules"];
 }
 type SerializedEventData = ElementRegisteredPayload | ElementUnregisteredEvent | ElementReactivatedPayload | ElementDataUpdatedPayload | CallbackInvokedPayload | CallbackCompletedPayload | MouseTrajectoryUpdatePayload | ScrollTrajectoryUpdatePayload | ManagerSettingsChangedPayload | DeviceStrategyChangedPayload | ManagerDataPayload | SerializationErrorPayload;
 

package/dist/index.js

@@ -1,4 +1,4 @@
-var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e,t)=>{for(var i=t>1?void 0:t?He(r,e):r,a=o.length-1,s;a>=0;a--)(s=o[a])&&(i=(t?s(r,e,i):s(i))||i);return t&&i&&ze(r,e,i),i};import{LitElement as zn,css as Hn,html as je}from"lit";import{customElement as Bn,state as Gn}from"lit/decorators.js";import{LitElement as yn,css as wn,html as xn}from"lit";import{customElement as kn,state as q}from"lit/decorators.js";import{classMap as re}from"lit/directives/class-map.js";import{ForesightManager as Ve}from"js.foresight";import{css as St,html as W,LitElement as Tt}from"lit";import{customElement as Dt,state as $}from"lit/decorators.js";import{map as Me}from"lit/directives/map.js";import{ForesightManager as I}from"js.foresight";import{html as c}from"lit";var le=c`
+var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e,t)=>{for(var i=t>1?void 0:t?He(r,e):r,a=o.length-1,s;a>=0;a--)(s=o[a])&&(i=(t?s(r,e,i):s(i))||i);return t&&i&&ze(r,e,i),i};import{LitElement as zn,css as Hn,html as je}from"lit";import{customElement as Bn,state as Gn}from"lit/decorators.js";import{LitElement as yn,css as wn,html as xn}from"lit";import{customElement as kn,state as q}from"lit/decorators.js";import{classMap as re}from"lit/directives/class-map.js";import{ForesightManager as Fe}from"js.foresight";import{css as St,html as W,LitElement as Tt}from"lit";import{customElement as Dt,state as $}from"lit/decorators.js";import{map as Me}from"lit/directives/map.js";import{ForesightManager as I}from"js.foresight";import{html as c}from"lit";var le=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -272,11 +272,11 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
     <circle cx="12" cy="12" r="10" />
     <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
   </svg>
-`;import{LitElement as Be,html as Ge,css as We}from"lit";import{customElement as Ke,property as qe}from"lit/decorators.js";var V=class extends Be{constructor(){super(...arguments);this.title=""}render(){return Ge`
+`;import{LitElement as Be,html as Ge,css as We}from"lit";import{customElement as Ke,property as qe}from"lit/decorators.js";var F=class extends Be{constructor(){super(...arguments);this.title=""}render(){return Ge`
       <span class="chip" title="${this.title}">
         <slot></slot>
       </span>
-    `}};V.styles=[We`
+    `}};F.styles=[We`
       :host {
         display: inline-block;
       }
@@ -296,7 +296,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
         line-height: 1.2;
         transition: all 0.2s ease;
       }
-    `],n([qe({type:String})],V.prototype,"title",2),V=n([Ke("chip-element")],V);import{LitElement as Ye,html as ne,css as Je}from"lit";import{customElement as Xe,property as xe}from"lit/decorators.js";var _=class extends Ye{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return ne`
+    `],n([qe({type:String})],F.prototype,"title",2),F=n([Ke("chip-element")],F);import{LitElement as Ye,html as ne,css as Je}from"lit";import{customElement as Xe,property as xe}from"lit/decorators.js";var _=class extends Ye{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return ne`
       <div class="content-container">
         ${this.hasContent?ne`<slot></slot>`:ne`<div class="no-content-message">${this.noContentMessage}</div>`}
       </div>
@@ -549,7 +549,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
         color: #b0c4de;
         font-weight: bold;
       }
-    `],n([at()],p.prototype,"isDropdownOpen",2),n([ot({type:Array})],p.prototype,"dropdownOptions",2);var L=p;var A=class extends L{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:rt``}_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)}};n([Ce({type:String})],A.prototype,"selectedOptionValue",2),n([Ce({type:Function})],A.prototype,"onSelectionChange",2),A=n([st("single-select-dropdown")],A);import{LitElement as wt,html as xt,css as kt}from"lit";import{customElement as Ct,property as X,state as Et}from"lit/decorators.js";import{LitElement as gt,html as Te,css as ht}from"lit";import{customElement as mt,property as G}from"lit/decorators.js";import{LitElement as lt,html as ct,css as dt}from"lit";import{customElement as pt,property as Ee,state as Se}from"lit/decorators.js";var x=class extends lt{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 ct`
+    `],n([at()],p.prototype,"isDropdownOpen",2),n([ot({type:Array})],p.prototype,"dropdownOptions",2);var L=p;var V=class extends L{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:rt``}_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)}};n([Ce({type:String})],V.prototype,"selectedOptionValue",2),n([Ce({type:Function})],V.prototype,"onSelectionChange",2),V=n([st("single-select-dropdown")],V);import{LitElement as wt,html as xt,css as kt}from"lit";import{customElement as Ct,property as X,state as Et}from"lit/decorators.js";import{LitElement as gt,html as Te,css as ht}from"lit";import{customElement as mt,property as G}from"lit/decorators.js";import{LitElement as lt,html as ct,css as dt}from"lit";import{customElement as pt,property as Ee,state as Se}from"lit/decorators.js";var x=class extends lt{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 ct`
       <button
         class="copy-button ${this.isCopied?"copied":""}"
         title="${this.title}"
@@ -983,7 +983,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
     .section-header.inactive {
       color: #999;
     }
-  `,n([$()],b.prototype,"hitCount",2),n([$()],b.prototype,"sortDropdown",2),n([$()],b.prototype,"sortOrder",2),n([$()],b.prototype,"elementListItems",2),n([$()],b.prototype,"noContentMessage",2),n([$()],b.prototype,"runningCallbacks",2),n([$()],b.prototype,"expandedElementIds",2),b=n([Dt("element-tab")],b);import{css as Mt,html as _e,LitElement as _t}from"lit";import{customElement as Lt,property as $t}from"lit/decorators.js";var F=class extends _t{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 _e`
+  `,n([$()],b.prototype,"hitCount",2),n([$()],b.prototype,"sortDropdown",2),n([$()],b.prototype,"sortOrder",2),n([$()],b.prototype,"elementListItems",2),n([$()],b.prototype,"noContentMessage",2),n([$()],b.prototype,"runningCallbacks",2),n([$()],b.prototype,"expandedElementIds",2),b=n([Dt("element-tab")],b);import{css as Mt,html as _e,LitElement as _t}from"lit";import{customElement as Lt,property as $t}from"lit/decorators.js";var A=class extends _t{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 _e`
       <div class="tab-selector-wrapper">
         ${this.tabs.map(e=>_e`
             <button
@@ -995,7 +995,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
             </button>
           `)}
       </div>
-    `}};F.styles=Mt`
+    `}};A.styles=Mt`
     .tab-selector-wrapper {
       border-bottom: 2px solid #444;
       margin-top: 12px;
@@ -1026,7 +1026,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
       color: #b0c4de;
       border-bottom-color: #b0c4de;
     }
-  `,n([$t({type:String})],F.prototype,"activeTab",2),F=n([Lt("tab-selector")],F);import{ForesightManager as K}from"js.foresight";import{LitElement as Ft,css as Rt,html as Z}from"lit";import{customElement as jt,property as zt,state as R}from"lit/decorators.js";import{map as Ht}from"lit/directives/map.js";function $e(o,r){let e={};o.eventListeners.forEach((i,a)=>{e[a]=i.length});let t=[];return o.registeredElements.forEach((i,a)=>{let{element:s,...d}=i;t.push({...d,elementInfo:`${a.id?`#${a.id}`:""}${a.className?`.${a.className.replace(/\s+/g,".")}`:""}`})}),{type:"managerDataPayload",warning:"this is a lot easier to view in the console",logId:r,globalCallbackHits:o.globalCallbackHits,localizedTimestamp:new Date().toLocaleTimeString(),eventListenerCount:e,managerSettings:o.globalSettings,registeredElements:t,summary:`${t.length} elements, ${Object.values(e).flat().length} listeners,
+  `,n([$t({type:String})],A.prototype,"activeTab",2),A=n([Lt("tab-selector")],A);import{ForesightManager as K}from"js.foresight";import{LitElement as At,css as Rt,html as Z}from"lit";import{customElement as jt,property as zt,state as R}from"lit/decorators.js";import{map as Ht}from"lit/directives/map.js";function $e(o,r){let e={};o.eventListeners.forEach((i,a)=>{e[a]=i.length});let t=[];return o.registeredElements.forEach((i,a)=>{let{element:s,...d}=i;t.push({...d,elementInfo:`${a.id?`#${a.id}`:""}${a.className?`.${a.className.replace(/\s+/g,".")}`:""}`})}),{type:"managerDataPayload",warning:"this is a lot easier to view in the console",logId:r,globalCallbackHits:o.globalCallbackHits,localizedTimestamp:new Date().toLocaleTimeString(),eventListenerCount:e,managerSettings:o.globalSettings,registeredElements:t,loadedModules:o.loadedModules,summary:`${t.length} elements, ${Object.values(e).flat().length} listeners,
   ${o.globalCallbackHits.total} hits`}}function Ie(o,r){try{switch(o.type){case"elementRegistered":return{type:"elementRegistered",name:o.elementData.name,id:o.elementData.element.id||"",callbackInfo:o.elementData.callbackInfo,hitslop:o.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:r,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Le(o.elementData.registerCount)} time`};case"elementReactivated":return{type:"elementReactivated",name:o.elementData.name,id:o.elementData.element.id||"",callbackInfo:o.elementData.callbackInfo,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:r,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Le(o.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",name:o.elementData.name,id:o.elementData.element.id||"",meta:o.elementData.meta,callbackInfo:o.elementData.callbackInfo,wasLastRegisteredElement:o.wasLastRegisteredElement,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.unregisterReason}`};case"elementDataUpdated":return{type:"elementDataUpdated",name:o.elementData.name,updatedProps:o.updatedProps||[],callbackInfo:o.elementData.callbackInfo,isIntersecting:o.elementData.isIntersectingWithViewport,meta:o.elementData.meta,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.updatedProps.toString()}`};case"callbackInvoked":return{type:"callbackInvoked",name:o.elementData.name,hitType:o.hitType,callbackInfo:o.elementData.callbackInfo,meta:o.elementData.meta,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.hitType.kind}`};case"callbackCompleted":{let e=It(o.elementData.callbackInfo.lastCallbackRuntime||0);return{type:"callbackCompleted",name:o.elementData.name,hitType:o.hitType,callbackInfo:o.elementData.callbackInfo,meta:o.elementData.meta,wasLastActiveElement:o.wasLastActiveElement,elapsed:e,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,status:o.elementData.callbackInfo.lastCallbackStatus,errorMessage:o.elementData.callbackInfo.lastCallbackErrorMessage,summary:`${o.elementData.name} - ${e}`}}case"mouseTrajectoryUpdate":return{type:"mouseTrajectoryUpdate",currentPoint:o.trajectoryPositions?.currentPoint,predictedPoint:o.trajectoryPositions?.predictedPoint,positionCount:o.trajectoryPositions?.positions?.length||0,mousePredictionEnabled:o.predictionEnabled,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:""};case"scrollTrajectoryUpdate":return{type:"scrollTrajectoryUpdate",currentPoint:o.currentPoint,predictedPoint:o.predictedPoint,scrollDirection:o.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:o.scrollDirection};case"managerSettingsChanged":return{type:"managerSettingsChanged",globalSettings:o.managerData?.globalSettings||{},settingsChanged:o.updatedSettings,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:o.updatedSettings.map(e=>e.setting).join(", ")};case"deviceStrategyChanged":return{type:"deviceStrategyChanged",oldStrategy:o.oldStrategy,newStrategy:o.newStrategy,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.oldStrategy} \u2192 ${o.newStrategy}`};default:return{type:"serializationError",error:"Failed to serialize event data",errorMessage:JSON.stringify(o),localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:""}}}catch(e){return{type:"serializationError",error:"Failed to serialize event data",localizedTimestamp:new Date().toLocaleTimeString(),errorMessage:e instanceof Error?e.message:String(e),logId:r,summary:""}}}function It(o){return`${(o/1e3).toFixed(4)} s`}function Le(o){let r=["th","st","nd","rd"],e=o%100;return o+(r[(e-20)%10]||r[e]||r[0])}import{html as Oe,css as Ot}from"lit";import{customElement as Pt,property as Pe}from"lit/decorators.js";var O=class extends L{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 i=!t;this.onSelectionChange?.(e.value,i)}_getTriggerIcon(){return u}_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 Oe`
       <div class="dropdown-container">
         <button
@@ -1083,7 +1083,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
         color: #b0c4de;
         margin-left: 2px;
       }
-    `],n([Pe({type:Array})],O.prototype,"selectedValues",2),n([Pe()],O.prototype,"onSelectionChange",2),O=n([Pt("multi-select-dropdown")],O);import{LitElement as Ut,html as Nt,css as Vt}from"lit";import{customElement as At,property as oe}from"lit/decorators.js";var S=class extends Ut{constructor(e){super();this.isExpanded=!1;this.log=e}updated(e){if(e.has("log")&&this.log){let t=this.log,i=t.type==="callbackCompleted"&&"status"in t&&t.status==="error",a=i?"#f44336":this.getLogTypeColor(t.type),s=i?"rgba(244, 67, 54, 0.1)":"transparent";this.style.setProperty("--log-color",a),this.style.setProperty("--log-background-color",s)}}serializeLogDataWithoutSummary(e){let{summary:t,...i}=e;return JSON.stringify(i,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementReactivated:"Reactivated",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings",managerDataPayload:"ManagerData",deviceStrategyChanged:"Strategy"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,i=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return Nt`
+    `],n([Pe({type:Array})],O.prototype,"selectedValues",2),n([Pe()],O.prototype,"onSelectionChange",2),O=n([Pt("multi-select-dropdown")],O);import{LitElement as Ut,html as Nt,css as Ft}from"lit";import{customElement as Vt,property as oe}from"lit/decorators.js";var S=class extends Ut{constructor(e){super();this.isExpanded=!1;this.log=e}updated(e){if(e.has("log")&&this.log){let t=this.log,i=t.type==="callbackCompleted"&&"status"in t&&t.status==="error",a=i?"#f44336":this.getLogTypeColor(t.type),s=i?"rgba(244, 67, 54, 0.1)":"transparent";this.style.setProperty("--log-color",a),this.style.setProperty("--log-background-color",s)}}serializeLogDataWithoutSummary(e){let{summary:t,...i}=e;return JSON.stringify(i,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementReactivated:"Reactivated",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings",managerDataPayload:"ManagerData",deviceStrategyChanged:"Strategy"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,i=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return Nt`
       <expandable-item
         .borderColor=${i}
         .itemId=${e.logId}
@@ -1099,7 +1099,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
         </div>
         <div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
       </expandable-item>
-    `}};S.styles=[Vt`
+    `}};S.styles=[Ft`
       :host {
         display: block;
         /*
@@ -1163,7 +1163,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
        * as all styling is now handled by setting CSS variables below.
        * This makes the component's styling more self-contained.
        */
-    `],n([oe({attribute:!1})],S.prototype,"log",2),n([oe({type:Boolean})],S.prototype,"isExpanded",2),n([oe()],S.prototype,"onToggle",2),S=n([At("single-log")],S);var v=class extends Ft{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:le},{value:"console",label:"Console",title:"Log only to the console",icon:ce},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:pe},{value:"none",label:"None",title:"Dont log anywhere",icon:de}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:u},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:u},{value:"elementReactivated",label:"Element Reactivated",title:"Show when element gets reactivated after stale time has passed",icon:u},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:u},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:u},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:u},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:u},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:u},{value:"deviceStrategyChanged",label:"Strategy Changed",title:"Show strategy change events",icon:u}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([,e])=>e).map(([e])=>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=i=>{this.handleEvent(e,i)};this._eventListeners.set(e,t),K.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(K.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{K.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let i=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${i}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addLog(e){this.logs.unshift(e),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}logManagerData(){this.logLocation!=="none"&&((this.logLocation==="console"||this.logLocation==="both")&&console.log(K.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=$e(K.instance.getManagerData,(++this.logIdCounter).toString());this.addLog(e)}addEventLog(e){let t=Ie(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.addLog(t)}render(){return Z`
+    `],n([oe({attribute:!1})],S.prototype,"log",2),n([oe({type:Boolean})],S.prototype,"isExpanded",2),n([oe()],S.prototype,"onToggle",2),S=n([Vt("single-log")],S);var v=class extends At{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:le},{value:"console",label:"Console",title:"Log only to the console",icon:ce},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:pe},{value:"none",label:"None",title:"Dont log anywhere",icon:de}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:u},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:u},{value:"elementReactivated",label:"Element Reactivated",title:"Show when element gets reactivated after stale time has passed",icon:u},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:u},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:u},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:u},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:u},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:u},{value:"deviceStrategyChanged",label:"Strategy Changed",title:"Show strategy change events",icon:u}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([,e])=>e).map(([e])=>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=i=>{this.handleEvent(e,i)};this._eventListeners.set(e,t),K.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(K.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{K.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let i=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${i}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addLog(e){this.logs.unshift(e),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}logManagerData(){this.logLocation!=="none"&&((this.logLocation==="console"||this.logLocation==="both")&&console.log(K.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=$e(K.instance.getManagerData,(++this.logIdCounter).toString());this.addLog(e)}addEventLog(e){let t=Ie(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.addLog(t)}render(){return Z`
       <tab-header>
         <div slot="chips" class="chips-container">
           <chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
@@ -1667,7 +1667,7 @@ Click on the copy icon to easely copy the new setting into your project
       border-bottom: 1px solid rgba(176, 196, 222, 0.2);
       padding-bottom: 8px;
     }
-  `,n([T()],m.prototype,"managerSettings",2),n([T()],m.prototype,"initialSettings",2),n([T()],m.prototype,"devtoolsSettings",2),n([T()],m.prototype,"changedSettings",2),n([T()],m.prototype,"currentCorner",2),n([T()],m.prototype,"touchDeviceStrategyOptions",2),n([T()],m.prototype,"minimumConnectionTypeOptions",2),n([T()],m.prototype,"cornerOptions",2),m=n([fn("settings-tab")],m);var w=class extends yn{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.isTouchDevice=!1;this.isWarningDismissed=!1;this.corner="bottom-right";this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this.localStorageCornerKey="foresight-devtools-control-panel-corner";this._abortController=null;this.activeTab=this.getStoredTab(),this.corner=this.getStoredCorner(),this.isTouchDevice=Ve.instance.getManagerData.currentDeviceStrategy==="touch"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Ve.instance.addEventListener("deviceStrategyChanged",t=>{this.isTouchDevice=t.newStrategy==="touch",t.newStrategy==="touch"&&(this.isWarningDismissed=!1)},{signal:e}),this.addEventListener("corner-change",(t=>{this.setCorner(t.detail.corner)}),{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getStoredTab(){try{return localStorage.getItem(this.localStorageSelectedTabKey)||"logs"}catch(e){return console.error(e),"logs"}}getStoredCorner(){try{let e=localStorage.getItem(this.localStorageCornerKey);if(e)return e}catch(e){console.error("ForesightDevtools: Failed to load corner from localStorage:",e)}return"bottom-right"}_handleTabChange(e){this.activeTab=e.detail.tab,this.setStoredTab(this.activeTab)}setStoredTab(e){try{localStorage.setItem(this.localStorageSelectedTabKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save tab preference to localStorage:",t)}}setStoredCorner(e){try{localStorage.setItem(this.localStorageCornerKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save corner to localStorage:",t)}}dismissWarning(){this.isWarningDismissed=!0}setCorner(e){this.corner=e,this.setStoredCorner(this.corner),this.requestUpdate()}handleMinimizeClick(e){e.stopPropagation(),this.isMinimized=!this.isMinimized}getMinimizeSymbol(){return this.isMinimized?"+":"\u2212"}render(){return xn`
+  `,n([T()],m.prototype,"managerSettings",2),n([T()],m.prototype,"initialSettings",2),n([T()],m.prototype,"devtoolsSettings",2),n([T()],m.prototype,"changedSettings",2),n([T()],m.prototype,"currentCorner",2),n([T()],m.prototype,"touchDeviceStrategyOptions",2),n([T()],m.prototype,"minimumConnectionTypeOptions",2),n([T()],m.prototype,"cornerOptions",2),m=n([fn("settings-tab")],m);var w=class extends yn{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.isTouchDevice=!1;this.isWarningDismissed=!1;this.corner="bottom-right";this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this.localStorageCornerKey="foresight-devtools-control-panel-corner";this._abortController=null;this.activeTab=this.getStoredTab(),this.corner=this.getStoredCorner(),this.isTouchDevice=Fe.instance.getManagerData.currentDeviceStrategy==="touch"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Fe.instance.addEventListener("deviceStrategyChanged",t=>{this.isTouchDevice=t.newStrategy==="touch",t.newStrategy==="touch"&&(this.isWarningDismissed=!1)},{signal:e}),this.addEventListener("corner-change",(t=>{this.setCorner(t.detail.corner)}),{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getStoredTab(){try{return localStorage.getItem(this.localStorageSelectedTabKey)||"logs"}catch(e){return console.error(e),"logs"}}getStoredCorner(){try{let e=localStorage.getItem(this.localStorageCornerKey);if(e)return e}catch(e){console.error("ForesightDevtools: Failed to load corner from localStorage:",e)}return"bottom-right"}_handleTabChange(e){this.activeTab=e.detail.tab,this.setStoredTab(this.activeTab)}setStoredTab(e){try{localStorage.setItem(this.localStorageSelectedTabKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save tab preference to localStorage:",t)}}setStoredCorner(e){try{localStorage.setItem(this.localStorageCornerKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save corner to localStorage:",t)}}dismissWarning(){this.isWarningDismissed=!0}setCorner(e){this.corner=e,this.setStoredCorner(this.corner),this.requestUpdate()}handleMinimizeClick(e){e.stopPropagation(),this.isMinimized=!this.isMinimized}getMinimizeSymbol(){return this.isMinimized?"+":"\u2212"}render(){return xn`
       <div class="control-wrapper ${this.corner} ${this.isMinimized?"minimized":""}">
         <div class="title-wrapper">
           <button @click="${this.handleMinimizeClick}" class="minimize-button">
@@ -1844,7 +1844,7 @@ Click on the copy icon to easely copy the new setting into your project
     .dismiss-button:hover {
       opacity: 0.7;
     }
-  `,n([q()],w.prototype,"activeTab",2),n([q()],w.prototype,"isMinimized",2),n([q()],w.prototype,"isTouchDevice",2),n([q()],w.prototype,"isWarningDismissed",2),n([q()],w.prototype,"corner",2),w=n([kn("control-panel")],w);import{LitElement as An,css as Fn,html as Fe}from"lit";import{customElement as Rn,state as jn}from"lit/decorators.js";import{LitElement as Cn,html as En,css as Sn}from"lit";import{customElement as Tn,state as Ae,query as Dn}from"lit/decorators.js";import{ForesightManager as j}from"js.foresight";var D=class extends Cn{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;j.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementReactivated",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementDataUpdated",t=>{t.updatedProps.includes("bounds")&&t.elementData.callbackInfo.isCallbackActive&&this.createOrUpdateElementOverlay(t.elementData),t.updatedProps.includes("visibility")&&(t.elementData.isIntersectingWithViewport||this.removeElementOverlay(t.elementData))},{signal:e}),j.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),j.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData),this.removeElementOverlay(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let i=t;this.updateNameTagVisibility(i.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let i=document.createElement("div");i.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(i);let a={expandedOverlay:t,nameLabel:i};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:i,nameLabel:a}=e,{expandedRect:s}=t.elementBounds,d=s.right-s.left,Y=s.bottom-s.top;i.style.width=`${d}px`,i.style.height=`${Y}px`,i.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,l.instance.devtoolsSettings.showNameTags?(a.textContent=t.name,a.style.display="block",a.style.transform=`translate3d(${s.left}px, ${s.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 i=this.overlayMap.get(e.element);if(i)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":i.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":i.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":i.expandedOverlay.classList.add("invoked-by-tab");break;case"touch":break;case"viewport":break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(!t)return;let i=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:i})}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let i=t.nameLabel;e?i.style.display="block":i.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this.callbackAnimations.forEach(e=>{clearTimeout(e.timeoutId)}),this.callbackAnimations.clear(),this.overlayMap.clear(),this._abortController?.abort(),this._abortController=null}render(){return En` <div id="overlays-container"></div> `}};D.styles=[Sn`
+  `,n([q()],w.prototype,"activeTab",2),n([q()],w.prototype,"isMinimized",2),n([q()],w.prototype,"isTouchDevice",2),n([q()],w.prototype,"isWarningDismissed",2),n([q()],w.prototype,"corner",2),w=n([kn("control-panel")],w);import{LitElement as Vn,css as An,html as Ae}from"lit";import{customElement as Rn,state as jn}from"lit/decorators.js";import{LitElement as Cn,html as En,css as Sn}from"lit";import{customElement as Tn,state as Ve,query as Dn}from"lit/decorators.js";import{ForesightManager as j}from"js.foresight";var D=class extends Cn{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;j.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementReactivated",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementDataUpdated",t=>{t.updatedProps.includes("bounds")&&t.elementData.callbackInfo.isCallbackActive&&this.createOrUpdateElementOverlay(t.elementData),t.updatedProps.includes("visibility")&&(t.elementData.isIntersectingWithViewport||this.removeElementOverlay(t.elementData))},{signal:e}),j.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),j.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData),this.removeElementOverlay(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let i=t;this.updateNameTagVisibility(i.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let i=document.createElement("div");i.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(i);let a={expandedOverlay:t,nameLabel:i};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:i,nameLabel:a}=e,{expandedRect:s}=t.elementBounds,d=s.right-s.left,Y=s.bottom-s.top;i.style.width=`${d}px`,i.style.height=`${Y}px`,i.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,l.instance.devtoolsSettings.showNameTags?(a.textContent=t.name,a.style.display="block",a.style.transform=`translate3d(${s.left}px, ${s.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 i=this.overlayMap.get(e.element);if(i)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":i.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":i.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":i.expandedOverlay.classList.add("invoked-by-tab");break;case"touch":break;case"viewport":break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(!t)return;let i=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:i})}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let i=t.nameLabel;e?i.style.display="block":i.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this.callbackAnimations.forEach(e=>{clearTimeout(e.timeoutId)}),this.callbackAnimations.clear(),this.overlayMap.clear(),this._abortController?.abort(),this._abortController=null}render(){return En` <div id="overlays-container"></div> `}};D.styles=[Sn`
       :host {
         position: fixed;
         top: 0;
@@ -1914,7 +1914,7 @@ Click on the copy icon to easely copy the new setting into your project
         white-space: nowrap;
         pointer-events: none;
       }
-    `],n([Ae()],D.prototype,"overlayMap",2),n([Ae()],D.prototype,"callbackAnimations",2),n([Dn("#overlays-container")],D.prototype,"containerElement",2),D=n([Tn("element-overlays")],D);import{LitElement as Mn,html as _n,css as Ln}from"lit";import{customElement as $n,state as se}from"lit/decorators.js";import{styleMap as In}from"lit/directives/style-map.js";import{ForesightManager as z}from"js.foresight";var M=class extends Mn{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=z.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate3d(0px, 0px, 0) rotate(0deg)",width:"0px"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1),this.requestUpdate()};this.handleTrajectoryUpdate=e=>{if(!this._mousePredictionIsEnabled)return;this._isVisible=!0;let{currentPoint:t,predictedPoint:i}=e.trajectoryPositions,a=i.x-t.x,s=i.y-t.y,d=Math.sqrt(a*a+s*s),Y=Math.atan2(s,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${Y}deg)`,width:`${d}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;z.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),z.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),z.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return _n` <div class="trajectory-line" style=${In(e)}></div> `}};M.styles=[Ln`
+    `],n([Ve()],D.prototype,"overlayMap",2),n([Ve()],D.prototype,"callbackAnimations",2),n([Dn("#overlays-container")],D.prototype,"containerElement",2),D=n([Tn("element-overlays")],D);import{LitElement as Mn,html as _n,css as Ln}from"lit";import{customElement as $n,state as se}from"lit/decorators.js";import{styleMap as In}from"lit/directives/style-map.js";import{ForesightManager as z}from"js.foresight";var M=class extends Mn{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=z.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate3d(0px, 0px, 0) rotate(0deg)",width:"0px"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1),this.requestUpdate()};this.handleTrajectoryUpdate=e=>{if(!this._mousePredictionIsEnabled)return;this._isVisible=!0;let{currentPoint:t,predictedPoint:i}=e.trajectoryPositions,a=i.x-t.x,s=i.y-t.y,d=Math.sqrt(a*a+s*s),Y=Math.atan2(s,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${Y}deg)`,width:`${d}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;z.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),z.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),z.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return _n` <div class="trajectory-line" style=${In(e)}></div> `}};M.styles=[Ln`
       :host {
         display: block;
       }
@@ -1945,7 +1945,7 @@ Click on the copy icon to easely copy the new setting into your project
         border-bottom: 4px solid transparent;
         filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
       }
-    `],n([se()],M.prototype,"_mousePredictionIsEnabled",2),n([se()],M.prototype,"_isVisible",2),n([se()],M.prototype,"_trajectoryStyles",2),M=n([$n("mouse-trajectory")],M);import{LitElement as On,html as Pn,css as Un}from"lit";import{customElement as Nn,state as te}from"lit/decorators.js";import{styleMap as Vn}from"lit/directives/style-map.js";import{ForesightManager as N}from"js.foresight";var C=class extends On{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=N.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=N.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate(0px, 0px) rotate(0deg)"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let i=e.updatedSettings.find(a=>a.setting==="scrollMargin");i&&(this._scrollMargin=i.newValue)};this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,this.renderScrollTrajectory()))};this.renderScrollTrajectory=()=>{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,i=t.x-e.x,a=t.y-e.y,s=Math.atan2(a,i)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${s}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;N.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),N.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),N.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),N.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),N.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 Pn` <div class="scroll-trajectory-line" style=${Vn(e)}></div> `}};C.styles=[Un`
+    `],n([se()],M.prototype,"_mousePredictionIsEnabled",2),n([se()],M.prototype,"_isVisible",2),n([se()],M.prototype,"_trajectoryStyles",2),M=n([$n("mouse-trajectory")],M);import{LitElement as On,html as Pn,css as Un}from"lit";import{customElement as Nn,state as te}from"lit/decorators.js";import{styleMap as Fn}from"lit/directives/style-map.js";import{ForesightManager as N}from"js.foresight";var C=class extends On{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=N.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=N.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate(0px, 0px) rotate(0deg)"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let i=e.updatedSettings.find(a=>a.setting==="scrollMargin");i&&(this._scrollMargin=i.newValue)};this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,this.renderScrollTrajectory()))};this.renderScrollTrajectory=()=>{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,i=t.x-e.x,a=t.y-e.y,s=Math.atan2(a,i)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${s}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;N.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),N.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),N.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),N.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),N.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 Pn` <div class="scroll-trajectory-line" style=${Fn(e)}></div> `}};C.styles=[Un`
       :host {
         display: block;
       }
@@ -2005,15 +2005,15 @@ Click on the copy icon to easely copy the new setting into your project
           filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
         }
       }
-    `],n([te()],C.prototype,"_scrollPredictionIsEnabled",2),n([te()],C.prototype,"_scrollMargin",2),n([te()],C.prototype,"_isVisible",2),n([te()],C.prototype,"_trajectoryStyles",2),C=n([Nn("scroll-trajectory")],C);import{ForesightManager as Re}from"js.foresight";var H=class extends An{constructor(){super(...arguments);this._abortController=null;this._strategy=Re.instance.getManagerData.currentDeviceStrategy;this.handleDeviceStrategyChange=e=>this._strategy=e.newStrategy}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Re.instance.addEventListener("deviceStrategyChanged",this.handleDeviceStrategyChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}render(){return Fe`
+    `],n([te()],C.prototype,"_scrollPredictionIsEnabled",2),n([te()],C.prototype,"_scrollMargin",2),n([te()],C.prototype,"_isVisible",2),n([te()],C.prototype,"_trajectoryStyles",2),C=n([Nn("scroll-trajectory")],C);import{ForesightManager as Re}from"js.foresight";var H=class extends Vn{constructor(){super(...arguments);this._abortController=null;this._strategy=Re.instance.getManagerData.currentDeviceStrategy;this.handleDeviceStrategyChange=e=>this._strategy=e.newStrategy}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Re.instance.addEventListener("deviceStrategyChanged",this.handleDeviceStrategyChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}render(){return Ae`
       <div id="overlay-container">
-        ${this._strategy==="mouse"?Fe`
+        ${this._strategy==="mouse"?Ae`
               <mouse-trajectory></mouse-trajectory>
               <scroll-trajectory></scroll-trajectory>
               <element-overlays></element-overlays>
             `:""}
       </div>
-    `}};H.styles=[Fn`
+    `}};H.styles=[An`
       :host {
         display: block;
       }

package/package.json

@@ -1,64 +1,65 @@
-{
-  "name": "js.foresight-devtools",
-  "version": "1.3.4",
-  "description": "Visual debugging tools for ForesightJS - mouse trajectory prediction and element interaction visualization",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "homepage": "https://foresightjs.com/docs/getting_started/development_tools",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/spaansba/ForesightJS/tree/main/packages/devpage"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "keywords": [
-    "foresight",
-    "debugger",
-    "mouse-trajectory",
-    "visualization",
-    "debug-tools",
-    "development",
-    "foresightjs",
-    "devtools"
-  ],
-  "author": "Bart Spaans",
-  "license": "MIT",
-  "llms": "https://foresightjs.com/llms.txt",
-  "llmsFull": "https://foresightjs.com/llms-full.txt",
-  "peerDependencies": {
-    "js.foresight": "^3.3.5"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.1",
-    "tslib": "^2.8.1",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.9",
-    "js.foresight": "3.3.5"
-  },
-  "dependencies": {
-    "@thednp/position-observer": "^1.1.0",
-    "lit": "^3.3.2"
-  },
-  "scripts": {
-    "build": "tsup --sourcemap",
-    "build:prod": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:run": "vitest run",
-    "prettier": "prettier --write .",
-    "lint": "eslint . --fix"
-  }
-}
+{
+  "name": "js.foresight-devtools",
+  "version": "1.4.0",
+  "description": "Visual debugging tools for ForesightJS - mouse trajectory prediction and element interaction visualization",
+  "type": "module",
+  "scripts": {
+    "build": "tsup --sourcemap",
+    "build:prod": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:run": "vitest run",
+    "prettier": "prettier --write .",
+    "lint": "eslint . --fix",
+    "prepublishOnly": "pnpm lint && pnpm test:run && pnpm build:prod"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "homepage": "https://foresightjs.com/docs/getting_started/development_tools",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spaansba/ForesightJS/tree/main/packages/devpage"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "foresight",
+    "debugger",
+    "mouse-trajectory",
+    "visualization",
+    "debug-tools",
+    "development",
+    "foresightjs",
+    "devtools"
+  ],
+  "author": "Bart Spaans",
+  "license": "MIT",
+  "llms": "https://foresightjs.com/llms.txt",
+  "llmsFull": "https://foresightjs.com/llms-full.txt",
+  "peerDependencies": {
+    "js.foresight": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "js.foresight": "workspace:*",
+    "tslib": "^2.8.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.9"
+  },
+  "dependencies": {
+    "@thednp/position-observer": "^1.1.0",
+    "lit": "^3.3.2"
+  }
+}

package/LICENSE

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