asyncapi-viewer 2.0.0 → 2.1.0

package/README.md

@@ -14,14 +14,18 @@ https://weesho-lapara.github.io/asyncapi-viewer/
 ## Use
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/asyncapi-viewer@2.0.0/dist/asyncapi-viewer.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asyncapi-viewer@2.0.0/theme/asyncapi-theme.css">
+<script type="module" src="https://cdn.jsdelivr.net/npm/asyncapi-viewer@2.1.0/dist/asyncapi-viewer.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asyncapi-viewer@2.1.0/theme/asyncapi-theme.css">
 
 <asyncapi-viewer src="asyncapi.yaml" sidebar></asyncapi-viewer>
 ```
 
 Or `npm install asyncapi-viewer` and import `asyncapi-viewer` (an ES module that defines the
-element) or load `asyncapi-viewer/iife` with a plain script tag. The theme file is optional: copy
+element) or load `asyncapi-viewer/iife` with a plain script tag. Each load fires
+`asyncapi-load` (`detail.model`, `detail.problems`) or `asyncapi-error` (`detail.error`). Types
+ship with the package; `import type {} from 'asyncapi-viewer/react'` adds the element to React's
+JSX, with `onasyncapi-load` and `onasyncapi-error`. React and SSR notes:
+https://weesho-lapara.github.io/asyncapi-viewer/other-tools/ The theme file is optional: copy
 it to change the two accent colours, or set any `--asyncapi-*` custom property on the element.
 Fonts are never loaded by the component; the page opts in (see the theme file).
 
@@ -63,6 +67,12 @@ Serve the repository root (`node scripts/serve.mjs`, or any static server) and o
 - `test/e2e/instant.spec.ts`: a Material for MkDocs fixture site with `navigation.instant`
   (`test/e2e/mkdocs/`, built by `build.py`, ignored): viewers render on every page reached
   through instant navigation and through history, with no full load. Skipped until built.
+- `test/e2e/react.spec.ts`: a React 19 app (`test/e2e/react/`, built by `build.mjs` from the
+  packed npm tarball and type-checked against the shipped types, so `files`, `exports` and the
+  types are tested too; `dist/` ignored): JSX props arrive as attributes (booleans bare or
+  removed, `className` as `class`), `onasyncapi-load`/`onasyncapi-error` receive the events,
+  `src`, theme, sidebar and label changes from state re-render, repeated unmount and remount,
+  and a document built as a JavaScript object handed over as a Blob URL. Skipped until built.
 - `test/e2e/sidebar.spec.ts`: the resizable sidebar (drag, keyboard, clamping, double-click reset,
   no handle in the drawer layout).
 - `test/e2e/screenshots.spec.ts`: captures every example document at 1280, 820 and 380px in

package/dist/asyncapi-viewer.iife.js

@@ -2426,8 +2426,8 @@ $&`).replace(/(?:^|\n)([\t ].*)(?:([\n\t ]*)\n(?![\n\t ]))?/g,`$1$2`).replace(/\
     /* Accent text on the tint does not reach 4.5:1 in dark mode; use ink there. */
     --_tint-ink: var(--_ink);
   }
-`,yd=class{#e=`auto`;#t;#n=`light`;#r;#i;#a=()=>this.#o();constructor(e,t){this.host=e,this.onChange=t}get resolved(){return this.#n}set mode(e){e!==this.#e&&(this.#e=e,this.#t=void 0,this.#o())}toggle(){this.#t=this.#n===`dark`?`light`:`dark`,this.#o()}connect(){let e=this.host.ownerDocument,t=e.defaultView;t?.matchMedia&&(this.#i=t.matchMedia(`(prefers-color-scheme: dark)`),this.#i.addEventListener(`change`,this.#a)),this.#r=new MutationObserver(()=>this.#o()),this.#r.observe(e.documentElement,{attributes:!0,attributeFilter:[`data-theme`,`class`]}),e.body&&this.#r.observe(e.body,{attributes:!0,attributeFilter:[`data-md-color-scheme`,`class`]}),this.#o()}disconnect(){this.#r?.disconnect(),this.#r=void 0,this.#i?.removeEventListener(`change`,this.#a),this.#i=void 0}hostPreference(){let e=this.host.ownerDocument,t=e.body?.getAttribute(`data-md-color-scheme`);if(t)return t===`slate`?`dark`:`light`;let n=e.documentElement.getAttribute(`data-theme`);return n===`dark`||n===`light`?n:this.#i?.matches?`dark`:`light`}#o(){let e=this.#t??(this.#e===`auto`?this.hostPreference():this.#e);(e!==this.#n||this.host.getAttribute(`resolved-theme`)!==e)&&(this.#n=e,this.host.setAttribute(`resolved-theme`,e),this.onChange(e))}};function bd(e){let t=e.trim(),n=/^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)/i.exec(t);if(n)return[Number(n[1]),Number(n[2]),Number(n[3])];let r=/^#([0-9a-f]{3,8})$/i.exec(t)?.[1];if(r){if(r.length===3||r.length===4)return[parseInt(r[0]+r[0],16),parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16)];if(r.length===6||r.length===8)return[parseInt(r.slice(0,2),16),parseInt(r.slice(2,4),16),parseInt(r.slice(4,6),16)]}}function xd([e,t,n]){return`#${[e,t,n].map(e=>Math.round(Math.max(0,Math.min(255,e))).toString(16).padStart(2,`0`)).join(``)}`}function Sd([e,t,n]){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Cd(e,t){let n=Sd(e),r=Sd(t);return(Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function wd(e){return Sd(e)>.6?`#14161B`:`#FFFFFF`}function Td(e,t,n,r=4.5){if(Cd(e,t)>=r)return e;let i=n?[255,255,255]:[0,0,0];for(let n=.05;n<=1;n+=.05){let a=Ed(e,i,n);if(Cd(a,t)>=r)return a}return i}function Ed(e,t,n){return[e[0]+(t[0]-e[0])*n,e[1]+(t[1]-e[1])*n,e[2]+(t[2]-e[2])*n]}var Dd=0,Od=class extends He{static{this.styles=[vd,_d,Aa,Xl,Gu,ku,yu,Ql,rd,dd]}#e=Da([]);#t;#n;#r;#i;#a=[];#o=`light`;#s={};#c=!1;#l;#u=new Map;#d=e=>{let t=this.#u.get(e);return t||(t=new Au(()=>this.requestUpdate()),this.#u.set(e,t)),t};#f=new Map;#p;#m=``;#h=new Set;#g=!1;#_;#v;#y=!1;#b;#x=``;#S;#C;#w=new Set;#T=new Map;#E=e=>{let t=this.#T.get(e);return t||(t={tab:`payload`,index:0,open:void 0,copied:void 0},this.#T.set(e,t)),{state:t,defaultOpen:this.#e.messageExamples,onChange:()=>this.requestUpdate()}};#D=()=>{this.#l=void 0,this.#R()};#O=new yd(this,e=>this.#B(e));get options(){return this.#e}get loadResult(){return this.#r}get problems(){return this.#a}get model(){return this.#i}get anchorPrefix(){return this.id}connectedCallback(){super.connectedCallback(),this.id||=`asyncapi-viewer-${++Dd}`,this.#z(),this.#t=new MutationObserver(()=>this.#z()),this.#t.observe(this,{attributes:!0}),this.#O.connect(),this.ownerDocument.defaultView?.addEventListener(`hashchange`,this.#D)}disconnectedCallback(){this.#t?.disconnect(),this.#t=void 0,this.#O.disconnect(),this.#C?.disconnect(),this.#C=void 0,this.ownerDocument.defaultView?.removeEventListener(`hashchange`,this.#D),super.disconnectedCallback()}firstUpdated(){this.#V();for(let e of this.querySelectorAll(`:scope > [data-asyncapi-fallback]`))e.remove()}updated(){this.#R(),this.#M();let e=this.renderRoot.querySelector(`.layout`);e&&(this.#_===void 0?e.style.removeProperty(`--_side-width`):e.style.setProperty(`--_side-width`,`${this.#_}px`))}#k(){return{min:220,max:Math.max(220,Math.min(560,Math.floor(this.getBoundingClientRect().width)-600))}}#A(e){let{min:t,max:n}=this.#k(),r=Math.round(Math.min(n,Math.max(t,e)));r!==this.#_&&(this.#_=r,this.requestUpdate())}#j(){let{min:e,max:t}=this.#k(),n=this.#_??292;return C`<div
-      class="side__resize ${this.#v?`side__resize--active`:``}"
+`,yd=class{#e=`auto`;#t;#n=`light`;#r;#i;#a=()=>this.#o();constructor(e,t){this.host=e,this.onChange=t}get resolved(){return this.#n}set mode(e){e!==this.#e&&(this.#e=e,this.#t=void 0,this.#o())}toggle(){this.#t=this.#n===`dark`?`light`:`dark`,this.#o()}connect(){let e=this.host.ownerDocument,t=e.defaultView;t?.matchMedia&&(this.#i=t.matchMedia(`(prefers-color-scheme: dark)`),this.#i.addEventListener(`change`,this.#a)),this.#r=new MutationObserver(()=>this.#o()),this.#r.observe(e.documentElement,{attributes:!0,attributeFilter:[`data-theme`,`class`]}),e.body&&this.#r.observe(e.body,{attributes:!0,attributeFilter:[`data-md-color-scheme`,`class`]}),this.#o()}disconnect(){this.#r?.disconnect(),this.#r=void 0,this.#i?.removeEventListener(`change`,this.#a),this.#i=void 0}hostPreference(){let e=this.host.ownerDocument,t=e.body?.getAttribute(`data-md-color-scheme`);if(t)return t===`slate`?`dark`:`light`;let n=e.documentElement.getAttribute(`data-theme`);return n===`dark`||n===`light`?n:this.#i?.matches?`dark`:`light`}#o(){let e=this.#t??(this.#e===`auto`?this.hostPreference():this.#e);(e!==this.#n||this.host.getAttribute(`resolved-theme`)!==e)&&(this.#n=e,this.host.setAttribute(`resolved-theme`,e),this.onChange(e))}};function bd(e){let t=e.trim(),n=/^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)/i.exec(t);if(n)return[Number(n[1]),Number(n[2]),Number(n[3])];let r=/^#([0-9a-f]{3,8})$/i.exec(t)?.[1];if(r){if(r.length===3||r.length===4)return[parseInt(r[0]+r[0],16),parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16)];if(r.length===6||r.length===8)return[parseInt(r.slice(0,2),16),parseInt(r.slice(2,4),16),parseInt(r.slice(4,6),16)]}}function xd([e,t,n]){return`#${[e,t,n].map(e=>Math.round(Math.max(0,Math.min(255,e))).toString(16).padStart(2,`0`)).join(``)}`}function Sd([e,t,n]){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Cd(e,t){let n=Sd(e),r=Sd(t);return(Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function wd(e){return Sd(e)>.6?`#14161B`:`#FFFFFF`}function Td(e,t,n,r=4.5){if(Cd(e,t)>=r)return e;let i=n?[255,255,255]:[0,0,0];for(let n=.05;n<=1;n+=.05){let a=Ed(e,i,n);if(Cd(a,t)>=r)return a}return i}function Ed(e,t,n){return[e[0]+(t[0]-e[0])*n,e[1]+(t[1]-e[1])*n,e[2]+(t[2]-e[2])*n]}var Dd=0,Od=class extends He{static{this.styles=[vd,_d,Aa,Xl,Gu,ku,yu,Ql,rd,dd]}#e=Da([]);#t;#n;#r;#i;#a;#o=[];#s;#c=[];#l=`light`;#u={};#d=!1;#f;#p=new Map;#m=e=>{let t=this.#p.get(e);return t||(t=new Au(()=>this.requestUpdate()),this.#p.set(e,t)),t};#h=new Map;#g;#_=``;#v=new Set;#y=!1;#b;#x;#S=!1;#C;#w=``;#T;#E;#D=new Set;#O=new Map;#k=e=>{let t=this.#O.get(e);return t||(t={tab:`payload`,index:0,open:void 0,copied:void 0},this.#O.set(e,t)),{state:t,defaultOpen:this.#e.messageExamples,onChange:()=>this.requestUpdate()}};#A=()=>{this.#f=void 0,this.#V()};#j=new yd(this,e=>this.#U(e));get options(){return this.#e}get loadResult(){return this.#r}get problems(){return this.#c}get model(){return this.#i}get anchorPrefix(){return this.id}connectedCallback(){super.connectedCallback(),this.id||=`asyncapi-viewer-${++Dd}`,this.#H(),this.#t=new MutationObserver(()=>this.#H()),this.#t.observe(this,{attributes:!0}),this.#j.connect(),this.ownerDocument.defaultView?.addEventListener(`hashchange`,this.#A)}disconnectedCallback(){this.#t?.disconnect(),this.#t=void 0,this.#j.disconnect(),this.#E?.disconnect(),this.#E=void 0,this.ownerDocument.defaultView?.removeEventListener(`hashchange`,this.#A),super.disconnectedCallback()}firstUpdated(){this.#W();for(let e of this.querySelectorAll(`:scope > [data-asyncapi-fallback]`))e.remove()}updated(){this.#V(),this.#F();let e=this.renderRoot.querySelector(`.layout`);e&&(this.#b===void 0?e.style.removeProperty(`--_side-width`):e.style.setProperty(`--_side-width`,`${this.#b}px`))}#M(){return{min:220,max:Math.max(220,Math.min(560,Math.floor(this.getBoundingClientRect().width)-600))}}#N(e){let{min:t,max:n}=this.#M(),r=Math.round(Math.min(n,Math.max(t,e)));r!==this.#b&&(this.#b=r,this.requestUpdate())}#P(){let{min:e,max:t}=this.#M(),n=this.#b??292;return C`<div
+      class="side__resize ${this.#x?`side__resize--active`:``}"
       role="separator"
       aria-orientation="vertical"
       aria-label="Resize sidebar"
@@ -2436,42 +2436,42 @@ $&`).replace(/(?:^|\n)([\t ].*)(?:([\n\t ]*)\n(?![\n\t ]))?/g,`$1$2`).replace(/\
       aria-valuenow=${n}
       tabindex="0"
       title="Drag to resize the sidebar; double-click to reset"
-      @pointerdown=${e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),this.#v={x:e.clientX,width:n},e.preventDefault(),this.requestUpdate())}}
-      @pointermove=${e=>{this.#v&&this.#A(this.#v.width+e.clientX-this.#v.x)}}
-      @pointerup=${()=>{this.#v=void 0,this.requestUpdate()}}
-      @pointercancel=${()=>{this.#v=void 0,this.requestUpdate()}}
-      @dblclick=${()=>{this.#_=void 0,this.requestUpdate()}}
-      @keydown=${r=>{if(r.key===`ArrowLeft`)this.#A(n-16);else if(r.key===`ArrowRight`)this.#A(n+16);else if(r.key===`Home`)this.#A(e);else if(r.key===`End`)this.#A(t);else return;r.preventDefault()}}
-    ></div>`}#M(){if(!this.#e.sidebar||!this.#i){this.#C?.disconnect(),this.#C=void 0;return}let e=[...this.renderRoot.querySelectorAll(`section[aria-labelledby]:not(.ops), article.op`)];this.#C?.disconnect(),this.#w.clear(),this.#C=new IntersectionObserver(t=>{for(let e of t){let t=e.target.id||e.target.getAttribute(`aria-labelledby`)||``;e.isIntersecting?this.#w.add(t):this.#w.delete(t)}let n=e.map(e=>e.id||e.getAttribute(`aria-labelledby`)||``).find(e=>this.#w.has(e));n!==this.#b&&(this.#b=n,this.requestUpdate())},{rootMargin:`0px 0px -60% 0px`,threshold:0});for(let t of e)this.#C.observe(t)}#N(e,t,n){this.#m=e,this.#P(t,n)}#P(e,t){clearTimeout(this.#S),this.#S=setTimeout(()=>{this.#x=this.#m.trim()===``&&this.#h.size===0?``:`${e} of ${t} operations shown`,this.requestUpdate()},300),this.requestUpdate()}#F(){this.#y=!0;let e=this.getBoundingClientRect().top;e>0&&this.ownerDocument.defaultView?.scrollBy({top:e,behavior:`smooth`}),this.requestUpdate(),this.updateComplete.then(()=>this.renderRoot.querySelector(`.side__search`)?.focus()).catch(()=>void 0)}#I(e=!1){this.#y&&(this.#y=!1,this.requestUpdate(),e||this.updateComplete.then(()=>this.renderRoot.querySelector(`.menu`)?.focus()).catch(()=>void 0))}#L(e){if(e.key!==`Tab`||!this.#y)return;let t=this.renderRoot.querySelector(`.side__panel`);if(!t)return;let n=[...t.querySelectorAll(`a[href], button, input, select, [tabindex="0"]`)].filter(e=>!e.hasAttribute(`disabled`));if(n.length===0)return;let r=n[0],i=n[n.length-1],a=this.renderRoot.activeElement;e.shiftKey&&a===r?(i.focus(),e.preventDefault()):!e.shiftKey&&a===i&&(r.focus(),e.preventDefault())}#R(){let e=this.ownerDocument.defaultView?.location.hash??``;if(!this.#i||e.length<2||e===this.#l)return;let t=decodeURIComponent(e.slice(1));if(!t.startsWith(`${this.id}--`))return;let n=this.renderRoot.getElementById(t)??this.renderRoot.getElementById(`${t}--heading`);n&&(this.#l=e,n instanceof HTMLDetailsElement&&(n.open=!0),n.scrollIntoView({block:`start`}),(n.querySelector(`[tabindex="-1"], summary`)??n).focus({preventScroll:!0}))}#z(){this.#e=Da(this.getAttributeNames().map(e=>[e,this.getAttribute(e)])),this.#O.mode=this.#e.theme,this.requestUpdate(),this.#H()}#B(e){this.#o=e,this.updateComplete.then(()=>this.#V()).catch(()=>void 0),this.requestUpdate()}#V(){let e=this.renderRoot,t=e?.querySelector(`.probe`);if(!t)return;let n=e=>(t.style.color=`var(${e})`,bd(getComputedStyle(t).color)),r=n(`--_primary`),i=n(`--_secondary`),a=n(`--_send`),o=n(`--_receive`),s=n(`--_head`),c=this.#o===`dark`,l={};r&&s&&(l[`--_primary-text`]=xd(Td(r,s,c))),i&&s&&(l[`--_secondary-text`]=xd(Td(i,s,c))),a&&(l[`--_badge-ink-send`]=wd(a)),o&&(l[`--_badge-ink-receive`]=wd(o));let u=getComputedStyle(this).getPropertyValue(`--_logo`).trim(),d=u!==``&&u!==`none`,f=e?.querySelector(`.root`);if(f)for(let[e,t]of Object.entries(l))f.style.setProperty(e,t);(d!==this.#c||JSON.stringify(l)!==JSON.stringify(this.#s))&&(this.#c=d,this.#s=l,this.requestUpdate())}async#H(){let e=this.#e.src;if(e===this.#n||(this.#n=e,this.#r=void 0,this.#i=void 0,this.#a=[],this.#u.clear(),this.#T.clear(),this.#f.clear(),this.#m=``,this.#h=new Set,this.#g=!1,this.#y=!1,this.#b=void 0,this.#p&&URL.revokeObjectURL(this.#p),this.#p=void 0,e===void 0))return;let t=await Ti(wi(e,this.ownerDocument.baseURI));if(this.#n===e){if(this.#r=t,t.ok){this.#p=URL.createObjectURL(new Blob([t.text],{type:t.format===`json`?`application/json`:`application/yaml`}));let n=new Mi(t.url,t.data),r=await n.preload();if(this.#n!==e)return;let i=this.#e;this.#i=ga({resolver:n,data:t.data,specVersion:t.specVersion,specMajor:t.specMajor,problems:r,options:{labels:{publish:i.publishLabel,subscribe:i.subscribeLabel,send:i.sendLabel,receive:i.receiveLabel,request:i.requestLabel,reply:i.replyLabel},useChannelAddressAsIdentifier:i.useChannelAddressAsIdentifier,applyTraits:i.parserOptions.applyTraits}}),this.#a=this.#i.problems}this.requestUpdate()}}render(){return C`<div class="root">
+      @pointerdown=${e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),this.#x={x:e.clientX,width:n},e.preventDefault(),this.requestUpdate())}}
+      @pointermove=${e=>{this.#x&&this.#N(this.#x.width+e.clientX-this.#x.x)}}
+      @pointerup=${()=>{this.#x=void 0,this.requestUpdate()}}
+      @pointercancel=${()=>{this.#x=void 0,this.requestUpdate()}}
+      @dblclick=${()=>{this.#b=void 0,this.requestUpdate()}}
+      @keydown=${r=>{if(r.key===`ArrowLeft`)this.#N(n-16);else if(r.key===`ArrowRight`)this.#N(n+16);else if(r.key===`Home`)this.#N(e);else if(r.key===`End`)this.#N(t);else return;r.preventDefault()}}
+    ></div>`}#F(){if(!this.#e.sidebar||!this.#i){this.#E?.disconnect(),this.#E=void 0;return}let e=[...this.renderRoot.querySelectorAll(`section[aria-labelledby]:not(.ops), article.op`)];this.#E?.disconnect(),this.#D.clear(),this.#E=new IntersectionObserver(t=>{for(let e of t){let t=e.target.id||e.target.getAttribute(`aria-labelledby`)||``;e.isIntersecting?this.#D.add(t):this.#D.delete(t)}let n=e.map(e=>e.id||e.getAttribute(`aria-labelledby`)||``).find(e=>this.#D.has(e));n!==this.#C&&(this.#C=n,this.requestUpdate())},{rootMargin:`0px 0px -60% 0px`,threshold:0});for(let t of e)this.#E.observe(t)}#I(e,t,n){this.#_=e,this.#L(t,n)}#L(e,t){clearTimeout(this.#T),this.#T=setTimeout(()=>{this.#w=this.#_.trim()===``&&this.#v.size===0?``:`${e} of ${t} operations shown`,this.requestUpdate()},300),this.requestUpdate()}#R(){this.#S=!0;let e=this.getBoundingClientRect().top;e>0&&this.ownerDocument.defaultView?.scrollBy({top:e,behavior:`smooth`}),this.requestUpdate(),this.updateComplete.then(()=>this.renderRoot.querySelector(`.side__search`)?.focus()).catch(()=>void 0)}#z(e=!1){this.#S&&(this.#S=!1,this.requestUpdate(),e||this.updateComplete.then(()=>this.renderRoot.querySelector(`.menu`)?.focus()).catch(()=>void 0))}#B(e){if(e.key!==`Tab`||!this.#S)return;let t=this.renderRoot.querySelector(`.side__panel`);if(!t)return;let n=[...t.querySelectorAll(`a[href], button, input, select, [tabindex="0"]`)].filter(e=>!e.hasAttribute(`disabled`));if(n.length===0)return;let r=n[0],i=n[n.length-1],a=this.renderRoot.activeElement;e.shiftKey&&a===r?(i.focus(),e.preventDefault()):!e.shiftKey&&a===i&&(r.focus(),e.preventDefault())}#V(){let e=this.ownerDocument.defaultView?.location.hash??``;if(!this.#i||e.length<2||e===this.#f)return;let t=decodeURIComponent(e.slice(1));if(!t.startsWith(`${this.id}--`))return;let n=this.renderRoot.getElementById(t)??this.renderRoot.getElementById(`${t}--heading`);n&&(this.#f=e,n instanceof HTMLDetailsElement&&(n.open=!0),n.scrollIntoView({block:`start`}),(n.querySelector(`[tabindex="-1"], summary`)??n).focus({preventScroll:!0}))}#H(){this.#e=Da(this.getAttributeNames().map(e=>[e,this.getAttribute(e)])),this.#j.mode=this.#e.theme,this.requestUpdate(),this.#i&&this.#e.src===this.#n&&this.#q()!==this.#s&&this.#J(),this.#G()}#U(e){this.#l=e,this.updateComplete.then(()=>this.#W()).catch(()=>void 0),this.requestUpdate()}#W(){let e=this.renderRoot,t=e?.querySelector(`.probe`);if(!t)return;let n=e=>(t.style.color=`var(${e})`,bd(getComputedStyle(t).color)),r=n(`--_primary`),i=n(`--_secondary`),a=n(`--_send`),o=n(`--_receive`),s=n(`--_head`),c=this.#l===`dark`,l={};r&&s&&(l[`--_primary-text`]=xd(Td(r,s,c))),i&&s&&(l[`--_secondary-text`]=xd(Td(i,s,c))),a&&(l[`--_badge-ink-send`]=wd(a)),o&&(l[`--_badge-ink-receive`]=wd(o));let u=getComputedStyle(this).getPropertyValue(`--_logo`).trim(),d=u!==``&&u!==`none`,f=e?.querySelector(`.root`);if(f)for(let[e,t]of Object.entries(l))f.style.setProperty(e,t);(d!==this.#d||JSON.stringify(l)!==JSON.stringify(this.#u))&&(this.#d=d,this.#u=l,this.requestUpdate())}async#G(){let e=this.#e.src;if(e===this.#n||(this.#n=e,this.#r=void 0,this.#i=void 0,this.#a=void 0,this.#o=[],this.#c=[],this.#p.clear(),this.#O.clear(),this.#h.clear(),this.#_=``,this.#v=new Set,this.#y=!1,this.#S=!1,this.#C=void 0,this.#g&&URL.revokeObjectURL(this.#g),this.#g=void 0,e===void 0))return;let t=await Ti(wi(e,this.ownerDocument.baseURI));if(this.#n===e){if(this.#r=t,t.ok){this.#g=URL.createObjectURL(new Blob([t.text],{type:t.format===`json`?`application/json`:`application/yaml`}));let n=new Mi(t.url,t.data),r=await n.preload();if(this.#n!==e)return;this.#a=n,this.#o=r,this.#J()}this.requestUpdate(),await this.updateComplete,this.#n===e&&this.#K(t)}}#K(e){let t={bubbles:!0,composed:!0};if(!e.ok)this.dispatchEvent(new CustomEvent(`asyncapi-error`,{...t,detail:{url:e.url,error:e.error}}));else if(this.#i){let n={url:e.url,specVersion:e.specVersion,specMajor:e.specMajor,model:this.#i,problems:this.#c};this.dispatchEvent(new CustomEvent(`asyncapi-load`,{...t,detail:n}))}}#q(){let e=this.#e;return JSON.stringify([e.publishLabel,e.subscribeLabel,e.sendLabel,e.receiveLabel,e.requestLabel,e.replyLabel,e.useChannelAddressAsIdentifier,e.parserOptions.applyTraits])}#J(){let e=this.#r;if(!e?.ok||!this.#a)return;let t=this.#e;this.#s=this.#q(),this.#i=ga({resolver:this.#a,data:e.data,specVersion:e.specVersion,specMajor:e.specMajor,problems:[...this.#o],options:{labels:{publish:t.publishLabel,subscribe:t.subscribeLabel,send:t.sendLabel,receive:t.receiveLabel,request:t.requestLabel,reply:t.replyLabel},useChannelAddressAsIdentifier:t.useChannelAddressAsIdentifier,applyTraits:t.parserOptions.applyTraits}}),this.#c=this.#i.problems}render(){return C`<div class="root">
       <span class="probe visually-hidden" aria-hidden="true"></span>
-      ${this.#U()}
-    </div>`}#U(){let e=this.#e.src;if(e===void 0)return C`<div class="content"><p class="alert" role="alert">This viewer has no <code>src</code> attribute, so there is nothing to show.</p></div>`;let t=this.#r;if(!t)return C`<div class="content"><p class="summary">Loading ${e}…</p></div>`;if(!t.ok)return C`<div class="content">
+      ${this.#Y()}
+    </div>`}#Y(){let e=this.#e.src;if(e===void 0)return C`<div class="content"><p class="alert" role="alert">This viewer has no <code>src</code> attribute, so there is nothing to show.</p></div>`;let t=this.#r;if(!t)return C`<div class="content"><p class="summary">Loading ${e}…</p></div>`;if(!t.ok)return C`<div class="content">
         <p class="alert" role="alert">Could not load <code>${t.url}</code>: ${t.error.message}</p>
-      </div>`;let n=this.#i;if(!n)return C`<div class="content"><p class="summary">Preparing ${e}…</p></div>`;let r=this.#e,i=n.operations,a={prefix:this.id,tree:this.#d,example:this.#E},o=r.sidebar?Zu(n,i,this.id,{info:r.info,servers:r.servers,messages:r.messages,schemas:r.schemas,showServers:r.showServers,showOperations:r.showOperations}):[],s=td(o,this.#m,r.searchKeepSections,this.#h),c=(e,t)=>td(o,e,r.searchKeepSections,t).shown,l=r.sidebar?C`<button
+      </div>`;let n=this.#i;if(!n)return C`<div class="content"><p class="summary">Preparing ${e}…</p></div>`;let r=this.#e,i=n.operations,a={prefix:this.id,tree:this.#m,example:this.#k},o=r.sidebar?Zu(n,i,this.id,{info:r.info,servers:r.servers,messages:r.messages,schemas:r.schemas,showServers:r.showServers,showOperations:r.showOperations}):[],s=td(o,this.#_,r.searchKeepSections,this.#v),c=(e,t)=>td(o,e,r.searchKeepSections,t).shown,l=r.sidebar?C`<button
           class="menu"
           type="button"
           aria-label="Open navigation"
-          aria-expanded=${this.#y?`true`:`false`}
+          aria-expanded=${this.#S?`true`:`false`}
           aria-controls="${this.id}--sidebar"
-          @click=${()=>this.#y?this.#I():this.#F()}
+          @click=${()=>this.#S?this.#z():this.#R()}
         >
           ${gd}
         </button>`:w,u=C`
-      ${Pa({doc:n,src:t.url,downloadHref:this.#p,hasLogo:this.#c,themeToggle:r.themeToggle,resolvedTheme:this.#o,onToggleTheme:()=>this.#O.toggle(),menu:l})}
+      ${Pa({doc:n,src:t.url,downloadHref:this.#g,hasLogo:this.#d,themeToggle:r.themeToggle,resolvedTheme:this.#l,onToggleTheme:()=>this.#j.toggle(),menu:l})}
       <div class="content">
         ${r.info?Zl(n,`${this.id}--info`):w}
         ${r.servers?od(n,this.id):w}
-        ${r.operations?Xu(n,{...a,messageIndex:e=>this.#f.get(e)??0,selectMessage:(e,t)=>{this.#f.set(e,t),this.requestUpdate()}}):w}
+        ${r.operations?Xu(n,{...a,messageIndex:e=>this.#h.get(e)??0,selectMessage:(e,t)=>{this.#h.set(e,t),this.requestUpdate()}}):w}
         ${r.messages?cd(n,a,r.showMessageExamples):w}
         ${r.schemas?ld(n,a):w}
-        ${r.errors?ud(this.#a,this.id):w}
+        ${r.errors?ud(this.#c,this.id):w}
       </div>
     `;return r.sidebar?C`<div
-      class="layout layout--sidebar ${this.#y?`layout--open`:``} ${this.#v?`layout--resizing`:``}"
-      @keydown=${e=>{e.key===`Escape`&&this.#y&&!e.target.classList?.contains(`side__search`)&&(this.#I(),e.preventDefault()),this.#L(e)}}
+      class="layout layout--sidebar ${this.#S?`layout--open`:``} ${this.#x?`layout--resizing`:``}"
+      @keydown=${e=>{e.key===`Escape`&&this.#S&&!e.target.classList?.contains(`side__search`)&&(this.#z(),e.preventDefault()),this.#B(e)}}
     >
-      ${pd({items:o,tags:$u(n,i),selectedTags:this.#h,tagsOpen:this.#g,onTagsToggle:e=>{this.#g=e,this.requestUpdate()},onToggleTag:e=>{let t=new Set(this.#h);t.has(e)?t.delete(e):t.add(e),this.#h=t,this.#P(c(this.#m,t),s.total)},onClearTags:()=>{this.#h=new Set,this.#P(c(this.#m,this.#h),s.total)},query:this.#m,keepSections:r.searchKeepSections,current:this.#b,open:this.#y,liveText:this.#x,onQuery:e=>this.#N(e,c(e,this.#h),s.total),onEscape:()=>this.#I(),onChoose:()=>this.#I(!0),onClose:()=>this.#I(),id:this.id})}
-      ${this.#j()}
-      <div class="main" ?inert=${this.#y}>${u}</div>
+      ${pd({items:o,tags:$u(n,i),selectedTags:this.#v,tagsOpen:this.#y,onTagsToggle:e=>{this.#y=e,this.requestUpdate()},onToggleTag:e=>{let t=new Set(this.#v);t.has(e)?t.delete(e):t.add(e),this.#v=t,this.#L(c(this.#_,t),s.total)},onClearTags:()=>{this.#v=new Set,this.#L(c(this.#_,this.#v),s.total)},query:this.#_,keepSections:r.searchKeepSections,current:this.#C,open:this.#S,liveText:this.#w,onQuery:e=>this.#I(e,c(e,this.#v),s.total),onEscape:()=>this.#z(),onChoose:()=>this.#z(!0),onClose:()=>this.#z(),id:this.id})}
+      ${this.#P()}
+      <div class="main" ?inert=${this.#S}>${u}</div>
     </div>`:C`<div class="layout"><div class="main">${u}</div></div>`}};customElements.get(`asyncapi-viewer`)||customElements.define(`asyncapi-viewer`,Od);var kd=/^[A-Za-z0-9][A-Za-z0-9_.-]*$/,Ad=new Set([`minimum`,`exclusiveMinimum`,`maximum`,`exclusiveMaximum`,`multipleOf`,`minLength`,`maxLength`,`pattern`,`minItems`,`maxItems`,`uniqueItems`,`minProperties`,`maxProperties`]);function jd(e){let t=[],n=e=>t.push(e);Number(e.specVersion.split(`.`)[0])!==e.specMajor&&n(`specMajor ${e.specMajor} does not match specVersion ${e.specVersion}`),e.title||n(`title is empty`),Md(`servers`,e.servers.map(e=>e.anchor),n),Md(`operations`,e.operations.map(e=>e.anchor),n),Md(`messages`,e.messages.map(e=>e.anchor),n),Md(`schemas`,e.schemas.map(e=>e.anchor),n);let r=new Set(e.servers.map(e=>e.id)),i=new Set(e.schemas.map(e=>e.id));for(let t of e.operations){let e=`operation ${t.id}`;t.action===`send`&&t.kind!==`send`&&t.kind!==`request`&&n(`${e}: action send with kind ${t.kind}`),t.action===`receive`&&t.kind!==`receive`&&t.kind!==`reply`&&n(`${e}: action receive with kind ${t.kind}`),(t.kind===`request`||t.kind===`reply`)!=(t.reply!==void 0)&&n(`${e}: kind ${t.kind} but reply is ${t.reply?`present`:`absent`}`),t.badgeLabel||n(`${e}: empty badgeLabel`),t.heading||n(`${e}: empty heading`);for(let i of t.channel.servers)r.has(i)||n(`${e}: channel server "${i}" is not a known server`);for(let r of t.messages)Nd(r,`${e} message ${r.id}`,i,n)}for(let t of e.messages)Nd(t,`message ${t.id}`,i,n);for(let t of e.schemas)t.schema.kind===`node`&&(t.schema.name!==t.id&&n(`schema ${t.id}: root name "${t.schema.name}" should equal its id`),Pd(t.schema,`schema ${t.id}`,[],!0,i,n));return t}function Md(e,t,n){let r=new Set;for(let i of t)kd.test(i)||n(`${e}: anchor "${i}" is not a safe slug`),r.has(i)&&n(`${e}: duplicate anchor "${i}"`),r.add(i)}function Nd(e,t,n,r){e.contentType||r(`${t}: empty contentType`),e.schemaFormat||r(`${t}: empty schemaFormat`);for(let[i,a]of[[`payload`,e.payload],[`headers`,e.headers]])a&&a.kind===`node`&&(a.name!==``&&r(`${t} ${i}: root name should be "" but is "${a.name}"`),Pd(a,`${t} ${i}`,[],!0,n,r))}function Pd(e,t,n,r,i,a){let o=`${t} › ${e.name||`(root)`}`;r&&e.required&&a(`${o}: root nodes are never required`),Fd(e.path,n)||a(`${o}: path [${e.path}] should be [${n}]`);for(let t of e.constraints)Ad.has(t.key)||a(`${o}: unknown constraint ${t.key}`);e.circularRef!==void 0&&e.children.length>0&&a(`${o}: circular reference with children`),e.refName!==void 0&&i.size>0&&!i.has(e.refName)&&a(`${o}: refName "${e.refName}" is not a component schema`);let s=e.types.includes(`array`),c=e.children.filter(e=>e.name===`[]`);c.length>1&&a(`${o}: more than one "[]" item node`),c.length===1&&!s&&a(`${o}: "[]" item node on a non-array`),c.length===1&&e.children.length!==1&&a(`${o}: array with properties besides "[]"`);let l=r?[]:e.name===`[]`?[...n.slice(0,-1),`${n[n.length-1]??``}[]`]:[...n,e.name];for(let n of e.children)Pd(n,t,l,!1,i,a);e.composition&&e.composition.variants.forEach((e,t)=>{e.title||a(`${o}: variant ${t+1} has no title`),Pd(e.node,`${o} variant ${t+1}`,n,r,i,a)})}function Fd(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}return e.AsyncAPIViewerElement=Od,e.DEFAULTS=ya,e.OPTION_SPECS=va,e.RefResolver=Mi,e.checkDocument=jd,e.isRef=Ai,e.loadDocument=Ti,e.normalize=ga,e.parseOptions=Da,e.parseText=Ei,e.resolveUrl=wi,e.schemaNameOf=ji,e.toAttributeName=Ta,e})({});
 //# sourceMappingURL=asyncapi-viewer.iife.js.map