@redocly/asyncapi-docs 0.5.0-next.4 → 0.5.0-next.5

package/lib/RedoclyAsyncAPIDocs.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { LayoutVariant } from '@redocly/theme';
+import type { AsyncApiDefinition, ApiItem, ProtocolVariant, DownloadUrls } from './types';
+type RedoclyAsyncAPIDocsProps = {
+    pageProps: {
+        apiOptions: {
+            layout: LayoutVariant;
+        };
+    };
+    document: AsyncApiDefinition;
+    apiItems: ApiItem[];
+    routingBasePath: string;
+    protocol: ProtocolVariant;
+    downloadUrls: DownloadUrls[];
+    markdocOptions: any;
+};
+export declare const RedoclyAsyncAPIDocs: React.MemoExoticComponent<({ pageProps, document, apiItems, routingBasePath, protocol, downloadUrls, markdocOptions, }: RedoclyAsyncAPIDocsProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/RedoclyAsyncAPIDocs.js

@@ -0,0 +1 @@
+"use strict";var v=exports&&exports.__createBinding||(Object.create?function(e,t,r,i){i===void 0&&(i=r);var s=Object.getOwnPropertyDescriptor(t,r);(!s||("get"in s?!t.__esModule:s.writable||s.configurable))&&(s={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,s)}:function(e,t,r,i){i===void 0&&(i=r),e[i]=t[r]}),h=exports&&exports.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),m=exports&&exports.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(e!=null)for(var r in e)r!=="default"&&Object.prototype.hasOwnProperty.call(e,r)&&v(t,e,r);return h(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.RedoclyAsyncAPIDocs=void 0;const c=require("react/jsx-runtime"),f=require("@redocly/theme"),_=m(require("react")),d=require("./jotai-store/Provider"),p=require("./components/AsyncApiDocs"),y=require("./components/Breadcrumbs"),D=require("./components/AppRouter"),b=require("./hooks");exports.RedoclyAsyncAPIDocs=_.default.memo(({pageProps:e,document:t,apiItems:r,routingBasePath:i,protocol:s,downloadUrls:u,markdocOptions:o})=>{const a=(0,b.useTelemetry)(),l=(0,_.useMemo)(()=>({layout:e.apiOptions.layout,protocol:s,routingBasePath:i,downloadUrls:u,definition:t,markdocOptions:o}),[e.apiOptions.layout,s,i,u,t,o]);return(0,b.usePerformanceMetrics)({sendTelemetry:j=>{const n=Object.fromEntries(Object.entries(j).map(([A,O])=>[A.toLowerCase(),O]));a.send({type:"asyncapi_docs.performance_metrics",payload:{cls:n.cls,lcp:n.lcp,fcp:n.fcp,ttfb:n.ttfb}})}}),(0,f.useMount)(()=>{a.send({type:"asyncapi_docs.viewed",payload:{layout:e.apiOptions.layout}})}),f.IS_BROWSER?(0,c.jsx)(d.AppProvider,{store:l,children:(0,c.jsxs)(D.AppRouter,{children:[(0,c.jsx)(y.Breadcrumbs,{}),(0,c.jsx)(p.AsyncApiDocs,{apiItems:r})]})}):(0,c.jsxs)(d.AppProvider,{store:l,children:[(0,c.jsx)(y.Breadcrumbs,{}),(0,c.jsx)(p.AsyncApiDocs,{apiItems:r})]})});

package/lib/components/ApiInfo.d.ts

@@ -0,0 +1 @@
+export declare const ApiInfo: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/ApiInfo.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ApiInfo=void 0;const o=require("react/jsx-runtime"),t=require("jotai"),n=require("@redocly/openapi-docs"),s=require("./common"),i=require("../jotai-store/app"),u=()=>{const e=(0,t.useAtomValue)(i.definitionAtom),c=(0,t.useAtomValue)(i.routingBasePathAtom),a=(0,t.useAtomValue)(i.markdocOptionsAtom),r=(0,n.saveTextBeforeHeading)((0,n.getValueFromMdParsedExtension)(e.info,"description")||"");return(0,o.jsxs)(n.Section,{sectionId:c,children:[(0,o.jsxs)(s.ApiHeader,{children:[e.info.title," ",e.info.version]}),r&&(0,o.jsx)(n.Markdown,{source:r,markdocOptions:a}),e.info.externalDocs&&(0,o.jsx)(s.ExternalDocumentationWrapper,{children:(0,o.jsx)(n.ExternalDocumentation,{externalDocs:e.info.externalDocs})})]})};exports.ApiInfo=u;

package/lib/components/AppRouter.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface AppRouterProps {
+    children: React.ReactNode;
+}
+export declare const AppRouter: React.MemoExoticComponent<({ children }: AppRouterProps) => import("react/jsx-runtime").JSX.Element>;

package/lib/components/AppRouter.js

@@ -0,0 +1 @@
+"use strict";var u=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppRouter=void 0;const t=require("react/jsx-runtime"),o=u(require("react")),r=require("react-router-dom");exports.AppRouter=o.default.memo(({children:e})=>(0,r.useInRouterContext)()?(0,t.jsx)(t.Fragment,{children:e}):(0,t.jsx)(r.BrowserRouter,{children:e}));

package/lib/components/AsyncApiDocs.d.ts

@@ -0,0 +1,6 @@
+import type { ApiItemsGroup, ApiItem } from '../types';
+type AsyncApiDocsProps = {
+    apiItems: (ApiItemsGroup | ApiItem)[];
+};
+export declare const AsyncApiDocs: import("react").MemoExoticComponent<({ apiItems }: AsyncApiDocsProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/components/AsyncApiDocs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AsyncApiDocs=void 0;const n=require("react/jsx-runtime"),o=require("jotai"),i=require("react"),d=require("@redocly/theme"),p=require("./RightPanel"),_=require("./TagBlock"),h=require("./ApiInfo"),A=require("./ChannelSection"),q=require("./MarkdownSection"),f=require("./common"),r=require("../jotai-store/app"),j=require("../hooks");exports.AsyncApiDocs=(0,i.memo)(({apiItems:t})=>{const c=(0,o.useAtomValue)(r.routingBasePathAtom),s=(0,o.useAtomValue)(r.definitionAtom);(0,j.useAutoScroll)(c);const u=(0,o.useAtomValue)(r.layoutAtom),a=(0,i.useCallback)(e=>e?.type==="tag"?(0,n.jsx)(_.TagBlock,{tag:e},e.link):e?.type==="channel"?(0,n.jsx)(A.ChannelSection,{item:e},e.link):null,[]);return(0,n.jsxs)(d.ThreePanelLayout,{className:"api-content",id:"api-content",layout:u,collapsedSidebar:!0,children:[(0,n.jsxs)(f.SectionWrapper,{rightPanel:(0,n.jsx)(p.RightPanel,{info:s.info,servers:s.servers}),children:[(0,n.jsx)(h.ApiInfo,{}),t.filter(({type:e})=>e==="markdown").map((e,l)=>(0,n.jsx)(q.MarkdownSection,{item:e},l))]}),t.map(a)]})});

package/lib/components/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Breadcrumbs: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/lib/components/Breadcrumbs.js

@@ -0,0 +1,7 @@
+"use strict";var r=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Breadcrumbs=void 0;const t=require("react/jsx-runtime"),a=r(require("react")),i=r(require("styled-components")),n=require("@redocly/theme");exports.Breadcrumbs=a.default.memo(()=>(0,t.jsx)(u,{children:(0,t.jsx)(n.Breadcrumbs,{})}));const u=i.default.div`
+  padding-top: var(--panel-gap-vertical);
+  padding-bottom: var(--panel-gap-vertical);
+  padding-left: calc(var(--panel-gap-horizontal) * 2);
+  padding-right: var(--panel-gap-horizontal);
+  height: var(--navbar-height);
+`;

package/lib/components/ChannelBinding.d.ts

@@ -0,0 +1,9 @@
+import type { AsyncApiChannelKafkaBinding } from '../types';
+type ChannelBindingProps = {
+    binding: {
+        key: string;
+        value: AsyncApiChannelKafkaBinding;
+    };
+};
+export declare const ChannelBinding: ({ binding }: ChannelBindingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ChannelBinding.js

@@ -0,0 +1 @@
+"use strict";var p=exports&&exports.__rest||function(o,s){var a={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&s.indexOf(t)<0&&(a[t]=o[t]);if(o!=null&&typeof Object.getOwnPropertySymbols=="function")for(var r=0,t=Object.getOwnPropertySymbols(o);r<t.length;r++)s.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(o,t[r])&&(a[t[r]]=o[t[r]]);return a};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ChannelBinding=void 0;const n=require("react/jsx-runtime"),h=require("react"),u=require("@redocly/theme"),i=require("./common"),j=require("../hooks"),g=({binding:o})=>{const[s,a]=(0,h.useState)(!1),{getProtocolLabel:t}=(0,j.useProtocolLabels)({amqp:Object.assign({},o.value||{})}),r=()=>{a(!s)},c=({key:l,value:e})=>{const{bindingVersion:f}=e,d=p(e,["bindingVersion"]);switch(l){case"kafka":return(0,n.jsxs)(n.Fragment,{children:[e.topic&&(0,n.jsxs)(i.HeaderWrapper,{children:[(0,n.jsx)("span",{"data-testid":"topic-label",children:"Topic"}),(0,n.jsx)("span",{children:(0,n.jsx)(i.TagStyled,{borderless:!0,"data-testid":"topic-value",children:e.topic})})]}),e.partitions&&(0,n.jsxs)(i.HeaderWrapper,{children:[(0,n.jsx)("span",{"data-testid":"partitions-label",children:"Partitions"}),(0,n.jsx)("span",{children:(0,n.jsx)(i.TagStyled,{borderless:!0,color:"blue","data-testid":"partitions-value",children:e.partitions})})]}),e.replicas&&(0,n.jsxs)(i.HeaderWrapper,{children:[(0,n.jsx)("span",{"data-testid":"replicas-label",children:"Replicas"}),(0,n.jsx)("span",{children:(0,n.jsx)(i.TagStyled,{borderless:!0,color:"green","data-testid":"replicas-value",children:e.replicas})})]}),e.topicConfiguration&&(0,n.jsxs)("div",{children:[(0,n.jsx)(i.HeaderWrapper,{expandable:!0,onClick:r,children:(0,n.jsx)(i.MoreDetailsButton,{expanded:s})}),s&&(0,n.jsxs)(i.TopicConfigurationWrapper,{children:[e.topicConfiguration["cleanup.policy"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"\u0421leanup policy"}),(0,n.jsx)("span",{children:e.topicConfiguration["cleanup.policy"].join(", ")})]}),e.topicConfiguration["retention.ms"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Retention, ms"}),(0,n.jsx)("span",{children:e.topicConfiguration["retention.ms"]})]}),e.topicConfiguration["retention.bytes"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Retention, bytes"}),(0,n.jsx)("span",{children:e.topicConfiguration["retention.bytes"]})]}),e.topicConfiguration["delete.retention.ms"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Delete retention, ms"}),(0,n.jsx)("span",{children:e.topicConfiguration["delete.retention.ms"]})]}),e.topicConfiguration["max.message.bytes"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Max message bytes"}),(0,n.jsx)("span",{children:e.topicConfiguration["max.message.bytes"]})]}),e.topicConfiguration["confluent.key.schema.validation"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Confluent key schema validation"}),(0,n.jsx)("span",{children:String(e.topicConfiguration["confluent.key.schema.validation"])})]}),e.topicConfiguration["confluent.key.subject.name.strategy"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Confluent key subject name strategy"}),(0,n.jsx)("span",{children:e.topicConfiguration["confluent.key.subject.name.strategy"]})]}),e.topicConfiguration["confluent.value.schema.validation"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Confluent value schema validation"}),(0,n.jsx)("span",{children:String(e.topicConfiguration["confluent.value.schema.validation"])})]}),e.topicConfiguration["confluent.value.subject.name.strategy"]&&(0,n.jsxs)(i.TopicConfiguration,{children:[(0,n.jsx)("span",{children:"Confluent value subject name strategy"}),(0,n.jsx)("span",{children:e.topicConfiguration["confluent.value.subject.name.strategy"]})]})]})]})]});default:return(0,n.jsx)(u.JsonViewer,{data:d,expandLevel:3,hideHeader:!0})}};return(0,n.jsx)(i.BindingPanel,{header:t("channelBinding"),children:c(o)})};exports.ChannelBinding=g;

package/lib/components/ChannelLinkItem.d.ts

@@ -0,0 +1,7 @@
+import type { ChannelWithKey } from '../types';
+type ChannelLinkItemProps = {
+    channel: ChannelWithKey;
+    isActive: boolean;
+};
+export declare const ChannelLinkItem: ({ channel, isActive }: ChannelLinkItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ChannelLinkItem.js

@@ -0,0 +1,22 @@
+"use strict";var o=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ChannelLinkItem=void 0;const r=require("react/jsx-runtime"),a=require("react"),s=require("react-router-dom"),i=o(require("styled-components")),l=require("../utils"),c=require("./common/ListIcon"),d=({channel:e,isActive:t})=>{const n=(0,a.useMemo)(()=>(0,l.generateChannelLink)(e),[e]);return(0,r.jsxs)(u,{children:[(0,r.jsx)(c.ListIcon,{size:"22px",color:t?"var(--color-info-border)":"var(--border-color-primary)",style:{marginRight:"var(--spacing-xs)",flexShrink:0}}),(0,r.jsx)(v,{to:n,children:e.title||e.address||e.key})]})};exports.ChannelLinkItem=d;const u=i.default.div`
+  padding: var(--spacing-xxs) var(--spacing-md);
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-md);
+  cursor: pointer;
+`,v=(0,i.default)(s.Link)`
+  text-decoration: var(--link-decoration);
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+  font-size: var(--font-size-base);
+
+  &:visited {
+    color: var(--link-color-visited);
+    text-decoration: var(--link-visited-decoration);
+  }
+
+  &:hover {
+    color: var(--link-color-primary-hover);
+    text-decoration: var(--link-decoration-hover);
+  }
+`;

package/lib/components/ChannelParameters.d.ts

@@ -0,0 +1,7 @@
+import type { AsyncApiParameters } from '../types';
+type ChannelParametersProps = {
+    parameters: AsyncApiParameters;
+    id: string;
+};
+export declare const ChannelParameters: ({ parameters, id }: ChannelParametersProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ChannelParameters.js

@@ -0,0 +1,10 @@
+"use strict";var u=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ChannelParameters=void 0;const t=require("react/jsx-runtime"),r=require("@redocly/theme"),m=u(require("styled-components")),l=require("jotai"),o=require("@redocly/openapi-docs"),_=require("./JsonSchema"),p=require("../jotai-store/app"),h=require("./common"),j=({parameters:e,id:s})=>{const n=(0,l.useAtomValue)(p.routingBasePathAtom);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(b,{children:[(0,t.jsx)(h.LinkToField,{to:(0,r.combineUrls)(n,(0,o.makeDeepLink)(s,"parameters"))}),"Parameters"]}),Object.entries(e).map(([i,a])=>{const c={type:"object",properties:{[i]:Object.assign(Object.assign({},a),{type:a.location||""})}};return(0,t.jsx)(_.JsonSchema,{schema:c,slug:(0,r.combineUrls)(n,(0,o.makeDeepLink)(s,"parameters"))},i)})]})};exports.ChannelParameters=j;const b=(0,m.default)(r.H4)`
+  margin: var(--spacing-md) 0 0 0;
+  position: relative;
+  :hover {
+    ${r.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;

package/lib/components/ChannelSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ApiItem } from '../types';
+type ChannelSectionProps = {
+    item: ApiItem;
+};
+export declare const ChannelSection: React.MemoExoticComponent<({ item }: ChannelSectionProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/lib/components/ChannelSection.js

@@ -0,0 +1,24 @@
+"use strict";var P=exports&&exports.__createBinding||(Object.create?function(n,t,o,l){l===void 0&&(l=o);var a=Object.getOwnPropertyDescriptor(t,o);(!a||("get"in a?!t.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(n,l,a)}:function(n,t,o,l){l===void 0&&(l=o),n[l]=t[o]}),q=exports&&exports.__setModuleDefault||(Object.create?function(n,t){Object.defineProperty(n,"default",{enumerable:!0,value:t})}:function(n,t){n.default=t}),C=exports&&exports.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(n!=null)for(var o in n)o!=="default"&&Object.prototype.hasOwnProperty.call(n,o)&&P(t,n,o);return q(t,n),t},w=exports&&exports.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ChannelSection=void 0;const i=require("react/jsx-runtime"),d=C(require("react")),h=w(require("styled-components")),m=require("jotai"),c=require("@redocly/openapi-docs"),u=require("@redocly/theme"),b=require("../jotai-store/app"),g=require("./common"),A=require("./ChannelParameters"),D=require("./ServersListPanel"),L=require("./ChannelBinding"),B=require("./MessageSection"),y=require("./OperationSection"),I=require("../hooks");exports.ChannelSection=d.default.memo(({item:n})=>{var t;const o=(0,m.useAtomValue)(b.layoutAtom),l=(0,m.useAtomValue)(b.routingBasePathAtom),a=(0,m.useAtomValue)(b.definitionAtom),v=o===u.LayoutVariant.STACKED,e=(t=a.channels)===null||t===void 0?void 0:t[n.id],{getProtocolLabel:j}=(0,I.useProtocolLabels)(e?.bindings),p=(0,d.useMemo)(()=>Object.entries(a.servers||{}).map(([r,s])=>({key:r,value:s})).filter(({value:r})=>{var s;return(s=e?.servers)===null||s===void 0?void 0:s.some(M=>M.host===r.host)}),[e?.servers,a.servers]),x=(0,d.useMemo)(()=>Object.entries(e?.bindings||{}).map(([r,s])=>({key:r,value:s})),[e?.bindings]),S=(0,d.useMemo)(()=>Object.entries(e?.messages||{}).map(([r,s])=>({key:r,value:s})),[e?.messages]),_=(0,d.useMemo)(()=>n.items.filter(r=>{var s;return r.action==="send"&&((s=a.operations)===null||s===void 0?void 0:s[r.id])}),[a.operations,n.items]),f=(0,d.useMemo)(()=>n.items.filter(r=>{var s;return r.action==="receive"&&((s=a.operations)===null||s===void 0?void 0:s[r.id])}),[a.operations,n.items]),O=(0,d.useMemo)(()=>{var r;return(r=e?.["x-badges"])===null||r===void 0?void 0:r.map(s=>Object.assign(Object.assign({},s),{position:s.position||"after"}))},[e]);return e?(0,i.jsxs)(k,{children:[(0,i.jsxs)(V,{sectionId:(0,u.combineUrls)(l,n.dataSectionId),children:[(0,i.jsx)(c.Row,{layout:o,children:(0,i.jsx)(c.SamplesMiddlePanel,{compact:!0,className:"api-info",isStacked:v,children:(0,i.jsx)(g.ActionTag,{color:j("channel").toLowerCase(),children:j("channel")})})}),(0,i.jsxs)(c.Row,{layout:o,children:[(0,i.jsxs)(c.SamplesMiddlePanel,{compact:!0,className:"api-info",isStacked:v,children:[(0,i.jsxs)(H,{children:[(0,i.jsx)(c.CustomBadges,{badges:O,children:e?.title||e?.address||n.id}),(0,i.jsx)(g.ShareLink,{to:(0,u.combineUrls)(l,n.dataSectionId),"aria-label":`link to ${n.label}`})]}),e.address&&(0,i.jsxs)(g.TagWithIcon,{icon:(0,i.jsx)(u.CurveAutoColonIcon,{size:"14px"}),children:["name: ",(0,i.jsx)("span",{children:e.address})]}),(0,i.jsx)(g.Information,{summary:e.summary,description:e.description,externalDocs:e.externalDocs}),e.parameters&&(0,i.jsx)(A.ChannelParameters,{parameters:e.parameters,id:n.link})]}),(0,i.jsxs)(c.OperationSamplesPanel,{isStacked:v,className:"panel-container-response-samples",children:[!!p?.length&&(0,i.jsx)(D.ServersListPanel,{servers:p,hideHeader:!0}),!!x.length&&(0,i.jsx)(L.ChannelBinding,{binding:x[0]})]})]}),S.length>0?(0,i.jsx)(B.MessageSection,{messages:S,id:n.link}):null]}),_.length>0?(0,i.jsx)(y.OperationSection,{operations:_,type:"send",id:n.link}):null,f.length>0&&_.length>0?(0,i.jsx)(c.Row,{layout:o,children:(0,i.jsx)(c.SamplesMiddlePanel,{isStacked:v,children:(0,i.jsx)(N,{})})}):null,f.length>0?(0,i.jsx)(y.OperationSection,{operations:f,type:"receive",id:n.link}):null]}):null});const k=h.default.div`
+  width: 100%;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--border-color-primary);
+  }
+`,V=(0,h.default)(c.Section)`
+  padding: var(--spacing-xxl) 0 var(--spacing-base);
+  scroll-margin-top: calc(var(--navbar-height) - var(--spacing-base)) !important;
+`,H=(0,h.default)(u.H2)`
+  margin: 0 0 var(--spacing-xs) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+  :hover {
+    ${u.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`,N=h.default.div`
+  border-bottom: 1px solid var(--border-color-secondary);
+`;

package/lib/components/DownloadSpecification.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+declare function DownloadSpecificationComponent(): ReactElement;
+export declare const DownloadSpecification: import("react").MemoExoticComponent<typeof DownloadSpecificationComponent>;
+export {};

package/lib/components/DownloadSpecification.js

@@ -0,0 +1,39 @@
+"use strict";var d=exports&&exports.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DownloadSpecification=void 0;const e=require("react/jsx-runtime"),i=require("react"),r=d(require("styled-components")),t=require("@redocly/theme"),u=require("@redocly/openapi-docs"),p=require("jotai"),f=require("../jotai-store/app");function m(){const o=(0,p.useAtomValue)(f.downloadUrlsAtom),a=(0,u.useDownloadInfo)({downloadUrls:o}),l=(0,i.useCallback)(n=>{switch(n){case"yaml":return(0,e.jsx)(t.DocumentIcon,{});case"json":return(0,e.jsx)(t.JsonIcon,{});default:return(0,e.jsx)(t.FileIcon,{})}},[]);return a?(0,e.jsx)(_,{children:(a||[]).map(({title:n,url:s,iconType:c})=>(0,e.jsxs)(x,{children:[(0,e.jsxs)(w,{children:[l(c),(0,e.jsx)("a",{href:s,target:"_blank",download:!0,rel:"noreferrer",children:n})]}),(0,e.jsx)("a",{href:s,target:"_blank",download:!0,rel:"noreferrer",children:(0,e.jsx)(t.Button,{variant:"text",size:"small",icon:(0,e.jsx)(t.DownloadIcon,{})})})]},n))}):(0,e.jsx)(e.Fragment,{})}exports.DownloadSpecification=(0,i.memo)(m);const x=r.default.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+
+  border-bottom: 1px solid var(--border-color-secondary);
+  padding-bottom: var(--spacing-sm);
+  :last-of-type {
+    padding-bottom: 0px;
+    border-bottom: none;
+  }
+`,w=r.default.span`
+  display: flex;
+  width: calc(100% - 25px);
+  gap: var(--spacing-xs);
+  align-items: center;
+
+  svg {
+    flex-shrink: 0;
+  }
+  a {
+    width: 100%;
+    color: var(--text-color-primary);
+    word-break: break-word;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`,_=r.default.div`
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  justify-content: space-between;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-base);
+`;

package/lib/components/ItemsNavigation.d.ts

@@ -0,0 +1,7 @@
+import type { ApiItem } from '../types';
+type ItemsNavigationProps = {
+    items?: ApiItem[];
+    firstChannelBinding?: Record<string, any>;
+};
+export declare const ItemsNavigation: ({ items, firstChannelBinding }: ItemsNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ItemsNavigation.js

@@ -0,0 +1,45 @@
+"use strict";var k=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ItemsNavigation=void 0;const n=require("react/jsx-runtime"),o=k(require("styled-components")),I=require("react-router-dom"),A=require("@redocly/openapi-docs"),p=require("@redocly/theme"),v=require("jotai/index"),f=require("react"),g=require("../jotai-store/app"),S=require("./common"),z=require("../hooks"),u=8,P=({items:e,firstChannelBinding:_})=>{const[a,x]=(0,f.useState)(!1),{getProtocolLabel:r}=(0,z.useProtocolLabels)(_),b=(0,I.useNavigate)(),y=(0,v.useAtomValue)(g.layoutAtom),d=(0,v.useAtomValue)(g.definitionAtom),w=y===p.LayoutVariant.STACKED,{displayItems:j,count:h}=(0,f.useMemo)(()=>{const t=e?.filter(i=>{var c;return i.type==="channel"&&((c=d.channels)===null||c===void 0?void 0:c[i.id])})||[],s=a?t:t.slice(0,u),l=!a&&t.length>u?t.length-u:0;return{displayItems:s,count:l}},[e,a,d.channels]),q=t=>{b(t)};return(0,n.jsxs)(C,{isStacked:w,children:[(0,n.jsx)(L,{children:r("channels")}),j.map(({id:t,type:s,label:l,link:i})=>s==="channel"?(0,n.jsx)(N,{variant:"outlined",size:"large",onClick:()=>q(i),children:(0,n.jsxs)("span",{children:[(0,n.jsx)(S.ActionTag,{color:r("channel").toLowerCase(),children:r("channel")}),(0,n.jsx)(E,{children:l})]})},t):null),!a&&!!h&&(0,n.jsxs)(m,{variant:"link",size:"large","data-testid":"show-more-operations",fullWidth:!0,onClick:()=>x(!0),children:["Show ",h," more..."]})]})};exports.ItemsNavigation=P;const C=(0,o.default)(A.SamplesPanel)`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+  padding-top: var(--spacing-xxl);
+`,m=(0,o.default)(p.Button)`
+  & + & {
+    margin-left: 0;
+  }
+`,N=(0,o.default)(m)`
+  border-radius: var(--border-radius);
+  background: var(--bg-color);
+  justify-content: space-between;
+
+  & > span {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-unit);
+    overflow-x: hidden;
+  }
+
+  &:hover {
+    background: var(--bg-color);
+  }
+
+  &:hover::after {
+    content: '→';
+    line-height: var(--line-height-base);
+  }
+`,E=o.default.span`
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color-primary);
+  text-decoration: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+`,L=o.default.span`
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-color-primary);
+  margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
+`;

package/lib/components/JsonSchema.d.ts

@@ -0,0 +1,11 @@
+import type { OpenAPIDefinition, OpenAPISchema, OneOfChangeParams } from '@redocly/openapi-docs';
+interface JsonSchemaProps {
+    options?: Record<string, unknown>;
+    schemaResolved?: OpenAPIDefinition;
+    schemaResolvedErrors?: string[];
+    schema?: OpenAPISchema;
+    slug?: string;
+    onOneOfChange?: ({ pointer, index }: OneOfChangeParams) => void;
+}
+export declare function JsonSchema({ options, schemaResolved, schema, slug, onOneOfChange, }: JsonSchemaProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/JsonSchema.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.JsonSchema=l;const e=require("react/jsx-runtime"),s=require("@redocly/openapi-docs");function l({options:u,schemaResolved:n,schema:r,slug:c,onOneOfChange:d}){var o,i,t;if(!r&&!n)return null;const p={openapi:"3.0.0",info:{version:"1",description:"test",title:"test"},paths:{},"x-root":((i=(o=n?.components)===null||o===void 0?void 0:o.schemas)===null||i===void 0?void 0:i.__root)||r,components:{schemas:Object.assign({},(t=n?.components)===null||t===void 0?void 0:t.schemas)}};return(0,e.jsx)(s.StoreProvider,{options:u,definition:p,children:(0,e.jsx)(s.RedocSchema,{pointer:"#/x-root",slug:c,onOneOfChange:d})})}

package/lib/components/MarkdownSection.d.ts

@@ -0,0 +1,6 @@
+import type { ApiItem, ApiItemsGroup } from '../types';
+type MarkdownSectionProps = {
+    item: ApiItem | ApiItemsGroup;
+};
+export declare const MarkdownSection: ({ item }: MarkdownSectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/MarkdownSection.js

@@ -0,0 +1,3 @@
+"use strict";var m=exports&&exports.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MarkdownSection=void 0;const e=require("react/jsx-runtime"),a=require("jotai"),p=m(require("styled-components")),o=require("@redocly/openapi-docs"),i=require("@redocly/theme"),c=require("../utils"),u=require("../jotai-store/app"),h=({item:t})=>{const r=(0,a.useAtomValue)(u.markdocOptionsAtom),s=(0,a.useAtomValue)(u.routingBasePathAtom),l=(0,c.generateAst)(t.ast);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(d,{sectionId:(0,i.combineUrls)(s,t.dataSectionId),children:(0,e.jsx)(o.Markdown,{ast:l,markdocOptions:r})}),t.items.map(n=>{const _=(0,c.generateAst)(n.ast);return(0,e.jsx)(d,{sectionId:(0,i.combineUrls)(s,n.dataSectionId),children:(0,e.jsx)(o.Markdown,{ast:_,markdocOptions:r})},n.link)})]})};exports.MarkdownSection=h;const d=(0,p.default)(o.Section)`
+  scroll-margin-top: calc(var(--navbar-height)) !important;
+`;

package/lib/components/Message.d.ts

@@ -0,0 +1,10 @@
+import type { OneOfChangeParams } from '@redocly/openapi-docs';
+import type { AsyncApiMessage } from '../types';
+type MessageProps = {
+    message: AsyncApiMessage;
+    sectionId: string;
+    id: string;
+    onOneOfChange: ({ pointer, index }: OneOfChangeParams) => void;
+};
+export declare const Message: import("react").MemoExoticComponent<({ message, sectionId, id, onOneOfChange }: MessageProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/components/Message.js

@@ -0,0 +1,18 @@
+"use strict";var _=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Message=void 0;const t=require("react/jsx-runtime"),d=require("react"),c=_(require("styled-components")),r=require("@redocly/theme"),g=require("jotai"),a=require("@redocly/openapi-docs"),i=require("./common"),l=require("./JsonSchema"),m=require("../utils"),f=require("../hooks"),y=require("../jotai-store/app");exports.Message=(0,d.memo)(({message:e,sectionId:n,id:o,onOneOfChange:h})=>{const s=(0,g.useAtomValue)(y.routingBasePathAtom),{getProtocolLabel:p}=(0,f.useProtocolLabels)();return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.Information,{summary:e.summary,description:e.description,externalDocs:e.externalDocs}),e.headers&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(u,{children:[(0,t.jsx)(i.LinkToField,{to:(0,r.combineUrls)(s,(0,a.makeDeepLink)(n,`messages&m=${o}/headers`))}),"Headers"]}),(0,t.jsx)(l.JsonSchema,{schema:(0,m.getSchema)(e.headers),slug:(0,r.combineUrls)(s,(0,a.makeDeepLink)(n,`messages&m=${o}&t=headers`))})]}),e.payload&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(u,{children:[(0,t.jsx)(i.LinkToField,{to:(0,r.combineUrls)(s,(0,a.makeDeepLink)(n,`messages&m=${o}/payload`))}),p("payload"),e.contentType&&(0,t.jsx)(x,{children:e.contentType})]}),(0,t.jsx)(l.JsonSchema,{onOneOfChange:h,schema:(0,m.getSchema)(e.payload),slug:(0,r.combineUrls)(s,(0,a.makeDeepLink)(n,`messages&m=${o}&t=payload`))})]})]})});const u=(0,c.default)(r.H4)`
+  margin: var(--spacing-md) 0 0 0;
+  font-size: 18px;
+  position: relative;
+  :hover {
+    ${r.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`,x=c.default.span`
+  margin: 0px var(--spacing-xs);
+  color: var(--text-color-primary);
+  line-height: var(--line-height-lg);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+`;

package/lib/components/MessageAMQPReferences.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type MessageAMQPReferencesProps = {
+    messageKey: string;
+};
+export declare const MessageAMQPReferences: React.MemoExoticComponent<({ messageKey }: MessageAMQPReferencesProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/components/MessageAMQPReferences.js

@@ -0,0 +1,25 @@
+"use strict";var m=exports&&exports.__createBinding||(Object.create?function(e,n,s,a){a===void 0&&(a=s);var t=Object.getOwnPropertyDescriptor(n,s);(!t||("get"in t?!n.__esModule:t.writable||t.configurable))&&(t={enumerable:!0,get:function(){return n[s]}}),Object.defineProperty(e,a,t)}:function(e,n,s,a){a===void 0&&(a=s),e[a]=n[s]}),j=exports&&exports.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),y=exports&&exports.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var s in e)s!=="default"&&Object.prototype.hasOwnProperty.call(e,s)&&m(n,e,s);return j(n,e),n},b=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MessageAMQPReferences=void 0;const r=require("react/jsx-runtime"),d=y(require("react")),M=require("react-router-dom"),c=require("@redocly/theme"),x=require("jotai"),g=b(require("styled-components")),q=require("@redocly/openapi-docs"),P=require("../utils"),h=require("./ChannelLinkItem"),O=require("./../jotai-store/app");exports.MessageAMQPReferences=d.default.memo(({messageKey:e})=>{const n=(0,x.useAtomValue)(O.definitionAtom),s=(0,M.useLocation)(),a=(0,c.useActiveSectionId)(s,!0),t=(0,d.useMemo)(()=>{var i,l;const u={exchanges:[],queues:[]};if(!n.channels)return u;for(const[v,o]of Object.entries(n.channels))if(o.messages&&o.messages[e]){const f=Object.assign(Object.assign({},o),{key:v});((l=(i=o.bindings)===null||i===void 0?void 0:i.amqp)===null||l===void 0?void 0:l.is)==="routingKey"?u.exchanges.push(f):u.queues.push(f)}return u},[e,n]),p=(0,d.useMemo)(()=>(0,P.generateMessageReferencesHeader)(t),[t]);return(0,r.jsxs)(A,{className:"panel-messages-samples",header:()=>(0,r.jsx)(c.PanelHeader,{isExpandable:!1,children:p}),"data-component-name":"MessageAMQPReferences/MessageAMQPReferences",children:[!!t.exchanges.length&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(_,{children:"Exchanges"}),t.exchanges.map(i=>(0,r.jsx)(h.ChannelLinkItem,{channel:i,isActive:a.endsWith(i.key)},i.key))]}),!!t.queues.length&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(_,{children:"Queues"}),t.queues.map(i=>(0,r.jsx)(h.ChannelLinkItem,{channel:i,isActive:a.endsWith(i.key)},i.key))]})]})});const _=(0,g.default)(c.Typography)`
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-xxs) var(--spacing-md);
+`,A=(0,g.default)(c.Panel)`
+  ${c.PanelBody} {
+    background-color: var(--layer-color-ontonal);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: 206px;
+    overflow-y: scroll;
+  }
+
+  ${c.PanelHeader} {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  ${q.SamplesMiddlePanel} {
+    padding: 0 var(--spacing-md);
+  }
+`;

package/lib/components/MessageBinding.d.ts

@@ -0,0 +1,10 @@
+import type { AsyncApiMessageKafkaBinding } from '../types';
+type MessageBindingProps = {
+    binding: {
+        key: string;
+        value: AsyncApiMessageKafkaBinding;
+    };
+    slug: string;
+};
+export declare const MessageBinding: ({ binding, slug }: MessageBindingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/MessageBinding.js

@@ -0,0 +1 @@
+"use strict";var c=exports&&exports.__rest||function(a,d){var s={};for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&d.indexOf(r)<0&&(s[r]=a[r]);if(a!=null&&typeof Object.getOwnPropertySymbols=="function")for(var e=0,r=Object.getOwnPropertySymbols(a);e<r.length;e++)d.indexOf(r[e])<0&&Object.prototype.propertyIsEnumerable.call(a,r[e])&&(s[r[e]]=a[r[e]]);return s};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MessageBinding=void 0;const t=require("react/jsx-runtime"),l=require("@redocly/theme"),n=require("./common"),h=require("./JsonSchema"),g=require("../utils"),p=({binding:a,slug:d})=>{const s=({key:r,value:e})=>{const{bindingVersion:y}=e,i=c(e,["bindingVersion"]);switch(r){case"kafka":const o={type:"object",properties:{key:(0,g.getSchema)(e.key)}};return(0,t.jsxs)(t.Fragment,{children:[e.key&&(0,t.jsx)(h.JsonSchema,{schema:o,slug:d}),e.schemaIdLocation&&(0,t.jsxs)(n.HeaderWrapper,{children:[(0,t.jsx)("span",{"data-testid":"schema-id-location-label",children:"Schema ID Location"}),(0,t.jsx)("span",{children:(0,t.jsx)(n.TagStyled,{borderless:!0,"data-testid":"schema-id-location-value",children:e.schemaIdLocation})})]}),e.schemaIdPayloadEncoding&&(0,t.jsxs)(n.HeaderWrapper,{children:[(0,t.jsx)("span",{"data-testid":"schema-id-payload-encoding-label",children:"Schema ID payload encoding"}),(0,t.jsx)("span",{children:(0,t.jsx)(n.TagStyled,{borderless:!0,"data-testid":"schema-id-payload-encoding-value",children:e.schemaIdPayloadEncoding})})]}),e.schemaLookupStrategy&&(0,t.jsxs)(n.HeaderWrapper,{children:[(0,t.jsx)("span",{"data-testid":"schema-lookup-strategy-label",children:"Schema lookup strategy"}),(0,t.jsx)("span",{children:(0,t.jsx)(n.TagStyled,{borderless:!0,"data-testid":"schema-lookup-strategy-value",children:e.schemaLookupStrategy})})]})]});default:return(0,t.jsx)(l.JsonViewer,{data:i,expandLevel:3,hideHeader:!0})}};return(0,t.jsx)(n.BindingPanel,{header:"Message configuration",children:s(a)})};exports.MessageBinding=p;

package/lib/components/MessageReferences.d.ts

@@ -0,0 +1,5 @@
+type MessageReferencesProps = {
+    messageKey: string;
+};
+export declare const MessageReferences: ({ messageKey }: MessageReferencesProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/MessageReferences.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MessageReferences=void 0;const s=require("react/jsx-runtime"),r=require("jotai"),t=require("./MessageAMQPReferences"),o=require("./../jotai-store/app"),c=({messageKey:e})=>{switch((0,r.useAtomValue)(o.protocolAtom)){case"amqp":return(0,s.jsx)(t.MessageAMQPReferences,{messageKey:e});default:return null}};exports.MessageReferences=c;

package/lib/components/MessageSection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { AsyncApiMessage } from '../types';
+type MessageSectionProps = {
+    messages: {
+        key: string;
+        value: AsyncApiMessage;
+    }[];
+    id: string;
+};
+export declare const MessageSection: React.MemoExoticComponent<({ messages, id }: MessageSectionProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/components/MessageSection.js

@@ -0,0 +1,25 @@
+"use strict";var R=exports&&exports.__createBinding||(Object.create?function(e,n,o,u){u===void 0&&(u=o);var s=Object.getOwnPropertyDescriptor(n,o);(!s||("get"in s?!n.__esModule:s.writable||s.configurable))&&(s={enumerable:!0,get:function(){return n[o]}}),Object.defineProperty(e,u,s)}:function(e,n,o,u){u===void 0&&(u=o),e[u]=n[o]}),$=exports&&exports.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),O=exports&&exports.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var o in e)o!=="default"&&Object.prototype.hasOwnProperty.call(e,o)&&R(n,e,o);return $(n,e),n},W=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MessageSection=void 0;const i=require("react/jsx-runtime"),v=W(require("styled-components")),w=require("jotai"),z=require("react-router-dom"),c=require("@redocly/openapi-docs"),d=require("@redocly/theme"),l=O(require("react")),F=O(require("openapi-sampler")),H=require("./SamplesPanel"),V=require("./MessageBinding"),K=require("./MessageReferences"),L=require("../jotai-store/app"),N=require("./Message"),A=require("../utils"),D=require("./common"),U=require("../hooks"),G=3;exports.MessageSection=l.default.memo(({messages:e,id:n})=>{const o=(0,z.useLocation)(),u=(0,l.useMemo)(()=>e.find(t=>(0,c.pathIncludesLink)(o,`m=${t.key}`))||e[0],[e,o]),[s,b]=(0,l.useState)(u),[m,y]=(0,l.useState)(s.value.payload),I=(0,l.useCallback)(t=>{const a=(0,A.modifyPayload)(m,t);a&&y(a)},[]),E=(0,l.useCallback)(()=>s.value.examples||[{payload:F.sample(Object.assign({},(0,A.getSchema)(m)))}],[m,s.value.examples]),_=(0,w.useAtomValue)(L.layoutAtom),f=(0,w.useAtomValue)(L.routingBasePathAtom),h=_===d.LayoutVariant.STACKED,p=(0,l.useMemo)(()=>e.map(t=>({label:t.value.title||t.value.name||t.key,value:t.key})),[e]),[M,C]=(0,l.useState)(!1),j=(0,l.useRef)(null),S=(0,U.useTelemetry)();(0,l.useEffect)(()=>{var t;const a=e.find(r=>(0,c.pathIncludesLink)(o,`m=${r.key}`));a&&(b(a),!((t=a?.value)===null||t===void 0)&&t.payload&&y(a.value.payload))},[o,e]);const k=(0,l.useCallback)(({value:t})=>{var a;const r=e.find(g=>g.key===t);r&&(S.send({type:"asyncapi_docs.switch_message.clicked",payload:{message:r.key}}),b(r),!((a=r?.value)===null||a===void 0)&&a.payload&&y(r.value.payload))},[e,S]),P=(0,l.useMemo)(()=>Object.entries(s.value.bindings||{}).map(([t,a])=>({key:t,value:a})),[s.value.bindings]),x=(0,l.useMemo)(()=>(0,d.combineUrls)(f,(0,c.makeDeepLink)(n,`messages&m=${s.key}`)),[n,f,s.key]);(0,l.useEffect)(()=>{if(!j.current)return;const t=()=>{var a;const r=(a=j.current)===null||a===void 0?void 0:a.querySelectorAll('button[role="tab"]'),g=Array.from(r||[]).some(q=>q.offsetWidth<q.scrollWidth);g!==M&&C(g)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[M,p]);const B=(0,l.useMemo)(()=>(0,d.combineUrls)(f,(0,c.makeDeepLink)(n,"messages")),[n,f]);return(0,i.jsxs)(J,{"data-component-name":"MessageSection/MessageSection",children:[(0,i.jsx)(c.Row,{layout:_,children:(0,i.jsxs)(c.SamplesMiddlePanel,{isStacked:h,children:[(0,i.jsxs)(Q,{children:[(0,i.jsx)(D.LinkToField,{to:B}),"Messages"]}),e.length>1?(0,i.jsxs)(T,{children:["Accepts ",(0,i.jsx)("span",{children:"one of"})," the following messages:"]}):(0,i.jsx)(T,{children:"Accepts the following message:"})]})}),(0,i.jsxs)(c.Row,{layout:_,children:[(0,i.jsxs)(c.SamplesMiddlePanel,{isStacked:h,children:[(0,i.jsxs)(X,{children:[(0,i.jsx)(D.LinkToField,{to:x}),p.length>G||M?(0,i.jsx)(c.Dropdown,{options:p,value:s.key,onChange:k}):(0,i.jsx)(d.Segmented,{ref:j,size:"small",value:s.key,options:p,onChange:k})]}),(0,i.jsx)(N.Message,{message:s.value,sectionId:n,id:s.key,onOneOfChange:I})]}),(0,i.jsxs)(c.OperationSamplesPanel,{isStacked:h,className:"panel-container-response-samples",children:[(0,i.jsx)(H.SamplesPanel,{examples:E()}),!!P.length&&(0,i.jsx)(V.MessageBinding,{binding:P[0],slug:x}),(0,i.jsx)(K.MessageReferences,{messageKey:s.key})]})]})]})});const J=v.default.div`
+  padding: var(--spacing-xl) 0 0 0;
+`,Q=(0,v.default)(d.H4)`
+  margin: 0 0 var(--spacing-xs) 0;
+  position: relative;
+  :hover {
+    ${d.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`,T=(0,v.default)(d.Typography)`
+  & > span {
+    font-weight: var(--font-weight-bold);
+  }
+  margin: 0 0 var(--spacing-sm) 0;
+`,X=v.default.div`
+  position: relative;
+  :hover {
+    ${d.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;

package/lib/components/Operation.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { AsyncApiOperation } from '../types';
+type OperationProps = {
+    operation?: AsyncApiOperation;
+    dataSectionId: string;
+    headerRow?: React.ReactNode;
+    id?: string;
+    showDivider?: boolean;
+};
+export declare const Operation: React.MemoExoticComponent<({ operation, dataSectionId, headerRow, id, showDivider }: OperationProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/lib/components/Operation.js

@@ -0,0 +1,45 @@
+"use strict";var C=exports&&exports.__createBinding||(Object.create?function(e,n,t,r){r===void 0&&(r=t);var o=Object.getOwnPropertyDescriptor(n,t);(!o||("get"in o?!n.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return n[t]}}),Object.defineProperty(e,r,o)}:function(e,n,t,r){r===void 0&&(r=t),e[r]=n[t]}),R=exports&&exports.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),U=exports&&exports.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var t in e)t!=="default"&&Object.prototype.hasOwnProperty.call(e,t)&&C(n,e,t);return R(n,e),n},V=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Operation=void 0;const s=require("react/jsx-runtime"),l=V(require("styled-components")),b=require("jotai"),u=require("@redocly/openapi-docs"),c=require("@redocly/theme"),f=U(require("react")),W=require("react-router-dom"),p=require("./common"),$=require("./OperationBinding"),y=require("../jotai-store/app"),D=require("../hooks"),F=require("../utils");exports.Operation=f.default.memo(({operation:e,dataSectionId:n,headerRow:t,id:r,showDivider:o})=>{var v,h,m,_;const w=(0,b.useAtomValue)(y.layoutAtom),g=(0,b.useAtomValue)(y.routingBasePathAtom),d=(0,b.useAtomValue)(y.definitionAtom),M=w===c.LayoutVariant.STACKED,{getProtocolLabel:k}=(0,D.useProtocolLabels)(),q=(0,D.useTelemetry)(),P=(0,f.useMemo)(()=>Object.entries(e?.bindings||{}).map(([i,a])=>({key:i,value:a})),[e?.bindings]),B=(0,f.useMemo)(()=>{var i;return(i=e?.["x-badges"])===null||i===void 0?void 0:i.map(a=>Object.assign(Object.assign({},a),{position:a.position||"after"}))},[e]),A=(0,W.useNavigate)(),H=(0,f.useCallback)(i=>{var a,j;const x=(j=Object.entries(((a=d?.components)===null||a===void 0?void 0:a.messages)||{}).find(([X,z])=>(0,F.isEqual)(z,i)))===null||j===void 0?void 0:j[0];if(!x||!n)return;const L=n.substring(1).split("/operations")[0],T=(0,c.combineUrls)(g,(0,u.makeDeepLink)(L,`messages&m=${x}`));q.send({type:"asyncapi_docs.message.clicked",payload:{message:x}}),A(T)},[n,(v=d?.components)===null||v===void 0?void 0:v.messages,A,g,q]);return e?(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)(I,{sectionId:(0,c.combineUrls)(g,n),"data-component-name":"Operation/Operation",hasHeader:!!t,children:[t,(0,s.jsxs)(u.Row,{layout:w,children:[(0,s.jsxs)(J,{isStacked:M,children:[(0,s.jsxs)("div",{children:[(0,s.jsx)(p.ActionTag,{color:e.action,children:k(e.action)}),(0,s.jsxs)(S,{children:[(0,s.jsx)(u.CustomBadges,{badges:B,children:e.title||r}),(0,s.jsx)(p.ShareLink,{to:(0,c.combineUrls)(g,n),"aria-label":`link to ${e.title||r}`})]}),(0,s.jsx)(p.Information,{summary:e.summary,description:e.description,externalDocs:e.externalDocs}),((h=e.messages)===null||h===void 0?void 0:h.length)&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(E,{children:"Messages"}),(0,s.jsx)(N,{children:(m=e.messages)===null||m===void 0?void 0:m.map((i,a)=>(0,s.jsxs)(Q,{icon:null,onClick:()=>H(i),children:[i.title||i.name,(0,s.jsx)(c.ArrowUpRightIcon,{size:"12px"})]},a))})]}),e.reply&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(S,{children:"Reply"}),(0,s.jsxs)(K,{children:[e.reply.address&&(0,s.jsxs)(O,{children:[(0,s.jsx)("span",{children:"Address: "}),(0,s.jsx)("span",{children:e.reply.address.location})]}),e.reply.channel&&(0,s.jsxs)(O,{children:[(0,s.jsx)("span",{children:"Topic: "}),(0,s.jsx)("span",{children:e.reply.channel.address})]}),!!(!((_=e.reply.messages)===null||_===void 0)&&_.length)&&(0,s.jsxs)(O,{children:[(0,s.jsx)("span",{children:"Messages: "}),(0,s.jsx)("span",{children:e.reply.messages.map(i=>i.title||i.name).join(", ")})]})]})]})]}),o&&(0,s.jsx)(G,{})]}),(0,s.jsx)(u.OperationSamplesPanel,{isStacked:M,className:"panel-container-response-samples",children:!!P.length&&(0,s.jsx)($.OperationBinding,{binding:P[0],id:n})})]})]})}):null});const I=(0,l.default)(u.Section)`
+  padding: var(--spacing-lg) 0;
+  scroll-margin-top: ${e=>e.hasHeader?"calc(var(--navbar-height) - var(--spacing-xl)*2)":"var(--navbar-height)"} !important;
+`,S=(0,l.default)(c.H4)`
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  margin: 0 0 var(--spacing-xxs) 0;
+  position: relative;
+  word-break: break-word;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+  :hover {
+    ${c.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`,E=(0,l.default)(c.H4)`
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  margin: var(--spacing-sm) 0 0 0;
+`,N=l.default.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) 0;
+`,K=l.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xs) 0;
+`,O=(0,l.default)(c.H4)`
+  & > span:first-child {
+    font-weight: var(--font-weight-medium);
+  }
+`,G=l.default.div`
+  border-bottom: 1px solid var(--border-color-secondary);
+`,J=(0,l.default)(u.SamplesMiddlePanel)`
+  display: flex;
+  justify-content: space-between;
+`,Q=(0,l.default)(p.TagWithIcon)`
+  cursor: pointer;
+`;

package/lib/components/OperationBinding.d.ts

@@ -0,0 +1,10 @@
+import type { AsyncApiOperationKafkaBinding } from '../types';
+type OperationBindingProps = {
+    id: string;
+    binding: {
+        key: string;
+        value: AsyncApiOperationKafkaBinding;
+    };
+};
+export declare const OperationBinding: ({ binding, id }: OperationBindingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/OperationBinding.js

@@ -0,0 +1 @@
+"use strict";var h=exports&&exports.__rest||function(t,c){var i={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&c.indexOf(e)<0&&(i[e]=t[e]);if(t!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,e=Object.getOwnPropertySymbols(t);n<e.length;n++)c.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(t,e[n])&&(i[e[n]]=t[e[n]]);return i};Object.defineProperty(exports,"__esModule",{value:!0}),exports.OperationBinding=void 0;const o=require("react/jsx-runtime"),s=require("@redocly/theme"),m=require("jotai"),_=require("@redocly/openapi-docs"),f=require("./common"),a=require("./JsonSchema"),u=require("../utils"),j=require("../jotai-store/app"),O=({binding:t,id:c})=>{const i=(0,m.useAtomValue)(j.routingBasePathAtom),e=(0,s.combineUrls)(i,(0,_.makeDeepLink)(c,"")),n=({key:d,value:r})=>{const{bindingVersion:b}=r,p=h(r,["bindingVersion"]);switch(d){case"kafka":const l={type:"object",properties:{groupId:(0,u.getSchema)(r.groupId)}},g={type:"object",properties:{clientId:(0,u.getSchema)(r.clientId)}};return(0,o.jsxs)(o.Fragment,{children:[r.groupId&&(0,o.jsx)(a.JsonSchema,{schema:l,slug:e}),r.clientId&&(0,o.jsx)(a.JsonSchema,{schema:g,slug:e})]});default:return(0,o.jsx)(s.JsonViewer,{data:p,expandLevel:3,hideHeader:!0})}};return(0,o.jsx)(f.BindingPanel,{header:"Operation configuration",children:n(t)})};exports.OperationBinding=O;

package/lib/components/OperationSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ApiItem } from '../types';
+type OperationSectionProps = {
+    operations: ApiItem[];
+    type: 'send' | 'receive';
+    id: string;
+};
+export declare const OperationSection: React.MemoExoticComponent<({ operations, type, id }: OperationSectionProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/components/OperationSection.js

@@ -0,0 +1,17 @@
+"use strict";var m=exports&&exports.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.OperationSection=void 0;const t=require("react/jsx-runtime"),_=m(require("styled-components")),i=require("@redocly/theme"),a=require("@redocly/openapi-docs"),r=require("jotai"),S=m(require("react")),b=require("./Operation"),j=require("../hooks"),s=require("../jotai-store/app"),k=require("./common");exports.OperationSection=S.default.memo(({operations:e,type:c,id:p})=>{const{getProtocolLabel:h}=(0,j.useProtocolLabels)(),l=(0,r.useAtomValue)(s.layoutAtom),v=(0,r.useAtomValue)(s.definitionAtom),f=(0,r.useAtomValue)(s.routingBasePathAtom),g=l===i.LayoutVariant.STACKED,q=e.length?(0,t.jsx)(a.Row,{layout:l,children:(0,t.jsx)(a.SamplesMiddlePanel,{isStacked:g,children:(0,t.jsxs)(A,{children:[(0,t.jsx)(k.LinkToField,{to:(0,i.combineUrls)(f,(0,a.makeDeepLink)(p,c))}),h(`${c}Label`)]})})}):null;return(0,t.jsx)(y,{"data-component-name":"OperationSection/OperationSection",children:e.map((o,u)=>{var n;const d=(n=v.operations)===null||n===void 0?void 0:n[o.id];return d?(0,t.jsx)(b.Operation,{operation:d,dataSectionId:o.dataSectionId,headerRow:u===0?q:null,id:o.id,showDivider:u!==e.length-1},o.id):null})})});const y=_.default.div`
+  width: 100%;
+`,A=(0,_.default)(i.H4)`
+  margin-bottom: var(--spacing-lg);
+  text-transform: capitalize;
+  position: relative;
+  :hover {
+    ${i.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  @media screen and (max-width: ${i.breakpoints.large}) {
+    margin: 0;
+  }
+`;

package/lib/components/RightPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { AsyncApiServer, AsyncApiInfo } from '../types';
+type RightPanelProps = {
+    info: AsyncApiInfo;
+    servers?: Record<string, AsyncApiServer>;
+};
+export declare const RightPanel: React.MemoExoticComponent<({ info, servers }: RightPanelProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/components/RightPanel.js

@@ -0,0 +1 @@
+"use strict";var _=exports&&exports.__createBinding||(Object.create?function(e,t,n,i){i===void 0&&(i=n);var a=Object.getOwnPropertyDescriptor(t,n);(!a||("get"in a?!t.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,a)}:function(e,t,n,i){i===void 0&&(i=n),e[i]=t[n]}),v=exports&&exports.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),f=exports&&exports.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(e!=null)for(var n in e)n!=="default"&&Object.prototype.hasOwnProperty.call(e,n)&&_(t,e,n);return v(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.RightPanel=void 0;const r=require("react/jsx-runtime"),h=require("jotai"),s=require("@redocly/openapi-docs"),l=require("@redocly/theme"),c=f(require("react")),p=require("./ServersListPanel"),j=require("./DownloadSpecification"),P=require("../jotai-store/app"),b=require("../hooks");exports.RightPanel=c.default.memo(({info:e,servers:t})=>{const n=(0,b.useTranslate)(),i=(0,c.useMemo)(()=>Object.entries(t||{}).map(([u,d])=>({key:u,value:d})),[t]),o=(0,h.useAtomValue)(P.layoutAtom)===l.LayoutVariant.STACKED;return(0,r.jsxs)(s.RightPanelContainer,{isStacked:o,"data-component-name":"RightPanel/RightPanel",children:[(0,r.jsx)(l.Panel,{className:"panel-download",header:n("asyncapi.download.description.title","Download AsycAPI description"),isExpandable:!1,children:(0,r.jsx)(j.DownloadSpecification,{})}),(e?.license||e?.contact||e?.termsOfService)&&(0,r.jsx)(l.Panel,{className:"panel-overview",header:n("asyncapi.info.title","Overview"),isExpandable:!1,children:(0,r.jsx)(l.Markdown,{children:(0,r.jsx)(s.Overview,{info:e,translate:n})})}),!!i?.length&&(0,r.jsx)(p.ServersListPanel,{servers:i,showDetails:!0})]})});