js.foresight-devtools 1.2.1 → 1.3.0

package/dist/index.js

@@ -1,4 +1,4 @@
-var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e,t)=>{for(var i=t>1?void 0:t?ze(s,e):s,a=o.length-1,r;a>=0;a--)(r=o[a])&&(i=(t?r(s,e,i):r(i))||i);return t&&i&&je(s,e,i),i};import{LitElement as Vn,css as An,html as Ae}from"lit";import{customElement as jn,state as zn}from"lit/decorators.js";import{LitElement as un,css as bn,html as vn}from"lit";import{customElement as fn,state as Fe}from"lit/decorators.js";import{classMap as ne}from"lit/directives/class-map.js";import{css as Et,html as R,LitElement as Ct}from"lit";import{customElement as St,state as M}from"lit/decorators.js";import{map as Ce}from"lit/directives/map.js";import{ForesightManager as L}from"js.foresight";import{html as c}from"lit";var oe=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 Fe}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 Ae}from"js.foresight";import{css as St,html as B,LitElement as Tt}from"lit";import{customElement as Dt,state as L}from"lit/decorators.js";import{map as Me}from"lit/directives/map.js";import{ForesightManager as $}from"js.foresight";import{html as c}from"lit";var le=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -15,7 +15,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <line x1="7" y1="21" x2="17" y2="21"></line>
     <line x1="12" y1="17" x2="12" y2="21"></line>
   </svg>
-`,ae=c`
+`,ce=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -30,7 +30,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <polyline points="4 17 10 11 4 5"></polyline>
     <line x1="12" y1="19" x2="20" y2="19"></line>
   </svg>
-`,se=c`
+`,de=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -46,7 +46,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
     <line x1="1" y1="1" x2="23" y2="23"></line>
   </svg>
-`,re=c`
+`,ge=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -64,7 +64,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <circle cx="6" cy="18" r="2" />
     <circle cx="18" cy="18" r="2" />
   </svg>
-`,le=c`
+`,pe=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -79,7 +79,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <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>
-`,ce=c`
+`,he=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -97,7 +97,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <line x1="16" y1="17" x2="8" y2="17" />
     <line x1="10" y1="9" x2="8" y2="9" />
   </svg>
-`,de=c`
+`,me=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -111,7 +111,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
   >
     <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
   </svg>
-`,u=c`
+`,h=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -125,7 +125,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
   >
     <polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46" />
   </svg>
-`,pe=c`
+`,ue=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -140,7 +140,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <circle cx="12" cy="12" r="10" />
     <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
   </svg>
-`,ge=c`
+`,be=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -155,7 +155,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <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>
-`,he=c`
+`,ve=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -169,7 +169,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
   >
     <polyline points="20 6 9 17 4 12"></polyline>
   </svg>
-`,me=c`
+`,fe=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -187,7 +187,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <line x1="12" y1="9" x2="12" y2="13"></line>
     <line x1="12" y1="17" x2="12.01" y2="17"></line>
   </svg>
-`,ue=c`
+`,ye=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -208,7 +208,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <path d="M10 8l2-2 2 2"></path>
     <path d="M14 16l-2 2-2-2"></path>
   </svg>
-`,be=c`
+`,we=c`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="12"
@@ -225,11 +225,58 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     <line x1="10" y1="11" x2="10" y2="17"></line>
     <line x1="14" y1="11" x2="14" y2="17"></line>
   </svg>
-`;import{LitElement as Re,html as He,css as Be}from"lit";import{customElement as Ge,property as Ke}from"lit/decorators.js";var P=class extends Re{constructor(){super(...arguments);this.title=""}render(){return He`
+`,Yn=c`
+  <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-12 0c0 2 3 4 6 6 3-2 6-4 6-6z"/>
+    <circle cx="12" cy="8" r="3"/>
+  </svg>
+`,Jn=c`
+  <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="3" width="20" height="14" rx="2" ry="2"/>
+    <line x1="8" y1="21" x2="16" y2="21"/>
+    <line x1="12" y1="17" x2="12" y2="21"/>
+    <circle cx="12" cy="10" r="2"/>
+  </svg>
+`,Xn=c`
+  <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>
+`;import{LitElement as Be,html as Ge,css as We}from"lit";import{customElement as Ke,property as qe}from"lit/decorators.js";var U=class extends Be{constructor(){super(...arguments);this.title=""}render(){return Ge`
       <span class="chip" title="${this.title}">
         <slot></slot>
       </span>
-    `}};P.styles=[Be`
+    `}};U.styles=[We`
       :host {
         display: inline-block;
       }
@@ -249,11 +296,11 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         line-height: 1.2;
         transition: all 0.2s ease;
       }
-    `],n([Ke({type:String})],P.prototype,"title",2),P=n([Ge("chip-element")],P);import{LitElement as We,html as Q,css as qe}from"lit";import{customElement as Ye,property as ve}from"lit/decorators.js";var T=class extends We{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return Q`
+    `],n([qe({type:String})],U.prototype,"title",2),U=n([Ke("chip-element")],U);import{LitElement as Ye,html as te,css as Je}from"lit";import{customElement as Xe,property as xe}from"lit/decorators.js";var D=class extends Ye{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return te`
       <div class="content-container">
-        ${this.hasContent?Q`<slot></slot>`:Q`<div class="no-content-message">${this.noContentMessage}</div>`}
+        ${this.hasContent?te`<slot></slot>`:te`<div class="no-content-message">${this.noContentMessage}</div>`}
       </div>
-    `}};T.styles=[qe`
+    `}};D.styles=[Je`
       :host {
         overflow: hidden;
       }
@@ -293,7 +340,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         font-style: italic;
         font-family: "Courier New", monospace;
       }
-    `],n([ve({type:String,attribute:"no-content-message"})],T.prototype,"noContentMessage",2),n([ve({type:Boolean})],T.prototype,"hasContent",2),T=n([Ye("tab-content")],T);import{LitElement as Je,html as Xe,css as Ze}from"lit";import{customElement as Qe}from"lit/decorators.js";var j=class extends Je{render(){return Xe`
+    `],n([xe({type:String,attribute:"no-content-message"})],D.prototype,"noContentMessage",2),n([xe({type:Boolean})],D.prototype,"hasContent",2),D=n([Xe("tab-content")],D);import{LitElement as Ze,html as Qe,css as et}from"lit";import{customElement as tt}from"lit/decorators.js";var z=class extends Ze{render(){return Qe`
       <div class="tab-bar-elements">
         <div class="tab-bar-info">
           <div class="stats-chips">
@@ -304,7 +351,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
           <slot name="actions"></slot>
         </div>
       </div>
-    `}};j.styles=[Ze`
+    `}};z.styles=[et`
       :host {
       }
       .tab-bar-info {
@@ -348,7 +395,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         z-index: 5;
         min-height: 36px;
       }
-    `],j=n([Qe("tab-header")],j);import{html as ot}from"lit";import{customElement as at,property as ye}from"lit/decorators.js";import{LitElement as et,html as fe,css as tt}from"lit";import{property as nt,state as it}from"lit/decorators.js";var d=class d extends et{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 i=e.getBoundingClientRect(),a=t.offsetHeight||200,r=i.bottom+5,p=window.innerWidth-i.right;window.innerHeight-i.bottom<a&&i.top>a?t.style.top=`${i.top-a-5}px`:t.style.top=`${r}px`,t.style.right=`${p}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return fe`
+    `],z=n([tt("tab-header")],z);import{html as rt}from"lit";import{customElement as st,property as Ee}from"lit/decorators.js";import{LitElement as nt,html as ke,css as it}from"lit";import{property as ot,state as at}from"lit/decorators.js";var g=class g extends nt{constructor(){super(...arguments);this.isDropdownOpen=!1;this.dropdownOptions=[];this._toggleDropdown=e=>{e.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(g.currentlyOpen&&g.currentlyOpen!==this&&g.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,g.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),g.currentlyOpen===this&&(g.currentlyOpen=null)}_closeDropdown(){this.isDropdownOpen=!1,g.currentlyOpen===this&&(g.currentlyOpen=null)}_positionDropdown(){let e=this.shadowRoot?.querySelector(".trigger-button"),t=this.shadowRoot?.querySelector(".dropdown-menu");if(e&&t){let i=e.getBoundingClientRect(),a=t.offsetHeight||200,s=i.bottom+5,d=window.innerWidth-i.right;window.innerHeight-i.bottom<a&&i.top>a?t.style.top=`${i.top-a-5}px`:t.style.top=`${s}px`,t.style.right=`${d}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return ke`
       <div class="dropdown-container">
         <button
           class="${e}"
@@ -374,7 +421,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         </button>
 
         <div class="${t}" id="dropdown-menu" role="menu">
-          ${this.dropdownOptions.map(i=>fe`
+          ${this.dropdownOptions.map(i=>ke`
               <button
                 value="${i.value}"
                 title="${i.title}"
@@ -387,7 +434,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
             `)}
         </div>
       </div>
-    `}};d.currentlyOpen=null,d.styles=[tt`
+    `}};g.currentlyOpen=null,g.styles=[it`
       :host {
         display: inline-block;
       }
@@ -502,15 +549,15 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         color: #b0c4de;
         font-weight: bold;
       }
-    `],n([it()],d.prototype,"isDropdownOpen",2),n([nt({type:Array})],d.prototype,"dropdownOptions",2);var D=d;var U=class extends D{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:ot``}_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([ye({type:String})],U.prototype,"selectedOptionValue",2),n([ye({type:Function})],U.prototype,"onSelectionChange",2),U=n([at("single-select-dropdown")],U);import{LitElement as ft,html as yt,css as xt}from"lit";import{customElement as wt,property as q}from"lit/decorators.js";import{LitElement as dt,html as ke,css as pt}from"lit";import{customElement as gt,property as z}from"lit/decorators.js";import{LitElement as st,html as rt,css as lt}from"lit";import{customElement as ct,property as xe,state as we}from"lit/decorators.js";var v=class extends st{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 rt`
+    `],n([at()],g.prototype,"isDropdownOpen",2),n([ot({type:Array})],g.prototype,"dropdownOptions",2);var M=g;var N=class extends M{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([Ee({type:String})],N.prototype,"selectedOptionValue",2),n([Ee({type:Function})],N.prototype,"onSelectionChange",2),N=n([st("single-select-dropdown")],N);import{LitElement as wt,html as xt,css as kt}from"lit";import{customElement as Et,property as J,state as Ct}from"lit/decorators.js";import{LitElement as pt,html as Te,css as ht}from"lit";import{customElement as mt,property as H}from"lit/decorators.js";import{LitElement as lt,html as ct,css as dt}from"lit";import{customElement as gt,property as Ce,state as Se}from"lit/decorators.js";var y=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}"
         @click=${this.handleClick}
       >
-        ${this.isCopied?he:ge}
+        ${this.isCopied?ve:be}
       </button>
-    `}};v.styles=lt`
+    `}};y.styles=dt`
     .copy-button {
       background: transparent;
       border: 0px;
@@ -549,7 +596,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     .copy-button.copied svg {
       stroke: #4caf50;
     }
-  `,n([xe({type:String})],v.prototype,"title",2),n([xe({type:Function})],v.prototype,"onCopy",2),n([we()],v.prototype,"isCopied",2),n([we()],v.prototype,"copyTimeout",2),v=n([ct("copy-icon")],v);var b=class extends dt{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),ke`
+  `,n([Ce({type:String})],y.prototype,"title",2),n([Ce({type:Function})],y.prototype,"onCopy",2),n([Se()],y.prototype,"isCopied",2),n([Se()],y.prototype,"copyTimeout",2),y=n([gt("copy-icon")],y);var b=class extends pt{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(s=>s.textContent).join("");try{await navigator.clipboard.writeText(a)}catch(s){console.error("Failed to copy text: ",s)}}}render(){return this.style.setProperty("--border-color",this.borderColor),Te`
       <div class="item-entry ${this.isExpanded?"expanded":""}">
         <div class="item-header ${this.isExpanded?"expanded":""}" @click="${this.toggleExpand}">
           <div class="item-content">
@@ -561,7 +608,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
             </svg>
           </span>
         </div>
-        ${this.isExpanded?ke`
+        ${this.isExpanded?Te`
               <div class="item-details">
                 <copy-icon
                   positioned
@@ -574,7 +621,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
               </div>
             `:""}
       </div>
-    `}};b.styles=[pt`
+    `}};b.styles=[ht`
       :host {
         display: block;
       }
@@ -671,7 +718,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         display: block;
         overflow-x: auto;
       }
-    `],n([z()],b.prototype,"borderColor",2),n([z()],b.prototype,"showCopyButton",2),n([z()],b.prototype,"itemId",2),n([z()],b.prototype,"isExpanded",2),n([z()],b.prototype,"onToggle",2),b=n([gt("expandable-item")],b);import{ForesightManager as ht}from"js.foresight";import{LitElement as mt,css as ut,html as W}from"lit";import{customElement as bt,property as vt,state as Ee}from"lit/decorators.js";var k=class extends mt{constructor(){super(...arguments);this.remainingTime=0;this.isCountdownActive=!1;this.intervalId=null;this.startTime=0;this.handleTimerClick=e=>{e.stopPropagation(),ht.instance.reactivate(this.elementData.element)}}connectedCallback(){super.connectedCallback(),this.checkAndStartCountdown()}disconnectedCallback(){super.disconnectedCallback(),this.clearCountdown()}updated(e){super.updated(e),e.has("elementData")&&this.checkAndStartCountdown()}checkAndStartCountdown(){let e=this.elementData?.callbackInfo;if(!e){this.clearCountdown();return}let t=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;!e.isCallbackActive&&t&&e.reactivateAfter>0?this.startCountdown():this.clearCountdown()}startCountdown(){this.clearCountdown();let e=this.elementData?.callbackInfo;if(!e)return;if(this.isCountdownActive=!0,e.reactivateAfter===1/0){this.remainingTime=1/0;return}let t=e.reactivateAfter,i=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;if(!i){this.clearCountdown();return}this.startTime=i;let a=()=>{let r=Date.now()-this.startTime,p=Math.max(0,t-r);this.remainingTime=p,this.requestUpdate(),(p<=0||this.elementData.callbackInfo.isCallbackActive)&&this.clearCountdown()};a(),this.remainingTime>0&&(this.intervalId=window.setInterval(a,100))}clearCountdown(){this.intervalId!==null&&(clearInterval(this.intervalId),this.intervalId=null),this.isCountdownActive=!1,this.remainingTime=0}formatTime(e){if(e===1/0)return"\u221E";let t=Math.ceil(e/1e3);if(t<60)return`${t}s`;let i=Math.floor(t/60),a=t%60;if(i<60)return a>0?`${i}m ${a}s`:`${i}m`;let r=Math.floor(i/60),p=i%60;return p>0?`${r}h ${p}m`:`${r}h`}render(){return this.isCountdownActive?this.remainingTime===1/0?W`
+    `],n([H()],b.prototype,"borderColor",2),n([H()],b.prototype,"showCopyButton",2),n([H()],b.prototype,"itemId",2),n([H()],b.prototype,"isExpanded",2),n([H()],b.prototype,"onToggle",2),b=n([mt("expandable-item")],b);import{ForesightManager as ut}from"js.foresight";import{LitElement as bt,css as vt,html as Y}from"lit";import{customElement as ft,property as yt,state as De}from"lit/decorators.js";var E=class extends bt{constructor(){super(...arguments);this.remainingTime=0;this.isCountdownActive=!1;this.intervalId=null;this.startTime=0;this.handleTimerClick=e=>{e.stopPropagation(),ut.instance.reactivate(this.elementData.element)}}connectedCallback(){super.connectedCallback(),this.checkAndStartCountdown()}disconnectedCallback(){super.disconnectedCallback(),this.clearCountdown()}updated(e){super.updated(e),e.has("elementData")&&this.checkAndStartCountdown()}checkAndStartCountdown(){let e=this.elementData?.callbackInfo;if(!e){this.clearCountdown();return}let t=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;!e.isCallbackActive&&t&&e.reactivateAfter>0?this.startCountdown():this.clearCountdown()}startCountdown(){this.clearCountdown();let e=this.elementData?.callbackInfo;if(!e)return;if(this.isCountdownActive=!0,e.reactivateAfter===1/0){this.remainingTime=1/0;return}let t=e.reactivateAfter,i=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;if(!i){this.clearCountdown();return}this.startTime=i;let a=()=>{let s=Date.now()-this.startTime,d=Math.max(0,t-s);this.remainingTime=d,this.requestUpdate(),(d<=0||this.elementData.callbackInfo.isCallbackActive)&&this.clearCountdown()};a(),this.remainingTime>0&&(this.intervalId=window.setInterval(a,100))}clearCountdown(){this.intervalId!==null&&(clearInterval(this.intervalId),this.intervalId=null),this.isCountdownActive=!1,this.remainingTime=0}formatTime(e){if(e===1/0)return"\u221E";let t=Math.ceil(e/1e3);if(t<60)return`${t}s`;let i=Math.floor(t/60),a=t%60;if(i<60)return a>0?`${i}m ${a}s`:`${i}m`;let s=Math.floor(i/60),d=i%60;return d>0?`${s}h ${d}m`:`${s}h`}render(){return this.isCountdownActive?this.remainingTime===1/0?Y`
         <button
           class="reactivate-button"
           @click="${this.handleTimerClick}"
@@ -679,7 +726,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         >
           <span class="countdown-time infinity">∞</span>
         </button>
-      `:this.remainingTime<=0?W``:W`
+      `:this.remainingTime<=0?Y``:Y`
       <button
         class="reactivate-button"
         @click="${this.handleTimerClick}"
@@ -687,7 +734,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
       >
         <span class="countdown-time clickable">${this.formatTime(this.remainingTime)}</span>
       </button>
-    `:W``}};k.styles=[ut`
+    `:Y``}};E.styles=[vt`
       :host {
         display: inline-block;
       }
@@ -717,7 +764,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
       .countdown-time.clickable {
         cursor: pointer;
       }
-    `],n([vt({hasChanged:()=>!0})],k.prototype,"elementData",2),n([Ee()],k.prototype,"remainingTime",2),n([Ee()],k.prototype,"isCountdownActive",2),k=n([bt("reactivate-countdown")],k);import{ForesightManager as kt}from"js.foresight";var f=class extends ft{constructor(){super(...arguments);this.isActive=!1;this.isExpanded=!1;this.handleUnregister=e=>{e.stopPropagation(),kt.instance.unregister(this.elementData.element,"devtools")}}getBorderColor(){return this.isActive?"#ffeb3b":this.elementData.callbackInfo.isCallbackActive?this.elementData.isIntersectingWithViewport?"#4caf50":"#666":"#999"}getStatusIndicatorClass(){return this.isActive?"prefetching":this.elementData.callbackInfo.isCallbackActive?this.elementData.isIntersectingWithViewport?"visible":"hidden":"inactive"}getStatusText(){return this.isActive?"callback active":this.elementData.callbackInfo.isCallbackActive?this.elementData.isIntersectingWithViewport?"in viewport":"not in viewport":"callback inactive"}formatElementDetails(){let e=this.elementData,t={status:this.getStatusText(),tagName:e.element.tagName.toLowerCase(),isIntersecting:e.isIntersectingWithViewport,registerCount:e.registerCount,hitSlop:{top:e.elementBounds.hitSlop.top,right:e.elementBounds.hitSlop.right,bottom:e.elementBounds.hitSlop.bottom,left:e.elementBounds.hitSlop.left},callbackInfo:e.callbackInfo,meta:this.elementData.meta};return JSON.stringify(t,null,2)}render(){let e=!this.elementData.isIntersectingWithViewport;return yt`
+    `],n([yt({hasChanged:()=>!0})],E.prototype,"elementData",2),n([De()],E.prototype,"remainingTime",2),n([De()],E.prototype,"isCountdownActive",2),E=n([ft("reactivate-countdown")],E);import{ForesightManager as ne}from"js.foresight";var v=class extends wt{constructor(){super(...arguments);this.isActive=!1;this.isExpanded=!1;this.currentDeviceStrategy="mouse";this._abortController=null;this.handleUnregister=e=>{e.stopPropagation(),ne.instance.unregister(this.elementData.element,"devtools")}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.currentDeviceStrategy=ne.instance.getManagerData.currentDeviceStrategy,ne.instance.addEventListener("deviceStrategyChanged",t=>{this.currentDeviceStrategy=t.newStrategy},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getBorderColor(){return this.isActive?"#ffeb3b":this.elementData.callbackInfo.isCallbackActive?this.currentDeviceStrategy==="touch"?"#ba68c8":this.elementData.isIntersectingWithViewport?"#4caf50":"#666":"#999"}getStatusIndicatorClass(){return this.isActive?"prefetching":this.elementData.callbackInfo.isCallbackActive?this.currentDeviceStrategy==="touch"?"touch-device":this.elementData.isIntersectingWithViewport?"visible":"hidden":"inactive"}getStatusText(){if(this.isActive)return"callback active";if(!this.elementData.callbackInfo.isCallbackActive)return"callback inactive";let e=this.elementData.isIntersectingWithViewport?"in viewport":"not in viewport",t=this.currentDeviceStrategy==="touch"?" (touch device)":"";return e+t}formatElementDetails(){let e=this.elementData,t={status:this.getStatusText(),isIntersecting:e.isIntersectingWithViewport,registerCount:e.registerCount,hitSlop:{top:e.elementBounds.hitSlop.top,right:e.elementBounds.hitSlop.right,bottom:e.elementBounds.hitSlop.bottom,left:e.elementBounds.hitSlop.left},callbackInfo:e.callbackInfo,meta:this.elementData.meta};return JSON.stringify(t,null,2)}render(){let e=!this.elementData.isIntersectingWithViewport&&this.currentDeviceStrategy!=="touch";return xt`
       <div class="element-wrapper ${e?"not-visible":""}">
         <expandable-item
           .borderColor=${this.getBorderColor()}
@@ -739,13 +786,13 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
               @click="${this.handleUnregister}"
               title="Unregister element"
             >
-              ${be}
+              ${we}
             </button>
           </div>
           <div slot="details">${this.formatElementDetails()}</div>
         </expandable-item>
       </div>
-    `}};f.styles=[xt`
+    `}};v.styles=[kt`
       :host {
         display: block;
       }
@@ -789,6 +836,11 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         box-shadow: 0 0 0 2px rgba(153, 153, 153, 0.3);
       }
 
+      .status-indicator.touch-device {
+        background-color: #ba68c8;
+        box-shadow: 0 0 0 2px rgba(186, 104, 200, 0.4);
+      }
+
       .unregister-button {
         all: unset;
         display: flex;
@@ -845,8 +897,8 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
       .element-wrapper.not-visible {
         opacity: 0.5;
       }
-    `],n([q({hasChanged:()=>!0})],f.prototype,"elementData",2),n([q()],f.prototype,"isActive",2),n([q()],f.prototype,"isExpanded",2),n([q()],f.prototype,"onToggle",2),f=n([wt("single-element")],f);var h=class extends Ct{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.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.runningCallbacks=new Set;this.expandedElementIds=new Set;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 i=e.element.compareDocumentPosition(t.element);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0};this.sortOrder=l.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:le},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:ce},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:de}]}_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(),L.instance.addEventListener("elementRegistered",t=>{this.elementListItems.set(t.elementData.element,t.elementData)},{signal:e}),L.instance.addEventListener("elementDataUpdated",t=>{this.elementListItems.get(t.elementData.element)&&(this.elementListItems.set(t.elementData.element,t.elementData),this.requestUpdate())},{signal:e}),L.instance.addEventListener("elementReactivated",t=>{this.elementListItems.get(t.elementData.element)&&(this.elementListItems.set(t.elementData.element,t.elementData),this.requestUpdate())},{signal:e}),L.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.runningCallbacks.delete(t.elementData.element),this.requestUpdate()},{signal:e}),L.instance.addEventListener("callbackInvoked",t=>{this.elementListItems.get(t.elementData.element)&&this.elementListItems.set(t.elementData.element,t.elementData),this.runningCallbacks.add(t.elementData.element),this.requestUpdate()},{signal:e}),L.instance.addEventListener("callbackCompleted",t=>{this.elementListItems.get(t.elementData.element)&&this.elementListItems.set(t.elementData.element,t.elementData),this.handleCallbackCompleted(t.hitType),this.runningCallbacks.delete(t.elementData.element),this.requestUpdate()},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}updateElementListFromManager(){this.elementListItems=new Map(L.instance.registeredElements)}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,i)=>t.isIntersectingWithViewport!==i.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,i));default:return this.sortOrder,e}}getActiveElements(){return this.getSortedElements().filter(e=>e.callbackInfo.isCallbackActive)}getInactiveElements(){return this.getSortedElements().filter(e=>!e.callbackInfo.isCallbackActive)}render(){return R`
+    `],n([J({hasChanged:()=>!0})],v.prototype,"elementData",2),n([J()],v.prototype,"isActive",2),n([J()],v.prototype,"isExpanded",2),n([J()],v.prototype,"onToggle",2),n([Ct()],v.prototype,"currentDeviceStrategy",2),v=n([Et("single-element")],v);var m=class extends Tt{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},touch:0,viewport:0,total:0};this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.runningCallbacks=new Set;this.expandedElementIds=new Set;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 i=e.element.compareDocumentPosition(t.element);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0};this.sortOrder=l.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:pe},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:he},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:me}]}_generateHitsChipTitle(e){let t=[];t.push(`Total Callback Hits: ${e.total}`),t.push("");let i=e.mouse.trajectory+e.mouse.hover,a=e.scroll.up+e.scroll.down+e.scroll.left+e.scroll.right,s=e.tab.forwards+e.tab.reverse;t.push("Desktop Strategy"),i>0?t.push(`   Mouse (${i}): ${e.mouse.trajectory} trajectory, ${e.mouse.hover} hover`):t.push("   Mouse: No hits"),a>0?t.push(`   Scroll (${a}): Up ${e.scroll.up}, Down ${e.scroll.down}, Left ${e.scroll.left}, Right ${e.scroll.right}`):t.push("   Scroll: No hits"),s>0?t.push(`   Tab (${s}): ${e.tab.forwards} forward, ${e.tab.reverse} reverse`):t.push("   Tab: No hits"),t.push("");let d=e.touch+e.viewport;return t.push("Touch Strategy"),e.touch>0?t.push(`   Touch Start: ${e.touch}`):t.push("   Touch Start: No hits"),e.viewport>0?t.push(`   Viewport Enter: ${e.viewport}`):t.push("   Viewport Enter: No hits"),d===0&&i+a+s===0&&(t.push(""),t.push("Interact with registered elements to see callback statistics")),t.join(`
+`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),$.instance.addEventListener("elementRegistered",t=>{this.elementListItems.set(t.elementData.element,t.elementData)},{signal:e}),$.instance.addEventListener("elementDataUpdated",t=>{this.elementListItems.get(t.elementData.element)&&(this.elementListItems.set(t.elementData.element,t.elementData),this.requestUpdate())},{signal:e}),$.instance.addEventListener("elementReactivated",t=>{this.elementListItems.get(t.elementData.element)&&(this.elementListItems.set(t.elementData.element,t.elementData),this.requestUpdate())},{signal:e}),$.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.runningCallbacks.delete(t.elementData.element),this.requestUpdate()},{signal:e}),$.instance.addEventListener("callbackInvoked",t=>{this.elementListItems.get(t.elementData.element)&&this.elementListItems.set(t.elementData.element,t.elementData),this.runningCallbacks.add(t.elementData.element),this.requestUpdate()},{signal:e}),$.instance.addEventListener("callbackCompleted",t=>{this.elementListItems.get(t.elementData.element)&&this.elementListItems.set(t.elementData.element,t.elementData),this.handleCallbackCompleted(t.hitType),this.runningCallbacks.delete(t.elementData.element),this.requestUpdate()},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}updateElementListFromManager(){this.elementListItems=new Map($.instance.registeredElements)}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;case"touch":this.hitCount.touch++;break;case"viewport":this.hitCount.viewport++;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,i)=>t.isIntersectingWithViewport!==i.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,i));default:return this.sortOrder,e}}getActiveElements(){return this.getSortedElements().filter(e=>e.callbackInfo.isCallbackActive)}getInactiveElements(){return this.getSortedElements().filter(e=>!e.callbackInfo.isCallbackActive)}render(){return B`
       <tab-header>
         <div slot="chips" class="chips-container">
           <chip-element title="${this._generateHitsChipTitle(this.hitCount)}">
@@ -865,12 +917,12 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         .noContentMessage=${this.noContentMessage}
         .hasContent=${!!this.elementListItems.size}
       >
-        ${this.getActiveElements().length>0?R`
+        ${this.getActiveElements().length>0?B`
               <div class="element-section">
                 <h3 class="section-header active">
                   Active Elements (${this.getActiveElements().length})
                 </h3>
-                ${Ce(this.getActiveElements(),e=>R`
+                ${Me(this.getActiveElements(),e=>B`
                     <single-element
                       .elementData=${e}
                       .isActive=${this.runningCallbacks.has(e.element)}
@@ -881,12 +933,12 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
                   `)}
               </div>
             `:""}
-        ${this.getInactiveElements().length>0?R`
+        ${this.getInactiveElements().length>0?B`
               <div class="element-section">
                 <h3 class="section-header inactive">
                   Inactive Elements (${this.getInactiveElements().length})
                 </h3>
-                ${Ce(this.getInactiveElements(),e=>R`
+                ${Me(this.getInactiveElements(),e=>B`
                     <single-element
                       .elementData=${e}
                       .isActive=${this.runningCallbacks.has(e.element)}
@@ -898,7 +950,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
               </div>
             `:""}
       </tab-content>
-    `}};h.styles=Et`
+    `}};m.styles=St`
     :host {
       display: flex;
       flex-direction: column;
@@ -931,9 +983,9 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
     .section-header.inactive {
       color: #999;
     }
-  `,n([M()],h.prototype,"hitCount",2),n([M()],h.prototype,"sortDropdown",2),n([M()],h.prototype,"sortOrder",2),n([M()],h.prototype,"elementListItems",2),n([M()],h.prototype,"noContentMessage",2),n([M()],h.prototype,"runningCallbacks",2),n([M()],h.prototype,"expandedElementIds",2),h=n([St("element-tab")],h);import{css as Tt,html as Se,LitElement as Dt}from"lit";import{customElement as Mt,property as Lt}from"lit/decorators.js";var N=class extends Dt{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 Se`
+  `,n([L()],m.prototype,"hitCount",2),n([L()],m.prototype,"sortDropdown",2),n([L()],m.prototype,"sortOrder",2),n([L()],m.prototype,"elementListItems",2),n([L()],m.prototype,"noContentMessage",2),n([L()],m.prototype,"runningCallbacks",2),n([L()],m.prototype,"expandedElementIds",2),m=n([Dt("element-tab")],m);import{css as Mt,html as Le,LitElement as Lt}from"lit";import{customElement as $t,property as _t}from"lit/decorators.js";var A=class extends Lt{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 Le`
       <div class="tab-selector-wrapper">
-        ${this.tabs.map(e=>Se`
+        ${this.tabs.map(e=>Le`
             <button
               class="tab-button ${this.activeTab===e?"active":""}"
               @click="${()=>this._handleTabClick(e)}"
@@ -943,7 +995,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
             </button>
           `)}
       </div>
-    `}};N.styles=Tt`
+    `}};A.styles=Mt`
     .tab-selector-wrapper {
       border-bottom: 2px solid #444;
       margin-top: 12px;
@@ -974,8 +1026,8 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
       color: #b0c4de;
       border-bottom-color: #b0c4de;
     }
-  `,n([Lt({type:String})],N.prototype,"activeTab",2),N=n([Mt("tab-selector")],N);import{ForesightManager as H}from"js.foresight";import{LitElement as Ft,css as Vt,html as Y}from"lit";import{customElement as At,property as jt,state as F}from"lit/decorators.js";import{map as zt}from"lit/directives/map.js";function De(o,s){let e={};o.eventListeners.forEach((i,a)=>{e[a]=i.length});let t=[];return o.registeredElements.forEach((i,a)=>{let{element:r,...p}=i;t.push({...p,elementInfo:`${a.tagName.toLowerCase()}${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:s,globalCallbackHits:o.globalCallbackHits,localizedTimestamp:new Date().toLocaleTimeString(),eventListenerCount:e,managerSettings:o.globalSettings,registeredElements:t,summary:`${t.length} elements, ${Object.values(e).flat().length} listeners,
-  ${o.globalCallbackHits.total} hits`}}function Me(o,s){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:s,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Te(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:s,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Te(o.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:s,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:s,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:s,summary:`${o.elementData.name} - ${o.hitType.kind}`};case"callbackCompleted":{let e=$t(o.elapsed);return{type:"callbackCompleted",name:o.elementData.name,hitType:o.hitType,callbackInfo:o.elementData.callbackInfo,meta:o.elementData.meta,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:s,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:s,summary:""};case"scrollTrajectoryUpdate":return{type:"scrollTrajectoryUpdate",currentPoint:o.currentPoint,predictedPoint:o.predictedPoint,scrollDirection:o.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),logId:s,summary:o.scrollDirection};case"managerSettingsChanged":return{type:"managerSettingsChanged",globalSettings:o.managerData?.globalSettings||{},settingsChanged:o.updatedSettings,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:s,summary:o.updatedSettings.map(e=>e.setting).join(", ")};default:return{type:"serializationError",error:"Failed to serialize event data",errorMessage:JSON.stringify(o),localizedTimestamp:new Date().toLocaleTimeString(),logId:s,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:s,summary:""}}}function $t(o){return`${(o/1e3).toFixed(4)} s`}function Te(o){let s=["th","st","nd","rd"],e=o%100;return o+(s[(e-20)%10]||s[e]||s[0])}import{html as Le,css as It}from"lit";import{customElement as _t,property as $e}from"lit/decorators.js";var $=class extends D{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 Le`
+  `,n([_t({type:String})],A.prototype,"activeTab",2),A=n([$t("tab-selector")],A);import{ForesightManager as G}from"js.foresight";import{LitElement as Vt,css as Rt,html as X}from"lit";import{customElement as Ft,property as zt,state as j}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,
+  ${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} - ${$e(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} - ${$e(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 $e(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 _=class extends M{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 h}_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
           class="${e}"
@@ -1002,7 +1054,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         </button>
 
         <div class="${t}" id="dropdown-menu" role="menu">
-          ${this.dropdownOptions.map(i=>Le`
+          ${this.dropdownOptions.map(i=>Oe`
               <button
                 value="${i.value}"
                 title="${i.title}"
@@ -1015,7 +1067,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
             `)}
         </div>
       </div>
-    `}};$.styles=[...D.styles,It`
+    `}};_.styles=[...M.styles,Ot`
       .dropdown-menu button.active::after {
         content: "✓";
         position: absolute;
@@ -1031,7 +1083,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         color: #b0c4de;
         margin-left: 2px;
       }
-    `],n([$e({type:Array})],$.prototype,"selectedValues",2),n([$e()],$.prototype,"onSelectionChange",2),$=n([_t("multi-select-dropdown")],$);import{LitElement as Ot,html as Pt,css as Ut}from"lit";import{customElement as Nt,property as ee}from"lit/decorators.js";var E=class extends Ot{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),r=i?"rgba(244, 67, 54, 0.1)":"transparent";this.style.setProperty("--log-color",a),this.style.setProperty("--log-background-color",r)}}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"}[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"}[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 Pt`
+    `],n([Pe({type:Array})],_.prototype,"selectedValues",2),n([Pe()],_.prototype,"onSelectionChange",2),_=n([Pt("multi-select-dropdown")],_);import{LitElement as Ut,html as Nt,css as At}from"lit";import{customElement as jt,property as ie}from"lit/decorators.js";var C=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}
@@ -1047,7 +1099,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
         </div>
         <div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
       </expandable-item>
-    `}};E.styles=[Ut`
+    `}};C.styles=[At`
       :host {
         display: block;
         /*
@@ -1111,7 +1163,7 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
        * as all styling is now handled by setting CSS variables below.
        * This makes the component's styling more self-contained.
        */
-    `],n([ee({attribute:!1})],E.prototype,"log",2),n([ee({type:Boolean})],E.prototype,"isExpanded",2),n([ee()],E.prototype,"onToggle",2),E=n([Nt("single-log")],E);var m=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:oe},{value:"console",label:"Console",title:"Log only to the console",icon:ae},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:re},{value:"none",label:"None",title:"Dont log anywhere",icon:se}],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}]}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),H.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(H.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{H.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"}[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(H.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=De(H.instance.getManagerData,(++this.logIdCounter).toString());this.addLog(e)}addEventLog(e){let t=Me(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.addLog(t)}render(){return Y`
+    `],n([ie({attribute:!1})],C.prototype,"log",2),n([ie({type:Boolean})],C.prototype,"isExpanded",2),n([ie()],C.prototype,"onToggle",2),C=n([jt("single-log")],C);var u=class extends Vt{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:ge},{value:"none",label:"None",title:"Dont log anywhere",icon:de}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:h},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:h},{value:"elementReactivated",label:"Element Reactivated",title:"Show when element gets reactivated after stale time has passed",icon:h},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:h},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:h},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:h},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:h},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:h},{value:"deviceStrategyChanged",label:"Strategy Changed",title:"Show strategy change events",icon:h}]}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),G.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(G.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{G.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(G.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=_e(G.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 X`
       <tab-header>
         <div slot="chips" class="chips-container">
           <chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
@@ -1119,13 +1171,13 @@ var je=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var n=(o,s,e
           </chip-element>
         </div>
         <div slot="actions">
-          ${this.shouldShowPerformanceWarning()?Y`
+          ${this.shouldShowPerformanceWarning()?X`
                 <div
                   class="warning-container"
                   title="Console logging can be slow with frequent trajectory events.
 Consider using 'Control Panel' only for better performance."
                 >
-                  ${me}
+                  ${fe}
                 </div>
               `:""}
           <single-select-dropdown
@@ -1144,7 +1196,7 @@ Consider using 'Control Panel' only for better performance."
             title="Log the state from the manager"
             @click="${this.logManagerData}"
           >
-            ${ue}
+            ${ye}
           </button>
           <button
             class="single-button"
@@ -1152,12 +1204,12 @@ Consider using 'Control Panel' only for better performance."
             ?disabled="${this.logs.length===0}"
             @click="${this.clearLogs}"
           >
-            ${pe}
+            ${ue}
           </button>
         </div>
       </tab-header>
       <tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!this.logs.length}>
-        ${this.logs.length===0?Y`<div class="no-items">${this.getNoLogsMessage()}</div>`:zt(this.logs,e=>Y`
+        ${this.logs.length===0?X`<div class="no-items">${this.getNoLogsMessage()}</div>`:Ht(this.logs,e=>X`
                 <single-log
                   .log=${e}
                   .isExpanded=${this.expandedLogIds.has(e.logId)}
@@ -1165,7 +1217,7 @@ Consider using 'Control Panel' only for better performance."
                 ></single-log>
               `)}
       </tab-content>
-    `}};m.styles=[Vt`
+    `}};u.styles=[Rt`
       :host {
         display: flex;
         flex-direction: column;
@@ -1258,7 +1310,7 @@ Consider using 'Control Panel' only for better performance."
       .warning-container:hover svg {
         stroke: #ffdc3e;
       }
-    `],n([F()],m.prototype,"logDropdown",2),n([F()],m.prototype,"filterDropdown",2),n([F()],m.prototype,"logLocation",2),n([F()],m.prototype,"eventsEnabled",2),n([F()],m.prototype,"logs",2),n([F()],m.prototype,"expandedLogIds",2),n([jt()],m.prototype,"noContentMessage",2),m=n([At("log-tab")],m);import{ForesightManager as Ue}from"js.foresight";import{css as gn,html as Ne,LitElement as hn}from"lit";import{customElement as mn,state as X}from"lit/decorators.js";var te="points",Ie="px",_e="tabs",Oe="ms";import{LitElement as Kt,html as Wt,css as qt}from"lit";import{customElement as Yt,property as J}from"lit/decorators.js";import{LitElement as Rt,html as Ht,css as Bt}from"lit";import{customElement as Gt,property as Pe}from"lit/decorators.js";var I=class extends Rt{constructor(){super(...arguments);this.header="";this.description=""}render(){return Ht`<div class="setting-item">
+    `],n([j()],u.prototype,"logDropdown",2),n([j()],u.prototype,"filterDropdown",2),n([j()],u.prototype,"logLocation",2),n([j()],u.prototype,"eventsEnabled",2),n([j()],u.prototype,"logs",2),n([j()],u.prototype,"expandedLogIds",2),n([zt()],u.prototype,"noContentMessage",2),u=n([Ft("log-tab")],u);import{ForesightManager as ae}from"js.foresight";import{css as bn,html as W,LitElement as vn}from"lit";import{customElement as fn,state as K}from"lit/decorators.js";var oe="points";var Ue="tabs";import{LitElement as qt,html as Yt,css as Jt}from"lit";import{customElement as Xt,property as Z}from"lit/decorators.js";import{LitElement as Bt,html as Gt,css as Wt}from"lit";import{customElement as Kt,property as Ne}from"lit/decorators.js";var I=class extends Bt{constructor(){super(...arguments);this.header="";this.description=""}render(){return Gt`<div class="setting-item">
       <label>
         <span class="setting-header">${this.header}</span>
         <span class="setting-description"> ${this.description} </span>
@@ -1266,7 +1318,7 @@ Consider using 'Control Panel' only for better performance."
       <div class="setting-controls">
         <slot name="controls"></slot>
       </div>
-    </div>`}};I.styles=[Bt`
+    </div>`}};I.styles=[Wt`
       .setting-item {
         display: flex;
         align-items: center;
@@ -1306,14 +1358,14 @@ Consider using 'Control Panel' only for better performance."
         color: #fff;
         font-size: 13px;
       }
-    `],n([Pe({type:String})],I.prototype,"header",2),n([Pe({type:String})],I.prototype,"description",2),I=n([Gt("setting-item")],I);import{ForesightManager as Jt}from"js.foresight";var y=class extends Kt{constructor(){super(...arguments);this.isChecked=!1;this.header="";this.description="";this.setting="enableMousePrediction"}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let i=t.checked;this.setting==="showNameTags"?this.dispatchEvent(new CustomEvent("setting-changed",{detail:{setting:this.setting,value:i},bubbles:!0})):Jt.instance.alterGlobalSettings({[this.setting]:i})}}render(){return Wt`<setting-item header=${this.header} description=${this.description}>
+    `],n([Ne({type:String})],I.prototype,"header",2),n([Ne({type:String})],I.prototype,"description",2),I=n([Kt("setting-item")],I);import{ForesightManager as Zt}from"js.foresight";var w=class extends qt{constructor(){super(...arguments);this.isChecked=!1;this.header="";this.description="";this.setting="enableMousePrediction"}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let i=t.checked;this.setting==="showNameTags"?this.dispatchEvent(new CustomEvent("setting-changed",{detail:{setting:this.setting,value:i},bubbles:!0})):Zt.instance.alterGlobalSettings({[this.setting]:i})}}render(){return Yt`<setting-item header=${this.header} description=${this.description}>
       <input
         slot="controls"
         type="checkbox"
         .checked=${this.isChecked}
         @change=${this.handleCheckboxChange}
       />
-    </setting-item>`}};y.styles=[qt`
+    </setting-item>`}};w.styles=[Jt`
       input[type="checkbox"] {
         appearance: none;
         -webkit-appearance: none;
@@ -1356,7 +1408,7 @@ Consider using 'Control Panel' only for better performance."
       input[type="checkbox"]:hover {
         box-shadow: 0 0 0 3px rgba(176, 196, 222, 0.1);
       }
-    `],n([J({type:Boolean})],y.prototype,"isChecked",2),n([J({type:String})],y.prototype,"header",2),n([J({type:String})],y.prototype,"description",2),n([J({type:String})],y.prototype,"setting",2),y=n([Yt("setting-item-checkbox")],y);import{LitElement as Xt,html as Zt,css as Qt}from"lit";import{customElement as en,property as _,state as tn}from"lit/decorators.js";import{ForesightManager as nn}from"js.foresight";var g=class extends Xt{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 i=parseInt(t.value,10);this.displayValue=i,nn.instance.alterGlobalSettings({[this.setting]:i})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return Zt`<setting-item header=${this.header} description=${this.description}>
+    `],n([Z({type:Boolean})],w.prototype,"isChecked",2),n([Z({type:String})],w.prototype,"header",2),n([Z({type:String})],w.prototype,"description",2),n([Z({type:String})],w.prototype,"setting",2),w=n([Xt("setting-item-checkbox")],w);import{LitElement as Qt,html as en,css as tn}from"lit";import{customElement as nn,property as O,state as on}from"lit/decorators.js";import{ForesightManager as an}from"js.foresight";var p=class extends Qt{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 i=parseInt(t.value,10);this.displayValue=i,an.instance.alterGlobalSettings({[this.setting]:i})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return en`<setting-item header=${this.header} description=${this.description}>
       <div slot="controls" class="range-wrapper">
         <input
           slot="controls"
@@ -1370,7 +1422,7 @@ Consider using 'Control Panel' only for better performance."
         />
         <span class="setting-range-value">${this.displayValue} ${this.unit}</span>
       </div>
-    </setting-item>`}};g.styles=[Qt`
+    </setting-item>`}};p.styles=[tn`
       .setting-range-value {
         font-size: 12px;
         color: #b0c4de;
@@ -1439,14 +1491,14 @@ Consider using 'Control Panel' only for better performance."
         transform: scale(1.1);
         box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
       }
-    `],n([_({type:Number})],g.prototype,"minValue",2),n([_({type:Number})],g.prototype,"maxValue",2),n([_({type:Number})],g.prototype,"currentValue",2),n([_({type:String})],g.prototype,"unit",2),n([_({type:String})],g.prototype,"header",2),n([_({type:String})],g.prototype,"description",2),n([_({type:String})],g.prototype,"setting",2),n([tn()],g.prototype,"displayValue",2),g=n([en("setting-item-range")],g);var x=class extends hn{constructor(){super();this.changedSettings=[];this._abortController=null;let e=l.instance.devtoolsSettings,t=Ue.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;Ue.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 i of t){let a=this.initialSettings.manager[i],r=this.managerSettings[i];a!==r&&e.push({setting:i,oldValue:a,newValue:r})}}_checkDevtoolsSettingsChanges(e){let t=["showNameTags"];for(let i of t){let a=this.initialSettings.devtools[i],r=this.devtoolsSettings[i];a!==r&&e.push({setting:i,oldValue:a,newValue:r})}}_handleDevtoolsSettingChange(e){let{setting:t,value:i}=e.detail;t==="showNameTags"&&(this.devtoolsSettings={...this.devtoolsSettings,showNameTags:i},l.instance.alterDevtoolsSettings({showNameTags:i}),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 Ne`<tab-content
+    `],n([O({type:Number})],p.prototype,"minValue",2),n([O({type:Number})],p.prototype,"maxValue",2),n([O({type:Number})],p.prototype,"currentValue",2),n([O({type:String})],p.prototype,"unit",2),n([O({type:String})],p.prototype,"header",2),n([O({type:String})],p.prototype,"description",2),n([O({type:String})],p.prototype,"setting",2),n([on()],p.prototype,"displayValue",2),p=n([nn("setting-item-range")],p);var f=class extends vn{constructor(){super();this.changedSettings=[];this.touchDeviceStrategyOptions=[{value:"onTouchStart",label:"On Touch Start",title:"Execute callbacks when user touches registered elements",icon:W`<span>Touch</span>`},{value:"viewport",label:"Viewport Entry",title:"Execute callbacks when registered elements enter the viewport",icon:W`<span>Viewport</span>`},{value:"none",label:"None",title:"Disable touch device prediction",icon:W`<span>None</span>`}];this._abortController=null;this._handleTouchDeviceStrategyChange=e=>{ae.instance.alterGlobalSettings({touchDeviceStrategy:e})};let e=l.instance.devtoolsSettings,t=ae.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;ae.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","touchDeviceStrategy"];for(let i of t){let a=this.initialSettings.manager[i],s=this.managerSettings[i];a!==s&&e.push({setting:i,oldValue:a,newValue:s})}}_checkDevtoolsSettingsChanges(e){let t=["showNameTags"];for(let i of t){let a=this.initialSettings.devtools[i],s=this.devtoolsSettings[i];a!==s&&e.push({setting:i,oldValue:a,newValue:s})}}_handleDevtoolsSettingChange(e){let{setting:t,value:i}=e.detail;t==="showNameTags"&&(this.devtoolsSettings={...this.devtoolsSettings,showNameTags:i},l.instance.alterDevtoolsSettings({showNameTags:i}),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,touchDeviceStrategy:e.touchDeviceStrategy};return`ForesightManager.initialize(${JSON.stringify(t,null,2)})`}render(){if(!this.managerSettings||!this.devtoolsSettings)return W`<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(i=>`${i.setting}: ${JSON.stringify(i.oldValue)} -> ${JSON.stringify(i.newValue)}`).join(`
-`):"No settings changed from initial values";return Ne`
+`):"No settings changed from initial values";return W`
       <tab-header>
         <div slot="chips" class="chips-container">
           <chip-element .title=${t}> ${this.changedSettings.length} changed </chip-element>
@@ -1474,7 +1526,7 @@ Click on the copy icon to easely copy the new setting into your project
                 .currentValue=${e.trajectoryPredictionTime}
                 .maxValue=${200}
                 .minValue=${10}
-                .unit=${Oe}
+                .unit=${"ms"}
                 header="Prediction Time"
                 description="How far into the future to calculate mouse trajectory path"
                 setting="trajectoryPredictionTime"
@@ -1483,9 +1535,9 @@ Click on the copy icon to easely copy the new setting into your project
                 .currentValue=${e.positionHistorySize}
                 .maxValue=${30}
                 .minValue=${2}
-                .unit=${te}
+                .unit=${oe}
                 header="Position History Size"
-                description="How far into the future, in ${te}, to calculate mouse trajectory path"
+                description="How far into the future, in ${oe}, to calculate mouse trajectory path"
                 setting="positionHistorySize"
               >
               </setting-item-range>
@@ -1503,7 +1555,7 @@ Click on the copy icon to easely copy the new setting into your project
                 .currentValue=${e.tabOffset}
                 .maxValue=${20}
                 .minValue=${0}
-                .unit=${_e}
+                .unit=${Ue}
                 header="Tab Offset"
                 description="Number of tabbable elements to look ahead when predicting navigation"
                 setting="tabOffset"
@@ -1523,13 +1575,28 @@ Click on the copy icon to easely copy the new setting into your project
                 .currentValue=${e.scrollMargin}
                 .maxValue=${300}
                 .minValue=${30}
-                .unit=${Ie}
+                .unit=${"px"}
                 header="Scroll Margin"
                 description="Pixel distance to check from mouse position in scroll direction"
                 setting="scrollMargin"
               ></setting-item-range>
             </div>
 
+            <div class="settings-group">
+              <h4>Touch Device</h4>
+              <setting-item
+                header="Touch Device Strategy"
+                description="How to handle prediction on touch devices"
+              >
+                <single-select-dropdown
+                  slot="controls"
+                  .dropdownOptions=${this.touchDeviceStrategyOptions}
+                  .selectedOptionValue=${e.touchDeviceStrategy}
+                  .onSelectionChange=${this._handleTouchDeviceStrategyChange}
+                ></single-select-dropdown>
+              </setting-item>
+            </div>
+
             <!-- Developer Tools Group -->
             <div class="settings-group">
               <h4>Developer Tools</h4>
@@ -1544,7 +1611,7 @@ Click on the copy icon to easely copy the new setting into your project
           </div>
         </div>
       </tab-content>
-    `}};x.styles=gn`
+    `}};f.styles=bn`
     :host {
       display: flex;
       flex-direction: column;
@@ -1575,7 +1642,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([X()],x.prototype,"managerSettings",2),n([X()],x.prototype,"initialSettings",2),n([X()],x.prototype,"devtoolsSettings",2),n([X()],x.prototype,"changedSettings",2),x=n([mn("settings-tab")],x);var O=class extends un{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this.activeTab=this.getStoredTab()}getStoredTab(){try{return localStorage.getItem(this.localStorageSelectedTabKey)||"logs"}catch(e){return console.error(e),"logs"}}_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)}}render(){return vn`
+  `,n([K()],f.prototype,"managerSettings",2),n([K()],f.prototype,"initialSettings",2),n([K()],f.prototype,"devtoolsSettings",2),n([K()],f.prototype,"changedSettings",2),n([K()],f.prototype,"touchDeviceStrategyOptions",2),f=n([fn("settings-tab")],f);var x=class extends yn{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.isTouchDevice=!1;this.isWarningDismissed=!1;this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this._abortController=null;this.activeTab=this.getStoredTab(),this.isTouchDevice=Ae.instance.getManagerData.currentDeviceStrategy==="touch"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Ae.instance.addEventListener("deviceStrategyChanged",t=>{this.isTouchDevice=t.newStrategy==="touch",t.newStrategy==="touch"&&(this.isWarningDismissed=!1)},{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"}}_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)}}dismissWarning(){this.isWarningDismissed=!0}render(){return xn`
       <div class="control-wrapper ${this.isMinimized?"minimized":""}">
         <div class="title-wrapper">
           <button @click="${()=>this.isMinimized=!this.isMinimized}" class="minimize-button">
@@ -1585,6 +1652,18 @@ Click on the copy icon to easely copy the new setting into your project
           <div></div>
         </div>
 
+        <div
+          class="touch-device-warning ${this.isMinimized||!this.isTouchDevice||this.isWarningDismissed?"hidden":""}"
+        >
+          <div class="warning-content">
+            <span class="warning-icon">⚠️</span>
+            <span>Touch device mode: Overlays and visibility sorting not available</span>
+          </div>
+          <button @click="${this.dismissWarning}" class="dismiss-button" title="Dismiss warning">
+            ×
+          </button>
+        </div>
+
         <div class="tab-container ${this.isMinimized?"hidden":""}">
           <tab-selector
             .activeTab="${this.activeTab}"
@@ -1592,15 +1671,15 @@ Click on the copy icon to easely copy the new setting into your project
           ></tab-selector>
 
           <div class="tab-content">
-            <log-tab class=${ne({active:this.activeTab==="logs"})}></log-tab>
-            <element-tab class=${ne({active:this.activeTab==="elements"})}></element-tab>
+            <log-tab class=${re({active:this.activeTab==="logs"})}></log-tab>
+            <element-tab class=${re({active:this.activeTab==="elements"})}></element-tab>
             <settings-tab
-              class=${ne({active:this.activeTab==="settings"})}
+              class=${re({active:this.activeTab==="settings"})}
             ></settings-tab>
           </div>
         </div>
       </div>
-    `}};O.styles=bn`
+    `}};x.styles=wn`
     .control-wrapper {
       padding: 12px;
       position: fixed;
@@ -1675,7 +1754,51 @@ Click on the copy icon to easely copy the new setting into your project
       width: 100%;
       height: 100%;
     }
-  `,n([Fe()],O.prototype,"activeTab",2),n([Fe()],O.prototype,"isMinimized",2),O=n([fn("control-panel")],O);import{LitElement as Pn,css as Un,html as Nn}from"lit";import{customElement as Fn}from"lit/decorators.js";import{LitElement as yn,html as xn,css as wn}from"lit";import{customElement as kn,state as Ve,query as En}from"lit/decorators.js";import{ForesightManager as V}from"js.foresight";var C=class extends yn{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;V.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),V.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),V.instance.addEventListener("elementReactivated",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),V.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}),V.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),V.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:r}=t.elementBounds,p=r.right-r.left,K=r.bottom-r.top;i.style.width=`${p}px`,i.style.height=`${K}px`,i.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 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;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 xn` <div id="overlays-container"></div> `}};C.styles=[wn`
+
+    .touch-device-warning {
+      background-color: rgba(255, 193, 7, 0.9);
+      color: #000;
+      padding: 8px 12px;
+      margin: 8px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+
+    .touch-device-warning.hidden {
+      display: none;
+    }
+
+    .warning-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .warning-icon {
+      font-weight: bold;
+      font-size: 14px;
+    }
+
+    .dismiss-button {
+      background: none;
+      border: none;
+      color: #000;
+      font-size: 16px;
+      cursor: pointer;
+      padding: 0;
+      line-height: 1;
+      font-weight: bold;
+    }
+
+    .dismiss-button:hover {
+      opacity: 0.7;
+    }
+  `,n([Q()],x.prototype,"activeTab",2),n([Q()],x.prototype,"isMinimized",2),n([Q()],x.prototype,"isTouchDevice",2),n([Q()],x.prototype,"isWarningDismissed",2),x=n([kn("control-panel")],x);import{LitElement as jn,css as Vn,html as Ve}from"lit";import{customElement as Rn,state as Fn}from"lit/decorators.js";import{LitElement as En,html as Cn,css as Sn}from"lit";import{customElement as Tn,state as je,query as Dn}from"lit/decorators.js";import{ForesightManager as V}from"js.foresight";var S=class extends En{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;V.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),V.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),V.instance.addEventListener("elementReactivated",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),V.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}),V.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),V.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,q=s.bottom-s.top;i.style.width=`${d}px`,i.style.height=`${q}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 Cn` <div id="overlays-container"></div> `}};S.styles=[Sn`
       :host {
         position: fixed;
         top: 0;
@@ -1742,7 +1865,7 @@ Click on the copy icon to easely copy the new setting into your project
         white-space: nowrap;
         pointer-events: none;
       }
-    `],n([Ve()],C.prototype,"overlayMap",2),n([Ve()],C.prototype,"callbackAnimations",2),n([En("#overlays-container")],C.prototype,"containerElement",2),C=n([kn("element-overlays")],C);import{LitElement as Cn,html as Sn,css as Tn}from"lit";import{customElement as Dn,state as ie}from"lit/decorators.js";import{styleMap as Mn}from"lit/directives/style-map.js";import{ForesightManager as B}from"js.foresight";var S=class extends Cn{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=B.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this.handleElementUnregistered=e=>{e.wasLastElement&&(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,r=i.y-t.y,p=Math.sqrt(a*a+r*r),K=Math.atan2(r,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${K}deg)`,width:`${p}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;B.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),B.instance.addEventListener("elementUnregistered",this.handleElementUnregistered,{signal:e}),B.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),B.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return Sn` <div class="trajectory-line" style=${Mn(e)}></div> `}};S.styles=[Tn`
+    `],n([je()],S.prototype,"overlayMap",2),n([je()],S.prototype,"callbackAnimations",2),n([Dn("#overlays-container")],S.prototype,"containerElement",2),S=n([Tn("element-overlays")],S);import{LitElement as Mn,html as Ln,css as $n}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 R}from"js.foresight";var T=class extends Mn{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=R.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),q=Math.atan2(s,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${q}deg)`,width:`${d}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;R.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),R.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),R.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),R.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),R.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return Ln` <div class="trajectory-line" style=${In(e)}></div> `}};T.styles=[$n`
       :host {
         display: block;
       }
@@ -1773,7 +1896,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([ie()],S.prototype,"_mousePredictionIsEnabled",2),n([ie()],S.prototype,"_isVisible",2),n([ie()],S.prototype,"_trajectoryStyles",2),S=n([Dn("mouse-trajectory")],S);import{LitElement as Ln,html as $n,css as In}from"lit";import{customElement as _n,state as Z}from"lit/decorators.js";import{styleMap as On}from"lit/directives/style-map.js";import{ForesightManager as A}from"js.foresight";var w=class extends Ln{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=A.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=A.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleElementUnregistered=e=>{e.wasLastElement&&(this._isVisible=!1)};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,requestAnimationFrame(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,r=Math.atan2(a,i)*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;A.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),A.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),A.instance.addEventListener("elementUnregistered",this.handleElementUnregistered,{signal:e}),A.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 $n` <div class="scroll-trajectory-line" style=${On(e)}></div> `}};w.styles=[In`
+    `],n([se()],T.prototype,"_mousePredictionIsEnabled",2),n([se()],T.prototype,"_isVisible",2),n([se()],T.prototype,"_trajectoryStyles",2),T=n([_n("mouse-trajectory")],T);import{LitElement as On,html as Pn,css as Un}from"lit";import{customElement as Nn,state as ee}from"lit/decorators.js";import{styleMap as An}from"lit/directives/style-map.js";import{ForesightManager as P}from"js.foresight";var k=class extends On{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=P.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=P.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,requestAnimationFrame(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;P.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),P.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),P.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),P.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),P.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=${An(e)}></div> `}};k.styles=[Un`
       :host {
         display: block;
       }
@@ -1833,13 +1956,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([Z()],w.prototype,"_scrollPredictionIsEnabled",2),n([Z()],w.prototype,"_scrollMargin",2),n([Z()],w.prototype,"_isVisible",2),n([Z()],w.prototype,"_trajectoryStyles",2),w=n([_n("scroll-trajectory")],w);var G=class extends Pn{render(){return Nn`
+    `],n([ee()],k.prototype,"_scrollPredictionIsEnabled",2),n([ee()],k.prototype,"_scrollMargin",2),n([ee()],k.prototype,"_isVisible",2),n([ee()],k.prototype,"_trajectoryStyles",2),k=n([Nn("scroll-trajectory")],k);import{ForesightManager as Re}from"js.foresight";var F=class extends jn{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 Ve`
       <div id="overlay-container">
-        <mouse-trajectory></mouse-trajectory>
-        <scroll-trajectory></scroll-trajectory>
-        <element-overlays></element-overlays>
+        ${this._strategy==="mouse"?Ve`
+              <mouse-trajectory></mouse-trajectory>
+              <scroll-trajectory></scroll-trajectory>
+              <element-overlays></element-overlays>
+            `:""}
       </div>
-    `}};G.styles=[Un`
+    `}};F.styles=[Vn`
       :host {
         display: block;
       }
@@ -1850,8 +1975,8 @@ Click on the copy icon to easely copy the new setting into your project
         pointer-events: none;
         z-index: 9999;
       }
-    `],G=n([Fn("debug-overlay")],G);var l=class extends Vn{constructor(){super();this.isInitialized=!1;this.devtoolsSettings={showDebugger:!0,isControlPanelDefaultMinimized:!1,showNameTags:!0,sortElementList:"visibility",logging:{logLocation:"controlPanel",callbackCompleted:!0,elementReactivated:!0,callbackInvoked:!0,elementDataUpdated:!1,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1}}}static createAndAppendInstance(){typeof window>"u"||typeof document>"u"||(l._instance=document.createElement("foresight-devtools"),document.body.appendChild(l._instance))}static initialize(e){if(l._instance||l.createAndAppendInstance(),!l._instance)return l._instance;let t=l._instance;return t.isInitialized=!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}updateLoggingSetting(e,t){this.shouldUpdateSetting(t,this.devtoolsSettings.logging[e])&&(this.devtoolsSettings.logging[e]=t)}alterDevtoolsSettings(e){e!==void 0&&(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.updateLoggingSetting("callbackCompleted",e.logging.callbackCompleted),this.updateLoggingSetting("callbackInvoked",e.logging.callbackInvoked),this.updateLoggingSetting("elementDataUpdated",e.logging.elementDataUpdated),this.updateLoggingSetting("elementRegistered",e.logging.elementRegistered),this.updateLoggingSetting("elementUnregistered",e.logging.elementUnregistered),this.updateLoggingSetting("managerSettingsChanged",e.logging.managerSettingsChanged),this.updateLoggingSetting("mouseTrajectoryUpdate",e.logging.mouseTrajectoryUpdate),this.updateLoggingSetting("scrollTrajectoryUpdate",e.logging.scrollTrajectoryUpdate)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?Ae``:Ae`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[An`
+    `],n([Fn()],F.prototype,"_strategy",2),F=n([Rn("debug-overlay")],F);var l=class extends zn{constructor(){super();this.isInitialized=!1;this.devtoolsSettings={showDebugger:!0,isControlPanelDefaultMinimized:!1,showNameTags:!0,sortElementList:"visibility",logging:{logLocation:"controlPanel",callbackCompleted:!0,elementReactivated:!0,callbackInvoked:!0,elementDataUpdated:!1,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1,deviceStrategyChanged:!0}}}static createAndAppendInstance(){typeof window>"u"||typeof document>"u"||(l._instance=document.createElement("foresight-devtools"),document.body.appendChild(l._instance))}static initialize(e){if(l._instance||l.createAndAppendInstance(),!l._instance)return l._instance;let t=l._instance;return t.isInitialized=!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}updateLoggingSetting(e,t){this.shouldUpdateSetting(t,this.devtoolsSettings.logging[e])&&(this.devtoolsSettings.logging[e]=t)}alterDevtoolsSettings(e){e!==void 0&&(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.updateLoggingSetting("callbackCompleted",e.logging.callbackCompleted),this.updateLoggingSetting("callbackInvoked",e.logging.callbackInvoked),this.updateLoggingSetting("elementDataUpdated",e.logging.elementDataUpdated),this.updateLoggingSetting("elementRegistered",e.logging.elementRegistered),this.updateLoggingSetting("elementUnregistered",e.logging.elementUnregistered),this.updateLoggingSetting("managerSettingsChanged",e.logging.managerSettingsChanged),this.updateLoggingSetting("mouseTrajectoryUpdate",e.logging.mouseTrajectoryUpdate),this.updateLoggingSetting("scrollTrajectoryUpdate",e.logging.scrollTrajectoryUpdate),this.updateLoggingSetting("deviceStrategyChanged",e.logging.deviceStrategyChanged)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?Fe``:Fe`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[Hn`
       :host {
         display: block;
       }
-    `],l._instance=null,n([zn()],l.prototype,"isInitialized",2),l=n([jn("foresight-devtools")],l);export{l as ForesightDevtools};
+    `],l._instance=null,n([Gn()],l.prototype,"isInitialized",2),l=n([Bn("foresight-devtools")],l);export{l as ForesightDevtools};