js.foresight-devtools 1.1.2-beta.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e,t)=>{for(var i=t>1?void 0:t?Ne(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&&Ue(s,e,i),i};import{LitElement as Mn,css as Ln,html as Pe}from"lit";import{customElement as _n,state as In}from"lit/decorators.js";import{LitElement as an,css as sn,html as rn}from"lit";import{customElement as ln,state as q}from"lit/decorators.js";import{classMap as ee}from"lit/directives/class-map.js";import{css as gt,html as xe,LitElement as mt}from"lit";import{customElement as ht,state as b}from"lit/decorators.js";import{map as ut}from"lit/directives/map.js";import{ForesightManager as L}from"js.foresight";import{html as p}from"lit";var ne=p`
1
+ 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`
2
2
  <svg
3
3
  xmlns="http://www.w3.org/2000/svg"
4
4
  width="16"
@@ -15,7 +15,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
15
15
  <line x1="7" y1="21" x2="17" y2="21"></line>
16
16
  <line x1="12" y1="17" x2="12" y2="21"></line>
17
17
  </svg>
18
- `,ie=p`
18
+ `,ae=c`
19
19
  <svg
20
20
  xmlns="http://www.w3.org/2000/svg"
21
21
  width="16"
@@ -30,7 +30,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
30
30
  <polyline points="4 17 10 11 4 5"></polyline>
31
31
  <line x1="12" y1="19" x2="20" y2="19"></line>
32
32
  </svg>
33
- `,oe=p`
33
+ `,se=c`
34
34
  <svg
35
35
  xmlns="http://www.w3.org/2000/svg"
36
36
  width="16"
@@ -46,7 +46,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
46
46
  <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
47
47
  <line x1="1" y1="1" x2="23" y2="23"></line>
48
48
  </svg>
49
- `,ae=p`
49
+ `,re=c`
50
50
  <svg
51
51
  xmlns="http://www.w3.org/2000/svg"
52
52
  width="16"
@@ -64,7 +64,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
64
64
  <circle cx="6" cy="18" r="2" />
65
65
  <circle cx="18" cy="18" r="2" />
66
66
  </svg>
67
- `,se=p`
67
+ `,le=c`
68
68
  <svg
69
69
  xmlns="http://www.w3.org/2000/svg"
70
70
  width="16"
@@ -79,7 +79,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
79
79
  <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
80
80
  <circle cx="12" cy="12" r="3" />
81
81
  </svg>
82
- `,re=p`
82
+ `,ce=c`
83
83
  <svg
84
84
  xmlns="http://www.w3.org/2000/svg"
85
85
  width="16"
@@ -97,7 +97,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
97
97
  <line x1="16" y1="17" x2="8" y2="17" />
98
98
  <line x1="10" y1="9" x2="8" y2="9" />
99
99
  </svg>
100
- `,le=p`
100
+ `,de=c`
101
101
  <svg
102
102
  xmlns="http://www.w3.org/2000/svg"
103
103
  width="16"
@@ -111,7 +111,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
111
111
  >
112
112
  <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
113
113
  </svg>
114
- `,h=p`
114
+ `,u=c`
115
115
  <svg
116
116
  xmlns="http://www.w3.org/2000/svg"
117
117
  width="16"
@@ -125,7 +125,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
125
125
  >
126
126
  <polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46" />
127
127
  </svg>
128
- `,ce=p`
128
+ `,pe=c`
129
129
  <svg
130
130
  xmlns="http://www.w3.org/2000/svg"
131
131
  width="16"
@@ -140,7 +140,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
140
140
  <circle cx="12" cy="12" r="10" />
141
141
  <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
142
142
  </svg>
143
- `,de=p`
143
+ `,ge=c`
144
144
  <svg
145
145
  xmlns="http://www.w3.org/2000/svg"
146
146
  width="24"
@@ -155,7 +155,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
155
155
  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
156
156
  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
157
157
  </svg>
158
- `,pe=p`
158
+ `,he=c`
159
159
  <svg
160
160
  xmlns="http://www.w3.org/2000/svg"
161
161
  width="24"
@@ -169,7 +169,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
169
169
  >
170
170
  <polyline points="20 6 9 17 4 12"></polyline>
171
171
  </svg>
172
- `,ge=p`
172
+ `,me=c`
173
173
  <svg
174
174
  xmlns="http://www.w3.org/2000/svg"
175
175
  width="16"
@@ -187,7 +187,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
187
187
  <line x1="12" y1="9" x2="12" y2="13"></line>
188
188
  <line x1="12" y1="17" x2="12.01" y2="17"></line>
189
189
  </svg>
190
- `,me=p`
190
+ `,ue=c`
191
191
  <svg
192
192
  xmlns="http://www.w3.org/2000/svg"
193
193
  width="16"
@@ -208,11 +208,28 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
208
208
  <path d="M10 8l2-2 2 2"></path>
209
209
  <path d="M14 16l-2 2-2-2"></path>
210
210
  </svg>
211
- `;import{LitElement as Ve,html as Fe,css as je}from"lit";import{customElement as Re,property as ze}from"lit/decorators.js";var O=class extends Ve{constructor(){super(...arguments);this.title=""}render(){return Fe`
211
+ `,be=c`
212
+ <svg
213
+ xmlns="http://www.w3.org/2000/svg"
214
+ width="12"
215
+ height="12"
216
+ viewBox="0 0 24 24"
217
+ fill="none"
218
+ stroke="currentColor"
219
+ stroke-width="2"
220
+ stroke-linecap="round"
221
+ stroke-linejoin="round"
222
+ >
223
+ <polyline points="3 6 5 6 21 6"></polyline>
224
+ <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
225
+ <line x1="10" y1="11" x2="10" y2="17"></line>
226
+ <line x1="14" y1="11" x2="14" y2="17"></line>
227
+ </svg>
228
+ `;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`
212
229
  <span class="chip" title="${this.title}">
213
230
  <slot></slot>
214
231
  </span>
215
- `}};O.styles=[je`
232
+ `}};P.styles=[Be`
216
233
  :host {
217
234
  display: inline-block;
218
235
  }
@@ -232,11 +249,11 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
232
249
  line-height: 1.2;
233
250
  transition: all 0.2s ease;
234
251
  }
235
- `],n([ze({type:String})],O.prototype,"title",2),O=n([Re("chip-element")],O);import{LitElement as Ae,html as X,css as He}from"lit";import{customElement as Be,property as he}from"lit/decorators.js";var D=class extends Ae{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return X`
252
+ `],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`
236
253
  <div class="content-container">
237
- ${this.hasContent?X`<slot></slot>`:X`<div class="no-content-message">${this.noContentMessage}</div>`}
254
+ ${this.hasContent?Q`<slot></slot>`:Q`<div class="no-content-message">${this.noContentMessage}</div>`}
238
255
  </div>
239
- `}};D.styles=[He`
256
+ `}};T.styles=[qe`
240
257
  :host {
241
258
  overflow: hidden;
242
259
  }
@@ -259,6 +276,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
259
276
  }
260
277
 
261
278
  .content-container {
279
+ scrollbar-gutter: stable;
262
280
  height: 100%;
263
281
  min-height: 150px;
264
282
  overflow-y: auto;
@@ -275,7 +293,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
275
293
  font-style: italic;
276
294
  font-family: "Courier New", monospace;
277
295
  }
278
- `],n([he({type:String,attribute:"no-content-message"})],D.prototype,"noContentMessage",2),n([he({type:Boolean})],D.prototype,"hasContent",2),D=n([Be("tab-content")],D);import{LitElement as Ge,html as We,css as Ke}from"lit";import{customElement as Ye}from"lit/decorators.js";var j=class extends Ge{render(){return We`
296
+ `],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`
279
297
  <div class="tab-bar-elements">
280
298
  <div class="tab-bar-info">
281
299
  <div class="stats-chips">
@@ -286,7 +304,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
286
304
  <slot name="actions"></slot>
287
305
  </div>
288
306
  </div>
289
- `}};j.styles=[Ke`
307
+ `}};j.styles=[Ze`
290
308
  :host {
291
309
  }
292
310
  .tab-bar-info {
@@ -330,7 +348,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
330
348
  z-index: 5;
331
349
  min-height: 36px;
332
350
  }
333
- `],j=n([Ye("tab-header")],j);import{html as Qe}from"lit";import{customElement as et,property as be}from"lit/decorators.js";import{LitElement as qe,html as ue,css as Je}from"lit";import{property as Xe,state as Ze}from"lit/decorators.js";var d=class d extends qe{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,T=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=`${T}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return ue`
351
+ `],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`
334
352
  <div class="dropdown-container">
335
353
  <button
336
354
  class="${e}"
@@ -356,7 +374,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
356
374
  </button>
357
375
 
358
376
  <div class="${t}" id="dropdown-menu" role="menu">
359
- ${this.dropdownOptions.map(i=>ue`
377
+ ${this.dropdownOptions.map(i=>fe`
360
378
  <button
361
379
  value="${i.value}"
362
380
  title="${i.title}"
@@ -369,7 +387,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
369
387
  `)}
370
388
  </div>
371
389
  </div>
372
- `}};d.currentlyOpen=null,d.styles=[Je`
390
+ `}};d.currentlyOpen=null,d.styles=[tt`
373
391
  :host {
374
392
  display: inline-block;
375
393
  }
@@ -484,15 +502,15 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
484
502
  color: #b0c4de;
485
503
  font-weight: bold;
486
504
  }
487
- `],n([Ze()],d.prototype,"isDropdownOpen",2),n([Xe({type:Array})],d.prototype,"dropdownOptions",2);var M=d;var P=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:Qe``}_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([be({type:String})],P.prototype,"selectedOptionValue",2),n([be({type:Function})],P.prototype,"onSelectionChange",2),P=n([et("single-select-dropdown")],P);import{LitElement as lt,html as ct,css as dt}from"lit";import{customElement as pt,property as G}from"lit/decorators.js";import{LitElement as at,html as ye,css as st}from"lit";import{customElement as rt,property as R}from"lit/decorators.js";import{LitElement as tt,html as nt,css as it}from"lit";import{customElement as ot,property as ve,state as fe}from"lit/decorators.js";var f=class extends tt{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 nt`
505
+ `],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`
488
506
  <button
489
507
  class="copy-button ${this.isCopied?"copied":""}"
490
508
  title="${this.title}"
491
509
  @click=${this.handleClick}
492
510
  >
493
- ${this.isCopied?pe:de}
511
+ ${this.isCopied?he:ge}
494
512
  </button>
495
- `}};f.styles=it`
513
+ `}};v.styles=lt`
496
514
  .copy-button {
497
515
  background: transparent;
498
516
  border: 0px;
@@ -531,7 +549,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
531
549
  .copy-button.copied svg {
532
550
  stroke: #4caf50;
533
551
  }
534
- `,n([ve({type:String})],f.prototype,"title",2),n([ve({type:Function})],f.prototype,"onCopy",2),n([fe()],f.prototype,"isCopied",2),n([fe()],f.prototype,"copyTimeout",2),f=n([ot("copy-icon")],f);var u=class extends at{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),ye`
552
+ `,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`
535
553
  <div class="item-entry ${this.isExpanded?"expanded":""}">
536
554
  <div class="item-header ${this.isExpanded?"expanded":""}" @click="${this.toggleExpand}">
537
555
  <div class="item-content">
@@ -543,7 +561,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
543
561
  </svg>
544
562
  </span>
545
563
  </div>
546
- ${this.isExpanded?ye`
564
+ ${this.isExpanded?ke`
547
565
  <div class="item-details">
548
566
  <copy-icon
549
567
  positioned
@@ -556,7 +574,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
556
574
  </div>
557
575
  `:""}
558
576
  </div>
559
- `}};u.styles=[st`
577
+ `}};b.styles=[pt`
560
578
  :host {
561
579
  display: block;
562
580
  }
@@ -604,11 +622,10 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
604
622
  justify-content: center;
605
623
  width: 16px;
606
624
  height: 16px;
607
- margin-left: 4px;
625
+
608
626
  user-select: none;
609
627
  cursor: pointer;
610
628
  transition: all 0.2s ease;
611
- border-radius: 2px;
612
629
  }
613
630
 
614
631
  .item-toggle:hover {
@@ -616,8 +633,8 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
616
633
  }
617
634
 
618
635
  .item-toggle svg {
619
- width: 12px;
620
- height: 12px;
636
+ width: 14px;
637
+ height: 14px;
621
638
  fill: none;
622
639
  stroke: #b0c4de;
623
640
  stroke-width: 2;
@@ -654,12 +671,58 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
654
671
  display: block;
655
672
  overflow-x: auto;
656
673
  }
657
- `],n([R()],u.prototype,"borderColor",2),n([R()],u.prototype,"showCopyButton",2),n([R()],u.prototype,"itemId",2),n([R()],u.prototype,"isExpanded",2),n([R()],u.prototype,"onToggle",2),u=n([rt("expandable-item")],u);var y=class extends lt{constructor(){super(...arguments);this.isActive=!1;this.isExpanded=!1}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 ct`
674
+ `],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`
675
+ <button
676
+ class="reactivate-button"
677
+ @click="${this.handleTimerClick}"
678
+ title="Click to reactivate manually"
679
+ >
680
+ <span class="countdown-time infinity">∞</span>
681
+ </button>
682
+ `:this.remainingTime<=0?W``:W`
683
+ <button
684
+ class="reactivate-button"
685
+ @click="${this.handleTimerClick}"
686
+ title="Click to reactivate immediately"
687
+ >
688
+ <span class="countdown-time clickable">${this.formatTime(this.remainingTime)}</span>
689
+ </button>
690
+ `:W``}};k.styles=[ut`
691
+ :host {
692
+ display: inline-block;
693
+ }
694
+
695
+ .reactivate-button {
696
+ all: unset;
697
+ cursor: pointer;
698
+ padding: 2px 4px;
699
+ transition: background-color 0.2s ease;
700
+ }
701
+
702
+ .reactivate-button:hover {
703
+ background-color: rgba(255, 165, 0, 0.1);
704
+ }
705
+
706
+ .countdown-time {
707
+ color: #ffa726;
708
+ font-weight: 500;
709
+ font-size: 10px;
710
+ }
711
+
712
+ .countdown-time.infinity {
713
+ font-size: 12px;
714
+ font-weight: 600;
715
+ }
716
+
717
+ .countdown-time.clickable {
718
+ cursor: pointer;
719
+ }
720
+ `],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`
658
721
  <div class="element-wrapper ${e?"not-visible":""}">
659
722
  <expandable-item
660
723
  .borderColor=${this.getBorderColor()}
661
724
  .showCopyButton=${!0}
662
- .itemId=${this.elementData.elementId}
725
+ .itemId=${this.elementData.id}
663
726
  .isExpanded=${this.isExpanded}
664
727
  .onToggle=${this.onToggle}
665
728
  >
@@ -670,11 +733,19 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
670
733
  >
671
734
  ${this.elementData.name||"unnamed"}
672
735
  </span>
736
+ <reactivate-countdown .elementData=${this.elementData}> </reactivate-countdown>
737
+ <button
738
+ class="unregister-button"
739
+ @click="${this.handleUnregister}"
740
+ title="Unregister element"
741
+ >
742
+ ${be}
743
+ </button>
673
744
  </div>
674
745
  <div slot="details">${this.formatElementDetails()}</div>
675
746
  </expandable-item>
676
747
  </div>
677
- `}};y.styles=[dt`
748
+ `}};f.styles=[xt`
678
749
  :host {
679
750
  display: block;
680
751
  }
@@ -718,6 +789,23 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
718
789
  box-shadow: 0 0 0 2px rgba(153, 153, 153, 0.3);
719
790
  }
720
791
 
792
+ .unregister-button {
793
+ all: unset;
794
+ display: flex;
795
+ align-items: center;
796
+ justify-content: center;
797
+ width: 14px;
798
+ height: 14px;
799
+ padding: 1px;
800
+ cursor: pointer;
801
+ color: #999;
802
+ }
803
+
804
+ .unregister-button:hover {
805
+ background-color: rgba(255, 107, 107, 0.1);
806
+ color: #ff6b6b;
807
+ }
808
+
721
809
  .element-name {
722
810
  flex-grow: 1;
723
811
  white-space: nowrap;
@@ -738,6 +826,18 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
738
826
  font-weight: 500;
739
827
  }
740
828
 
829
+ .reactivate-countdown {
830
+ font-size: 14px;
831
+ color: #ffa726;
832
+ font-weight: 500;
833
+ min-width: 0;
834
+ white-space: nowrap;
835
+ }
836
+
837
+ .reactivate-countdown:empty {
838
+ display: none;
839
+ }
840
+
741
841
  :host(.not-visible) {
742
842
  opacity: 0.5;
743
843
  }
@@ -745,19 +845,10 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
745
845
  .element-wrapper.not-visible {
746
846
  opacity: 0.5;
747
847
  }
748
- `],n([G()],y.prototype,"elementData",2),n([G()],y.prototype,"isActive",2),n([G()],y.prototype,"isExpanded",2),n([G()],y.prototype,"onToggle",2),y=n([pt("single-element")],y);var c=class extends mt{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},total:0};this.visibleElementsCount=0;this.activeElementCallbacksCount=0;this.totalElementsCount=0;this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.runningCallbacks=new Set;this.expandedElementIds=new Set;this.elementIdCounter=0;this._abortController=null;this.handleSortChange=e=>{this.sortOrder=e};this.handleElementToggle=e=>{let t=new Set(this.expandedElementIds);t.has(e)?t.delete(e):t.add(e),this.expandedElementIds=t};this.sortByDocumentPosition=(e,t)=>{let 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:se},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:re},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:le}]}generateElementId(){return(++this.elementIdCounter).toString()}updateActiveCallbackCount(){let e=0;this.elementListItems.forEach(t=>{t.callbackInfo.isCallbackActive&&e++}),this.activeElementCallbacksCount=e}updateVisibilityCounts(){let e=0;this.elementListItems.forEach(i=>{i.isIntersectingWithViewport&&e++});let t=this.elementListItems.size;this.visibleElementsCount=e,this.totalElementsCount=t,this.dispatchEvent(new CustomEvent("visibility-count-updated",{detail:{visibleCount:e,totalCount:t},bubbles:!0,composed:!0}))}_generateHitsChipTitle(e){let t=[];return t.push(`Total Hits: ${e.total}`),t.push(""),t.push(`Mouse: Trajectory: ${e.mouse.trajectory}, Hover: ${e.mouse.hover}`),t.push(`Scroll: Up: ${e.scroll.up}, Down: ${e.scroll.down}, Left: ${e.scroll.left}, Right: ${e.scroll.right}`),t.push(`Tab: Forwards: ${e.tab.forwards}, Reverse: ${e.tab.reverse}`),t.join(`
749
- `)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),this.updateVisibilityCounts(),L.instance.addEventListener("elementRegistered",t=>{let i={...t.elementData,elementId:this.generateElementId()};this.elementListItems.set(t.elementData.element,i),this.updateVisibilityCounts(),this.updateActiveCallbackCount()},{signal:e}),L.instance.addEventListener("elementDataUpdated",t=>{let i=this.elementListItems.get(t.elementData.element);if(i){let a={...t.elementData,elementId:i.elementId};this.elementListItems.set(t.elementData.element,a),this.updateVisibilityCounts(),this.requestUpdate()}},{signal:e}),L.instance.addEventListener("elementReactivated",t=>{let i=this.elementListItems.get(t.elementData.element);if(i){let a={...t.elementData,elementId:i.elementId};this.elementListItems.set(t.elementData.element,a),this.requestUpdate(),this.updateActiveCallbackCount()}},{signal:e}),L.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.updateVisibilityCounts(),this.updateActiveCallbackCount(),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.requestUpdate(),this.runningCallbacks.delete(t.elementData.element)},{signal:e}),L.instance.addEventListener("callbackInvoked",t=>{this.runningCallbacks.add(t.elementData.element),this.requestUpdate()},{signal:e}),L.instance.addEventListener("callbackCompleted",t=>{this.updateActiveCallbackCount(),this.handleCallbackCompleted(t.hitType),this.runningCallbacks.delete(t.elementData.element)},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}updateElementListFromManager(){let e=new Map;L.instance.registeredElements.forEach((t,i)=>{e.set(i,{...t,elementId:this.generateElementId()})}),this.elementListItems=e}handleCallbackCompleted(e){switch(e.kind){case"mouse":this.hitCount.mouse[e.subType]++;break;case"tab":this.hitCount.tab[e.subType]++;break;case"scroll":this.hitCount.scroll[e.subType]++;break;default:}this.hitCount.total++,this.requestUpdate()}getSortedElements(){let e=Array.from(this.elementListItems.values());switch(this.sortOrder){case"insertionOrder":return e;case"documentOrder":return e.sort(this.sortByDocumentPosition);case"visibility":return e.sort((t,i)=>t.isIntersectingWithViewport!==i.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,i));default:return this.sortOrder,e}}render(){return xe`
848
+ `],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(`
849
+ `)}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`
750
850
  <tab-header>
751
851
  <div slot="chips" class="chips-container">
752
- <chip-element title="Number of visible registered elements / total registered elements">
753
- ${this.visibleElementsCount}/${this.totalElementsCount} visible
754
- </chip-element>
755
- <chip-element title="Number of elements with running callbacks / total elements">
756
- ${this.runningCallbacks.size}/${this.totalElementsCount} running
757
- </chip-element>
758
- <chip-element title="Number of elements with active callbacks / total elements">
759
- ${this.activeElementCallbacksCount}/${this.totalElementsCount} active
760
- </chip-element>
761
852
  <chip-element title="${this._generateHitsChipTitle(this.hitCount)}">
762
853
  ${this.hitCount.total} hits
763
854
  </chip-element>
@@ -774,16 +865,40 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
774
865
  .noContentMessage=${this.noContentMessage}
775
866
  .hasContent=${!!this.elementListItems.size}
776
867
  >
777
- ${ut(this.getSortedElements(),e=>xe`
778
- <single-element
779
- .elementData=${e}
780
- .isActive=${this.runningCallbacks.has(e.element)}
781
- .isExpanded=${this.expandedElementIds.has(e.elementId)}
782
- .onToggle=${this.handleElementToggle}
783
- ></single-element>
784
- `)}
868
+ ${this.getActiveElements().length>0?R`
869
+ <div class="element-section">
870
+ <h3 class="section-header active">
871
+ Active Elements (${this.getActiveElements().length})
872
+ </h3>
873
+ ${Ce(this.getActiveElements(),e=>R`
874
+ <single-element
875
+ .elementData=${e}
876
+ .isActive=${this.runningCallbacks.has(e.element)}
877
+ .isExpanded=${this.expandedElementIds.has(e.id)}
878
+ .onToggle=${this.handleElementToggle}
879
+ >
880
+ </single-element>
881
+ `)}
882
+ </div>
883
+ `:""}
884
+ ${this.getInactiveElements().length>0?R`
885
+ <div class="element-section">
886
+ <h3 class="section-header inactive">
887
+ Inactive Elements (${this.getInactiveElements().length})
888
+ </h3>
889
+ ${Ce(this.getInactiveElements(),e=>R`
890
+ <single-element
891
+ .elementData=${e}
892
+ .isActive=${this.runningCallbacks.has(e.element)}
893
+ .isExpanded=${this.expandedElementIds.has(e.id)}
894
+ .onToggle=${this.handleElementToggle}
895
+ >
896
+ </single-element>
897
+ `)}
898
+ </div>
899
+ `:""}
785
900
  </tab-content>
786
- `}};c.styles=gt`
901
+ `}};h.styles=Et`
787
902
  :host {
788
903
  display: flex;
789
904
  flex-direction: column;
@@ -795,52 +910,30 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
795
910
  gap: 8px;
796
911
  }
797
912
 
798
- .element-content {
799
- display: flex;
800
- align-items: center;
801
- gap: 8px;
802
- flex: 1;
803
- }
804
-
805
- .status-indicator {
806
- width: 8px;
807
- height: 8px;
808
- flex-shrink: 0;
809
- transition: all 0.3s ease;
810
- }
811
-
812
- .status-indicator.visible {
813
- background-color: #4caf50;
814
- box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
913
+ .element-section {
914
+ margin-bottom: 16px;
815
915
  }
816
916
 
817
- .status-indicator.hidden {
818
- background-color: #666;
819
- box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2);
917
+ .element-section:last-child {
918
+ margin-bottom: 0;
820
919
  }
821
920
 
822
- .status-indicator.prefetching {
823
- background-color: #ffeb3b;
824
- box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.4);
921
+ .section-header {
922
+ margin: 4px 0 4px 0;
923
+ font-size: 12px;
924
+ font-weight: 600;
825
925
  }
826
926
 
827
- .element-name {
828
- flex-grow: 1;
829
- white-space: nowrap;
830
- overflow: hidden;
831
- text-overflow: ellipsis;
832
- font-size: 11px;
833
- font-weight: 500;
927
+ .section-header.active {
834
928
  color: #e8e8e8;
835
929
  }
836
930
 
837
- .element-name.callback-active {
838
- color: #fff;
839
- font-weight: 600;
931
+ .section-header.inactive {
932
+ color: #999;
840
933
  }
841
- `,n([b()],c.prototype,"hitCount",2),n([b()],c.prototype,"visibleElementsCount",2),n([b()],c.prototype,"activeElementCallbacksCount",2),n([b()],c.prototype,"totalElementsCount",2),n([b()],c.prototype,"sortDropdown",2),n([b()],c.prototype,"sortOrder",2),n([b()],c.prototype,"elementListItems",2),n([b()],c.prototype,"noContentMessage",2),n([b()],c.prototype,"runningCallbacks",2),n([b()],c.prototype,"expandedElementIds",2),c=n([ht("element-tab")],c);import{css as bt,html as we,LitElement as vt}from"lit";import{customElement as ft,property as yt}from"lit/decorators.js";var U=class extends vt{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 we`
934
+ `,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`
842
935
  <div class="tab-selector-wrapper">
843
- ${this.tabs.map(e=>we`
936
+ ${this.tabs.map(e=>Se`
844
937
  <button
845
938
  class="tab-button ${this.activeTab===e?"active":""}"
846
939
  @click="${()=>this._handleTabClick(e)}"
@@ -850,7 +943,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
850
943
  </button>
851
944
  `)}
852
945
  </div>
853
- `}};U.styles=bt`
946
+ `}};N.styles=Tt`
854
947
  .tab-selector-wrapper {
855
948
  border-bottom: 2px solid #444;
856
949
  margin-top: 12px;
@@ -881,8 +974,8 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
881
974
  color: #b0c4de;
882
975
  border-bottom-color: #b0c4de;
883
976
  }
884
- `,n([yt({type:String})],U.prototype,"activeTab",2),U=n([ft("tab-selector")],U);import{ForesightManager as z}from"js.foresight";import{LitElement as Dt,css as Mt,html as W}from"lit";import{customElement as Lt,property as _t,state as N}from"lit/decorators.js";import{map as It}from"lit/directives/map.js";function Ee(o,s){let e={};o.eventListeners.forEach((i,a)=>{e[a]=i.length});let t=[];return o.registeredElements.forEach((i,a)=>{let{element:r,...T}=i;t.push({...T,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,
885
- ${o.globalCallbackHits.total} hits`}}function Ce(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} - ${ke(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} - ${ke(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=xt(o.elapsed);return{type:"callbackCompleted",...o.status==="error"?{status:"error",errorMessage:o.errorMessage}:{status:"success"},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} - ${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 xt(o){return`${(o/1e3).toFixed(4)} s`}function ke(o){let s=["th","st","nd","rd"],e=o%100;return o+(s[(e-20)%10]||s[e]||s[0])}import{html as Se,css as wt}from"lit";import{customElement as kt,property as Te}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 Se`
977
+ `,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,
978
+ ${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`
886
979
  <div class="dropdown-container">
887
980
  <button
888
981
  class="${e}"
@@ -909,7 +1002,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
909
1002
  </button>
910
1003
 
911
1004
  <div class="${t}" id="dropdown-menu" role="menu">
912
- ${this.dropdownOptions.map(i=>Se`
1005
+ ${this.dropdownOptions.map(i=>Le`
913
1006
  <button
914
1007
  value="${i.value}"
915
1008
  title="${i.title}"
@@ -922,7 +1015,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
922
1015
  `)}
923
1016
  </div>
924
1017
  </div>
925
- `}};_.styles=[...M.styles,wt`
1018
+ `}};$.styles=[...D.styles,It`
926
1019
  .dropdown-menu button.active::after {
927
1020
  content: "✓";
928
1021
  position: absolute;
@@ -938,7 +1031,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
938
1031
  color: #b0c4de;
939
1032
  margin-left: 2px;
940
1033
  }
941
- `],n([Te({type:Array})],_.prototype,"selectedValues",2),n([Te()],_.prototype,"onSelectionChange",2),_=n([kt("multi-select-dropdown")],_);import{LitElement as Et,html as Ct,css as St}from"lit";import{customElement as Tt,property as Z}from"lit/decorators.js";var E=class extends Et{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 Ct`
1034
+ `],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`
942
1035
  <expandable-item
943
1036
  .borderColor=${i}
944
1037
  .itemId=${e.logId}
@@ -954,7 +1047,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
954
1047
  </div>
955
1048
  <div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
956
1049
  </expandable-item>
957
- `}};E.styles=[St`
1050
+ `}};E.styles=[Ut`
958
1051
  :host {
959
1052
  display: block;
960
1053
  /*
@@ -1018,7 +1111,7 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
1018
1111
  * as all styling is now handled by setting CSS variables below.
1019
1112
  * This makes the component's styling more self-contained.
1020
1113
  */
1021
- `],n([Z({attribute:!1})],E.prototype,"log",2),n([Z({type:Boolean})],E.prototype,"isExpanded",2),n([Z()],E.prototype,"onToggle",2),E=n([Tt("single-log")],E);var m=class extends Dt{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:ne},{value:"console",label:"Console",title:"Log only to the console",icon:ie},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:ae},{value:"none",label:"None",title:"Dont log anywhere",icon:oe}],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}]}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),z.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(z.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{z.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(z.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=Ee(z.instance.getManagerData,(++this.logIdCounter).toString());this.addLog(e)}addEventLog(e){let t=Ce(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.addLog(t)}render(){return W`
1114
+ `],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`
1022
1115
  <tab-header>
1023
1116
  <div slot="chips" class="chips-container">
1024
1117
  <chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
@@ -1026,13 +1119,13 @@ var Ue=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var n=(o,s,e
1026
1119
  </chip-element>
1027
1120
  </div>
1028
1121
  <div slot="actions">
1029
- ${this.shouldShowPerformanceWarning()?W`
1122
+ ${this.shouldShowPerformanceWarning()?Y`
1030
1123
  <div
1031
1124
  class="warning-container"
1032
1125
  title="Console logging can be slow with frequent trajectory events.
1033
1126
  Consider using 'Control Panel' only for better performance."
1034
1127
  >
1035
- ${ge}
1128
+ ${me}
1036
1129
  </div>
1037
1130
  `:""}
1038
1131
  <single-select-dropdown
@@ -1051,7 +1144,7 @@ Consider using 'Control Panel' only for better performance."
1051
1144
  title="Log the state from the manager"
1052
1145
  @click="${this.logManagerData}"
1053
1146
  >
1054
- ${me}
1147
+ ${ue}
1055
1148
  </button>
1056
1149
  <button
1057
1150
  class="single-button"
@@ -1059,12 +1152,12 @@ Consider using 'Control Panel' only for better performance."
1059
1152
  ?disabled="${this.logs.length===0}"
1060
1153
  @click="${this.clearLogs}"
1061
1154
  >
1062
- ${ce}
1155
+ ${pe}
1063
1156
  </button>
1064
1157
  </div>
1065
1158
  </tab-header>
1066
1159
  <tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!this.logs.length}>
1067
- ${this.logs.length===0?W`<div class="no-items">${this.getNoLogsMessage()}</div>`:It(this.logs,e=>W`
1160
+ ${this.logs.length===0?Y`<div class="no-items">${this.getNoLogsMessage()}</div>`:zt(this.logs,e=>Y`
1068
1161
  <single-log
1069
1162
  .log=${e}
1070
1163
  .isExpanded=${this.expandedLogIds.has(e.logId)}
@@ -1072,7 +1165,7 @@ Consider using 'Control Panel' only for better performance."
1072
1165
  ></single-log>
1073
1166
  `)}
1074
1167
  </tab-content>
1075
- `}};m.styles=[Mt`
1168
+ `}};m.styles=[Vt`
1076
1169
  :host {
1077
1170
  display: flex;
1078
1171
  flex-direction: column;
@@ -1165,7 +1258,7 @@ Consider using 'Control Panel' only for better performance."
1165
1258
  .warning-container:hover svg {
1166
1259
  stroke: #ffdc3e;
1167
1260
  }
1168
- `],n([N()],m.prototype,"logDropdown",2),n([N()],m.prototype,"filterDropdown",2),n([N()],m.prototype,"logLocation",2),n([N()],m.prototype,"eventsEnabled",2),n([N()],m.prototype,"logs",2),n([N()],m.prototype,"expandedLogIds",2),n([_t()],m.prototype,"noContentMessage",2),m=n([Lt("log-tab")],m);import{ForesightManager as Ie}from"js.foresight";import{css as tn,html as $e,LitElement as nn}from"lit";import{customElement as on,state as Y}from"lit/decorators.js";var Q="points",De="px",Me="tabs",Le="ms";import{LitElement as Nt,html as Vt,css as Ft}from"lit";import{customElement as jt,property as K}from"lit/decorators.js";import{LitElement as $t,html as Ot,css as Pt}from"lit";import{customElement as Ut,property as _e}from"lit/decorators.js";var I=class extends $t{constructor(){super(...arguments);this.header="";this.description=""}render(){return Ot`<div class="setting-item">
1261
+ `],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">
1169
1262
  <label>
1170
1263
  <span class="setting-header">${this.header}</span>
1171
1264
  <span class="setting-description"> ${this.description} </span>
@@ -1173,7 +1266,7 @@ Consider using 'Control Panel' only for better performance."
1173
1266
  <div class="setting-controls">
1174
1267
  <slot name="controls"></slot>
1175
1268
  </div>
1176
- </div>`}};I.styles=[Pt`
1269
+ </div>`}};I.styles=[Bt`
1177
1270
  .setting-item {
1178
1271
  display: flex;
1179
1272
  align-items: center;
@@ -1213,14 +1306,14 @@ Consider using 'Control Panel' only for better performance."
1213
1306
  color: #fff;
1214
1307
  font-size: 13px;
1215
1308
  }
1216
- `],n([_e({type:String})],I.prototype,"header",2),n([_e({type:String})],I.prototype,"description",2),I=n([Ut("setting-item")],I);import{ForesightManager as Rt}from"js.foresight";var x=class extends Nt{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})):Rt.instance.alterGlobalSettings({[this.setting]:i})}}render(){return Vt`<setting-item header=${this.header} description=${this.description}>
1309
+ `],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}>
1217
1310
  <input
1218
1311
  slot="controls"
1219
1312
  type="checkbox"
1220
1313
  .checked=${this.isChecked}
1221
1314
  @change=${this.handleCheckboxChange}
1222
1315
  />
1223
- </setting-item>`}};x.styles=[Ft`
1316
+ </setting-item>`}};y.styles=[qt`
1224
1317
  input[type="checkbox"] {
1225
1318
  appearance: none;
1226
1319
  -webkit-appearance: none;
@@ -1263,7 +1356,7 @@ Consider using 'Control Panel' only for better performance."
1263
1356
  input[type="checkbox"]:hover {
1264
1357
  box-shadow: 0 0 0 3px rgba(176, 196, 222, 0.1);
1265
1358
  }
1266
- `],n([K({type:Boolean})],x.prototype,"isChecked",2),n([K({type:String})],x.prototype,"header",2),n([K({type:String})],x.prototype,"description",2),n([K({type:String})],x.prototype,"setting",2),x=n([jt("setting-item-checkbox")],x);import{LitElement as zt,html as At,css as Ht}from"lit";import{customElement as Bt,property as $,state as Gt}from"lit/decorators.js";import{ForesightManager as Wt}from"js.foresight";var g=class extends zt{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,Wt.instance.alterGlobalSettings({[this.setting]:i})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return At`<setting-item header=${this.header} description=${this.description}>
1359
+ `],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}>
1267
1360
  <div slot="controls" class="range-wrapper">
1268
1361
  <input
1269
1362
  slot="controls"
@@ -1277,7 +1370,7 @@ Consider using 'Control Panel' only for better performance."
1277
1370
  />
1278
1371
  <span class="setting-range-value">${this.displayValue} ${this.unit}</span>
1279
1372
  </div>
1280
- </setting-item>`}};g.styles=[Ht`
1373
+ </setting-item>`}};g.styles=[Qt`
1281
1374
  .setting-range-value {
1282
1375
  font-size: 12px;
1283
1376
  color: #b0c4de;
@@ -1346,14 +1439,14 @@ Consider using 'Control Panel' only for better performance."
1346
1439
  transform: scale(1.1);
1347
1440
  box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
1348
1441
  }
1349
- `],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([Gt()],g.prototype,"displayValue",2),g=n([Bt("setting-item-range")],g);var w=class extends nn{constructor(){super();this.changedSettings=[];this._abortController=null;let e=l.instance.devtoolsSettings,t=Ie.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;Ie.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 $e`<tab-content
1442
+ `],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
1350
1443
  .noContentMessage=${"Loading settings..."}
1351
1444
  .hasContent=${!1}
1352
1445
  ></tab-content>`;let e=this.managerSettings,t=this.changedSettings.length>0?`Settings that have been changed this session compared to your initialized settings.
1353
1446
  Click on the copy icon to easely copy the new setting into your project
1354
1447
 
1355
1448
  `+this.changedSettings.map(i=>`${i.setting}: ${JSON.stringify(i.oldValue)} -> ${JSON.stringify(i.newValue)}`).join(`
1356
- `):"No settings changed from initial values";return $e`
1449
+ `):"No settings changed from initial values";return Ne`
1357
1450
  <tab-header>
1358
1451
  <div slot="chips" class="chips-container">
1359
1452
  <chip-element .title=${t}> ${this.changedSettings.length} changed </chip-element>
@@ -1381,7 +1474,7 @@ Click on the copy icon to easely copy the new setting into your project
1381
1474
  .currentValue=${e.trajectoryPredictionTime}
1382
1475
  .maxValue=${200}
1383
1476
  .minValue=${10}
1384
- .unit=${Le}
1477
+ .unit=${Oe}
1385
1478
  header="Prediction Time"
1386
1479
  description="How far into the future to calculate mouse trajectory path"
1387
1480
  setting="trajectoryPredictionTime"
@@ -1390,9 +1483,9 @@ Click on the copy icon to easely copy the new setting into your project
1390
1483
  .currentValue=${e.positionHistorySize}
1391
1484
  .maxValue=${30}
1392
1485
  .minValue=${2}
1393
- .unit=${Q}
1486
+ .unit=${te}
1394
1487
  header="Position History Size"
1395
- description="How far into the future, in ${Q}, to calculate mouse trajectory path"
1488
+ description="How far into the future, in ${te}, to calculate mouse trajectory path"
1396
1489
  setting="positionHistorySize"
1397
1490
  >
1398
1491
  </setting-item-range>
@@ -1410,7 +1503,7 @@ Click on the copy icon to easely copy the new setting into your project
1410
1503
  .currentValue=${e.tabOffset}
1411
1504
  .maxValue=${20}
1412
1505
  .minValue=${0}
1413
- .unit=${Me}
1506
+ .unit=${_e}
1414
1507
  header="Tab Offset"
1415
1508
  description="Number of tabbable elements to look ahead when predicting navigation"
1416
1509
  setting="tabOffset"
@@ -1430,7 +1523,7 @@ Click on the copy icon to easely copy the new setting into your project
1430
1523
  .currentValue=${e.scrollMargin}
1431
1524
  .maxValue=${300}
1432
1525
  .minValue=${30}
1433
- .unit=${De}
1526
+ .unit=${Ie}
1434
1527
  header="Scroll Margin"
1435
1528
  description="Pixel distance to check from mouse position in scroll direction"
1436
1529
  setting="scrollMargin"
@@ -1451,7 +1544,7 @@ Click on the copy icon to easely copy the new setting into your project
1451
1544
  </div>
1452
1545
  </div>
1453
1546
  </tab-content>
1454
- `}};w.styles=tn`
1547
+ `}};x.styles=gn`
1455
1548
  :host {
1456
1549
  display: flex;
1457
1550
  flex-direction: column;
@@ -1482,18 +1575,14 @@ Click on the copy icon to easely copy the new setting into your project
1482
1575
  border-bottom: 1px solid rgba(176, 196, 222, 0.2);
1483
1576
  padding-bottom: 8px;
1484
1577
  }
1485
- `,n([Y()],w.prototype,"managerSettings",2),n([Y()],w.prototype,"initialSettings",2),n([Y()],w.prototype,"devtoolsSettings",2),n([Y()],w.prototype,"changedSettings",2),w=n([on("settings-tab")],w);var v=class extends an{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.visibleCount=0;this.totalCount=0;this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this._handleVisibilityCountChange=e=>{let t=e;this.visibleCount=t.detail.visibleCount,this.totalCount=t.detail.totalCount};let e=localStorage.getItem(this.localStorageSelectedTabKey);this.activeTab=e||"logs"}_handleTabChange(e){this.activeTab=e.detail.tab,localStorage.setItem(this.localStorageSelectedTabKey,this.activeTab)}connectedCallback(){super.connectedCallback(),this.addEventListener("visibility-count-updated",this._handleVisibilityCountChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("visibility-count-updated",this._handleVisibilityCountChange)}render(){return rn`
1578
+ `,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`
1486
1579
  <div class="control-wrapper ${this.isMinimized?"minimized":""}">
1487
1580
  <div class="title-wrapper">
1488
1581
  <button @click="${()=>this.isMinimized=!this.isMinimized}" class="minimize-button">
1489
1582
  -
1490
1583
  </button>
1491
1584
  <h1>Foresight DevTools</h1>
1492
- <span
1493
- title="Number of visible registered elements / total registered elements"
1494
- class="title-element-count"
1495
- >${this.visibleCount}/${this.totalCount}</span
1496
- >
1585
+ <div></div>
1497
1586
  </div>
1498
1587
 
1499
1588
  <div class="tab-container ${this.isMinimized?"hidden":""}">
@@ -1503,15 +1592,15 @@ Click on the copy icon to easely copy the new setting into your project
1503
1592
  ></tab-selector>
1504
1593
 
1505
1594
  <div class="tab-content">
1506
- <log-tab class=${ee({active:this.activeTab==="logs"})}></log-tab>
1507
- <element-tab class=${ee({active:this.activeTab==="elements"})}></element-tab>
1595
+ <log-tab class=${ne({active:this.activeTab==="logs"})}></log-tab>
1596
+ <element-tab class=${ne({active:this.activeTab==="elements"})}></element-tab>
1508
1597
  <settings-tab
1509
- class=${ee({active:this.activeTab==="settings"})}
1598
+ class=${ne({active:this.activeTab==="settings"})}
1510
1599
  ></settings-tab>
1511
1600
  </div>
1512
1601
  </div>
1513
1602
  </div>
1514
- `}};v.styles=sn`
1603
+ `}};O.styles=bn`
1515
1604
  .control-wrapper {
1516
1605
  padding: 12px;
1517
1606
  position: fixed;
@@ -1548,11 +1637,6 @@ Click on the copy icon to easely copy the new setting into your project
1548
1637
  font-size: 15px;
1549
1638
  }
1550
1639
 
1551
- .title-element-count {
1552
- font-size: 14px;
1553
- text-align: right;
1554
- }
1555
-
1556
1640
  .minimize-button {
1557
1641
  background: none;
1558
1642
  border: none;
@@ -1591,7 +1675,7 @@ Click on the copy icon to easely copy the new setting into your project
1591
1675
  width: 100%;
1592
1676
  height: 100%;
1593
1677
  }
1594
- `,n([q()],v.prototype,"activeTab",2),n([q()],v.prototype,"isMinimized",2),n([q()],v.prototype,"visibleCount",2),n([q()],v.prototype,"totalCount",2),v=n([ln("control-panel")],v);customElements.get("control-panel")||customElements.define("control-panel",v);import{LitElement as Cn,css as Sn,html as Tn}from"lit";import{customElement as Dn}from"lit/decorators.js";import{LitElement as cn,html as dn,css as pn}from"lit";import{customElement as gn,state as Oe,query as mn}from"lit/decorators.js";import{ForesightManager as V}from"js.foresight";var C=class extends cn{constructor(){super(...arguments);this.overlayMap=new Map;this.callbackAnimations=new Map;this._abortController=null}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;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,T=r.right-r.left,B=r.bottom-r.top;i.style.width=`${T}px`,i.style.height=`${B}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 dn` <div id="overlays-container"></div> `}};C.styles=[pn`
1678
+ `,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`
1595
1679
  :host {
1596
1680
  position: fixed;
1597
1681
  top: 0;
@@ -1658,7 +1742,7 @@ Click on the copy icon to easely copy the new setting into your project
1658
1742
  white-space: nowrap;
1659
1743
  pointer-events: none;
1660
1744
  }
1661
- `],n([Oe()],C.prototype,"overlayMap",2),n([Oe()],C.prototype,"callbackAnimations",2),n([mn("#overlays-container")],C.prototype,"containerElement",2),C=n([gn("element-overlays")],C);import{LitElement as hn,html as un,css as bn}from"lit";import{customElement as vn,state as te}from"lit/decorators.js";import{styleMap as fn}from"lit/directives/style-map.js";import{ForesightManager as A}from"js.foresight";var S=class extends hn{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=A.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this.handleElementUnregistered=e=>{e.wasLastElement&&(this._isVisible=!1)};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,T=Math.sqrt(a*a+r*r),B=Math.atan2(r,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${B}deg)`,width:`${T}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;A.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),A.instance.addEventListener("elementUnregistered",this.handleElementUnregistered,{signal:e}),A.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),A.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return un` <div class="trajectory-line" style=${fn(e)}></div> `}};S.styles=[bn`
1745
+ `],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`
1662
1746
  :host {
1663
1747
  display: block;
1664
1748
  }
@@ -1689,7 +1773,7 @@ Click on the copy icon to easely copy the new setting into your project
1689
1773
  border-bottom: 4px solid transparent;
1690
1774
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
1691
1775
  }
1692
- `],n([te()],S.prototype,"_mousePredictionIsEnabled",2),n([te()],S.prototype,"_isVisible",2),n([te()],S.prototype,"_trajectoryStyles",2),S=n([vn("mouse-trajectory")],S);import{LitElement as yn,html as xn,css as wn}from"lit";import{customElement as kn,state as J}from"lit/decorators.js";import{styleMap as En}from"lit/directives/style-map.js";import{ForesightManager as F}from"js.foresight";var k=class extends yn{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=F.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=F.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;F.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),F.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),F.instance.addEventListener("elementUnregistered",this.handleElementUnregistered,{signal:e}),F.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 xn` <div class="scroll-trajectory-line" style=${En(e)}></div> `}};k.styles=[wn`
1776
+ `],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`
1693
1777
  :host {
1694
1778
  display: block;
1695
1779
  }
@@ -1749,13 +1833,13 @@ Click on the copy icon to easely copy the new setting into your project
1749
1833
  filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
1750
1834
  }
1751
1835
  }
1752
- `],n([J()],k.prototype,"_scrollPredictionIsEnabled",2),n([J()],k.prototype,"_scrollMargin",2),n([J()],k.prototype,"_isVisible",2),n([J()],k.prototype,"_trajectoryStyles",2),k=n([kn("scroll-trajectory")],k);var H=class extends Cn{render(){return Tn`
1836
+ `],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`
1753
1837
  <div id="overlay-container">
1754
1838
  <mouse-trajectory></mouse-trajectory>
1755
1839
  <scroll-trajectory></scroll-trajectory>
1756
1840
  <element-overlays></element-overlays>
1757
1841
  </div>
1758
- `}};H.styles=[Sn`
1842
+ `}};G.styles=[Un`
1759
1843
  :host {
1760
1844
  display: block;
1761
1845
  }
@@ -1766,9 +1850,9 @@ Click on the copy icon to easely copy the new setting into your project
1766
1850
  pointer-events: none;
1767
1851
  z-index: 9999;
1768
1852
  }
1769
- `],H=n([Dn("debug-overlay")],H);var l=class extends Mn{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?Pe``:Pe`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[Ln`
1853
+ `],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`
1770
1854
  :host {
1771
1855
  display: block;
1772
1856
  }
1773
- `],l._instance=null,n([In()],l.prototype,"isInitialized",2),l=n([_n("foresight-devtools")],l);export{l as ForesightDevtools};
1857
+ `],l._instance=null,n([zn()],l.prototype,"isInitialized",2),l=n([jn("foresight-devtools")],l);export{l as ForesightDevtools};
1774
1858
  //# sourceMappingURL=index.js.map