1!function(){try{var e="u">typeof window?window:"u">typeof global?global:"u">typeof globalThis?globalThis:"u">typeof self?self:{};e._sentryModuleMetadata=e._sentryModuleMetadata||{},e._sentryModuleMetadata[(new e.Error).stack]=function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];if(null!=i)for(var n in i)i.hasOwnProperty(n)&&(e[n]=i[n])}return e}({},e._sentryModuleMetadata[(new e.Error).stack],{"_sentryBundlerPluginAppKey:takumi-application":!0});var t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="f22beaf2-15d7-467d-9a70-5120464ca872",e._sentryDebugIdIdentifier="sentry-dbid-f22beaf2-15d7-467d-9a70-5120464ca872")}catch(e){}}();"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7102],{87102:(e,t,i)=>{i.d(t,{U:()=>tt});let n=globalThis,o=n.ShadowRoot&&(void 0===n.ShadyCSS||n.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),a=new WeakMap;class r{constructor(e,t,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(o&&void 0===e){let i=void 0!==t&&1===t.length;i&&(e=a.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&a.set(t,e))}return e}toString(){return this.cssText}}let l=(e,...t)=>new r(1===e.length?e[0]:t.reduce((t,i,n)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[n+1],e[0]),e,s),c=o?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t,i="";for(let t of e.cssRules)i+=t.cssText;return new r("string"==typeof(t=i)?t:t+"",void 0,s)})(e):e,{is:d,defineProperty:h,getOwnPropertyDescriptor:p,getOwnPropertyNames:g,getOwnPropertySymbols:u,getPrototypeOf:m}=Object,b=globalThis,v=b.trustedTypes,y=v?v.emptyScript:"",w=b.reactiveElementPolyfillSupport,f={toAttribute(e,t){switch(t){case Boolean:e=e?y:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},x=(e,t)=>!d(e,t),C={attribute:!0,type:String,converter:f,reflect:!1,useDefault:!1,hasChanged:x};Symbol.metadata??=Symbol("metadata"),b.litPropertyMetadata??=new WeakMap;class k extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=C){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let i=Symbol(),n=this.getPropertyDescriptor(e,i,t);void 0!==n&&h(this.prototype,e,n)}}static getPropertyDescriptor(e,t,i){let{get:n,set:o}=p(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:n,set(t){let s=n?.call(this);o?.call(this,t),this.requestUpdate(e,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??C}static _$Ei(){if(this.hasOwnProperty("elementProperties"))return;let e=m(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty("finalized"))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty("properties")){let e=this.properties;for(let t of[...g(e),...u(e)])this.createProperty(t,e[t])}let e=this[Symbol.metadata];if(null!==e){let t=litPropertyMetadata.get(e);if(void 0!==t)for(let[e,i]of t)this.elementProperties.set(e,i)}for(let[e,t]of(this._$Eh=new Map,this.elementProperties)){let i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e))for(let i of new Set(e.flat(1/0).reverse()))t.unshift(c(i));else void 0!==e&&t.push(c(e));return t}static _$Eu(e,t){let i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e
1=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map;for(let t of this.constructor.elementProperties.keys())this.hasOwnProperty(t)&&(e.set(t,this[t]),delete this[t]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,t)=>{if(o)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let i of t){let t=document.createElement("style"),o=n.litNonce;void 0!==o&&t.setAttribute("nonce",o),t.textContent=i.cssText,e.appendChild(t)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){let i=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,i);if(void 0!==n&&!0===i.reflect){let o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null}}_$AK(e,t){let i=this.constructor,n=i._$Eh.get(e);if(void 0!==n&&this._$Em!==n){let e=i.getPropertyOptions(n),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=n;let s=o.fromAttribute(t,e.type);this[n]=s??this._$Ej?.get(n)??s,this._$Em=null}}requestUpdate(e,t,i,n=!1,o){if(void 0!==e){let s=this.constructor;if(!1===n&&(o=this[e]),!(((i??=s.getPropertyOptions(e)).hasChanged??x)(o,t)||i.useDefault&&i.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(s._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:n,wrapped:o},s){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,s??t??this[e]),!0!==o||void 0!==s)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===n&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}let e=this.constructor.elementProperties;if(e.size>0)for(let[t,i]of e){let{wrapped:e}=i,n=this[t];!0!==e||this._$AL.has(t)||void 0===n||this.C(t,void 0,i,n)}}let e=!1,t=this._$AL;try{(e=this.shouldUpdate(t))?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}}k.elementStyles=[],k.shadowRootOptions={mode:"open"},k.elementProperties=new Map,k.finalized=new Map,w?.({ReactiveElement:k}),(b.reactiveElementVersions??=[]).push("2.1.2");let $=globalThis,S=e=>e,_=$.trustedTypes,E=_?_.createPolicy("lit-html",{createHTML:e=>e}):void 0,T="$lit$",D=`lit$${Math.random().toFixed(9).slice(2)}$`,A="?"+D,L=`<${A}>`,M=document,O=()=>M.createComment(""),I=e=>null===e||"object"!=typeof e&&"function"!=typeof e,P=Array.isArray,U="[ \n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,V=/>/g,N=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ 2\f\r"'\`<>=]|("|')|))|$)`,"g"),R=/'/g,H=/"/g,B=/^(?:script|style|textarea|title)$/i,X=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),F=X(1),W=(X(2),X(3),Symbol.for("lit-noChange")),q=Symbol.for("lit-nothing"),G=new WeakMap,K=M.createTreeWalker(M,129);function J(e,t){if(!P(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(t):t}class Y{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,s=0;const a=e.length-1,r=this.parts,[l,c]=((e,t)=>{let i=e.length-1,n=[],o,s=2===t?"<svg>":3===t?"<math>":"",a=j;for(let t=0;t<i;t++){let i=e[t],r,l,c=-1,d=0;for(;d<i.length&&(a.lastIndex=d,null!==(l=a.exec(i)));)d=a.lastIndex,a===j?"!--"===l[1]?a=z:void 0!==l[1]?a=V:void 0!==l[2]?(B.test(l[2])&&(o=RegExp("</"+l[2],"g")),a=N):void 0!==l[3]&&(a=N):a===N?">"===l[0]?(a=o??j,c=-1):void 0===l[1]?c=-2:(c=a.lastIndex-l[2].length,r=l[1],a=void 0===l[3]?N:'"'===l[3]?H:R):a===H||a===R?a=N:a===z||a===V?a=j:(a=N,o=void 0);let h=a===N&&e[t+1].startsWith("/>")?" ":"";s+=a===j?i+L:c>=0?(n.push(r),i.slice(0,c)+T+i.slice(c)+D+h):i+D+(-2===c?t:h)}return[J(e,s+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),n]})(e,t);if(this.el=Y.createElement(l,i),K.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=K.nextNode())&&r.length<a;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(T)){const t=c[s++],i=n.getAttribute(e).split(D),a=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:a[2],strings:i,ctor:"."===a[1]?ei:"?"===a[1]?en:"@"===a[1]?eo:et}),n.removeAttribute(e)}else e.startsWith(D)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(B.test(n.tagName)){const e=n.textContent.split(D),t=e.length-1;if(t>0){n.textContent=_?_.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],O()),K.nextNode(),r.push({type:2,index:++o});n.append(e[t],O())}}}else if(8===n.nodeType)if(n.data===A)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(D,e+1));)r.push({type:7,index:o}),e+=D.length-1}o++}}static createElement(e,t){let i=M.createElement("template");return i.innerHTML=e,i}}function Z(e,t,i=e,n){if(t===W)return t;let o=void 0!==n?i._$Co?.[n]:i._$Cl,s=I(t)?void 0:t._$litDirective$;return o?.constructor!==s&&(o?._$AO?.(!1),void 0===s?o=void 0:(o=new s(e))._$AT(e,i,n),void 0!==n?(i._$Co??=[])[n]=o:i._$Cl=
2o),void 0!==o&&(t=Z(e,o._$AS(e,t.values),o,n)),t}class Q{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??M).importNode(t,!0);K.currentNode=n;let o=K.nextNode(),s=0,a=0,r=i[0];for(;void 0!==r;){if(s===r.index){let t;2===r.type?t=new ee(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new es(o,this,e)),this._$AV.push(t),r=i[++a]}s!==r?.index&&(o=K.nextNode(),s++)}return K.currentNode=M,n}p(e){let t=0;for(let i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class ee{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,n){this.type=2,this._$AH=q,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){let i;I(e=Z(this,e,t))?e===q||null==e||""===e?(this._$AH!==q&&this._$AR(),this._$AH=q):e!==this._$AH&&e!==W&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):P(i=e)||"function"==typeof i?.[Symbol.iterator]?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==q&&I(this._$AH)?this._$AA.nextSibling.data=e:this.T(M.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Y.createElement(J(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{let e=new Q(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=G.get(e.strings);return void 0===t&&G.set(e.strings,t=new Y(e)),t}k(e){P(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,i,n=0;for(let o of e)n===t.length?t.push(i=new ee(this.O(O()),this.O(O()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=S(e).nextSibling;S(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class et{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=q,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=q}_$AI(e,t=this,i,n){let o=this.strings,s=!1;if(void 0===o)(s=!I(e=Z(this,e,t,0))||e!==this._$AH&&e!==W)&&(this._$AH=e);else{let n,a,r=e;for(e=o[0],n=0;n<o.length-1;n++)(a=Z(this,r[i+n],t,n))===W&&(a=this._$AH[n]),s||=!I(a)||a!==this._$AH[n],a===q?e=q:e!==q&&(e+=(a??"")+o[n+1]),this._$AH[n]=a}s&&!n&&this.j(e)}j(e){e===q?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ei extends et{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===q?void 0:e}}class en extends et{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==q)}}class eo extends et{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}
2_$AI(e,t=this){if((e=Z(this,e,t,0)??q)===W)return;let i=this._$AH,n=e===q&&i!==q||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==q&&(i===q||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class es{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){Z(this,e)}}let ea=$.litHtmlPolyfillSupport;ea?.(Y,ee),($.litHtmlVersions??=[]).push("3.3.3");let er=globalThis;class el extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{let n=i?.renderBefore??t,o=n._$litPart$;if(void 0===o){let e=i?.renderBefore??null;n._$litPart$=o=new ee(t.insertBefore(O(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}}el._$litElement$=!0,el.finalized=!0,er.litElementHydrateSupport?.({LitElement:el});let ec=er.litElementPolyfillSupport;ec?.({LitElement:el}),(er.litElementVersions??=[]).push("4.2.2");let ed=e=>(t,i)=>{void 0!==i?i.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)},eh={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:x};function ep(e){return(t,i)=>{let n;return"object"==typeof i?((e=eh,t,i)=>{let{kind:n,metadata:o}=i,s=globalThis.litPropertyMetadata.get(o);if(void 0===s&&globalThis.litPropertyMetadata.set(o,s=new Map),"setter"===n&&((e=Object.create(e)).wrapped=!0),s.set(i.name,e),"accessor"===n){let{name:n}=i;return{set(i){let o=t.get.call(this);t.set.call(this,i),this.requestUpdate(n,o,e,!0,i)},init(t){return void 0!==t&&this.C(n,void 0,e,t),t}}}if("setter"===n){let{name:n}=i;return function(i){let o=this[n];t.call(this,i),this.requestUpdate(n,o,e,!0,i)}}throw Error("Unsupported decorator location: "+n)})(e,t,i):(n=t.hasOwnProperty(i),t.constructor.createProperty(i,e),n?Object.getOwnPropertyDescriptor(t,i):void 0)}}function eg(e){return ep({...e,state:!0,attribute:!1})}let eu=e=>(...t)=>({_$litDirective$:e,values:t});class em{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}let eb=eu(class extends em{constructor(e){if(super(e),1!==e.type||"class"!==e.name||e.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this.st){for(let i in this.st=new Set,void 0!==e.strings&&(this.nt=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e))),t)t[i]&&!this.nt?.has(i)&&this.st.add(i);return this.render(t)}let i=e.element.classList;for(let e of this.st)e in t||(i.remove(e),this.st.delete(e));for(let e in t){let n=!!t[e];n===this.st.has(e)||this.nt?.has(e)||(n?(i.add(e),this.st.add(e)):(i.remove(e),this.st.delete(e)))}return W}});var ev=i(58493);function*ey(e,t){if(void 0!==e){let i=0;for(let n of e)yield t(n,i++)}}let ew="important",ef=" !"+ew,ex=eu(class extends em{constructor(e){if(super(e),1!==e.type||"style"!==e.name||e.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce((t,i)=>{let n=e[i];return null==n?t:t+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${n};`},"")}update(e,[t]){let{style:i}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(t)),this.render(t);for(let e of this.ft)null==t[e]&&(this.ft.delete(e),e.includes("-")?i.removeProperty(e):i[e]=null);for(let e in t){let n=t[e];if(null!=n){this.ft.add(e);let t="string"==typeof n&&n.endsWith(ef);e.includes("-")||t?i.setProperty(e,t?n.slice(0,-11):n,t?ew:""):i[e]=n}}return W}});var eC=Object.defineProperty,ek=Object.getOwnPropertyDescriptor,e$=(e,t,i,n)=>{for(var o,s=n>1?void 0:n?ek(t,i):t,a=e.length-1;a>=0;a--)(o=e[a])&&(s=(n?o(t,i,s):o(s))||s);return n&&s&&eC(t,i,s),s},eS=F` 3 <svg 4 xmlns="http://www.w3.org/2000/svg" 5 width="16" 6 height="16"
7 viewBox="0 0 24 24" 8 fill="none" 9 stroke="currentColor" 10 stroke-width="2" 11 stroke-linecap="round" 12 stroke-linejoin="round" 13 > 14 <rect x="2" y="2" width="20" height="15" rx="2" ry="2"></rect> 15 <line x1="2" y1="17" x2="22" y2="17"></line> 16 <line x1="7" y1="21" x2="17" y2="21"></line> 17 <line x1="12" y1="17" x2="12" y2="21"></line> 18 </svg> 19`,e_=F` 20 <svg 21 xmlns="http://www.w3.org/2000/svg" 22 width="16" 23 height="16" 24 viewBox="0 0 24 24" 25 fill="none" 26 stroke="currentColor" 27 stroke-width="2" 28 stroke-linecap="round" 29 stroke-linejoin="round" 30 > 31 <polyline points="4 17 10 11 4 5"></polyline> 32 <line x1="12" y1="19" x2="20" y2="19"></line> 33 </svg> 34`,eE=F` 35 <svg 36 xmlns="http://www.w3.org/2000/svg" 37 width="16" 38 height="16" 39 viewBox="0 0 24 24" 40 fill="none" 41 stroke="currentColor" 42 stroke-width="2" 43 stroke-linecap="round" 44 stroke-linejoin="round" 45 > 46 <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> 47 <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> 48 <line x1="1" y1="1" x2="23" y2="23"></line> 49 </svg> 50`,eT=F` 51 <svg 52 xmlns="http://www.w3.org/2000/svg" 53 width="16" 54 height="16" 55 viewBox="0 0 24 24" 56 fill="none" 57 stroke="currentColor" 58 stroke-width="2" 59 stroke-linecap="round" 60 stroke-linejoin="round" 61 > 62 <path d="M12 2v8" /> 63 <path d="M12 10l-6 6" /> 64 <path d="M12 10l6 6" /> 65 <circle cx="6" cy="18" r="2" /> 66 <circle cx="18" cy="18" r="2" /> 67 </svg> 68`,eD=F` 69 <svg 70 xmlns="http://www.w3.org/2000/svg" 71 width="16" 72 height="16" 73 viewBox="0 0 24 24" 74 fill="none" 75 stroke="currentColor" 76 stroke-width="2" 77 stroke-linecap="round" 78 stroke-linejoin="round" 79 > 80 <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /> 81 <circle cx="12" cy="12" r="3" /> 82 </svg> 83`,eA=F` 84 <svg 85 xmlns="http://www.w3.org/2000/svg" 86 width="16" 87 height="16" 88 viewBox="0 0 24 24" 89 fill="none" 90 stroke="currentColor" 91 stroke-width="2" 92 stroke-linecap="round" 93 stroke-linejoin="round" 94 > 95 <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" /> 96 <polyline points="14 2 14 8 20 8" /> 97 <line x1="16" y1="13" x2="8" y2="13" /> 98 <line x1="16" y1="17" x2="8" y2="17" /> 99 <line x1="10" y1="9" x2="8" y2="9" /> 100 </svg> 101`,eL=F` 102 <svg 103 xmlns="http://www.w3.org/2000/svg" 104 width="16" 105 height="16" 106 viewBox="0 0 24 24" 107 fill="none" 108 stroke="currentColor" 109 stroke-width="2" 110 stroke-linecap="round" 111 stroke-linejoin="round" 112 > 113 <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" /> 114 </svg> 115`,eM=F` 116 <svg 117 xmlns="http://www.w3.org/2000/svg" 118 width="16" 119 height="16" 120 viewBox="0 0 24 24" 121 fill="none" 122 stroke="currentColor" 123 stroke-width="2" 124 stroke-linecap="round" 125 stroke-linejoin="round" 126 > 127 <polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46" /> 128 </svg> 129`,eO=F` 130 <svg 131 xmlns="http://www.w3.org/2000/svg" 132 width="16" 133 height="16" 134 viewBox="0 0 24 24" 135 fill="none" 136 stroke="currentColor" 137 stroke-width="2" 138 stroke-linecap="round" 139 stroke-linejoin="round" 140 > 141 <circle cx="12" cy="12" r="10" /> 142 <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" /> 143 </svg> 144`,eI=F` 145 <svg 146 xmlns="http://www.w3.org/2000/svg" 147 width="24" 148 height="24" 149 viewBox="0 0 24 24" 150 fill="none" 151 stroke="currentColor" 152 stroke-width="2" 153 stroke-linecap="round" 154 stroke-linejoin="round" 155 > 156 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> 157 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> 158 </svg> 159`,eP=F` 160 <svg 161 xmlns="http://www.w3.org/2000/svg" 162 width="24" 163 height="24" 164 viewBox="0 0 24 24" 165 fill="none" 166 stroke="currentColor" 167 stroke-width="2" 168 stroke-linecap="round" 169 stroke-linejoin="round" 170 > 171 <polyline points="20 6 9 17 4 12"></polyline> 172 </svg> 173`,eU=F` 174 <svg 175 xmlns="http://www.w3.org/2000/svg" 176 width="16" 177 height="16" 178 viewBox="0 0 24 24" 179 fill="none" 180 stroke="currentColor" 181 stroke-width="2" 182 stroke-linecap="round" 183 stroke-linejoin="round" 184 > 185 <path 186 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" 187 ></path> 188 <line x1="12" y1="9" x2="12" y2="13"></line>
189 <line x1="12" y1="17" x2="12.01" y2="17"></line> 190 </svg> 191`,ej=F` 192 <svg 193 xmlns="http://www.w3.org/2000/svg" 194 width="16" 195 height="16" 196 viewBox="0 0 24 24" 197 fill="none" 198 stroke="currentColor" 199 stroke-width="2" 200 stroke-linecap="round" 201 stroke-linejoin="round" 202 > 203 <circle cx="6" cy="12" r="3"></circle> 204 <circle cx="18" cy="12" r="3"></circle> 205 <path d="M9 12h6"></path> 206 <path d="M15 9l3 3-3 3"></path> 207 <circle cx="12" cy="6" r="2"></circle> 208 <circle cx="12" cy="18" r="2"></circle> 209 <path d="M10 8l2-2 2 2"></path> 210 <path d="M14 16l-2 2-2-2"></path> 211 </svg> 212`,ez=F` 213 <svg 214 xmlns="http://www.w3.org/2000/svg" 215 width="12" 216 height="12" 217 viewBox="0 0 24 24" 218 fill="none" 219 stroke="currentColor" 220 stroke-width="2" 221 stroke-linecap="round" 222 stroke-linejoin="round" 223 > 224 <polyline points="3 6 5 6 21 6"></polyline> 225 <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> 226 <line x1="10" y1="11" x2="10" y2="17"></line> 227 <line x1="14" y1="11" x2="14" y2="17"></line> 228 </svg> 229`;F` 230 <svg 231 xmlns="http://www.w3.org/2000/svg" 232 width="16" 233 height="16" 234 viewBox="0 0 24 24" 235 fill="none" 236 stroke="currentColor" 237 stroke-width="2" 238 stroke-linecap="round" 239 stroke-linejoin="round" 240 > 241 <path d="M18 8a6 6 0 0 0-12 0c0 2 3 4 6 6 3-2 6-4 6-6z" /> 242 <circle cx="12" cy="8" r="3" /> 243 </svg> 244`,F` 245 <svg 246 xmlns="http://www.w3.org/2000/svg" 247 width="16" 248 height="16" 249 viewBox="0 0 24 24" 250 fill="none" 251 stroke="currentColor" 252 stroke-width="2" 253 stroke-linecap="round" 254 stroke-linejoin="round" 255 > 256 <rect x="2" y="3" width="20" height="14" rx="2" ry="2" /> 257 <line x1="8" y1="21" x2="16" y2="21" /> 258 <line x1="12" y1="17" x2="12" y2="21" /> 259 <circle cx="12" cy="10" r="2" /> 260 </svg> 261`,F` 262 <svg 263 xmlns="http://www.w3.org/2000/svg" 264 width="16" 265 height="16" 266 viewBox="0 0 24 24" 267 fill="none" 268 stroke="currentColor" 269 stroke-width="2" 270 stroke-linecap="round" 271 stroke-linejoin="round" 272 > 273 <circle cx="12" cy="12" r="10" /> 274 <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" /> 275 </svg> 276`;var eV=class extends el{constructor(){super(...arguments),this.title=""}render(){return F` 277 <span class="chip" title="${this.title}"> 278 <slot></slot> 279 </span> 280 `}};eV.styles=[l` 281 :host { 282 display: inline-block; 283 } 284 285 .chip { 286 display: inline-flex; 287 align-items: center; 288 padding: 3px 8px; 289 background-color: rgba(255, 255, 255, 0.05); 290 color: #e8e8e8; 291 font-size: 10px; 292 font-weight: 500; 293 white-space: nowrap; 294 border: 1px solid rgba(255, 255, 255, 0.1); 295 font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; 296 letter-spacing: 0.02em; 297 line-height: 1.2; 298 transition: all 0.2s ease; 299 } 300 `],e$([ep({type:String})],eV.prototype,"title",2),eV=e$([ed("chip-element")],eV);var eN=class extends el{constructor(){super(...arguments),this.noContentMessage="No content available.",this.hasContent=!0}render(){return F` 301 <div class="content-container"> 302 ${this.hasContent?F`<slot></slot>`:F`<div class="no-content-message">${this.noContentMessage}</div>`} 303 </div> 304 `}};eN.styles=[l` 305 :host { 306 overflow: hidden; 307 } 308 309 .content-container::-webkit-scrollbar {
310 width: 8px; 311 } 312 313 .content-container::-webkit-scrollbar-track { 314 background: rgba(30, 30, 30, 0.5); 315 } 316 317 .content-container::-webkit-scrollbar-thumb { 318 background-color: rgba(176, 196, 222, 0.5); 319 border: 2px solid rgba(0, 0, 0, 0.2); 320 } 321 322 .content-container::-webkit-scrollbar-thumb:hover { 323 background-color: rgba(176, 196, 222, 0.7); 324 } 325 326 .content-container { 327 scrollbar-gutter: stable; 328 height: 100%; 329 min-height: 150px; 330 overflow-y: auto; 331 scrollbar-width: thin; 332 scrollbar-color: rgba(176, 196, 222, 0.5) rgba(30, 30, 30, 0.5); 333 } 334 335 .no-content-message { 336 display: flex; 337 justify-content: center; 338 align-items: center; 339 height: 100%; 340 color: #afafaf; 341 font-style: italic; 342 font-family: "Courier New", monospace; 343 } 344 `],e$([ep({type:String,attribute:"no-content-message"})],eN.prototype,"noContentMessage",2),e$([ep({type:Boolean})],eN.prototype,"hasContent",2),eN=e$([ed("tab-content")],eN);var eR=class extends el{render(){return F` 345 <div class="tab-bar-elements"> 346 <div class="tab-bar-info"> 347 <div class="stats-chips"> 348 <slot name="chips"></slot> 349 </div> 350 </div> 351 <div class="tab-bar-actions"> 352 <slot name="actions"></slot> 353 </div> 354 </div> 355 `}};eR.styles=[l` 356 :host { 357 } 358 .tab-bar-info { 359 display: flex; 360 gap: 12px; 361 align-items: center; 362 flex: 1; 363 } 364 365 .stats-chips { 366 display: flex; 367 gap: 8px; 368 align-items: center; 369 } 370 371 .chip { 372 font-size: 11px; 373 font-weight: 500; 374 padding: 4px 8px; 375 border: 1px solid #555; 376 white-space: nowrap; 377 letter-spacing: 0.3px; 378 background: rgba(40, 40, 40, 0.7); 379 color: #b0c4de; 380 } 381 382 .tab-bar-actions { 383 display: flex; 384 gap: 6px; 385 align-items: center; 386 position: relative; 387 flex-direction: row; 388 } 389 .tab-bar-elements { 390 display: flex; 391 justify-content: space-between; 392 padding: 4px 0 4px 0; 393 border-bottom: 1px solid #444; 394 position: sticky; 395 top: 0; 396 z-index: 5; 397 min-height: 36px; 398 } 399 `],eR=e$([ed("tab-header")],eR);var eH=class e extends el{constructor(){super(...arguments),this.isDropdownOpen=!1,this.dropdownOptions=[],this._toggleDropdown=t=>{t.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(e.currentlyOpen&&e.currentlyOpen!==this&&e.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,e.currentlyOpen=this,this._positionDropdown())},this._handleOutsideClick=e=>{this.isDropdownOpen&&(e.composedPath().includes(this)||this._closeDropdown())}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),e.currentlyOpen===this&&(e.currentlyOpen=null)}_closeDropdown(){this.isDropdownOpen=!1,e.currentlyOpen===this&&(e.currentlyOpen=null)}_positionDropdown(){if(typeof window>"u")return;let e=this.shadowRoot?.querySelector(".trigger-button"),t=this.shadowRoot?.querySelector(".dropdown-menu");if(e&&t){let i=e.getBoundingClientRect(),n=t.offsetHeight||200,o=i.bottom+5,s=window.innerWidth-i.right;window.innerHeight-i.bottom<n&&i.top>n?t.style.top=`${i.top-n-5}px`:t.style.top=`${o}px`,t.style.right=`${s}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return F` 400 <div class="dropdown-container"> 401 <button 402 class="${e}" 403 title="${this._getTriggerTitle()}" 404 @click="${this._toggleDropdown}" 405 aria-haspopup="true" 406 aria-expanded="${this.isDropdownOpen}" 407 aria-controls="dropdown-menu" 408 aria-label="${this._getTriggerLabel()}" 409 > 410 ${this._getTriggerIcon()} 411 <svg 412 class="arrow-icon" 413 xmlns="http://www.w3.org/2000/svg"
414 viewBox="0 0 24 24" 415 stroke="currentColor" 416 stroke-width="2" 417 stroke-linecap="round" 418 stroke-linejoin="round" 419 > 420 <polyline points="6 9 12 15 18 9"></polyline> 421 </svg> 422 </button> 423 424 <div class="${t}" id="dropdown-menu" role="menu"> 425 ${this.dropdownOptions.map(e=>F` 426 <button 427 value="${e.value}" 428 title="${e.title}" 429 class="${this._isOptionSelected(e)?"active":""}" 430 @click="${()=>this._handleOptionClick(e)}" 431 role="menuitem" 432 > 433 ${e.label} 434 </button> 435 `)} 436 </div> 437 </div> 438 `}};eH.currentlyOpen=null,eH.styles=[l` 439 :host { 440 display: inline-block; 441 } 442 443 .dropdown-container { 444 position: relative; 445 display: inline-block; 446 } 447 448 .trigger-button { 449 background: none; 450 border: none; 451 color: white; 452 cursor: pointer; 453 padding: 6px; 454 display: flex; 455 align-items: center; 456 justify-content: center; 457 gap: 4px; 458 transition: all 0.2s ease; 459 } 460 461 .trigger-button svg { 462 width: 16px; 463 height: 16px; 464 stroke: white; 465 transition: stroke 0.2s; 466 } 467 468 .trigger-button .arrow-icon { 469 width: 10px; 470 height: 10px; 471 stroke: white; 472 fill: none; 473 stroke-width: 2; 474 transition: 475 transform 0.2s ease, 476 stroke 0.2s; 477 } 478 479 .trigger-button:hover { 480 background-color: rgba(176, 196, 222, 0.1); 481 } 482 483 .trigger-button:hover svg, 484 .trigger-button:hover .arrow-icon { 485 stroke: #b0c4de; 486 } 487 488 .trigger-button.active { 489 background-color: rgba(176, 196, 222, 0.2); 490 } 491 492 .trigger-button.active svg { 493 stroke: #b0c4de; 494 } 495 496 .trigger-button.active .arrow-icon { 497 transform: rotate(180deg); 498 stroke: #b0c4de; 499 } 500 501 .dropdown-menu { 502 position: fixed; 503 z-index: 9999; 504 display: none; 505 flex-direction: column; 506 background-color: #3a3a3a; 507 border: 1px solid #555; 508 min-width: 200px; 509 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 510 overflow: hidden; 511 } 512 513 .dropdown-menu.active { 514 display: flex; 515 } 516 517 .dropdown-menu button { 518 background: none; 519 border: none; 520 color: #ccc; 521 font-size: 12px; 522 text-align: left; 523 padding: 8px 12px; 524 cursor: pointer; 525 transition: all 0.2s ease; 526 display: flex; 527 align-items: center; 528 position: relative; 529 width: 100%; 530 box-sizing: border-box; 531 } 532 533 .dropdown-menu button:hover { 534 background-color: #555; 535 color: white; 536 } 537 538 .dropdown-menu button.active { 539 color: #b0c4de; 540 font-weight: bold; 541 background-color: rgba(176, 196, 222, 0.1); 542 } 543 544 .dropdown-menu button.active::after { 545 content: "â"; 546 position: absolute; 547 right: 8px; 548 top: 50%; 549 transform: translateY(-50%); 550 color: #b0c4de; 551 font-weight: bold; 552 } 553 `],e$([eg()],eH.prototype,"isDropdownOpen",2),e$([ep({type:Array})],eH.prototype,"dropdownOptions",2);var eB=eH,eX=class extends eB{constructor(){super(...arguments),this.selectedOptionValue=""}connectedCallback(){super.connectedCallback(),this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}willUpdate(e){e.has("dropdownOptions")&&this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}_handleOptionClick(e){e.value!==this.selectedOptionValue&&(this.selectedOptionValue=e.value,this.onSelectionChange?.(e.value)),this._closeDropdown()}
553_getTriggerIcon(){let e=this._getSelectedOption();return e?e.icon:F``}_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)}};e$([ep({type:String})],eX.prototype,"selectedOptionValue",2),e$([ep({type:Function})],eX.prototype,"onSelectionChange",2),eX=e$([ed("single-select-dropdown")],eX);var eF=class extends el{constructor(){super(...arguments),this.title="Copy to clipboard",this.isCopied=!1,this.copyTimeout=null}async handleClick(e){if(!this.isCopied){if(this.onCopy)try{await this.onCopy(e)}catch(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),this.copyTimeout=null)}render(){return F` 554 <button 555 class="copy-button ${this.isCopied?"copied":""}" 556 title="${this.title}" 557 @click=${this.handleClick} 558 > 559 ${this.isCopied?eP:eI} 560 </button> 561 `}};eF.styles=l` 562 .copy-button { 563 background: transparent; 564 border: 0px; 565 cursor: pointer; 566 padding: 6px; 567 display: flex; 568 align-items: center; 569 justify-content: center; 570 opacity: 0.6; 571 transition: 572 opacity 0.2s ease, 573 background-color 0.2s ease; 574 } 575 576 :host([positioned]) .copy-button { 577 position: absolute; 578 top: 10px; 579 right: 1px; 580 } 581 582 .copy-button:hover { 583 background-color: rgba(176, 196, 222, 0.1); 584 } 585 586 .copy-button:hover svg { 587 stroke: #b0c4de; 588 } 589 590 .copy-button svg { 591 width: 14px; 592 height: 14px; 593 stroke: #ddd; 594 stroke-width: 2.5; 595 } 596 597 .copy-button.copied svg { 598 stroke: #4caf50; 599 } 600 `,e$([ep({type:String})],eF.prototype,"title",2),e$([ep({type:Function})],eF.prototype,"onCopy",2),e$([eg()],eF.prototype,"isCopied",2),e$([eg()],eF.prototype,"copyTimeout",2),eF=e$([ed("copy-icon")],eF);var eW=class extends el{constructor(){super(...arguments),this.borderColor="#555",this.showCopyButton=!1,this.itemId="",this.isExpanded=!1}toggleExpand(){this.onToggle&&this.onToggle(this.itemId)}async handleCopy(e){e.stopPropagation();let t=this.shadowRoot?.querySelector('slot[name="details"]');if(t){let 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),F` 601 <div class="item-entry ${this.isExpanded?"expanded":""}"> 602 <div class="item-header ${this.isExpanded?"expanded":""}" @click="${this.toggleExpand}"> 603 <div class="item-content"> 604 <slot name="content"></slot> 605 </div> 606 <span class="item-toggle ${this.isExpanded?"expanded":""}"> 607 <svg viewBox="0 0 24 24"> 608 <polyline points="9,18 15,12 9,6"></polyline> 609 </svg> 610 </span> 611 </div> 612 ${this.isExpanded?F` 613 <div class="item-details"> 614 <copy-icon 615 positioned 616 title="Copy Details" 617 .onCopy=${e=>this.handleCopy(e)} 618 ></copy-icon> 619 <pre class="item-data"> 620 <slot name="details"></slot> 621 </pre> 622 </div> 623 `:""} 624 </div> 625 `}};eW.styles=[l` 626 :host { 627 display: block; 628 } 629 630 .item-entry { 631 margin-bottom: 2px; 632 font-size: 11px; 633 line-height: 1.3; 634 overflow: hidden; 635 transition: all 0.2s ease; 636 border-left: 2px solid var(--border-color, #555); 637 padding-left: 6px; 638 } 639 640 .item-entry:hover:not(.expanded) { 641 background-color: rgba(255, 255, 255, 0.02); 642 } 643 644 .item-entry.expanded { 645 background-color: rgba(255, 255, 255, 0.03); 646 } 647 648 .item-header { 649 display: flex; 650 align-items: center; 651 padding: 3px 4px; 652 cursor: pointer; 653 transition: background-color 0.2s ease; 654 gap: 8px; 655 min-height: 20px; 656 } 657 658 .item-header:hover:not(.expanded) { 659 background-color: rgba(255, 255, 255, 0.03); 660 } 661 662 .item-details { 663 position: relative; 664 border-top: 1px solid rgba(255, 255, 255, 0.1); 665 } 666 667 .item-toggle { 668 display: flex; 669 align-items: center; 670 justify-content: center; 671 width: 16px; 672 height: 16px; 673 674 user-select: none; 675 cursor: pointer; 676 transition: all 0.2s ease; 677 } 678 679 .item-toggle:hover { 680 background-color: rgba(255, 255, 255, 0.1); 681 } 682 683 .item-toggle svg { 684 width: 14px; 685 height: 14px; 686 fill: none; 687 stroke: #b0c4de; 688 stroke-width: 2; 689 stroke-linecap: round; 690 stroke-linejoin: round; 691 transition: all 0.2s ease; 692 } 693 694 .item-toggle:hover svg { 695 stroke: #d4e4f4; 696 } 697 698 .item-toggle.expanded svg { 699 transform: rotate(90deg); 700 } 701 702 .item-content { 703 flex: 1; 704 display: flex; 705 align-items: center; 706 gap: 8px; 707 min-width: 0; 708 overflow: hidden; 709 } 710 711 .item-data {
712 color: #e0e0e0; 713 white-space: pre; 714 font-size: 11px; 715 margin: 0; 716 padding: 0; 717 font-family: "Courier New", monospace; 718 line-height: 1.3; 719 display: block; 720 overflow-x: auto; 721 } 722 `],e$([ep()],eW.prototype,"borderColor",2),e$([ep()],eW.prototype,"showCopyButton",2),e$([ep()],eW.prototype,"itemId",2),e$([ep()],eW.prototype,"isExpanded",2),e$([ep()],eW.prototype,"onToggle",2),eW=e$([ed("expandable-item")],eW);var eq=class extends el{constructor(){super(...arguments),this.remainingTime=0,this.isCountdownActive=!1,this.intervalId=null,this.startTime=0,this.handleTimerClick=e=>{e.stopPropagation(),ev.X.instance.reactivate(this.elementData.element)}}connectedCallback(){super.connectedCallback(),this.checkAndStartCountdown()}disconnectedCallback(){super.disconnectedCallback(),this.clearCountdown()}willUpdate(e){super.willUpdate(e),e.has("elementData")&&this.checkAndStartCountdown()}checkAndStartCountdown(){let e=this.elementData?.callbackInfo;if(!e)return void this.clearCountdown();let t=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;!e.isCallbackActive&&t&&e.reactivateAfter>0?this.startCountdown():this.clearCountdown()}startCountdown(){this.clearCountdown();let e=this.elementData?.callbackInfo;if(!e)return;if(this.isCountdownActive=!0,e.reactivateAfter===1/0){this.remainingTime=1/0;return}let t=e.reactivateAfter,i=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;if(!i)return void this.clearCountdown();this.startTime=i;let n=()=>{let e=Math.max(0,t-(Date.now()-this.startTime));this.remainingTime=e,this.requestUpdate(),(e<=0||this.elementData.callbackInfo.isCallbackActive)&&this.clearCountdown()};n(),this.remainingTime>0&&"u">typeof window&&(this.intervalId=window.setInterval(n,100))}clearCountdown(){null!==this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.isCountdownActive=!1,this.remainingTime=0}formatTime(e){if(e===1/0)return"â";let t=Math.ceil(e/1e3);if(t<60)return`${t}s`;let i=Math.floor(t/60),n=t%60;if(i<60)return n>0?`${i}m ${n}s`:`${i}m`;let o=Math.floor(i/60),s=i%60;return s>0?`${o}h ${s}m`:`${o}h`}render(){return this.isCountdownActive?this.remainingTime===1/0?F` 723 <button 724 class="reactivate-button" 725 @click="${this.handleTimerClick}" 726 title="Click to reactivate manually" 727 > 728 <span class="countdown-time infinity">â</span> 729 </button> 730 `:this.remainingTime<=0?F``:F` 731 <button 732 class="reactivate-button" 733 @click="${this.handleTimerClick}" 734 title="Click to reactivate immediately" 735 > 736 <span class="countdown-time clickable">${this.formatTime(this.remainingTime)}</span> 737 </button> 738 `:F``}};eq.styles=[l` 739 :host { 740 display: inline-block; 741 } 742 743 .reactivate-button { 744 all: unset; 745 cursor: pointer; 746 padding: 2px 4px; 747 transition: background-color 0.2s ease; 748 } 749 750 .reactivate-button:hover { 751 background-color: rgba(255, 165, 0, 0.1); 752 } 753 754 .countdown-time { 755 color: #ffa726; 756 font-weight: 500; 757 font-size: 10px; 758 } 759 760 .countdown-time.infinity { 761 font-size: 12px; 762 font-weight: 600; 763 } 764 765 .countdown-time.clickable { 766 cursor: pointer; 767 } 768 `],e$([ep({hasChanged:()=>!0})],eq.prototype,"elementData",2),e$([eg()],eq.prototype,"remainingTime",2),e$([eg()],eq.prototype,"isCountdownActive",2),eq=e$([ed("reactivate-countdown")],eq);var eG=class extends el{constructor(){super(...arguments),this.isActive=!1,this.isExpanded=!1,this.currentDeviceStrategy="mouse",this._abortController=null,this.handleUnregister=e=>{e.stopPropagation(),ev.X.instance.unregister(this.elementData.element,"devtools")}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.currentDeviceStrategy=ev.X.instance.getManagerData.currentDeviceStrategy,ev.X.instance.addEventListener("deviceStrategyChanged",e=>{this.currentDeviceStrategy=e.newStrategy},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getBorderColor(){return this.isActive?"#ffeb3b":this.elementData.callbackInfo.isCallbackActive?"touch"===this.currentDeviceStrategy?"#ba68c8":this.elementData.isIntersectingWithViewport?"#4caf50":"#666":"#999"}getStatusIndicatorClass(){return this.isActive?"prefetching":this.elementData.callbackInfo.isCallbackActive?"touch"===this.currentDeviceStrategy?"touch-device":this.elementData.isIntersectingWithViewport?"visible":"hidden":"inactive"}getStatusText(){return this.isActive?"callback active":this.elementData.callbackInfo.isCallbackActive?(this.elementData.isIntersectingWithViewport?"in viewport":"not in viewport")+("touch"===this.currentDeviceStrategy?" (touch device)":""):"callback inactive"}formatElementDetails(){let e=this.elementData;return JSON.stringify({status:this.getStatusText(),isIntersecting:e.isIntersectingWithViewport,registerCount:e.registerCount,hitSlop:{top:e.elementBounds.hitSlop.top,right:e.elementBounds.hitSlop.right,bottom:e.elementBounds.hitSlop.bottom,left:e.elementBounds.hitSlop.left},callbackInfo:e.callbackInfo,meta:this.elementData.meta},null,2)}render(){let e=!this.elementData.isIntersectingWithViewport&&"touch"!==this.currentDeviceStrategy;return F` 769 <div class="element-wrapper ${e?"not-visible":""}"> 770 <expandable-item 771 .borderColor=${this.getBorderColor()} 772 .showCopyButton=${!0} 773 .itemId=${this.elementData.id} 774 .isExpanded=${this.isExpanded} 775 .onToggle=${this.onToggle} 776 >
777 <div slot="content" class="element-content" title="Status: ${this.getStatusText()}"> 778 <div class="status-indicator ${this.getStatusIndicatorClass()}"></div> 779 <span 780 class="element-name ${this.isActive?"callback-active":this.elementData.callbackInfo.isCallbackActive?"":"callback-inactive"}" 781 > 782 ${this.elementData.name||"unnamed"} 783 </span> 784 <reactivate-countdown .elementData=${this.elementData}> </reactivate-countdown> 785 <button 786 class="unregister-button" 787 @click="${this.handleUnregister}" 788 title="Unregister element" 789 > 790 ${ez} 791 </button> 792 </div> 793 <div slot="details">${this.formatElementDetails()}</div> 794 </expandable-item> 795 </div> 796 `}};eG.styles=[l` 797 :host { 798 display: block; 799 } 800 801 .element-wrapper { 802 display: block; 803 } 804 805 .element-content { 806 display: flex; 807 align-items: center; 808 gap: 8px; 809 flex: 1; 810 } 811 812 .status-indicator { 813 margin-left: 2px; 814 width: 8px; 815 height: 8px; 816 flex-shrink: 0; 817 transition: all 0.3s ease; 818 } 819 820 .status-indicator.visible { 821 background-color: #4caf50; 822 box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3); 823 } 824 825 .status-indicator.hidden { 826 background-color: #666; 827 box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2); 828 } 829 830 .status-indicator.prefetching { 831 background-color: #ffeb3b; 832 box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.4); 833 } 834 835 .status-indicator.inactive { 836 background-color: #999; 837 box-shadow: 0 0 0 2px rgba(153, 153, 153, 0.3); 838 } 839 840 .status-indicator.touch-device { 841 background-color: #ba68c8; 842 box-shadow: 0 0 0 2px rgba(186, 104, 200, 0.4); 843 } 844 845 .unregister-button { 846 all: unset; 847 display: flex; 848 align-items: center; 849 justify-content: center; 850 width: 14px; 851 height: 14px; 852 padding: 1px; 853 cursor: pointer; 854 color: #999; 855 } 856 857 .unregister-button:hover { 858 background-color: rgba(255, 107, 107, 0.1); 859 color: #ff6b6b; 860 } 861 862 .element-name { 863 flex-grow: 1; 864 white-space: nowrap; 865 overflow: hidden; 866 text-overflow: ellipsis; 867 font-size: 11px; 868 font-weight: 500; 869 color: #e8e8e8; 870 } 871 872 .element-name.callback-active { 873 color: #fff; 874 font-weight: 600; 875 } 876 877 .element-name.callback-inactive { 878 color: #999; 879 font-weight: 500; 880 } 881 882 .reactivate-countdown { 883 font-size: 14px; 884 color: #ffa726; 885 font-weight: 500; 886 min-width: 0; 887 white-space: nowrap; 888 } 889 890 .reactivate-countdown:empty { 891 display: none; 892 } 893 894 :host(.not-visible) { 895 opacity: 0.5; 896 } 897 898 .element-wrapper.not-visible { 899 opacity: 0.5; 900 } 901 `],e$([ep({hasChanged:()=>!0})],eG.prototype,"elementData",2),e$([ep()],eG.prototype,"isActive",2),e$([ep()],eG.prototype,"isExpanded",2),e$([ep()],eG.prototype,"onToggle",2),e$([eg()],eG.prototype,"currentDeviceStrategy",2),eG=e$([ed("single-element")],eG);var eK=class extends el{constructor(){super(),this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},touch:0,viewport:0,total:0},this.elementListItems=new Map,this.noContentMessage="No Elements Registered To The Foresight Manager",this.runningCallbacks=new Set,this.expandedElementIds=new Set,this._abortController=null,this._pendingElementUpdates=new Map,this._updateDebounceId=null,this._cachedActiveElements=[],this._cachedInactiveElements=[],this._elementsCacheDirty=!0,this.handleSortChange=e=>{this.sortOrder=e,this._elementsCacheDirty=!0},this.handleElementToggle=e=>{let t=new Set(this.expandedElementIds);t.has(e)?t.delete(e):t.add(e),this.expandedElementIds=t},this.sortByDocumentPosition=(e,t)=>{let i=e.element.compareDocumentPosition(t.element);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0},this.sortOrder=tt.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:eD},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:eA},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:eL}]}_generateHitsChipTitle(e){let t=[];t.push(`Total Callback Hits: ${e.total}`),t.push("");let i=e.mouse.trajectory+e.mouse.hover,n=e.scroll.up+e.scroll.down+e.scroll.left+e.scroll.right,o=e.tab.forwards+e.tab.reverse;t.push("Desktop Strategy"),i>0?t.push(` Mouse (${i}): ${e.mouse.trajectory} trajectory, ${e.mouse.hover} hover`):t.push(" Mouse: No hits"),n>0?t.push(` Scroll (${n}): Up ${e.scroll.up}, Down ${e.scroll.down}, Left ${e.scroll.left}, Right ${e.scroll.right}`):t.push(" Scroll: No hits"),o>0?t.push(` Tab (${o}): ${e.tab.forwards} forward, ${e.tab.reverse} reverse`):t.push(" Tab: No hits"),t.push("");let s=e.touch+e.viewport;
901return 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"),0===s&&i+n+o===0&&(t.push(""),t.push("Interact with registered elements to see callback statistics")),t.join(` 902`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),ev.X.instance.addEventListener("elementRegistered",e=>{this.elementListItems.set(e.elementData.element,e.elementData),this._elementsCacheDirty=!0},{signal:e}),ev.X.instance.addEventListener("elementDataUpdated",e=>{this.elementListItems.get(e.elementData.element)&&(this._pendingElementUpdates.set(e.elementData.element,e.elementData),this._scheduleDebouncedUpdate())},{signal:e}),ev.X.instance.addEventListener("elementReactivated",e=>{this.elementListItems.get(e.elementData.element)&&(this.elementListItems.set(e.elementData.element,e.elementData),this._elementsCacheDirty=!0,this.requestUpdate())},{signal:e}),ev.X.instance.addEventListener("elementUnregistered",e=>{this.elementListItems.delete(e.elementData.element),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.runningCallbacks.delete(e.elementData.element),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),ev.X.instance.addEventListener("callbackInvoked",e=>{this.elementListItems.get(e.elementData.element)&&this.elementListItems.set(e.elementData.element,e.elementData),this.runningCallbacks.add(e.elementData.element),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),ev.X.instance.addEventListener("callbackCompleted",e=>{this.elementListItems.get(e.elementData.element)&&this.elementListItems.set(e.elementData.element,e.elementData),this.handleCallbackCompleted(e.hitType),this.runningCallbacks.delete(e.elementData.element),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null,null!==this._updateDebounceId&&(clearTimeout(this._updateDebounceId),this._updateDebounceId=null),this._pendingElementUpdates.clear()}_scheduleDebouncedUpdate(){null===this._updateDebounceId&&(this._updateDebounceId=setTimeout(()=>{this._updateDebounceId=null,this._flushPendingUpdates()},16))}_flushPendingUpdates(){if(0!==this._pendingElementUpdates.size){for(let[e,t]of this._pendingElementUpdates)this.elementListItems.set(e,t);this._pendingElementUpdates.clear(),this._elementsCacheDirty=!0,this.requestUpdate()}}updateElementListFromManager(){this.elementListItems=new Map(ev.X.instance.registeredElements),this._elementsCacheDirty=!0}handleCallbackCompleted(e){switch(e.kind){case"mouse":this.hitCount.mouse[e.subType]++;break;case"tab":this.hitCount.tab[e.subType]++;break;case"scroll":this.hitCount.scroll[e.subType]++;break;case"touch":this.hitCount.touch++;break;case"viewport":this.hitCount.viewport++}this.hitCount.total++,this.requestUpdate()}getSortedElements(){let e=Array.from(this.elementListItems.values());switch(this.sortOrder){case"insertionOrder":return e;case"documentOrder":return e.sort(this.sortByDocumentPosition);case"visibility":return e.sort((e,t)=>e.isIntersectingWithViewport!==t.isIntersectingWithViewport?e.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(e,t));default:return this.sortOrder,e}}_recomputeElementsCache(){if(!this._elementsCacheDirty)return;let e=this.getSortedElements();this._cachedActiveElements=e.filter(e=>e.callbackInfo.isCallbackActive),this._cachedInactiveElements=e.filter(e=>!e.callbackInfo.isCallbackActive),this._elementsCacheDirty=!1}get activeElements(){return this._recomputeElementsCache(),this._cachedActiveElements}get inactiveElements(){return this._recomputeElementsCache(),this._cachedInactiveElements}render(){return F` 903 <tab-header> 904 <div slot="chips" class="chips-container"> 905 <chip-element title="${this._generateHitsChipTitle(this.hitCount)}"> 906 ${this.hitCount.total} hits 907 </chip-element> 908 </div> 909 <div slot="actions"> 910 <single-select-dropdown 911 .dropdownOptions="${this.sortDropdown}" 912 .selectedOptionValue="${this.sortOrder}" 913 .onSelectionChange="${this.handleSortChange}" 914 ></single-select-dropdown> 915 </div> 916 </tab-header> 917 <tab-content 918 .noContentMessage=${this.noContentMessage} 919 .hasContent=${!!this.elementListItems.size} 920 > 921 ${this.activeElements.length>0?F` 922 <div class="element-section"> 923 <h3 class="section-header active"> 924 Active Elements (${this.activeElements.length}) 925 </h3> 926 ${ey(this.activeElements,e=>F` 927 <single-element 928 .elementData=${e} 929 .isActive=${this.runningCallbacks.has(e.element)} 930 .isExpanded=${this.expandedElementIds.has(e.id)} 931 .onToggle=${this.handleElementToggle} 932 > 933 </single-element> 934 `)} 935 </div> 936 `:""} 937 ${this.inactiveElements.length>0?F` 938 <div class="element-section"> 939 <h3 class="section-header inactive"> 940 Inactive Elements (${this.inactiveElements.length}) 941 </h3> 942 ${ey(this.inactiveElements,e=>F` 943 <single-element 944 .elementData=${e} 945 .isActive=${this.runningCallbacks.has(e.element)} 946 .isExpanded=${this.expandedElementIds.has(e.id)} 947 .onToggle=${this.handleElementToggle} 948 > 949 </single-element> 950 `)} 951 </div> 952 `:""} 953 </tab-content> 954 `}};eK.styles=l` 955 :host { 956 display: flex; 957 flex-direction: column; 958 height: 100%; 959 } 960 961 .chips-container { 962 display: flex; 963 gap: 8px; 964 } 965 966 .element-section { 967 margin-bottom: 16px; 968 } 969 970 .element-section:last-child { 971 margin-bottom: 0; 972 } 973 974 .section-header { 975 margin: 4px 0 4px 0; 976 font-size: 12px; 977 font-weight: 600; 978 } 979 980 .section-header.active { 981 color: #e8e8e8; 982 } 983 984 .section-header.inactive { 985 color: #999; 986 } 987 `,e$([eg()],eK.prototype,"hitCount",2),e$([eg()],eK.prototype,"sortDropdown",2),e$([eg()],eK.prototype,"sortOrder",2),e$([eg()],eK.prototype,"elementListItems",2),e$([eg()],eK.prototype,"noContentMessage",2),e$([eg()],eK.prototype,"runningCallbacks",2),e$([eg()],eK.prototype,"expandedElementIds",2),eK=e$([ed("element-tab")],eK);var eJ=class extends el{constructor(){super(...arguments),this.activeTab="settings",this.tabs=["settings","elements","logs"]}_handleTabClick(e){this.dispatchEvent(new CustomEvent("tab-change",{detail:{tab:e},bubbles:!0,composed:!0}))}render(){return F` 988 <div class="tab-selector-wrapper"> 989 ${this.tabs.map(e=>F` 990 <button 991 class="tab-button ${this.activeTab===e?"active":""}" 992 @click="${()=>this._handleTabClick(e)}" 993 data-tab="${e}" 994 > 995 ${e.charAt(0).toUpperCase()+e.slice(1)} 996 </button> 997 `)} 998 </div> 999 `}};
999function eY(e){let t=["th","st","nd","rd"],i=e%100;return e+(t[(i-20)%10]||t[i]||t[0])}eJ.styles=l` 1000 .tab-selector-wrapper { 1001 border-bottom: 2px solid #444; 1002 margin-top: 12px; 1003 display: flex; 1004 justify-content: space-evenly; 1005 width: 100%; 1006 } 1007 1008 .tab-button { 1009 background: none; 1010 border: none; 1011 color: #9e9e9e; 1012 flex: 1; 1013 padding: 8px; 1014 cursor: pointer; 1015 border-bottom: 2px solid transparent; 1016 transition: all 0.2s ease; 1017 font-size: 13px; 1018 font-weight: 500; 1019 text-align: center; 1020 } 1021 .tab-button:hover { 1022 color: #b0c4de; 1023 background-color: rgba(176, 196, 222, 0.1); 1024 } 1025 1026 .tab-button.active { 1027 color: #b0c4de; 1028 border-bottom-color: #b0c4de; 1029 } 1030 `,e$([ep({type:String})],eJ.prototype,"activeTab",2),eJ=e$([ed("tab-selector")],eJ);var eZ=class extends eB{constructor(){super(...arguments),this.selectedValues=[]}_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],this.onSelectionChange?.(e.value,!t)}_getTriggerIcon(){return eM}_isOptionSelected(e){return this.selectedValues.includes(e.value)}_getTriggerTitle(){let e=this.selectedValues.length;return 0===e?"No items selected":1===e?"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 F` 1031 <div class="dropdown-container"> 1032 <button 1033 class="${e}" 1034 title="${this._getTriggerTitle()}" 1035 @click="${this._toggleDropdown}" 1036 aria-haspopup="true" 1037 aria-expanded="${this.isDropdownOpen}" 1038 aria-controls="dropdown-menu" 1039 aria-label="${this._getTriggerLabel()}" 1040 > 1041 ${this._getTriggerIcon()} 1042 <span class="selected-count">${this.selectedValues.length}</span> 1043 <svg 1044 class="arrow-icon" 1045 xmlns="http://www.w3.org/2000/svg"
1046 viewBox="0 0 24 24" 1047 stroke="currentColor" 1048 stroke-width="2" 1049 stroke-linecap="round" 1050 stroke-linejoin="round" 1051 > 1052 <polyline points="6 9 12 15 18 9"></polyline> 1053 </svg> 1054 </button> 1055 1056 <div class="${t}" id="dropdown-menu" role="menu"> 1057 ${this.dropdownOptions.map(e=>F` 1058 <button 1059 value="${e.value}" 1060 title="${e.title}" 1061 class="${this._isOptionSelected(e)?"active":""}" 1062 @click="${()=>this._handleOptionClick(e)}" 1063 role="menuitem" 1064 > 1065 ${e.label} 1066 </button> 1067 `)} 1068 </div> 1069 </div> 1070 `}};eZ.styles=[...eB.styles,l` 1071 .dropdown-menu button.active::after { 1072 content: "â"; 1073 position: absolute; 1074 right: 8px; 1075 top: 50%; 1076 transform: translateY(-50%); 1077 color: #b0c4de; 1078 font-weight: bold; 1079 } 1080 1081 .selected-count { 1082 font-size: 10px; 1083 color: #b0c4de; 1084 margin-left: 2px; 1085 } 1086 `],e$([ep({type:Array})],eZ.prototype,"selectedValues",2),e$([ep()],eZ.prototype,"onSelectionChange",2),eZ=e$([ed("multi-select-dropdown")],eZ);var eQ=class extends el{constructor(e){super(),this.isExpanded=!1,this.log=e}updated(e){if(e.has("log")&&this.log){let e=this.log,t="callbackCompleted"===e.type&&"status"in e&&"error"===e.status,i=t?"#f44336":this.getLogTypeColor(e.type);this.style.setProperty("--log-color",i),this.style.setProperty("--log-background-color",t?"rgba(244, 67, 54, 0.1)":"transparent")}}serializeLogDataWithoutSummary(e){let{summary:t,...i}=e;return JSON.stringify(i,null,2)}getLogTypeColor(e){return({elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"})[e]||"#555"}getEventDisplayName(e){return({elementRegistered:"Registered",elementReactivated:"Reactivated",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings",managerDataPayload:"ManagerData",deviceStrategyChanged:"Strategy"})[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,t="callbackCompleted"===e.type&&"status"in e&&"error"===e.status?"#f44336":this.getLogTypeColor(e.type);return F` 1087 <expandable-item 1088 .borderColor=${t} 1089 .itemId=${e.logId} 1090 .isExpanded=${this.isExpanded} 1091 .onToggle=${this.onToggle} 1092 > 1093 <div slot="content"> 1094 <div class="log-content"> 1095 <span class="log-time">${e.localizedTimestamp}</span> 1096 <span class="log-type-badge">${this.getEventDisplayName(e.type)}</span> 1097 <span class="log-summary">${this.truncateLogSummary(e.summary)}</span> 1098 </div> 1099 </div> 1100 <div slot="details">${this.serializeLogDataWithoutSummary(e)}</div> 1101 </expandable-item> 1102 `}};eQ.styles=[l` 1103 :host { 1104 display: block; 1105 /* 1106 * The background color is now driven by a CSS variable. 1107 * This allows us to set it from TypeScript without touching the class. 1108 */ 1109 background-color: var(--log-background-color, transparent); 1110 } 1111 1112 .log-time { 1113 color: #b8b8b8; 1114 font-weight: 500; 1115 font-size: 10px; 1116 font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; 1117 min-width: 70px; 1118 max-width: 70px; 1119 text-align: left; 1120 letter-spacing: 0.02em; 1121 flex-shrink: 0; 1122 } 1123 1124 .log-type-badge { 1125 display: inline-flex; 1126 align-items: center; 1127 font-size: 10px; 1128 font-weight: 600; 1129 text-transform: uppercase; 1130 letter-spacing: 0.02em; 1131 /* The color is driven by a CSS variable set in updated() */ 1132 color: var(--log-color, #b0c4de); 1133 min-width: 90px; 1134 max-width: 90px; 1135 white-space: nowrap; 1136 text-align: left; 1137 margin-left: 10px; 1138 flex-shrink: 0; 1139 } 1140 1141 .log-summary { 1142 flex: 1; 1143 color: #ccc; 1144 font-size: 11px; 1145 opacity: 0.9; 1146 white-space: nowrap; 1147 overflow: hidden; 1148 text-overflow: ellipsis; 1149 margin-left: 6px; 1150 font-weight: 400; 1151 min-width: 0; 1152 } 1153 1154 .log-content { 1155 display: flex; 1156 align-items: center; 1157 width: 100%; 1158 min-width: 0; 1159 } 1160 1161 /* 1162 * The :host(.error-status) selector is no longer needed, 1163 * as all styling is now handled by setting CSS variables below. 1164 * This makes the component's styling more self-contained. 1165 */ 1166 `],e$([ep({attribute:!1})],eQ.prototype,"log",2),e$([ep({type:Boolean})],eQ.prototype,"isExpanded",2),e$([ep()],eQ.prototype,"onToggle",2),eQ=e$([ed("single-log")],eQ);var e0=class extends el{constructor(){super(),this.logs=[],this.expandedLogIds=new Set,this.MAX_LOGS=100,this.logIdCounter=0,this.noContentMessage="No logs available",this._abortController=null,this._eventListeners=new Map,this.handleLogLocationChange=e=>{this.logLocation=e},this.handleFilterChange=(e,t)=>
1166{this.eventsEnabled={...this.eventsEnabled,[e]:t},t?this.addForesightEventListener(e):this.removeForesightEventListener(e)},this.handleLogToggle=e=>{let t=new Set(this.expandedLogIds);t.has(e)?t.delete(e):t.add(e),this.expandedLogIds=t};let{logging:{logLocation:e,...t}}=tt.instance.devtoolsSettings;this.eventsEnabled=t,this.logLocation=e,this.logDropdown=[{value:"controlPanel",label:"Control Panel",title:"Log only to the control panel",icon:eS},{value:"console",label:"Console",title:"Log only to the console",icon:e_},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:eT},{value:"none",label:"None",title:"Dont log anywhere",icon:eE}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:eM},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:eM},{value:"elementReactivated",label:"Element Reactivated",title:"Show when element gets reactivated after stale time has passed",icon:eM},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:eM},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:eM},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:eM},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:eM},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:eM},{value:"deviceStrategyChanged",label:"Strategy Changed",title:"Show strategy change events",icon:eM}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([,e])=>e).map(([e])=>e)}shouldShowPerformanceWarning(){let e="console"===this.logLocation||"both"===this.logLocation,t=this.eventsEnabled.mouseTrajectoryUpdate||this.eventsEnabled.scrollTrajectoryUpdate||this.eventsEnabled.elementDataUpdated;return e&&t}getNoLogsMessage(){return 0===Object.values(this.eventsEnabled).filter(Boolean).length?"Logging for all events is turned off":"console"===this.logLocation?"No logs to display. Logging location is set to console - check browser console for events.":"none"===this.logLocation?"No logs to display. Logging location is set to none":"Interact with Foresight to generate events."}clearLogs(){this.logs=[],this.expandedLogIds.clear(),this.noContentMessage="Logs cleared"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController,this.setupDynamicEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this.removeAllEventListeners()}setupDynamicEventListeners(){Object.entries(this.eventsEnabled).forEach(([e,t])=>{t&&this.addForesightEventListener(e)})}addForesightEventListener(e){if(this._eventListeners.has(e))return;let t=t=>{this.handleEvent(e,t)};this._eventListeners.set(e,t),ev.X.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(ev.X.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{ev.X.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return({elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"})[e]||"#ffffff"}handleEvent(e,t){if("none"!==this.logLocation){if("console"===this.logLocation||"both"===this.logLocation){let i=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${i}; font-weight: bold;`,t)}("controlPanel"===this.logLocation||"both"===this.logLocation)&&this.addEventLog(t)}}addLog(e){this.logs.unshift(e),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}logManagerData(){"none"!==this.logLocation&&(("console"===this.logLocation||"both"===this.logLocation)&&console.log(ev.X.instance.getManagerData),("controlPanel"===this.logLocation||"both"===this.logLocation)&&this.addManagerLog())}addManagerLog(){var e,t;let i,n,o=(e=ev.X.instance.getManagerData,t=(++this.logIdCounter).toString(),i={}
1166,e.eventListeners.forEach((e,t)=>{i[t]=e.length}),n=[],e.registeredElements.forEach((e,t)=>{let{element:i,...o}=e;n.push({...o,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:i,managerSettings:e.globalSettings,registeredElements:n,loadedModules:e.loadedModules,summary:`${n.length} elements, ${Object.values(i).flat().length} listeners, 1167 ${e.globalCallbackHits.total} hits`});this.addLog(o)}addEventLog(e){let t=function(e,t){try{switch(e.type){case"elementRegistered":return{type:"elementRegistered",name:e.elementData.name,id:e.elementData.element.id||"",callbackInfo:e.elementData.callbackInfo,hitslop:e.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),meta:e.elementData.meta,logId:t,summary:1===e.elementData.registerCount?e.elementData.name:`${e.elementData.name} - ${eY(e.elementData.registerCount)} time`};case"elementReactivated":return{type:"elementReactivated",name:e.elementData.name,id:e.elementData.element.id||"",callbackInfo:e.elementData.callbackInfo,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),meta:e.elementData.meta,logId:t,summary:1===e.elementData.registerCount?e.elementData.name:`${e.elementData.name} - ${eY(e.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",name:e.elementData.name,id:e.elementData.element.id||"",meta:e.elementData.meta,callbackInfo:e.elementData.callbackInfo,wasLastRegisteredElement:e.wasLastRegisteredElement,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,summary:`${e.elementData.name} - ${e.unregisterReason}`};case"elementDataUpdated":return{type:"elementDataUpdated",name:e.elementData.name,updatedProps:e.updatedProps||[],callbackInfo:e.elementData.callbackInfo,isIntersecting:e.elementData.isIntersectingWithViewport,meta:e.elementData.meta,localizedTimestamp:new Date().toLocaleTimeString(),logId:t,summary:`${e.elementData.name} - ${e.updatedProps.toString()}`};case"callbackInvoked":return{type:"callbackInvoked",name:e.elementData.name,hitType:e.hitType,callbackInfo:e.elementData.callbackInfo,meta:e.elementData.meta,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,summary:`${e.elementData.name} - ${e.hitType.kind}`};case"callbackCompleted":{var i;let n=(i=e.elementData.callbackInfo.lastCallbackRuntime||0,`${(i/1e3).toFixed(4)} s`);return{type:"callbackCompleted",name:e.elementData.name,hitType:e.hitType,callbackInfo:e.elementData.callbackInfo,meta:e.elementData.meta,wasLastActiveElement:e.wasLastActiveElement,elapsed:n,localizedTimestamp:new Date(e.timestamp).toLocaleTimeString(),logId:t,status:e.elementData.callbackInfo.lastCallbackStatus,errorMessage:e.elementData.callbackInfo.lastCallbackErrorMessage,summary:`${e.elementData.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} \u2192 ${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:""}}}(e,(++this.logIdCounter).toString());"serializationError"===t.type?console.error(t.error,t.errorMessage):this.addLog(t)}render(){return F` 1168 <tab-header> 1169 <div slot="chips" class="chips-container"> 1170 <chip-element title="Number of logged events (Max ${this.MAX_LOGS})"> 1171 ${this.logs.length} events 1172 </chip-element> 1173 </div> 1174 <div slot="actions"> 1175 ${this.shouldShowPerformanceWarning()?F` 1176 <div 1177 class="warning-container" 1178 title="Console logging can be slow with frequent trajectory events. 1179Consider using 'Control Panel' only for better performance." 1180 > 1181 ${eU} 1182 </div> 1183 `:""} 1184 <single-select-dropdown 1185 .dropdownOptions="${this.logDropdown}" 1186 .selectedOptionValue="${this.logLocation}" 1187 .onSelectionChange="${this.handleLogLocationChange}" 1188 ></single-select-dropdown> 1189 1190 <multi-select-dropdown 1191 .dropdownOptions="${this.filterDropdown}"
1192 .selectedValues="${this.getSelectedEventFilters()}" 1193 .onSelectionChange="${this.handleFilterChange}" 1194 ></multi-select-dropdown> 1195 <button 1196 class="single-button" 1197 title="Log the state from the manager" 1198 @click="${this.logManagerData}" 1199 > 1200 ${ej} 1201 </button> 1202 <button 1203 class="single-button" 1204 title="Clear all logs" 1205 ?disabled="${0===this.logs.length}" 1206 @click="${this.clearLogs}" 1207 > 1208 ${eO} 1209 </button> 1210 </div> 1211 </tab-header> 1212 <tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!this.logs.length}> 1213 ${0===this.logs.length?F`<div class="no-items">${this.getNoLogsMessage()}</div>`:ey(this.logs,e=>F` 1214 <single-log 1215 .log=${e} 1216 .isExpanded=${this.expandedLogIds.has(e.logId)} 1217 .onToggle=${this.handleLogToggle} 1218 ></single-log> 1219 `)} 1220 </tab-content> 1221 `}};e0.styles=[l` 1222 :host { 1223 display: flex; 1224 flex-direction: column; 1225 height: 100%; 1226 } 1227 1228 .chips-container { 1229 display: flex; 1230 gap: 4px; 1231 } 1232 1233 .single-button { 1234 background: none; 1235 border: none; 1236 color: white; 1237 cursor: pointer; 1238 padding: 6px; 1239 display: inline-flex; 1240 align-items: center; 1241 justify-content: center; 1242 transition: all 0.2s ease; 1243 vertical-align: top; 1244 } 1245 1246 .single-button svg { 1247 width: 16px; 1248 height: 16px; 1249 stroke: white; 1250 transition: stroke 0.2s; 1251 } 1252 1253 .single-button:hover { 1254 background-color: rgba(176, 196, 222, 0.1); 1255 } 1256 1257 .single-button:hover svg { 1258 stroke: #b0c4de; 1259 } 1260 1261 .single-button:disabled { 1262 opacity: 0.4; 1263 cursor: not-allowed; 1264 } 1265 1266 .single-button:disabled:hover { 1267 background: none; 1268 } 1269 1270 .single-button:disabled svg { 1271 stroke: #666; 1272 } 1273 1274 .no-items { 1275 display: flex; 1276 align-items: center; 1277 justify-content: center; 1278 height: 200px; 1279 text-align: center; 1280 font-family: "Courier New", monospace; 1281 font-style: italic; 1282 padding: 20px; 1283 color: #999; 1284 } 1285 1286 .warning-container { 1287 background: none; 1288 border: none; 1289 color: #ffc107; 1290 cursor: help; 1291 padding: 6px; 1292 display: inline-flex; 1293 align-items: center; 1294 justify-content: center; 1295 transition: all 0.2s ease; 1296 vertical-align: top; 1297 } 1298 1299 .warning-container svg { 1300 width: 16px; 1301 height: 16px; 1302 stroke: #ffc107; 1303 fill: none; 1304 transition: stroke 0.2s; 1305 } 1306 1307 .warning-container:hover { 1308 background-color: rgba(255, 193, 7, 0.1); 1309 } 1310 1311 .warning-container:hover svg { 1312 stroke: #ffdc3e; 1313 } 1314 `],e$([eg()],e0.prototype,"logDropdown",2),e$([eg()],e0.prototype,"filterDropdown",2),e$([eg()],e0.prototype,"logLocation",2),e$([eg()],e0.prototype,"eventsEnabled",2),e$([eg()],e0.prototype,"logs",2),e$([eg()],e0.prototype,"expandedLogIds",2),e$([ep()],e0.prototype,"noContentMessage",2),e0=e$([ed("log-tab")],e0);var e2="points",e1=class extends el{constructor(){super(...arguments),this.header="",this.description=""}render(){return F`<div class="setting-item"> 1315 <label> 1316 <span class="setting-header">${this.header}</span> 1317 <span class="setting-description"> ${this.description} </span> 1318 </label> 1319 <div class="setting-controls"> 1320 <slot name="controls"></slot> 1321 </div> 1322 </div>`}};e1.styles=[l` 1323 .setting-item { 1324 display: flex; 1325 align-items: center; 1326 gap: 12px; 1327 padding: 10px 0; 1328 border-bottom: 1px solid rgba(80, 80, 80, 0.2); 1329 } 1330 1331 .setting-item:last-child { 1332 border-bottom: none; 1333 } 1334 .setting-controls { 1335 display: flex; 1336 align-items: center; 1337 gap: 8px; 1338 flex-shrink: 0; 1339 } 1340 .setting-description { 1341 font-size: 11px; 1342 color: #9e9e9e; 1343 line-height: 1.3; 1344 font-weight: normal; 1345 } 1346 .setting-item label { 1347 flex: 1; 1348 display: flex; 1349 flex-direction: column; 1350 gap: 4px; 1351 font-weight: 500; 1352 color: #fff; 1353 font-size: 13px; 1354 min-width: 180px; 1355 } 1356 .setting-header { 1357 font-weight: 500; 1358 color: #fff; 1359 font-size: 13px; 1360 } 1361 `],e$([ep({type:String})],e1.prototype,"header",2),e$([ep({type:String})],e1.prototype,"description",2),e1=e$([ed("setting-item")],e1);var e4=class extends el{constructor(){super(...arguments),this.isChecked=!1,this.header="",this.description="",this.setting="enableMousePrediction"}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let e=t.checked;"showNameTags"===this.setting?this.dispatchEvent(new CustomEvent("setting-changed",{detail:{setting:this.setting,value:e},bubbles:!0})):ev.X.instance.alterGlobalSettings({[this.setting]:e})}}render(){return F`<setting-item header=${this.header} description=${this.description}> 1362 <input 1363 slot="controls" 1364 type="checkbox" 1365 .checked=${this.isChecked} 1366 @change=${this.handleCheckboxChange} 1367 /> 1368 </setting-item>`}};e4.styles=[l` 1369 input[type="checkbox"] { 1370 appearance: none; 1371 -webkit-appearance: none; 1372 -moz-appearance: none; 1373 position: relative; 1374 width: 44px; 1375 height: 22px; 1376 background-color: #444; 1377 cursor: pointer; 1378 outline: none; 1379 transition: all 0.3s ease; 1380 vertical-align: middle; 1381 flex-shrink: 0; 1382 margin: 0; 1383 border: 2px solid #555; 1384 } 1385 1386 input[type="checkbox"]::before { 1387 content: ""; 1388 position: absolute; 1389 width: 16px; 1390 height: 16px; 1391 background-color: white; 1392 top: 1px; 1393 left: 1px; 1394 transition: all 0.3s ease; 1395 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 1396 } 1397 1398 input[type="checkbox"]:checked { 1399 background-color: #b0c4de; 1400 border-color: #b0c4de; 1401 } 1402 1403 input[type="checkbox"]:checked::before { 1404 transform: translateX(22px); 1405 background-color: white; 1406 } 1407 1408 input[type="checkbox"]:hover { 1409 box-shadow: 0 0 0 3px rgba(176, 196, 222, 0.1); 1410 } 1411 `],e$([ep({type:Boolean})],e4.prototype,"isChecked",2),e$([ep({type:String})],e4.prototype,"header",2),e$([ep({type:String})],e4.prototype,"description",2),e$([ep({type:String})],e4.prototype,"setting",2),e4=e$([ed("setting-item-checkbox")],e4);var e6=class extends el{constructor(){super(...arguments),this.minValue=0,this.maxValue=100,this.currentValue=50,this.unit="px",this.header="",this.description="",this.setting="tabOffset",this.displayValue=50}handleRangeInput(e){let t=e.target;t instanceof HTMLInputElement&&(this.displayValue=parseInt(t.value,10))}handleRangeChange(e){let t=e.target;if(t instanceof HTMLInputElement){let e=parseInt(t.value,10);this.displayValue=e,ev.X.instance.alterGlobalSettings({[this.setting]:e})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return F`<setting-item header=${this.header} description=${this.description}> 1412 <div slot="controls" class="range-wrapper"> 1413 <input 1414 slot="controls" 1415 type="range" 1416 min="${this.minValue}" 1417 max="${this.maxValue}" 1418 step="1" 1419 .value=${this.displayValue}
1420 @input=${this.handleRangeInput} 1421 @change=${this.handleRangeChange} 1422 /> 1423 <span class="setting-range-value">${this.displayValue} ${this.unit}</span> 1424 </div> 1425 </setting-item>`}};e6.styles=[l` 1426 .setting-range-value { 1427 font-size: 12px; 1428 color: #b0c4de; 1429 font-weight: 500; 1430 min-width: 45px; 1431 text-align: right; 1432 } 1433 1434 .range-wrapper { 1435 display: flex; 1436 align-items: center; 1437 gap: 8px; 1438 width: 100%; 1439 } 1440 1441 input[type="range"] { 1442 margin: 0; 1443 cursor: pointer; 1444 -webkit-appearance: none; 1445 appearance: none; 1446 background: transparent; 1447 height: 22px; 1448 vertical-align: middle; 1449 width: 100px; 1450 } 1451 1452 input[type="range"]::-webkit-slider-runnable-track { 1453 height: 6px; 1454 background: #444; 1455 border: 1px solid #555; 1456 } 1457 1458 input[type="range"]::-moz-range-track { 1459 height: 6px; 1460 background: #444; 1461 border: 1px solid #555; 1462 } 1463 1464 input[type="range"]::-webkit-slider-thumb { 1465 -webkit-appearance: none; 1466 appearance: none; 1467 margin-top: -7px; 1468 background: #b0c4de; 1469 height: 20px; 1470 width: 20px; 1471 border: 2px solid #333; 1472 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 1473 transition: all 0.2s ease; 1474 } 1475 1476 input[type="range"]::-moz-range-thumb { 1477 background: #b0c4de; 1478 height: 20px; 1479 width: 20px; 1480 border: 2px solid #333; 1481 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 1482 transition: all 0.2s ease; 1483 } 1484 1485 input[type="range"]:hover::-webkit-slider-thumb { 1486 transform: scale(1.1); 1487 box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2); 1488 } 1489 1490 input[type="range"]:hover::-moz-range-thumb { 1491 transform: scale(1.1); 1492 box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2); 1493 } 1494 `],e$([ep({type:Number})],e6.prototype,"minValue",2),e$([ep({type:Number})],e6.prototype,"maxValue",2),e$([ep({type:Number})],e6.prototype,"currentValue",2),e$([ep({type:String})],e6.prototype,"unit",2),e$([ep({type:String})],e6.prototype,"header",2),e$([ep({type:String})],e6.prototype,"description",2),e$([ep({type:String})],e6.prototype,"setting",2),e$([eg()],e6.prototype,"displayValue",2),e6=e$([ed("setting-item-range")],e6);var e3=class extends el{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:F`<span>Touch</span>`},{value:"viewport",label:"Viewport Entry",title:"Execute callbacks when registered elements enter the viewport",icon:F`<span>Viewport</span>`},{value:"none",label:"None",title:"Disable touch device prediction",icon:F`<span>None</span>`}],this.minimumConnectionTypeOptions=[{value:"slow-2g",label:"Slow 2G",title:"Slow 2G",icon:F`<span>Slow 2G</span>`},{value:"2g",label:"2G",title:"2G",icon:F`<span>2G</span>`},{value:"3g",label:"3G",title:"3G",icon:F`<span>3G</span>`},{value:"4g",label:"4G",title:"4G",icon:F`<span>4G</span>`}],this.cornerOptions=[{value:"top-left",label:"Top Left",title:"Position control panel in top-left corner",icon:F`<span>â</span>`},{value:"top-right",label:"Top Right",title:"Position control panel in top-right corner",icon:F`<span>â</span>`},{value:"bottom-left",label:"Bottom Left",title:"Position control panel in bottom-left corner",icon:F`<span>â</span>`},{value:"bottom-right",label:"Bottom Right",title:"Position control panel in bottom-right corner",icon:F`<span>â</span>`}],this._abortController=null,this._handleTouchDeviceStrategyChange=e=>{ev.X.instance.alterGlobalSettings({touchDeviceStrategy:e})},this._handleMinimumConnectionTypeChange=e=>{ev.X.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=tt.instance.devtoolsSettings,t=ev.X.instance.getManagerData.globalSettings;this.devtoolsSettings=Object.assign({},e),this.managerSettings=Object.assign({},t),this.currentCorner=this.getCurrentCorner(),this.initialSettings={devtools:Object.assign({},e),manager:Object.assign({},t)}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;ev.X.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 i=this.initialSettings.manager[t],n=this.managerSettings[t];i!==n&&e.push({setting:t,oldValue:i,newValue:n})}}_checkDevtoolsSettingsChanges(e){for(let t of["showNameTags"]){let i=this.initialSettings.devtools[t],n=this.devtoolsSettings[t];i!==n&&e.push({setting:t,oldValue:i,newValue:n})}}_handleDevtoolsSettingChange(e){let{setting:t,value:i}=e.detail;"showNameTags"===t&&(this.devtoolsSettings={...this.devtoolsSettings,showNameTags:i},tt.instance.alterDevtoolsSettings({showNameTags:i}),this._updateChangedSettings())}getCurrentCorner(){try{let e=localStorage.getItem("foresight-devtools-control-panel-corner");if(e&&["top-left","top-right","bottom-left","bottom-right"].includes(e))return e}catch(e){console.warn("ForesightDevtools: Failed to load corner from localStorage:",e)}return"bottom-right"}async handleCopySettings(){if(this.managerSettings)try{let e=this.generateSettingsCode(this.managerSettings);navigator.clipboard&&navigator.clipboard.writeText&&await navigator.clipboard.writeText(e)}catch(e){console.error("Failed to copy settings code:",e)}}generateSettingsCode(e){let t={enableMousePrediction:e.enableMousePrediction,enableTabPrediction:e.enableTabPrediction,enableScrollPrediction:e.enableScrollPrediction,positionHistorySize:e.positionHistorySize,trajectoryPredictionTime:e.trajectoryPredictionTime,tabOffset:e.tabOffset,scrollMargin:e.scrollMargin,touchDeviceStrategy:e.touchDeviceStrategy,minimumConnectionType:e.minimumConnectionType};return`ForesightManager.initialize(${JSON.stringify(t,null,2)})`}
1494render(){if(!this.managerSettings||!this.devtoolsSettings)return F`<tab-content 1495 .noContentMessage=${"Loading settings..."} 1496 .hasContent=${!1} 1497 ></tab-content>`;let e=this.managerSettings,t=this.changedSettings.length>0?`Settings that have been changed this session compared to your initialized settings. 1498Click on the copy icon to easely copy the new setting into your project 1499 1500`+this.changedSettings.map(e=>`${e.setting}: ${JSON.stringify(e.oldValue)} -> ${JSON.stringify(e.newValue)}`).join(` 1501`):"No settings changed from initial values";return F` 1502 <tab-header> 1503 <div slot="chips" class="chips-container"> 1504 <chip-element .title=${t}> ${this.changedSettings.length} changed </chip-element> 1505 </div> 1506 <div slot="actions"> 1507 <copy-icon 1508 title="Copy current settings as code" 1509 .onCopy=${()=>this.handleCopySettings()} 1510 ></copy-icon> 1511 </div> 1512 </tab-header> 1513 1514 <tab-content .hasContent=${!0}> 1515 <div class="settings-content"> 1516 <div class="settings-section"> 1517 <div class="settings-group"> 1518 <h4>Mouse Prediction</h4> 1519 <setting-item-checkbox 1520 .isChecked=${e.enableMousePrediction} 1521 header="Enable Mouse Prediction" 1522 description="Execute callbacks when mouse is ${e.trajectoryPredictionTime}ms away from registered elements in mouse direction" 1523 setting="enableMousePrediction" 1524 ></setting-item-checkbox> 1525 <setting-item-range 1526 .currentValue=${e.trajectoryPredictionTime} 1527 .maxValue=${200} 1528 .minValue=${10} 1529 .unit=${"ms"} 1530 header="Prediction Time" 1531 description="How far into the future to calculate mouse trajectory path" 1532 setting="trajectoryPredictionTime" 1533 ></setting-item-range> 1534 <setting-item-range 1535 .currentValue=${e.positionHistorySize} 1536 .maxValue=${30} 1537 .minValue=${2} 1538 .unit=${e2} 1539 header="Position History Size" 1540 description="How far into the future, in ${e2}, to calculate mouse trajectory path" 1541 setting="positionHistorySize" 1542 > 1543 </setting-item-range> 1544 </div> 1545 <div class="settings-group"> 1546 <h4>Keyboard Navigation</h4> 1547 <setting-item-checkbox 1548 .isChecked=${e.enableTabPrediction} 1549 header="Enable Tab Prediction" 1550 description="Execute callbacks when user ${e.tabOffset} tabbable elements away from registered elements in tab direction" 1551 setting="enableTabPrediction" 1552 > 1553 </setting-item-checkbox> 1554 <setting-item-range 1555 .currentValue=${e.tabOffset} 1556 .maxValue=${20} 1557 .minValue=${0} 1558 .unit=${"tabs"} 1559 header="Tab Offset" 1560 description="Number of tabbable elements to look ahead when predicting navigation" 1561 setting="tabOffset" 1562 > 1563 </setting-item-range> 1564 </div> 1565 1566 <div class="settings-group"> 1567 <h4>Scroll Prediction</h4> 1568 <setting-item-checkbox 1569 .isChecked=${e.enableScrollPrediction} 1570 header="Enable Scroll Prediction" 1571 description="Execute callbacks when user is ${e.scrollMargin}px away from registered elements in scroll direction" 1572 setting="enableScrollPrediction" 1573 ></setting-item-checkbox> 1574 <setting-item-range 1575 .currentValue=${e.scrollMargin} 1576 .maxValue=${300} 1577 .minValue=${30} 1578 .unit=${"px"} 1579 header="Scroll Margin" 1580 description="Pixel distance to check from mouse position in scroll direction" 1581 setting="scrollMargin" 1582 ></setting-item-range> 1583 </div> 1584 1585 <div class="settings-group"> 1586 <h4>Touch Device</h4> 1587 <setting-item 1588 header="Touch Device Strategy" 1589 description="How to handle prediction on touch devices" 1590 > 1591 <single-select-dropdown 1592 slot="controls" 1593 .dropdownOptions=${this.touchDeviceStrategyOptions} 1594 .selectedOptionValue=${e.touchDeviceStrategy} 1595 .onSelectionChange=${this._handleTouchDeviceStrategyChange} 1596 ></single-select-dropdown> 1597 </setting-item> 1598 </div> 1599 1600 <div class="settings-group"> 1601 <h4>Minimum Connection</h4> 1602 <setting-item 1603 header="Minimum Connection Type" 1604 description="Minimum connection speed required to register elements" 1605 > 1606 <single-select-dropdown 1607 slot="controls" 1608 .dropdownOptions=${this.minimumConnectionTypeOptions} 1609 .selectedOptionValue=${e.minimumConnectionType} 1610 .onSelectionChange=${this._handleMinimumConnectionTypeChange} 1611 ></single-select-dropdown> 1612 </setting-item> 1613 </div> 1614 1615 <!-- Developer Tools Group --> 1616 <div class="settings-group"> 1617 <h4>Developer Tools</h4> 1618 <setting-item-checkbox 1619 .isChecked=${this.devtoolsSettings.showNameTags} 1620 header="Show Name Tags" 1621 description="Display name tags over each registered element in the debugger" 1622 setting="showNameTags" 1623 @setting-changed=${this._handleDevtoolsSettingChange} 1624 ></setting-item-checkbox> 1625 <setting-item 1626 header="Panel Position" 1627 description="Choose which corner to position the control panel" 1628 > 1629 <single-select-dropdown 1630 slot="controls" 1631 .dropdownOptions=${this.cornerOptions} 1632 .selectedOptionValue=${this.currentCorner} 1633 .onSelectionChange=${this._handleCornerChange} 1634 ></single-select-dropdown> 1635 </setting-item> 1636 </div> 1637 </div> 1638 </div> 1639 </tab-content> 1640 `}};e3.styles=l` 1641 :host { 1642 display: flex; 1643 flex-direction: column; 1644 height: 100%; 1645 } 1646 1647 .settings-content { 1648 display: block; 1649 } 1650 1651 .settings-section { 1652 display: flex; 1653 flex-direction: column; 1654 gap: 16px; 1655 } 1656 1657 .settings-group { 1658 background: rgba(30, 30, 30, 0.6); 1659 padding: 16px; 1660 border: 1px solid rgba(176, 196, 222, 0.1); 1661 } 1662 1663 .settings-group h4 { 1664 margin: 0 0 12px 0; 1665 font-size: 14px; 1666 font-weight: 600; 1667 color: #b0c4de; 1668 border-bottom: 1px solid rgba(176, 196, 222, 0.2); 1669 padding-bottom: 8px; 1670 } 1671 `,e$([eg()],e3.prototype,"managerSettings",2),e$([eg()],e3.prototype,"initialSettings",2),e$([eg()],e3.prototype,"devtoolsSettings",2),e$([eg()],e3.prototype,"changedSettings",2),e$([eg()],e3.prototype,"currentCorner",2),e$([eg()],e3.prototype,"touchDeviceStrategyOptions",2),e$([eg()],e3.prototype,"minimumConnectionTypeOptions",2),e$([eg()],e3.prototype,"cornerOptions",2),e3=e$([ed("settings-tab")],e3);var e5=class extends el{constructor(){super(),this.isMinimized=tt.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="touch"===ev.X.instance.getManagerData.currentDeviceStrategy}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;ev.X.instance.addEventListener("deviceStrategyChanged",e=>{this.isTouchDevice="touch"===e.newStrategy,"touch"===e.newStrategy&&(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}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?"+":"â"}render(){return F` 1672 <div class="control-wrapper ${this.corner} ${this.isMinimized?"minimized":""}"> 1673 <div class="title-wrapper"> 1674 <button @click="${this.handleMinimizeClick}" class="minimize-button"> 1675 ${this.getMinimizeSymbol()} 1676 </button> 1677 <h1>Foresight DevTools</h1> 1678 <div></div> 1679 </div> 1680 1681 <div 1682 class="touch-device-warning ${this.isMinimized||!this.isTouchDevice||this.isWarningDismissed?"hidden":""}" 1683 > 1684 <div class="warning-content">
1685 <span class="warning-icon">â ï¸</span> 1686 <span>Touch device mode: Overlays and visibility sorting not available</span> 1687 </div> 1688 <button @click="${this.dismissWarning}" class="dismiss-button" title="Dismiss warning"> 1689 à 1690 </button> 1691 </div> 1692 1693 <div class="tab-container ${this.isMinimized?"hidden":""}"> 1694 <tab-selector 1695 .activeTab="${this.activeTab}" 1696 @tab-change="${this._handleTabChange}" 1697 ></tab-selector> 1698 1699 <div class="tab-content"> 1700 <log-tab class=${eb({active:"logs"===this.activeTab})}></log-tab> 1701 <element-tab class=${eb({active:"elements"===this.activeTab})}></element-tab> 1702 <settings-tab 1703 class=${eb({active:"settings"===this.activeTab})} 1704 ></settings-tab> 1705 </div> 1706 </div> 1707 </div> 1708 `}};e5.styles=l` 1709 .control-wrapper { 1710 --panel-offset: 10px; 1711 padding: 12px; 1712 position: fixed; 1713 background-color: rgba(0, 0, 0, 0.9); 1714 color: white; 1715 font-family: Arial, sans-serif; 1716 font-size: 13px; 1717 z-index: 10001; 1718 pointer-events: auto; 1719 display: flex; 1720 flex-direction: column; 1721 width: 450px; 1722 height: 450px; 1723 transition: 1724 width 0.3s ease, 1725 height 0.3s ease; 1726 box-sizing: border-box; 1727 border-radius: 8px; 1728 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 1729 } 1730 1731 .control-wrapper.top-left { 1732 top: var(--panel-offset); 1733 left: var(--panel-offset); 1734 } 1735 .control-wrapper.top-right { 1736 top: var(--panel-offset); 1737 right: var(--panel-offset); 1738 } 1739 .control-wrapper.bottom-left { 1740 bottom: var(--panel-offset); 1741 left: var(--panel-offset); 1742 } 1743 .control-wrapper.bottom-right { 1744 bottom: var(--panel-offset); 1745 right: var(--panel-offset); 1746 } 1747 1748 .control-wrapper.minimized { 1749 width: 230px; 1750 height: 45px; 1751 } 1752 1753 .title-wrapper { 1754 display: flex; 1755 justify-content: space-between; 1756 align-items: center; 1757 padding: 0; 1758 flex-shrink: 0; 1759 } 1760 1761 .title-wrapper h1 { 1762 margin: 0; 1763 font-size: 15px; 1764 } 1765 1766 .minimize-button { 1767 background: none; 1768 border: none; 1769 color: white; 1770 font-size: 22px; 1771 cursor: pointer; 1772 line-height: 1; 1773 padding: 0; 1774 } 1775 1776 .tab-container { 1777 display: flex; 1778 flex-direction: column; 1779 flex: 1; 1780 overflow: hidden; 1781 } 1782 1783 .tab-container.hidden { 1784 display: none; 1785 } 1786 1787 .tab-content { 1788 flex: 1; 1789 position: relative; 1790 } 1791 1792 .tab-content > * { 1793 display: none; 1794 } 1795 1796 .tab-content > .active { 1797 display: flex; 1798 position: absolute; 1799 top: 0; 1800 left: 0; 1801 width: 100%; 1802 height: 100%; 1803 } 1804 1805 .touch-device-warning { 1806 background-color: rgba(255, 193, 7, 0.9); 1807 color: #000; 1808 padding: 8px 12px; 1809 margin: 8px 0; 1810 border-radius: 4px; 1811 font-size: 12px; 1812 font-weight: 500; 1813 display: flex; 1814 align-items: center; 1815 justify-content: space-between; 1816 gap: 8px; 1817 } 1818 1819 .touch-device-warning.hidden { 1820 display: none; 1821 } 1822 1823 .warning-content { 1824 display: flex; 1825 align-items: center; 1826 gap: 8px; 1827 } 1828 1829 .warning-icon { 1830 font-weight: bold; 1831 font-size: 14px; 1832 } 1833 1834 .dismiss-button { 1835 background: none; 1836 border: none; 1837 color: #000; 1838 font-size: 16px; 1839 cursor: pointer; 1840 padding: 0; 1841 line-height: 1; 1842 font-weight: bold; 1843 } 1844 1845 .dismiss-button:hover { 1846 opacity: 0.7; 1847 } 1848 `,e$([eg()],e5.prototype,"activeTab",2),e$([eg()],e5.prototype,"isMinimized",2),e$([eg()],e5.prototype,"isTouchDevice",2),e$([eg()],e5.prototype,"isWarningDismissed",2),e$([eg()],e5.prototype,"corner",2),e5=e$([ed("control-panel")],e5);var e9=class extends el{constructor(){super(...arguments),this.overlayMap=new Map,this.callbackAnimations=new Map,this._abortController=null}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;ev.X.instance.addEventListener("elementRegistered",e=>{e.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(e.elementData)},{signal:e}),ev.X.instance.addEventListener("elementUnregistered",e=>{this.removeElementOverlay(e.elementData)},{signal:e}),ev.X.instance.addEventListener("elementReactivated",e=>{e.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(e.elementData)},{signal:e}),ev.X.instance.addEventListener("elementDataUpdated",e=>{e.updatedProps.includes("bounds")&&e.elementData.callbackInfo.isCallbackActive&&this.createOrUpdateElementOverlay(e.elementData),e.updatedProps.includes("visibility")&&(e.elementData.isIntersectingWithViewport||this.removeElementOverlay(e.elementData))},{signal:e}),ev.X.instance.addEventListener("callbackInvoked",e=>{this.highlightElementCallback(e.elementData,e.hitType)},{signal:e}),ev.X.instance.addEventListener("callbackCompleted",e=>{this.unhighlightElementCallback(e.elementData),this.removeElementOverlay(e.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",e=>{this.updateNameTagVisibility(e.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let i=document.createElement("div");i.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(i);let n={expandedOverlay:t,nameLabel:i};return this.overlayMap.set(e.element,n),n}updateElementOverlays(e,t){let{expandedOverlay:i,nameLabel:n}=e,{expandedRect:o}=t.elementBounds,s=o.right-o.left,a=o.bottom-o.top;i.style.width=`${s}px`,i.style.height=`${a}px`,i.style.transform=`translate3d(${o.left}px, ${o.top}px, 0)`,tt.instance.devtoolsSettings.showNameTags?(n.textContent=t.name,n.style.display="block",n.style.transform=`translate3d(${o.left}px, ${o.top-25}px, 0)`):n.style.display="none"}createOrUpdateElementOverlay(e){let t=this.overlayMap.get(e.element);t||(t=this.createElementOverlays(e)),this.updateElementOverlays(t,e)}removeElementOverlay(e){let t=this.overlayMap.get(e.element);t&&(t.expandedOverlay.remove(),t.nameLabel.remove(),this.overlayMap.delete(e.element)),this.clearCallbackA
1848nimationTimeout(e.element)}clearCallbackAnimationTimeout(e){let t=this.callbackAnimations.get(e);t&&(clearTimeout(t.timeoutId),this.callbackAnimations.delete(e))}highlightElementCallback(e,t){let i=this.overlayMap.get(e.element);if(i)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":i.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":i.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":i.expandedOverlay.classList.add("invoked-by-tab")}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(!t)return;let i=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:i})}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let i=t.nameLabel;e?i.style.display="block":i.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this.callbackAnimations.forEach(e=>{clearTimeout(e.timeoutId)}),this.callbackAnimations.clear(),this.overlayMap.clear(),this._abortController?.abort(),this._abortController=null}render(){return F` <div id="overlays-container"></div> `}};e9.styles=[l` 1849 :host { 1850 position: fixed; 1851 top: 0; 1852 left: 0; 1853 width: 100%; 1854 height: 100%; 1855 pointer-events: none; 1856 z-index: 9999; 1857 } 1858 1859 .expanded-overlay { 1860 position: absolute; 1861 will-change: transform, box-shadow; 1862 border: 1px dashed rgba(100, 116, 139, 0.4); 1863 background-color: rgba(100, 116, 139, 0.05); 1864 transition: 1865 border-color 0.2s ease, 1866 background-color 0.2s ease; 1867 } 1868 1869 .expanded-overlay.invoked-by-scroll { 1870 --glow-color-rgb: 234, 179, 8; 1871 border-color: #eab308; 1872 background-color: rgba(var(--glow-color-rgb), 0.1); 1873 animation: callback-glow 2s ease-in-out infinite; 1874 } 1875 1876 .expanded-overlay.invoked-by-mouse { 1877 --glow-color-rgb: 59, 130, 246; 1878 border-color: #3b82f6; 1879 background-color: rgba(var(--glow-color-rgb), 0.1); 1880 animation: callback-glow 2s ease-in-out infinite; 1881 } 1882 1883 .expanded-overlay.invoked-by-tab { 1884 --glow-color-rgb: 249, 115, 22; 1885 border-color: #f97316; 1886 background-color: rgba(var(--glow-color-rgb), 0.1); 1887 animation: callback-glow 2s ease-in-out infinite; 1888 } 1889 @keyframes callback-glow { 1890 0% { 1891 box-shadow: 0 0 5px 2px rgba(var(--glow-color-rgb), 0.3); 1892 } 1893 50% { 1894 box-shadow: 0 0 15px 4px rgba(var(--glow-color-rgb), 0.6); 1895 } 1896 100% { 1897 box-shadow: 0 0 5px 2px rgba(var(--glow-color-rgb), 0.3); 1898 } 1899 } 1900 1901 .name-label { 1902 position: absolute; 1903 top: 0; 1904 left: 0; 1905 will-change: transform; 1906 background-color: rgba(27, 31, 35, 0.85); 1907 backdrop-filter: blur(4px); 1908 color: white; 1909 padding: 4px 8px; 1910 font-size: 11px; 1911 font-family: 1912 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 1913 "Apple Color Emoji", "Segoe UI Emoji"; 1914 z-index: 10001; 1915 white-space: nowrap; 1916 pointer-events: none; 1917 } 1918 `],e$([eg()],e9.prototype,"overlayMap",2),e$([eg()],e9.prototype,"callbackAnimations",2),e$([(e,t,i)=>{let n,o,s;return n=e,o=t,(s={get(){let e;return e=this,e.renderRoot?.querySelector("#overlays-container")??null}}).configurable=!0,s.enumerable=!0,Reflect.decorate&&"object"!=typeof o&&Object.defineProperty(n,o,s),s}],e9.prototype,"containerElement",2),e9=e$([ed("element-overlays")],e9);var e8=class extends el{constructor(){super(...arguments),this._abortController=new AbortController,this._mousePredictionIsEnabled=ev.X.instance.getManagerData.globalSettings.enableMousePrediction,this._isVisible=!1,this._trajectoryStyles={},this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate3d(0px, 0px, 0) rotate(0deg)",width:"0px"})},this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1),this.requestUpdate()},this.handleTrajectoryUpdate=e=>{if(!this._mousePredictionIsEnabled)return;this._isVisible=!0;let{currentPoint:t,predictedPoint:i}=e.trajectoryPositions,n=i.x-t.x,o=i.y-t.y,s=Math.sqrt(n*n+o*o),a=57.29577951308232*Math.atan2(o,n);this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${a}deg)`,width:`${s}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;ev.X.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),ev.X.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),ev.X.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),ev.X.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),ev.X.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return F` <div class="trajectory-line" style=${ex(e)}></div> `}};e8.styles=[l` 1919 :host { 1920 display: block; 1921 } 1922 1923 .trajectory-line { 1924 position: absolute; 1925 top: 0; 1926 left: 0; 1927 will-change: transform, width; 1928 transform-origin: left center; 1929 height: 4px; 1930 background: linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.4)); 1931 z-index: 9999; 1932 border-radius: 2px; 1933 box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); 1934 } 1935 1936 .trajectory-line::after { 1937 content: ""; 1938 position: absolute; 1939 right: -6px; 1940 top: 50%; 1941 transform: translateY(-50%); 1942 width: 0; 1943 height: 0; 1944 border-left: 8px solid #3b82f6;
1945 border-top: 4px solid transparent; 1946 border-bottom: 4px solid transparent; 1947 filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6)); 1948 } 1949 `],e$([eg()],e8.prototype,"_mousePredictionIsEnabled",2),e$([eg()],e8.prototype,"_isVisible",2),e$([eg()],e8.prototype,"_trajectoryStyles",2),e8=e$([ed("mouse-trajectory")],e8);var e7=class extends el{constructor(){super(...arguments),this._abortController=new AbortController,this._scrollPredictionIsEnabled=ev.X.instance.getManagerData.globalSettings.enableScrollPrediction,this._scrollMargin=ev.X.instance.getManagerData.globalSettings.scrollMargin,this._isVisible=!1,this._trajectoryStyles={},this._isUpdateScheduled=!1,this._latestScrollTrajectory=null,this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate(0px, 0px) rotate(0deg)"})},this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let i=e.updatedSettings.find(e=>"scrollMargin"===e.setting);i&&(this._scrollMargin=i.newValue)},this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,this.renderScrollTrajectory()))},this.renderScrollTrajectory=()=>
1949{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,i=t.x-e.x,n=180*Math.atan2(t.y-e.y,i)/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${n}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;ev.X.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),ev.X.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),ev.X.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),ev.X.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),ev.X.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",width:`${this._scrollMargin}px`,...this._trajectoryStyles};return F` <div class="scroll-trajectory-line" style=${ex(e)}></div> `}};e7.styles=[l` 1950 :host { 1951 display: block; 1952 } 1953 1954 .scroll-trajectory-line { 1955 position: absolute; 1956 top: 0; 1957 left: 0; 1958 will-change: transform, width; 1959 transform-origin: left center; 1960 height: 4px; 1961 background: repeating-linear-gradient( 1962 90deg, 1963 #eab308 0px, 1964 #eab308 8px, 1965 transparent 8px, 1966 transparent 16px 1967 ); 1968 z-index: 9999; 1969 border-radius: 2px; 1970 animation: scroll-dash-flow 1.5s linear infinite; 1971 box-shadow: 0 0 12px rgba(234, 179, 8, 0.4); 1972 } 1973 1974 .scroll-trajectory-line::after { 1975 content: ""; 1976 position: absolute; 1977 right: -6px; 1978 top: 50%; 1979 transform: translateY(-50%); 1980 width: 0; 1981 height: 0; 1982 border-left: 8px solid #eab308;
1983 border-top: 4px solid transparent; 1984 border-bottom: 4px solid transparent; 1985 filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6)); 1986 animation: scroll-arrow-pulse 1.5s ease-in-out infinite; 1987 } 1988 1989 @keyframes scroll-dash-flow { 1990 0% { 1991 background-position: 0px 0px; 1992 } 1993 100% { 1994 background-position: 16px 0px; 1995 } 1996 } 1997 1998 @keyframes scroll-arrow-pulse { 1999 0%, 2000 100% { 2001 transform: translateY(-50%) scale(1); 2002 filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6)); 2003 } 2004 50% { 2005 transform: translateY(-50%) scale(1.2); 2006 filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8)); 2007 } 2008 } 2009 `],e$([eg()],e7.prototype,"_scrollPredictionIsEnabled",2),e$([eg()],e7.prototype,"_scrollMargin",2),e$([eg()],e7.prototype,"_isVisible",2),e$([eg()],e7.prototype,"_trajectoryStyles",2),e7=e$([ed("scroll-trajectory")],e7);var te=class extends el{constructor(){super(...arguments),this._abortController=null,this._strategy=ev.X.instance.getManagerData.currentDeviceStrategy,this.handleDeviceStrategyChange=e=>this._strategy=e.newStrategy}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;ev.X.instance.addEventListener("deviceStrategyChanged",this.handleDeviceStrategyChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}render(){return F` 2010 <div id="overlay-container"> 2011 ${"mouse"===this._strategy?F` 2012 <mouse-trajectory></mouse-trajectory> 2013 <scroll-trajectory></scroll-trajectory> 2014 <element-overlays></element-overlays> 2015 `:""} 2016 </div> 2017 `}};te.styles=[l` 2018 :host { 2019 display: block; 2020 } 2021 #overlay-container { 2022 position: fixed; 2023 top: 0; 2024 left: 0; 2025 pointer-events: none; 2026 z-index: 9999; 2027 } 2028 `],e$([eg()],te.prototype,"_strategy",2),te=e$([ed("debug-overlay")],te);var tt=class extends el{constructor(){super(),this.isInitialized=!1,this.devtoolsSettings={showDebugger:!0,isControlPanelDefaultMinimized:!1,showNameTags:!0,sortElementList:"visibility",logging:{logLocation:"controlPanel",callbackCompleted:!0,elementReactivated:!0,callbackInvoked:!0,elementDataUpdated:!1,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1,deviceStrategyChanged:!0}}}static createAndAppendInstance(){typeof window>"u"||typeof document>"u"||(tt._instance=document.createElement("foresight-devtools"),document.body.appendChild(tt._instance))}static initialize(e){if(tt._instance||tt.createAndAppendInstance(),!tt._instance)return tt._instance;let t=tt._instance;return t.isInitialized=!0,t.alterDevtoolsSettings(e),t}static get instance(){return tt._instance?tt._instance:tt.initialize()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}shouldUpdateSetting(e,t){return void 0!==e&&e!==t}updateLoggingSetting(e,t){this.shouldUpdateSetting(t,this.devtoolsSettings.logging[e])&&(this.devtoolsSettings.logging[e]=t)}alterDevtoolsSettings(e){void 0!==e&&(this.shouldUpdateSetting(e.showNameTags,this.devtoolsSettings.showNameTags)&&(this.devtoolsSettings.showNameTags=e.showNameTags,this.dispatchEvent(new CustomEvent("showNameTagsChanged",{detail:{showNameTags:e.showNameTags},bubbles:!0}))),this.shouldUpdateSetting(e.showDebugger,this.devtoolsSettings.showDebugger)&&(this.devtoolsSettings.showDebugger=e.showDebugger,this.requestUpdate()),this.shouldUpdateSetting(e.isControlPanelDefaultMinimized,this.devtoolsSettings.isControlPanelDefaultMinimized)&&(this.devtoolsSettings.isControlPanelDefaultMinimized=e.isControlPanelDefaultMinimized),this.shouldUpdateSetting(e.sortElementList,this.devtoolsSettings.sortElementList)&&(this.devtoolsSettings.sortElementList=e.sortElementList),e.logging&&(this.shouldUpdateSetting(e.logging.logLocation,this.devtoolsSettings.logging.logLocation)&&(this.devtoolsSettings.logging.logLocation=e.logging.logLocation),this.updateLoggingSetting("callbackCompleted",e.logging.callbackCompleted),this.updateLoggingSetting("callbackInvoked",e.logging.callbackInvoked),this.updateLoggingSetting("elementDataUpdated",e.logging.elementDataUpdated),this.updateLoggingSetting("elementRegistered",e.logging.elementRegistered),this.updateLoggingSetting("elementUnregistered",e.logging.elementUnregistered),this.updateLoggingSetting("managerSettingsChanged",e.logging.managerSettingsChanged),this.updateLoggingSetting("mouseTrajectoryUpdate",e.logging.mouseTrajectoryUpdate),this.updateLoggingSetting("scrollTrajectoryUpdate",e.logging.scrollTrajectoryUpdate),this.updateLoggingSetting("deviceStrategyChanged",e.logging.deviceStrategyChanged)))}cleanup(){this.requestUpdate()}render(){return this.isInitialized&&this.devtoolsSettings.showDebugger?F`<control-panel></control-panel> <debug-overlay></debug-overlay>`:F``}};tt.styles=[l` 2029 :host { 2030 display: block; 2031 } 2032 `],tt._instance=null,e$([eg()],tt.prototype,"isInitialized",2),tt=e$([ed("foresight-devtools")],tt)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.