js.foresight-devtools 1.4.0 → 2.1.0

package/dist/index.js

@@ -1,2031 +0,0 @@
-var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e,t)=>{for(var i=t>1?void 0:t?He(r,e):r,a=o.length-1,s;a>=0;a--)(s=o[a])&&(i=(t?s(r,e,i):s(i))||i);return t&&i&&ze(r,e,i),i};import{LitElement as zn,css as Hn,html as je}from"lit";import{customElement as Bn,state as Gn}from"lit/decorators.js";import{LitElement as yn,css as wn,html as xn}from"lit";import{customElement as kn,state as q}from"lit/decorators.js";import{classMap as re}from"lit/directives/class-map.js";import{ForesightManager as Fe}from"js.foresight";import{css as St,html as W,LitElement as Tt}from"lit";import{customElement as Dt,state as $}from"lit/decorators.js";import{map as Me}from"lit/directives/map.js";import{ForesightManager as I}from"js.foresight";import{html as c}from"lit";var le=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <rect x="2" y="2" width="20" height="15" rx="2" ry="2"></rect>
-    <line x1="2" y1="17" x2="22" y2="17"></line>
-    <line x1="7" y1="21" x2="17" y2="21"></line>
-    <line x1="12" y1="17" x2="12" y2="21"></line>
-  </svg>
-`,ce=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <polyline points="4 17 10 11 4 5"></polyline>
-    <line x1="12" y1="19" x2="20" y2="19"></line>
-  </svg>
-`,de=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
-    <line x1="1" y1="1" x2="23" y2="23"></line>
-  </svg>
-`,pe=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="M12 2v8" />
-    <path d="M12 10l-6 6" />
-    <path d="M12 10l6 6" />
-    <circle cx="6" cy="18" r="2" />
-    <circle cx="18" cy="18" r="2" />
-  </svg>
-`,ge=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
-    <circle cx="12" cy="12" r="3" />
-  </svg>
-`,he=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
-    <polyline points="14 2 14 8 20 8" />
-    <line x1="16" y1="13" x2="8" y2="13" />
-    <line x1="16" y1="17" x2="8" y2="17" />
-    <line x1="10" y1="9" x2="8" y2="9" />
-  </svg>
-`,me=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
-  </svg>
-`,u=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46" />
-  </svg>
-`,ue=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <circle cx="12" cy="12" r="10" />
-    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
-  </svg>
-`,be=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-  </svg>
-`,ve=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <polyline points="20 6 9 17 4 12"></polyline>
-  </svg>
-`,fe=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path
-      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-    ></path>
-    <line x1="12" y1="9" x2="12" y2="13"></line>
-    <line x1="12" y1="17" x2="12.01" y2="17"></line>
-  </svg>
-`,ye=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <circle cx="6" cy="12" r="3"></circle>
-    <circle cx="18" cy="12" r="3"></circle>
-    <path d="M9 12h6"></path>
-    <path d="M15 9l3 3-3 3"></path>
-    <circle cx="12" cy="6" r="2"></circle>
-    <circle cx="12" cy="18" r="2"></circle>
-    <path d="M10 8l2-2 2 2"></path>
-    <path d="M14 16l-2 2-2-2"></path>
-  </svg>
-`,we=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="12"
-    height="12"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <polyline points="3 6 5 6 21 6"></polyline>
-    <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>
-    <line x1="10" y1="11" x2="10" y2="17"></line>
-    <line x1="14" y1="11" x2="14" y2="17"></line>
-  </svg>
-`,Yn=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="M18 8a6 6 0 0 0-12 0c0 2 3 4 6 6 3-2 6-4 6-6z" />
-    <circle cx="12" cy="8" r="3" />
-  </svg>
-`,Jn=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-    <line x1="8" y1="21" x2="16" y2="21" />
-    <line x1="12" y1="17" x2="12" y2="21" />
-    <circle cx="12" cy="10" r="2" />
-  </svg>
-`,Xn=c`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <circle cx="12" cy="12" r="10" />
-    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
-  </svg>
-`;import{LitElement as Be,html as Ge,css as We}from"lit";import{customElement as Ke,property as qe}from"lit/decorators.js";var F=class extends Be{constructor(){super(...arguments);this.title=""}render(){return Ge`
-      <span class="chip" title="${this.title}">
-        <slot></slot>
-      </span>
-    `}};F.styles=[We`
-      :host {
-        display: inline-block;
-      }
-
-      .chip {
-        display: inline-flex;
-        align-items: center;
-        padding: 3px 8px;
-        background-color: rgba(255, 255, 255, 0.05);
-        color: #e8e8e8;
-        font-size: 10px;
-        font-weight: 500;
-        white-space: nowrap;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
-        letter-spacing: 0.02em;
-        line-height: 1.2;
-        transition: all 0.2s ease;
-      }
-    `],n([qe({type:String})],F.prototype,"title",2),F=n([Ke("chip-element")],F);import{LitElement as Ye,html as ne,css as Je}from"lit";import{customElement as Xe,property as xe}from"lit/decorators.js";var _=class extends Ye{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return ne`
-      <div class="content-container">
-        ${this.hasContent?ne`<slot></slot>`:ne`<div class="no-content-message">${this.noContentMessage}</div>`}
-      </div>
-    `}};_.styles=[Je`
-      :host {
-        overflow: hidden;
-      }
-
-      .content-container::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      .content-container::-webkit-scrollbar-track {
-        background: rgba(30, 30, 30, 0.5);
-      }
-
-      .content-container::-webkit-scrollbar-thumb {
-        background-color: rgba(176, 196, 222, 0.5);
-        border: 2px solid rgba(0, 0, 0, 0.2);
-      }
-
-      .content-container::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(176, 196, 222, 0.7);
-      }
-
-      .content-container {
-        scrollbar-gutter: stable;
-        height: 100%;
-        min-height: 150px;
-        overflow-y: auto;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(176, 196, 222, 0.5) rgba(30, 30, 30, 0.5);
-      }
-
-      .no-content-message {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        color: #afafaf;
-        font-style: italic;
-        font-family: "Courier New", monospace;
-      }
-    `],n([xe({type:String,attribute:"no-content-message"})],_.prototype,"noContentMessage",2),n([xe({type:Boolean})],_.prototype,"hasContent",2),_=n([Xe("tab-content")],_);import{LitElement as Ze,html as Qe,css as et}from"lit";import{customElement as tt}from"lit/decorators.js";var B=class extends Ze{render(){return Qe`
-      <div class="tab-bar-elements">
-        <div class="tab-bar-info">
-          <div class="stats-chips">
-            <slot name="chips"></slot>
-          </div>
-        </div>
-        <div class="tab-bar-actions">
-          <slot name="actions"></slot>
-        </div>
-      </div>
-    `}};B.styles=[et`
-      :host {
-      }
-      .tab-bar-info {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-        flex: 1;
-      }
-
-      .stats-chips {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-      }
-
-      .chip {
-        font-size: 11px;
-        font-weight: 500;
-        padding: 4px 8px;
-        border: 1px solid #555;
-        white-space: nowrap;
-        letter-spacing: 0.3px;
-        background: rgba(40, 40, 40, 0.7);
-        color: #b0c4de;
-      }
-
-      .tab-bar-actions {
-        display: flex;
-        gap: 6px;
-        align-items: center;
-        position: relative;
-        flex-direction: row;
-      }
-      .tab-bar-elements {
-        display: flex;
-        justify-content: space-between;
-        padding: 4px 0 4px 0;
-        border-bottom: 1px solid #444;
-        position: sticky;
-        top: 0;
-        z-index: 5;
-        min-height: 36px;
-      }
-    `],B=n([tt("tab-header")],B);import{html as rt}from"lit";import{customElement as st,property as Ce}from"lit/decorators.js";import{LitElement as nt,html as ke,css as it}from"lit";import{property as ot,state as at}from"lit/decorators.js";var p=class p extends nt{constructor(){super(...arguments);this.isDropdownOpen=!1;this.dropdownOptions=[];this._toggleDropdown=e=>{e.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(p.currentlyOpen&&p.currentlyOpen!==this&&p.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,p.currentlyOpen=this,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),p.currentlyOpen===this&&(p.currentlyOpen=null)}_closeDropdown(){this.isDropdownOpen=!1,p.currentlyOpen===this&&(p.currentlyOpen=null)}_positionDropdown(){if(typeof window>"u")return;let e=this.shadowRoot?.querySelector(".trigger-button"),t=this.shadowRoot?.querySelector(".dropdown-menu");if(e&&t){let i=e.getBoundingClientRect(),a=t.offsetHeight||200,s=i.bottom+5,d=window.innerWidth-i.right;window.innerHeight-i.bottom<a&&i.top>a?t.style.top=`${i.top-a-5}px`:t.style.top=`${s}px`,t.style.right=`${d}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return ke`
-      <div class="dropdown-container">
-        <button
-          class="${e}"
-          title="${this._getTriggerTitle()}"
-          @click="${this._toggleDropdown}"
-          aria-haspopup="true"
-          aria-expanded="${this.isDropdownOpen}"
-          aria-controls="dropdown-menu"
-          aria-label="${this._getTriggerLabel()}"
-        >
-          ${this._getTriggerIcon()}
-          <svg
-            class="arrow-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </button>
-
-        <div class="${t}" id="dropdown-menu" role="menu">
-          ${this.dropdownOptions.map(i=>ke`
-              <button
-                value="${i.value}"
-                title="${i.title}"
-                class="${this._isOptionSelected(i)?"active":""}"
-                @click="${()=>this._handleOptionClick(i)}"
-                role="menuitem"
-              >
-                ${i.label}
-              </button>
-            `)}
-        </div>
-      </div>
-    `}};p.currentlyOpen=null,p.styles=[it`
-      :host {
-        display: inline-block;
-      }
-
-      .dropdown-container {
-        position: relative;
-        display: inline-block;
-      }
-
-      .trigger-button {
-        background: none;
-        border: none;
-        color: white;
-        cursor: pointer;
-        padding: 6px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        transition: all 0.2s ease;
-      }
-
-      .trigger-button svg {
-        width: 16px;
-        height: 16px;
-        stroke: white;
-        transition: stroke 0.2s;
-      }
-
-      .trigger-button .arrow-icon {
-        width: 10px;
-        height: 10px;
-        stroke: white;
-        fill: none;
-        stroke-width: 2;
-        transition:
-          transform 0.2s ease,
-          stroke 0.2s;
-      }
-
-      .trigger-button:hover {
-        background-color: rgba(176, 196, 222, 0.1);
-      }
-
-      .trigger-button:hover svg,
-      .trigger-button:hover .arrow-icon {
-        stroke: #b0c4de;
-      }
-
-      .trigger-button.active {
-        background-color: rgba(176, 196, 222, 0.2);
-      }
-
-      .trigger-button.active svg {
-        stroke: #b0c4de;
-      }
-
-      .trigger-button.active .arrow-icon {
-        transform: rotate(180deg);
-        stroke: #b0c4de;
-      }
-
-      .dropdown-menu {
-        position: fixed;
-        z-index: 9999;
-        display: none;
-        flex-direction: column;
-        background-color: #3a3a3a;
-        border: 1px solid #555;
-        min-width: 200px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-        overflow: hidden;
-      }
-
-      .dropdown-menu.active {
-        display: flex;
-      }
-
-      .dropdown-menu button {
-        background: none;
-        border: none;
-        color: #ccc;
-        font-size: 12px;
-        text-align: left;
-        padding: 8px 12px;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        position: relative;
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      .dropdown-menu button:hover {
-        background-color: #555;
-        color: white;
-      }
-
-      .dropdown-menu button.active {
-        color: #b0c4de;
-        font-weight: bold;
-        background-color: rgba(176, 196, 222, 0.1);
-      }
-
-      .dropdown-menu button.active::after {
-        content: "✓";
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        color: #b0c4de;
-        font-weight: bold;
-      }
-    `],n([at()],p.prototype,"isDropdownOpen",2),n([ot({type:Array})],p.prototype,"dropdownOptions",2);var L=p;var V=class extends L{constructor(){super(...arguments);this.selectedOptionValue=""}connectedCallback(){super.connectedCallback(),this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}willUpdate(e){e.has("dropdownOptions")&&this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}_handleOptionClick(e){e.value!==this.selectedOptionValue&&(this.selectedOptionValue=e.value,this.onSelectionChange?.(e.value)),this._closeDropdown()}_getTriggerIcon(){let e=this._getSelectedOption();return e?e.icon:rt``}_isOptionSelected(e){return e.value===this.selectedOptionValue}_getTriggerTitle(){let e=this._getSelectedOption();return e?e.title:"Change selection"}_getTriggerLabel(){let e=this._getSelectedOption();return e?`Current selection: ${e.label}`:"No selection"}_getSelectedOption(){return this.dropdownOptions.find(e=>e.value===this.selectedOptionValue)}};n([Ce({type:String})],V.prototype,"selectedOptionValue",2),n([Ce({type:Function})],V.prototype,"onSelectionChange",2),V=n([st("single-select-dropdown")],V);import{LitElement as wt,html as xt,css as kt}from"lit";import{customElement as Ct,property as X,state as Et}from"lit/decorators.js";import{LitElement as gt,html as Te,css as ht}from"lit";import{customElement as mt,property as G}from"lit/decorators.js";import{LitElement as lt,html as ct,css as dt}from"lit";import{customElement as pt,property as Ee,state as Se}from"lit/decorators.js";var x=class extends lt{constructor(){super(...arguments);this.title="Copy to clipboard";this.isCopied=!1;this.copyTimeout=null}async handleClick(e){if(!this.isCopied){if(this.onCopy)try{await this.onCopy(e)}catch(t){console.error("Error in onCopy function:",t)}this.isCopied=!0,this.copyTimeout&&clearTimeout(this.copyTimeout),this.copyTimeout=setTimeout(()=>{this.isCopied=!1,this.copyTimeout=null},2e3)}}disconnectedCallback(){super.disconnectedCallback(),this.copyTimeout&&(clearTimeout(this.copyTimeout),this.copyTimeout=null)}render(){return ct`
-      <button
-        class="copy-button ${this.isCopied?"copied":""}"
-        title="${this.title}"
-        @click=${this.handleClick}
-      >
-        ${this.isCopied?ve:be}
-      </button>
-    `}};x.styles=dt`
-    .copy-button {
-      background: transparent;
-      border: 0px;
-      cursor: pointer;
-      padding: 6px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0.6;
-      transition:
-        opacity 0.2s ease,
-        background-color 0.2s ease;
-    }
-
-    :host([positioned]) .copy-button {
-      position: absolute;
-      top: 10px;
-      right: 1px;
-    }
-
-    .copy-button:hover {
-      background-color: rgba(176, 196, 222, 0.1);
-    }
-
-    .copy-button:hover svg {
-      stroke: #b0c4de;
-    }
-
-    .copy-button svg {
-      width: 14px;
-      height: 14px;
-      stroke: #ddd;
-      stroke-width: 2.5;
-    }
-
-    .copy-button.copied svg {
-      stroke: #4caf50;
-    }
-  `,n([Ee({type:String})],x.prototype,"title",2),n([Ee({type:Function})],x.prototype,"onCopy",2),n([Se()],x.prototype,"isCopied",2),n([Se()],x.prototype,"copyTimeout",2),x=n([pt("copy-icon")],x);var f=class extends gt{constructor(){super(...arguments);this.borderColor="#555";this.showCopyButton=!1;this.itemId="";this.isExpanded=!1}toggleExpand(){this.onToggle&&this.onToggle(this.itemId)}async handleCopy(e){e.stopPropagation();let t=this.shadowRoot?.querySelector('slot[name="details"]');if(t){let a=t.assignedNodes().map(s=>s.textContent).join("");try{await navigator.clipboard.writeText(a)}catch(s){console.error("Failed to copy text: ",s)}}}render(){return this.style.setProperty("--border-color",this.borderColor),Te`
-      <div class="item-entry ${this.isExpanded?"expanded":""}">
-        <div class="item-header ${this.isExpanded?"expanded":""}" @click="${this.toggleExpand}">
-          <div class="item-content">
-            <slot name="content"></slot>
-          </div>
-          <span class="item-toggle ${this.isExpanded?"expanded":""}">
-            <svg viewBox="0 0 24 24">
-              <polyline points="9,18 15,12 9,6"></polyline>
-            </svg>
-          </span>
-        </div>
-        ${this.isExpanded?Te`
-              <div class="item-details">
-                <copy-icon
-                  positioned
-                  title="Copy Details"
-                  .onCopy=${e=>this.handleCopy(e)}
-                ></copy-icon>
-                <pre class="item-data">
-                  <slot name="details"></slot>
-                </pre>
-              </div>
-            `:""}
-      </div>
-    `}};f.styles=[ht`
-      :host {
-        display: block;
-      }
-
-      .item-entry {
-        margin-bottom: 2px;
-        font-size: 11px;
-        line-height: 1.3;
-        overflow: hidden;
-        transition: all 0.2s ease;
-        border-left: 2px solid var(--border-color, #555);
-        padding-left: 6px;
-      }
-
-      .item-entry:hover:not(.expanded) {
-        background-color: rgba(255, 255, 255, 0.02);
-      }
-
-      .item-entry.expanded {
-        background-color: rgba(255, 255, 255, 0.03);
-      }
-
-      .item-header {
-        display: flex;
-        align-items: center;
-        padding: 3px 4px;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-        gap: 8px;
-        min-height: 20px;
-      }
-
-      .item-header:hover:not(.expanded) {
-        background-color: rgba(255, 255, 255, 0.03);
-      }
-
-      .item-details {
-        position: relative;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
-      }
-
-      .item-toggle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
-
-        user-select: none;
-        cursor: pointer;
-        transition: all 0.2s ease;
-      }
-
-      .item-toggle:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-      }
-
-      .item-toggle svg {
-        width: 14px;
-        height: 14px;
-        fill: none;
-        stroke: #b0c4de;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        transition: all 0.2s ease;
-      }
-
-      .item-toggle:hover svg {
-        stroke: #d4e4f4;
-      }
-
-      .item-toggle.expanded svg {
-        transform: rotate(90deg);
-      }
-
-      .item-content {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        min-width: 0;
-        overflow: hidden;
-      }
-
-      .item-data {
-        color: #e0e0e0;
-        white-space: pre;
-        font-size: 11px;
-        margin: 0;
-        padding: 0;
-        font-family: "Courier New", monospace;
-        line-height: 1.3;
-        display: block;
-        overflow-x: auto;
-      }
-    `],n([G()],f.prototype,"borderColor",2),n([G()],f.prototype,"showCopyButton",2),n([G()],f.prototype,"itemId",2),n([G()],f.prototype,"isExpanded",2),n([G()],f.prototype,"onToggle",2),f=n([mt("expandable-item")],f);import{ForesightManager as ut}from"js.foresight";import{LitElement as bt,css as vt,html as J}from"lit";import{customElement as ft,property as yt,state as De}from"lit/decorators.js";var E=class extends bt{constructor(){super(...arguments);this.remainingTime=0;this.isCountdownActive=!1;this.intervalId=null;this.startTime=0;this.handleTimerClick=e=>{e.stopPropagation(),ut.instance.reactivate(this.elementData.element)}}connectedCallback(){super.connectedCallback(),this.checkAndStartCountdown()}disconnectedCallback(){super.disconnectedCallback(),this.clearCountdown()}willUpdate(e){super.willUpdate(e),e.has("elementData")&&this.checkAndStartCountdown()}checkAndStartCountdown(){let e=this.elementData?.callbackInfo;if(!e){this.clearCountdown();return}let t=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;!e.isCallbackActive&&t&&e.reactivateAfter>0?this.startCountdown():this.clearCountdown()}startCountdown(){this.clearCountdown();let e=this.elementData?.callbackInfo;if(!e)return;if(this.isCountdownActive=!0,e.reactivateAfter===1/0){this.remainingTime=1/0;return}let t=e.reactivateAfter,i=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;if(!i){this.clearCountdown();return}this.startTime=i;let a=()=>{let s=Date.now()-this.startTime,d=Math.max(0,t-s);this.remainingTime=d,this.requestUpdate(),(d<=0||this.elementData.callbackInfo.isCallbackActive)&&this.clearCountdown()};a(),this.remainingTime>0&&typeof window<"u"&&(this.intervalId=window.setInterval(a,100))}clearCountdown(){this.intervalId!==null&&(clearInterval(this.intervalId),this.intervalId=null),this.isCountdownActive=!1,this.remainingTime=0}formatTime(e){if(e===1/0)return"\u221E";let t=Math.ceil(e/1e3);if(t<60)return`${t}s`;let i=Math.floor(t/60),a=t%60;if(i<60)return a>0?`${i}m ${a}s`:`${i}m`;let s=Math.floor(i/60),d=i%60;return d>0?`${s}h ${d}m`:`${s}h`}render(){return this.isCountdownActive?this.remainingTime===1/0?J`
-        <button
-          class="reactivate-button"
-          @click="${this.handleTimerClick}"
-          title="Click to reactivate manually"
-        >
-          <span class="countdown-time infinity">∞</span>
-        </button>
-      `:this.remainingTime<=0?J``:J`
-      <button
-        class="reactivate-button"
-        @click="${this.handleTimerClick}"
-        title="Click to reactivate immediately"
-      >
-        <span class="countdown-time clickable">${this.formatTime(this.remainingTime)}</span>
-      </button>
-    `:J``}};E.styles=[vt`
-      :host {
-        display: inline-block;
-      }
-
-      .reactivate-button {
-        all: unset;
-        cursor: pointer;
-        padding: 2px 4px;
-        transition: background-color 0.2s ease;
-      }
-
-      .reactivate-button:hover {
-        background-color: rgba(255, 165, 0, 0.1);
-      }
-
-      .countdown-time {
-        color: #ffa726;
-        font-weight: 500;
-        font-size: 10px;
-      }
-
-      .countdown-time.infinity {
-        font-size: 12px;
-        font-weight: 600;
-      }
-
-      .countdown-time.clickable {
-        cursor: pointer;
-      }
-    `],n([yt({hasChanged:()=>!0})],E.prototype,"elementData",2),n([De()],E.prototype,"remainingTime",2),n([De()],E.prototype,"isCountdownActive",2),E=n([ft("reactivate-countdown")],E);import{ForesightManager as ie}from"js.foresight";var y=class extends wt{constructor(){super(...arguments);this.isActive=!1;this.isExpanded=!1;this.currentDeviceStrategy="mouse";this._abortController=null;this.handleUnregister=e=>{e.stopPropagation(),ie.instance.unregister(this.elementData.element,"devtools")}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.currentDeviceStrategy=ie.instance.getManagerData.currentDeviceStrategy,ie.instance.addEventListener("deviceStrategyChanged",t=>{this.currentDeviceStrategy=t.newStrategy},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getBorderColor(){return this.isActive?"#ffeb3b":this.elementData.callbackInfo.isCallbackActive?this.currentDeviceStrategy==="touch"?"#ba68c8":this.elementData.isIntersectingWithViewport?"#4caf50":"#666":"#999"}getStatusIndicatorClass(){return this.isActive?"prefetching":this.elementData.callbackInfo.isCallbackActive?this.currentDeviceStrategy==="touch"?"touch-device":this.elementData.isIntersectingWithViewport?"visible":"hidden":"inactive"}getStatusText(){if(this.isActive)return"callback active";if(!this.elementData.callbackInfo.isCallbackActive)return"callback inactive";let e=this.elementData.isIntersectingWithViewport?"in viewport":"not in viewport",t=this.currentDeviceStrategy==="touch"?" (touch device)":"";return e+t}formatElementDetails(){let e=this.elementData,t={status:this.getStatusText(),isIntersecting:e.isIntersectingWithViewport,registerCount:e.registerCount,hitSlop:{top:e.elementBounds.hitSlop.top,right:e.elementBounds.hitSlop.right,bottom:e.elementBounds.hitSlop.bottom,left:e.elementBounds.hitSlop.left},callbackInfo:e.callbackInfo,meta:this.elementData.meta};return JSON.stringify(t,null,2)}render(){let e=!this.elementData.isIntersectingWithViewport&&this.currentDeviceStrategy!=="touch";return xt`
-      <div class="element-wrapper ${e?"not-visible":""}">
-        <expandable-item
-          .borderColor=${this.getBorderColor()}
-          .showCopyButton=${!0}
-          .itemId=${this.elementData.id}
-          .isExpanded=${this.isExpanded}
-          .onToggle=${this.onToggle}
-        >
-          <div slot="content" class="element-content" title="Status: ${this.getStatusText()}">
-            <div class="status-indicator ${this.getStatusIndicatorClass()}"></div>
-            <span
-              class="element-name ${this.isActive?"callback-active":this.elementData.callbackInfo.isCallbackActive?"":"callback-inactive"}"
-            >
-              ${this.elementData.name||"unnamed"}
-            </span>
-            <reactivate-countdown .elementData=${this.elementData}> </reactivate-countdown>
-            <button
-              class="unregister-button"
-              @click="${this.handleUnregister}"
-              title="Unregister element"
-            >
-              ${we}
-            </button>
-          </div>
-          <div slot="details">${this.formatElementDetails()}</div>
-        </expandable-item>
-      </div>
-    `}};y.styles=[kt`
-      :host {
-        display: block;
-      }
-
-      .element-wrapper {
-        display: block;
-      }
-
-      .element-content {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex: 1;
-      }
-
-      .status-indicator {
-        margin-left: 2px;
-        width: 8px;
-        height: 8px;
-        flex-shrink: 0;
-        transition: all 0.3s ease;
-      }
-
-      .status-indicator.visible {
-        background-color: #4caf50;
-        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
-      }
-
-      .status-indicator.hidden {
-        background-color: #666;
-        box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2);
-      }
-
-      .status-indicator.prefetching {
-        background-color: #ffeb3b;
-        box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.4);
-      }
-
-      .status-indicator.inactive {
-        background-color: #999;
-        box-shadow: 0 0 0 2px rgba(153, 153, 153, 0.3);
-      }
-
-      .status-indicator.touch-device {
-        background-color: #ba68c8;
-        box-shadow: 0 0 0 2px rgba(186, 104, 200, 0.4);
-      }
-
-      .unregister-button {
-        all: unset;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 14px;
-        height: 14px;
-        padding: 1px;
-        cursor: pointer;
-        color: #999;
-      }
-
-      .unregister-button:hover {
-        background-color: rgba(255, 107, 107, 0.1);
-        color: #ff6b6b;
-      }
-
-      .element-name {
-        flex-grow: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 11px;
-        font-weight: 500;
-        color: #e8e8e8;
-      }
-
-      .element-name.callback-active {
-        color: #fff;
-        font-weight: 600;
-      }
-
-      .element-name.callback-inactive {
-        color: #999;
-        font-weight: 500;
-      }
-
-      .reactivate-countdown {
-        font-size: 14px;
-        color: #ffa726;
-        font-weight: 500;
-        min-width: 0;
-        white-space: nowrap;
-      }
-
-      .reactivate-countdown:empty {
-        display: none;
-      }
-
-      :host(.not-visible) {
-        opacity: 0.5;
-      }
-
-      .element-wrapper.not-visible {
-        opacity: 0.5;
-      }
-    `],n([X({hasChanged:()=>!0})],y.prototype,"elementData",2),n([X()],y.prototype,"isActive",2),n([X()],y.prototype,"isExpanded",2),n([X()],y.prototype,"onToggle",2),n([Et()],y.prototype,"currentDeviceStrategy",2),y=n([Ct("single-element")],y);var b=class extends Tt{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},touch:0,viewport:0,total:0};this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.runningCallbacks=new Set;this.expandedElementIds=new Set;this._abortController=null;this._pendingElementUpdates=new Map;this._updateDebounceId=null;this._cachedActiveElements=[];this._cachedInactiveElements=[];this._elementsCacheDirty=!0;this.handleSortChange=e=>{this.sortOrder=e,this._elementsCacheDirty=!0};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:ge},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:he},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:me}]}_generateHitsChipTitle(e){let t=[];t.push(`Total Callback Hits: ${e.total}`),t.push("");let i=e.mouse.trajectory+e.mouse.hover,a=e.scroll.up+e.scroll.down+e.scroll.left+e.scroll.right,s=e.tab.forwards+e.tab.reverse;t.push("Desktop Strategy"),i>0?t.push(`   Mouse (${i}): ${e.mouse.trajectory} trajectory, ${e.mouse.hover} hover`):t.push("   Mouse: No hits"),a>0?t.push(`   Scroll (${a}): Up ${e.scroll.up}, Down ${e.scroll.down}, Left ${e.scroll.left}, Right ${e.scroll.right}`):t.push("   Scroll: No hits"),s>0?t.push(`   Tab (${s}): ${e.tab.forwards} forward, ${e.tab.reverse} reverse`):t.push("   Tab: No hits"),t.push("");let d=e.touch+e.viewport;return t.push("Touch Strategy"),e.touch>0?t.push(`   Touch Start: ${e.touch}`):t.push("   Touch Start: No hits"),e.viewport>0?t.push(`   Viewport Enter: ${e.viewport}`):t.push("   Viewport Enter: No hits"),d===0&&i+a+s===0&&(t.push(""),t.push("Interact with registered elements to see callback statistics")),t.join(`
-`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),I.instance.addEventListener("elementRegistered",t=>{this.elementListItems.set(t.elementData.element,t.elementData),this._elementsCacheDirty=!0},{signal:e}),I.instance.addEventListener("elementDataUpdated",t=>{this.elementListItems.get(t.elementData.element)&&(this._pendingElementUpdates.set(t.elementData.element,t.elementData),this._scheduleDebouncedUpdate())},{signal:e}),I.instance.addEventListener("elementReactivated",t=>{this.elementListItems.get(t.elementData.element)&&(this.elementListItems.set(t.elementData.element,t.elementData),this._elementsCacheDirty=!0,this.requestUpdate())},{signal:e}),I.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._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),I.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._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),I.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._elementsCacheDirty=!0,this.requestUpdate()},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null,this._updateDebounceId!==null&&(clearTimeout(this._updateDebounceId),this._updateDebounceId=null),this._pendingElementUpdates.clear()}_scheduleDebouncedUpdate(){this._updateDebounceId===null&&(this._updateDebounceId=setTimeout(()=>{this._updateDebounceId=null,this._flushPendingUpdates()},16))}_flushPendingUpdates(){if(this._pendingElementUpdates.size!==0){for(let[e,t]of this._pendingElementUpdates)this.elementListItems.set(e,t);this._pendingElementUpdates.clear(),this._elementsCacheDirty=!0,this.requestUpdate()}}updateElementListFromManager(){this.elementListItems=new Map(I.instance.registeredElements),this._elementsCacheDirty=!0}handleCallbackCompleted(e){switch(e.kind){case"mouse":this.hitCount.mouse[e.subType]++;break;case"tab":this.hitCount.tab[e.subType]++;break;case"scroll":this.hitCount.scroll[e.subType]++;break;case"touch":this.hitCount.touch++;break;case"viewport":this.hitCount.viewport++;break;default:}this.hitCount.total++,this.requestUpdate()}getSortedElements(){let e=Array.from(this.elementListItems.values());switch(this.sortOrder){case"insertionOrder":return e;case"documentOrder":return e.sort(this.sortByDocumentPosition);case"visibility":return e.sort((t,i)=>t.isIntersectingWithViewport!==i.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,i));default:return this.sortOrder,e}}_recomputeElementsCache(){if(!this._elementsCacheDirty)return;let e=this.getSortedElements();this._cachedActiveElements=e.filter(t=>t.callbackInfo.isCallbackActive),this._cachedInactiveElements=e.filter(t=>!t.callbackInfo.isCallbackActive),this._elementsCacheDirty=!1}get activeElements(){return this._recomputeElementsCache(),this._cachedActiveElements}get inactiveElements(){return this._recomputeElementsCache(),this._cachedInactiveElements}render(){return W`
-      <tab-header>
-        <div slot="chips" class="chips-container">
-          <chip-element title="${this._generateHitsChipTitle(this.hitCount)}">
-            ${this.hitCount.total} hits
-          </chip-element>
-        </div>
-        <div slot="actions">
-          <single-select-dropdown
-            .dropdownOptions="${this.sortDropdown}"
-            .selectedOptionValue="${this.sortOrder}"
-            .onSelectionChange="${this.handleSortChange}"
-          ></single-select-dropdown>
-        </div>
-      </tab-header>
-      <tab-content
-        .noContentMessage=${this.noContentMessage}
-        .hasContent=${!!this.elementListItems.size}
-      >
-        ${this.activeElements.length>0?W`
-              <div class="element-section">
-                <h3 class="section-header active">
-                  Active Elements (${this.activeElements.length})
-                </h3>
-                ${Me(this.activeElements,e=>W`
-                    <single-element
-                      .elementData=${e}
-                      .isActive=${this.runningCallbacks.has(e.element)}
-                      .isExpanded=${this.expandedElementIds.has(e.id)}
-                      .onToggle=${this.handleElementToggle}
-                    >
-                    </single-element>
-                  `)}
-              </div>
-            `:""}
-        ${this.inactiveElements.length>0?W`
-              <div class="element-section">
-                <h3 class="section-header inactive">
-                  Inactive Elements (${this.inactiveElements.length})
-                </h3>
-                ${Me(this.inactiveElements,e=>W`
-                    <single-element
-                      .elementData=${e}
-                      .isActive=${this.runningCallbacks.has(e.element)}
-                      .isExpanded=${this.expandedElementIds.has(e.id)}
-                      .onToggle=${this.handleElementToggle}
-                    >
-                    </single-element>
-                  `)}
-              </div>
-            `:""}
-      </tab-content>
-    `}};b.styles=St`
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-
-    .chips-container {
-      display: flex;
-      gap: 8px;
-    }
-
-    .element-section {
-      margin-bottom: 16px;
-    }
-
-    .element-section:last-child {
-      margin-bottom: 0;
-    }
-
-    .section-header {
-      margin: 4px 0 4px 0;
-      font-size: 12px;
-      font-weight: 600;
-    }
-
-    .section-header.active {
-      color: #e8e8e8;
-    }
-
-    .section-header.inactive {
-      color: #999;
-    }
-  `,n([$()],b.prototype,"hitCount",2),n([$()],b.prototype,"sortDropdown",2),n([$()],b.prototype,"sortOrder",2),n([$()],b.prototype,"elementListItems",2),n([$()],b.prototype,"noContentMessage",2),n([$()],b.prototype,"runningCallbacks",2),n([$()],b.prototype,"expandedElementIds",2),b=n([Dt("element-tab")],b);import{css as Mt,html as _e,LitElement as _t}from"lit";import{customElement as Lt,property as $t}from"lit/decorators.js";var A=class extends _t{constructor(){super(...arguments);this.activeTab="settings";this.tabs=["settings","elements","logs"]}_handleTabClick(e){this.dispatchEvent(new CustomEvent("tab-change",{detail:{tab:e},bubbles:!0,composed:!0}))}render(){return _e`
-      <div class="tab-selector-wrapper">
-        ${this.tabs.map(e=>_e`
-            <button
-              class="tab-button ${this.activeTab===e?"active":""}"
-              @click="${()=>this._handleTabClick(e)}"
-              data-tab="${e}"
-            >
-              ${e.charAt(0).toUpperCase()+e.slice(1)}
-            </button>
-          `)}
-      </div>
-    `}};A.styles=Mt`
-    .tab-selector-wrapper {
-      border-bottom: 2px solid #444;
-      margin-top: 12px;
-      display: flex;
-      justify-content: space-evenly;
-      width: 100%;
-    }
-
-    .tab-button {
-      background: none;
-      border: none;
-      color: #9e9e9e;
-      flex: 1;
-      padding: 8px;
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-      transition: all 0.2s ease;
-      font-size: 13px;
-      font-weight: 500;
-      text-align: center;
-    }
-    .tab-button:hover {
-      color: #b0c4de;
-      background-color: rgba(176, 196, 222, 0.1);
-    }
-
-    .tab-button.active {
-      color: #b0c4de;
-      border-bottom-color: #b0c4de;
-    }
-  `,n([$t({type:String})],A.prototype,"activeTab",2),A=n([Lt("tab-selector")],A);import{ForesightManager as K}from"js.foresight";import{LitElement as At,css as Rt,html as Z}from"lit";import{customElement as jt,property as zt,state as R}from"lit/decorators.js";import{map as Ht}from"lit/directives/map.js";function $e(o,r){let e={};o.eventListeners.forEach((i,a)=>{e[a]=i.length});let t=[];return o.registeredElements.forEach((i,a)=>{let{element:s,...d}=i;t.push({...d,elementInfo:`${a.id?`#${a.id}`:""}${a.className?`.${a.className.replace(/\s+/g,".")}`:""}`})}),{type:"managerDataPayload",warning:"this is a lot easier to view in the console",logId:r,globalCallbackHits:o.globalCallbackHits,localizedTimestamp:new Date().toLocaleTimeString(),eventListenerCount:e,managerSettings:o.globalSettings,registeredElements:t,loadedModules:o.loadedModules,summary:`${t.length} elements, ${Object.values(e).flat().length} listeners,
-  ${o.globalCallbackHits.total} hits`}}function Ie(o,r){try{switch(o.type){case"elementRegistered":return{type:"elementRegistered",name:o.elementData.name,id:o.elementData.element.id||"",callbackInfo:o.elementData.callbackInfo,hitslop:o.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:r,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Le(o.elementData.registerCount)} time`};case"elementReactivated":return{type:"elementReactivated",name:o.elementData.name,id:o.elementData.element.id||"",callbackInfo:o.elementData.callbackInfo,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:r,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Le(o.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",name:o.elementData.name,id:o.elementData.element.id||"",meta:o.elementData.meta,callbackInfo:o.elementData.callbackInfo,wasLastRegisteredElement:o.wasLastRegisteredElement,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.unregisterReason}`};case"elementDataUpdated":return{type:"elementDataUpdated",name:o.elementData.name,updatedProps:o.updatedProps||[],callbackInfo:o.elementData.callbackInfo,isIntersecting:o.elementData.isIntersectingWithViewport,meta:o.elementData.meta,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.updatedProps.toString()}`};case"callbackInvoked":return{type:"callbackInvoked",name:o.elementData.name,hitType:o.hitType,callbackInfo:o.elementData.callbackInfo,meta:o.elementData.meta,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.hitType.kind}`};case"callbackCompleted":{let e=It(o.elementData.callbackInfo.lastCallbackRuntime||0);return{type:"callbackCompleted",name:o.elementData.name,hitType:o.hitType,callbackInfo:o.elementData.callbackInfo,meta:o.elementData.meta,wasLastActiveElement:o.wasLastActiveElement,elapsed:e,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,status:o.elementData.callbackInfo.lastCallbackStatus,errorMessage:o.elementData.callbackInfo.lastCallbackErrorMessage,summary:`${o.elementData.name} - ${e}`}}case"mouseTrajectoryUpdate":return{type:"mouseTrajectoryUpdate",currentPoint:o.trajectoryPositions?.currentPoint,predictedPoint:o.trajectoryPositions?.predictedPoint,positionCount:o.trajectoryPositions?.positions?.length||0,mousePredictionEnabled:o.predictionEnabled,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:""};case"scrollTrajectoryUpdate":return{type:"scrollTrajectoryUpdate",currentPoint:o.currentPoint,predictedPoint:o.predictedPoint,scrollDirection:o.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:o.scrollDirection};case"managerSettingsChanged":return{type:"managerSettingsChanged",globalSettings:o.managerData?.globalSettings||{},settingsChanged:o.updatedSettings,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:o.updatedSettings.map(e=>e.setting).join(", ")};case"deviceStrategyChanged":return{type:"deviceStrategyChanged",oldStrategy:o.oldStrategy,newStrategy:o.newStrategy,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.oldStrategy} \u2192 ${o.newStrategy}`};default:return{type:"serializationError",error:"Failed to serialize event data",errorMessage:JSON.stringify(o),localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:""}}}catch(e){return{type:"serializationError",error:"Failed to serialize event data",localizedTimestamp:new Date().toLocaleTimeString(),errorMessage:e instanceof Error?e.message:String(e),logId:r,summary:""}}}function It(o){return`${(o/1e3).toFixed(4)} s`}function Le(o){let r=["th","st","nd","rd"],e=o%100;return o+(r[(e-20)%10]||r[e]||r[0])}import{html as Oe,css as Ot}from"lit";import{customElement as Pt,property as Pe}from"lit/decorators.js";var O=class extends L{constructor(){super(...arguments);this.selectedValues=[]}_handleOptionClick(e){let t=this.selectedValues.includes(e.value);t?this.selectedValues=this.selectedValues.filter(a=>a!==e.value):this.selectedValues=[...this.selectedValues,e.value];let i=!t;this.onSelectionChange?.(e.value,i)}_getTriggerIcon(){return u}_isOptionSelected(e){return this.selectedValues.includes(e.value)}_getTriggerTitle(){let e=this.selectedValues.length;return e===0?"No items selected":e===1?"1 item selected":`${e} items selected`}_getTriggerLabel(){return`Filter options: ${this.selectedValues.length} selected`}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return Oe`
-      <div class="dropdown-container">
-        <button
-          class="${e}"
-          title="${this._getTriggerTitle()}"
-          @click="${this._toggleDropdown}"
-          aria-haspopup="true"
-          aria-expanded="${this.isDropdownOpen}"
-          aria-controls="dropdown-menu"
-          aria-label="${this._getTriggerLabel()}"
-        >
-          ${this._getTriggerIcon()}
-          <span class="selected-count">${this.selectedValues.length}</span>
-          <svg
-            class="arrow-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </button>
-
-        <div class="${t}" id="dropdown-menu" role="menu">
-          ${this.dropdownOptions.map(i=>Oe`
-              <button
-                value="${i.value}"
-                title="${i.title}"
-                class="${this._isOptionSelected(i)?"active":""}"
-                @click="${()=>this._handleOptionClick(i)}"
-                role="menuitem"
-              >
-                ${i.label}
-              </button>
-            `)}
-        </div>
-      </div>
-    `}};O.styles=[...L.styles,Ot`
-      .dropdown-menu button.active::after {
-        content: "✓";
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        color: #b0c4de;
-        font-weight: bold;
-      }
-
-      .selected-count {
-        font-size: 10px;
-        color: #b0c4de;
-        margin-left: 2px;
-      }
-    `],n([Pe({type:Array})],O.prototype,"selectedValues",2),n([Pe()],O.prototype,"onSelectionChange",2),O=n([Pt("multi-select-dropdown")],O);import{LitElement as Ut,html as Nt,css as Ft}from"lit";import{customElement as Vt,property as oe}from"lit/decorators.js";var S=class extends Ut{constructor(e){super();this.isExpanded=!1;this.log=e}updated(e){if(e.has("log")&&this.log){let t=this.log,i=t.type==="callbackCompleted"&&"status"in t&&t.status==="error",a=i?"#f44336":this.getLogTypeColor(t.type),s=i?"rgba(244, 67, 54, 0.1)":"transparent";this.style.setProperty("--log-color",a),this.style.setProperty("--log-background-color",s)}}serializeLogDataWithoutSummary(e){let{summary:t,...i}=e;return JSON.stringify(i,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementReactivated:"Reactivated",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings",managerDataPayload:"ManagerData",deviceStrategyChanged:"Strategy"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,i=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return Nt`
-      <expandable-item
-        .borderColor=${i}
-        .itemId=${e.logId}
-        .isExpanded=${this.isExpanded}
-        .onToggle=${this.onToggle}
-      >
-        <div slot="content">
-          <div class="log-content">
-            <span class="log-time">${e.localizedTimestamp}</span>
-            <span class="log-type-badge">${this.getEventDisplayName(e.type)}</span>
-            <span class="log-summary">${this.truncateLogSummary(e.summary)}</span>
-          </div>
-        </div>
-        <div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
-      </expandable-item>
-    `}};S.styles=[Ft`
-      :host {
-        display: block;
-        /*
-         * The background color is now driven by a CSS variable.
-         * This allows us to set it from TypeScript without touching the class.
-         */
-        background-color: var(--log-background-color, transparent);
-      }
-
-      .log-time {
-        color: #b8b8b8;
-        font-weight: 500;
-        font-size: 10px;
-        font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
-        min-width: 70px;
-        max-width: 70px;
-        text-align: left;
-        letter-spacing: 0.02em;
-        flex-shrink: 0;
-      }
-
-      .log-type-badge {
-        display: inline-flex;
-        align-items: center;
-        font-size: 10px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.02em;
-        /* The color is driven by a CSS variable set in updated() */
-        color: var(--log-color, #b0c4de);
-        min-width: 90px;
-        max-width: 90px;
-        white-space: nowrap;
-        text-align: left;
-        margin-left: 10px;
-        flex-shrink: 0;
-      }
-
-      .log-summary {
-        flex: 1;
-        color: #ccc;
-        font-size: 11px;
-        opacity: 0.9;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin-left: 6px;
-        font-weight: 400;
-        min-width: 0;
-      }
-
-      .log-content {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        min-width: 0;
-      }
-
-      /*
-       * The :host(.error-status) selector is no longer needed,
-       * as all styling is now handled by setting CSS variables below.
-       * This makes the component's styling more self-contained.
-       */
-    `],n([oe({attribute:!1})],S.prototype,"log",2),n([oe({type:Boolean})],S.prototype,"isExpanded",2),n([oe()],S.prototype,"onToggle",2),S=n([Vt("single-log")],S);var v=class extends At{constructor(){super();this.logs=[];this.expandedLogIds=new Set;this.MAX_LOGS=100;this.logIdCounter=0;this.noContentMessage="No logs available";this._abortController=null;this._eventListeners=new Map;this.handleLogLocationChange=e=>{this.logLocation=e};this.handleFilterChange=(e,t)=>{this.eventsEnabled={...this.eventsEnabled,[e]:t},t?this.addForesightEventListener(e):this.removeForesightEventListener(e)};this.handleLogToggle=e=>{let t=new Set(this.expandedLogIds);t.has(e)?t.delete(e):t.add(e),this.expandedLogIds=t};let{logging:{logLocation:e,...t}}=l.instance.devtoolsSettings;this.eventsEnabled=t,this.logLocation=e,this.logDropdown=[{value:"controlPanel",label:"Control Panel",title:"Log only to the control panel",icon:le},{value:"console",label:"Console",title:"Log only to the console",icon:ce},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:pe},{value:"none",label:"None",title:"Dont log anywhere",icon:de}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:u},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:u},{value:"elementReactivated",label:"Element Reactivated",title:"Show when element gets reactivated after stale time has passed",icon:u},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:u},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:u},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:u},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:u},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:u},{value:"deviceStrategyChanged",label:"Strategy Changed",title:"Show strategy change events",icon:u}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([,e])=>e).map(([e])=>e)}shouldShowPerformanceWarning(){let e=this.logLocation==="console"||this.logLocation==="both",t=this.eventsEnabled.mouseTrajectoryUpdate||this.eventsEnabled.scrollTrajectoryUpdate||this.eventsEnabled.elementDataUpdated;return e&&t}getNoLogsMessage(){return Object.values(this.eventsEnabled).filter(Boolean).length===0?"Logging for all events is turned off":this.logLocation==="console"?"No logs to display. Logging location is set to console - check browser console for events.":this.logLocation==="none"?"No logs to display. Logging location is set to none":"Interact with Foresight to generate events."}clearLogs(){this.logs=[],this.expandedLogIds.clear(),this.noContentMessage="Logs cleared"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController,this.setupDynamicEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this.removeAllEventListeners()}setupDynamicEventListeners(){Object.entries(this.eventsEnabled).forEach(([e,t])=>{t&&this.addForesightEventListener(e)})}addForesightEventListener(e){if(this._eventListeners.has(e))return;let t=i=>{this.handleEvent(e,i)};this._eventListeners.set(e,t),K.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(K.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{K.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let i=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${i}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addLog(e){this.logs.unshift(e),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}logManagerData(){this.logLocation!=="none"&&((this.logLocation==="console"||this.logLocation==="both")&&console.log(K.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=$e(K.instance.getManagerData,(++this.logIdCounter).toString());this.addLog(e)}addEventLog(e){let t=Ie(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.addLog(t)}render(){return Z`
-      <tab-header>
-        <div slot="chips" class="chips-container">
-          <chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
-            ${this.logs.length} events
-          </chip-element>
-        </div>
-        <div slot="actions">
-          ${this.shouldShowPerformanceWarning()?Z`
-                <div
-                  class="warning-container"
-                  title="Console logging can be slow with frequent trajectory events.
-Consider using 'Control Panel' only for better performance."
-                >
-                  ${fe}
-                </div>
-              `:""}
-          <single-select-dropdown
-            .dropdownOptions="${this.logDropdown}"
-            .selectedOptionValue="${this.logLocation}"
-            .onSelectionChange="${this.handleLogLocationChange}"
-          ></single-select-dropdown>
-
-          <multi-select-dropdown
-            .dropdownOptions="${this.filterDropdown}"
-            .selectedValues="${this.getSelectedEventFilters()}"
-            .onSelectionChange="${this.handleFilterChange}"
-          ></multi-select-dropdown>
-          <button
-            class="single-button"
-            title="Log the state from the manager"
-            @click="${this.logManagerData}"
-          >
-            ${ye}
-          </button>
-          <button
-            class="single-button"
-            title="Clear all logs"
-            ?disabled="${this.logs.length===0}"
-            @click="${this.clearLogs}"
-          >
-            ${ue}
-          </button>
-        </div>
-      </tab-header>
-      <tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!this.logs.length}>
-        ${this.logs.length===0?Z`<div class="no-items">${this.getNoLogsMessage()}</div>`:Ht(this.logs,e=>Z`
-                <single-log
-                  .log=${e}
-                  .isExpanded=${this.expandedLogIds.has(e.logId)}
-                  .onToggle=${this.handleLogToggle}
-                ></single-log>
-              `)}
-      </tab-content>
-    `}};v.styles=[Rt`
-      :host {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .chips-container {
-        display: flex;
-        gap: 4px;
-      }
-
-      .single-button {
-        background: none;
-        border: none;
-        color: white;
-        cursor: pointer;
-        padding: 6px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s ease;
-        vertical-align: top;
-      }
-
-      .single-button svg {
-        width: 16px;
-        height: 16px;
-        stroke: white;
-        transition: stroke 0.2s;
-      }
-
-      .single-button:hover {
-        background-color: rgba(176, 196, 222, 0.1);
-      }
-
-      .single-button:hover svg {
-        stroke: #b0c4de;
-      }
-
-      .single-button:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      .single-button:disabled:hover {
-        background: none;
-      }
-
-      .single-button:disabled svg {
-        stroke: #666;
-      }
-
-      .no-items {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 200px;
-        text-align: center;
-        font-family: "Courier New", monospace;
-        font-style: italic;
-        padding: 20px;
-        color: #999;
-      }
-
-      .warning-container {
-        background: none;
-        border: none;
-        color: #ffc107;
-        cursor: help;
-        padding: 6px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s ease;
-        vertical-align: top;
-      }
-
-      .warning-container svg {
-        width: 16px;
-        height: 16px;
-        stroke: #ffc107;
-        fill: none;
-        transition: stroke 0.2s;
-      }
-
-      .warning-container:hover {
-        background-color: rgba(255, 193, 7, 0.1);
-      }
-
-      .warning-container:hover svg {
-        stroke: #ffdc3e;
-      }
-    `],n([R()],v.prototype,"logDropdown",2),n([R()],v.prototype,"filterDropdown",2),n([R()],v.prototype,"logLocation",2),n([R()],v.prototype,"eventsEnabled",2),n([R()],v.prototype,"logs",2),n([R()],v.prototype,"expandedLogIds",2),n([zt()],v.prototype,"noContentMessage",2),v=n([jt("log-tab")],v);import{ForesightManager as ee}from"js.foresight";import{css as bn,html as h,LitElement as vn}from"lit";import{customElement as fn,state as T}from"lit/decorators.js";var ae="points";var Ue="tabs";import{LitElement as qt,html as Yt,css as Jt}from"lit";import{customElement as Xt,property as Q}from"lit/decorators.js";import{LitElement as Bt,html as Gt,css as Wt}from"lit";import{customElement as Kt,property as Ne}from"lit/decorators.js";var P=class extends Bt{constructor(){super(...arguments);this.header="";this.description=""}render(){return Gt`<div class="setting-item">
-      <label>
-        <span class="setting-header">${this.header}</span>
-        <span class="setting-description"> ${this.description} </span>
-      </label>
-      <div class="setting-controls">
-        <slot name="controls"></slot>
-      </div>
-    </div>`}};P.styles=[Wt`
-      .setting-item {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 10px 0;
-        border-bottom: 1px solid rgba(80, 80, 80, 0.2);
-      }
-
-      .setting-item:last-child {
-        border-bottom: none;
-      }
-      .setting-controls {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex-shrink: 0;
-      }
-      .setting-description {
-        font-size: 11px;
-        color: #9e9e9e;
-        line-height: 1.3;
-        font-weight: normal;
-      }
-      .setting-item label {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        font-weight: 500;
-        color: #fff;
-        font-size: 13px;
-        min-width: 180px;
-      }
-      .setting-header {
-        font-weight: 500;
-        color: #fff;
-        font-size: 13px;
-      }
-    `],n([Ne({type:String})],P.prototype,"header",2),n([Ne({type:String})],P.prototype,"description",2),P=n([Kt("setting-item")],P);import{ForesightManager as Zt}from"js.foresight";var k=class extends qt{constructor(){super(...arguments);this.isChecked=!1;this.header="";this.description="";this.setting="enableMousePrediction"}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let i=t.checked;this.setting==="showNameTags"?this.dispatchEvent(new CustomEvent("setting-changed",{detail:{setting:this.setting,value:i},bubbles:!0})):Zt.instance.alterGlobalSettings({[this.setting]:i})}}render(){return Yt`<setting-item header=${this.header} description=${this.description}>
-      <input
-        slot="controls"
-        type="checkbox"
-        .checked=${this.isChecked}
-        @change=${this.handleCheckboxChange}
-      />
-    </setting-item>`}};k.styles=[Jt`
-      input[type="checkbox"] {
-        appearance: none;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        position: relative;
-        width: 44px;
-        height: 22px;
-        background-color: #444;
-        cursor: pointer;
-        outline: none;
-        transition: all 0.3s ease;
-        vertical-align: middle;
-        flex-shrink: 0;
-        margin: 0;
-        border: 2px solid #555;
-      }
-
-      input[type="checkbox"]::before {
-        content: "";
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        background-color: white;
-        top: 1px;
-        left: 1px;
-        transition: all 0.3s ease;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      }
-
-      input[type="checkbox"]:checked {
-        background-color: #b0c4de;
-        border-color: #b0c4de;
-      }
-
-      input[type="checkbox"]:checked::before {
-        transform: translateX(22px);
-        background-color: white;
-      }
-
-      input[type="checkbox"]:hover {
-        box-shadow: 0 0 0 3px rgba(176, 196, 222, 0.1);
-      }
-    `],n([Q({type:Boolean})],k.prototype,"isChecked",2),n([Q({type:String})],k.prototype,"header",2),n([Q({type:String})],k.prototype,"description",2),n([Q({type:String})],k.prototype,"setting",2),k=n([Xt("setting-item-checkbox")],k);import{LitElement as Qt,html as en,css as tn}from"lit";import{customElement as nn,property as U,state as on}from"lit/decorators.js";import{ForesightManager as an}from"js.foresight";var g=class extends Qt{constructor(){super(...arguments);this.minValue=0;this.maxValue=100;this.currentValue=50;this.unit="px";this.header="";this.description="";this.setting="tabOffset";this.displayValue=50}handleRangeInput(e){let t=e.target;t instanceof HTMLInputElement&&(this.displayValue=parseInt(t.value,10))}handleRangeChange(e){let t=e.target;if(t instanceof HTMLInputElement){let i=parseInt(t.value,10);this.displayValue=i,an.instance.alterGlobalSettings({[this.setting]:i})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return en`<setting-item header=${this.header} description=${this.description}>
-      <div slot="controls" class="range-wrapper">
-        <input
-          slot="controls"
-          type="range"
-          min="${this.minValue}"
-          max="${this.maxValue}"
-          step="1"
-          .value=${this.displayValue}
-          @input=${this.handleRangeInput}
-          @change=${this.handleRangeChange}
-        />
-        <span class="setting-range-value">${this.displayValue} ${this.unit}</span>
-      </div>
-    </setting-item>`}};g.styles=[tn`
-      .setting-range-value {
-        font-size: 12px;
-        color: #b0c4de;
-        font-weight: 500;
-        min-width: 45px;
-        text-align: right;
-      }
-
-      .range-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        width: 100%;
-      }
-
-      input[type="range"] {
-        margin: 0;
-        cursor: pointer;
-        -webkit-appearance: none;
-        appearance: none;
-        background: transparent;
-        height: 22px;
-        vertical-align: middle;
-        width: 100px;
-      }
-
-      input[type="range"]::-webkit-slider-runnable-track {
-        height: 6px;
-        background: #444;
-        border: 1px solid #555;
-      }
-
-      input[type="range"]::-moz-range-track {
-        height: 6px;
-        background: #444;
-        border: 1px solid #555;
-      }
-
-      input[type="range"]::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        margin-top: -7px;
-        background: #b0c4de;
-        height: 20px;
-        width: 20px;
-        border: 2px solid #333;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-        transition: all 0.2s ease;
-      }
-
-      input[type="range"]::-moz-range-thumb {
-        background: #b0c4de;
-        height: 20px;
-        width: 20px;
-        border: 2px solid #333;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-        transition: all 0.2s ease;
-      }
-
-      input[type="range"]:hover::-webkit-slider-thumb {
-        transform: scale(1.1);
-        box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
-      }
-
-      input[type="range"]:hover::-moz-range-thumb {
-        transform: scale(1.1);
-        box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
-      }
-    `],n([U({type:Number})],g.prototype,"minValue",2),n([U({type:Number})],g.prototype,"maxValue",2),n([U({type:Number})],g.prototype,"currentValue",2),n([U({type:String})],g.prototype,"unit",2),n([U({type:String})],g.prototype,"header",2),n([U({type:String})],g.prototype,"description",2),n([U({type:String})],g.prototype,"setting",2),n([on()],g.prototype,"displayValue",2),g=n([nn("setting-item-range")],g);var m=class extends vn{constructor(){super();this.changedSettings=[];this.currentCorner="bottom-right";this.touchDeviceStrategyOptions=[{value:"onTouchStart",label:"On Touch Start",title:"Execute callbacks when user touches registered elements",icon:h`<span>Touch</span>`},{value:"viewport",label:"Viewport Entry",title:"Execute callbacks when registered elements enter the viewport",icon:h`<span>Viewport</span>`},{value:"none",label:"None",title:"Disable touch device prediction",icon:h`<span>None</span>`}];this.minimumConnectionTypeOptions=[{value:"slow-2g",label:"Slow 2G",title:"Slow 2G",icon:h`<span>Slow 2G</span>`},{value:"2g",label:"2G",title:"2G",icon:h`<span>2G</span>`},{value:"3g",label:"3G",title:"3G",icon:h`<span>3G</span>`},{value:"4g",label:"4G",title:"4G",icon:h`<span>4G</span>`}];this.cornerOptions=[{value:"top-left",label:"Top Left",title:"Position control panel in top-left corner",icon:h`<span>↖</span>`},{value:"top-right",label:"Top Right",title:"Position control panel in top-right corner",icon:h`<span>↗</span>`},{value:"bottom-left",label:"Bottom Left",title:"Position control panel in bottom-left corner",icon:h`<span>↙</span>`},{value:"bottom-right",label:"Bottom Right",title:"Position control panel in bottom-right corner",icon:h`<span>↘</span>`}];this._abortController=null;this._handleTouchDeviceStrategyChange=e=>{ee.instance.alterGlobalSettings({touchDeviceStrategy:e})};this._handleMinimumConnectionTypeChange=e=>{ee.instance.alterGlobalSettings({minimumConnectionType:e})};this._handleCornerChange=e=>{this.currentCorner=e,this.dispatchEvent(new CustomEvent("corner-change",{detail:{corner:e},bubbles:!0,composed:!0}))};let e=l.instance.devtoolsSettings,t=ee.instance.getManagerData.globalSettings;this.devtoolsSettings=Object.assign({},e),this.managerSettings=Object.assign({},t),this.currentCorner=this.getCurrentCorner(),this.initialSettings={devtools:Object.assign({},e),manager:Object.assign({},t)}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;ee.instance.addEventListener("managerSettingsChanged",t=>{this.managerSettings=t.managerData.globalSettings,this._updateChangedSettings()},{signal:e}),this._updateChangedSettings()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}_updateChangedSettings(){let e=[];this._checkManagerSettingsChanges(e),this._checkDevtoolsSettingsChanges(e),this.changedSettings=e}_checkManagerSettingsChanges(e){let t=["enableMousePrediction","enableTabPrediction","enableScrollPrediction","trajectoryPredictionTime","positionHistorySize","tabOffset","scrollMargin","touchDeviceStrategy","minimumConnectionType"];for(let i of t){let a=this.initialSettings.manager[i],s=this.managerSettings[i];a!==s&&e.push({setting:i,oldValue:a,newValue:s})}}_checkDevtoolsSettingsChanges(e){let t=["showNameTags"];for(let i of t){let a=this.initialSettings.devtools[i],s=this.devtoolsSettings[i];a!==s&&e.push({setting:i,oldValue:a,newValue:s})}}_handleDevtoolsSettingChange(e){let{setting:t,value:i}=e.detail;t==="showNameTags"&&(this.devtoolsSettings={...this.devtoolsSettings,showNameTags:i},l.instance.alterDevtoolsSettings({showNameTags:i}),this._updateChangedSettings())}getCurrentCorner(){try{let e=localStorage.getItem("foresight-devtools-control-panel-corner");if(e&&["top-left","top-right","bottom-left","bottom-right"].includes(e))return e}catch(e){console.warn("ForesightDevtools: Failed to load corner from localStorage:",e)}return"bottom-right"}async handleCopySettings(){if(this.managerSettings)try{let e=this.generateSettingsCode(this.managerSettings);navigator.clipboard&&navigator.clipboard.writeText&&await navigator.clipboard.writeText(e)}catch(e){console.error("Failed to copy settings code:",e)}}generateSettingsCode(e){let t={enableMousePrediction:e.enableMousePrediction,enableTabPrediction:e.enableTabPrediction,enableScrollPrediction:e.enableScrollPrediction,positionHistorySize:e.positionHistorySize,trajectoryPredictionTime:e.trajectoryPredictionTime,tabOffset:e.tabOffset,scrollMargin:e.scrollMargin,touchDeviceStrategy:e.touchDeviceStrategy,minimumConnectionType:e.minimumConnectionType};return`ForesightManager.initialize(${JSON.stringify(t,null,2)})`}render(){if(!this.managerSettings||!this.devtoolsSettings)return h`<tab-content
-        .noContentMessage=${"Loading settings..."}
-        .hasContent=${!1}
-      ></tab-content>`;let e=this.managerSettings,t=this.changedSettings.length>0?`Settings that have been changed this session compared to your initialized settings.
-Click on the copy icon to easely copy the new setting into your project
-
-`+this.changedSettings.map(i=>`${i.setting}: ${JSON.stringify(i.oldValue)} -> ${JSON.stringify(i.newValue)}`).join(`
-`):"No settings changed from initial values";return h`
-      <tab-header>
-        <div slot="chips" class="chips-container">
-          <chip-element .title=${t}> ${this.changedSettings.length} changed </chip-element>
-        </div>
-        <div slot="actions">
-          <copy-icon
-            title="Copy current settings as code"
-            .onCopy=${()=>this.handleCopySettings()}
-          ></copy-icon>
-        </div>
-      </tab-header>
-
-      <tab-content .hasContent=${!0}>
-        <div class="settings-content">
-          <div class="settings-section">
-            <div class="settings-group">
-              <h4>Mouse Prediction</h4>
-              <setting-item-checkbox
-                .isChecked=${e.enableMousePrediction}
-                header="Enable Mouse Prediction"
-                description="Execute callbacks when mouse is ${e.trajectoryPredictionTime}ms away from registered elements in mouse direction"
-                setting="enableMousePrediction"
-              ></setting-item-checkbox>
-              <setting-item-range
-                .currentValue=${e.trajectoryPredictionTime}
-                .maxValue=${200}
-                .minValue=${10}
-                .unit=${"ms"}
-                header="Prediction Time"
-                description="How far into the future to calculate mouse trajectory path"
-                setting="trajectoryPredictionTime"
-              ></setting-item-range>
-              <setting-item-range
-                .currentValue=${e.positionHistorySize}
-                .maxValue=${30}
-                .minValue=${2}
-                .unit=${ae}
-                header="Position History Size"
-                description="How far into the future, in ${ae}, to calculate mouse trajectory path"
-                setting="positionHistorySize"
-              >
-              </setting-item-range>
-            </div>
-            <div class="settings-group">
-              <h4>Keyboard Navigation</h4>
-              <setting-item-checkbox
-                .isChecked=${e.enableTabPrediction}
-                header="Enable Tab Prediction"
-                description="Execute callbacks when user ${e.tabOffset} tabbable elements away from registered elements in tab direction"
-                setting="enableTabPrediction"
-              >
-              </setting-item-checkbox>
-              <setting-item-range
-                .currentValue=${e.tabOffset}
-                .maxValue=${20}
-                .minValue=${0}
-                .unit=${Ue}
-                header="Tab Offset"
-                description="Number of tabbable elements to look ahead when predicting navigation"
-                setting="tabOffset"
-              >
-              </setting-item-range>
-            </div>
-
-            <div class="settings-group">
-              <h4>Scroll Prediction</h4>
-              <setting-item-checkbox
-                .isChecked=${e.enableScrollPrediction}
-                header="Enable Scroll Prediction"
-                description="Execute callbacks when user is ${e.scrollMargin}px away from registered elements in scroll direction"
-                setting="enableScrollPrediction"
-              ></setting-item-checkbox>
-              <setting-item-range
-                .currentValue=${e.scrollMargin}
-                .maxValue=${300}
-                .minValue=${30}
-                .unit=${"px"}
-                header="Scroll Margin"
-                description="Pixel distance to check from mouse position in scroll direction"
-                setting="scrollMargin"
-              ></setting-item-range>
-            </div>
-
-            <div class="settings-group">
-              <h4>Touch Device</h4>
-              <setting-item
-                header="Touch Device Strategy"
-                description="How to handle prediction on touch devices"
-              >
-                <single-select-dropdown
-                  slot="controls"
-                  .dropdownOptions=${this.touchDeviceStrategyOptions}
-                  .selectedOptionValue=${e.touchDeviceStrategy}
-                  .onSelectionChange=${this._handleTouchDeviceStrategyChange}
-                ></single-select-dropdown>
-              </setting-item>
-            </div>
-
-            <div class="settings-group">
-              <h4>Minimum Connection</h4>
-              <setting-item
-                header="Minimum Connection Type"
-                description="Minimum connection speed required to register elements"
-              >
-                <single-select-dropdown
-                  slot="controls"
-                  .dropdownOptions=${this.minimumConnectionTypeOptions}
-                  .selectedOptionValue=${e.minimumConnectionType}
-                  .onSelectionChange=${this._handleMinimumConnectionTypeChange}
-                ></single-select-dropdown>
-              </setting-item>
-            </div>
-
-            <!-- Developer Tools Group -->
-            <div class="settings-group">
-              <h4>Developer Tools</h4>
-              <setting-item-checkbox
-                .isChecked=${this.devtoolsSettings.showNameTags}
-                header="Show Name Tags"
-                description="Display name tags over each registered element in the debugger"
-                setting="showNameTags"
-                @setting-changed=${this._handleDevtoolsSettingChange}
-              ></setting-item-checkbox>
-              <setting-item
-                header="Panel Position"
-                description="Choose which corner to position the control panel"
-              >
-                <single-select-dropdown
-                  slot="controls"
-                  .dropdownOptions=${this.cornerOptions}
-                  .selectedOptionValue=${this.currentCorner}
-                  .onSelectionChange=${this._handleCornerChange}
-                ></single-select-dropdown>
-              </setting-item>
-            </div>
-          </div>
-        </div>
-      </tab-content>
-    `}};m.styles=bn`
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-
-    .settings-content {
-      display: block;
-    }
-
-    .settings-section {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .settings-group {
-      background: rgba(30, 30, 30, 0.6);
-      padding: 16px;
-      border: 1px solid rgba(176, 196, 222, 0.1);
-    }
-
-    .settings-group h4 {
-      margin: 0 0 12px 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: #b0c4de;
-      border-bottom: 1px solid rgba(176, 196, 222, 0.2);
-      padding-bottom: 8px;
-    }
-  `,n([T()],m.prototype,"managerSettings",2),n([T()],m.prototype,"initialSettings",2),n([T()],m.prototype,"devtoolsSettings",2),n([T()],m.prototype,"changedSettings",2),n([T()],m.prototype,"currentCorner",2),n([T()],m.prototype,"touchDeviceStrategyOptions",2),n([T()],m.prototype,"minimumConnectionTypeOptions",2),n([T()],m.prototype,"cornerOptions",2),m=n([fn("settings-tab")],m);var w=class extends yn{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.isTouchDevice=!1;this.isWarningDismissed=!1;this.corner="bottom-right";this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this.localStorageCornerKey="foresight-devtools-control-panel-corner";this._abortController=null;this.activeTab=this.getStoredTab(),this.corner=this.getStoredCorner(),this.isTouchDevice=Fe.instance.getManagerData.currentDeviceStrategy==="touch"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Fe.instance.addEventListener("deviceStrategyChanged",t=>{this.isTouchDevice=t.newStrategy==="touch",t.newStrategy==="touch"&&(this.isWarningDismissed=!1)},{signal:e}),this.addEventListener("corner-change",(t=>{this.setCorner(t.detail.corner)}),{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getStoredTab(){try{return localStorage.getItem(this.localStorageSelectedTabKey)||"logs"}catch(e){return console.error(e),"logs"}}getStoredCorner(){try{let e=localStorage.getItem(this.localStorageCornerKey);if(e)return e}catch(e){console.error("ForesightDevtools: Failed to load corner from localStorage:",e)}return"bottom-right"}_handleTabChange(e){this.activeTab=e.detail.tab,this.setStoredTab(this.activeTab)}setStoredTab(e){try{localStorage.setItem(this.localStorageSelectedTabKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save tab preference to localStorage:",t)}}setStoredCorner(e){try{localStorage.setItem(this.localStorageCornerKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save corner to localStorage:",t)}}dismissWarning(){this.isWarningDismissed=!0}setCorner(e){this.corner=e,this.setStoredCorner(this.corner),this.requestUpdate()}handleMinimizeClick(e){e.stopPropagation(),this.isMinimized=!this.isMinimized}getMinimizeSymbol(){return this.isMinimized?"+":"\u2212"}render(){return xn`
-      <div class="control-wrapper ${this.corner} ${this.isMinimized?"minimized":""}">
-        <div class="title-wrapper">
-          <button @click="${this.handleMinimizeClick}" class="minimize-button">
-            ${this.getMinimizeSymbol()}
-          </button>
-          <h1>Foresight DevTools</h1>
-          <div></div>
-        </div>
-
-        <div
-          class="touch-device-warning ${this.isMinimized||!this.isTouchDevice||this.isWarningDismissed?"hidden":""}"
-        >
-          <div class="warning-content">
-            <span class="warning-icon">⚠️</span>
-            <span>Touch device mode: Overlays and visibility sorting not available</span>
-          </div>
-          <button @click="${this.dismissWarning}" class="dismiss-button" title="Dismiss warning">
-            ×
-          </button>
-        </div>
-
-        <div class="tab-container ${this.isMinimized?"hidden":""}">
-          <tab-selector
-            .activeTab="${this.activeTab}"
-            @tab-change="${this._handleTabChange}"
-          ></tab-selector>
-
-          <div class="tab-content">
-            <log-tab class=${re({active:this.activeTab==="logs"})}></log-tab>
-            <element-tab class=${re({active:this.activeTab==="elements"})}></element-tab>
-            <settings-tab
-              class=${re({active:this.activeTab==="settings"})}
-            ></settings-tab>
-          </div>
-        </div>
-      </div>
-    `}};w.styles=wn`
-    .control-wrapper {
-      --panel-offset: 10px;
-      padding: 12px;
-      position: fixed;
-      background-color: rgba(0, 0, 0, 0.9);
-      color: white;
-      font-family: Arial, sans-serif;
-      font-size: 13px;
-      z-index: 10001;
-      pointer-events: auto;
-      display: flex;
-      flex-direction: column;
-      width: 450px;
-      height: 450px;
-      transition:
-        width 0.3s ease,
-        height 0.3s ease;
-      box-sizing: border-box;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    }
-
-    .control-wrapper.top-left {
-      top: var(--panel-offset);
-      left: var(--panel-offset);
-    }
-    .control-wrapper.top-right {
-      top: var(--panel-offset);
-      right: var(--panel-offset);
-    }
-    .control-wrapper.bottom-left {
-      bottom: var(--panel-offset);
-      left: var(--panel-offset);
-    }
-    .control-wrapper.bottom-right {
-      bottom: var(--panel-offset);
-      right: var(--panel-offset);
-    }
-
-    .control-wrapper.minimized {
-      width: 230px;
-      height: 45px;
-    }
-
-    .title-wrapper {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0;
-      flex-shrink: 0;
-    }
-
-    .title-wrapper h1 {
-      margin: 0;
-      font-size: 15px;
-    }
-
-    .minimize-button {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 22px;
-      cursor: pointer;
-      line-height: 1;
-      padding: 0;
-    }
-
-    .tab-container {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      overflow: hidden;
-    }
-
-    .tab-container.hidden {
-      display: none;
-    }
-
-    .tab-content {
-      flex: 1;
-      position: relative;
-    }
-
-    .tab-content > * {
-      display: none;
-    }
-
-    .tab-content > .active {
-      display: flex;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .touch-device-warning {
-      background-color: rgba(255, 193, 7, 0.9);
-      color: #000;
-      padding: 8px 12px;
-      margin: 8px 0;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-    }
-
-    .touch-device-warning.hidden {
-      display: none;
-    }
-
-    .warning-content {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .warning-icon {
-      font-weight: bold;
-      font-size: 14px;
-    }
-
-    .dismiss-button {
-      background: none;
-      border: none;
-      color: #000;
-      font-size: 16px;
-      cursor: pointer;
-      padding: 0;
-      line-height: 1;
-      font-weight: bold;
-    }
-
-    .dismiss-button:hover {
-      opacity: 0.7;
-    }
-  `,n([q()],w.prototype,"activeTab",2),n([q()],w.prototype,"isMinimized",2),n([q()],w.prototype,"isTouchDevice",2),n([q()],w.prototype,"isWarningDismissed",2),n([q()],w.prototype,"corner",2),w=n([kn("control-panel")],w);import{LitElement as Vn,css as An,html as Ae}from"lit";import{customElement as Rn,state as jn}from"lit/decorators.js";import{LitElement as Cn,html as En,css as Sn}from"lit";import{customElement as Tn,state as Ve,query as Dn}from"lit/decorators.js";import{ForesightManager as j}from"js.foresight";var D=class extends Cn{constructor(){super(...arguments);this.overlayMap=new Map;this.callbackAnimations=new Map;this._abortController=null}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;j.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementReactivated",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementDataUpdated",t=>{t.updatedProps.includes("bounds")&&t.elementData.callbackInfo.isCallbackActive&&this.createOrUpdateElementOverlay(t.elementData),t.updatedProps.includes("visibility")&&(t.elementData.isIntersectingWithViewport||this.removeElementOverlay(t.elementData))},{signal:e}),j.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),j.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData),this.removeElementOverlay(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let i=t;this.updateNameTagVisibility(i.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let i=document.createElement("div");i.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(i);let a={expandedOverlay:t,nameLabel:i};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:i,nameLabel:a}=e,{expandedRect:s}=t.elementBounds,d=s.right-s.left,Y=s.bottom-s.top;i.style.width=`${d}px`,i.style.height=`${Y}px`,i.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,l.instance.devtoolsSettings.showNameTags?(a.textContent=t.name,a.style.display="block",a.style.transform=`translate3d(${s.left}px, ${s.top-25}px, 0)`):a.style.display="none"}createOrUpdateElementOverlay(e){let t=this.overlayMap.get(e.element);t||(t=this.createElementOverlays(e)),this.updateElementOverlays(t,e)}removeElementOverlay(e){let t=this.overlayMap.get(e.element);t&&(t.expandedOverlay.remove(),t.nameLabel.remove(),this.overlayMap.delete(e.element)),this.clearCallbackAnimationTimeout(e.element)}clearCallbackAnimationTimeout(e){let t=this.callbackAnimations.get(e);t&&(clearTimeout(t.timeoutId),this.callbackAnimations.delete(e))}highlightElementCallback(e,t){let i=this.overlayMap.get(e.element);if(i)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":i.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":i.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":i.expandedOverlay.classList.add("invoked-by-tab");break;case"touch":break;case"viewport":break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(!t)return;let i=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:i})}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let i=t.nameLabel;e?i.style.display="block":i.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this.callbackAnimations.forEach(e=>{clearTimeout(e.timeoutId)}),this.callbackAnimations.clear(),this.overlayMap.clear(),this._abortController?.abort(),this._abortController=null}render(){return En` <div id="overlays-container"></div> `}};D.styles=[Sn`
-      :host {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        z-index: 9999;
-      }
-
-      .expanded-overlay {
-        position: absolute;
-        will-change: transform, box-shadow;
-        border: 1px dashed rgba(100, 116, 139, 0.4);
-        background-color: rgba(100, 116, 139, 0.05);
-        transition:
-          border-color 0.2s ease,
-          background-color 0.2s ease;
-      }
-
-      .expanded-overlay.invoked-by-scroll {
-        --glow-color-rgb: 234, 179, 8;
-        border-color: #eab308;
-        background-color: rgba(var(--glow-color-rgb), 0.1);
-        animation: callback-glow 2s ease-in-out infinite;
-      }
-
-      .expanded-overlay.invoked-by-mouse {
-        --glow-color-rgb: 59, 130, 246;
-        border-color: #3b82f6;
-        background-color: rgba(var(--glow-color-rgb), 0.1);
-        animation: callback-glow 2s ease-in-out infinite;
-      }
-
-      .expanded-overlay.invoked-by-tab {
-        --glow-color-rgb: 249, 115, 22;
-        border-color: #f97316;
-        background-color: rgba(var(--glow-color-rgb), 0.1);
-        animation: callback-glow 2s ease-in-out infinite;
-      }
-      @keyframes callback-glow {
-        0% {
-          box-shadow: 0 0 5px 2px rgba(var(--glow-color-rgb), 0.3);
-        }
-        50% {
-          box-shadow: 0 0 15px 4px rgba(var(--glow-color-rgb), 0.6);
-        }
-        100% {
-          box-shadow: 0 0 5px 2px rgba(var(--glow-color-rgb), 0.3);
-        }
-      }
-
-      .name-label {
-        position: absolute;
-        top: 0;
-        left: 0;
-        will-change: transform;
-        background-color: rgba(27, 31, 35, 0.85);
-        backdrop-filter: blur(4px);
-        color: white;
-        padding: 4px 8px;
-        font-size: 11px;
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-          "Apple Color Emoji", "Segoe UI Emoji";
-        z-index: 10001;
-        white-space: nowrap;
-        pointer-events: none;
-      }
-    `],n([Ve()],D.prototype,"overlayMap",2),n([Ve()],D.prototype,"callbackAnimations",2),n([Dn("#overlays-container")],D.prototype,"containerElement",2),D=n([Tn("element-overlays")],D);import{LitElement as Mn,html as _n,css as Ln}from"lit";import{customElement as $n,state as se}from"lit/decorators.js";import{styleMap as In}from"lit/directives/style-map.js";import{ForesightManager as z}from"js.foresight";var M=class extends Mn{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=z.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate3d(0px, 0px, 0) rotate(0deg)",width:"0px"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1),this.requestUpdate()};this.handleTrajectoryUpdate=e=>{if(!this._mousePredictionIsEnabled)return;this._isVisible=!0;let{currentPoint:t,predictedPoint:i}=e.trajectoryPositions,a=i.x-t.x,s=i.y-t.y,d=Math.sqrt(a*a+s*s),Y=Math.atan2(s,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${Y}deg)`,width:`${d}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;z.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),z.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),z.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return _n` <div class="trajectory-line" style=${In(e)}></div> `}};M.styles=[Ln`
-      :host {
-        display: block;
-      }
-
-      .trajectory-line {
-        position: absolute;
-        top: 0;
-        left: 0;
-        will-change: transform, width;
-        transform-origin: left center;
-        height: 4px;
-        background: linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.4));
-        z-index: 9999;
-        border-radius: 2px;
-        box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
-      }
-
-      .trajectory-line::after {
-        content: "";
-        position: absolute;
-        right: -6px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 0;
-        height: 0;
-        border-left: 8px solid #3b82f6;
-        border-top: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
-      }
-    `],n([se()],M.prototype,"_mousePredictionIsEnabled",2),n([se()],M.prototype,"_isVisible",2),n([se()],M.prototype,"_trajectoryStyles",2),M=n([$n("mouse-trajectory")],M);import{LitElement as On,html as Pn,css as Un}from"lit";import{customElement as Nn,state as te}from"lit/decorators.js";import{styleMap as Fn}from"lit/directives/style-map.js";import{ForesightManager as N}from"js.foresight";var C=class extends On{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=N.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=N.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate(0px, 0px) rotate(0deg)"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let i=e.updatedSettings.find(a=>a.setting==="scrollMargin");i&&(this._scrollMargin=i.newValue)};this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,this.renderScrollTrajectory()))};this.renderScrollTrajectory=()=>{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,i=t.x-e.x,a=t.y-e.y,s=Math.atan2(a,i)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${s}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;N.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),N.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),N.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),N.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),N.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",width:`${this._scrollMargin}px`,...this._trajectoryStyles};return Pn` <div class="scroll-trajectory-line" style=${Fn(e)}></div> `}};C.styles=[Un`
-      :host {
-        display: block;
-      }
-
-      .scroll-trajectory-line {
-        position: absolute;
-        top: 0;
-        left: 0;
-        will-change: transform, width;
-        transform-origin: left center;
-        height: 4px;
-        background: repeating-linear-gradient(
-          90deg,
-          #eab308 0px,
-          #eab308 8px,
-          transparent 8px,
-          transparent 16px
-        );
-        z-index: 9999;
-        border-radius: 2px;
-        animation: scroll-dash-flow 1.5s linear infinite;
-        box-shadow: 0 0 12px rgba(234, 179, 8, 0.4);
-      }
-
-      .scroll-trajectory-line::after {
-        content: "";
-        position: absolute;
-        right: -6px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 0;
-        height: 0;
-        border-left: 8px solid #eab308;
-        border-top: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6));
-        animation: scroll-arrow-pulse 1.5s ease-in-out infinite;
-      }
-
-      @keyframes scroll-dash-flow {
-        0% {
-          background-position: 0px 0px;
-        }
-        100% {
-          background-position: 16px 0px;
-        }
-      }
-
-      @keyframes scroll-arrow-pulse {
-        0%,
-        100% {
-          transform: translateY(-50%) scale(1);
-          filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6));
-        }
-        50% {
-          transform: translateY(-50%) scale(1.2);
-          filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
-        }
-      }
-    `],n([te()],C.prototype,"_scrollPredictionIsEnabled",2),n([te()],C.prototype,"_scrollMargin",2),n([te()],C.prototype,"_isVisible",2),n([te()],C.prototype,"_trajectoryStyles",2),C=n([Nn("scroll-trajectory")],C);import{ForesightManager as Re}from"js.foresight";var H=class extends Vn{constructor(){super(...arguments);this._abortController=null;this._strategy=Re.instance.getManagerData.currentDeviceStrategy;this.handleDeviceStrategyChange=e=>this._strategy=e.newStrategy}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Re.instance.addEventListener("deviceStrategyChanged",this.handleDeviceStrategyChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}render(){return Ae`
-      <div id="overlay-container">
-        ${this._strategy==="mouse"?Ae`
-              <mouse-trajectory></mouse-trajectory>
-              <scroll-trajectory></scroll-trajectory>
-              <element-overlays></element-overlays>
-            `:""}
-      </div>
-    `}};H.styles=[An`
-      :host {
-        display: block;
-      }
-      #overlay-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        pointer-events: none;
-        z-index: 9999;
-      }
-    `],n([jn()],H.prototype,"_strategy",2),H=n([Rn("debug-overlay")],H);var l=class extends zn{constructor(){super();this.isInitialized=!1;this.devtoolsSettings={showDebugger:!0,isControlPanelDefaultMinimized:!1,showNameTags:!0,sortElementList:"visibility",logging:{logLocation:"controlPanel",callbackCompleted:!0,elementReactivated:!0,callbackInvoked:!0,elementDataUpdated:!1,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1,deviceStrategyChanged:!0}}}static createAndAppendInstance(){typeof window>"u"||typeof document>"u"||(l._instance=document.createElement("foresight-devtools"),document.body.appendChild(l._instance))}static initialize(e){if(l._instance||l.createAndAppendInstance(),!l._instance)return l._instance;let t=l._instance;return t.isInitialized=!0,t.alterDevtoolsSettings(e),t}static get instance(){return l._instance?l._instance:l.initialize()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}shouldUpdateSetting(e,t){return e!==void 0&&e!==t}updateLoggingSetting(e,t){this.shouldUpdateSetting(t,this.devtoolsSettings.logging[e])&&(this.devtoolsSettings.logging[e]=t)}alterDevtoolsSettings(e){e!==void 0&&(this.shouldUpdateSetting(e.showNameTags,this.devtoolsSettings.showNameTags)&&(this.devtoolsSettings.showNameTags=e.showNameTags,this.dispatchEvent(new CustomEvent("showNameTagsChanged",{detail:{showNameTags:e.showNameTags},bubbles:!0}))),this.shouldUpdateSetting(e.showDebugger,this.devtoolsSettings.showDebugger)&&(this.devtoolsSettings.showDebugger=e.showDebugger,this.requestUpdate()),this.shouldUpdateSetting(e.isControlPanelDefaultMinimized,this.devtoolsSettings.isControlPanelDefaultMinimized)&&(this.devtoolsSettings.isControlPanelDefaultMinimized=e.isControlPanelDefaultMinimized),this.shouldUpdateSetting(e.sortElementList,this.devtoolsSettings.sortElementList)&&(this.devtoolsSettings.sortElementList=e.sortElementList),e.logging&&(this.shouldUpdateSetting(e.logging.logLocation,this.devtoolsSettings.logging.logLocation)&&(this.devtoolsSettings.logging.logLocation=e.logging.logLocation),this.updateLoggingSetting("callbackCompleted",e.logging.callbackCompleted),this.updateLoggingSetting("callbackInvoked",e.logging.callbackInvoked),this.updateLoggingSetting("elementDataUpdated",e.logging.elementDataUpdated),this.updateLoggingSetting("elementRegistered",e.logging.elementRegistered),this.updateLoggingSetting("elementUnregistered",e.logging.elementUnregistered),this.updateLoggingSetting("managerSettingsChanged",e.logging.managerSettingsChanged),this.updateLoggingSetting("mouseTrajectoryUpdate",e.logging.mouseTrajectoryUpdate),this.updateLoggingSetting("scrollTrajectoryUpdate",e.logging.scrollTrajectoryUpdate),this.updateLoggingSetting("deviceStrategyChanged",e.logging.deviceStrategyChanged)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?je``:je`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[Hn`
-      :host {
-        display: block;
-      }
-    `],l._instance=null,n([Gn()],l.prototype,"isInitialized",2),l=n([Bn("foresight-devtools")],l);export{l as ForesightDevtools};