mcpsystem.design MCP Server

var zt=Object.defineProperty;var Ht=Object.getOwnPropertyDescriptor;var c=(o,t,e,r)=>{for(var s=r>1?void 0:r?Ht(t,e):t,i=o.length-1,a;i>=0;i--)(a=o[i])&&(s=(r?a(t,e,s):a(s))||s);return r&&s&&zt(t,e,s),s};var Y=globalThis,J=Y.ShadowRoot&&(Y.ShadyCSS===void 0||Y.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Q=Symbol(),bt=new WeakMap,j=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==Q)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(J&&t===void 0){let r=e!==void 0&&e.length===1;r&&(t=bt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&bt.set(e,t))}return t}toString(){return this.cssText}},_t=o=>new j(typeof o=="string"?o:o+"",void 0,Q),g=(o,...t)=>{let e=o.length===1?o[0]:t.reduce(((r,s,i)=>r+(a=>{if(a._$cssResult$===!0)return a.cssText;if(typeof a=="number")return a;throw Error("Value passed to 'css' function must be a 'css' function result: "+a+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+o[i+1]),o[0]);return new j(e,o,Q)},yt=(o,t)=>{if(J)o.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(let e of t){let r=document.createElement("style"),s=Y.litNonce;s!==void 0&&r.setAttribute("nonce",s),r.textContent=e.cssText,o.appendChild(r)}},tt=J?o=>o:o=>o instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return _t(e)})(o):o;var{is:Ut,defineProperty:Dt,getOwnPropertyDescriptor:jt,getOwnPropertyNames:Bt,getOwnPropertySymbols:Mt,getPrototypeOf:qt}=Object,Z=globalThis,xt=Z.trustedTypes,It=xt?xt.emptyScript:"",Ft=Z.reactiveElementPolyfillSupport,B=(o,t)=>o,M={toAttribute(o,t){switch(t){case Boolean:o=o?It: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}},G=(o,t)=>!Ut(o,t),$t={attribute:!0,type:String,converter:M,reflect:!1,useDefault:!1,hasChanged:G};Symbol.metadata??=Symbol("metadata"),Z.litPropertyMetadata??=new WeakMap;var S=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=$t){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){let r=Symbol(),s=this.getPropertyDescriptor(t,r,e);s!==void 0&&Dt(this.prototype,t,s)}}static getPropertyDescriptor(t,e,r){let{get:s,set:i}=jt(this.prototype,t)??{get(){return this[e]},set(a){this[e]=a}};return{get:s,set(a){let d=s?.call(this);i?.call(this,a),this.requestUpdate(t,d,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??$t}static _$Ei(){if(this.hasOwnProperty(B("elementProperties")))return;let t=qt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(B("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(B("properties"))){let e=this.properties,r=[...Bt(e),...Mt(e)];for(let s of r)this.createProperty(s,e[s])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[r,s]of e)this.elementProperties.set(r,s)}this._$Eh=new Map;for(let[e,r]of this.elementProperties){let s=this._$Eu(e,r);s!==void 0&&this._$Eh.set(s,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let s of r)e.unshift(tt(s))}else t!==void 0&&e.push(tt(t));return e}static _$Eu(t,e){let r=e.attribute;return r===!1?void 0:typeof r=="string"?r: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(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return yt(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$ET(t,e){let r=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,r);if(s!==void 0&&r.reflect===!0){let i=(r.converter?.toAttribute!==void 0?r.converter:M).toAttribute(e,r.type);this._$Em=t,i==null?this.removeAttribute(s):this.setAttribute(s,i),this._$Em=null}}_$AK(t,e){let r=this.constructor,s=r._$Eh.get(t);if(s!==void 0&&this._$Em!==s){let i=r.getPropertyOptions(s),a=typeof i.converter=="function"?{fromAttribute:i.converter}:i.converter?.fromAttribute!==void 0?i.converter:M;this._$Em=s;let d=a.fromAttribute(e,i.type);this[s]=d??this._$Ej?.get(s)??d,this._$Em=null}}requestUpdate(t,e,r){if(t!==void 0){let s=this.constructor,i=this[t];if(r??=s.getPropertyOptions(t),!((r.hasChanged??G)(i,e)||r.useDefault&&r.reflect&&i===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,r))))return;this.C(t,e,r)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:r,reflect:s,wrapped:i},a){r&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,a??e??this[t]),i!==!0||a!==void 0)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),s===!0&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[s,i]of this._$Ep)this[s]=i;this._$Ep=void 0}let r=this.constructor.elementProperties;if(r.size>0)for(let[s,i]of r){let{wrapped:a}=i,d=this[s];a!==!0||this._$AL.has(s)||d===void 0||this.C(s,void 0,i,d)}}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((r=>r.hostUpdate?.())),this.update(e)):this._$EM()}catch(r){throw t=!1,this._$EM(),r}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((e=>e.hostUpdated?.())),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.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(t){}firstUpdated(t){}};S.elementStyles=[],S.shadowRootOptions={mode:"open"},S[B("elementProperties")]=new Map,S[B("finalized")]=new Map,Ft?.({ReactiveElement:S}),(Z.reactiveElementVersions??=[]).push("2.1.1");var nt=globalThis,X=nt.trustedTypes,wt=X?X.createPolicy("lit-html",{createHTML:o=>o}):void 0,Tt="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,Pt="?"+C,Vt=`<${Pt}>`,L=document,I=()=>L.createComment(""),F=o=>o===null||typeof o!="object"&&typeof o!="function",ct=Array.isArray,Wt=o=>ct(o)||typeof o?.[Symbol.iterator]=="function",et=`[ \f\r]`,q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,At=/-->/g,St=/>/g,N=RegExp(`>|${et}(?:([^\\s"'>=/]+)(${et}*=${et}*(?:[^ \f\r"'\`<>=]|("|')|))|$)`,"g"),Et=/'/g,kt=/"/g,Nt=/^(?:script|style|textarea|title)$/i,lt=o=>(t,...e)=>({_$litType$:o,strings:t,values:e}),m=lt(1),ne=lt(2),ce=lt(3),O=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),Ct=new WeakMap,R=L.createTreeWalker(L,129);function Rt(o,t){if(!ct(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return wt!==void 0?wt.createHTML(t):t}var Kt=(o,t)=>{let e=o.length-1,r=[],s,i=t===2?"<svg>":t===3?"<math>":"",a=q;for(let d=0;d<e;d++){let n=o[d],f,v,h=-1,A=0;for(;A<n.length&&(a.lastIndex=A,v=a.exec(n),v!==null);)A=a.lastIndex,a===q?v[1]==="!--"?a=At:v[1]!==void 0?a=St:v[2]!==void 0?(Nt.test(v[2])&&(s=RegExp("</"+v[2],"g")),a=N):v[3]!==void 0&&(a=N):a===N?v[0]===">"?(a=s??q,h=-1):v[1]===void 0?h=-2:(h=a.lastIndex-v[2].length,f=v[1],a=v[3]===void 0?N:v[3]==='"'?kt:Et):a===kt||a===Et?a=N:a===At||a===St?a=q:(a=N,s=void 0);let k=a===N&&o[d+1].startsWith("/>")?" ":"";i+=a===q?n+Vt:h>=0?(r.push(f),n.slice(0,h)+Tt+n.slice(h)+C+k):n+C+(h===-2?d:k)}return[Rt(o,i+(o[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},V=class o{constructor({strings:t,_$litType$:e},r){let s;this.parts=[];let i=0,a=0,d=t.length-1,n=this.parts,[f,v]=Kt(t,e);if(this.el=o.createElement(f,r),R.currentNode=this.el.content,e===2||e===3){let h=this.el.content.firstChild;h.replaceWith(...h.childNodes)}for(;(s=R.nextNode())!==null&&n.length<d;){if(s.nodeType===1){if(s.hasAttributes())for(let h of s.getAttributeNames())if(h.endsWith(Tt)){let A=v[a++],k=s.getAttribute(h).split(C),K=/([.?@])?(.*)/.exec(A);n.push({type:1,index:i,name:K[2],strings:k,ctor:K[1]==="."?st:K[1]==="?"?ot:K[1]==="@"?it:D}),s.removeAttribute(h)}else h.startsWith(C)&&(n.push({type:6,index:i}),s.removeAttribute(h));if(Nt.test(s.tagName)){let h=s.textContent.split(C),A=h.length-1;if(A>0){s.textContent=X?X.emptyScript:"";for(let k=0;k<A;k++)s.append(h[k],I()),R.nextNode(),n.push({type:2,index:++i});s.append(h[A],I())}}}else if(s.nodeType===8)if(s.data===Pt)n.push({type:2,index:i});else{let h=-1;for(;(h=s.data.indexOf(C,h+1))!==-1;)n.push({type:7,index:i}),h+=C.length-1}i++}}static createElement(t,e){let r=L.createElement("template");return r.innerHTML=t,r}};function U(o,t,e=o,r){if(t===O)return t;let s=r!==void 0?e._$Co?.[r]:e._$Cl,i=F(t)?void 0:t._$litDirective$;return s?.constructor!==i&&(s?._$AO?.(!1),i===void 0?s=void 0:(s=new i(o),s._$AT(o,e,r)),r!==void 0?(e._$Co??=[])[r]=s:e._$Cl=s),s!==void 0&&(t=U(o,s._$AS(o,t.values),s,r)),t}var rt=class{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){let{el:{content:e},parts:r}=this._$AD,s=(t?.creationScope??L).importNode(e,!0);R.currentNode=s;let i=R.nextNode(),a=0,d=0,n=r[0];for(;n!==void 0;){if(a===n.index){let f;n.type===2?f=new W(i,i.nextSibling,this,t):n.type===1?f=new n.ctor(i,n.name,n.strings,this,t):n.type===6&&(f=new at(i,this,t)),this._$AV.push(f),n=r[++d]}a!==n?.index&&(i=R.nextNode(),a++)}return R.currentNode=L,s}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++}},W=class o{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,s){this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=U(this,t,e),F(t)?t===p||t==null||t===""?(this._$AH!==p&&this._$AR(),this._$AH=p):t!==this._$AH&&t!==O&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Wt(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&&F(this._$AH)?this._$AA.nextSibling.data=t:this.T(L.createTextNode(t)),this._$AH=t}$(t){let{values:e,_$litType$:r}=t,s=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=V.createElement(Rt(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===s)this._$AH.p(e);else{let i=new rt(s,this),a=i.u(this.options);i.p(e),this.T(a),this._$AH=i}}_$AC(t){let e=Ct.get(t.strings);return e===void 0&&Ct.set(t.strings,e=new V(t)),e}k(t){ct(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,s=0;for(let i of t)s===e.length?e.push(r=new o(this.O(I()),this.O(I()),this,this.options)):r=e[s],r._$AI(i),s++;s<e.length&&(this._$AR(r&&r._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){let r=t.nextSibling;t.remove(),t=r}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}},D=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,s,i){this.type=1,this._$AH=p,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=i,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=p}_$AI(t,e=this,r,s){let i=this.strings,a=!1;if(i===void 0)t=U(this,t,e,0),a=!F(t)||t!==this._$AH&&t!==O,a&&(this._$AH=t);else{let d=t,n,f;for(t=i[0],n=0;n<i.length-1;n++)f=U(this,d[r+n],e,n),f===O&&(f=this._$AH[n]),a||=!F(f)||f!==this._$AH[n],f===p?t=p:t!==p&&(t+=(f??"")+i[n+1]),this._$AH[n]=f}a&&!s&&this.j(t)}j(t){t===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}},st=class extends D{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===p?void 0:t}},ot=class extends D{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==p)}},it=class extends D{constructor(t,e,r,s,i){super(t,e,r,s,i),this.type=5}_$AI(t,e=this){if((t=U(this,t,e,0)??p)===O)return;let r=this._$AH,s=t===p&&r!==p||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,i=t!==p&&(r===p||s);s&&this.element.removeEventListener(this.name,this,r),i&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}},at=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(t){U(this,t)}};var Yt=nt.litHtmlPolyfillSupport;Yt?.(V,W),(nt.litHtmlVersions??=[]).push("3.3.1");var Lt=(o,t,e)=>{let r=e?.renderBefore??t,s=r._$litPart$;if(s===void 0){let i=e?.renderBefore??null;r._$litPart$=s=new W(t.insertBefore(I(),i),i,void 0,e??{})}return s._$AI(o),s};var pt=globalThis,T=class extends S{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Lt(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return O}};T._$litElement$=!0,T.finalized=!0,pt.litElementHydrateSupport?.({LitElement:T});var Jt=pt.litElementPolyfillSupport;Jt?.({LitElement:T});(pt.litElementVersions??=[]).push("4.2.1");var y=o=>(t,e)=>{e!==void 0?e.addInitializer((()=>{customElements.define(o,t)})):customElements.define(o,t)};var Zt={attribute:!0,type:String,converter:M,reflect:!1,hasChanged:G},Gt=(o=Zt,t,e)=>{let{kind:r,metadata:s}=e,i=globalThis.litPropertyMetadata.get(s);if(i===void 0&&globalThis.litPropertyMetadata.set(s,i=new Map),r==="setter"&&((o=Object.create(o)).wrapped=!0),i.set(e.name,o),r==="accessor"){let{name:a}=e;return{set(d){let n=t.get.call(this);t.set.call(this,d),this.requestUpdate(a,n,o)},init(d){return d!==void 0&&this.C(a,void 0,o,d),d}}}if(r==="setter"){let{name:a}=e;return function(d){let n=this[a];t.call(this,d),this.requestUpdate(a,n,o)}}throw Error("Unsupported decorator location: "+r)};function l(o){return(t,e)=>typeof e=="object"?Gt(o,t,e):((r,s,i)=>{let a=s.hasOwnProperty(i);return s.constructor.createProperty(i,r),a?Object.getOwnPropertyDescriptor(s,i):void 0})(o,t,e)}function z(o){return l({...o,state:!0,attribute:!1})}var H=(o,t,e)=>(e.configurable=!0,e.enumerable=!0,Reflect.decorate&&typeof t!="object"&&Object.defineProperty(o,t,e),e);function Ot(o,t){return(e,r,s)=>{let i=a=>a.renderRoot?.querySelector(o)??null;if(t){let{get:a,set:d}=typeof r=="object"?e:s??(()=>{let n=Symbol();return{get(){return this[n]},set(f){this[n]=f}}})();return H(e,r,{get(){let n=a.call(this);return n===void 0&&(n=i(this),(n!==null||this.hasUpdated)&&d.call(this,n)),n}})}return H(e,r,{get(){return i(this)}})}}var dt=g` :host { /* =================================== * SURFACE COLORS * =================================== */ --mcp-color-surface: var(--color-surface, #ffffff); --mcp-color-surface-raised: var(--color-surface-raised, #ffffff); --mcp-color-surface-sunken: var(--color-surface-sunken, #f9fafb); --mcp-color-surface-hover: var(--color-surface-hover, #f4f4f5); /* =================================== * TEXT COLORS * =================================== */ --mcp-color-text: var(--color-text, #18181b); --mcp-color-text-muted: var(--color-text-muted, #71717a); --mcp-color-text-subtle: var(--color-text-subtle, #a1a1aa); /* =================================== * BORDER COLORS * =================================== */ --mcp-color-border: var(--color-border, #e4e4e7); --mcp-color-border-muted: var(--color-border-muted, #f4f4f5); --mcp-color-border-emphasis: var(--color-border-emphasis, #d4d4d8); /* =================================== * PRIMARY / BRAND * =================================== */ --mcp-color-primary: var(--color-primary, #000000); --mcp-color-primary-hover: var(--color-primary-hover, #27272a); --mcp-color-primary-foreground: var(--color-primary-foreground, #ffffff); /* =================================== * STATE COLORS * =================================== */ --mcp-color-success: var(--color-success-emphasis, #10b981); --mcp-color-error: var(--color-error-emphasis, #ef4444); --mcp-color-warning: var(--color-warning-emphasis, #f59e0b); --mcp-color-info: var(--color-info-emphasis, #3b82f6); /* =================================== * CHAT SPECIFIC * =================================== */ --mcp-message-user-bg: var(--mcp-color-primary); --mcp-message-user-fg: var(--mcp-color-primary-foreground); --mcp-message-assistant-bg: var(--mcp-color-surface-sunken); --mcp-message-assistant-fg: var(--mcp-color-text); --mcp-message-radius: 1rem; /* =================================== * TYPOGRAPHY * =================================== */ --mcp-font-family: var(--font-sans, Inter, system-ui, -apple-system, sans-serif); --mcp-font-mono: var(--font-mono, 'JetBrains Mono', Menlo, Monaco, monospace); --mcp-font-size-xs: 0.75rem; --mcp-font-size-sm: 0.875rem; --mcp-font-size-base: 1rem; --mcp-font-size-lg: 1.125rem; --mcp-line-height: 1.5; /* =================================== * SPACING * =================================== */ --mcp-space-1: 0.25rem; --mcp-space-2: 0.5rem; --mcp-space-3: 0.75rem; --mcp-space-4: 1rem; --mcp-space-6: 1.5rem; --mcp-space-8: 2rem; /* =================================== * RADII * =================================== */ --mcp-radius-sm: 0.25rem; --mcp-radius-md: 0.5rem; --mcp-radius-lg: 0.75rem; --mcp-radius-xl: 1rem; --mcp-radius-full: 9999px; /* =================================== * TRANSITIONS * =================================== */ --mcp-transition-fast: 150ms ease; --mcp-transition-base: 200ms ease; --mcp-transition-slow: 300ms ease; /* =================================== * SHADOWS * =================================== */ --mcp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --mcp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --mcp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } /* Dark mode adjustments via prefers-color-scheme */ @media (prefers-color-scheme: dark) { :host { --mcp-color-surface: var(--color-surface, #09090b); --mcp-color-surface-raised: var(--color-surface-raised, #18181b); --mcp-color-surface-sunken: var(--color-surface-sunken, #09090b); --mcp-color-surface-hover: var(--color-surface-hover, #27272a); --mcp-color-text: var(--color-text, #fafafa); --mcp-color-text-muted: var(--color-text-muted, #a1a1aa); --mcp-color-text-subtle: var(--color-text-subtle, #71717a); --mcp-color-border: var(--color-border, #27272a); --mcp-color-border-muted: var(--color-border-muted, #18181b); --mcp-color-border-emphasis: var(--color-border-emphasis, #3f3f46); --mcp-color-primary: var(--color-primary, #ffffff); --mcp-color-primary-hover: var(--color-primary-hover, #e4e4e7); --mcp-color-primary-foreground: var(--color-primary-foreground, #09090b); --mcp-message-assistant-bg: var(--mcp-color-surface-raised); } } `,mt=g` :host-context(.dark) { --mcp-color-surface: var(--color-surface, #09090b); --mcp-color-surface-raised: var(--color-surface-raised, #18181b); --mcp-color-surface-sunken: var(--color-surface-sunken, #09090b); --mcp-color-surface-hover: var(--color-surface-hover, #27272a); --mcp-color-text: var(--color-text, #fafafa); --mcp-color-text-muted: var(--color-text-muted, #a1a1aa); --mcp-color-text-subtle: var(--color-text-subtle, #71717a); --mcp-color-border: var(--color-border, #27272a); --mcp-color-border-muted: var(--color-border-muted, #18181b); --mcp-color-border-emphasis: var(--color-border-emphasis, #3f3f46); --mcp-color-primary: var(--color-primary, #ffffff); --mcp-color-primary-hover: var(--color-primary-hover, #e4e4e7); --mcp-color-primary-foreground: var(--color-primary-foreground, #09090b); --mcp-message-assistant-bg: var(--mcp-color-surface-raised); } `;function Xt(o,t){let e;return(...r)=>{clearTimeout(e),e=setTimeout(()=>o(...r),t)}}function Qt(o,t){let e=0,r=null;return(...s)=>{let i=Date.now(),a=t-(i-e);a<=0?(r&&(clearTimeout(r),r=null),e=i,o(...s)):r||(r=setTimeout(()=>{e=Date.now(),r=null,o(...s)},a))}}function te(o="mcp"){return`${o}-${Math.random().toString(36).slice(2,9)}`}function ht(o,t,e){return Math.min(Math.max(o,t),e)}function P(o){return o.toLocaleString()}async function ut(o){try{if(navigator.clipboard&&navigator.clipboard.writeText)return await navigator.clipboard.writeText(o),!0;let t=document.createElement("textarea");t.value=o,t.style.position="fixed",t.style.left="-9999px",document.body.appendChild(t),t.select();let e=document.execCommand("copy");return document.body.removeChild(t),e}catch{return!1}}function ft(o){let t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return o.replace(/[&<>"']/g,e=>t[e])}function gt(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function vt(){return window.matchMedia("(prefers-color-scheme: dark)").matches}function ee(...o){return o.filter(Boolean).join(" ")}var u=class extends T{static{this.baseStyles=[dt,mt,g` :host { display: block; box-sizing: border-box; font-family: var(--mcp-font-family); font-size: var(--mcp-font-size-base); line-height: var(--mcp-line-height); color: var(--mcp-color-text); } :host([hidden]) { display: none !important; } *, *::before, *::after { box-sizing: inherit; } /* Focus visible styles for accessibility */ :focus-visible { outline: 2px solid var(--mcp-color-primary); outline-offset: 2px; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } `]}get isDarkMode(){return vt()}get prefersReducedMotion(){return gt()}emit(t,e){let r=new CustomEvent(`mcp-${t}`,{detail:e,bubbles:!0,composed:!0,cancelable:!0});return this.dispatchEvent(r)}generateId(t){return`mcp-${this.tagName.toLowerCase()}-${t}-${Math.random().toString(36).slice(2,7)}`}announce(t,e="polite"){let r=document.createElement("div");r.setAttribute("role","status"),r.setAttribute("aria-live",e),r.setAttribute("aria-atomic","true"),r.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",r.textContent=t,document.body.appendChild(r),setTimeout(()=>r.remove(),1e3)}};var w=class extends u{constructor(){super(...arguments);this.role="assistant";this.animated=!1}get _defaultAvatar(){switch(this.role){case"user":return"U";case"assistant":return"AI";case"system":return"\u2699";default:return"?"}}get _roleLabel(){switch(this.role){case"user":return"User message";case"assistant":return"Assistant message";case"system":return"System message";default:return"Message"}}render(){return m` <article class="container" part="container" role="article" aria-label="${this._roleLabel}" > <div class="avatar-wrapper" part="avatar"> <div class="avatar" aria-hidden="true"> <slot name="avatar">${this._defaultAvatar}</slot> </div> </div> <div class="message-wrapper"> ${this.name?m`<div class="name" part="name">${this.name}</div>`:p} <div class="content" part="content"> <slot></slot> </div> ${this.timestamp?m` <div class="meta"> <span class="timestamp" part="timestamp">${this.timestamp}</span> <div class="actions" part="actions"> <slot name="actions"></slot> </div> </div> `:m` <div class="meta"> <div class="actions" part="actions"> <slot name="actions"></slot> </div> </div> `} </div> <span class="sr-only">${this._roleLabel}</span> </article> `}};w.styles=[...u.baseStyles,g` :host { --_user-bg: var(--mcp-message-user-bg, var(--mcp-color-primary)); --_user-fg: var(--mcp-message-user-fg, var(--mcp-color-primary-foreground)); --_assistant-bg: var(--mcp-message-assistant-bg, var(--mcp-color-surface-sunken)); --_assistant-fg: var(--mcp-message-assistant-fg, var(--mcp-color-text)); --_system-bg: var(--mcp-message-system-bg, var(--mcp-color-surface-hover)); --_system-fg: var(--mcp-message-system-fg, var(--mcp-color-text-muted)); --_radius: var(--mcp-message-radius, var(--mcp-radius-xl)); --_max-width: var(--mcp-message-max-width, 80%); } .container { display: flex; gap: var(--mcp-space-3); max-width: 100%; } :host([role='user']) .container { flex-direction: row-reverse; } .avatar-wrapper { flex-shrink: 0; width: 32px; height: 32px; } .avatar { width: 100%; height: 100%; border-radius: var(--mcp-radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--mcp-font-size-xs); font-weight: 600; color: white; } :host([role='assistant']) .avatar { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); } :host([role='user']) .avatar { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); } :host([role='system']) .avatar { background: var(--mcp-color-border-emphasis); color: var(--mcp-color-text-muted); } .message-wrapper { max-width: var(--_max-width); min-width: 0; } .name { font-size: var(--mcp-font-size-xs); font-weight: 500; color: var(--mcp-color-text-muted); margin-bottom: var(--mcp-space-1); } :host([role='user']) .name { text-align: right; } .content { padding: var(--mcp-space-3) var(--mcp-space-4); border-radius: var(--_radius); font-size: var(--mcp-font-size-sm); line-height: var(--mcp-line-height); word-wrap: break-word; overflow-wrap: break-word; } :host([role='user']) .content { background: var(--_user-bg); color: var(--_user-fg); border-bottom-right-radius: var(--mcp-radius-sm); } :host([role='assistant']) .content { background: var(--_assistant-bg); color: var(--_assistant-fg); border-bottom-left-radius: var(--mcp-radius-sm); } :host([role='system']) .content { background: var(--_system-bg); color: var(--_system-fg); font-style: italic; border-radius: var(--mcp-radius-md); } .meta { display: flex; align-items: center; gap: var(--mcp-space-2); margin-top: var(--mcp-space-1); font-size: var(--mcp-font-size-xs); color: var(--mcp-color-text-subtle); } :host([role='user']) .meta { justify-content: flex-end; } .timestamp { opacity: 0.8; } .actions { display: flex; gap: var(--mcp-space-1); opacity: 0; transition: opacity var(--mcp-transition-fast); } .container:hover .actions, .container:focus-within .actions { opacity: 1; } /* Animation for message entry */ :host([animated]) { animation: messageIn 0.3s ease-out; } @keyframes messageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Nested content styling */ .content ::slotted(p) { margin: 0 0 var(--mcp-space-2) 0; } .content ::slotted(p:last-child) { margin-bottom: 0; } .content ::slotted(code) { font-family: var(--mcp-font-mono); font-size: 0.9em; padding: 0.125em 0.375em; background: rgba(0, 0, 0, 0.1); border-radius: var(--mcp-radius-sm); } :host([role='user']) .content ::slotted(code) { background: rgba(255, 255, 255, 0.2); } /* Screen reader announcement */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } `],c([l({reflect:!0})],w.prototype,"role",2),c([l()],w.prototype,"timestamp",2),c([l()],w.prototype,"name",2),c([l({type:Boolean,reflect:!0})],w.prototype,"animated",2),w=c([y("mcp-chat-message")],w);var E=class extends u{constructor(){super(...arguments);this.size="md";this.variant="bubble";this.label="AI is typing"}render(){return m` <div class="container" part="container" role="status" aria-live="polite" aria-label="${this.label}" > <span class="dot" part="dot"></span> <span class="dot" part="dot"></span> <span class="dot" part="dot"></span> <span class="sr-only">${this.label}</span> </div> `}};E.styles=[...u.baseStyles,g` :host { display: inline-flex; --_dot-color: var(--mcp-typing-dot-color, var(--mcp-color-text-muted)); --_dot-size: var(--mcp-typing-dot-size, 8px); --_gap: var(--mcp-typing-gap, 4px); --_bg: var(--mcp-typing-bg, var(--mcp-color-surface-sunken)); } :host([size='sm']) { --_dot-size: 6px; --_gap: 3px; } :host([size='lg']) { --_dot-size: 10px; --_gap: 5px; } .container { display: inline-flex; align-items: center; gap: var(--_gap); padding: var(--mcp-space-3) var(--mcp-space-4); background: var(--_bg); border-radius: var(--mcp-radius-lg); } :host([variant='minimal']) .container { padding: 0; background: transparent; } .dot { width: var(--_dot-size); height: var(--_dot-size); background: var(--_dot-color); border-radius: var(--mcp-radius-full); animation: bounce 1.4s infinite ease-in-out both; } .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; } .dot:nth-child(3) { animation-delay: 0s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* Screen reader only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } `],c([l({reflect:!0})],E.prototype,"size",2),c([l({reflect:!0})],E.prototype,"variant",2),c([l()],E.prototype,"label",2),E=c([y("mcp-typing-indicator")],E);var x=class extends u{constructor(){super(...arguments);this.language="";this.filename="";this.showLineNumbers=!1;this.code="";this._copied=!1;this._slotContent=""}async _handleCopy(){let e=this._getCodeContent();await ut(e)&&(this._copied=!0,this.emit("copy",{code:e}),this.announce("Code copied to clipboard"),setTimeout(()=>{this._copied=!1},2e3))}_getCodeContent(){return this.code||this._slotContent}_handleSlotChange(e){let s=e.target.assignedNodes({flatten:!0});this._slotContent=s.map(i=>i.textContent||"").join("").trim()}_getLines(){return this._getCodeContent().split(` `)}_renderLineNumbers(){if(!this.showLineNumbers)return p;let e=this._getLines();return m` <div class="line-numbers" part="line-numbers" aria-hidden="true"> ${e.map((r,s)=>m`<span class="line-number">${s+1}</span>`)} </div> `}render(){let e=this.language||this.filename;return m` <div class="container" part="container"> ${e?m` <div class="header" part="header"> <div class="header-info"> ${this.language?m`<span class="language-badge">${this.language}</span>`:p} ${this.filename?m`<span class="filename">${this.filename}</span>`:p} </div> <button class="copy-button ${this._copied?"copied":""}" part="copy-button" @click="${this._handleCopy}" aria-label="${this._copied?"Copied!":"Copy code"}" > ${this._copied?m` <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <polyline points="20 6 9 17 4 12"></polyline> </svg> Copied! `:m` <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> Copy `} </button> </div> `:p} <div class="code-wrapper"> ${this._renderLineNumbers()} <pre part="code"><code>${this.code?ft(this.code):m`<slot @slotchange="${this._handleSlotChange}"></slot>`}</code></pre> </div> </div> `}};x.styles=[...u.baseStyles,g` :host { display: block; --_bg: var(--mcp-code-bg, #1e1e1e); --_fg: var(--mcp-code-fg, #d4d4d4); --_header-bg: var(--mcp-code-header-bg, #2d2d2d); --_font: var(--mcp-code-font, var(--mcp-font-mono)); --_font-size: var(--mcp-code-font-size, 0.875rem); --_radius: var(--mcp-code-radius, var(--mcp-radius-lg)); --_line-number-color: var(--mcp-code-line-number, #6e7681); } .container { background: var(--_bg); border-radius: var(--_radius); overflow: hidden; } .header { display: flex; align-items: center; justify-content: space-between; padding: var(--mcp-space-2) var(--mcp-space-3); background: var(--_header-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header-info { display: flex; align-items: center; gap: var(--mcp-space-2); font-size: var(--mcp-font-size-xs); color: var(--_fg); opacity: 0.7; } .language-badge { text-transform: uppercase; font-weight: 500; letter-spacing: 0.05em; } .filename { opacity: 0.6; } .copy-button { display: flex; align-items: center; gap: var(--mcp-space-1); padding: var(--mcp-space-1) var(--mcp-space-2); background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--mcp-radius-sm); color: var(--_fg); font-size: var(--mcp-font-size-xs); cursor: pointer; transition: background var(--mcp-transition-fast), border-color var(--mcp-transition-fast); } .copy-button:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .copy-button.copied { color: var(--mcp-color-success); border-color: var(--mcp-color-success); } .copy-icon { width: 14px; height: 14px; } .code-wrapper { display: flex; overflow-x: auto; } .line-numbers { flex-shrink: 0; padding: var(--mcp-space-3); padding-right: var(--mcp-space-2); text-align: right; user-select: none; color: var(--_line-number-color); font-family: var(--_font); font-size: var(--_font-size); line-height: 1.6; border-right: 1px solid rgba(255, 255, 255, 0.1); } .line-number { display: block; } pre { flex: 1; margin: 0; padding: var(--mcp-space-3); overflow-x: auto; font-family: var(--_font); font-size: var(--_font-size); line-height: 1.6; color: var(--_fg); white-space: pre; tab-size: 2; } code { font-family: inherit; font-size: inherit; } /* Basic syntax highlighting tokens */ .token.comment { color: #6a9955; } .token.string { color: #ce9178; } .token.number { color: #b5cea8; } .token.keyword { color: #569cd6; } .token.function { color: #dcdcaa; } .token.operator { color: #d4d4d4; } .token.punctuation { color: #d4d4d4; } .token.class-name { color: #4ec9b0; } .token.constant { color: #4fc1ff; } .token.property { color: #9cdcfe; } /* Scrollbar styling */ pre::-webkit-scrollbar { height: 8px; } pre::-webkit-scrollbar-track { background: transparent; } pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } pre::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } `],c([l()],x.prototype,"language",2),c([l()],x.prototype,"filename",2),c([l({type:Boolean,attribute:"show-line-numbers"})],x.prototype,"showLineNumbers",2),c([l()],x.prototype,"code",2),c([z()],x.prototype,"_copied",2),c([z()],x.prototype,"_slotContent",2),x=c([y("mcp-code-block")],x);var b=class extends u{constructor(){super(...arguments);this.placeholder="Type a message...";this.disabled=!1;this.maxLength=0;this.maxRows=6;this.value="";this.showCount=!1}focus(){this._textarea?.focus()}clear(){this.value="",this._resize()}_handleInput(e){let r=e.target;this.value=r.value,this._resize(),this.emit("input",{value:this.value})}_handleKeyDown(e){e.key==="Enter"&&!e.shiftKey&&(e.preventDefault(),this._submit())}_handleFocus(){this.emit("focus")}_handleBlur(){this.emit("blur")}_submit(){let e=this.value.trim();!e||this.disabled||this.emit("submit",{value:e})&&this.clear()}_resize(){if(!this._textarea)return;this._textarea.style.height="auto";let e=getComputedStyle(this._textarea),s=(parseFloat(e.lineHeight)||24)*this.maxRows,i=Math.min(this._textarea.scrollHeight,s);this._textarea.style.height=`${i}px`}get _isOverLimit(){return this.maxLength>0&&this.value.length>this.maxLength}get _isNearLimit(){return this.maxLength>0&&this.value.length>=this.maxLength*.9}get _canSubmit(){return this.value.trim().length>0&&!this.disabled&&!this._isOverLimit}render(){return m` <div class="container" part="container"> <div class="prefix"> <slot name="prefix"></slot> </div> <div class="input-wrapper"> <textarea part="textarea" .value="${this.value}" placeholder="${this.placeholder}" ?disabled="${this.disabled}" maxlength="${this.maxLength>0?this.maxLength:p}" rows="1" aria-label="${this.placeholder}" @input="${this._handleInput}" @keydown="${this._handleKeyDown}" @focus="${this._handleFocus}" @blur="${this._handleBlur}" ></textarea> ${this.showCount&&this.maxLength>0?m` <div class="character-count ${this._isOverLimit?"error":this._isNearLimit?"warning":""}" part="character-count" > ${this.value.length} / ${this.maxLength} </div> `:p} </div> <div class="suffix"> <slot name="suffix"></slot> </div> <button class="send-button" part="send-button" ?disabled="${!this._canSubmit}" @click="${this._submit}" aria-label="Send message" > <slot name="send-icon"> <svg class="send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="22" y1="2" x2="11" y2="13"></line> <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> </svg> </slot> </button> </div> `}};b.styles=[...u.baseStyles,g` :host { display: block; --_bg: var(--mcp-input-bg, var(--mcp-color-surface)); --_border: var(--mcp-input-border, var(--mcp-color-border)); --_radius: var(--mcp-input-radius, var(--mcp-radius-xl)); --_min-height: var(--mcp-input-min-height, 44px); --_max-height: var(--mcp-input-max-height, 200px); } .container { display: flex; align-items: flex-end; gap: var(--mcp-space-2); padding: var(--mcp-space-2) var(--mcp-space-3); background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius); transition: border-color var(--mcp-transition-fast), box-shadow var(--mcp-transition-fast); } .container:focus-within { border-color: var(--mcp-color-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } :host([disabled]) .container { opacity: 0.6; cursor: not-allowed; } .input-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; } textarea { width: 100%; min-height: var(--_min-height); max-height: var(--_max-height); padding: var(--mcp-space-2) 0; border: none; background: transparent; color: var(--mcp-color-text); font-family: inherit; font-size: var(--mcp-font-size-base); line-height: var(--mcp-line-height); resize: none; overflow-y: auto; } textarea:focus { outline: none; } textarea::placeholder { color: var(--mcp-color-text-subtle); } textarea:disabled { cursor: not-allowed; } .send-button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; background: var(--mcp-color-primary); color: var(--mcp-color-primary-foreground); border-radius: var(--mcp-radius-lg); cursor: pointer; transition: background var(--mcp-transition-fast), transform var(--mcp-transition-fast); } .send-button:hover:not(:disabled) { background: var(--mcp-color-primary-hover); } .send-button:active:not(:disabled) { transform: scale(0.95); } .send-button:disabled { opacity: 0.5; cursor: not-allowed; } .send-icon { width: 18px; height: 18px; } .character-count { font-size: var(--mcp-font-size-xs); color: var(--mcp-color-text-subtle); text-align: right; padding-top: var(--mcp-space-1); } .character-count.warning { color: var(--mcp-color-warning); } .character-count.error { color: var(--mcp-color-error); } .prefix, .suffix { display: flex; align-items: center; } `],c([l()],b.prototype,"placeholder",2),c([l({type:Boolean,reflect:!0})],b.prototype,"disabled",2),c([l({type:Number,attribute:"max-length"})],b.prototype,"maxLength",2),c([l({type:Number,attribute:"max-rows"})],b.prototype,"maxRows",2),c([l()],b.prototype,"value",2),c([l({type:Boolean,attribute:"show-count"})],b.prototype,"showCount",2),c([Ot("textarea")],b.prototype,"_textarea",2),b=c([y("mcp-message-input")],b);var _=class extends u{constructor(){super(...arguments);this.text="";this.speed=50;this.cursor=!0;this.autoStart=!0;this._displayedText="";this._isStreaming=!1;this._isComplete=!1;this._animationFrame=null;this._startTime=null;this._lastText="";this._animate=()=>{if(!this._isStreaming)return;let e=performance.now();this._startTime===null&&(this._startTime=e);let r=e-this._startTime,s=Math.floor(r/1e3*this.speed),i=Math.min(s,this.text.length);this._displayedText.length<i&&(this._displayedText=this.text.slice(0,i),this.emit("stream-progress",{text:this._displayedText,progress:this._displayedText.length/this.text.length,total:this.text.length,current:this._displayedText.length})),this._displayedText.length>=this.text.length?(this._isStreaming=!1,this._isComplete=!0,this.emit("stream-complete",{text:this.text})):this._animationFrame=requestAnimationFrame(this._animate)}}connectedCallback(){super.connectedCallback(),this.autoStart&&this.text&&this.stream(this.text)}disconnectedCallback(){super.disconnectedCallback(),this._cancelAnimation()}updated(e){e.has("text")&&this.autoStart&&this.text!==this._lastText&&(this._lastText=this.text,this.stream(this.text))}stream(e){e!==void 0&&(this.text=e),this._cancelAnimation(),this._displayedText="",this._isStreaming=!0,this._isComplete=!1,this._startTime=null,this.emit("stream-start",{text:this.text}),this._animate()}append(e){this.text+=e,this._isStreaming||(this._isStreaming=!0,this._isComplete=!1,this._animate())}complete(){this._cancelAnimation(),this._displayedText=this.text,this._isStreaming=!1,this._isComplete=!0,this.emit("stream-complete",{text:this.text})}pause(){this._cancelAnimation(),this._isStreaming=!1}resume(){this._displayedText.length<this.text.length&&(this._isStreaming=!0,this._startTime=null,this._animate())}reset(){this._cancelAnimation(),this._displayedText="",this._isStreaming=!1,this._isComplete=!1,this._startTime=null}_cancelAnimation(){this._animationFrame!==null&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null)}get progress(){return this.text?this._displayedText.length/this.text.length*100:0}get isStreaming(){return this._isStreaming}get isComplete(){return this._isComplete}render(){let e=this.cursor&&!this._isComplete;return m` <div class="container" part="container" role="status" aria-live="polite" aria-busy="${this._isStreaming}" > ${this._displayedText}<span class="cursor ${e?"":"hidden"}" part="cursor" aria-hidden="true" ></span> </div> `}};_.styles=[...u.baseStyles,g` :host { display: block; --_cursor-color: var(--mcp-streaming-cursor-color, var(--mcp-color-primary)); --_cursor-width: var(--mcp-streaming-cursor-width, 2px); } .container { white-space: pre-wrap; word-wrap: break-word; } .cursor { display: inline-block; width: var(--_cursor-width); height: 1.2em; background: var(--_cursor-color); margin-left: 1px; vertical-align: text-bottom; animation: blink 1s step-end infinite; } .cursor.hidden { visibility: hidden; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* No animation when reduced motion preferred */ @media (prefers-reduced-motion: reduce) { .cursor { animation: none; opacity: 1; } } `],c([l()],_.prototype,"text",2),c([l({type:Number})],_.prototype,"speed",2),c([l({type:Boolean})],_.prototype,"cursor",2),c([l({type:Boolean,attribute:"auto-start"})],_.prototype,"autoStart",2),c([z()],_.prototype,"_displayedText",2),c([z()],_.prototype,"_isStreaming",2),c([z()],_.prototype,"_isComplete",2),_=c([y("mcp-streaming-text")],_);var $=class extends u{constructor(){super(...arguments);this.used=0;this.limit=4096;this.showLabel=!1;this.variant="default";this.warningThreshold=80;this._lastEmittedState=null}willUpdate(e){(e.has("used")||e.has("limit")||e.has("warningThreshold"))&&this._updateState()}_updateState(){let e=this._percentage,r="normal";e>=100?r="error":e>=this.warningThreshold&&(r="warning"),r!==this._lastEmittedState&&(r==="warning"?this.emit("limit-warning",{used:this.used,limit:this.limit,percentage:e}):r==="error"&&this.emit("limit-exceeded",{used:this.used,limit:this.limit,percentage:e}),this._lastEmittedState=r),this.setAttribute("state",r)}get _percentage(){return this.limit<=0?0:this.used/this.limit*100}get _clampedPercentage(){return ht(this._percentage,0,100)}render(){let e=this._clampedPercentage;return m` <div class="container" part="container" role="progressbar" aria-valuenow="${this.used}" aria-valuemin="0" aria-valuemax="${this.limit}" aria-label="Token usage: ${P(this.used)} of ${P(this.limit)}"> ${this.showLabel?m` <div class="label" part="label"> <span class="count">${P(this.used)} / ${P(this.limit)} tokens</span> <span class="percentage">${Math.round(this._percentage)}%</span> </div> `:p} <div class="bar" part="bar"> <div class="bar-fill" part="bar-fill" style="width: ${e}%"></div> </div> ${this.showLabel?p:m` <div class="label" part="label"> <span class="count">${P(this.used)} / ${P(this.limit)}</span> </div> `} </div> `}};$.styles=[...u.baseStyles,g` :host { display: block; --_bar-bg: var(--mcp-token-bar-bg, var(--mcp-color-surface-sunken)); --_bar-fill: var(--mcp-token-bar-fill, var(--mcp-color-primary)); --_bar-height: var(--mcp-token-bar-height, 6px); --_warning: var(--mcp-token-warning, var(--mcp-color-warning)); --_error: var(--mcp-token-error, var(--mcp-color-error)); } .container { display: flex; flex-direction: column; gap: var(--mcp-space-2); } .bar { position: relative; width: 100%; height: var(--_bar-height); background: var(--_bar-bg); border-radius: var(--mcp-radius-full); overflow: hidden; } .bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--_bar-fill); border-radius: var(--mcp-radius-full); transition: width var(--mcp-transition-base), background var(--mcp-transition-base); } :host([state='warning']) .bar-fill { background: var(--_warning); } :host([state='error']) .bar-fill { background: var(--_error); } .label { display: flex; justify-content: space-between; align-items: center; font-size: var(--mcp-font-size-xs); color: var(--mcp-color-text-muted); } :host([state='warning']) .label { color: var(--_warning); } :host([state='error']) .label { color: var(--_error); } .count { font-variant-numeric: tabular-nums; } .percentage { font-weight: 500; } /* Compact variant */ :host([variant='compact']) .container { flex-direction: row; align-items: center; gap: var(--mcp-space-3); } :host([variant='compact']) .bar { flex: 1; } :host([variant='compact']) .label { flex-shrink: 0; width: auto; } `],c([l({type:Number})],$.prototype,"used",2),c([l({type:Number})],$.prototype,"limit",2),c([l({type:Boolean,attribute:"show-label"})],$.prototype,"showLabel",2),c([l({reflect:!0})],$.prototype,"variant",2),c([l({type:Number,attribute:"warning-threshold"})],$.prototype,"warningThreshold",2),$=c([y("mcp-token-counter")],$);var Lr="0.1.0";export{u as McpBaseElement,w as McpChatMessage,x as McpCodeBlock,b as McpMessageInput,_ as McpStreamingText,$ as McpTokenCounter,E as McpTypingIndicator,Lr as VERSION,ht as clamp,ut as copyToClipboard,ee as cx,mt as darkModeOverride,Xt as debounce,ft as escapeHtml,P as formatNumber,vt as prefersDarkMode,gt as prefersReducedMotion,dt as themeTokens,Qt as throttle,te as uniqueId}; /*! Bundled license information: @lit/reactive-element/css-tag.js: (** * @license * Copyright 2019 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) @lit/reactive-element/reactive-element.js: lit-html/lit-html.js: lit-element/lit-element.js: @lit/reactive-element/decorators/custom-element.js: @lit/reactive-element/decorators/property.js: @lit/reactive-element/decorators/state.js: @lit/reactive-element/decorators/event-options.js: @lit/reactive-element/decorators/base.js: @lit/reactive-element/decorators/query.js: @lit/reactive-element/decorators/query-all.js: @lit/reactive-element/decorators/query-async.js: @lit/reactive-element/decorators/query-assigned-nodes.js: (** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) lit-html/is-server.js: (** * @license * Copyright 2022 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) @lit/reactive-element/decorators/query-assigned-elements.js: (** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: BSD-3-Clause *) */