js.foresight-devtools 1.4.0 → 2.1.0

package/dist/index.mjs

@@ -0,0 +1,2194 @@
+import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,property as i,query as a,state as o}from"lit/decorators.js";import{ForesightManager as s}from"js.foresight";import{repeat as c}from"lit/directives/repeat.js";const l=[`controlPanel`,`nameTags`,`elementOverlays`,`mouseTrajectory`,`scrollTrajectory`],u=n`
+  <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>
+`,d=n`
+  <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>
+`,ee=n`
+  <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>
+`,te=n`
+  <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>
+`,f=n`
+  <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>
+`,ne=n`
+  <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>
+`,re=n`
+  <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>
+`,p=n`
+  <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>
+`,ie=n`
+  <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>
+`,ae=n`
+  <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>
+`,m=n`
+  <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>
+`,oe=n`
+  <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>
+`,se=n`
+  <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>
+`,ce=n`
+  <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>
+`;n`
+  <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>
+`,n`
+  <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>
+`;const le=n`
+  <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>
+`,h=n`
+  <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"
+  >
+    <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
+    <line x1="12" y1="2" x2="12" y2="12" />
+  </svg>
+`;function g(e,t){if(typeof Reflect==`object`&&typeof Reflect.metadata==`function`)return Reflect.metadata(e,t)}function _(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let v=class extends e{constructor(...e){super(...e),this.title=``}static{this.styles=[t`
+      :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;
+      }
+    `]}render(){return n`
+      <span class="chip" title="${this.title}">
+        <slot></slot>
+      </span>
+    `}};_([i({type:String}),g(`design:type`,String)],v.prototype,`title`,void 0),v=_([r(`chip-element`)],v);let y=class extends e{constructor(...e){super(...e),this.noContentMessage=`No content available.`,this.hasContent=!0}static{this.styles=[t`
+      :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;
+      }
+    `]}render(){return n`
+      <div class="content-container">
+        ${this.hasContent?n`<slot></slot>`:n`<div class="no-content-message">${this.noContentMessage}</div>`}
+      </div>
+    `}};_([i({type:String,attribute:`no-content-message`}),g(`design:type`,String)],y.prototype,`noContentMessage`,void 0),_([i({type:Boolean}),g(`design:type`,Boolean)],y.prototype,`hasContent`,void 0),y=_([r(`tab-content`)],y);let b=class extends e{static{this.styles=[t`
+      :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;
+      }
+    `]}render(){return n`
+      <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=_([r(`tab-header`)],b);var x=class r extends e{constructor(...e){super(...e),this.isDropdownOpen=!1,this.dropdownOptions=[],this._toggleDropdown=e=>{e.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(r.currentlyOpen&&r.currentlyOpen!==this&&r.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,r.currentlyOpen=this,this._positionDropdown())},this._handleOutsideClick=e=>{this.isDropdownOpen&&(e.composedPath().includes(this)||this._closeDropdown())}}static{this.currentlyOpen=null}static{this.styles=[t`
+      :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;
+      }
+    `]}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._handleOutsideClick),r.currentlyOpen===this&&(r.currentlyOpen=null)}_closeDropdown(){this.isDropdownOpen=!1,r.currentlyOpen===this&&(r.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 n=e.getBoundingClientRect(),r=t.offsetHeight||200,i=n.bottom+5,a=window.innerWidth-n.right;window.innerHeight-n.bottom<r&&n.top>r?t.style.top=`${n.top-r-5}px`:t.style.top=`${i}px`,t.style.right=`${a}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?`active`:``}`,t=`dropdown-menu ${this.isDropdownOpen?`active`:``}`;return n`
+      <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(e=>n`
+              <button
+                value="${e.value}"
+                title="${e.title}"
+                class="${this._isOptionSelected(e)?`active`:``}"
+                @click="${()=>this._handleOptionClick(e)}"
+                role="menuitem"
+              >
+                ${e.label}
+              </button>
+            `)}
+        </div>
+      </div>
+    `}};_([o(),g(`design:type`,Boolean)],x.prototype,`isDropdownOpen`,void 0),_([i({type:Array}),g(`design:type`,Array)],x.prototype,`dropdownOptions`,void 0);let S=class extends x{constructor(...e){super(...e),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:n``}_isOptionSelected(e){return e.value===this.selectedOptionValue}_getTriggerTitle(){let e=this._getSelectedOption();return e?e.title:`Change selection`}_getTriggerLabel(){let e=this._getSelectedOption();return e?`Current selection: ${e.label}`:`No selection`}_getSelectedOption(){return this.dropdownOptions.find(e=>e.value===this.selectedOptionValue)}};_([i({type:String}),g(`design:type`,String)],S.prototype,`selectedOptionValue`,void 0),_([i({type:Function}),g(`design:type`,Function)],S.prototype,`onSelectionChange`,void 0),S=_([r(`single-select-dropdown`)],S);let C=class extends e{constructor(...e){super(...e),this.title=`Copy to clipboard`,this.isCopied=!1,this.copyTimeout=null}static{this.styles=t`
+    .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;
+    }
+  `}async handleClick(e){if(!this.isCopied){if(this.onCopy)try{await this.onCopy(e)}catch(e){console.error(`Error in onCopy function:`,e)}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),null)}render(){return n`
+      <button
+        class="copy-button ${this.isCopied?`copied`:``}"
+        title="${this.title}"
+        @click=${this.handleClick}
+      >
+        ${this.isCopied?m:ae}
+      </button>
+    `}};_([i({type:String}),g(`design:type`,String)],C.prototype,`title`,void 0),_([i({type:Function}),g(`design:type`,Function)],C.prototype,`onCopy`,void 0),_([o(),g(`design:type`,Boolean)],C.prototype,`isCopied`,void 0),_([o(),g(`design:type`,Object)],C.prototype,`copyTimeout`,void 0),C=_([r(`copy-icon`)],C);let w=class extends e{constructor(...e){super(...e),this.borderColor=`#555`,this.showCopyButton=!1,this.itemId=``,this.isExpanded=!1}static{this.styles=[t`
+      :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;
+      }
+    `]}toggleExpand(){this.onToggle&&this.onToggle(this.itemId)}async handleCopy(e){e.stopPropagation();let t=this.shadowRoot?.querySelector(`slot[name="details"]`);if(t){let e=t.assignedNodes().map(e=>e.textContent).join(``);try{await navigator.clipboard.writeText(e)}catch(e){console.error(`Failed to copy text: `,e)}}}render(){return this.style.setProperty(`--border-color`,this.borderColor),n`
+      <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?n`
+              <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>
+    `}};_([i(),g(`design:type`,String)],w.prototype,`borderColor`,void 0),_([i(),g(`design:type`,Boolean)],w.prototype,`showCopyButton`,void 0),_([i(),g(`design:type`,String)],w.prototype,`itemId`,void 0),_([i(),g(`design:type`,Boolean)],w.prototype,`isExpanded`,void 0),_([i(),g(`design:type`,Object)],w.prototype,`onToggle`,void 0),w=_([r(`expandable-item`)],w);let T=class extends e{constructor(...e){super(...e),this.remainingTime=0,this.isCountdownActive=!1,this.intervalId=null,this.startTime=0,this.lastDisplayedTime=``,this.countdownForElement=null,this.countdownReactivateAfter=0,this.handleTimerClick=e=>{e.stopPropagation(),s.instance.reactivate(this.element)}}static{this.styles=[t`
+      :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;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this.checkAndStartCountdown()}disconnectedCallback(){super.disconnectedCallback(),this.clearCountdown()}willUpdate(e){super.willUpdate(e),e.has(`state`)&&this.checkAndStartCountdown()}checkAndStartCountdown(){let e=this.state;if(!e){this.clearCountdown();return}let t=e.status!==void 0;!e.isActive&&t&&e.reactivateAfter>0?this.startCountdown():this.clearCountdown()}startCountdown(){if(this.isCountdownActive&&this.countdownForElement===this.element&&this.countdownReactivateAfter===this.state.reactivateAfter)return;this.clearCountdown();let e=this.state;if(!e)return;if(this.countdownForElement=this.element,this.countdownReactivateAfter=e.reactivateAfter,this.isCountdownActive=!0,e.reactivateAfter===1/0){this.remainingTime=1/0;return}let t=e.reactivateAfter;this.startTime=Date.now();let n=()=>{let e=Date.now()-this.startTime,n=Math.max(0,t-e),r=this.formatTime(n);r!==this.lastDisplayedTime&&(this.lastDisplayedTime=r,this.remainingTime=n,this.requestUpdate()),(n<=0||this.state.isActive)&&this.clearCountdown()};n(),this.remainingTime>0&&typeof window<`u`&&(this.intervalId=window.setInterval(n,100))}clearCountdown(){this.intervalId!==null&&(clearInterval(this.intervalId),this.intervalId=null),this.isCountdownActive=!1,this.remainingTime=0,this.lastDisplayedTime=``,this.countdownForElement=null,this.countdownReactivateAfter=0}formatTime(e){if(e===1/0)return`∞`;let t=Math.ceil(e/1e3);if(t<60)return`${t}s`;let n=Math.floor(t/60),r=t%60;if(n<60)return r>0?`${n}m ${r}s`:`${n}m`;let i=Math.floor(n/60),a=n%60;return a>0?`${i}h ${a}m`:`${i}h`}render(){return this.isCountdownActive?this.remainingTime===1/0?n`
+        <button
+          class="reactivate-button"
+          @click="${this.handleTimerClick}"
+          title="Click to reactivate manually"
+        >
+          <span class="countdown-time infinity">∞</span>
+        </button>
+      `:this.remainingTime<=0?n``:n`
+      <button
+        class="reactivate-button"
+        @click="${this.handleTimerClick}"
+        title="Click to reactivate immediately"
+      >
+        <span class="countdown-time clickable">${this.formatTime(this.remainingTime)}</span>
+      </button>
+    `:n``}};_([i({attribute:!1}),g(`design:type`,Object)],T.prototype,`element`,void 0),_([i({attribute:!1}),g(`design:type`,Object)],T.prototype,`state`,void 0),_([o(),g(`design:type`,Number)],T.prototype,`remainingTime`,void 0),_([o(),g(`design:type`,Boolean)],T.prototype,`isCountdownActive`,void 0),T=_([r(`reactivate-countdown`)],T);let E=class extends e{constructor(...e){super(...e),this.isExpanded=!1,this.currentDeviceStrategy=`mouse`,this._abortController=null,this.handleUnregister=e=>{e.stopPropagation(),s.instance.unregister(this.element,`devtools`)},this.handleToggleEnabled=e=>{e.stopPropagation(),s.instance.updateElementOptions(this.element,{enabled:!this.state.isEnabled})}}static{this.styles=[t`
+      :host {
+        display: block;
+      }
+
+      .element-wrapper {
+        display: block;
+      }
+
+      .element-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .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);
+      }
+
+      .reason-tags {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 7px;
+        flex-shrink: 0;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 10px;
+      }
+
+      .reason-tag {
+        white-space: nowrap;
+        color: color-mix(in srgb, var(--reason-color) 80%, #fff);
+      }
+
+      .reason-tag::before {
+        content: "/";
+        margin-right: 3px;
+        color: #555;
+      }
+
+      .status-indicator.touch-device {
+        background-color: #ba68c8;
+        box-shadow: 0 0 0 2px rgba(186, 104, 200, 0.4);
+      }
+
+      .unregister-button,
+      .toggle-enabled-button,
+      .enable-button {
+        all: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        padding: 1px;
+        cursor: pointer;
+        color: #999;
+      }
+
+      .unregister-button svg,
+      .toggle-enabled-button svg,
+      .enable-button svg {
+        width: 12px;
+        height: 12px;
+      }
+
+      .unregister-button:hover {
+        background-color: rgba(255, 107, 107, 0.1);
+        color: #ff6b6b;
+      }
+
+      .toggle-enabled-button:hover {
+        background-color: rgba(255, 165, 0, 0.1);
+        color: #ffa726;
+      }
+
+      .enable-button:hover {
+        background-color: rgba(76, 175, 80, 0.1);
+        color: #4caf50;
+      }
+
+      .element-name {
+        flex-grow: 1;
+        min-width: 0;
+        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;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.currentDeviceStrategy=s.instance.getManagerData.currentDeviceStrategy,s.instance.addEventListener(`deviceStrategyChanged`,e=>{this.currentDeviceStrategy=e.newStrategy},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getInactiveReasons(){let e=[];return this.state.isEnabled||e.push({label:`disabled`,color:`#9e9e9e`,description:`Element is disabled, so its callback won't run until you re-enable it.`}),this.state.isParked&&e.push({label:`parked`,color:`#7986cb`,description:`Element is detached from the DOM and parked: kept registered but inactive until it reconnects.`}),this.state.isLimitedConnection&&e.push({label:`limited`,color:`#ffb74d`,description:`Element is on a limited connection (e.g. Save-Data or slow network), so prediction is paused.`}),this.state.isEnabled&&!this.state.isParked&&!this.state.isLimitedConnection&&!this.state.isActive&&this.state.isPredicted&&e.push({label:`fired`,color:`#4dd0e1`,description:`Callback already fired. Stays inactive until reactivated (never, unless reactivateAfter is set).`}),e}getBorderColor(){return this.state.isCallbackRunning?`#ffeb3b`:this.state.isActive?this.currentDeviceStrategy===`touch`?`#ba68c8`:this.state.isIntersectingWithViewport?`#4caf50`:`#666`:`#999`}getStatusIndicatorClass(){return this.state.isCallbackRunning?`prefetching`:this.state.isActive?this.currentDeviceStrategy===`touch`?`touch-device`:this.state.isIntersectingWithViewport?`visible`:`hidden`:`inactive`}getStatusText(){if(this.state.isCallbackRunning)return`callback active`;if(!this.state.isActive){let e=this.getInactiveReasons();return e.length?`inactive: ${e.map(e=>e.label).join(`, `)}`:`inactive`}return(this.state.isIntersectingWithViewport?`in viewport`:`not in viewport`)+(this.currentDeviceStrategy===`touch`?` (touch device)`:``)}formatElementDetails(){return this.isExpanded?JSON.stringify({...this.state,status:this.getStatusText()},null,2):``}render(){let e=!this.state.isIntersectingWithViewport&&this.currentDeviceStrategy!==`touch`,t=this.getInactiveReasons();return n`
+      <div class="element-wrapper ${e?`not-visible`:``}">
+        <expandable-item
+          .borderColor=${this.getBorderColor()}
+          .showCopyButton=${!0}
+          .itemId=${this.state.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.state.isCallbackRunning?`callback-active`:this.state.isActive?``:`callback-inactive`}"
+            >
+              ${this.state.name||`unnamed`}
+            </span>
+            ${t.length?n`
+                  <span class="reason-tags">
+                    ${t.map(e=>n`<span
+                          class="reason-tag"
+                          style="--reason-color: ${e.color}"
+                          title="${e.label}: ${e.description}"
+                          >${e.label}</span
+                        >`)}
+                  </span>
+                `:``}
+            ${this.state.isEnabled?n`
+                  <reactivate-countdown .element=${this.element} .state=${this.state}>
+                  </reactivate-countdown>
+                  <button
+                    class="toggle-enabled-button"
+                    @click="${this.handleToggleEnabled}"
+                    title="Disable element"
+                  >
+                    ${le}
+                  </button>
+                `:n`
+                  <button
+                    class="enable-button"
+                    @click="${this.handleToggleEnabled}"
+                    title="Enable element"
+                  >
+                    ${h}
+                  </button>
+                `}
+            <button
+              class="unregister-button"
+              @click="${this.handleUnregister}"
+              title="Unregister element"
+            >
+              ${ce}
+            </button>
+          </div>
+          <div slot="details">${this.formatElementDetails()}</div>
+        </expandable-item>
+      </div>
+    `}};_([i({attribute:!1}),g(`design:type`,Object)],E.prototype,`element`,void 0),_([i({attribute:!1}),g(`design:type`,Object)],E.prototype,`state`,void 0),_([i(),g(`design:type`,Boolean)],E.prototype,`isExpanded`,void 0),_([i(),g(`design:type`,Object)],E.prototype,`onToggle`,void 0),_([o(),g(`design:type`,String)],E.prototype,`currentDeviceStrategy`,void 0),E=_([r(`single-element`)],E);var D,O;let k=class extends e{static{this.styles=t`
+    :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;
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .section-header:hover {
+      opacity: 0.8;
+    }
+
+    .section-header::before {
+      content: "▼";
+      display: inline-block;
+      transition: transform 0.15s ease;
+      font-size: 10px;
+    }
+
+    .section-header.collapsed::before {
+      transform: rotate(-90deg);
+    }
+
+    .section-header.active {
+      color: #e8e8e8;
+    }
+
+    .section-header.inactive {
+      color: #999;
+    }
+  `}get hitCount(){return s.instance.getManagerData.globalCallbackHits}constructor(){super(),this.elementListItems=new Map,this.noContentMessage=`No Elements Registered To The Foresight Manager`,this.expandedElementIds=new Set,this.activeSectionCollapsed=!1,this.inactiveSectionCollapsed=!1,this._abortController=null,this._elementSubscriptions=new Map,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 n=e.element.compareDocumentPosition(t.element);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0},this.sortOrder=$.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:`visibility`,label:`Visibility`,title:`Sort by Visibility`,icon:f},{value:`documentOrder`,label:`Document Order`,title:`Sort by Document Order`,icon:ne},{value:`insertionOrder`,label:`Insertion Order`,title:`Sort by Insertion Order`,icon:re}]}_generateHitsChipTitle(e){let t=[];t.push(`Total Callback Hits: ${e.total}`),t.push(``);let n=e.mouse.trajectory+e.mouse.hover,r=e.scroll.up+e.scroll.down+e.scroll.left+e.scroll.right,i=e.tab.forwards+e.tab.reverse;t.push(`Desktop Strategy`),n>0?t.push(`   Mouse (${n}): ${e.mouse.trajectory} trajectory, ${e.mouse.hover} hover`):t.push(`   Mouse: No hits`),r>0?t.push(`   Scroll (${r}): Up ${e.scroll.up}, Down ${e.scroll.down}, Left ${e.scroll.left}, Right ${e.scroll.right}`):t.push(`   Scroll: No hits`),i>0?t.push(`   Tab (${i}): ${e.tab.forwards} forward, ${e.tab.reverse} reverse`):t.push(`   Tab: No hits`),t.push(``);let a=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`),a===0&&n+r+i===0&&(t.push(``),t.push(`Interact with registered elements to see callback statistics`)),t.join(`
+`)}_subscribeToElement(e){if(this._elementSubscriptions.has(e))return;let t=s.instance.subscribeToElement(e,()=>{let t=s.instance.registeredElements.get(e);!t||!t.isRegistered||(this._pendingElementUpdates.set(e,t),this._scheduleDebouncedUpdate())});t&&this._elementSubscriptions.set(e,t)}_unsubscribeFromElement(e){this._elementSubscriptions.get(e)?.(),this._elementSubscriptions.delete(e)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager();for(let e of this.elementListItems.keys())this._subscribeToElement(e);s.instance.addEventListener(`elementRegistered`,e=>{this.elementListItems.set(e.element,e.state),this._subscribeToElement(e.element),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),s.instance.addEventListener(`elementUnregistered`,e=>{this._unsubscribeFromElement(e.element),this.elementListItems.delete(e.element),this._pendingElementUpdates.delete(e.element),this.elementListItems.size||(this.noContentMessage=`No Elements Registered To The Foresight Manager`),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),s.instance.addEventListener(`callbackInvoked`,e=>{this._pendingElementUpdates.set(e.element,e.state),this._scheduleDebouncedUpdate()},{signal:e}),s.instance.addEventListener(`callbackCompleted`,()=>{this.requestUpdate()},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null;for(let e of this._elementSubscriptions.values())e();this._elementSubscriptions.clear(),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){let n=this.elementListItems.get(e);(!n||n.isActive!==t.isActive||n.isIntersectingWithViewport!==t.isIntersectingWithViewport)&&(this._elementsCacheDirty=!0),this.elementListItems.set(e,t)}this._pendingElementUpdates.clear(),this.requestUpdate()}}updateElementListFromManager(){this.elementListItems=new Map(s.instance.registeredElements),this._elementsCacheDirty=!0}getSortedElements(){let e=Array.from(this.elementListItems,([e,t])=>({element:e,state:t}));switch(this.sortOrder){case`insertionOrder`:return e;case`documentOrder`:return e.sort(this.sortByDocumentPosition);case`visibility`:return e.sort((e,t)=>e.state.isIntersectingWithViewport===t.state.isIntersectingWithViewport?this.sortByDocumentPosition(e,t):e.state.isIntersectingWithViewport?-1:1);default:return this.sortOrder,e}}_recomputeElementsCache(){if(!this._elementsCacheDirty)return;let e=[],t=[];for(let n of this.getSortedElements())n.state.isActive?e.push(n.element):t.push(n.element);this._cachedActiveElements=e,this._cachedInactiveElements=t,this._elementsCacheDirty=!1}get activeElements(){return this._recomputeElementsCache(),this._cachedActiveElements}get inactiveElements(){return this._recomputeElementsCache(),this._cachedInactiveElements}renderElementSection(e,t,r,i,a){return r.length===0?``:n`
+      <div class="element-section">
+        <h3
+          class="section-header ${t} ${i?`collapsed`:``}"
+          @click=${a}
+        >
+          ${e} (${r.length})
+        </h3>
+        ${i?``:c(r,e=>this.elementListItems.get(e)?.id??``,e=>{let t=this.elementListItems.get(e);return t?n`
+                  <single-element
+                    .element=${e}
+                    .state=${t}
+                    .isExpanded=${this.expandedElementIds.has(t.id)}
+                    .onToggle=${this.handleElementToggle}
+                  >
+                  </single-element>
+                `:``})}
+      </div>
+    `}render(){return n`
+      <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.renderElementSection(`Active Elements`,`active`,this.activeElements,this.activeSectionCollapsed,()=>{this.activeSectionCollapsed=!this.activeSectionCollapsed})}
+        ${this.renderElementSection(`Inactive Elements`,`inactive`,this.inactiveElements,this.inactiveSectionCollapsed,()=>{this.inactiveSectionCollapsed=!this.inactiveSectionCollapsed})}
+      </tab-content>
+    `}};_([o(),g(`design:type`,Array)],k.prototype,`sortDropdown`,void 0),_([o(),g(`design:type`,Object)],k.prototype,`sortOrder`,void 0),_([o(),g(`design:type`,typeof(D=typeof Map<`u`&&Map)==`function`?D:Object)],k.prototype,`elementListItems`,void 0),_([o(),g(`design:type`,String)],k.prototype,`noContentMessage`,void 0),_([o(),g(`design:type`,typeof(O=typeof Set<`u`&&Set)==`function`?O:Object)],k.prototype,`expandedElementIds`,void 0),_([o(),g(`design:type`,Object)],k.prototype,`activeSectionCollapsed`,void 0),_([o(),g(`design:type`,Object)],k.prototype,`inactiveSectionCollapsed`,void 0),k=_([r(`element-tab`),g(`design:paramtypes`,[])],k);let A=class extends e{constructor(...e){super(...e),this.activeTab=`settings`,this.tabs=[`settings`,`elements`,`logs`]}static{this.styles=t`
+    .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;
+    }
+  `}_handleTabClick(e){this.dispatchEvent(new CustomEvent(`tab-change`,{detail:{tab:e},bubbles:!0,composed:!0}))}render(){return n`
+      <div class="tab-selector-wrapper">
+        ${this.tabs.map(e=>n`
+            <button
+              class="tab-button ${this.activeTab===e?`active`:``}"
+              @click="${()=>this._handleTabClick(e)}"
+              data-tab="${e}"
+            >
+              ${e.charAt(0).toUpperCase()+e.slice(1)}
+            </button>
+          `)}
+      </div>
+    `}};_([i({type:String}),g(`design:type`,Object)],A.prototype,`activeTab`,void 0),A=_([r(`tab-selector`)],A);let j=class extends x{constructor(...e){super(...e),this.selectedValues=[]}static{this.styles=[...x.styles,t`
+      .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;
+      }
+    `]}_handleOptionClick(e){let t=this.selectedValues.includes(e.value);t?this.selectedValues=this.selectedValues.filter(t=>t!==e.value):this.selectedValues=[...this.selectedValues,e.value];let n=!t;this.onSelectionChange?.(e.value,n)}_getTriggerIcon(){return p}_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 n`
+      <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(e=>n`
+              <button
+                value="${e.value}"
+                title="${e.title}"
+                class="${this._isOptionSelected(e)?`active`:``}"
+                @click="${()=>this._handleOptionClick(e)}"
+                role="menuitem"
+              >
+                ${e.label}
+              </button>
+            `)}
+        </div>
+      </div>
+    `}};_([i({type:Array}),g(`design:type`,Array)],j.prototype,`selectedValues`,void 0),_([i(),g(`design:type`,Function)],j.prototype,`onSelectionChange`,void 0),j=_([r(`multi-select-dropdown`)],j);const ue=(e,t)=>{let n={};e.eventListeners.forEach((e,t)=>{n[t]=e.length});let r=[];return e.registeredElements.forEach((e,t)=>{r.push({...e,elementInfo:`${t.id?`#${t.id}`:``}${t.className?`.${t.className.replace(/\s+/g,`.`)}`:``}`})}),{type:`managerDataPayload`,warning:`this is a lot easier to view in the console`,logId:t,globalCallbackHits:e.globalCallbackHits,localizedTimestamp:new Date().toLocaleTimeString(),eventListenerCount:n,managerSettings:e.globalSettings,registeredElements:r,loadedModules:e.loadedModules,summary:`${r.length} elements, ${Object.values(n).flat().length} listeners,
+  ${e.globalCallbackHits.total} hits`}},M=(e,t)=>{try{switch(e.type){case`elementRegistered`:return{type:`elementRegistered`,name:e.state.name,id:e.element.id||``,state:e.state,hitslop:e.state.hitSlop,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),meta:e.state.meta,logId:t,summary:e.state.registerCount>1?`${e.state.name} - ${fe(e.state.registerCount)} time`:e.state.name};case`elementUnregistered`:return{type:`elementUnregistered`,name:e.state.name,id:e.element.id||``,meta:e.state.meta,state:e.state,wasLastRegisteredElement:e.wasLastRegisteredElement,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,summary:`${e.state.name} - ${e.unregisterReason}`};case`callbackInvoked`:return{type:`callbackInvoked`,name:e.state.name,hitType:e.hitType,state:e.state,meta:e.state.meta,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,summary:`${e.state.name} - ${e.hitType.kind}`};case`callbackCompleted`:{let n=de(e.state.durationMs||0);return{type:`callbackCompleted`,name:e.state.name,hitType:e.hitType,state:e.state,meta:e.state.meta,wasLastActiveElement:e.wasLastActiveElement,elapsed:n,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,status:e.state.status,errorMessage:e.state.error,summary:`${e.state.name} - ${n}`}}case`mouseTrajectoryUpdate`:return{type:`mouseTrajectoryUpdate`,currentPoint:e.trajectoryPositions?.currentPoint,predictedPoint:e.trajectoryPositions?.predictedPoint,positionCount:e.trajectoryPositions?.positions?.length||0,mousePredictionEnabled:e.predictionEnabled,localizedTimestamp:new Date().toLocaleTimeString(),logId:t,summary:``};case`scrollTrajectoryUpdate`:return{type:`scrollTrajectoryUpdate`,currentPoint:e.currentPoint,predictedPoint:e.predictedPoint,scrollDirection:e.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),logId:t,summary:e.scrollDirection};case`managerSettingsChanged`:return{type:`managerSettingsChanged`,globalSettings:e.managerData?.globalSettings||{},settingsChanged:e.updatedSettings,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,summary:e.updatedSettings.map(e=>e.setting).join(`, `)};case`deviceStrategyChanged`:return{type:`deviceStrategyChanged`,oldStrategy:e.oldStrategy,newStrategy:e.newStrategy,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,summary:`${e.oldStrategy} → ${e.newStrategy}`};default:return{type:`serializationError`,error:`Failed to serialize event data`,errorMessage:JSON.stringify(e),localizedTimestamp:new Date().toLocaleTimeString(),logId:t,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:t,summary:``}}},de=e=>`${(e/1e3).toFixed(4)} s`,fe=e=>{let t=e%100;if(t>=11&&t<=13)return`${e}th`;switch(e%10){case 1:return`${e}st`;case 2:return`${e}nd`;case 3:return`${e}rd`;default:return`${e}th`}},N={elementRegistered:`#2196f3`,callbackInvoked:`#00bcd4`,callbackCompleted:`#4caf50`,elementUnregistered:`#ff9800`,managerSettingsChanged:`#f44336`,mouseTrajectoryUpdate:`#78909c`,scrollTrajectoryUpdate:`#607d8b`,deviceStrategyChanged:`#9c27b0`};var pe=class{constructor(){this.logs=[],this.logIdCounter=0,this.changeListeners=new Set,this.managerListeners=new Map,this.isAttached=!1;let{logging:{logLocation:e,...t}}=$.instance.devtoolsSettings;this.logLocation=e,this.eventsEnabled=t}attach(){if(!this.isAttached){this.isAttached=!0;for(let[e,t]of Object.entries(this.eventsEnabled))t&&this.addManagerListener(e)}}detach(){this.managerListeners.forEach((e,t)=>{s.instance.removeEventListener(t,e)}),this.managerListeners.clear(),this.isAttached=!1}subscribe(e){return this.changeListeners.add(e),()=>this.changeListeners.delete(e)}setLogLocation(e){this.logLocation=e,this.notify()}setEventEnabled(e,t){this.eventsEnabled={...this.eventsEnabled,[e]:t},this.isAttached&&(t?this.addManagerListener(e):this.removeManagerListener(e)),this.notify()}clear(){this.logs=[],this.notify()}logManagerData(){this.logLocation!==`none`&&((this.logLocation===`console`||this.logLocation===`both`)&&console.log(s.instance.getManagerData),(this.logLocation===`controlPanel`||this.logLocation===`both`)&&this.addLog(ue(s.instance.getManagerData,(++this.logIdCounter).toString())))}addManagerListener(e){if(this.managerListeners.has(e))return;let t=t=>{this.handleEvent(e,t)};this.managerListeners.set(e,t),s.instance.addEventListener(e,t)}removeManagerListener(e){let t=this.managerListeners.get(e);t&&(s.instance.removeEventListener(e,t),this.managerListeners.delete(e))}handleEvent(e,t){if(this.logLocation!==`none`){if(this.logLocation===`console`||this.logLocation===`both`){let n=N[e]||`#ffffff`;console.log(`%c[ForesightJS] ${e}`,`color: ${n}; font-weight: bold;`,t)}if(this.logLocation===`controlPanel`||this.logLocation===`both`){let e=M(t,(++this.logIdCounter).toString());if(e.type===`serializationError`){console.error(e.error,e.errorMessage);return}this.addLog(e)}}}addLog(e){this.logs.unshift(e),this.logs.length>100&&this.logs.pop(),this.notify()}notify(){for(let e of this.changeListeners)e()}};let me=null;const P=()=>me??=new pe;let F=class extends e{static{this.styles=[t`
+      :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.
+       */
+    `]}constructor(e){super(),this.isExpanded=!1,this.log=e}updated(e){if(e.has(`log`)&&this.log){let e=this.log,t=e.type===`callbackCompleted`&&`status`in e&&e.status===`error`,n=t?`#f44336`:this.getLogTypeColor(e.type),r=t?`rgba(244, 67, 54, 0.1)`:`transparent`;this.style.setProperty(`--log-color`,n),this.style.setProperty(`--log-background-color`,r)}}serializeLogDataWithoutSummary(e){let{summary:t,...n}=e;return JSON.stringify(n,null,2)}getLogTypeColor(e){return N[e]||`#555`}getEventDisplayName(e){return{elementRegistered:`Registered`,elementUnregistered:`Unregistered`,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;return n`
+      <expandable-item
+        .borderColor=${e.type===`callbackCompleted`&&`status`in e&&e.status===`error`?`#f44336`:this.getLogTypeColor(e.type)}
+        .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>
+    `}};_([i({attribute:!1}),g(`design:type`,Object)],F.prototype,`log`,void 0),_([i({type:Boolean}),g(`design:type`,Boolean)],F.prototype,`isExpanded`,void 0),_([i(),g(`design:type`,Object)],F.prototype,`onToggle`,void 0),F=_([r(`single-log`),g(`design:paramtypes`,[Object])],F);var I;let L=class extends e{static{this.styles=[t`
+      :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;
+      }
+    `]}constructor(){super(),this.store=P(),this.expandedLogIds=new Set,this.noContentMessage=`No logs available`,this._unsubscribeStore=null,this.handleLogLocationChange=e=>{this.store.setLogLocation(e)},this.handleFilterChange=(e,t)=>{this.store.setEventEnabled(e,t)},this.handleLogToggle=e=>{let t=new Set(this.expandedLogIds);t.has(e)?t.delete(e):t.add(e),this.expandedLogIds=t},this.logManagerData=()=>{this.store.logManagerData()},this.logDropdown=[{value:`controlPanel`,label:`Control Panel`,title:`Log only to the control panel`,icon:u},{value:`console`,label:`Console`,title:`Log only to the console`,icon:d},{value:`both`,label:`Both`,title:`Log to both the control panel and the console`,icon:te},{value:`none`,label:`None`,title:`Dont log anywhere`,icon:ee}],this.filterDropdown=[{value:`elementRegistered`,label:`Element Registered`,title:`Show element registration events`,icon:p},{value:`elementUnregistered`,label:`Element Unregistered`,title:`Show element unregistration events`,icon:p},{value:`callbackInvoked`,label:`Callback Invoked`,title:`Show callback invoked events`,icon:p},{value:`callbackCompleted`,label:`Callback Completed`,title:`Show callback completed events`,icon:p},{value:`mouseTrajectoryUpdate`,label:`Mouse Trajectory Update`,title:`Show mouse trajectory update events`,icon:p},{value:`scrollTrajectoryUpdate`,label:`Scroll Trajectory Update`,title:`Show scroll trajectory update events`,icon:p},{value:`managerSettingsChanged`,label:`Manager Settings Changed`,title:`Show manager settings change events`,icon:p},{value:`deviceStrategyChanged`,label:`Strategy Changed`,title:`Show strategy change events`,icon:p}]}getSelectedEventFilters(){return Object.entries(this.store.eventsEnabled).filter(([,e])=>e).map(([e])=>e)}shouldShowPerformanceWarning(){let{logLocation:e,eventsEnabled:t}=this.store,n=e===`console`||e===`both`,r=t.mouseTrajectoryUpdate||t.scrollTrajectoryUpdate;return n&&r}getNoLogsMessage(){return Object.values(this.store.eventsEnabled).filter(Boolean).length===0?`Logging for all events is turned off`:this.store.logLocation===`console`?`No logs to display. Logging location is set to console - check browser console for events.`:this.store.logLocation===`none`?`No logs to display. Logging location is set to none`:`Interact with Foresight to generate events.`}clearLogs(){this.store.clear(),this.expandedLogIds.clear(),this.noContentMessage=`Logs cleared`}connectedCallback(){super.connectedCallback(),this._unsubscribeStore=this.store.subscribe(()=>this.requestUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribeStore?.(),this._unsubscribeStore=null}render(){let e=this.store.logs;return n`
+      <tab-header>
+        <div slot="chips" class="chips-container">
+          <chip-element title="Number of logged events (Max ${100})">
+            ${e.length} events
+          </chip-element>
+        </div>
+        <div slot="actions">
+          ${this.shouldShowPerformanceWarning()?n`
+                <div
+                  class="warning-container"
+                  title="Console logging can be slow with frequent trajectory events.
+Consider using 'Control Panel' only for better performance."
+                >
+                  ${oe}
+                </div>
+              `:``}
+          <single-select-dropdown
+            .dropdownOptions="${this.logDropdown}"
+            .selectedOptionValue="${this.store.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}"
+          >
+            ${se}
+          </button>
+          <button
+            class="single-button"
+            title="Clear all logs"
+            ?disabled="${e.length===0}"
+            @click="${this.clearLogs}"
+          >
+            ${ie}
+          </button>
+        </div>
+      </tab-header>
+      <tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!e.length}>
+        ${e.length===0?n`<div class="no-items">${this.getNoLogsMessage()}</div>`:c(e,e=>e.logId,e=>n`
+                <single-log
+                  .log=${e}
+                  .isExpanded=${this.expandedLogIds.has(e.logId)}
+                  .onToggle=${this.handleLogToggle}
+                ></single-log>
+              `)}
+      </tab-content>
+    `}};_([o(),g(`design:type`,Array)],L.prototype,`logDropdown`,void 0),_([o(),g(`design:type`,Array)],L.prototype,`filterDropdown`,void 0),_([o(),g(`design:type`,typeof(I=typeof Set<`u`&&Set)==`function`?I:Object)],L.prototype,`expandedLogIds`,void 0),_([i(),g(`design:type`,String)],L.prototype,`noContentMessage`,void 0),L=_([r(`log-tab`),g(`design:paramtypes`,[])],L);const R=`points`;let z=class extends e{constructor(...e){super(...e),this.header=``,this.description=``}static{this.styles=[t`
+      .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;
+      }
+    `]}render(){return n`<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>`}};_([i({type:String}),g(`design:type`,String)],z.prototype,`header`,void 0),_([i({type:String}),g(`design:type`,String)],z.prototype,`description`,void 0),z=_([r(`setting-item`)],z);let B=class extends e{constructor(...e){super(...e),this.isChecked=!1,this.header=``,this.description=``,this.setting=`enableMousePrediction`}static{this.styles=[t`
+      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);
+      }
+    `]}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let e=t.checked;String(this.setting).startsWith(`show.`)?this.dispatchEvent(new CustomEvent(`setting-changed`,{detail:{setting:this.setting,value:e},bubbles:!0})):s.instance.alterGlobalSettings({[this.setting]:e})}}render(){return n`<setting-item header=${this.header} description=${this.description}>
+      <input
+        slot="controls"
+        type="checkbox"
+        .checked=${this.isChecked}
+        @change=${this.handleCheckboxChange}
+      />
+    </setting-item>`}};_([i({type:Boolean}),g(`design:type`,Boolean)],B.prototype,`isChecked`,void 0),_([i({type:String}),g(`design:type`,String)],B.prototype,`header`,void 0),_([i({type:String}),g(`design:type`,String)],B.prototype,`description`,void 0),_([i({type:String}),g(`design:type`,Object)],B.prototype,`setting`,void 0),B=_([r(`setting-item-checkbox`)],B);let V=class extends e{constructor(...e){super(...e),this.minValue=0,this.maxValue=100,this.currentValue=50,this.unit=`px`,this.header=``,this.description=``,this.setting=`tabOffset`,this.displayValue=50}static{this.styles=[t`
+      .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);
+      }
+    `]}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 e=parseInt(t.value,10);this.displayValue=e,s.instance.alterGlobalSettings({[this.setting]:e})}}willUpdate(e){super.willUpdate(e),e.has(`currentValue`)&&(this.displayValue=this.currentValue)}render(){return n`<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>`}};_([i({type:Number}),g(`design:type`,Number)],V.prototype,`minValue`,void 0),_([i({type:Number}),g(`design:type`,Number)],V.prototype,`maxValue`,void 0),_([i({type:Number}),g(`design:type`,Number)],V.prototype,`currentValue`,void 0),_([i({type:String}),g(`design:type`,String)],V.prototype,`unit`,void 0),_([i({type:String}),g(`design:type`,String)],V.prototype,`header`,void 0),_([i({type:String}),g(`design:type`,String)],V.prototype,`description`,void 0),_([i({type:String}),g(`design:type`,Object)],V.prototype,`setting`,void 0),_([o(),g(`design:type`,Number)],V.prototype,`displayValue`,void 0),V=_([r(`setting-item-range`)],V);var H;let U=class extends e{static{this.styles=t`
+    :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;
+    }
+  `}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:n`<span>Touch</span>`},{value:`viewport`,label:`Viewport Entry`,title:`Execute callbacks when registered elements enter the viewport`,icon:n`<span>Viewport</span>`},{value:`none`,label:`None`,title:`Disable touch device prediction`,icon:n`<span>None</span>`}],this.minimumConnectionTypeOptions=[{value:`slow-2g`,label:`Slow 2G`,title:`Slow 2G`,icon:n`<span>Slow 2G</span>`},{value:`2g`,label:`2G`,title:`2G`,icon:n`<span>2G</span>`},{value:`3g`,label:`3G`,title:`3G`,icon:n`<span>3G</span>`},{value:`4g`,label:`4G`,title:`4G`,icon:n`<span>4G</span>`}],this.cornerOptions=[{value:`top-left`,label:`Top Left`,title:`Position control panel in top-left corner`,icon:n`<span>↖</span>`},{value:`top-right`,label:`Top Right`,title:`Position control panel in top-right corner`,icon:n`<span>↗</span>`},{value:`bottom-left`,label:`Bottom Left`,title:`Position control panel in bottom-left corner`,icon:n`<span>↙</span>`},{value:`bottom-right`,label:`Bottom Right`,title:`Position control panel in bottom-right corner`,icon:n`<span>↘</span>`}],this._abortController=null,this._handleTouchDeviceStrategyChange=e=>{s.instance.alterGlobalSettings({touchDeviceStrategy:e})},this._handleMinimumConnectionTypeChange=e=>{s.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=$.instance.devtoolsSettings,t=s.instance.getManagerData.globalSettings;this.devtoolsSettings={...e,show:{...e.show}},this.managerSettings=Object.assign({},t),this.currentCorner=this.getCurrentCorner(),this.initialSettings={devtools:{...e,show:{...e.show}},manager:Object.assign({},t)}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;s.instance.addEventListener(`managerSettingsChanged`,e=>{this.managerSettings=e.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){for(let t of[`enableMousePrediction`,`enableTabPrediction`,`enableScrollPrediction`,`trajectoryPredictionTime`,`positionHistorySize`,`tabOffset`,`scrollMargin`,`touchDeviceStrategy`,`minimumConnectionType`]){let n=this.initialSettings.manager[t],r=this.managerSettings[t];n!==r&&e.push({setting:t,oldValue:n,newValue:r})}}_checkDevtoolsSettingsChanges(e){for(let t of l){let n=this.initialSettings.devtools.show[t],r=this.devtoolsSettings.show[t];n!==r&&e.push({setting:`show.${t}`,oldValue:n,newValue:r})}}_handleDevtoolsSettingChange(e){let{setting:t,value:n}=e.detail;if(!t.startsWith(`show.`))return;let r=t.slice(5);l.includes(r)&&(this.devtoolsSettings={...this.devtoolsSettings,show:{...this.devtoolsSettings.show,[r]:n}},$.instance.alterDevtoolsSettings({show:{[r]:n}}),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 n`<tab-content
+        .noContentMessage=${`Loading settings...`}
+        .hasContent=${!1}
+      ></tab-content>`;let e=this.managerSettings;return n`
+      <tab-header>
+        <div slot="chips" class="chips-container">
+          <chip-element .title=${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(e=>`${e.setting}: ${JSON.stringify(e.oldValue)} -> ${JSON.stringify(e.newValue)}`).join(`
+`):`No settings changed from initial values`}> ${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=${R}
+                header="Position History Size"
+                description="How far into the future, in ${R}, 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=${`tabs`}
+                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.show.nameTags}
+                header="Show Name Tags"
+                description="Display name tags over each registered element in the debugger"
+                setting="show.nameTags"
+                @setting-changed=${this._handleDevtoolsSettingChange}
+              ></setting-item-checkbox>
+              <setting-item-checkbox
+                .isChecked=${this.devtoolsSettings.show.elementOverlays}
+                header="Show Element Overlays"
+                description="Render hit-slop boundary overlays around registered elements. Note: turning this off also hides name tags."
+                setting="show.elementOverlays"
+                @setting-changed=${this._handleDevtoolsSettingChange}
+              ></setting-item-checkbox>
+              <setting-item-checkbox
+                .isChecked=${this.devtoolsSettings.show.mouseTrajectory}
+                header="Show Mouse Trajectory"
+                description="Render the predicted mouse trajectory line"
+                setting="show.mouseTrajectory"
+                @setting-changed=${this._handleDevtoolsSettingChange}
+              ></setting-item-checkbox>
+              <setting-item-checkbox
+                .isChecked=${this.devtoolsSettings.show.scrollTrajectory}
+                header="Show Scroll Trajectory"
+                description="Render the predicted scroll trajectory line"
+                setting="show.scrollTrajectory"
+                @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>
+    `}};_([o(),g(`design:type`,Object)],U.prototype,`managerSettings`,void 0),_([o(),g(`design:type`,typeof(H=typeof Readonly<`u`&&Readonly)==`function`?H:Object)],U.prototype,`initialSettings`,void 0),_([o(),g(`design:type`,Object)],U.prototype,`devtoolsSettings`,void 0),_([o(),g(`design:type`,Array)],U.prototype,`changedSettings`,void 0),_([o(),g(`design:type`,Object)],U.prototype,`currentCorner`,void 0),_([o(),g(`design:type`,Array)],U.prototype,`touchDeviceStrategyOptions`,void 0),_([o(),g(`design:type`,Array)],U.prototype,`minimumConnectionTypeOptions`,void 0),_([o(),g(`design:type`,Array)],U.prototype,`cornerOptions`,void 0),U=_([r(`settings-tab`),g(`design:paramtypes`,[])],U);let W=class extends e{static{this.styles=t`
+    .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-content {
+      flex: 1;
+      position: relative;
+    }
+
+    .tab-content > * {
+      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;
+    }
+  `}constructor(){super(),this.isMinimized=$.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=s.instance.getManagerData.currentDeviceStrategy===`touch`}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;P().attach(),s.instance.addEventListener(`deviceStrategyChanged`,e=>{this.isTouchDevice=e.newStrategy===`touch`,e.newStrategy===`touch`&&(this.isWarningDismissed=!1)},{signal:e}),this.addEventListener(`corner-change`,(e=>{this.setCorner(e.detail.corner)}),{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null,P().detach()}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(e){console.warn(`ForesightDevtools: Failed to save tab preference to localStorage:`,e)}}setStoredCorner(e){try{localStorage.setItem(this.localStorageCornerKey,e)}catch(e){console.warn(`ForesightDevtools: Failed to save corner to localStorage:`,e)}}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?`+`:`−`}renderActiveTab(){switch(this.activeTab){case`elements`:return n`<element-tab></element-tab>`;case`settings`:return n`<settings-tab></settings-tab>`;default:return n`<log-tab></log-tab>`}}render(){return n`
+      <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>
+
+        ${this.isMinimized?``:n`
+              <div class="tab-container">
+                <tab-selector
+                  .activeTab="${this.activeTab}"
+                  @tab-change="${this._handleTabChange}"
+                ></tab-selector>
+
+                <div class="tab-content">${this.renderActiveTab()}</div>
+              </div>
+            `}
+      </div>
+    `}};_([o(),g(`design:type`,Object)],W.prototype,`activeTab`,void 0),_([o(),g(`design:type`,Boolean)],W.prototype,`isMinimized`,void 0),_([o(),g(`design:type`,Boolean)],W.prototype,`isTouchDevice`,void 0),_([o(),g(`design:type`,Boolean)],W.prototype,`isWarningDismissed`,void 0),_([o(),g(`design:type`,String)],W.prototype,`corner`,void 0),W=_([r(`control-panel`),g(`design:paramtypes`,[])],W);var G,K,q;let J=class extends e{constructor(...e){super(...e),this.overlayMap=new Map,this.callbackAnimations=new Map,this._elementSubscriptions=new Map,this.showNameTags=!0,this._abortController=null}static{this.styles=[t`
+      /* Anchored to the document origin (initial containing block), not the
+         viewport: overlays are placed in document coordinates so the compositor
+         moves them together with the page content during scroll, instead of
+         JS chasing the scroll position a frame behind. */
+      :host {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+        z-index: 9999;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .slop-area {
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        will-change: transform;
+        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,
+          box-shadow 0.2s ease;
+        pointer-events: none;
+      }
+
+      .slop-area[data-hit="mouse"] {
+        border-color: #3b82f6;
+        background-color: rgba(59, 130, 246, 0.1);
+        animation: glow-mouse 2s ease-in-out infinite;
+      }
+
+      .slop-area[data-hit="scroll"] {
+        border-color: #eab308;
+        background-color: rgba(234, 179, 8, 0.1);
+        animation: glow-scroll 2s ease-in-out infinite;
+      }
+
+      .slop-area[data-hit="tab"] {
+        border-color: #f97316;
+        background-color: rgba(249, 115, 22, 0.1);
+        animation: glow-tab 2s ease-in-out infinite;
+      }
+
+      @keyframes glow-mouse {
+        0% {
+          box-shadow: 0 0 5px 2px rgba(59, 130, 246, 0.3);
+        }
+        50% {
+          box-shadow: 0 0 15px 4px rgba(59, 130, 246, 0.6);
+        }
+        100% {
+          box-shadow: 0 0 5px 2px rgba(59, 130, 246, 0.3);
+        }
+      }
+
+      @keyframes glow-scroll {
+        0% {
+          box-shadow: 0 0 5px 2px rgba(234, 179, 8, 0.3);
+        }
+        50% {
+          box-shadow: 0 0 15px 4px rgba(234, 179, 8, 0.6);
+        }
+        100% {
+          box-shadow: 0 0 5px 2px rgba(234, 179, 8, 0.3);
+        }
+      }
+
+      @keyframes glow-tab {
+        0% {
+          box-shadow: 0 0 5px 2px rgba(249, 115, 22, 0.3);
+        }
+        50% {
+          box-shadow: 0 0 15px 4px rgba(249, 115, 22, 0.6);
+        }
+        100% {
+          box-shadow: 0 0 5px 2px rgba(249, 115, 22, 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;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;s.instance.addEventListener(`elementRegistered`,e=>{this._subscribeToElement(e.element),e.state.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(e.element,e.state)},{signal:e}),s.instance.addEventListener(`elementUnregistered`,e=>{this._unsubscribeFromElement(e.element),this.removeElementOverlay(e.element)},{signal:e});for(let[e,t]of s.instance.registeredElements)this._subscribeToElement(e),t.isIntersectingWithViewport&&t.isActive&&this.createOrUpdateElementOverlay(e,t);s.instance.addEventListener(`callbackInvoked`,e=>{this.highlightElementCallback(e.element,e.hitType)},{signal:e}),s.instance.addEventListener(`callbackCompleted`,e=>{this.unhighlightElementCallback(e.element),this.removeElementOverlay(e.element)},{signal:e})}willUpdate(e){e.has(`showNameTags`)&&this.updateNameTagVisibility(this.showNameTags)}_subscribeToElement(e){if(this._elementSubscriptions.has(e))return;let t=()=>{let t=s.instance.registeredElements.get(e);if(!t||!t.isIntersectingWithViewport||!t.isActive){this.removeElementOverlay(e);return}this.createOrUpdateElementOverlay(e,t)},n=s.instance.subscribeToElement(e,t),r=s.instance.subscribeToElementBounds(e,t);(n||r)&&this._elementSubscriptions.set(e,()=>{n?.(),r?.()})}_unsubscribeFromElement(e){this._elementSubscriptions.get(e)?.(),this._elementSubscriptions.delete(e)}createOverlay(e){let t=document.createElement(`div`);t.className=`slop-area`;let n=document.createElement(`div`);n.className=`name-label`,this.containerElement.appendChild(t),this.containerElement.appendChild(n);let r={nameLabel:n,slopArea:t,lastSlopRect:null,lastRadiusKey:null};return this.overlayMap.set(e,r),r}expandedBorderRadius(e,t){let n=getComputedStyle(e),r=e.getBoundingClientRect(),i=(e,t,n)=>{let[i,a=i]=e.split(` `),o=(e,t)=>{let n=parseFloat(e)||0;return e.endsWith(`%`)?n/100*t:n},s=o(i,r.width),c=o(a,r.height);return[s===0?0:s+t,c===0?0:c+n]},a=i(n.borderTopLeftRadius,t.left,t.top),o=i(n.borderTopRightRadius,t.right,t.top),s=i(n.borderBottomRightRadius,t.right,t.bottom),c=i(n.borderBottomLeftRadius,t.left,t.bottom);return`${a[0]}px ${o[0]}px ${s[0]}px ${c[0]}px / ${a[1]}px ${o[1]}px ${s[1]}px ${c[1]}px`}updateSlopArea(e,t,n,r){let{expandedRect:i}=r,a=i.left+window.scrollX,o=i.top+window.scrollY,s=i.right-i.left,c=i.bottom-i.top,l=e.lastSlopRect;if(l&&l.left===a&&l.top===o&&l.width===s&&l.height===c)return;e.lastSlopRect={left:a,top:o,width:s,height:c};let{style:u}=e.slopArea;u.transform=`translate3d(${a}px, ${o}px, 0)`,u.width=`${s}px`,u.height=`${c}px`;let d=`${s}|${c}|${n.top}|${n.right}|${n.bottom}|${n.left}`;e.lastRadiusKey!==d&&(e.lastRadiusKey=d,u.borderRadius=this.expandedBorderRadius(t,n))}updateNameLabel(e,t,n){let{nameLabel:r}=e,{expandedRect:i}=n;!this.showNameTags||t.name===`unnamed`?r.style.display=`none`:(r.textContent=t.name,r.style.display=`block`,r.style.transform=`translate3d(${i.left+window.scrollX}px, ${i.top-25+window.scrollY}px, 0)`)}createOrUpdateElementOverlay(e,t){let n=s.instance.getElementBounds(e);if(!n)return;let r=this.overlayMap.get(e);r||=this.createOverlay(e),this.updateSlopArea(r,e,t.hitSlop,n),this.updateNameLabel(r,t,n)}removeElementOverlay(e){let t=this.overlayMap.get(e);t&&(t.nameLabel.remove(),t.slopArea.remove(),this.overlayMap.delete(e)),this.clearCallbackAnimationTimeout(e)}clearCallbackAnimationTimeout(e){let t=this.callbackAnimations.get(e);t&&(clearTimeout(t.timeoutId),this.callbackAnimations.delete(e))}highlightElementCallback(e,t){this.clearCallbackAnimationTimeout(e);let n=this.overlayMap.get(e);if(n)switch(t.kind){case`mouse`:case`scroll`:case`tab`:n.slopArea.dataset.hit=t.kind;break;case`touch`:break;case`viewport`:break;default:}}unhighlightElementCallback(e){let t=setTimeout(()=>{let t=this.overlayMap.get(e);t&&delete t.slopArea.dataset.hit,this.callbackAnimations.delete(e)},400);this.callbackAnimations.set(e,{element:e,timeoutId:t})}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let n=t.nameLabel;e?n.style.display=`block`:n.style.display=`none`})}disconnectedCallback(){super.disconnectedCallback();for(let e of this._elementSubscriptions.values())e();this._elementSubscriptions.clear(),this.callbackAnimations.forEach(e=>{clearTimeout(e.timeoutId)}),this.callbackAnimations.clear();for(let e of this.overlayMap.values())e.nameLabel.remove(),e.slopArea.remove();this.overlayMap.clear(),this._abortController?.abort(),this._abortController=null}render(){return n` <div id="overlays-container"></div> `}};_([o(),g(`design:type`,typeof(G=typeof Map<`u`&&Map)==`function`?G:Object)],J.prototype,`overlayMap`,void 0),_([o(),g(`design:type`,typeof(K=typeof Map<`u`&&Map)==`function`?K:Object)],J.prototype,`callbackAnimations`,void 0),_([a(`#overlays-container`),g(`design:type`,typeof(q=typeof HTMLElement<`u`&&HTMLElement)==`function`?q:Object)],J.prototype,`containerElement`,void 0),_([i({type:Boolean}),g(`design:type`,Object)],J.prototype,`showNameTags`,void 0),J=_([r(`element-overlays`)],J);let Y=class extends e{constructor(...e){super(...e),this._abortController=new AbortController,this._lineEl=null,this._mousePredictionIsEnabled=s.instance.getManagerData.globalSettings.enableMousePrediction,this._isVisible=!1,this.handleTrajectoryReset=e=>{(`wasLastActiveElement`in e&&e.wasLastActiveElement||`wasLastRegisteredElement`in e&&e.wasLastRegisteredElement)&&(this._setVisible(!1),this._lineEl&&(this._lineEl.style.transform=`translate3d(0px, 0px, 0) rotate(0deg)`,this._lineEl.style.width=`0px`))},this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||this._setVisible(!1)},this.handleTrajectoryUpdate=e=>{if(!this._mousePredictionIsEnabled)return;this._setVisible(!0);let{currentPoint:t,predictedPoint:n}=e.trajectoryPositions,r=n.x-t.x,i=n.y-t.y,a=Math.sqrt(r*r+i*i),o=Math.atan2(i,r)*57.29577951308232;this._lineEl&&(this._lineEl.style.transform=`translate3d(${t.x}px, ${t.y}px, 0) rotate(${o}deg)`,this._lineEl.style.width=`${a}px`)}}static{this.styles=[t`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .trajectory-line {
+        display: none;
+        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));
+      }
+    `]}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;s.instance.addEventListener(`callbackCompleted`,this.handleTrajectoryReset,{signal:e}),s.instance.addEventListener(`elementUnregistered`,this.handleTrajectoryReset,{signal:e}),s.instance.addEventListener(`mouseTrajectoryUpdate`,this.handleTrajectoryUpdate,{signal:e}),s.instance.addEventListener(`scrollTrajectoryUpdate`,()=>{this._setVisible(!1)},{signal:e}),s.instance.addEventListener(`managerSettingsChanged`,this.handleSettingsChange,{signal:e})}firstUpdated(){this._lineEl=this.shadowRoot.querySelector(`.trajectory-line`)}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}_setVisible(e){this._isVisible!==e&&(this._isVisible=e,this._lineEl&&(this._lineEl.style.display=e?`block`:`none`))}render(){return n`<div class="trajectory-line"></div>`}};Y=_([r(`mouse-trajectory`)],Y);let X=class extends e{constructor(...e){super(...e),this._abortController=new AbortController,this._lineEl=null,this._scrollPredictionIsEnabled=s.instance.getManagerData.globalSettings.enableScrollPrediction,this._scrollMargin=s.instance.getManagerData.globalSettings.scrollMargin,this._isVisible=!1,this._latestCurrentPoint=null,this._latestPredictedPoint=null,this._isUpdateScheduled=!1,this.handleTrajectoryReset=e=>{(`wasLastActiveElement`in e&&e.wasLastActiveElement||`wasLastRegisteredElement`in e&&e.wasLastRegisteredElement)&&(this._setVisible(!1),this._lineEl&&(this._lineEl.style.transform=`translate(0px, 0px) rotate(0deg)`))},this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||this._setVisible(!1);let n=e.updatedSettings.find(e=>e.setting===`scrollMargin`);n&&(this._scrollMargin=n.newValue,this._lineEl&&(this._lineEl.style.width=`${this._scrollMargin}px`))},this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._setVisible(!0),this._latestCurrentPoint=e.currentPoint,this._latestPredictedPoint=e.predictedPoint,this._isUpdateScheduled||(this._isUpdateScheduled=!0,this.applyScrollTransform()))},this.applyScrollTransform=()=>{if(!this._latestCurrentPoint||!this._latestPredictedPoint){this._isUpdateScheduled=!1;return}let e=this._latestPredictedPoint.x-this._latestCurrentPoint.x,t=this._latestPredictedPoint.y-this._latestCurrentPoint.y,n=Math.atan2(t,e)*180/Math.PI;this._lineEl&&(this._lineEl.style.transform=`translate(${this._latestCurrentPoint.x}px, ${this._latestCurrentPoint.y}px) rotate(${n}deg)`),this._isUpdateScheduled=!1}}static{this.styles=[t`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .scroll-trajectory-line {
+        display: none;
+        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));
+        }
+      }
+    `]}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;s.instance.addEventListener(`scrollTrajectoryUpdate`,this.handleScrollUpdate,{signal:e}),s.instance.addEventListener(`mouseTrajectoryUpdate`,()=>{this._setVisible(!1)},{signal:e}),s.instance.addEventListener(`callbackCompleted`,this.handleTrajectoryReset,{signal:e}),s.instance.addEventListener(`elementUnregistered`,this.handleTrajectoryReset,{signal:e}),s.instance.addEventListener(`managerSettingsChanged`,this.handleSettingsChange,{signal:e})}firstUpdated(){this._lineEl=this.shadowRoot.querySelector(`.scroll-trajectory-line`)}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}_setVisible(e){this._isVisible!==e&&(this._isVisible=e,this._lineEl&&(this._lineEl.style.display=e?`block`:`none`))}render(){return n`<div class="scroll-trajectory-line" style="width: ${this._scrollMargin}px"></div>`}};X=_([r(`scroll-trajectory`)],X);let Z=class extends e{constructor(...e){super(...e),this._abortController=null,this._strategy=s.instance.getManagerData.currentDeviceStrategy,this.showElementOverlays=!0,this.showMouseTrajectory=!0,this.showScrollTrajectory=!0,this.showNameTags=!0,this.handleDeviceStrategyChange=e=>this._strategy=e.newStrategy}static{this.styles=[t`
+      :host {
+        display: block;
+      }
+      #overlay-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 9999;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;s.instance.addEventListener(`deviceStrategyChanged`,this.handleDeviceStrategyChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}render(){return n`
+      <div id="overlay-container">
+        ${this._strategy===`mouse`?n`
+              <mouse-trajectory ?hidden=${!this.showMouseTrajectory}></mouse-trajectory>
+              <scroll-trajectory ?hidden=${!this.showScrollTrajectory}></scroll-trajectory>
+            `:``}
+      </div>
+      <!-- element-overlays positions itself in document coordinates and must stay
+           outside #overlay-container: the fixed container would become its
+           containing block and pin it back to the viewport. -->
+      ${this._strategy===`mouse`?n`
+            <element-overlays
+              ?hidden=${!this.showElementOverlays}
+              .showNameTags=${this.showNameTags}
+            ></element-overlays>
+          `:``}
+    `}};_([o(),g(`design:type`,String)],Z.prototype,`_strategy`,void 0),_([i({type:Boolean}),g(`design:type`,Object)],Z.prototype,`showElementOverlays`,void 0),_([i({type:Boolean}),g(`design:type`,Object)],Z.prototype,`showMouseTrajectory`,void 0),_([i({type:Boolean}),g(`design:type`,Object)],Z.prototype,`showScrollTrajectory`,void 0),_([i({type:Boolean}),g(`design:type`,Object)],Z.prototype,`showNameTags`,void 0),Z=_([r(`debug-overlay`)],Z);var Q;let $=class extends e{static{Q=this}static{this.styles=[t`
+      :host {
+        display: block;
+      }
+    `]}static{this._instance=null}constructor(){super(),this.isInitialized=!1,this.devtoolsSettings={show:{controlPanel:!0,nameTags:!0,elementOverlays:!0,mouseTrajectory:!0,scrollTrajectory:!0},isControlPanelDefaultMinimized:!1,sortElementList:`visibility`,logging:{logLocation:`controlPanel`,callbackCompleted:!0,callbackInvoked:!0,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1,deviceStrategyChanged:!0}}}static createAndAppendInstance(){typeof window>`u`||typeof document>`u`||(Q._instance=document.createElement(`foresight-devtools`),document.body.appendChild(Q._instance))}static initialize(e){if(Q._instance||Q.createAndAppendInstance(),!Q._instance)return Q._instance;let t=Q._instance;return t.isInitialized=!0,t.alterDevtoolsSettings(e),t}static get instance(){return Q._instance?Q._instance:Q.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)}updateShowSetting(e,t){return this.shouldUpdateSetting(t,this.devtoolsSettings.show[e])?(this.devtoolsSettings.show[e]=t,!0):!1}setAllShow(e){let t=Object.fromEntries(l.map(t=>[t,e]));this.alterDevtoolsSettings({show:t})}alterDevtoolsSettings(e){if(e!==void 0){if(e.show){let t=!1;for(let n of l)this.updateShowSetting(n,e.show[n])&&(t=!0);t&&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(`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(){if(!this.isInitialized)return n``;let{show:e}=this.devtoolsSettings;return n`
+      ${e.controlPanel?n`<control-panel></control-panel>`:``}
+      <debug-overlay
+        .showElementOverlays=${e.elementOverlays}
+        .showMouseTrajectory=${e.mouseTrajectory}
+        .showScrollTrajectory=${e.scrollTrajectory}
+        .showNameTags=${e.nameTags}
+      ></debug-overlay>
+    `}};_([o(),g(`design:type`,Object)],$.prototype,`isInitialized`,void 0),$=Q=_([r(`foresight-devtools`),g(`design:paramtypes`,[])],$);export{$ as ForesightDevtools};
+//# sourceMappingURL=index.mjs.map