@andrewshell/socklog - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

dist/components/socklog-sender.d.ts

+import { LitElement } from 'lit';
+import type { WebSocketClient } from '../core/websocket-client';
+export declare class SocklogSender extends LitElement {
+    static styles: import("lit").CSSResult;
+    client: WebSocketClient | null;
+    private value;
+    private status;
+    private statusListener;
+    private listeningClient;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private setupClientListeners;
+    private teardownClientListeners;
+    private handleInput;
+    private handleKeyDown;
+    private send;
+    private canSend;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'socklog-sender': SocklogSender;
+    }
+}

dist/components/index.d.ts

 export { SocklogViewer } from './socklog-viewer';
 export { SocklogControls } from './socklog-controls';
+export { SocklogSender } from './socklog-sender';

dist/components/socklog-viewer.d.ts

 import { LitElement } from 'lit';
+import { WebSocketClient } from '../core/websocket-client';
 import { LogStore } from '../core/log-store';
@@ -20,2 +21,3 @@ export declare class SocklogViewer extends LitElement {
     getStore(): LogStore | null;
+    getClient(): WebSocketClient | null;
     private toggleExpanded;
@@ -22,0 +24,0 @@ private formatTimestamp;

dist/core/websocket-client.d.ts

@@ -11,4 +11,5 @@ import type { WebSocketConfig, ConnectionStatus } from './types';
     disconnect(): void;
+    send(data: string): void;
     private setupEventHandlers;
     private attemptReconnect;
 }

dist/index.d.ts

 export { SocklogViewer } from './components/socklog-viewer';
 export { SocklogControls } from './components/socklog-controls';
+export { SocklogSender } from './components/socklog-sender';
 export { WebSocketClient } from './core/websocket-client';
 export { LogStore } from './core/log-store';
 export type { LogEntry, WebSocketConfig, LogFilter, ConnectionStatus } from './core/types';

dist/socklog.cjs

@@ -5,37 +5,37 @@ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});/**
  * SPDX-License-Identifier: BSD-3-Clause
- */const R=globalThis,q=R.ShadowRoot&&(R.ShadyCSS===void 0||R.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,K=Symbol(),Q=new WeakMap;let lt=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==K)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(q&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=Q.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&Q.set(e,t))}return t}toString(){return this.cssText}};const vt=o=>new lt(typeof o=="string"?o:o+"",void 0,K),ct=(o,...t)=>{const e=o.length===1?o[0]:t.reduce(((s,i,n)=>s+(r=>{if(r._$cssResult$===!0)return r.cssText;if(typeof r=="number")return r;throw Error("Value passed to 'css' function must be a 'css' function result: "+r+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+o[n+1]),o[0]);return new lt(e,o,K)},mt=(o,t)=>{if(q)o.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of t){const s=document.createElement("style"),i=R.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,o.appendChild(s)}},X=q?o=>o:o=>o instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return vt(e)})(o):o;/**
+ */const R=globalThis,K=R.ShadowRoot&&(R.ShadyCSS===void 0||R.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Z=Symbol(),tt=new WeakMap;let dt=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==Z)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(K&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=tt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&tt.set(e,t))}return t}toString(){return this.cssText}};const mt=o=>new dt(typeof o=="string"?o:o+"",void 0,Z),G=(o,...t)=>{const e=o.length===1?o[0]:t.reduce(((s,i,n)=>s+(r=>{if(r._$cssResult$===!0)return r.cssText;if(typeof r=="number")return r;throw Error("Value passed to 'css' function must be a 'css' function result: "+r+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+o[n+1]),o[0]);return new dt(e,o,Z)},_t=(o,t)=>{if(K)o.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of t){const s=document.createElement("style"),i=R.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,o.appendChild(s)}},et=K?o=>o:o=>o instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return mt(e)})(o):o;/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const{is:_t,defineProperty:yt,getOwnPropertyDescriptor:bt,getOwnPropertyNames:At,getOwnPropertySymbols:wt,getPrototypeOf:St}=Object,$=globalThis,Y=$.trustedTypes,Et=Y?Y.emptyScript:"",j=$.reactiveElementPolyfillSupport,C=(o,t)=>o,I={toAttribute(o,t){switch(t){case Boolean:o=o?Et:null;break;case Object:case Array:o=o==null?o:JSON.stringify(o)}return o},fromAttribute(o,t){let e=o;switch(t){case Boolean:e=o!==null;break;case Number:e=o===null?null:Number(o);break;case Object:case Array:try{e=JSON.parse(o)}catch{e=null}}return e}},Z=(o,t)=>!_t(o,t),tt={attribute:!0,type:String,converter:I,reflect:!1,useDefault:!1,hasChanged:Z};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),$.litPropertyMetadata??($.litPropertyMetadata=new WeakMap);let w=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=tt){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&yt(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=bt(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get:i,set(r){const l=i==null?void 0:i.call(this);n==null||n.call(this,r),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??tt}static _$Ei(){if(this.hasOwnProperty(C("elementProperties")))return;const t=St(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(C("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(C("properties"))){const e=this.properties,s=[...At(e),...wt(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(X(i))}else t!==void 0&&e.push(X(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return mt(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var n;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const r=(((n=s.converter)==null?void 0:n.toAttribute)!==void 0?s.converter:I).toAttribute(e,s.type);this._$Em=t,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){var n,r;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const l=s.getPropertyOptions(i),a=typeof l.converter=="function"?{fromAttribute:l.converter}:((n=l.converter)==null?void 0:n.fromAttribute)!==void 0?l.converter:I;this._$Em=i;const h=a.fromAttribute(e,l.type);this[i]=h??((r=this._$Ej)==null?void 0:r.get(i))??h,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const n=this.constructor,r=this[t];if(s??(s=n.getPropertyOptions(t)),!((s.hasChanged??Z)(r,e)||s.useDefault&&s.reflect&&r===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(n._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},r){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,r??e??this[t]),n!==!0||r!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[n,r]of this._$Ep)this[n]=r;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[n,r]of i){const{wrapped:l}=r,a=this[n];l!==!0||this._$AL.has(n)||a===void 0||this.C(n,void 0,r,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var n;return(n=i.hostUpdate)==null?void 0:n.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}};w.elementStyles=[],w.shadowRootOptions={mode:"open"},w[C("elementProperties")]=new Map,w[C("finalized")]=new Map,j==null||j({ReactiveElement:w}),($.reactiveElementVersions??($.reactiveElementVersions=[])).push("2.1.1");/**
+ */const{is:yt,defineProperty:bt,getOwnPropertyDescriptor:St,getOwnPropertyNames:At,getOwnPropertySymbols:wt,getPrototypeOf:xt}=Object,$=globalThis,st=$.trustedTypes,Et=st?st.emptyScript:"",B=$.reactiveElementPolyfillSupport,P=(o,t)=>o,z={toAttribute(o,t){switch(t){case Boolean:o=o?Et:null;break;case Object:case Array:o=o==null?o:JSON.stringify(o)}return o},fromAttribute(o,t){let e=o;switch(t){case Boolean:e=o!==null;break;case Number:e=o===null?null:Number(o);break;case Object:case Array:try{e=JSON.parse(o)}catch{e=null}}return e}},Q=(o,t)=>!yt(o,t),it={attribute:!0,type:String,converter:z,reflect:!1,useDefault:!1,hasChanged:Q};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),$.litPropertyMetadata??($.litPropertyMetadata=new WeakMap);let x=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=it){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&bt(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=St(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get:i,set(r){const l=i==null?void 0:i.call(this);n==null||n.call(this,r),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??it}static _$Ei(){if(this.hasOwnProperty(P("elementProperties")))return;const t=xt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(P("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(P("properties"))){const e=this.properties,s=[...At(e),...wt(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(et(i))}else t!==void 0&&e.push(et(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return _t(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var n;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const r=(((n=s.converter)==null?void 0:n.toAttribute)!==void 0?s.converter:z).toAttribute(e,s.type);this._$Em=t,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){var n,r;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const l=s.getPropertyOptions(i),a=typeof l.converter=="function"?{fromAttribute:l.converter}:((n=l.converter)==null?void 0:n.fromAttribute)!==void 0?l.converter:z;this._$Em=i;const h=a.fromAttribute(e,l.type);this[i]=h??((r=this._$Ej)==null?void 0:r.get(i))??h,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const n=this.constructor,r=this[t];if(s??(s=n.getPropertyOptions(t)),!((s.hasChanged??Q)(r,e)||s.useDefault&&s.reflect&&r===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(n._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},r){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,r??e??this[t]),n!==!0||r!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[n,r]of this._$Ep)this[n]=r;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[n,r]of i){const{wrapped:l}=r,a=this[n];l!==!0||this._$AL.has(n)||a===void 0||this.C(n,void 0,r,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var n;return(n=i.hostUpdate)==null?void 0:n.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}};x.elementStyles=[],x.shadowRootOptions={mode:"open"},x[P("elementProperties")]=new Map,x[P("finalized")]=new Map,B==null||B({ReactiveElement:x}),($.reactiveElementVersions??($.reactiveElementVersions=[])).push("2.1.1");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const P=globalThis,z=P.trustedTypes,et=z?z.createPolicy("lit-html",{createHTML:o=>o}):void 0,ht="$lit$",f=`lit$${Math.random().toFixed(9).slice(2)}$`,dt="?"+f,xt=`<${dt}>`,b=document,U=()=>b.createComment(""),O=o=>o===null||typeof o!="object"&&typeof o!="function",G=Array.isArray,kt=o=>G(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",B=`[ 	
-\f\r]`,k=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,st=/-->/g,it=/>/g,m=RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`,"g"),ot=/'/g,rt=/"/g,pt=/^(?:script|style|textarea|title)$/i,Ct=o=>(t,...e)=>({_$litType$:o,strings:t,values:e}),L=Ct(1),A=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),nt=new WeakMap,_=b.createTreeWalker(b,129);function ut(o,t){if(!G(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return et!==void 0?et.createHTML(t):t}const Pt=(o,t)=>{const e=o.length-1,s=[];let i,n=t===2?"<svg>":t===3?"<math>":"",r=k;for(let l=0;l<e;l++){const a=o[l];let h,d,c=-1,u=0;for(;u<a.length&&(r.lastIndex=u,d=r.exec(a),d!==null);)u=r.lastIndex,r===k?d[1]==="!--"?r=st:d[1]!==void 0?r=it:d[2]!==void 0?(pt.test(d[2])&&(i=RegExp("</"+d[2],"g")),r=m):d[3]!==void 0&&(r=m):r===m?d[0]===">"?(r=i??k,c=-1):d[1]===void 0?c=-2:(c=r.lastIndex-d[2].length,h=d[1],r=d[3]===void 0?m:d[3]==='"'?rt:ot):r===rt||r===ot?r=m:r===st||r===it?r=k:(r=m,i=void 0);const g=r===m&&o[l+1].startsWith("/>")?" ":"";n+=r===k?a+xt:c>=0?(s.push(h),a.slice(0,c)+ht+a.slice(c)+f+g):a+f+(c===-2?l:g)}return[ut(o,n+(o[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class T{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,r=0;const l=t.length-1,a=this.parts,[h,d]=Pt(t,e);if(this.el=T.createElement(h,s),_.currentNode=this.el.content,e===2||e===3){const c=this.el.content.firstChild;c.replaceWith(...c.childNodes)}for(;(i=_.nextNode())!==null&&a.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(const c of i.getAttributeNames())if(c.endsWith(ht)){const u=d[r++],g=i.getAttribute(c).split(f),N=/([.?@])?(.*)/.exec(u);a.push({type:1,index:n,name:N[2],strings:g,ctor:N[1]==="."?Ot:N[1]==="?"?Tt:N[1]==="@"?Mt:D}),i.removeAttribute(c)}else c.startsWith(f)&&(a.push({type:6,index:n}),i.removeAttribute(c));if(pt.test(i.tagName)){const c=i.textContent.split(f),u=c.length-1;if(u>0){i.textContent=z?z.emptyScript:"";for(let g=0;g<u;g++)i.append(c[g],U()),_.nextNode(),a.push({type:2,index:++n});i.append(c[u],U())}}}else if(i.nodeType===8)if(i.data===dt)a.push({type:2,index:n});else{let c=-1;for(;(c=i.data.indexOf(f,c+1))!==-1;)a.push({type:7,index:n}),c+=f.length-1}n++}}static createElement(t,e){const s=b.createElement("template");return s.innerHTML=t,s}}function E(o,t,e=o,s){var r,l;if(t===A)return t;let i=s!==void 0?(r=e._$Co)==null?void 0:r[s]:e._$Cl;const n=O(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==n&&((l=i==null?void 0:i._$AO)==null||l.call(i,!1),n===void 0?i=void 0:(i=new n(o),i._$AT(o,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=E(o,i._$AS(o,t.values),i,s)),t}class Ut{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??b).importNode(e,!0);_.currentNode=i;let n=_.nextNode(),r=0,l=0,a=s[0];for(;a!==void 0;){if(r===a.index){let h;a.type===2?h=new M(n,n.nextSibling,this,t):a.type===1?h=new a.ctor(n,a.name,a.strings,this,t):a.type===6&&(h=new Ht(n,this,t)),this._$AV.push(h),a=s[++l]}r!==(a==null?void 0:a.index)&&(n=_.nextNode(),r++)}return _.currentNode=b,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class M{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=E(this,t,e),O(t)?t===p||t==null||t===""?(this._$AH!==p&&this._$AR(),this._$AH=p):t!==this._$AH&&t!==A&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):kt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==p&&O(this._$AH)?this._$AA.nextSibling.data=t:this.T(b.createTextNode(t)),this._$AH=t}$(t){var n;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=T.createElement(ut(s.h,s.h[0]),this.options)),s);if(((n=this._$AH)==null?void 0:n._$AD)===i)this._$AH.p(e);else{const r=new Ut(i,this),l=r.u(this.options);r.p(e),this.T(l),this._$AH=r}}_$AC(t){let e=nt.get(t.strings);return e===void 0&&nt.set(t.strings,e=new T(t)),e}k(t){G(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const n of t)i===e.length?e.push(s=new M(this.O(U()),this.O(U()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class D{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=p,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}_$AI(t,e=this,s,i){const n=this.strings;let r=!1;if(n===void 0)t=E(this,t,e,0),r=!O(t)||t!==this._$AH&&t!==A,r&&(this._$AH=t);else{const l=t;let a,h;for(t=n[0],a=0;a<n.length-1;a++)h=E(this,l[s+a],e,a),h===A&&(h=this._$AH[a]),r||(r=!O(h)||h!==this._$AH[a]),h===p?t=p:t!==p&&(t+=(h??"")+n[a+1]),this._$AH[a]=h}r&&!i&&this.j(t)}j(t){t===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Ot extends D{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===p?void 0:t}}class Tt extends D{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==p)}}class Mt extends D{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=E(this,t,e,0)??p)===A)return;const s=this._$AH,i=t===p&&s!==p||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==p&&(s===p||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Ht{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){E(this,t)}}const W=P.litHtmlPolyfillSupport;W==null||W(T,M),(P.litHtmlVersions??(P.litHtmlVersions=[])).push("3.3.1");const Nt=(o,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const n=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new M(t.insertBefore(U(),n),n,void 0,e??{})}return i._$AI(o),i};/**
+ */const O=globalThis,I=O.trustedTypes,ot=I?I.createPolicy("lit-html",{createHTML:o=>o}):void 0,pt="$lit$",f=`lit$${Math.random().toFixed(9).slice(2)}$`,ut="?"+f,kt=`<${ut}>`,A=document,T=()=>A.createComment(""),L=o=>o===null||typeof o!="object"&&typeof o!="function",X=Array.isArray,Ct=o=>X(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",W=`[ 	
+\f\r]`,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,rt=/-->/g,nt=/>/g,_=RegExp(`>|${W}(?:([^\\s"'>=/]+)(${W}*=${W}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),at=/'/g,lt=/"/g,gt=/^(?:script|style|textarea|title)$/i,Pt=o=>(t,...e)=>({_$litType$:o,strings:t,values:e}),U=Pt(1),w=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),ct=new WeakMap,y=A.createTreeWalker(A,129);function ft(o,t){if(!X(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return ot!==void 0?ot.createHTML(t):t}const Ot=(o,t)=>{const e=o.length-1,s=[];let i,n=t===2?"<svg>":t===3?"<math>":"",r=C;for(let l=0;l<e;l++){const a=o[l];let h,d,c=-1,u=0;for(;u<a.length&&(r.lastIndex=u,d=r.exec(a),d!==null);)u=r.lastIndex,r===C?d[1]==="!--"?r=rt:d[1]!==void 0?r=nt:d[2]!==void 0?(gt.test(d[2])&&(i=RegExp("</"+d[2],"g")),r=_):d[3]!==void 0&&(r=_):r===_?d[0]===">"?(r=i??C,c=-1):d[1]===void 0?c=-2:(c=r.lastIndex-d[2].length,h=d[1],r=d[3]===void 0?_:d[3]==='"'?lt:at):r===lt||r===at?r=_:r===rt||r===nt?r=C:(r=_,i=void 0);const g=r===_&&o[l+1].startsWith("/>")?" ":"";n+=r===C?a+kt:c>=0?(s.push(h),a.slice(0,c)+pt+a.slice(c)+f+g):a+f+(c===-2?l:g)}return[ft(o,n+(o[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class M{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,r=0;const l=t.length-1,a=this.parts,[h,d]=Ot(t,e);if(this.el=M.createElement(h,s),y.currentNode=this.el.content,e===2||e===3){const c=this.el.content.firstChild;c.replaceWith(...c.childNodes)}for(;(i=y.nextNode())!==null&&a.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(const c of i.getAttributeNames())if(c.endsWith(pt)){const u=d[r++],g=i.getAttribute(c).split(f),H=/([.?@])?(.*)/.exec(u);a.push({type:1,index:n,name:H[2],strings:g,ctor:H[1]==="."?Tt:H[1]==="?"?Lt:H[1]==="@"?Mt:D}),i.removeAttribute(c)}else c.startsWith(f)&&(a.push({type:6,index:n}),i.removeAttribute(c));if(gt.test(i.tagName)){const c=i.textContent.split(f),u=c.length-1;if(u>0){i.textContent=I?I.emptyScript:"";for(let g=0;g<u;g++)i.append(c[g],T()),y.nextNode(),a.push({type:2,index:++n});i.append(c[u],T())}}}else if(i.nodeType===8)if(i.data===ut)a.push({type:2,index:n});else{let c=-1;for(;(c=i.data.indexOf(f,c+1))!==-1;)a.push({type:7,index:n}),c+=f.length-1}n++}}static createElement(t,e){const s=A.createElement("template");return s.innerHTML=t,s}}function E(o,t,e=o,s){var r,l;if(t===w)return t;let i=s!==void 0?(r=e._$Co)==null?void 0:r[s]:e._$Cl;const n=L(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==n&&((l=i==null?void 0:i._$AO)==null||l.call(i,!1),n===void 0?i=void 0:(i=new n(o),i._$AT(o,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=E(o,i._$AS(o,t.values),i,s)),t}class Ut{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??A).importNode(e,!0);y.currentNode=i;let n=y.nextNode(),r=0,l=0,a=s[0];for(;a!==void 0;){if(r===a.index){let h;a.type===2?h=new N(n,n.nextSibling,this,t):a.type===1?h=new a.ctor(n,a.name,a.strings,this,t):a.type===6&&(h=new Nt(n,this,t)),this._$AV.push(h),a=s[++l]}r!==(a==null?void 0:a.index)&&(n=y.nextNode(),r++)}return y.currentNode=A,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class N{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=E(this,t,e),L(t)?t===p||t==null||t===""?(this._$AH!==p&&this._$AR(),this._$AH=p):t!==this._$AH&&t!==w&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Ct(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==p&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(A.createTextNode(t)),this._$AH=t}$(t){var n;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=M.createElement(ft(s.h,s.h[0]),this.options)),s);if(((n=this._$AH)==null?void 0:n._$AD)===i)this._$AH.p(e);else{const r=new Ut(i,this),l=r.u(this.options);r.p(e),this.T(l),this._$AH=r}}_$AC(t){let e=ct.get(t.strings);return e===void 0&&ct.set(t.strings,e=new M(t)),e}k(t){X(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const n of t)i===e.length?e.push(s=new N(this.O(T()),this.O(T()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class D{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=p,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}_$AI(t,e=this,s,i){const n=this.strings;let r=!1;if(n===void 0)t=E(this,t,e,0),r=!L(t)||t!==this._$AH&&t!==w,r&&(this._$AH=t);else{const l=t;let a,h;for(t=n[0],a=0;a<n.length-1;a++)h=E(this,l[s+a],e,a),h===w&&(h=this._$AH[a]),r||(r=!L(h)||h!==this._$AH[a]),h===p?t=p:t!==p&&(t+=(h??"")+n[a+1]),this._$AH[a]=h}r&&!i&&this.j(t)}j(t){t===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Tt extends D{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===p?void 0:t}}class Lt extends D{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==p)}}class Mt extends D{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=E(this,t,e,0)??p)===w)return;const s=this._$AH,i=t===p&&s!==p||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==p&&(s===p||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Nt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){E(this,t)}}const F=O.litHtmlPolyfillSupport;F==null||F(M,N),(O.litHtmlVersions??(O.litHtmlVersions=[])).push("3.3.1");const Ht=(o,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const n=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new N(t.insertBefore(T(),n),n,void 0,e??{})}return i._$AI(o),i};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const y=globalThis;let S=class extends w{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Nt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return A}};var at;S._$litElement$=!0,S.finalized=!0,(at=y.litElementHydrateSupport)==null||at.call(y,{LitElement:S});const F=y.litElementPolyfillSupport;F==null||F({LitElement:S});(y.litElementVersions??(y.litElementVersions=[])).push("4.2.1");/**
+ */const b=globalThis;let S=class extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Ht(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return w}};var ht;S._$litElement$=!0,S.finalized=!0,(ht=b.litElementHydrateSupport)==null||ht.call(b,{LitElement:S});const J=b.litElementPolyfillSupport;J==null||J({LitElement:S});(b.litElementVersions??(b.litElementVersions=[])).push("4.2.1");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const gt=o=>(t,e)=>{e!==void 0?e.addInitializer((()=>{customElements.define(o,t)})):customElements.define(o,t)};/**
+ */const Y=o=>(t,e)=>{e!==void 0?e.addInitializer((()=>{customElements.define(o,t)})):customElements.define(o,t)};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const Rt={attribute:!0,type:String,converter:I,reflect:!1,hasChanged:Z},Lt=(o=Rt,t,e)=>{const{kind:s,metadata:i}=e;let n=globalThis.litPropertyMetadata.get(i);if(n===void 0&&globalThis.litPropertyMetadata.set(i,n=new Map),s==="setter"&&((o=Object.create(o)).wrapped=!0),n.set(e.name,o),s==="accessor"){const{name:r}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(r,a,o)},init(l){return l!==void 0&&this.C(r,void 0,o,l),l}}}if(s==="setter"){const{name:r}=e;return function(l){const a=this[r];t.call(this,l),this.requestUpdate(r,a,o)}}throw Error("Unsupported decorator location: "+s)};function H(o){return(t,e)=>typeof e=="object"?Lt(o,t,e):((s,i,n)=>{const r=i.hasOwnProperty(n);return i.constructor.createProperty(n,s),r?Object.getOwnPropertyDescriptor(i,n):void 0})(o,t,e)}/**
+ */const Rt={attribute:!0,type:String,converter:z,reflect:!1,hasChanged:Q},zt=(o=Rt,t,e)=>{const{kind:s,metadata:i}=e;let n=globalThis.litPropertyMetadata.get(i);if(n===void 0&&globalThis.litPropertyMetadata.set(i,n=new Map),s==="setter"&&((o=Object.create(o)).wrapped=!0),n.set(e.name,o),s==="accessor"){const{name:r}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(r,a,o)},init(l){return l!==void 0&&this.C(r,void 0,o,l),l}}}if(s==="setter"){const{name:r}=e;return function(l){const a=this[r];t.call(this,l),this.requestUpdate(r,a,o)}}throw Error("Unsupported decorator location: "+s)};function k(o){return(t,e)=>typeof e=="object"?zt(o,t,e):((s,i,n)=>{const r=i.hasOwnProperty(n);return i.constructor.createProperty(n,s),r?Object.getOwnPropertyDescriptor(i,n):void 0})(o,t,e)}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function x(o){return H({...o,state:!0,attribute:!1})}/**
+ */function v(o){return k({...o,state:!0,attribute:!1})}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const It={CHILD:2},zt=o=>(...t)=>({_$litDirective$:o,values:t});class Dt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
+ */const It={CHILD:2},Dt=o=>(...t)=>({_$litDirective$:o,values:t});class Vt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class J extends Dt{constructor(t){if(super(t),this.it=p,t.type!==It.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===p||t==null)return this._t=void 0,this.it=t;if(t===A)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}J.directiveName="unsafeHTML",J.resultType=1;const Vt=zt(J);function jt(){if(typeof crypto<"u"&&crypto.randomUUID)return crypto.randomUUID();const o=new Uint8Array(16);if(typeof crypto<"u"&&crypto.getRandomValues)crypto.getRandomValues(o);else for(let e=0;e<16;e++)o[e]=Math.random()*256|0;o[6]=o[6]&15|64,o[8]=o[8]&63|128;const t=Array.from(o,e=>e.toString(16).padStart(2,"0")).join("");return`${t.slice(0,8)}-${t.slice(8,12)}-${t.slice(12,16)}-${t.slice(16,20)}-${t.slice(20)}`}class ft extends EventTarget{constructor(t){super(),this.ws=null,this.reconnectAttempts=0,this._status="disconnected",this.config={reconnect:!0,reconnectInterval:3e3,maxReconnectAttempts:10,...t}}get status(){return this._status}connect(){var t;if(((t=this.ws)==null?void 0:t.readyState)!==WebSocket.OPEN){typeof location<"u"&&location.protocol==="https:"&&this.config.url.startsWith("ws://")&&console.warn("[socklog] Connecting with ws:// from an HTTPS page will be blocked as mixed content. Use wss:// instead."),this._status="connecting",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}));try{this.ws=new WebSocket(this.config.url),this.setupEventHandlers()}catch{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))}}}disconnect(){var t;this.reconnectAttempts=this.config.maxReconnectAttempts??10,(t=this.ws)==null||t.close()}setupEventHandlers(){this.ws&&(this.ws.onopen=()=>{this._status="connected",this.reconnectAttempts=0,this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onclose=()=>{this._status="disconnected",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status})),this.attemptReconnect()},this.ws.onerror=()=>{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onmessage=t=>{const e=t.data;let s;try{s=JSON.parse(e)}catch{s=e}const i={id:jt(),timestamp:new Date,data:s,raw:e};this.dispatchEvent(new CustomEvent("log",{detail:i}))})}attemptReconnect(){this.config.reconnect&&(this.reconnectAttempts>=(this.config.maxReconnectAttempts??10)||(this.reconnectAttempts++,setTimeout(()=>this.connect(),this.config.reconnectInterval)))}}class $t extends EventTarget{constructor(t=1e3){super(),this.logs=[],this._filter={},this._paused=!1,this.maxLogs=t}get filter(){return this._filter}set filter(t){this._filter=t,this.dispatchEvent(new CustomEvent("filterchange",{detail:this._filter}))}get paused(){return this._paused}set paused(t){this._paused=t,this.dispatchEvent(new CustomEvent("pausechange",{detail:this._paused}))}add(t){this._paused||(this.logs.unshift(t),this.logs.length>this.maxLogs&&this.logs.pop(),this.dispatchEvent(new CustomEvent("logadded",{detail:t})))}clear(){this.logs=[],this.dispatchEvent(new CustomEvent("logscleared"))}getAll(){return[...this.logs]}getFiltered(){return this.logs.filter(t=>this.matchesFilter(t))}matchesFilter(t){const{search:e}=this._filter;if(e){const s=e.toLowerCase();return t.raw.toLowerCase().includes(s)}return!0}get count(){return this.logs.length}}var Bt=Object.defineProperty,Wt=Object.getOwnPropertyDescriptor,v=(o,t,e,s)=>{for(var i=s>1?void 0:s?Wt(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Bt(t,e,i),i};exports.SocklogViewer=class extends S{constructor(){super(...arguments),this.url="",this.maxLogs=1e3,this.indent=4,this.logs=[],this.status="disconnected",this.searchTerm="",this.expandedIds=new Set,this.client=null,this.store=null}connectedCallback(){super.connectedCallback(),this.initializeStore(),this.url&&this.connect()}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this.client)==null||t.disconnect()}initializeStore(){this.store=new $t(this.maxLogs),this.store.addEventListener("logadded",()=>{var t;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[]}),this.store.addEventListener("filterchange",()=>{var t,e;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[],this.searchTerm=((e=this.store)==null?void 0:e.filter.search)??""}),this.store.addEventListener("logscleared",()=>{this.logs=[]})}connect(){this.url&&(this.client=new ft({url:this.url}),this.client.addEventListener("statuschange",(t=>{this.status=t.detail})),this.client.addEventListener("log",(t=>{var e;(e=this.store)==null||e.add(t.detail)})),this.client.connect())}clear(){var t;(t=this.store)==null||t.clear()}getStore(){return this.store}toggleExpanded(t){this.expandedIds.has(t)?this.expandedIds.delete(t):this.expandedIds.add(t),this.expandedIds=new Set(this.expandedIds)}formatTimestamp(t){return t.toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit",fractionalSecondDigits:3})}tokenizeJson(t){const e=[];let s=0;for(;s<t.length;){const i=t[s];if(/\s/.test(i)){let r="";for(;s<t.length&&/\s/.test(t[s]);)r+=t[s],s++;e.push({type:"whitespace",value:r});continue}if(i==="{"||i==="}"||i==="["||i==="]"||i===":"||i===","){e.push({type:"punctuation",value:i}),s++;continue}if(i==='"'){let r='"';for(s++;s<t.length;)if(t[s]==="\\"&&s+1<t.length)r+=t[s]+t[s+1],s+=2;else if(t[s]==='"'){r+='"',s++;break}else r+=t[s],s++;e.push({type:"string",value:r});continue}let n="";for(;s<t.length&&!/[\s{}[\]:,"]/.test(t[s]);)n+=t[s],s++;n&&e.push({type:"value",value:n})}return e}formatJson(t,e=!1){let s;typeof t=="string"?s=t:s=e?JSON.stringify(t,null,this.indent):JSON.stringify(t);const i=this.tokenizeJson(s),n=[];for(let l=0;l<i.length;l++){const a=i[l],h=i[l+1],d=a.value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),c=a.type==="string"&&(h==null?void 0:h.value)===":";a.type==="whitespace"?n.push(d):a.type==="punctuation"?n.push(`<span class="json-punct">${d}</span>`):c?n.push(`<span class="json-key">${d}</span>`):a.type==="string"?n.push(`<span class="json-string">${d}</span>`):n.push(`<span class="json-value">${d}</span>`)}let r=e?n.join(""):n.join("<wbr>");if(this.searchTerm){const l=this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),a=new RegExp(`(${l})`,"gi");r=r.replace(/(<[^>]*>)|([^<]+)/g,(h,d,c)=>d||c.replace(a,'<span class="search-highlight">$1</span>'))}return Vt(r)}render(){return this.logs.length===0?L`
+ */class q extends Vt{constructor(t){if(super(t),this.it=p,t.type!==It.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===p||t==null)return this._t=void 0,this.it=t;if(t===w)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}q.directiveName="unsafeHTML",q.resultType=1;const jt=Dt(q);function Bt(){if(typeof crypto<"u"&&crypto.randomUUID)return crypto.randomUUID();const o=new Uint8Array(16);if(typeof crypto<"u"&&crypto.getRandomValues)crypto.getRandomValues(o);else for(let e=0;e<16;e++)o[e]=Math.random()*256|0;o[6]=o[6]&15|64,o[8]=o[8]&63|128;const t=Array.from(o,e=>e.toString(16).padStart(2,"0")).join("");return`${t.slice(0,8)}-${t.slice(8,12)}-${t.slice(12,16)}-${t.slice(16,20)}-${t.slice(20)}`}class $t extends EventTarget{constructor(t){super(),this.ws=null,this.reconnectAttempts=0,this._status="disconnected",this.config={reconnect:!0,reconnectInterval:3e3,maxReconnectAttempts:10,...t}}get status(){return this._status}connect(){var t;if(((t=this.ws)==null?void 0:t.readyState)!==WebSocket.OPEN){typeof location<"u"&&location.protocol==="https:"&&this.config.url.startsWith("ws://")&&console.warn("[socklog] Connecting with ws:// from an HTTPS page will be blocked as mixed content. Use wss:// instead."),this._status="connecting",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}));try{this.ws=new WebSocket(this.config.url),this.setupEventHandlers()}catch{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))}}}disconnect(){var t;this.reconnectAttempts=this.config.maxReconnectAttempts??10,(t=this.ws)==null||t.close()}send(t){var e;((e=this.ws)==null?void 0:e.readyState)===WebSocket.OPEN&&this.ws.send(t)}setupEventHandlers(){this.ws&&(this.ws.onopen=()=>{this._status="connected",this.reconnectAttempts=0,this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onclose=()=>{this._status="disconnected",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status})),this.attemptReconnect()},this.ws.onerror=()=>{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onmessage=t=>{const e=t.data;let s;try{s=JSON.parse(e)}catch{s=e}const i={id:Bt(),timestamp:new Date,data:s,raw:e};this.dispatchEvent(new CustomEvent("log",{detail:i}))})}attemptReconnect(){this.config.reconnect&&(this.reconnectAttempts>=(this.config.maxReconnectAttempts??10)||(this.reconnectAttempts++,setTimeout(()=>this.connect(),this.config.reconnectInterval)))}}class vt extends EventTarget{constructor(t=1e3){super(),this.logs=[],this._filter={},this._paused=!1,this.maxLogs=t}get filter(){return this._filter}set filter(t){this._filter=t,this.dispatchEvent(new CustomEvent("filterchange",{detail:this._filter}))}get paused(){return this._paused}set paused(t){this._paused=t,this.dispatchEvent(new CustomEvent("pausechange",{detail:this._paused}))}add(t){this._paused||(this.logs.unshift(t),this.logs.length>this.maxLogs&&this.logs.pop(),this.dispatchEvent(new CustomEvent("logadded",{detail:t})))}clear(){this.logs=[],this.dispatchEvent(new CustomEvent("logscleared"))}getAll(){return[...this.logs]}getFiltered(){return this.logs.filter(t=>this.matchesFilter(t))}matchesFilter(t){const{search:e}=this._filter;if(e){const s=e.toLowerCase();return t.raw.toLowerCase().includes(s)}return!0}get count(){return this.logs.length}}var Wt=Object.defineProperty,Ft=Object.getOwnPropertyDescriptor,m=(o,t,e,s)=>{for(var i=s>1?void 0:s?Ft(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Wt(t,e,i),i};exports.SocklogViewer=class extends S{constructor(){super(...arguments),this.url="",this.maxLogs=1e3,this.indent=4,this.logs=[],this.status="disconnected",this.searchTerm="",this.expandedIds=new Set,this.client=null,this.store=null}connectedCallback(){super.connectedCallback(),this.initializeStore(),this.url&&this.connect()}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this.client)==null||t.disconnect()}initializeStore(){this.store=new vt(this.maxLogs),this.store.addEventListener("logadded",()=>{var t;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[]}),this.store.addEventListener("filterchange",()=>{var t,e;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[],this.searchTerm=((e=this.store)==null?void 0:e.filter.search)??""}),this.store.addEventListener("logscleared",()=>{this.logs=[]})}connect(){this.url&&(this.client=new $t({url:this.url}),this.client.addEventListener("statuschange",(t=>{this.status=t.detail})),this.client.addEventListener("log",(t=>{var e;(e=this.store)==null||e.add(t.detail)})),this.client.connect())}clear(){var t;(t=this.store)==null||t.clear()}getStore(){return this.store}getClient(){return this.client}toggleExpanded(t){this.expandedIds.has(t)?this.expandedIds.delete(t):this.expandedIds.add(t),this.expandedIds=new Set(this.expandedIds)}formatTimestamp(t){return t.toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit",fractionalSecondDigits:3})}tokenizeJson(t){const e=[];let s=0;for(;s<t.length;){const i=t[s];if(/\s/.test(i)){let r="";for(;s<t.length&&/\s/.test(t[s]);)r+=t[s],s++;e.push({type:"whitespace",value:r});continue}if(i==="{"||i==="}"||i==="["||i==="]"||i===":"||i===","){e.push({type:"punctuation",value:i}),s++;continue}if(i==='"'){let r='"';for(s++;s<t.length;)if(t[s]==="\\"&&s+1<t.length)r+=t[s]+t[s+1],s+=2;else if(t[s]==='"'){r+='"',s++;break}else r+=t[s],s++;e.push({type:"string",value:r});continue}let n="";for(;s<t.length&&!/[\s{}[\]:,"]/.test(t[s]);)n+=t[s],s++;n&&e.push({type:"value",value:n})}return e}formatJson(t,e=!1){let s;typeof t=="string"?s=t:s=e?JSON.stringify(t,null,this.indent):JSON.stringify(t);const i=this.tokenizeJson(s),n=[];for(let l=0;l<i.length;l++){const a=i[l],h=i[l+1],d=a.value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),c=a.type==="string"&&(h==null?void 0:h.value)===":";a.type==="whitespace"?n.push(d):a.type==="punctuation"?n.push(`<span class="json-punct">${d}</span>`):c?n.push(`<span class="json-key">${d}</span>`):a.type==="string"?n.push(`<span class="json-string">${d}</span>`):n.push(`<span class="json-value">${d}</span>`)}let r=e?n.join(""):n.join("<wbr>");if(this.searchTerm){const l=this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),a=new RegExp(`(${l})`,"gi");r=r.replace(/(<[^>]*>)|([^<]+)/g,(h,d,c)=>d||c.replace(a,'<span class="search-highlight">$1</span>'))}return jt(r)}render(){return this.logs.length===0?U`
         <div class="log-container">
@@ -46,5 +46,5 @@ <div class="empty-state">
         </div>
-      `:L`
+      `:U`
       <div class="log-container">
-        ${this.logs.map(t=>L`
+        ${this.logs.map(t=>U`
             <div class="log-entry">
@@ -59,3 +59,3 @@ <div class="log-header" @click=${()=>this.toggleExpanded(t.id)}>
       </div>
-    `}};exports.SocklogViewer.styles=ct`
+    `}};exports.SocklogViewer.styles=G`
     :host {
@@ -134,3 +134,3 @@ display: block;
     }
-  `;v([H({type:String})],exports.SocklogViewer.prototype,"url",2);v([H({type:Number})],exports.SocklogViewer.prototype,"maxLogs",2);v([H({type:Number})],exports.SocklogViewer.prototype,"indent",2);v([x()],exports.SocklogViewer.prototype,"logs",2);v([x()],exports.SocklogViewer.prototype,"status",2);v([x()],exports.SocklogViewer.prototype,"searchTerm",2);v([x()],exports.SocklogViewer.prototype,"expandedIds",2);exports.SocklogViewer=v([gt("socklog-viewer")],exports.SocklogViewer);var Ft=Object.defineProperty,Jt=Object.getOwnPropertyDescriptor,V=(o,t,e,s)=>{for(var i=s>1?void 0:s?Jt(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Ft(t,e,i),i};exports.SocklogControls=class extends S{constructor(){super(...arguments),this.store=null,this.searchValue="",this.paused=!1}connectedCallback(){super.connectedCallback(),this.setupStoreListeners()}updated(t){t.has("store")&&this.setupStoreListeners()}setupStoreListeners(){this.store&&this.store.addEventListener("pausechange",(t=>{this.paused=t.detail}))}handleSearch(t){const e=t.target;this.searchValue=e.value,this.updateFilter()}updateFilter(){if(!this.store)return;const t={};this.searchValue&&(t.search=this.searchValue),this.store.filter=t}togglePause(){this.store&&(this.store.paused=!this.store.paused)}clear(){var t;(t=this.store)==null||t.clear()}render(){return L`
+  `;m([k({type:String})],exports.SocklogViewer.prototype,"url",2);m([k({type:Number})],exports.SocklogViewer.prototype,"maxLogs",2);m([k({type:Number})],exports.SocklogViewer.prototype,"indent",2);m([v()],exports.SocklogViewer.prototype,"logs",2);m([v()],exports.SocklogViewer.prototype,"status",2);m([v()],exports.SocklogViewer.prototype,"searchTerm",2);m([v()],exports.SocklogViewer.prototype,"expandedIds",2);exports.SocklogViewer=m([Y("socklog-viewer")],exports.SocklogViewer);var Jt=Object.defineProperty,qt=Object.getOwnPropertyDescriptor,V=(o,t,e,s)=>{for(var i=s>1?void 0:s?qt(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Jt(t,e,i),i};exports.SocklogControls=class extends S{constructor(){super(...arguments),this.store=null,this.searchValue="",this.paused=!1}connectedCallback(){super.connectedCallback(),this.setupStoreListeners()}updated(t){t.has("store")&&this.setupStoreListeners()}setupStoreListeners(){this.store&&this.store.addEventListener("pausechange",(t=>{this.paused=t.detail}))}handleSearch(t){const e=t.target;this.searchValue=e.value,this.updateFilter()}updateFilter(){if(!this.store)return;const t={};this.searchValue&&(t.search=this.searchValue),this.store.filter=t}togglePause(){this.store&&(this.store.paused=!this.store.paused)}clear(){var t;(t=this.store)==null||t.clear()}render(){return U`
       <div class="controls-inner">
@@ -156,3 +156,3 @@ <div class="search-container">
       </div>
-    `}};exports.SocklogControls.styles=ct`
+    `}};exports.SocklogControls.styles=G`
     :host {
@@ -237,3 +237,99 @@ display: block;
     }
-  `;V([H({attribute:!1})],exports.SocklogControls.prototype,"store",2);V([x()],exports.SocklogControls.prototype,"searchValue",2);V([x()],exports.SocklogControls.prototype,"paused",2);exports.SocklogControls=V([gt("socklog-controls")],exports.SocklogControls);exports.LogStore=$t;exports.WebSocketClient=ft;
+  `;V([k({attribute:!1})],exports.SocklogControls.prototype,"store",2);V([v()],exports.SocklogControls.prototype,"searchValue",2);V([v()],exports.SocklogControls.prototype,"paused",2);exports.SocklogControls=V([Y("socklog-controls")],exports.SocklogControls);var Kt=Object.defineProperty,Zt=Object.getOwnPropertyDescriptor,j=(o,t,e,s)=>{for(var i=s>1?void 0:s?Zt(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Kt(t,e,i),i};exports.SocklogSender=class extends S{constructor(){super(...arguments),this.client=null,this.value="",this.status="disconnected",this.statusListener=null,this.listeningClient=null}connectedCallback(){super.connectedCallback(),this.setupClientListeners()}disconnectedCallback(){super.disconnectedCallback(),this.teardownClientListeners()}updated(t){t.has("client")&&(this.teardownClientListeners(),this.setupClientListeners())}setupClientListeners(){this.client&&(this.status=this.client.status,this.statusListener=(t=>{this.status=t.detail}),this.client.addEventListener("statuschange",this.statusListener),this.listeningClient=this.client)}teardownClientListeners(){this.listeningClient&&this.statusListener&&this.listeningClient.removeEventListener("statuschange",this.statusListener),this.listeningClient=null,this.statusListener=null}handleInput(t){const e=t.target;this.value=e.value}handleKeyDown(t){(t.metaKey||t.ctrlKey)&&t.key==="Enter"&&(t.preventDefault(),this.send())}send(){this.canSend()&&(this.client.send(this.value),this.value="")}canSend(){return!!this.client&&this.status==="connected"&&this.value.length>0}render(){const t=!this.canSend();return U`
+      <div class="sender-inner">
+        <div class="input-container">
+          <textarea
+            placeholder="Type a message and press Send (or Cmd/Ctrl+Enter)..."
+            .value=${this.value}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+          ></textarea>
+        </div>
+
+        <div class="actions">
+          <button class="send-btn" ?disabled=${t} @click=${this.send}>Send</button>
+        </div>
+      </div>
+    `}};exports.SocklogSender.styles=G`
+    :host {
+      display: block;
+      width: 100%;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .sender-inner {
+      display: flex;
+      align-items: stretch;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--socklog-controls-bg, inherit);
+      border-bottom: 1px solid var(--socklog-border-color, #e0e0e0);
+      font-family: var(
+        --socklog-ui-font-family,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        sans-serif
+      );
+      font-size: 13px;
+      color: var(--socklog-color, inherit);
+      box-sizing: border-box;
+    }
+
+    .input-container {
+      flex: 1;
+      min-width: 0;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 60px;
+      padding: 6px 10px;
+      border: 1px solid var(--socklog-input-border, #ccc);
+      border-radius: 4px;
+      background: var(--socklog-input-bg, #fff);
+      color: var(--socklog-input-color, inherit);
+      font-family: var(--socklog-font-family, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);
+      font-size: 13px;
+      box-sizing: border-box;
+      resize: vertical;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--socklog-focus-color, #007bff);
+    }
+
+    textarea::placeholder {
+      color: var(--socklog-muted-color, #999);
+    }
+
+    .actions {
+      display: flex;
+      align-items: flex-end;
+      flex-shrink: 0;
+    }
+
+    .send-btn {
+      padding: 6px 16px;
+      border: 1px solid var(--socklog-focus-color, #007bff);
+      border-radius: 4px;
+      background: var(--socklog-focus-color, #007bff);
+      color: #fff;
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 0.15s ease;
+    }
+
+    .send-btn:hover:not(:disabled) {
+      filter: brightness(1.1);
+    }
+
+    .send-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;j([k({attribute:!1})],exports.SocklogSender.prototype,"client",2);j([v()],exports.SocklogSender.prototype,"value",2);j([v()],exports.SocklogSender.prototype,"status",2);exports.SocklogSender=j([Y("socklog-sender")],exports.SocklogSender);exports.LogStore=vt;exports.WebSocketClient=$t;
 //# sourceMappingURL=socklog.cjs.map

dist/socklog.js

@@ -6,6 +6,6 @@ /**
  */
-const I = globalThis, Z = I.ShadowRoot && (I.ShadyCSS === void 0 || I.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, G = Symbol(), Y = /* @__PURE__ */ new WeakMap();
-let ht = class {
+const D = globalThis, Q = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, X = Symbol(), it = /* @__PURE__ */ new WeakMap();
+let gt = class {
   constructor(t, e, i) {
-    if (this._$cssResult$ = !0, i !== G) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== X) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = e;
@@ -16,5 +16,5 @@ }
     const e = this.t;
-    if (Z && t === void 0) {
+    if (Q && t === void 0) {
       const i = e !== void 0 && e.length === 1;
-      i && (t = Y.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && Y.set(e, t));
+      i && (t = it.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && it.set(e, t));
     }
@@ -27,19 +27,19 @@ return t;
 };
-const vt = (s) => new ht(typeof s == "string" ? s : s + "", void 0, G), dt = (s, ...t) => {
-  const e = s.length === 1 ? s[0] : t.reduce(((i, r, o) => i + ((n) => {
-    if (n._$cssResult$ === !0) return n.cssText;
-    if (typeof n == "number") return n;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(r) + s[o + 1]), s[0]);
-  return new ht(e, s, G);
-}, _t = (s, t) => {
-  if (Z) s.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
+const _t = (s) => new gt(typeof s == "string" ? s : s + "", void 0, X), Y = (s, ...t) => {
+  const e = s.length === 1 ? s[0] : t.reduce(((i, n, r) => i + ((o) => {
+    if (o._$cssResult$ === !0) return o.cssText;
+    if (typeof o == "number") return o;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(n) + s[r + 1]), s[0]);
+  return new gt(e, s, X);
+}, yt = (s, t) => {
+  if (Q) s.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
   else for (const e of t) {
-    const i = document.createElement("style"), r = I.litNonce;
-    r !== void 0 && i.setAttribute("nonce", r), i.textContent = e.cssText, s.appendChild(i);
+    const i = document.createElement("style"), n = D.litNonce;
+    n !== void 0 && i.setAttribute("nonce", n), i.textContent = e.cssText, s.appendChild(i);
   }
-}, tt = Z ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
+}, nt = Q ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const i of t.cssRules) e += i.cssText;
-  return vt(e);
+  return _t(e);
 })(s) : s;
@@ -51,6 +51,6 @@ /**
  */
-const { is: mt, defineProperty: yt, getOwnPropertyDescriptor: bt, getOwnPropertyNames: At, getOwnPropertySymbols: Et, getPrototypeOf: wt } = Object, v = globalThis, et = v.trustedTypes, xt = et ? et.emptyScript : "", W = v.reactiveElementPolyfillSupport, U = (s, t) => s, D = { toAttribute(s, t) {
+const { is: bt, defineProperty: xt, getOwnPropertyDescriptor: At, getOwnPropertyNames: wt, getOwnPropertySymbols: Et, getPrototypeOf: St } = Object, v = globalThis, rt = v.trustedTypes, Ct = rt ? rt.emptyScript : "", J = v.reactiveElementPolyfillSupport, T = (s, t) => s, j = { toAttribute(s, t) {
   switch (t) {
     case Boolean:
-      s = s ? xt : null;
+      s = s ? Ct : null;
       break;
@@ -80,5 +80,5 @@ case Object:
   return e;
-} }, Q = (s, t) => !mt(s, t), st = { attribute: !0, type: String, converter: D, reflect: !1, useDefault: !1, hasChanged: Q };
+} }, tt = (s, t) => !bt(s, t), ot = { attribute: !0, type: String, converter: j, reflect: !1, useDefault: !1, hasChanged: tt };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), v.litPropertyMetadata ?? (v.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let w = class extends HTMLElement {
+let S = class extends HTMLElement {
   static addInitializer(t) {
@@ -90,32 +90,32 @@ this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
-  static createProperty(t, e = st) {
+  static createProperty(t, e = ot) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
-      const i = Symbol(), r = this.getPropertyDescriptor(t, i, e);
-      r !== void 0 && yt(this.prototype, t, r);
+      const i = Symbol(), n = this.getPropertyDescriptor(t, i, e);
+      n !== void 0 && xt(this.prototype, t, n);
     }
   }
   static getPropertyDescriptor(t, e, i) {
-    const { get: r, set: o } = bt(this.prototype, t) ?? { get() {
+    const { get: n, set: r } = At(this.prototype, t) ?? { get() {
       return this[e];
-    }, set(n) {
-      this[e] = n;
+    }, set(o) {
+      this[e] = o;
     } };
-    return { get: r, set(n) {
-      const c = r == null ? void 0 : r.call(this);
-      o == null || o.call(this, n), this.requestUpdate(t, c, i);
+    return { get: n, set(o) {
+      const l = n == null ? void 0 : n.call(this);
+      r == null || r.call(this, o), this.requestUpdate(t, l, i);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? st;
+    return this.elementProperties.get(t) ?? ot;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(U("elementProperties"))) return;
-    const t = wt(this);
+    if (this.hasOwnProperty(T("elementProperties"))) return;
+    const t = St(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(U("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(U("properties"))) {
-      const e = this.properties, i = [...At(e), ...Et(e)];
-      for (const r of i) this.createProperty(r, e[r]);
+    if (this.hasOwnProperty(T("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(T("properties"))) {
+      const e = this.properties, i = [...wt(e), ...Et(e)];
+      for (const n of i) this.createProperty(n, e[n]);
     }
@@ -125,8 +125,8 @@ const t = this[Symbol.metadata];
       const e = litPropertyMetadata.get(t);
-      if (e !== void 0) for (const [i, r] of e) this.elementProperties.set(i, r);
+      if (e !== void 0) for (const [i, n] of e) this.elementProperties.set(i, n);
     }
     this._$Eh = /* @__PURE__ */ new Map();
     for (const [e, i] of this.elementProperties) {
-      const r = this._$Eu(e, i);
-      r !== void 0 && this._$Eh.set(r, e);
+      const n = this._$Eu(e, i);
+      n !== void 0 && this._$Eh.set(n, e);
     }
@@ -139,4 +139,4 @@ this.elementStyles = this.finalizeStyles(this.styles);
       const i = new Set(t.flat(1 / 0).reverse());
-      for (const r of i) e.unshift(tt(r));
-    } else t !== void 0 && e.push(tt(t));
+      for (const n of i) e.unshift(nt(n));
+    } else t !== void 0 && e.push(nt(t));
     return e;
@@ -170,3 +170,3 @@ }
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return _t(t, this.constructor.elementStyles), t;
+    return yt(t, this.constructor.elementStyles), t;
   }
@@ -193,24 +193,24 @@ connectedCallback() {
   _$ET(t, e) {
-    var o;
-    const i = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, i);
-    if (r !== void 0 && i.reflect === !0) {
-      const n = (((o = i.converter) == null ? void 0 : o.toAttribute) !== void 0 ? i.converter : D).toAttribute(e, i.type);
-      this._$Em = t, n == null ? this.removeAttribute(r) : this.setAttribute(r, n), this._$Em = null;
+    var r;
+    const i = this.constructor.elementProperties.get(t), n = this.constructor._$Eu(t, i);
+    if (n !== void 0 && i.reflect === !0) {
+      const o = (((r = i.converter) == null ? void 0 : r.toAttribute) !== void 0 ? i.converter : j).toAttribute(e, i.type);
+      this._$Em = t, o == null ? this.removeAttribute(n) : this.setAttribute(n, o), this._$Em = null;
     }
   }
   _$AK(t, e) {
-    var o, n;
-    const i = this.constructor, r = i._$Eh.get(t);
-    if (r !== void 0 && this._$Em !== r) {
-      const c = i.getPropertyOptions(r), a = typeof c.converter == "function" ? { fromAttribute: c.converter } : ((o = c.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? c.converter : D;
-      this._$Em = r;
-      const l = a.fromAttribute(e, c.type);
-      this[r] = l ?? ((n = this._$Ej) == null ? void 0 : n.get(r)) ?? l, this._$Em = null;
+    var r, o;
+    const i = this.constructor, n = i._$Eh.get(t);
+    if (n !== void 0 && this._$Em !== n) {
+      const l = i.getPropertyOptions(n), a = typeof l.converter == "function" ? { fromAttribute: l.converter } : ((r = l.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? l.converter : j;
+      this._$Em = n;
+      const c = a.fromAttribute(e, l.type);
+      this[n] = c ?? ((o = this._$Ej) == null ? void 0 : o.get(n)) ?? c, this._$Em = null;
     }
   }
   requestUpdate(t, e, i) {
-    var r;
+    var n;
     if (t !== void 0) {
-      const o = this.constructor, n = this[t];
-      if (i ?? (i = o.getPropertyOptions(t)), !((i.hasChanged ?? Q)(n, e) || i.useDefault && i.reflect && n === ((r = this._$Ej) == null ? void 0 : r.get(t)) && !this.hasAttribute(o._$Eu(t, i)))) return;
+      const r = this.constructor, o = this[t];
+      if (i ?? (i = r.getPropertyOptions(t)), !((i.hasChanged ?? tt)(o, e) || i.useDefault && i.reflect && o === ((n = this._$Ej) == null ? void 0 : n.get(t)) && !this.hasAttribute(r._$Eu(t, i)))) return;
       this.C(t, e, i);
@@ -220,4 +220,4 @@ }
   }
-  C(t, e, { useDefault: i, reflect: r, wrapped: o }, n) {
-    i && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, n ?? e ?? this[t]), o !== !0 || n !== void 0) || (this._$AL.has(t) || (this.hasUpdated || i || (e = void 0), this._$AL.set(t, e)), r === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
+  C(t, e, { useDefault: i, reflect: n, wrapped: r }, o) {
+    i && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, o ?? e ?? this[t]), r !== !0 || o !== void 0) || (this._$AL.has(t) || (this.hasUpdated || i || (e = void 0), this._$AL.set(t, e)), n === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
   }
@@ -242,9 +242,9 @@ async _$EP() {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [o, n] of this._$Ep) this[o] = n;
+        for (const [r, o] of this._$Ep) this[r] = o;
         this._$Ep = void 0;
       }
-      const r = this.constructor.elementProperties;
-      if (r.size > 0) for (const [o, n] of r) {
-        const { wrapped: c } = n, a = this[o];
-        c !== !0 || this._$AL.has(o) || a === void 0 || this.C(o, void 0, n, a);
+      const n = this.constructor.elementProperties;
+      if (n.size > 0) for (const [r, o] of n) {
+        const { wrapped: l } = o, a = this[r];
+        l !== !0 || this._$AL.has(r) || a === void 0 || this.C(r, void 0, o, a);
       }
@@ -255,8 +255,8 @@ }
     try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (i = this._$EO) == null || i.forEach(((r) => {
-        var o;
-        return (o = r.hostUpdate) == null ? void 0 : o.call(r);
+      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (i = this._$EO) == null || i.forEach(((n) => {
+        var r;
+        return (r = n.hostUpdate) == null ? void 0 : r.call(n);
       })), this.update(e)) : this._$EM();
-    } catch (r) {
-      throw t = !1, this._$EM(), r;
+    } catch (n) {
+      throw t = !1, this._$EM(), n;
     }
@@ -270,4 +270,4 @@ t && this._$AE(e);
     (e = this._$EO) == null || e.forEach(((i) => {
-      var r;
-      return (r = i.hostUpdated) == null ? void 0 : r.call(i);
+      var n;
+      return (n = i.hostUpdated) == null ? void 0 : n.call(i);
     })), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
@@ -295,3 +295,3 @@ }
 };
-w.elementStyles = [], w.shadowRootOptions = { mode: "open" }, w[U("elementProperties")] = /* @__PURE__ */ new Map(), w[U("finalized")] = /* @__PURE__ */ new Map(), W == null || W({ ReactiveElement: w }), (v.reactiveElementVersions ?? (v.reactiveElementVersions = [])).push("2.1.1");
+S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[T("elementProperties")] = /* @__PURE__ */ new Map(), S[T("finalized")] = /* @__PURE__ */ new Map(), J == null || J({ ReactiveElement: S }), (v.reactiveElementVersions ?? (v.reactiveElementVersions = [])).push("2.1.1");
 /**
@@ -302,66 +302,66 @@ * @license
  */
-const O = globalThis, j = O.trustedTypes, it = j ? j.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, pt = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, ut = "?" + $, St = `<${ut}>`, A = document, T = () => A.createComment(""), M = (s) => s === null || typeof s != "object" && typeof s != "function", X = Array.isArray, Ct = (s) => X(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", F = `[ 	
-\f\r]`, P = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, rt = /-->/g, ot = />/g, m = RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), nt = /'/g, at = /"/g, gt = /^(?:script|style|textarea|title)$/i, kt = (s) => (t, ...e) => ({ _$litType$: s, strings: t, values: e }), z = kt(1), E = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), ct = /* @__PURE__ */ new WeakMap(), y = A.createTreeWalker(A, 129);
-function ft(s, t) {
-  if (!X(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return it !== void 0 ? it.createHTML(t) : t;
+const L = globalThis, V = L.trustedTypes, at = V ? V.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, ft = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, $t = "?" + $, kt = `<${$t}>`, w = document, N = () => w.createComment(""), H = (s) => s === null || typeof s != "object" && typeof s != "function", et = Array.isArray, Pt = (s) => et(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", q = `[ 	
+\f\r]`, U = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, lt = /-->/g, ct = />/g, y = RegExp(`>|${q}(?:([^\\s"'>=/]+)(${q}*=${q}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ht = /'/g, dt = /"/g, vt = /^(?:script|style|textarea|title)$/i, Ot = (s) => (t, ...e) => ({ _$litType$: s, strings: t, values: e }), M = Ot(1), E = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), pt = /* @__PURE__ */ new WeakMap(), b = w.createTreeWalker(w, 129);
+function mt(s, t) {
+  if (!et(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return at !== void 0 ? at.createHTML(t) : t;
 }
-const Pt = (s, t) => {
+const Ut = (s, t) => {
   const e = s.length - 1, i = [];
-  let r, o = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = P;
-  for (let c = 0; c < e; c++) {
-    const a = s[c];
-    let l, d, h = -1, g = 0;
-    for (; g < a.length && (n.lastIndex = g, d = n.exec(a), d !== null); ) g = n.lastIndex, n === P ? d[1] === "!--" ? n = rt : d[1] !== void 0 ? n = ot : d[2] !== void 0 ? (gt.test(d[2]) && (r = RegExp("</" + d[2], "g")), n = m) : d[3] !== void 0 && (n = m) : n === m ? d[0] === ">" ? (n = r ?? P, h = -1) : d[1] === void 0 ? h = -2 : (h = n.lastIndex - d[2].length, l = d[1], n = d[3] === void 0 ? m : d[3] === '"' ? at : nt) : n === at || n === nt ? n = m : n === rt || n === ot ? n = P : (n = m, r = void 0);
-    const f = n === m && s[c + 1].startsWith("/>") ? " " : "";
-    o += n === P ? a + St : h >= 0 ? (i.push(l), a.slice(0, h) + pt + a.slice(h) + $ + f) : a + $ + (h === -2 ? c : f);
+  let n, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = U;
+  for (let l = 0; l < e; l++) {
+    const a = s[l];
+    let c, d, h = -1, g = 0;
+    for (; g < a.length && (o.lastIndex = g, d = o.exec(a), d !== null); ) g = o.lastIndex, o === U ? d[1] === "!--" ? o = lt : d[1] !== void 0 ? o = ct : d[2] !== void 0 ? (vt.test(d[2]) && (n = RegExp("</" + d[2], "g")), o = y) : d[3] !== void 0 && (o = y) : o === y ? d[0] === ">" ? (o = n ?? U, h = -1) : d[1] === void 0 ? h = -2 : (h = o.lastIndex - d[2].length, c = d[1], o = d[3] === void 0 ? y : d[3] === '"' ? dt : ht) : o === dt || o === ht ? o = y : o === lt || o === ct ? o = U : (o = y, n = void 0);
+    const f = o === y && s[l + 1].startsWith("/>") ? " " : "";
+    r += o === U ? a + kt : h >= 0 ? (i.push(c), a.slice(0, h) + ft + a.slice(h) + $ + f) : a + $ + (h === -2 ? l : f);
   }
-  return [ft(s, o + (s[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), i];
+  return [mt(s, r + (s[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), i];
 };
-class H {
+class R {
   constructor({ strings: t, _$litType$: e }, i) {
-    let r;
+    let n;
     this.parts = [];
-    let o = 0, n = 0;
-    const c = t.length - 1, a = this.parts, [l, d] = Pt(t, e);
-    if (this.el = H.createElement(l, i), y.currentNode = this.el.content, e === 2 || e === 3) {
+    let r = 0, o = 0;
+    const l = t.length - 1, a = this.parts, [c, d] = Ut(t, e);
+    if (this.el = R.createElement(c, i), b.currentNode = this.el.content, e === 2 || e === 3) {
       const h = this.el.content.firstChild;
       h.replaceWith(...h.childNodes);
     }
-    for (; (r = y.nextNode()) !== null && a.length < c; ) {
-      if (r.nodeType === 1) {
-        if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(pt)) {
-          const g = d[n++], f = r.getAttribute(h).split($), L = /([.?@])?(.*)/.exec(g);
-          a.push({ type: 1, index: o, name: L[2], strings: f, ctor: L[1] === "." ? Ot : L[1] === "?" ? Tt : L[1] === "@" ? Mt : V }), r.removeAttribute(h);
-        } else h.startsWith($) && (a.push({ type: 6, index: o }), r.removeAttribute(h));
-        if (gt.test(r.tagName)) {
-          const h = r.textContent.split($), g = h.length - 1;
+    for (; (n = b.nextNode()) !== null && a.length < l; ) {
+      if (n.nodeType === 1) {
+        if (n.hasAttributes()) for (const h of n.getAttributeNames()) if (h.endsWith(ft)) {
+          const g = d[o++], f = n.getAttribute(h).split($), I = /([.?@])?(.*)/.exec(g);
+          a.push({ type: 1, index: r, name: I[2], strings: f, ctor: I[1] === "." ? Lt : I[1] === "?" ? Mt : I[1] === "@" ? Nt : B }), n.removeAttribute(h);
+        } else h.startsWith($) && (a.push({ type: 6, index: r }), n.removeAttribute(h));
+        if (vt.test(n.tagName)) {
+          const h = n.textContent.split($), g = h.length - 1;
           if (g > 0) {
-            r.textContent = j ? j.emptyScript : "";
-            for (let f = 0; f < g; f++) r.append(h[f], T()), y.nextNode(), a.push({ type: 2, index: ++o });
-            r.append(h[g], T());
+            n.textContent = V ? V.emptyScript : "";
+            for (let f = 0; f < g; f++) n.append(h[f], N()), b.nextNode(), a.push({ type: 2, index: ++r });
+            n.append(h[g], N());
           }
         }
-      } else if (r.nodeType === 8) if (r.data === ut) a.push({ type: 2, index: o });
+      } else if (n.nodeType === 8) if (n.data === $t) a.push({ type: 2, index: r });
       else {
         let h = -1;
-        for (; (h = r.data.indexOf($, h + 1)) !== -1; ) a.push({ type: 7, index: o }), h += $.length - 1;
+        for (; (h = n.data.indexOf($, h + 1)) !== -1; ) a.push({ type: 7, index: r }), h += $.length - 1;
       }
-      o++;
+      r++;
     }
   }
   static createElement(t, e) {
-    const i = A.createElement("template");
+    const i = w.createElement("template");
     return i.innerHTML = t, i;
   }
 }
-function S(s, t, e = s, i) {
-  var n, c;
+function C(s, t, e = s, i) {
+  var o, l;
   if (t === E) return t;
-  let r = i !== void 0 ? (n = e._$Co) == null ? void 0 : n[i] : e._$Cl;
-  const o = M(t) ? void 0 : t._$litDirective$;
-  return (r == null ? void 0 : r.constructor) !== o && ((c = r == null ? void 0 : r._$AO) == null || c.call(r, !1), o === void 0 ? r = void 0 : (r = new o(s), r._$AT(s, e, i)), i !== void 0 ? (e._$Co ?? (e._$Co = []))[i] = r : e._$Cl = r), r !== void 0 && (t = S(s, r._$AS(s, t.values), r, i)), t;
+  let n = i !== void 0 ? (o = e._$Co) == null ? void 0 : o[i] : e._$Cl;
+  const r = H(t) ? void 0 : t._$litDirective$;
+  return (n == null ? void 0 : n.constructor) !== r && ((l = n == null ? void 0 : n._$AO) == null || l.call(n, !1), r === void 0 ? n = void 0 : (n = new r(s), n._$AT(s, e, i)), i !== void 0 ? (e._$Co ?? (e._$Co = []))[i] = n : e._$Cl = n), n !== void 0 && (t = C(s, n._$AS(s, t.values), n, i)), t;
 }
-class Ut {
+class Tt {
   constructor(t, e) {
@@ -377,13 +377,13 @@ this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
   u(t) {
-    const { el: { content: e }, parts: i } = this._$AD, r = ((t == null ? void 0 : t.creationScope) ?? A).importNode(e, !0);
-    y.currentNode = r;
-    let o = y.nextNode(), n = 0, c = 0, a = i[0];
+    const { el: { content: e }, parts: i } = this._$AD, n = ((t == null ? void 0 : t.creationScope) ?? w).importNode(e, !0);
+    b.currentNode = n;
+    let r = b.nextNode(), o = 0, l = 0, a = i[0];
     for (; a !== void 0; ) {
-      if (n === a.index) {
-        let l;
-        a.type === 2 ? l = new N(o, o.nextSibling, this, t) : a.type === 1 ? l = new a.ctor(o, a.name, a.strings, this, t) : a.type === 6 && (l = new Ht(o, this, t)), this._$AV.push(l), a = i[++c];
+      if (o === a.index) {
+        let c;
+        a.type === 2 ? c = new z(r, r.nextSibling, this, t) : a.type === 1 ? c = new a.ctor(r, a.name, a.strings, this, t) : a.type === 6 && (c = new Ht(r, this, t)), this._$AV.push(c), a = i[++l];
       }
-      n !== (a == null ? void 0 : a.index) && (o = y.nextNode(), n++);
+      o !== (a == null ? void 0 : a.index) && (r = b.nextNode(), o++);
     }
-    return y.currentNode = A, r;
+    return b.currentNode = w, n;
   }
@@ -395,3 +395,3 @@ p(t) {
 }
-class N {
+class z {
   get _$AU() {
@@ -401,4 +401,4 @@ var t;
   }
-  constructor(t, e, i, r) {
-    this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = r, this._$Cv = (r == null ? void 0 : r.isConnected) ?? !0;
+  constructor(t, e, i, n) {
+    this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = n, this._$Cv = (n == null ? void 0 : n.isConnected) ?? !0;
   }
@@ -417,3 +417,3 @@ get parentNode() {
   _$AI(t, e = this) {
-    t = S(this, t, e), M(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Ct(t) ? this.k(t) : this._(t);
+    t = C(this, t, e), H(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Pt(t) ? this.k(t) : this._(t);
   }
@@ -427,23 +427,23 @@ O(t) {
   _(t) {
-    this._$AH !== p && M(this._$AH) ? this._$AA.nextSibling.data = t : this.T(A.createTextNode(t)), this._$AH = t;
+    this._$AH !== p && H(this._$AH) ? this._$AA.nextSibling.data = t : this.T(w.createTextNode(t)), this._$AH = t;
   }
   $(t) {
-    var o;
-    const { values: e, _$litType$: i } = t, r = typeof i == "number" ? this._$AC(t) : (i.el === void 0 && (i.el = H.createElement(ft(i.h, i.h[0]), this.options)), i);
-    if (((o = this._$AH) == null ? void 0 : o._$AD) === r) this._$AH.p(e);
+    var r;
+    const { values: e, _$litType$: i } = t, n = typeof i == "number" ? this._$AC(t) : (i.el === void 0 && (i.el = R.createElement(mt(i.h, i.h[0]), this.options)), i);
+    if (((r = this._$AH) == null ? void 0 : r._$AD) === n) this._$AH.p(e);
     else {
-      const n = new Ut(r, this), c = n.u(this.options);
-      n.p(e), this.T(c), this._$AH = n;
+      const o = new Tt(n, this), l = o.u(this.options);
+      o.p(e), this.T(l), this._$AH = o;
     }
   }
   _$AC(t) {
-    let e = ct.get(t.strings);
-    return e === void 0 && ct.set(t.strings, e = new H(t)), e;
+    let e = pt.get(t.strings);
+    return e === void 0 && pt.set(t.strings, e = new R(t)), e;
   }
   k(t) {
-    X(this._$AH) || (this._$AH = [], this._$AR());
+    et(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
-    let i, r = 0;
-    for (const o of t) r === e.length ? e.push(i = new N(this.O(T()), this.O(T()), this, this.options)) : i = e[r], i._$AI(o), r++;
-    r < e.length && (this._$AR(i && i._$AB.nextSibling, r), e.length = r);
+    let i, n = 0;
+    for (const r of t) n === e.length ? e.push(i = new z(this.O(N()), this.O(N()), this, this.options)) : i = e[n], i._$AI(r), n++;
+    n < e.length && (this._$AR(i && i._$AB.nextSibling, n), e.length = n);
   }
@@ -453,4 +453,4 @@ _$AR(t = this._$AA.nextSibling, e) {
     for ((i = this._$AP) == null ? void 0 : i.call(this, !1, !0, e); t !== this._$AB; ) {
-      const r = t.nextSibling;
-      t.remove(), t = r;
+      const n = t.nextSibling;
+      t.remove(), t = n;
     }
@@ -463,3 +463,3 @@ }
 }
-class V {
+class B {
   get tagName() {
@@ -471,15 +471,15 @@ return this.element.tagName;
   }
-  constructor(t, e, i, r, o) {
-    this.type = 1, this._$AH = p, this._$AN = void 0, this.element = t, this.name = e, this._$AM = r, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = p;
+  constructor(t, e, i, n, r) {
+    this.type = 1, this._$AH = p, this._$AN = void 0, this.element = t, this.name = e, this._$AM = n, this.options = r, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = p;
   }
-  _$AI(t, e = this, i, r) {
-    const o = this.strings;
-    let n = !1;
-    if (o === void 0) t = S(this, t, e, 0), n = !M(t) || t !== this._$AH && t !== E, n && (this._$AH = t);
+  _$AI(t, e = this, i, n) {
+    const r = this.strings;
+    let o = !1;
+    if (r === void 0) t = C(this, t, e, 0), o = !H(t) || t !== this._$AH && t !== E, o && (this._$AH = t);
     else {
-      const c = t;
-      let a, l;
-      for (t = o[0], a = 0; a < o.length - 1; a++) l = S(this, c[i + a], e, a), l === E && (l = this._$AH[a]), n || (n = !M(l) || l !== this._$AH[a]), l === p ? t = p : t !== p && (t += (l ?? "") + o[a + 1]), this._$AH[a] = l;
+      const l = t;
+      let a, c;
+      for (t = r[0], a = 0; a < r.length - 1; a++) c = C(this, l[i + a], e, a), c === E && (c = this._$AH[a]), o || (o = !H(c) || c !== this._$AH[a]), c === p ? t = p : t !== p && (t += (c ?? "") + r[a + 1]), this._$AH[a] = c;
     }
-    n && !r && this.j(t);
+    o && !n && this.j(t);
   }
@@ -490,3 +490,3 @@ j(t) {
 }
-class Ot extends V {
+class Lt extends B {
   constructor() {
@@ -499,3 +499,3 @@ super(...arguments), this.type = 3;
 }
-class Tt extends V {
+class Mt extends B {
   constructor() {
@@ -508,10 +508,10 @@ super(...arguments), this.type = 4;
 }
-class Mt extends V {
-  constructor(t, e, i, r, o) {
-    super(t, e, i, r, o), this.type = 5;
+class Nt extends B {
+  constructor(t, e, i, n, r) {
+    super(t, e, i, n, r), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = S(this, t, e, 0) ?? p) === E) return;
-    const i = this._$AH, r = t === p && i !== p || t.capture !== i.capture || t.once !== i.once || t.passive !== i.passive, o = t !== p && (i === p || r);
-    r && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, t), this._$AH = t;
+    if ((t = C(this, t, e, 0) ?? p) === E) return;
+    const i = this._$AH, n = t === p && i !== p || t.capture !== i.capture || t.once !== i.once || t.passive !== i.passive, r = t !== p && (i === p || n);
+    n && this.element.removeEventListener(this.name, this, i), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -531,15 +531,15 @@ handleEvent(t) {
   _$AI(t) {
-    S(this, t);
+    C(this, t);
   }
 }
-const J = O.litHtmlPolyfillSupport;
-J == null || J(H, N), (O.litHtmlVersions ?? (O.litHtmlVersions = [])).push("3.3.1");
-const Nt = (s, t, e) => {
+const K = L.litHtmlPolyfillSupport;
+K == null || K(R, z), (L.litHtmlVersions ?? (L.litHtmlVersions = [])).push("3.3.1");
+const Rt = (s, t, e) => {
   const i = (e == null ? void 0 : e.renderBefore) ?? t;
-  let r = i._$litPart$;
-  if (r === void 0) {
-    const o = (e == null ? void 0 : e.renderBefore) ?? null;
-    i._$litPart$ = r = new N(t.insertBefore(T(), o), o, void 0, e ?? {});
+  let n = i._$litPart$;
+  if (n === void 0) {
+    const r = (e == null ? void 0 : e.renderBefore) ?? null;
+    i._$litPart$ = n = new z(t.insertBefore(N(), r), r, void 0, e ?? {});
   }
-  return r._$AI(s), r;
+  return n._$AI(s), n;
 };
@@ -551,4 +551,4 @@ /**
  */
-const b = globalThis;
-let x = class extends w {
+const x = globalThis;
+let A = class extends S {
   constructor() {
@@ -564,3 +564,3 @@ super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
     const e = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Nt(e, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Rt(e, this.renderRoot, this.renderOptions);
   }
@@ -579,7 +579,7 @@ connectedCallback() {
 };
-var lt;
-x._$litElement$ = !0, x.finalized = !0, (lt = b.litElementHydrateSupport) == null || lt.call(b, { LitElement: x });
-const q = b.litElementPolyfillSupport;
-q == null || q({ LitElement: x });
-(b.litElementVersions ?? (b.litElementVersions = [])).push("4.2.1");
+var ut;
+A._$litElement$ = !0, A.finalized = !0, (ut = x.litElementHydrateSupport) == null || ut.call(x, { LitElement: A });
+const Z = x.litElementPolyfillSupport;
+Z == null || Z({ LitElement: A });
+(x.litElementVersions ?? (x.litElementVersions = [])).push("4.2.1");
 /**
@@ -590,3 +590,3 @@ * @license
  */
-const $t = (s) => (t, e) => {
+const st = (s) => (t, e) => {
   e !== void 0 ? e.addInitializer((() => {
@@ -601,19 +601,19 @@ customElements.define(s, t);
  */
-const Rt = { attribute: !0, type: String, converter: D, reflect: !1, hasChanged: Q }, Lt = (s = Rt, t, e) => {
-  const { kind: i, metadata: r } = e;
-  let o = globalThis.litPropertyMetadata.get(r);
-  if (o === void 0 && globalThis.litPropertyMetadata.set(r, o = /* @__PURE__ */ new Map()), i === "setter" && ((s = Object.create(s)).wrapped = !0), o.set(e.name, s), i === "accessor") {
-    const { name: n } = e;
-    return { set(c) {
+const zt = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged: tt }, It = (s = zt, t, e) => {
+  const { kind: i, metadata: n } = e;
+  let r = globalThis.litPropertyMetadata.get(n);
+  if (r === void 0 && globalThis.litPropertyMetadata.set(n, r = /* @__PURE__ */ new Map()), i === "setter" && ((s = Object.create(s)).wrapped = !0), r.set(e.name, s), i === "accessor") {
+    const { name: o } = e;
+    return { set(l) {
       const a = t.get.call(this);
-      t.set.call(this, c), this.requestUpdate(n, a, s);
-    }, init(c) {
-      return c !== void 0 && this.C(n, void 0, s, c), c;
+      t.set.call(this, l), this.requestUpdate(o, a, s);
+    }, init(l) {
+      return l !== void 0 && this.C(o, void 0, s, l), l;
     } };
   }
   if (i === "setter") {
-    const { name: n } = e;
-    return function(c) {
-      const a = this[n];
-      t.call(this, c), this.requestUpdate(n, a, s);
+    const { name: o } = e;
+    return function(l) {
+      const a = this[o];
+      t.call(this, l), this.requestUpdate(o, a, s);
     };
@@ -623,6 +623,6 @@ }
 };
-function R(s) {
-  return (t, e) => typeof e == "object" ? Lt(s, t, e) : ((i, r, o) => {
-    const n = r.hasOwnProperty(o);
-    return r.constructor.createProperty(o, i), n ? Object.getOwnPropertyDescriptor(r, o) : void 0;
+function O(s) {
+  return (t, e) => typeof e == "object" ? It(s, t, e) : ((i, n, r) => {
+    const o = n.hasOwnProperty(r);
+    return n.constructor.createProperty(r, i), o ? Object.getOwnPropertyDescriptor(n, r) : void 0;
   })(s, t, e);
@@ -635,4 +635,4 @@ }
  */
-function k(s) {
-  return R({ ...s, state: !0, attribute: !1 });
+function m(s) {
+  return O({ ...s, state: !0, attribute: !1 });
 }
@@ -644,4 +644,4 @@ /**
  */
-const It = { CHILD: 2 }, zt = (s) => (...t) => ({ _$litDirective$: s, values: t });
-class Dt {
+const Dt = { CHILD: 2 }, jt = (s) => (...t) => ({ _$litDirective$: s, values: t });
+class Vt {
   constructor(t) {
@@ -667,5 +667,5 @@ }
  */
-class K extends Dt {
+class G extends Vt {
   constructor(t) {
-    if (super(t), this.it = p, t.type !== It.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(t), this.it = p, t.type !== Dt.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
@@ -682,5 +682,5 @@ render(t) {
 }
-K.directiveName = "unsafeHTML", K.resultType = 1;
-const jt = zt(K);
-function Vt() {
+G.directiveName = "unsafeHTML", G.resultType = 1;
+const Bt = jt(G);
+function Wt() {
   if (typeof crypto < "u" && crypto.randomUUID)
@@ -697,3 +697,3 @@ return crypto.randomUUID();
 }
-class Bt extends EventTarget {
+class Ft extends EventTarget {
   constructor(t) {
@@ -727,2 +727,6 @@ super(), this.ws = null, this.reconnectAttempts = 0, this._status = "disconnected", this.config = {
   }
+  send(t) {
+    var e;
+    ((e = this.ws) == null ? void 0 : e.readyState) === WebSocket.OPEN && this.ws.send(t);
+  }
   setupEventHandlers() {
@@ -743,4 +747,4 @@ this.ws && (this.ws.onopen = () => {
       }
-      const r = {
-        id: Vt(),
+      const n = {
+        id: Wt(),
         timestamp: /* @__PURE__ */ new Date(),
@@ -750,3 +754,3 @@ data: i,
       };
-      this.dispatchEvent(new CustomEvent("log", { detail: r }));
+      this.dispatchEvent(new CustomEvent("log", { detail: n }));
     });
@@ -758,3 +762,3 @@ }
 }
-class Wt extends EventTarget {
+class Jt extends EventTarget {
   constructor(t = 1e3) {
@@ -799,8 +803,8 @@ super(), this.logs = [], this._filter = {}, this._paused = !1, this.maxLogs = t;
 }
-var Ft = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, _ = (s, t, e, i) => {
-  for (var r = i > 1 ? void 0 : i ? Jt(t, e) : t, o = s.length - 1, n; o >= 0; o--)
-    (n = s[o]) && (r = (i ? n(t, e, r) : n(r)) || r);
-  return i && r && Ft(t, e, r), r;
+var qt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, _ = (s, t, e, i) => {
+  for (var n = i > 1 ? void 0 : i ? Kt(t, e) : t, r = s.length - 1, o; r >= 0; r--)
+    (o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
+  return i && n && qt(t, e, n), n;
 };
-let u = class extends x {
+let u = class extends A {
   constructor() {
@@ -817,3 +821,3 @@ super(...arguments), this.url = "", this.maxLogs = 1e3, this.indent = 4, this.logs = [], this.status = "disconnected", this.searchTerm = "", this.expandedIds = /* @__PURE__ */ new Set(), this.client = null, this.store = null;
   initializeStore() {
-    this.store = new Wt(this.maxLogs), this.store.addEventListener("logadded", () => {
+    this.store = new Jt(this.maxLogs), this.store.addEventListener("logadded", () => {
       var s;
@@ -829,3 +833,3 @@ this.logs = ((s = this.store) == null ? void 0 : s.getFiltered()) ?? [];
   connect() {
-    this.url && (this.client = new Bt({ url: this.url }), this.client.addEventListener("statuschange", ((s) => {
+    this.url && (this.client = new Ft({ url: this.url }), this.client.addEventListener("statuschange", ((s) => {
       this.status = s.detail;
@@ -844,2 +848,5 @@ })), this.client.addEventListener("log", ((s) => {
   }
+  getClient() {
+    return this.client;
+  }
   toggleExpanded(s) {
@@ -863,6 +870,6 @@ this.expandedIds.has(s) ? this.expandedIds.delete(s) : this.expandedIds.add(s), this.expandedIds = new Set(this.expandedIds);
       if (/\s/.test(i)) {
-        let o = "";
+        let r = "";
         for (; e < s.length && /\s/.test(s[e]); )
-          o += s[e], e++;
-        t.push({ type: "whitespace", value: o });
+          r += s[e], e++;
+        t.push({ type: "whitespace", value: r });
         continue;
@@ -875,18 +882,18 @@ }
       if (i === '"') {
-        let o = '"';
+        let r = '"';
         for (e++; e < s.length; )
           if (s[e] === "\\" && e + 1 < s.length)
-            o += s[e] + s[e + 1], e += 2;
+            r += s[e] + s[e + 1], e += 2;
           else if (s[e] === '"') {
-            o += '"', e++;
+            r += '"', e++;
             break;
           } else
-            o += s[e], e++;
-        t.push({ type: "string", value: o });
+            r += s[e], e++;
+        t.push({ type: "string", value: r });
         continue;
       }
-      let r = "";
+      let n = "";
       for (; e < s.length && !/[\s{}[\]:,"]/.test(s[e]); )
-        r += s[e], e++;
-      r && t.push({ type: "value", value: r });
+        n += s[e], e++;
+      n && t.push({ type: "value", value: n });
     }
@@ -898,16 +905,16 @@ return t;
     typeof s == "string" ? e = s : e = t ? JSON.stringify(s, null, this.indent) : JSON.stringify(s);
-    const i = this.tokenizeJson(e), r = [];
-    for (let n = 0; n < i.length; n++) {
-      const c = i[n], a = i[n + 1], l = c.value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), d = c.type === "string" && (a == null ? void 0 : a.value) === ":";
-      c.type === "whitespace" ? r.push(l) : c.type === "punctuation" ? r.push(`<span class="json-punct">${l}</span>`) : d ? r.push(`<span class="json-key">${l}</span>`) : c.type === "string" ? r.push(`<span class="json-string">${l}</span>`) : r.push(`<span class="json-value">${l}</span>`);
+    const i = this.tokenizeJson(e), n = [];
+    for (let o = 0; o < i.length; o++) {
+      const l = i[o], a = i[o + 1], c = l.value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), d = l.type === "string" && (a == null ? void 0 : a.value) === ":";
+      l.type === "whitespace" ? n.push(c) : l.type === "punctuation" ? n.push(`<span class="json-punct">${c}</span>`) : d ? n.push(`<span class="json-key">${c}</span>`) : l.type === "string" ? n.push(`<span class="json-string">${c}</span>`) : n.push(`<span class="json-value">${c}</span>`);
     }
-    let o = t ? r.join("") : r.join("<wbr>");
+    let r = t ? n.join("") : n.join("<wbr>");
     if (this.searchTerm) {
-      const n = this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), c = new RegExp(`(${n})`, "gi");
-      o = o.replace(/(<[^>]*>)|([^<]+)/g, (a, l, d) => l || d.replace(c, '<span class="search-highlight">$1</span>'));
+      const o = this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), l = new RegExp(`(${o})`, "gi");
+      r = r.replace(/(<[^>]*>)|([^<]+)/g, (a, c, d) => c || d.replace(l, '<span class="search-highlight">$1</span>'));
     }
-    return jt(o);
+    return Bt(r);
   }
   render() {
-    return this.logs.length === 0 ? z`
+    return this.logs.length === 0 ? M`
         <div class="log-container">
@@ -918,6 +925,6 @@ <div class="empty-state">
         </div>
-      ` : z`
+      ` : M`
       <div class="log-container">
         ${this.logs.map(
-      (s) => z`
+      (s) => M`
             <div class="log-entry">
@@ -936,3 +943,3 @@ <div class="log-header" @click=${() => this.toggleExpanded(s.id)}>
 };
-u.styles = dt`
+u.styles = Y`
     :host {
@@ -1013,31 +1020,31 @@ display: block;
 _([
-  R({ type: String })
+  O({ type: String })
 ], u.prototype, "url", 2);
 _([
-  R({ type: Number })
+  O({ type: Number })
 ], u.prototype, "maxLogs", 2);
 _([
-  R({ type: Number })
+  O({ type: Number })
 ], u.prototype, "indent", 2);
 _([
-  k()
+  m()
 ], u.prototype, "logs", 2);
 _([
-  k()
+  m()
 ], u.prototype, "status", 2);
 _([
-  k()
+  m()
 ], u.prototype, "searchTerm", 2);
 _([
-  k()
+  m()
 ], u.prototype, "expandedIds", 2);
 u = _([
-  $t("socklog-viewer")
+  st("socklog-viewer")
 ], u);
-var qt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, B = (s, t, e, i) => {
-  for (var r = i > 1 ? void 0 : i ? Kt(t, e) : t, o = s.length - 1, n; o >= 0; o--)
-    (n = s[o]) && (r = (i ? n(t, e, r) : n(r)) || r);
-  return i && r && qt(t, e, r), r;
+var Zt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, W = (s, t, e, i) => {
+  for (var n = i > 1 ? void 0 : i ? Gt(t, e) : t, r = s.length - 1, o; r >= 0; r--)
+    (o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
+  return i && n && Zt(t, e, n), n;
 };
-let C = class extends x {
+let k = class extends A {
   constructor() {
@@ -1074,3 +1081,3 @@ super(...arguments), this.store = null, this.searchValue = "", this.paused = !1;
   render() {
-    return z`
+    return M`
       <div class="controls-inner">
@@ -1099,3 +1106,3 @@ <div class="search-container">
 };
-C.styles = dt`
+k.styles = Y`
     :host {
@@ -1181,20 +1188,174 @@ display: block;
   `;
-B([
-  R({ attribute: !1 })
-], C.prototype, "store", 2);
-B([
-  k()
-], C.prototype, "searchValue", 2);
-B([
-  k()
-], C.prototype, "paused", 2);
-C = B([
-  $t("socklog-controls")
-], C);
+W([
+  O({ attribute: !1 })
+], k.prototype, "store", 2);
+W([
+  m()
+], k.prototype, "searchValue", 2);
+W([
+  m()
+], k.prototype, "paused", 2);
+k = W([
+  st("socklog-controls")
+], k);
+var Qt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, F = (s, t, e, i) => {
+  for (var n = i > 1 ? void 0 : i ? Xt(t, e) : t, r = s.length - 1, o; r >= 0; r--)
+    (o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
+  return i && n && Qt(t, e, n), n;
+};
+let P = class extends A {
+  constructor() {
+    super(...arguments), this.client = null, this.value = "", this.status = "disconnected", this.statusListener = null, this.listeningClient = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setupClientListeners();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.teardownClientListeners();
+  }
+  updated(s) {
+    s.has("client") && (this.teardownClientListeners(), this.setupClientListeners());
+  }
+  setupClientListeners() {
+    this.client && (this.status = this.client.status, this.statusListener = ((s) => {
+      this.status = s.detail;
+    }), this.client.addEventListener("statuschange", this.statusListener), this.listeningClient = this.client);
+  }
+  teardownClientListeners() {
+    this.listeningClient && this.statusListener && this.listeningClient.removeEventListener("statuschange", this.statusListener), this.listeningClient = null, this.statusListener = null;
+  }
+  handleInput(s) {
+    const t = s.target;
+    this.value = t.value;
+  }
+  handleKeyDown(s) {
+    (s.metaKey || s.ctrlKey) && s.key === "Enter" && (s.preventDefault(), this.send());
+  }
+  send() {
+    this.canSend() && (this.client.send(this.value), this.value = "");
+  }
+  canSend() {
+    return !!this.client && this.status === "connected" && this.value.length > 0;
+  }
+  render() {
+    const s = !this.canSend();
+    return M`
+      <div class="sender-inner">
+        <div class="input-container">
+          <textarea
+            placeholder="Type a message and press Send (or Cmd/Ctrl+Enter)..."
+            .value=${this.value}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+          ></textarea>
+        </div>
+
+        <div class="actions">
+          <button class="send-btn" ?disabled=${s} @click=${this.send}>Send</button>
+        </div>
+      </div>
+    `;
+  }
+};
+P.styles = Y`
+    :host {
+      display: block;
+      width: 100%;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .sender-inner {
+      display: flex;
+      align-items: stretch;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--socklog-controls-bg, inherit);
+      border-bottom: 1px solid var(--socklog-border-color, #e0e0e0);
+      font-family: var(
+        --socklog-ui-font-family,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        sans-serif
+      );
+      font-size: 13px;
+      color: var(--socklog-color, inherit);
+      box-sizing: border-box;
+    }
+
+    .input-container {
+      flex: 1;
+      min-width: 0;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 60px;
+      padding: 6px 10px;
+      border: 1px solid var(--socklog-input-border, #ccc);
+      border-radius: 4px;
+      background: var(--socklog-input-bg, #fff);
+      color: var(--socklog-input-color, inherit);
+      font-family: var(--socklog-font-family, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);
+      font-size: 13px;
+      box-sizing: border-box;
+      resize: vertical;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--socklog-focus-color, #007bff);
+    }
+
+    textarea::placeholder {
+      color: var(--socklog-muted-color, #999);
+    }
+
+    .actions {
+      display: flex;
+      align-items: flex-end;
+      flex-shrink: 0;
+    }
+
+    .send-btn {
+      padding: 6px 16px;
+      border: 1px solid var(--socklog-focus-color, #007bff);
+      border-radius: 4px;
+      background: var(--socklog-focus-color, #007bff);
+      color: #fff;
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 0.15s ease;
+    }
+
+    .send-btn:hover:not(:disabled) {
+      filter: brightness(1.1);
+    }
+
+    .send-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;
+F([
+  O({ attribute: !1 })
+], P.prototype, "client", 2);
+F([
+  m()
+], P.prototype, "value", 2);
+F([
+  m()
+], P.prototype, "status", 2);
+P = F([
+  st("socklog-sender")
+], P);
 export {
-  Wt as LogStore,
-  C as SocklogControls,
+  Jt as LogStore,
+  k as SocklogControls,
+  P as SocklogSender,
   u as SocklogViewer,
-  Bt as WebSocketClient
+  Ft as WebSocketClient
 };
 //# sourceMappingURL=socklog.js.map

dist/socklog.umd.js

@@ -1,40 +0,40 @@
-(function(d,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(d=typeof globalThis<"u"?globalThis:d||self,f(d.Socklog={}))})(this,(function(d){"use strict";/**
+(function(c,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(c=typeof globalThis<"u"?globalThis:c||self,f(c.Socklog={}))})(this,(function(c){"use strict";/**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var mt;const f=globalThis,B=f.ShadowRoot&&(f.ShadyCSS===void 0||f.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,W=Symbol(),X=new WeakMap;let Y=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==W)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(B&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=X.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&X.set(e,t))}return t}toString(){return this.cssText}};const vt=o=>new Y(typeof o=="string"?o:o+"",void 0,W),tt=(o,...t)=>{const e=o.length===1?o[0]:t.reduce(((s,i,n)=>s+(r=>{if(r._$cssResult$===!0)return r.cssText;if(typeof r=="number")return r;throw Error("Value passed to 'css' function must be a 'css' function result: "+r+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+o[n+1]),o[0]);return new Y(e,o,W)},_t=(o,t)=>{if(B)o.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of t){const s=document.createElement("style"),i=f.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,o.appendChild(s)}},et=B?o=>o:o=>o instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return vt(e)})(o):o;/**
+ */var mt;const f=globalThis,W=f.ShadowRoot&&(f.ShadyCSS===void 0||f.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,F=Symbol(),et=new WeakMap;let st=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==F)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(W&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=et.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&et.set(e,t))}return t}toString(){return this.cssText}};const _t=o=>new st(typeof o=="string"?o:o+"",void 0,F),J=(o,...t)=>{const e=o.length===1?o[0]:t.reduce(((s,i,r)=>s+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+o[r+1]),o[0]);return new st(e,o,F)},yt=(o,t)=>{if(W)o.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of t){const s=document.createElement("style"),i=f.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,o.appendChild(s)}},it=W?o=>o:o=>o instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return _t(e)})(o):o;/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const{is:yt,defineProperty:bt,getOwnPropertyDescriptor:At,getOwnPropertyNames:wt,getOwnPropertySymbols:St,getPrototypeOf:Et}=Object,$=globalThis,st=$.trustedTypes,kt=st?st.emptyScript:"",F=$.reactiveElementPolyfillSupport,P=(o,t)=>o,L={toAttribute(o,t){switch(t){case Boolean:o=o?kt:null;break;case Object:case Array:o=o==null?o:JSON.stringify(o)}return o},fromAttribute(o,t){let e=o;switch(t){case Boolean:e=o!==null;break;case Number:e=o===null?null:Number(o);break;case Object:case Array:try{e=JSON.parse(o)}catch{e=null}}return e}},J=(o,t)=>!yt(o,t),it={attribute:!0,type:String,converter:L,reflect:!1,useDefault:!1,hasChanged:J};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),$.litPropertyMetadata??($.litPropertyMetadata=new WeakMap);let E=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=it){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&bt(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=At(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get:i,set(r){const l=i==null?void 0:i.call(this);n==null||n.call(this,r),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??it}static _$Ei(){if(this.hasOwnProperty(P("elementProperties")))return;const t=Et(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(P("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(P("properties"))){const e=this.properties,s=[...wt(e),...St(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(et(i))}else t!==void 0&&e.push(et(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return _t(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var n;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const r=(((n=s.converter)==null?void 0:n.toAttribute)!==void 0?s.converter:L).toAttribute(e,s.type);this._$Em=t,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){var n,r;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const l=s.getPropertyOptions(i),a=typeof l.converter=="function"?{fromAttribute:l.converter}:((n=l.converter)==null?void 0:n.fromAttribute)!==void 0?l.converter:L;this._$Em=i;const h=a.fromAttribute(e,l.type);this[i]=h??((r=this._$Ej)==null?void 0:r.get(i))??h,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const n=this.constructor,r=this[t];if(s??(s=n.getPropertyOptions(t)),!((s.hasChanged??J)(r,e)||s.useDefault&&s.reflect&&r===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(n._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},r){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,r??e??this[t]),n!==!0||r!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[n,r]of this._$Ep)this[n]=r;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[n,r]of i){const{wrapped:l}=r,a=this[n];l!==!0||this._$AL.has(n)||a===void 0||this.C(n,void 0,r,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var n;return(n=i.hostUpdate)==null?void 0:n.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}};E.elementStyles=[],E.shadowRootOptions={mode:"open"},E[P("elementProperties")]=new Map,E[P("finalized")]=new Map,F==null||F({ReactiveElement:E}),($.reactiveElementVersions??($.reactiveElementVersions=[])).push("2.1.1");/**
+ */const{is:bt,defineProperty:St,getOwnPropertyDescriptor:At,getOwnPropertyNames:wt,getOwnPropertySymbols:Et,getPrototypeOf:kt}=Object,$=globalThis,ot=$.trustedTypes,xt=ot?ot.emptyScript:"",q=$.reactiveElementPolyfillSupport,O=(o,t)=>o,z={toAttribute(o,t){switch(t){case Boolean:o=o?xt:null;break;case Object:case Array:o=o==null?o:JSON.stringify(o)}return o},fromAttribute(o,t){let e=o;switch(t){case Boolean:e=o!==null;break;case Number:e=o===null?null:Number(o);break;case Object:case Array:try{e=JSON.parse(o)}catch{e=null}}return e}},K=(o,t)=>!bt(o,t),nt={attribute:!0,type:String,converter:z,reflect:!1,useDefault:!1,hasChanged:K};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),$.litPropertyMetadata??($.litPropertyMetadata=new WeakMap);let x=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=nt){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&St(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:r}=At(this.prototype,t)??{get(){return this[e]},set(n){this[e]=n}};return{get:i,set(n){const l=i==null?void 0:i.call(this);r==null||r.call(this,n),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??nt}static _$Ei(){if(this.hasOwnProperty(O("elementProperties")))return;const t=kt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(O("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(O("properties"))){const e=this.properties,s=[...wt(e),...Et(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(it(i))}else t!==void 0&&e.push(it(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return yt(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var r;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const n=(((r=s.converter)==null?void 0:r.toAttribute)!==void 0?s.converter:z).toAttribute(e,s.type);this._$Em=t,n==null?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(t,e){var r,n;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const l=s.getPropertyOptions(i),a=typeof l.converter=="function"?{fromAttribute:l.converter}:((r=l.converter)==null?void 0:r.fromAttribute)!==void 0?l.converter:z;this._$Em=i;const d=a.fromAttribute(e,l.type);this[i]=d??((n=this._$Ej)==null?void 0:n.get(i))??d,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const r=this.constructor,n=this[t];if(s??(s=r.getPropertyOptions(t)),!((s.hasChanged??K)(n,e)||s.useDefault&&s.reflect&&n===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(r._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:r},n){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,n??e??this[t]),r!==!0||n!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[r,n]of this._$Ep)this[r]=n;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[r,n]of i){const{wrapped:l}=n,a=this[r];l!==!0||this._$AL.has(r)||a===void 0||this.C(r,void 0,n,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var r;return(r=i.hostUpdate)==null?void 0:r.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}};x.elementStyles=[],x.shadowRootOptions={mode:"open"},x[O("elementProperties")]=new Map,x[O("finalized")]=new Map,q==null||q({ReactiveElement:x}),($.reactiveElementVersions??($.reactiveElementVersions=[])).push("2.1.1");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const T=globalThis,I=T.trustedTypes,ot=I?I.createPolicy("lit-html",{createHTML:o=>o}):void 0,rt="$lit$",m=`lit$${Math.random().toFixed(9).slice(2)}$`,nt="?"+m,xt=`<${nt}>`,y=document,U=()=>y.createComment(""),O=o=>o===null||typeof o!="object"&&typeof o!="function",q=Array.isArray,Ct=o=>q(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",K=`[ 	
-\f\r]`,M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,at=/-->/g,lt=/>/g,b=RegExp(`>|${K}(?:([^\\s"'>=/]+)(${K}*=${K}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`,"g"),ct=/'/g,ht=/"/g,dt=/^(?:script|style|textarea|title)$/i,Pt=o=>(t,...e)=>({_$litType$:o,strings:t,values:e}),z=Pt(1),A=Symbol.for("lit-noChange"),u=Symbol.for("lit-nothing"),pt=new WeakMap,w=y.createTreeWalker(y,129);function ut(o,t){if(!q(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return ot!==void 0?ot.createHTML(t):t}const Tt=(o,t)=>{const e=o.length-1,s=[];let i,n=t===2?"<svg>":t===3?"<math>":"",r=M;for(let l=0;l<e;l++){const a=o[l];let h,p,c=-1,g=0;for(;g<a.length&&(r.lastIndex=g,p=r.exec(a),p!==null);)g=r.lastIndex,r===M?p[1]==="!--"?r=at:p[1]!==void 0?r=lt:p[2]!==void 0?(dt.test(p[2])&&(i=RegExp("</"+p[2],"g")),r=b):p[3]!==void 0&&(r=b):r===b?p[0]===">"?(r=i??M,c=-1):p[1]===void 0?c=-2:(c=r.lastIndex-p[2].length,h=p[1],r=p[3]===void 0?b:p[3]==='"'?ht:ct):r===ht||r===ct?r=b:r===at||r===lt?r=M:(r=b,i=void 0);const _=r===b&&o[l+1].startsWith("/>")?" ":"";n+=r===M?a+xt:c>=0?(s.push(h),a.slice(0,c)+rt+a.slice(c)+m+_):a+m+(c===-2?l:_)}return[ut(o,n+(o[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class H{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,r=0;const l=t.length-1,a=this.parts,[h,p]=Tt(t,e);if(this.el=H.createElement(h,s),w.currentNode=this.el.content,e===2||e===3){const c=this.el.content.firstChild;c.replaceWith(...c.childNodes)}for(;(i=w.nextNode())!==null&&a.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(const c of i.getAttributeNames())if(c.endsWith(rt)){const g=p[r++],_=i.getAttribute(c).split(m),j=/([.?@])?(.*)/.exec(g);a.push({type:1,index:n,name:j[2],strings:_,ctor:j[1]==="."?Ot:j[1]==="?"?Mt:j[1]==="@"?Ht:D}),i.removeAttribute(c)}else c.startsWith(m)&&(a.push({type:6,index:n}),i.removeAttribute(c));if(dt.test(i.tagName)){const c=i.textContent.split(m),g=c.length-1;if(g>0){i.textContent=I?I.emptyScript:"";for(let _=0;_<g;_++)i.append(c[_],U()),w.nextNode(),a.push({type:2,index:++n});i.append(c[g],U())}}}else if(i.nodeType===8)if(i.data===nt)a.push({type:2,index:n});else{let c=-1;for(;(c=i.data.indexOf(m,c+1))!==-1;)a.push({type:7,index:n}),c+=m.length-1}n++}}static createElement(t,e){const s=y.createElement("template");return s.innerHTML=t,s}}function k(o,t,e=o,s){var r,l;if(t===A)return t;let i=s!==void 0?(r=e._$Co)==null?void 0:r[s]:e._$Cl;const n=O(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==n&&((l=i==null?void 0:i._$AO)==null||l.call(i,!1),n===void 0?i=void 0:(i=new n(o),i._$AT(o,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=k(o,i._$AS(o,t.values),i,s)),t}class Ut{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??y).importNode(e,!0);w.currentNode=i;let n=w.nextNode(),r=0,l=0,a=s[0];for(;a!==void 0;){if(r===a.index){let h;a.type===2?h=new N(n,n.nextSibling,this,t):a.type===1?h=new a.ctor(n,a.name,a.strings,this,t):a.type===6&&(h=new Nt(n,this,t)),this._$AV.push(h),a=s[++l]}r!==(a==null?void 0:a.index)&&(n=w.nextNode(),r++)}return w.currentNode=y,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class N{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=u,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=k(this,t,e),O(t)?t===u||t==null||t===""?(this._$AH!==u&&this._$AR(),this._$AH=u):t!==this._$AH&&t!==A&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Ct(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==u&&O(this._$AH)?this._$AA.nextSibling.data=t:this.T(y.createTextNode(t)),this._$AH=t}$(t){var n;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=H.createElement(ut(s.h,s.h[0]),this.options)),s);if(((n=this._$AH)==null?void 0:n._$AD)===i)this._$AH.p(e);else{const r=new Ut(i,this),l=r.u(this.options);r.p(e),this.T(l),this._$AH=r}}_$AC(t){let e=pt.get(t.strings);return e===void 0&&pt.set(t.strings,e=new H(t)),e}k(t){q(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const n of t)i===e.length?e.push(s=new N(this.O(U()),this.O(U()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class D{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=u,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=u}_$AI(t,e=this,s,i){const n=this.strings;let r=!1;if(n===void 0)t=k(this,t,e,0),r=!O(t)||t!==this._$AH&&t!==A,r&&(this._$AH=t);else{const l=t;let a,h;for(t=n[0],a=0;a<n.length-1;a++)h=k(this,l[s+a],e,a),h===A&&(h=this._$AH[a]),r||(r=!O(h)||h!==this._$AH[a]),h===u?t=u:t!==u&&(t+=(h??"")+n[a+1]),this._$AH[a]=h}r&&!i&&this.j(t)}j(t){t===u?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Ot extends D{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===u?void 0:t}}class Mt extends D{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==u)}}class Ht extends D{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=k(this,t,e,0)??u)===A)return;const s=this._$AH,i=t===u&&s!==u||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==u&&(s===u||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Nt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){k(this,t)}}const Z=T.litHtmlPolyfillSupport;Z==null||Z(H,N),(T.litHtmlVersions??(T.litHtmlVersions=[])).push("3.3.1");const Rt=(o,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const n=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new N(t.insertBefore(U(),n),n,void 0,e??{})}return i._$AI(o),i};/**
+ */const U=globalThis,I=U.trustedTypes,rt=I?I.createPolicy("lit-html",{createHTML:o=>o}):void 0,at="$lit$",v=`lit$${Math.random().toFixed(9).slice(2)}$`,lt="?"+v,Ct=`<${lt}>`,b=document,T=()=>b.createComment(""),L=o=>o===null||typeof o!="object"&&typeof o!="function",Z=Array.isArray,Pt=o=>Z(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",G=`[ 	
+\f\r]`,M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ct=/-->/g,ht=/>/g,S=RegExp(`>|${G}(?:([^\\s"'>=/]+)(${G}*=${G}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),dt=/'/g,ut=/"/g,pt=/^(?:script|style|textarea|title)$/i,Ot=o=>(t,...e)=>({_$litType$:o,strings:t,values:e}),N=Ot(1),A=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),gt=new WeakMap,w=b.createTreeWalker(b,129);function ft(o,t){if(!Z(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return rt!==void 0?rt.createHTML(t):t}const Ut=(o,t)=>{const e=o.length-1,s=[];let i,r=t===2?"<svg>":t===3?"<math>":"",n=M;for(let l=0;l<e;l++){const a=o[l];let d,u,h=-1,g=0;for(;g<a.length&&(n.lastIndex=g,u=n.exec(a),u!==null);)g=n.lastIndex,n===M?u[1]==="!--"?n=ct:u[1]!==void 0?n=ht:u[2]!==void 0?(pt.test(u[2])&&(i=RegExp("</"+u[2],"g")),n=S):u[3]!==void 0&&(n=S):n===S?u[0]===">"?(n=i??M,h=-1):u[1]===void 0?h=-2:(h=n.lastIndex-u[2].length,d=u[1],n=u[3]===void 0?S:u[3]==='"'?ut:dt):n===ut||n===dt?n=S:n===ct||n===ht?n=M:(n=S,i=void 0);const y=n===S&&o[l+1].startsWith("/>")?" ":"";r+=n===M?a+Ct:h>=0?(s.push(d),a.slice(0,h)+at+a.slice(h)+v+y):a+v+(h===-2?l:y)}return[ft(o,r+(o[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class H{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let r=0,n=0;const l=t.length-1,a=this.parts,[d,u]=Ut(t,e);if(this.el=H.createElement(d,s),w.currentNode=this.el.content,e===2||e===3){const h=this.el.content.firstChild;h.replaceWith(...h.childNodes)}for(;(i=w.nextNode())!==null&&a.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(const h of i.getAttributeNames())if(h.endsWith(at)){const g=u[n++],y=i.getAttribute(h).split(v),B=/([.?@])?(.*)/.exec(g);a.push({type:1,index:r,name:B[2],strings:y,ctor:B[1]==="."?Lt:B[1]==="?"?Mt:B[1]==="@"?Nt:D}),i.removeAttribute(h)}else h.startsWith(v)&&(a.push({type:6,index:r}),i.removeAttribute(h));if(pt.test(i.tagName)){const h=i.textContent.split(v),g=h.length-1;if(g>0){i.textContent=I?I.emptyScript:"";for(let y=0;y<g;y++)i.append(h[y],T()),w.nextNode(),a.push({type:2,index:++r});i.append(h[g],T())}}}else if(i.nodeType===8)if(i.data===lt)a.push({type:2,index:r});else{let h=-1;for(;(h=i.data.indexOf(v,h+1))!==-1;)a.push({type:7,index:r}),h+=v.length-1}r++}}static createElement(t,e){const s=b.createElement("template");return s.innerHTML=t,s}}function C(o,t,e=o,s){var n,l;if(t===A)return t;let i=s!==void 0?(n=e._$Co)==null?void 0:n[s]:e._$Cl;const r=L(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==r&&((l=i==null?void 0:i._$AO)==null||l.call(i,!1),r===void 0?i=void 0:(i=new r(o),i._$AT(o,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=C(o,i._$AS(o,t.values),i,s)),t}class Tt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??b).importNode(e,!0);w.currentNode=i;let r=w.nextNode(),n=0,l=0,a=s[0];for(;a!==void 0;){if(n===a.index){let d;a.type===2?d=new R(r,r.nextSibling,this,t):a.type===1?d=new a.ctor(r,a.name,a.strings,this,t):a.type===6&&(d=new Ht(r,this,t)),this._$AV.push(d),a=s[++l]}n!==(a==null?void 0:a.index)&&(r=w.nextNode(),n++)}return w.currentNode=b,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class R{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=C(this,t,e),L(t)?t===p||t==null||t===""?(this._$AH!==p&&this._$AR(),this._$AH=p):t!==this._$AH&&t!==A&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Pt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==p&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(b.createTextNode(t)),this._$AH=t}$(t){var r;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=H.createElement(ft(s.h,s.h[0]),this.options)),s);if(((r=this._$AH)==null?void 0:r._$AD)===i)this._$AH.p(e);else{const n=new Tt(i,this),l=n.u(this.options);n.p(e),this.T(l),this._$AH=n}}_$AC(t){let e=gt.get(t.strings);return e===void 0&&gt.set(t.strings,e=new H(t)),e}k(t){Z(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new R(this.O(T()),this.O(T()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class D{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,r){this.type=1,this._$AH=p,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}_$AI(t,e=this,s,i){const r=this.strings;let n=!1;if(r===void 0)t=C(this,t,e,0),n=!L(t)||t!==this._$AH&&t!==A,n&&(this._$AH=t);else{const l=t;let a,d;for(t=r[0],a=0;a<r.length-1;a++)d=C(this,l[s+a],e,a),d===A&&(d=this._$AH[a]),n||(n=!L(d)||d!==this._$AH[a]),d===p?t=p:t!==p&&(t+=(d??"")+r[a+1]),this._$AH[a]=d}n&&!i&&this.j(t)}j(t){t===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Lt extends D{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===p?void 0:t}}class Mt extends D{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==p)}}class Nt extends D{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){if((t=C(this,t,e,0)??p)===A)return;const s=this._$AH,i=t===p&&s!==p||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==p&&(s===p||i);i&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Ht{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){C(this,t)}}const Q=U.litHtmlPolyfillSupport;Q==null||Q(H,R),(U.litHtmlVersions??(U.litHtmlVersions=[])).push("3.3.1");const Rt=(o,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const r=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new R(t.insertBefore(T(),r),r,void 0,e??{})}return i._$AI(o),i};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const S=globalThis;let x=class extends E{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Rt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return A}};x._$litElement$=!0,x.finalized=!0,(mt=S.litElementHydrateSupport)==null||mt.call(S,{LitElement:x});const G=S.litElementPolyfillSupport;G==null||G({LitElement:x}),(S.litElementVersions??(S.litElementVersions=[])).push("4.2.1");/**
+ */const E=globalThis;let k=class extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Rt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return A}};k._$litElement$=!0,k.finalized=!0,(mt=E.litElementHydrateSupport)==null||mt.call(E,{LitElement:k});const X=E.litElementPolyfillSupport;X==null||X({LitElement:k}),(E.litElementVersions??(E.litElementVersions=[])).push("4.2.1");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const gt=o=>(t,e)=>{e!==void 0?e.addInitializer((()=>{customElements.define(o,t)})):customElements.define(o,t)};/**
+ */const Y=o=>(t,e)=>{e!==void 0?e.addInitializer((()=>{customElements.define(o,t)})):customElements.define(o,t)};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const Lt={attribute:!0,type:String,converter:L,reflect:!1,hasChanged:J},It=(o=Lt,t,e)=>{const{kind:s,metadata:i}=e;let n=globalThis.litPropertyMetadata.get(i);if(n===void 0&&globalThis.litPropertyMetadata.set(i,n=new Map),s==="setter"&&((o=Object.create(o)).wrapped=!0),n.set(e.name,o),s==="accessor"){const{name:r}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(r,a,o)},init(l){return l!==void 0&&this.C(r,void 0,o,l),l}}}if(s==="setter"){const{name:r}=e;return function(l){const a=this[r];t.call(this,l),this.requestUpdate(r,a,o)}}throw Error("Unsupported decorator location: "+s)};function R(o){return(t,e)=>typeof e=="object"?It(o,t,e):((s,i,n)=>{const r=i.hasOwnProperty(n);return i.constructor.createProperty(n,s),r?Object.getOwnPropertyDescriptor(i,n):void 0})(o,t,e)}/**
+ */const zt={attribute:!0,type:String,converter:z,reflect:!1,hasChanged:K},It=(o=zt,t,e)=>{const{kind:s,metadata:i}=e;let r=globalThis.litPropertyMetadata.get(i);if(r===void 0&&globalThis.litPropertyMetadata.set(i,r=new Map),s==="setter"&&((o=Object.create(o)).wrapped=!0),r.set(e.name,o),s==="accessor"){const{name:n}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(n,a,o)},init(l){return l!==void 0&&this.C(n,void 0,o,l),l}}}if(s==="setter"){const{name:n}=e;return function(l){const a=this[n];t.call(this,l),this.requestUpdate(n,a,o)}}throw Error("Unsupported decorator location: "+s)};function P(o){return(t,e)=>typeof e=="object"?It(o,t,e):((s,i,r)=>{const n=i.hasOwnProperty(r);return i.constructor.createProperty(r,s),n?Object.getOwnPropertyDescriptor(i,r):void 0})(o,t,e)}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function C(o){return R({...o,state:!0,attribute:!1})}/**
+ */function m(o){return P({...o,state:!0,attribute:!1})}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const zt={CHILD:2},Dt=o=>(...t)=>({_$litDirective$:o,values:t});class Vt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
+ */const Dt={CHILD:2},Vt=o=>(...t)=>({_$litDirective$:o,values:t});class jt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class Q extends Vt{constructor(t){if(super(t),this.it=u,t.type!==zt.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===u||t==null)return this._t=void 0,this.it=t;if(t===A)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Q.directiveName="unsafeHTML",Q.resultType=1;const jt=Dt(Q);function Bt(){if(typeof crypto<"u"&&crypto.randomUUID)return crypto.randomUUID();const o=new Uint8Array(16);if(typeof crypto<"u"&&crypto.getRandomValues)crypto.getRandomValues(o);else for(let e=0;e<16;e++)o[e]=Math.random()*256|0;o[6]=o[6]&15|64,o[8]=o[8]&63|128;const t=Array.from(o,e=>e.toString(16).padStart(2,"0")).join("");return`${t.slice(0,8)}-${t.slice(8,12)}-${t.slice(12,16)}-${t.slice(16,20)}-${t.slice(20)}`}class ft extends EventTarget{constructor(t){super(),this.ws=null,this.reconnectAttempts=0,this._status="disconnected",this.config={reconnect:!0,reconnectInterval:3e3,maxReconnectAttempts:10,...t}}get status(){return this._status}connect(){var t;if(((t=this.ws)==null?void 0:t.readyState)!==WebSocket.OPEN){typeof location<"u"&&location.protocol==="https:"&&this.config.url.startsWith("ws://")&&console.warn("[socklog] Connecting with ws:// from an HTTPS page will be blocked as mixed content. Use wss:// instead."),this._status="connecting",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}));try{this.ws=new WebSocket(this.config.url),this.setupEventHandlers()}catch{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))}}}disconnect(){var t;this.reconnectAttempts=this.config.maxReconnectAttempts??10,(t=this.ws)==null||t.close()}setupEventHandlers(){this.ws&&(this.ws.onopen=()=>{this._status="connected",this.reconnectAttempts=0,this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onclose=()=>{this._status="disconnected",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status})),this.attemptReconnect()},this.ws.onerror=()=>{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onmessage=t=>{const e=t.data;let s;try{s=JSON.parse(e)}catch{s=e}const i={id:Bt(),timestamp:new Date,data:s,raw:e};this.dispatchEvent(new CustomEvent("log",{detail:i}))})}attemptReconnect(){this.config.reconnect&&(this.reconnectAttempts>=(this.config.maxReconnectAttempts??10)||(this.reconnectAttempts++,setTimeout(()=>this.connect(),this.config.reconnectInterval)))}}class $t extends EventTarget{constructor(t=1e3){super(),this.logs=[],this._filter={},this._paused=!1,this.maxLogs=t}get filter(){return this._filter}set filter(t){this._filter=t,this.dispatchEvent(new CustomEvent("filterchange",{detail:this._filter}))}get paused(){return this._paused}set paused(t){this._paused=t,this.dispatchEvent(new CustomEvent("pausechange",{detail:this._paused}))}add(t){this._paused||(this.logs.unshift(t),this.logs.length>this.maxLogs&&this.logs.pop(),this.dispatchEvent(new CustomEvent("logadded",{detail:t})))}clear(){this.logs=[],this.dispatchEvent(new CustomEvent("logscleared"))}getAll(){return[...this.logs]}getFiltered(){return this.logs.filter(t=>this.matchesFilter(t))}matchesFilter(t){const{search:e}=this._filter;if(e){const s=e.toLowerCase();return t.raw.toLowerCase().includes(s)}return!0}get count(){return this.logs.length}}var Wt=Object.defineProperty,Ft=Object.getOwnPropertyDescriptor,v=(o,t,e,s)=>{for(var i=s>1?void 0:s?Ft(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Wt(t,e,i),i};d.SocklogViewer=class extends x{constructor(){super(...arguments),this.url="",this.maxLogs=1e3,this.indent=4,this.logs=[],this.status="disconnected",this.searchTerm="",this.expandedIds=new Set,this.client=null,this.store=null}connectedCallback(){super.connectedCallback(),this.initializeStore(),this.url&&this.connect()}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this.client)==null||t.disconnect()}initializeStore(){this.store=new $t(this.maxLogs),this.store.addEventListener("logadded",()=>{var t;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[]}),this.store.addEventListener("filterchange",()=>{var t,e;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[],this.searchTerm=((e=this.store)==null?void 0:e.filter.search)??""}),this.store.addEventListener("logscleared",()=>{this.logs=[]})}connect(){this.url&&(this.client=new ft({url:this.url}),this.client.addEventListener("statuschange",(t=>{this.status=t.detail})),this.client.addEventListener("log",(t=>{var e;(e=this.store)==null||e.add(t.detail)})),this.client.connect())}clear(){var t;(t=this.store)==null||t.clear()}getStore(){return this.store}toggleExpanded(t){this.expandedIds.has(t)?this.expandedIds.delete(t):this.expandedIds.add(t),this.expandedIds=new Set(this.expandedIds)}formatTimestamp(t){return t.toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit",fractionalSecondDigits:3})}tokenizeJson(t){const e=[];let s=0;for(;s<t.length;){const i=t[s];if(/\s/.test(i)){let r="";for(;s<t.length&&/\s/.test(t[s]);)r+=t[s],s++;e.push({type:"whitespace",value:r});continue}if(i==="{"||i==="}"||i==="["||i==="]"||i===":"||i===","){e.push({type:"punctuation",value:i}),s++;continue}if(i==='"'){let r='"';for(s++;s<t.length;)if(t[s]==="\\"&&s+1<t.length)r+=t[s]+t[s+1],s+=2;else if(t[s]==='"'){r+='"',s++;break}else r+=t[s],s++;e.push({type:"string",value:r});continue}let n="";for(;s<t.length&&!/[\s{}[\]:,"]/.test(t[s]);)n+=t[s],s++;n&&e.push({type:"value",value:n})}return e}formatJson(t,e=!1){let s;typeof t=="string"?s=t:s=e?JSON.stringify(t,null,this.indent):JSON.stringify(t);const i=this.tokenizeJson(s),n=[];for(let l=0;l<i.length;l++){const a=i[l],h=i[l+1],p=a.value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),c=a.type==="string"&&(h==null?void 0:h.value)===":";a.type==="whitespace"?n.push(p):a.type==="punctuation"?n.push(`<span class="json-punct">${p}</span>`):c?n.push(`<span class="json-key">${p}</span>`):a.type==="string"?n.push(`<span class="json-string">${p}</span>`):n.push(`<span class="json-value">${p}</span>`)}let r=e?n.join(""):n.join("<wbr>");if(this.searchTerm){const l=this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),a=new RegExp(`(${l})`,"gi");r=r.replace(/(<[^>]*>)|([^<]+)/g,(h,p,c)=>p||c.replace(a,'<span class="search-highlight">$1</span>'))}return jt(r)}render(){return this.logs.length===0?z`
+ */class tt extends jt{constructor(t){if(super(t),this.it=p,t.type!==Dt.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===p||t==null)return this._t=void 0,this.it=t;if(t===A)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}tt.directiveName="unsafeHTML",tt.resultType=1;const Bt=Vt(tt);function Wt(){if(typeof crypto<"u"&&crypto.randomUUID)return crypto.randomUUID();const o=new Uint8Array(16);if(typeof crypto<"u"&&crypto.getRandomValues)crypto.getRandomValues(o);else for(let e=0;e<16;e++)o[e]=Math.random()*256|0;o[6]=o[6]&15|64,o[8]=o[8]&63|128;const t=Array.from(o,e=>e.toString(16).padStart(2,"0")).join("");return`${t.slice(0,8)}-${t.slice(8,12)}-${t.slice(12,16)}-${t.slice(16,20)}-${t.slice(20)}`}class $t extends EventTarget{constructor(t){super(),this.ws=null,this.reconnectAttempts=0,this._status="disconnected",this.config={reconnect:!0,reconnectInterval:3e3,maxReconnectAttempts:10,...t}}get status(){return this._status}connect(){var t;if(((t=this.ws)==null?void 0:t.readyState)!==WebSocket.OPEN){typeof location<"u"&&location.protocol==="https:"&&this.config.url.startsWith("ws://")&&console.warn("[socklog] Connecting with ws:// from an HTTPS page will be blocked as mixed content. Use wss:// instead."),this._status="connecting",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}));try{this.ws=new WebSocket(this.config.url),this.setupEventHandlers()}catch{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))}}}disconnect(){var t;this.reconnectAttempts=this.config.maxReconnectAttempts??10,(t=this.ws)==null||t.close()}send(t){var e;((e=this.ws)==null?void 0:e.readyState)===WebSocket.OPEN&&this.ws.send(t)}setupEventHandlers(){this.ws&&(this.ws.onopen=()=>{this._status="connected",this.reconnectAttempts=0,this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onclose=()=>{this._status="disconnected",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status})),this.attemptReconnect()},this.ws.onerror=()=>{this._status="error",this.dispatchEvent(new CustomEvent("statuschange",{detail:this._status}))},this.ws.onmessage=t=>{const e=t.data;let s;try{s=JSON.parse(e)}catch{s=e}const i={id:Wt(),timestamp:new Date,data:s,raw:e};this.dispatchEvent(new CustomEvent("log",{detail:i}))})}attemptReconnect(){this.config.reconnect&&(this.reconnectAttempts>=(this.config.maxReconnectAttempts??10)||(this.reconnectAttempts++,setTimeout(()=>this.connect(),this.config.reconnectInterval)))}}class vt extends EventTarget{constructor(t=1e3){super(),this.logs=[],this._filter={},this._paused=!1,this.maxLogs=t}get filter(){return this._filter}set filter(t){this._filter=t,this.dispatchEvent(new CustomEvent("filterchange",{detail:this._filter}))}get paused(){return this._paused}set paused(t){this._paused=t,this.dispatchEvent(new CustomEvent("pausechange",{detail:this._paused}))}add(t){this._paused||(this.logs.unshift(t),this.logs.length>this.maxLogs&&this.logs.pop(),this.dispatchEvent(new CustomEvent("logadded",{detail:t})))}clear(){this.logs=[],this.dispatchEvent(new CustomEvent("logscleared"))}getAll(){return[...this.logs]}getFiltered(){return this.logs.filter(t=>this.matchesFilter(t))}matchesFilter(t){const{search:e}=this._filter;if(e){const s=e.toLowerCase();return t.raw.toLowerCase().includes(s)}return!0}get count(){return this.logs.length}}var Ft=Object.defineProperty,Jt=Object.getOwnPropertyDescriptor,_=(o,t,e,s)=>{for(var i=s>1?void 0:s?Jt(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&Ft(t,e,i),i};c.SocklogViewer=class extends k{constructor(){super(...arguments),this.url="",this.maxLogs=1e3,this.indent=4,this.logs=[],this.status="disconnected",this.searchTerm="",this.expandedIds=new Set,this.client=null,this.store=null}connectedCallback(){super.connectedCallback(),this.initializeStore(),this.url&&this.connect()}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this.client)==null||t.disconnect()}initializeStore(){this.store=new vt(this.maxLogs),this.store.addEventListener("logadded",()=>{var t;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[]}),this.store.addEventListener("filterchange",()=>{var t,e;this.logs=((t=this.store)==null?void 0:t.getFiltered())??[],this.searchTerm=((e=this.store)==null?void 0:e.filter.search)??""}),this.store.addEventListener("logscleared",()=>{this.logs=[]})}connect(){this.url&&(this.client=new $t({url:this.url}),this.client.addEventListener("statuschange",(t=>{this.status=t.detail})),this.client.addEventListener("log",(t=>{var e;(e=this.store)==null||e.add(t.detail)})),this.client.connect())}clear(){var t;(t=this.store)==null||t.clear()}getStore(){return this.store}getClient(){return this.client}toggleExpanded(t){this.expandedIds.has(t)?this.expandedIds.delete(t):this.expandedIds.add(t),this.expandedIds=new Set(this.expandedIds)}formatTimestamp(t){return t.toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit",fractionalSecondDigits:3})}tokenizeJson(t){const e=[];let s=0;for(;s<t.length;){const i=t[s];if(/\s/.test(i)){let n="";for(;s<t.length&&/\s/.test(t[s]);)n+=t[s],s++;e.push({type:"whitespace",value:n});continue}if(i==="{"||i==="}"||i==="["||i==="]"||i===":"||i===","){e.push({type:"punctuation",value:i}),s++;continue}if(i==='"'){let n='"';for(s++;s<t.length;)if(t[s]==="\\"&&s+1<t.length)n+=t[s]+t[s+1],s+=2;else if(t[s]==='"'){n+='"',s++;break}else n+=t[s],s++;e.push({type:"string",value:n});continue}let r="";for(;s<t.length&&!/[\s{}[\]:,"]/.test(t[s]);)r+=t[s],s++;r&&e.push({type:"value",value:r})}return e}formatJson(t,e=!1){let s;typeof t=="string"?s=t:s=e?JSON.stringify(t,null,this.indent):JSON.stringify(t);const i=this.tokenizeJson(s),r=[];for(let l=0;l<i.length;l++){const a=i[l],d=i[l+1],u=a.value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),h=a.type==="string"&&(d==null?void 0:d.value)===":";a.type==="whitespace"?r.push(u):a.type==="punctuation"?r.push(`<span class="json-punct">${u}</span>`):h?r.push(`<span class="json-key">${u}</span>`):a.type==="string"?r.push(`<span class="json-string">${u}</span>`):r.push(`<span class="json-value">${u}</span>`)}let n=e?r.join(""):r.join("<wbr>");if(this.searchTerm){const l=this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),a=new RegExp(`(${l})`,"gi");n=n.replace(/(<[^>]*>)|([^<]+)/g,(d,u,h)=>u||h.replace(a,'<span class="search-highlight">$1</span>'))}return Bt(n)}render(){return this.logs.length===0?N`
         <div class="log-container">
@@ -45,5 +45,5 @@ <div class="empty-state">
         </div>
-      `:z`
+      `:N`
       <div class="log-container">
-        ${this.logs.map(t=>z`
+        ${this.logs.map(t=>N`
             <div class="log-entry">
@@ -58,3 +58,3 @@ <div class="log-header" @click=${()=>this.toggleExpanded(t.id)}>
       </div>
-    `}},d.SocklogViewer.styles=tt`
+    `}},c.SocklogViewer.styles=J`
     :host {
@@ -133,3 +133,3 @@ display: block;
     }
-  `,v([R({type:String})],d.SocklogViewer.prototype,"url",2),v([R({type:Number})],d.SocklogViewer.prototype,"maxLogs",2),v([R({type:Number})],d.SocklogViewer.prototype,"indent",2),v([C()],d.SocklogViewer.prototype,"logs",2),v([C()],d.SocklogViewer.prototype,"status",2),v([C()],d.SocklogViewer.prototype,"searchTerm",2),v([C()],d.SocklogViewer.prototype,"expandedIds",2),d.SocklogViewer=v([gt("socklog-viewer")],d.SocklogViewer);var Jt=Object.defineProperty,qt=Object.getOwnPropertyDescriptor,V=(o,t,e,s)=>{for(var i=s>1?void 0:s?qt(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Jt(t,e,i),i};d.SocklogControls=class extends x{constructor(){super(...arguments),this.store=null,this.searchValue="",this.paused=!1}connectedCallback(){super.connectedCallback(),this.setupStoreListeners()}updated(t){t.has("store")&&this.setupStoreListeners()}setupStoreListeners(){this.store&&this.store.addEventListener("pausechange",(t=>{this.paused=t.detail}))}handleSearch(t){const e=t.target;this.searchValue=e.value,this.updateFilter()}updateFilter(){if(!this.store)return;const t={};this.searchValue&&(t.search=this.searchValue),this.store.filter=t}togglePause(){this.store&&(this.store.paused=!this.store.paused)}clear(){var t;(t=this.store)==null||t.clear()}render(){return z`
+  `,_([P({type:String})],c.SocklogViewer.prototype,"url",2),_([P({type:Number})],c.SocklogViewer.prototype,"maxLogs",2),_([P({type:Number})],c.SocklogViewer.prototype,"indent",2),_([m()],c.SocklogViewer.prototype,"logs",2),_([m()],c.SocklogViewer.prototype,"status",2),_([m()],c.SocklogViewer.prototype,"searchTerm",2),_([m()],c.SocklogViewer.prototype,"expandedIds",2),c.SocklogViewer=_([Y("socklog-viewer")],c.SocklogViewer);var qt=Object.defineProperty,Kt=Object.getOwnPropertyDescriptor,V=(o,t,e,s)=>{for(var i=s>1?void 0:s?Kt(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&qt(t,e,i),i};c.SocklogControls=class extends k{constructor(){super(...arguments),this.store=null,this.searchValue="",this.paused=!1}connectedCallback(){super.connectedCallback(),this.setupStoreListeners()}updated(t){t.has("store")&&this.setupStoreListeners()}setupStoreListeners(){this.store&&this.store.addEventListener("pausechange",(t=>{this.paused=t.detail}))}handleSearch(t){const e=t.target;this.searchValue=e.value,this.updateFilter()}updateFilter(){if(!this.store)return;const t={};this.searchValue&&(t.search=this.searchValue),this.store.filter=t}togglePause(){this.store&&(this.store.paused=!this.store.paused)}clear(){var t;(t=this.store)==null||t.clear()}render(){return N`
       <div class="controls-inner">
@@ -155,3 +155,3 @@ <div class="search-container">
       </div>
-    `}},d.SocklogControls.styles=tt`
+    `}},c.SocklogControls.styles=J`
     :host {
@@ -236,3 +236,99 @@ display: block;
     }
-  `,V([R({attribute:!1})],d.SocklogControls.prototype,"store",2),V([C()],d.SocklogControls.prototype,"searchValue",2),V([C()],d.SocklogControls.prototype,"paused",2),d.SocklogControls=V([gt("socklog-controls")],d.SocklogControls),d.LogStore=$t,d.WebSocketClient=ft,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+  `,V([P({attribute:!1})],c.SocklogControls.prototype,"store",2),V([m()],c.SocklogControls.prototype,"searchValue",2),V([m()],c.SocklogControls.prototype,"paused",2),c.SocklogControls=V([Y("socklog-controls")],c.SocklogControls);var Zt=Object.defineProperty,Gt=Object.getOwnPropertyDescriptor,j=(o,t,e,s)=>{for(var i=s>1?void 0:s?Gt(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&Zt(t,e,i),i};c.SocklogSender=class extends k{constructor(){super(...arguments),this.client=null,this.value="",this.status="disconnected",this.statusListener=null,this.listeningClient=null}connectedCallback(){super.connectedCallback(),this.setupClientListeners()}disconnectedCallback(){super.disconnectedCallback(),this.teardownClientListeners()}updated(t){t.has("client")&&(this.teardownClientListeners(),this.setupClientListeners())}setupClientListeners(){this.client&&(this.status=this.client.status,this.statusListener=(t=>{this.status=t.detail}),this.client.addEventListener("statuschange",this.statusListener),this.listeningClient=this.client)}teardownClientListeners(){this.listeningClient&&this.statusListener&&this.listeningClient.removeEventListener("statuschange",this.statusListener),this.listeningClient=null,this.statusListener=null}handleInput(t){const e=t.target;this.value=e.value}handleKeyDown(t){(t.metaKey||t.ctrlKey)&&t.key==="Enter"&&(t.preventDefault(),this.send())}send(){this.canSend()&&(this.client.send(this.value),this.value="")}canSend(){return!!this.client&&this.status==="connected"&&this.value.length>0}render(){const t=!this.canSend();return N`
+      <div class="sender-inner">
+        <div class="input-container">
+          <textarea
+            placeholder="Type a message and press Send (or Cmd/Ctrl+Enter)..."
+            .value=${this.value}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+          ></textarea>
+        </div>
+
+        <div class="actions">
+          <button class="send-btn" ?disabled=${t} @click=${this.send}>Send</button>
+        </div>
+      </div>
+    `}},c.SocklogSender.styles=J`
+    :host {
+      display: block;
+      width: 100%;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .sender-inner {
+      display: flex;
+      align-items: stretch;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--socklog-controls-bg, inherit);
+      border-bottom: 1px solid var(--socklog-border-color, #e0e0e0);
+      font-family: var(
+        --socklog-ui-font-family,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        sans-serif
+      );
+      font-size: 13px;
+      color: var(--socklog-color, inherit);
+      box-sizing: border-box;
+    }
+
+    .input-container {
+      flex: 1;
+      min-width: 0;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 60px;
+      padding: 6px 10px;
+      border: 1px solid var(--socklog-input-border, #ccc);
+      border-radius: 4px;
+      background: var(--socklog-input-bg, #fff);
+      color: var(--socklog-input-color, inherit);
+      font-family: var(--socklog-font-family, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);
+      font-size: 13px;
+      box-sizing: border-box;
+      resize: vertical;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--socklog-focus-color, #007bff);
+    }
+
+    textarea::placeholder {
+      color: var(--socklog-muted-color, #999);
+    }
+
+    .actions {
+      display: flex;
+      align-items: flex-end;
+      flex-shrink: 0;
+    }
+
+    .send-btn {
+      padding: 6px 16px;
+      border: 1px solid var(--socklog-focus-color, #007bff);
+      border-radius: 4px;
+      background: var(--socklog-focus-color, #007bff);
+      color: #fff;
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 0.15s ease;
+    }
+
+    .send-btn:hover:not(:disabled) {
+      filter: brightness(1.1);
+    }
+
+    .send-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `,j([P({attribute:!1})],c.SocklogSender.prototype,"client",2),j([m()],c.SocklogSender.prototype,"value",2),j([m()],c.SocklogSender.prototype,"status",2),c.SocklogSender=j([Y("socklog-sender")],c.SocklogSender),c.LogStore=vt,c.WebSocketClient=$t,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=socklog.umd.js.map

package.json

 {
   "name": "@andrewshell/socklog",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "WebSocket-based logging web components using Lit",
@@ -21,11 +21,2 @@ "type": "module",
   "unpkg": "./dist/socklog.umd.js",
-  "scripts": {
-    "dev": "vite",
-    "dev:server": "node demo/server.js",
-    "build": "vite build && tsc",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\""
-  },
   "keywords": [
@@ -56,3 +47,6 @@ "websocket",
     "@types/node": "^24.10.1",
+    "@vitest/coverage-v8": "^4.1.5",
     "eslint": "^9.39.1",
+    "happy-dom": "^20.9.0",
+    "mock-socket": "^9.3.1",
     "prettier": "^3.4.2",
@@ -62,4 +56,17 @@ "typescript": "^5.7.2",
     "vite": "^6.0.3",
+    "vitest": "^4.1.5",
     "ws": "^8.18.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "dev:server": "node demo/server.js",
+    "build": "vite build && tsc",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
-}
+}

README.md

@@ -68,2 +68,27 @@ # Socklog
 
+### With Sender (Two-Way Messaging)
+
+The `<socklog-sender>` component shares the viewer's WebSocket connection so messages
+can be sent without opening a second socket.
+
+```html
+<script type="module">
+  import 'https://esm.sh/@andrewshell/socklog'
+
+  const viewer = document.getElementById('viewer')
+  const controls = document.getElementById('controls')
+  const sender = document.getElementById('sender')
+
+  controls.store = viewer.getStore()
+  // Reuse the viewer's WebSocket connection
+  sender.client = viewer.getClient()
+</script>
+
+<div style="display: flex; flex-direction: column; height: 400px;">
+  <socklog-sender id="sender"></socklog-sender>
+  <socklog-controls id="controls"></socklog-controls>
+  <socklog-viewer id="viewer" url="ws://localhost:8080/logs"></socklog-viewer>
+</div>
+```
+
 ## Components
@@ -84,7 +109,8 @@
 
-| Method       | Returns    | Description                  |
-| ------------ | ---------- | ---------------------------- |
-| `connect()`  | `void`     | Connect to the WebSocket     |
-| `clear()`    | `void`     | Clear all logs               |
-| `getStore()` | `LogStore` | Get the underlying log store |
+| Method        | Returns           | Description                         |
+| ------------- | ----------------- | ----------------------------------- |
+| `connect()`   | `void`            | Connect to the WebSocket            |
+| `clear()`     | `void`            | Clear all logs                      |
+| `getStore()`  | `LogStore`        | Get the underlying log store        |
+| `getClient()` | `WebSocketClient` | Get the underlying WebSocket client |
 
@@ -101,2 +127,14 @@ ### `<socklog-controls>`
 
+### `<socklog-sender>`
+
+Textarea + Send button that publishes messages over the viewer's existing WebSocket
+connection. Send via the button or `Cmd`/`Ctrl`+`Enter`. The button is disabled when
+the connection is not open or the textarea is empty.
+
+**Properties:**
+
+| Property | Type              | Description                                     |
+| -------- | ----------------- | ----------------------------------------------- |
+| `client` | `WebSocketClient` | WebSocket client instance to send messages over |
+
 ## Styling
@@ -160,2 +198,5 @@
 client.connect()
+
+// Send a message over the same connection
+client.send('hello server')
 ```
@@ -162,0 +203,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Improved metrics

Total package byte prevSize

363408

11.26%

Number of package files

17

6.25%

Lines of code

2202

19.87%

Number of lines in readme file

227

22.04%

Worsened metrics

Dev dependency count

12

50%

Number of low supply chain risk alerts

9

50%

No dependency changes