@redocly/api-docs 0.2.0-next.5 → 0.2.0-next.6

package/lib/components/StickySidebar/FloatingButton.js

@@ -0,0 +1,32 @@
+import{jsx as e}from"react/jsx-runtime";import{useCallback as n}from"react";import{useAtom as i}from"jotai";import{styled as a}from"styled-components";import{breakpoints as s}from"@redocly/theme/core/openapi";import{MenuIcon as p}from"@redocly/theme/icons/MenuIcon/MenuIcon";import{CloseIcon as l}from"@redocly/theme/icons/CloseIcon/CloseIcon";import{isSidebarOpenedAtom as d}from"../../jotai/app.js";const h=()=>{const[o,r]=i(d),t=n(()=>{r(!o)},[o,r]);return e(m,{type:"button",onClick:t,"aria-label":o?"Close navigation menu":"Open navigation menu","aria-expanded":o,"data-testid":"floating-button",children:o?e(l,{size:"24px"}):e(p,{size:"24px"})})},m=a.button`
+  border: none;
+  outline: none;
+  user-select: none;
+  background-color: var(--sidebar-bg-color, #fff);
+  color: var(--color-primary-base, var(--color-blueberry-6));
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: fixed;
+  right: 20px;
+  bottom: 44px;
+  z-index: 100;
+  border-radius: 50%;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  width: 60px;
+  height: 60px;
+  padding: 0;
+
+  svg path {
+    fill: var(--color-primary-base, var(--color-blueberry-6));
+  }
+
+  @media screen and (max-width: ${s.small}) {
+    display: flex;
+  }
+
+  @media print {
+    display: none;
+  }
+`;export{h as FloatingButton};

package/lib/components/StickySidebar/RedoclyAttributionLogo.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+/** Redocly logo for the community edition's sidebar attribution. Hidden until mounted; removed if the CDN image fails to load. */
+export declare function RedoclyAttributionLogo({ full }: {
+    full?: boolean;
+}): ReactElement | null;

package/lib/components/StickySidebar/RedoclyAttributionLogo.js

@@ -0,0 +1 @@
+import{jsx as s}from"react/jsx-runtime";import{useEffect as e,useState as l}from"react";function n({full:t=!1}){const[r,o]=l(!1);return e(()=>{o(!0)},[]),r?s("img",{alt:"redocly logo",onError:()=>o(!1),src:t?"https://cdn.redoc.ly/redoc/logo-mini-full.svg":"https://cdn.redoc.ly/redoc/logo-mini.svg"}):null}export{n as RedoclyAttributionLogo};

package/lib/components/StickySidebar/StickySidebar.js

@@ -1,22 +1,46 @@
-import{jsx as a,jsxs as t}from"react/jsx-runtime";import{memo as s}from"react";import{styled as d,css as o}from"styled-components";import{SidebarActions as n}from"./SidebarActions.js";function l({className:r,children:e,collapsedSidebar:i=!1}){return t(c,{className:r,$collapsedSidebar:i,children:[i?null:e,a(n,{})]})}const b=s(l),c=d.div`
+import{Fragment as f,jsx as d,jsxs as s}from"react/jsx-runtime";import{memo as g,useCallback as b,useEffect as u}from"react";import{styled as x,css as m}from"styled-components";import{useAtom as v}from"jotai";import{breakpoints as c}from"@redocly/theme/core/openapi";import{isSidebarOpenedAtom as w}from"../../jotai/app.js";import{useBodyScrollLock as S}from"../../hooks/useBodyScrollLock.js";import{SidebarActions as y}from"./SidebarActions.js";import{FloatingButton as L}from"./FloatingButton.js";const k=["menu-item-type-group","menu-item-type-drilldown"];function E({className:i,children:l,collapsedSidebar:r=!1}){const[e,a]=v(w);u(()=>{if(!e)return;const t=window.matchMedia(`(min-width: ${c.small})`),o=()=>{t.matches&&a(!1)};return o(),t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[e,a]),S(e);const p=b(t=>{if(!e)return;const o=t.target.closest("a");if(!o)return;const n=o.closest('[data-component-name="Menu/MenuItem"]');n&&k.some(h=>n.classList.contains(h))||a(!1)},[e,a]);return s(f,{children:[s(_,{className:i,$collapsedSidebar:r,$open:e,onClick:p,children:[r&&!e?null:l,d(y,{})]}),d(L,{})]})}const z=g(E),_=x.div`
   flex-shrink: 0;
   overflow-y: auto;
   overflow-x: hidden;
-  position: sticky;
   top: var(--navbar-height, 0px);
   height: calc(100vh - var(--navbar-height, 0px));
-  display: flex;
+  height: calc(100dvh - var(--navbar-height, 0px));
   flex-direction: column;
   background: var(--sidebar-bg-color, #fff);
   border-right: 1px solid var(--sidebar-border-color, #e0e0e0);
 
-  ${({$collapsedSidebar:r})=>r?o`
-          width: auto;
-        `:o`
-          width: var(--sidebar-width, 260px);
-        `}
+  [data-component-name='SidebarLogo/SidebarLogo'] {
+    padding: var(--spacing-md, 16px) var(--spacing-sm, 12px);
+  }
+
+  [data-component-name='SidebarLogo/SidebarLogo'] img {
+    /* Keep the logo compact inside the full-width mobile drawer. */
+    max-width: min(140px, var(--sidebar-logo-max-width, 285px));
+  }
+
+  /* Mobile: full-width drawer toggled by the floating hamburger button. */
+  position: fixed;
+  z-index: 20;
+  width: 100%;
+  display: ${({$open:i})=>i?"flex":"none"};
+
+  @media screen and (min-width: ${c.small}) {
+    position: sticky;
+    z-index: auto;
+    display: flex;
+
+    [data-component-name='SidebarLogo/SidebarLogo'] img {
+      max-width: var(--sidebar-logo-max-width, 285px);
+    }
+
+    ${({$collapsedSidebar:i})=>i?m`
+            width: auto;
+          `:m`
+            width: var(--sidebar-width, 260px);
+          `}
+  }
 
   @media print {
     display: none;
   }
-`;export{b as StickySidebar};
+`;export{z as StickySidebar};

package/lib/components/common/Breadcrumbs.js

@@ -1,4 +1,4 @@
-import{Fragment as m,jsx as n,jsxs as u}from"react/jsx-runtime";import{Fragment as T,useCallback as E,useLayoutEffect as M,useMemo as z,useRef as B,useState as R}from"react";import{styled as c}from"styled-components";import{Dropdown as _}from"@redocly/theme/components/Dropdown/Dropdown";import{DropdownMenu as k}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as D}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{Tooltip as F}from"@redocly/theme/components/Tooltip/Tooltip";import{trimText as S}from"@redocly/theme/core/openapi";import{calculateMaxLength as P}from"../../utils/calculateMaxLength.js";const b=25,O=3,j=16;function g({breadcrumb:e,onClick:r,maxLength:t}){const o=e.name.length>t,a=S(e.name,t);return n(F,{tip:e.name,placement:"bottom",disabled:!o,children:n(y,{onClick:()=>r(e.href),children:a})})}function G({breadcrumbs:e,onClick:r,maxLength:t}){const o=e[0],a=e[e.length-1],d=e.slice(1,-1);return u(m,{children:[n(g,{breadcrumb:o,onClick:r,maxLength:t}),n(f,{children:"/"}),n(_,{trigger:n(I,{children:"..."}),closeOnClick:!0,alignment:"end",children:n(k,{children:d.map(i=>n(D,{onAction:()=>r(i.href),children:i.name},i.href))})}),n(f,{children:"/"}),n(g,{breadcrumb:a,onClick:r,maxLength:t})]})}function H({breadcrumbs:e,onClick:r,maxLength:t}){return n(m,{children:e.map((o,a)=>u(T,{children:[n(g,{breadcrumb:o,onClick:r,maxLength:t}),a!==e.length-1&&n(f,{children:"/"})]},o.href))})}function $({breadcrumbs:e,onClick:r}){const t=B(null),o=B(null),[a,d]=R(b),i=e.length>O,x=z(()=>i?[e[0],e[e.length-1]]:e,[e,i]),p=E(()=>{const s=t.current,l=s?.parentElement;if(!s||!l||!o.current)return;const v=getComputedStyle(l),C=parseFloat(v.paddingLeft||"0")+parseFloat(v.paddingRight||"0");let h=l.clientWidth-C;const w=l.parentElement?.querySelector('[data-component-name="PageActions/PageActions"]');if(w){const L=w.getBoundingClientRect().left-s.getBoundingClientRect().left-j;L>0&&(h=Math.min(h,L))}const A=P(x,h,i,o.current);d(A)},[x,i]);return M(()=>{p();const s=new ResizeObserver(p),l=t.current?.parentElement;return l&&s.observe(l),()=>{s.disconnect()}},[p]),e.length?u(m,{children:[n(N,{ref:o,"aria-hidden":"true"}),n(W,{ref:t,"data-component-name":"Breadcrumbs",children:i?n(G,{breadcrumbs:e,onClick:r,maxLength:a}):n(H,{breadcrumbs:e,onClick:r,maxLength:a})})]}):null}const N=c.span`
+import{Fragment as m,jsx as n,jsxs as u}from"react/jsx-runtime";import{Fragment as T,useCallback as E,useLayoutEffect as M,useMemo as z,useRef as B,useState as R}from"react";import{styled as c}from"styled-components";import{Dropdown as _}from"@redocly/theme/components/Dropdown/Dropdown";import{DropdownMenu as b}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as k}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{Tooltip as D}from"@redocly/theme/components/Tooltip/Tooltip";import{trimText as F}from"@redocly/theme/core/openapi";import{calculateMaxLength as S}from"../../utils/calculateMaxLength.js";const P=25,O=3,j=16;function g({breadcrumb:e,onClick:r,maxLength:t}){const o=e.name.length>t,a=F(e.name,t);return n(D,{tip:e.name,placement:"bottom",disabled:!o,children:n(y,{onClick:()=>r(e.href),children:a})})}function G({breadcrumbs:e,onClick:r,maxLength:t}){const o=e[0],a=e[e.length-1],d=e.slice(1,-1);return u(m,{children:[n(g,{breadcrumb:o,onClick:r,maxLength:t}),n(f,{children:"/"}),n(_,{trigger:n(I,{children:"..."}),closeOnClick:!0,alignment:"end",children:n(b,{children:d.map(i=>n(k,{onAction:()=>r(i.href),children:i.name},i.href))})}),n(f,{children:"/"}),n(g,{breadcrumb:a,onClick:r,maxLength:t})]})}function H({breadcrumbs:e,onClick:r,maxLength:t}){return n(m,{children:e.map((o,a)=>u(T,{children:[n(g,{breadcrumb:o,onClick:r,maxLength:t}),a!==e.length-1&&n(f,{children:"/"})]},o.href))})}function $({breadcrumbs:e,onClick:r}){const t=B(null),o=B(null),[a,d]=R(P),i=e.length>O,x=z(()=>i?[e[0],e[e.length-1]]:e,[e,i]),p=E(()=>{const s=t.current,l=s?.parentElement;if(!s||!l||!o.current)return;const v=getComputedStyle(l),C=parseFloat(v.paddingLeft||"0")+parseFloat(v.paddingRight||"0");let h=l.clientWidth-C;const w=l.parentElement?.querySelector('[data-component-name="PageActions/PageActions"]');if(w){const L=w.getBoundingClientRect().left-s.getBoundingClientRect().left-j;L>0&&(h=Math.min(h,L))}const A=S(x,h,i,o.current);d(A)},[x,i]);return M(()=>{p();const s=new ResizeObserver(p),l=t.current?.parentElement;return l&&s.observe(l),()=>{s.disconnect()}},[p]),e.length?u(m,{children:[n(N,{ref:o,"aria-hidden":"true"}),n(W,{ref:t,"data-component-name":"Breadcrumbs",children:i?n(G,{breadcrumbs:e,onClick:r,maxLength:a}):n(H,{breadcrumbs:e,onClick:r,maxLength:a})})]}):null}const N=c.span`
   position: absolute;
   visibility: hidden;
   white-space: nowrap;
@@ -19,7 +19,7 @@ import{Fragment as m,jsx as n,jsxs as u}from"react/jsx-runtime";import{Fragment
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   color: var(--text-color-secondary);
-  border-radius: var(--border-radius);
+  border-radius: var(--breadcrumbs-border-radius);
   cursor: pointer;
   padding: 1px calc(var(--spacing-xxs) / 2);
   overflow: hidden;

package/lib/components/common/ResponseCodeTabs.js

@@ -9,7 +9,7 @@ import{styled as o}from"styled-components";function e(r){return r.startsWith("2"
   align-items: center;
   padding: 0 var(--spacing-sm);
   height: 24px;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
   border: none;
   cursor: pointer;
   font-family: var(--font-family-base);

package/lib/components/common/Tag.js

@@ -4,7 +4,7 @@ import{styled as r}from"styled-components";const o=r.span`
   font-family: var(--font-family-monospaced);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
-  border-radius: var(--border-radius);
+  border-radius: var(--tag-border-radius);
   color: var(--text-color-secondary);
   display: inline-flex;
   word-break: var(--code-word-break);

package/lib/components/common/ViewNested.js

@@ -1,4 +1,4 @@
-import{Fragment as c,jsx as e,jsxs as l}from"react/jsx-runtime";import{styled as a,css as d}from"styled-components";import{memo as $,useState as j}from"react";import{isUndefined as N}from"@redocly/theme/core/openapi";import{cycleColorsByLevel as C}from"../Schema/utils.js";import{NestedToggleButton as L}from"./NestedToggleButton.js";function S({expandByDefault:r,level:g,expandable:f=!1,expandText:v,hideText:x,hideDivider:h=!1,children:s,expandedAll:i,isNestedArray:n}){const[b,u]=j((r||n)??!1),o=N(i)?b:i,t=o?C(g):void 0;if(!f)return s;const y=()=>{u(w=>!w)};return n?l(c,{children:[e(_,{children:"Array ["}),e(m,{$isArrayInsideArray:n,className:"view-nested-wrapper",children:e(p,{color:t,children:s})})]}):e(c,{children:l(m,{$divider:!h&&!o,className:"view-nested-wrapper",children:[e(V,{expanded:o,label:o?x||"":v||"",color:t,onClick:y}),o&&e(p,{color:t,children:s})]})})}const I=$(S),V=a(L)`
+import{Fragment as c,jsx as e,jsxs as l}from"react/jsx-runtime";import{styled as a,css as d}from"styled-components";import{memo as $,useState as j}from"react";import{isUndefined as N}from"@redocly/theme/core/openapi";import{cycleColorsByLevel as C}from"../Schema/utils.js";import{NestedToggleButton as L}from"./NestedToggleButton.js";function S({expandByDefault:r,level:g,expandable:f=!1,expandText:v,hideText:x,hideDivider:h=!1,children:s,expandedAll:i,isNestedArray:t}){const[b,u]=j((r||t)??!1),o=N(i)?b:i,n=o?C(g):void 0;if(!f)return s;const y=()=>{u(w=>!w)};return t?l(c,{children:[e(_,{children:"Array ["}),e(m,{$isArrayInsideArray:t,className:"view-nested-wrapper",children:e(p,{color:n,children:s})})]}):e(c,{children:l(m,{$divider:!h&&!o,className:"view-nested-wrapper",children:[e(V,{expanded:o,label:o?x||"":v||"",color:n,onClick:y}),o&&e(p,{color:n,children:s})]})})}const I=$(S),V=a(L)`
   margin: var(--spacing-xxs) 0 var(--spacing-xs);
   width: 100%;
 `,p=a.div`
@@ -22,7 +22,7 @@ import{Fragment as c,jsx as e,jsxs as l}from"react/jsx-runtime";import{styled as
     `}
 `,_=a.span`
   padding: 0 var(--spacing-xs);
-  border-radius: var(--border-radius);
+  border-radius: var(--tag-border-radius);
   border: 1px solid var(--border-color-secondary);
   background-color: var(--bg-color);
   font-size: var(--font-size-sm);

package/lib/components/graphql/GraphQLFieldView.js

@@ -1 +1 @@
-import{jsx as n,jsxs as d}from"react/jsx-runtime";import{useState as $,useEffect as z,memo as J,useMemo as f,useRef as K}from"react";import{useAtomValue as H}from"jotai";import{Admonition as X}from"@redocly/theme/components/Admonition/Admonition";import{FieldWrapper as Y,FieldNameBox as Z,FieldName as ee,ExpandableFieldBody as ne,PanelAnnotation as F,InlineCode as re}from"./styled.js";import{ViewNested as G}from"./ViewNested.js";import{LazyMount as V}from"../common/LazyMount.js";import{GraphQLTypeViewByName as oe}from"./GraphQLTypeView.js";import{GraphQLReturnTypeDetails as te}from"./GraphQLReturnTypeDetails.js";import{GraphQLArgumentsSection as se}from"./GraphQLArgumentsSection.js";import{RequiresScopesButton as ae}from"./RequiresScopesButton.js";import{renderDescription as ie}from"./renderDescription.js";import{Markdown as pe}from"../common/Markdown.js";import{DeepLinkAnchor as me}from"../common/DeepLinkAnchor.js";import{buildGraphqlSuffix as ce,getDeepLinkId as de,isGraphqlDeepLinkAncestor as le}from"../../utils/deep-link.js";import{useDeepLinkUrl as ue}from"../../hooks/useDeepLinkSection.js";import{useSpecTranslate as he}from"../../hooks/useTranslate.js";import{globalOptionsAtom as ge}from"../../jotai/store.js";import{graphqlTypeLookupAtom as fe}from"../../jotai/graphql.js";import{mergeRequiresScopes as xe}from"../../utils/graphql-scopes.js";import{countNamedTypeFields as Le,isGraphqlFieldExpandable as ye}from"../../utils/graphql-type-expansion.js";import{isWithinExpansionLevel as Te}from"../../utils/expansion.js";import{useMarkdownAdapter as Ee}from"../../index.js";import{useUrlHash as qe}from"../../hooks/useUrlHash.js";const B=72;function ke({field:e,contrast:x,isArgument:t,fieldExpandLevel:s,parentTypeName:r,parentRequiresScopes:l,expanded:a}){const{fieldExpandLevel:M,schemasExpansionLevel:b}=H(ge),L=H(fe),y=Ee(),o=he(),T=s+1,i=r?`${r}.${e.name}`:e.name,u=qe(),E=K(u);u&&(E.current=u);const p=le(E.current,i),m=Te(s,b,0),[I,q]=$(void 0),[Q,k]=$(void 0);z(()=>{q(void 0),k(void 0)},[a]);const h=I??a??(p||m),w=Q??a??(p||m),A=!!e.deprecationReason,D=f(()=>e.deprecationReason?y.parse(e.deprecationReason)??null:null,[e.deprecationReason,y]),U=!!t&&!!e.required,c=e.args??[],v=c.length>0,_=Le(e.type.name,L)*B,j=c.length*B,R=ye(e,s,M,L),C=!R||!h,N=t?r?`arg-${r}-${e.name}`:`arg-${e.name}`:r?`${r}-${e.name}`:e.name,O=c.map(S=>({name:S.name,required:!!S.required})),P=f(()=>l!==void 0?xe(e.requiresScopes,l):null,[e.requiresScopes,l]),W=f(()=>ce({t:t?"argument":"field",path:i,arg:t?e.name:void 0}),[i,t,e.name]),g=ue(W);return n("div",{id:de(g)??N,children:d(Y,{$showBorder:C,children:[d(Z,{children:[g&&n(me,{to:g,label:`link to ${e.name}`,variant:"field"}),n(ee,{$isDeprecated:A,children:e.name}),n(te,{typeRef:e.type,inline:!v,deprecated:A,required:U})]}),e.defaultValue!==void 0&&d(F,{children:[o("defaultValue","Default"),":"," ",n(re,{children:JSON.stringify(e.defaultValue)})]}),e.description&&n(F,{children:ie(e.description)}),D&&n(X,{type:"warning",name:o("deprecationReason","Deprecation reason"),children:n(pe,{source:D})}),R&&d(ne,{$contrast:!x,children:[v&&n(G,{expanded:w,level:s,expandText:o("arguments.show","Show arguments"),collapseText:o("arguments.hide","Hide arguments"),collapsedArgs:O,onClick:()=>k(!w),children:n(V,{forceMount:p||m,estimatedHeight:j,children:n(se,{args:c,fieldExpandLevel:T,parentName:i,expanded:a})})}),n(G,{expanded:h,level:s,expandText:o("returnTypes.show","Show return type"),collapseText:o("returnTypes.hide","Hide return type"),onClick:()=>q(!h),children:n(V,{forceMount:p||m,estimatedHeight:_,children:n(oe,{typeName:e.type.name,contrast:!x,fieldExpandLevel:T,expanded:a,parentPath:i})})})]}),n(ae,{directive:P})]})})}const ze=J(ke);export{ze as GraphQLFieldView};
+import{jsx as n,jsxs as d}from"react/jsx-runtime";import{useState as $,useEffect as z,memo as J,useMemo as f,useRef as K}from"react";import{useAtomValue as H}from"jotai";import{Admonition as X}from"@redocly/theme/components/Admonition/Admonition";import{FieldWrapper as Y,FieldNameBox as Z,FieldName as ee,ExpandableFieldBody as ne,PanelAnnotation as F,InlineCode as re}from"./styled.js";import{ViewNested as G}from"./ViewNested.js";import{LazyMount as V}from"../common/LazyMount.js";import{GraphQLTypeViewByName as oe}from"./GraphQLTypeView.js";import{GraphQLReturnTypeDetails as te}from"./GraphQLReturnTypeDetails.js";import{GraphQLArgumentsSection as se}from"./GraphQLArgumentsSection.js";import{RequiresScopesButton as ae}from"./RequiresScopesButton.js";import{renderDescription as ie}from"./renderDescription.js";import{Markdown as pe}from"../common/Markdown.js";import{DeepLinkAnchor as me}from"../common/DeepLinkAnchor.js";import{buildGraphqlSuffix as ce,getDeepLinkId as de,isGraphqlDeepLinkAncestor as le}from"../../utils/deep-link.js";import{useDeepLinkUrl as ue}from"../../hooks/useDeepLinkSection.js";import{useSpecTranslate as he}from"../../hooks/useTranslate.js";import{globalOptionsAtom as ge}from"../../jotai/store.js";import{graphqlTypeLookupAtom as fe}from"../../jotai/graphql.js";import{mergeRequiresScopes as xe}from"../../utils/graphql-scopes.js";import{countNamedTypeFields as Le,isGraphqlFieldExpandable as ye}from"../../utils/graphql-type-expansion.js";import{isWithinExpansionLevel as Te}from"../../utils/expansion.js";import{useMarkdownAdapter as Ee}from"../../contexts/markdownAdapter.js";import{useUrlHash as qe}from"../../hooks/useUrlHash.js";const B=72;function ke({field:e,contrast:x,isArgument:t,fieldExpandLevel:s,parentTypeName:r,parentRequiresScopes:l,expanded:a}){const{fieldExpandLevel:M,schemasExpansionLevel:b}=H(ge),L=H(fe),y=Ee(),o=he(),T=s+1,i=r?`${r}.${e.name}`:e.name,u=qe(),E=K(u);u&&(E.current=u);const p=le(E.current,i),m=Te(s,b,0),[I,q]=$(void 0),[Q,k]=$(void 0);z(()=>{q(void 0),k(void 0)},[a]);const h=I??a??(p||m),w=Q??a??(p||m),A=!!e.deprecationReason,D=f(()=>e.deprecationReason?y.parse(e.deprecationReason)??null:null,[e.deprecationReason,y]),U=!!t&&!!e.required,c=e.args??[],v=c.length>0,_=Le(e.type.name,L)*B,j=c.length*B,R=ye(e,s,M,L),C=!R||!h,N=t?r?`arg-${r}-${e.name}`:`arg-${e.name}`:r?`${r}-${e.name}`:e.name,O=c.map(S=>({name:S.name,required:!!S.required})),P=f(()=>l!==void 0?xe(e.requiresScopes,l):null,[e.requiresScopes,l]),W=f(()=>ce({t:t?"argument":"field",path:i,arg:t?e.name:void 0}),[i,t,e.name]),g=ue(W);return n("div",{id:de(g)??N,children:d(Y,{$showBorder:C,children:[d(Z,{children:[g&&n(me,{to:g,label:`link to ${e.name}`,variant:"field"}),n(ee,{$isDeprecated:A,children:e.name}),n(te,{typeRef:e.type,inline:!v,deprecated:A,required:U})]}),e.defaultValue!==void 0&&d(F,{children:[o("defaultValue","Default"),":"," ",n(re,{children:JSON.stringify(e.defaultValue)})]}),e.description&&n(F,{children:ie(e.description)}),D&&n(X,{type:"warning",name:o("deprecationReason","Deprecation reason"),children:n(pe,{source:D})}),R&&d(ne,{$contrast:!x,children:[v&&n(G,{expanded:w,level:s,expandText:o("arguments.show","Show arguments"),collapseText:o("arguments.hide","Hide arguments"),collapsedArgs:O,onClick:()=>k(!w),children:n(V,{forceMount:p||m,estimatedHeight:j,children:n(se,{args:c,fieldExpandLevel:T,parentName:i,expanded:a})})}),n(G,{expanded:h,level:s,expandText:o("returnTypes.show","Show return type"),collapseText:o("returnTypes.hide","Hide return type"),onClick:()=>q(!h),children:n(V,{forceMount:p||m,estimatedHeight:_,children:n(oe,{typeName:e.type.name,contrast:!x,fieldExpandLevel:T,expanded:a,parentPath:i})})})]}),n(ae,{directive:P})]})})}const ze=J(ke);export{ze as GraphQLFieldView};

package/lib/components/graphql/RequiresScopesModal.js

@@ -3,14 +3,14 @@ import{jsx as r,jsxs as a}from"react/jsx-runtime";import{useRef as b,memo as u,F
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: var(--z-index-popover, 1000);
+  z-index: var(--z-index-popover, 200);
   left: 0;
   top: 0;
   pointer-events: auto;
 `,B=o.div`
   background: var(--bg-color);
   box-shadow: var(--bg-raised-shadow, 0 8px 32px rgba(0, 0, 0, 0.15));
-  border-radius: var(--border-radius-lg, 12px);
+  border-radius: var(--border-radius-lg);
   padding: var(--spacing-lg);
   display: flex;
   flex-direction: column;
@@ -58,7 +58,7 @@ import{jsx as r,jsxs as a}from"react/jsx-runtime";import{useRef as b,memo as u,F
   line-height: var(--line-height-base);
   font-family: var(--font-family-monospaced);
   padding: 0 var(--spacing-xxs, 4px);
-  border-radius: var(--border-radius);
+  border-radius: var(--tag-border-radius);
   background: var(--tag-bg-color, var(--border-color-secondary));
   color: var(--text-color-secondary);
 `,T=o.p`

package/lib/components/graphql/sections/GraphQLArgsSection.js

@@ -1,4 +1,4 @@
-import{Fragment as p,jsx as r,jsxs as u}from"react/jsx-runtime";import{useMemo as v}from"react";import{useAtomValue as s}from"jotai";import{styled as y}from"styled-components";import{Admonition as b}from"@redocly/theme/components/Admonition/Admonition";import{graphqlDirectiveDataAtom as F,graphqlOperationAtom as N,graphqlOperationKey as D,graphqlTypeLookupAtom as E}from"../../../jotai/graphql.js";import{GraphQLFieldView as x}from"../GraphQLFieldView.js";import{renderDescription as R}from"../renderDescription.js";import{Markdown as T}from"../../common/Markdown.js";import{FieldNameBox as S,FieldName as k,PanelAnnotation as q,InlineCode as L}from"../styled.js";import{useSpecTranslate as O}from"../../../hooks/useTranslate.js";import{useCollapsibleEntryKey as w,useExpandableSection as V,useRegisterCollapsibleEntry as j}from"../../../hooks/useExpandableSection.js";import{isGraphqlFieldExpandable as C}from"../../../utils/graphql-type-expansion.js";import{globalOptionsAtom as G}from"../../../jotai/store.js";import{useMarkdownAdapter as M}from"../../../index.js";function ae({node:e}){const{fieldExpandLevel:o}=s(G),d=s(E),a=s(N(D(e.graphqlOperationType,e.graphqlFieldName))),i=!!e.graphqlTypeName&&e.graphqlOperationType==null&&e.graphqlFieldName==null,f=s(F(i?e.graphqlTypeName??"":"")),t=a?.args??null,l=f?.args??null,h=(t?.length?t:l)??null,g=!!h&&h.some(n=>C(n,0,o,d)),m=V(e.variant,g);if(j(w(g?e.variant:void 0),!!m),t&&t.length>0)return r(p,{children:t.map(n=>r(x,{field:n,isArgument:!0,fieldExpandLevel:0,parentTypeName:e.graphqlFieldName,parentRequiresScopes:a?a.requiresScopes??null:void 0,expanded:m},n.name))});if(l&&l.length>0){const n=`@${f?.name}`;return r(p,{children:l.map(A=>r(x,{field:A,isArgument:!0,fieldExpandLevel:0,parentTypeName:n,expanded:m},A.name))})}const c=e.graphqlSchema;return!Array.isArray(c)||c.length===0?r(p,{}):r(p,{children:c.map(n=>r(_,{arg:n},n.name))})}function _({arg:e}){const o=O(),d=!!e.deprecationReason,a=M(),i=v(()=>e.deprecationReason?a.parse(e.deprecationReason)??null:null,[e.deprecationReason,a]);return u(z,{children:[u(S,{children:[r(k,{$isDeprecated:d,children:e.name}),r(B,{children:e.type})]}),e.defaultValue!==void 0&&u(q,{children:[o("defaultValue","Default"),":"," ",r(L,{children:JSON.stringify(e.defaultValue)})]}),e.description!=null&&e.description!==""&&r(q,{children:R(e.description)}),i&&r(b,{type:"warning",name:o("deprecationReason","Deprecation reason"),children:r(T,{source:i})})]})}const z=y.div`
+import{Fragment as p,jsx as r,jsxs as u}from"react/jsx-runtime";import{useMemo as v}from"react";import{useAtomValue as s}from"jotai";import{styled as y}from"styled-components";import{Admonition as b}from"@redocly/theme/components/Admonition/Admonition";import{graphqlDirectiveDataAtom as F,graphqlOperationAtom as N,graphqlOperationKey as D,graphqlTypeLookupAtom as E}from"../../../jotai/graphql.js";import{GraphQLFieldView as x}from"../GraphQLFieldView.js";import{renderDescription as R}from"../renderDescription.js";import{Markdown as T}from"../../common/Markdown.js";import{FieldNameBox as S,FieldName as k,PanelAnnotation as q,InlineCode as L}from"../styled.js";import{useSpecTranslate as O}from"../../../hooks/useTranslate.js";import{useCollapsibleEntryKey as w,useExpandableSection as V,useRegisterCollapsibleEntry as j}from"../../../hooks/useExpandableSection.js";import{isGraphqlFieldExpandable as C}from"../../../utils/graphql-type-expansion.js";import{globalOptionsAtom as G}from"../../../jotai/store.js";import{useMarkdownAdapter as M}from"../../../contexts/markdownAdapter.js";function ae({node:e}){const{fieldExpandLevel:o}=s(G),d=s(E),a=s(N(D(e.graphqlOperationType,e.graphqlFieldName))),i=!!e.graphqlTypeName&&e.graphqlOperationType==null&&e.graphqlFieldName==null,f=s(F(i?e.graphqlTypeName??"":"")),t=a?.args??null,l=f?.args??null,h=(t?.length?t:l)??null,g=!!h&&h.some(n=>C(n,0,o,d)),m=V(e.variant,g);if(j(w(g?e.variant:void 0),!!m),t&&t.length>0)return r(p,{children:t.map(n=>r(x,{field:n,isArgument:!0,fieldExpandLevel:0,parentTypeName:e.graphqlFieldName,parentRequiresScopes:a?a.requiresScopes??null:void 0,expanded:m},n.name))});if(l&&l.length>0){const n=`@${f?.name}`;return r(p,{children:l.map(A=>r(x,{field:A,isArgument:!0,fieldExpandLevel:0,parentTypeName:n,expanded:m},A.name))})}const c=e.graphqlSchema;return!Array.isArray(c)||c.length===0?r(p,{}):r(p,{children:c.map(n=>r(_,{arg:n},n.name))})}function _({arg:e}){const o=O(),d=!!e.deprecationReason,a=M(),i=v(()=>e.deprecationReason?a.parse(e.deprecationReason)??null:null,[e.deprecationReason,a]);return u(z,{children:[u(S,{children:[r(k,{$isDeprecated:d,children:e.name}),r(B,{children:e.type})]}),e.defaultValue!==void 0&&u(q,{children:[o("defaultValue","Default"),":"," ",r(L,{children:JSON.stringify(e.defaultValue)})]}),e.description!=null&&e.description!==""&&r(q,{children:R(e.description)}),i&&r(b,{type:"warning",name:o("deprecationReason","Deprecation reason"),children:r(T,{source:i})})]})}const z=y.div`
   padding: var(--spacing-base) 0;
   border-bottom: 1px solid var(--border-color-primary);
 `,B=y.span`

package/lib/components/panels/ExampleItem/CodeSampleItem.js

@@ -1 +1 @@
-import{Fragment as je,jsx as n,jsxs as ie}from"react/jsx-runtime";import{useState as Ge,useMemo as m,useCallback as W,useEffect as Fe,useContext as We}from"react";import{useAtom as ce}from"jotai";import{useAtomValue as L,useSetAtom as _e}from"jotai";import{buildCodeSampleHAR as He,tryGenerateCodeSample as ze,mapReplayAtomValuesToHarRequestValues as Je,useCodeSampleResolvers as Ye}from"../../../services/code-samples/index.js";import{findExampleIdByKey as Qe}from"../../../services/code-samples/example-key.js";import{exampleStoreAtom as Xe}from"../../../jotai/examples.js";import{itemStoreAtom as Ze,itemStoreFieldAtom as et}from"../../../jotai/itemStore.js";import{ItemIdContext as tt}from"../../../hooks/useDeepLinkSection.js";import{DEFAULT_LANGUAGES as pe,getGeneratorKey as rt,getLangKey as B,getSyntaxHighlightLang as at}from"../../../utils/languages.js";import{useSpecTranslate as ot}from"../../../hooks/useTranslate.js";import{CodeBlockPanel as st,StyledCodeBlock as nt}from"../styled.js";import{useResolvedExamples as lt}from"../../ItemContent/hooks.js";import{languageAtom as it,environmentAtom as ct,selectedSecuritySchemeIdxAtom as pt,requestValuesAtom as mt}from"../../../jotai/app.js";import{useActiveVariantSchemaId as dt,useSchemaVariantSelection as ut,useMediaTypeContent as yt}from"./hooks.js";import{isSequentialMediaType as ft}from"../../../utils/media-type.js";import{isRecord as me}from"../../../adapters/helpers.js";import{updateObjectProperties as ht}from"../../../adapters/openapi/configure/merge-utils.js";import{useCopyCodeTelemetry as St}from"../../../hooks/useCopyCodeTelemetry.js";import{VariantPicker as gt,ExampleDescription as vt,ExampleSelector as xt,MediaTypeSelector as kt,PanelDropdownSelect as bt,PayloadDisplay as Et}from"./selectors.js";import{LanguageDropdown as Vt}from"../LanguageItem/LanguageDropdown.js";import{StyledPanelHeader as At,TryItPanelFooter as Ct}from"./styled.js";import{MediaTypeRow as qt}from"./styled.js";import{ServerDropdown as Lt}from"./ServerDropdown.js";import{replaceServerVariables as It,serverMatchesUrl as Tt}from"../../../services/code-samples/server-variables.js";import{globalOptionsAtom as Rt}from"../../../jotai/store.js";import{createLanguageSwitchEvent as Ut}from"../../../events/languageSwitch.js";import{createCodeSampleCopyEvent as $t}from"../../../events/codeSampleCopy.js";import{Replay as Dt}from"../../Replay/index.js";import{useOpenApiDefinition as Ot}from"../../../hoc/withReplayPrefetch.js";import{pickReplayDefinitionDownloadUrl as Pt}from"../../../utils/fetch-openapi-definition.js";const _=pe.find(r=>r.key==="payload")??pe[0],de=[{key:_.key,lang:_.lang,title:_.label}];function Sr({node:r}){const[{activeLanguage:g,languages:c},v]=ce(it),s=L(Rt),x=ot(),ue=Ot(),K=r.isWebhook?"payload":g||"curl",H=Ye(),t=r.source,E=r.definitionSamples,ye=L(mt),S=L(Xe),fe=`${t.method.toLowerCase()}:${t.path}`,I=ye[fe],z=I?.activeExampleName,T=typeof z=="string"?z:void 0,{mediaTypes:J,activeMediaType:d,effectiveSchemaId:R,effectiveExampleIds:i,onMediaTypeChange:he}=yt(r),Se=r.isWebhook?"response":"request",ge=ut(i?.length?void 0:R),ve=dt(R),xe=ft(d)?R:ve,Y=lt(xe,i,Se,d),Q=We(tt)??"",U=_e(Ze(Q)),ke=L(et({itemId:Q,key:"activeExampleKey"}));Fe(()=>{if(!T)return;const e=S[T]?.key??T;U({activeExampleKey:e})},[T,S,U]);const k=`${d}|${i?.join(",")}`,X=Qe(i,ke||void 0,e=>S[e]),Z=X?i?.indexOf(X)??-1:-1,[$,ee]=Ge({contentKey:k,idx:0}),V=Z>=0?Z:$.contentKey===k?$.idx:0;($.idx!==V||$.contentKey!==k)&&ee({contentKey:k,idx:V});const be=W(e=>{ee({contentKey:k,idx:e});const a=i?.[e],o=a?S[a]?.key:void 0;U({activeExampleKey:o??""})},[k,i,S,U]),A=Y[V]??Y[0],te=(i?.length??0)>0||!!R,D=m(()=>{if(!E?.length)return E;const e=new Set((c??[]).map(a=>a.key));return E.filter(a=>e.has(B(a)))},[E,c]),f=m(()=>{const e=(c??[]).map(({key:o,lang:l,title:q})=>({key:o,lang:l,title:q}));let a=te?e:e.filter(o=>o.key!=="payload");if(r.isWebhook){const o=new Set(D?.map(l=>B(l))??[]);a=a.filter(l=>l.key==="payload"||o.has(l.key))}return a},[te,c,r.isWebhook,D]),u=m(()=>(f.some(e=>e.key===K)?K:f[0]?.key)??"curl",[f,K]),O=L(ct),{activeServerUrl:re,activeServerSpecUrl:h}=m(()=>{const e=O[0].server,a=e?r.servers?.find(l=>Tt(l,e)):void 0;if(e&&a)return{activeServerUrl:e,activeServerSpecUrl:a.url};const o=r.servers?.[0];return o?{activeServerUrl:It(o),activeServerSpecUrl:o.url}:{activeServerUrl:t.servers[0]?.url,activeServerSpecUrl:t.servers[0]?.url}},[O,r.servers,t.servers]),[M,Ee]=ce(pt),p=t.securityGroups,Ve=!!(p&&p.length>1),ae=m(()=>{if(!p?.length)return;const e=p.length>1?p[M]??p[0]:p[0];return Object.keys(e)},[p,M]),oe=m(()=>{const e=Je(I??{});return t.requestValues?.security?{...e,security:t.requestValues.security}:e},[I,t.requestValues?.security]),C=I?.body,P=i?.[V],w=P?S[P]?.key??P:void 0,b=m(()=>{const e=t.requestValues?.serverBody;return(h&&e?.[h])??t.requestValues?.body},[h,t.requestValues?.body,t.requestValues?.serverBody]),Ae=m(()=>C!==void 0?wt(C):b!==void 0?A===void 0?b:me(A)&&me(b)?ht(A,b):b:A,[C,A,b]),Ce=m(()=>{if(u==="payload")return"";const e=D?.find(y=>B(y)===u);if(e){let y=e.source;const F=t.requestValues?.envVariables,Be=t.requestValues?.serverEnvVariables,Ke={...F,...h&&Be?.[h]};for(const[Me,Ne]of Object.entries(Ke))y=y.replaceAll(`{{${Me}}}`,Ne);return y}const a=He(t,{serverUrl:re,mediaType:d,environment:O[0]??{},requestValues:oe,activeSecuritySchemeIds:ae,replayBody:C,exampleName:w},{skipOptionalParameters:s.codeSamples?.skipOptionalParameters,withOAuth2Call:s.codeSamples?.withOAuth2Call,generatedPayloadSamplesMaxDepth:s.generatedSamplesMaxDepth},H),o=s.codeSamples?.languages?.find(y=>y.key===u),l=ze(o?rt(o):u,a,o?.options);if(l.kind==="unsupported-language")return`// ${x("unsupportedLanguage","Language is not supported.")}`;if(l.kind==="error")return console.error(l.error),`// ${x("failedToGenerateCodeSample","Failed to generate code sample.")}`;let q=l.source;const Oe=t.requestValues?.envVariables,Pe=t.requestValues?.serverEnvVariables,we={...Oe,...h&&Pe?.[h]};for(const[y,F]of Object.entries(we))q=q.replaceAll(`{{${y}}}`,F);return q},[u,D,t,re,h,d,O,s,H,oe,ae,C,w,x]),N=f.find(e=>e.key===u)??f[0],se=E?.find(e=>B(e)===u),j=se?.lang??N?.lang,qe=j&&at(j),ne=St("request"),Le=W(e=>()=>{ne(e)(),s.events?.codeSamplesCopy?.($t({operation:{id:`${t.method}:${t.path}`,path:t.path,httpVerb:t.method,name:`${t.method.toUpperCase()} ${t.path}`},type:"request",lang:e??"",label:N?.title??"",activeMimeName:d??"",activeExampleName:w}))},[ne,s.events,t.method,t.path,N,d,w]),Ie=W(e=>{v(e);const a=(r.isWebhook?de:f).find(o=>o.key===e);s.events?.codeSamplesLanguageSwitch&&a&&s.events.codeSamplesLanguageSwitch(Ut({operation:{id:`${t.method}:${t.path}`,path:t.path,httpVerb:t.method,name:`${t.method.toUpperCase()} ${t.path}`},sample:{lang:a.lang,label:a.title}}))},[v,f,r.isWebhook,s.events,t.method,t.path]),Te=t.method,Re=t.path,le=!(s.hideReplay||r.hideReplay)&&!r.isWebhook&&!!(ue??Pt(s.downloadUrls)),G=u==="payload",Ue=!G&&!!se,$e=(i?.length??0)>0,De=m(()=>le?n(Ct,{children:n(Dt,{node:r})}):void 0,[le,r]);return n(je,{children:ie(st,{className:"panel-request-samples",footer:De,header:()=>ie(At,{isExpandable:!1,children:[n(Lt,{servers:r.servers??[],method:Te,path:Re}),n(Vt,{activeTab:u,samples:r.isWebhook?de:f,onChange:Ie})]}),isExpandable:!1,children:[Ve&&p&&n(Bt,{requirements:p,activeIdx:M,onSelect:Ee}),J.length>1&&n(kt,{mediaTypes:J,value:d,onChange:he,label:G?x("contentType","Payload media type"):x("contentType","Request media type")}),!Ue&&!$e&&n(gt,{selection:ge}),n(xt,{exampleIds:i,selectedIdx:V,onSelect:be}),n(vt,{description:S[P??""]?.description}),G?n(Et,{payload:Ae,emptyMessage:`// ${x("noRequestPayload","No request payload")}`,mediaType:d,snippetType:"request"}):n(nt,{lang:qe,source:Ce,header:{className:"code-block-header",controls:{copy:{onClick:Le(j)}}}})]})})}function wt(r){if(typeof r!="string")return r;const g=r.trim();if(!g)return r;try{const c=JSON.parse(g);if(c!==null&&typeof c=="object")return c}catch{}return r}function Bt({requirements:r,activeIdx:g,onSelect:c}){return n(qt,{children:n(bt,{value:String(g),onChange:v=>c(Number(v)),"aria-label":"Security scheme",options:r.map((v,s)=>({key:String(s),value:String(s),label:Object.keys(v).join(" + ")||`Scheme ${s+1}`}))})})}export{Sr as CodeSampleItem};
+import{Fragment as le,jsx as s,jsxs as j}from"react/jsx-runtime";import{useState as ce,useMemo as T,useCallback as V,useContext as de}from"react";import{useEffect as ue}from"react";import{useAtomValue as I,useSetAtom as ye}from"jotai";import{applyEnvVariables as fe}from"../../../services/code-samples/apply-env-variables.js";import{findExampleIdByKey as he}from"../../../services/code-samples/example-key.js";import{itemStoreAtom as Se,itemStoreFieldAtom as ge}from"../../../jotai/itemStore.js";import{ItemIdContext as xe}from"../../../hooks/useDeepLinkSection.js";import{useSpecTranslate as ve}from"../../../hooks/useTranslate.js";import{CodeBlockPanel as Ce,StyledCodeBlock as Ee}from"../styled.js";import{useResolvedExamples as be}from"../../ItemContent/hooks.js";import{getLangKey as G,getSyntaxHighlightLang as Ie}from"../../../utils/languages.js";import{selectedSecuritySchemeIdxAtom as qe}from"../../../jotai/app.js";import{exampleStoreAtom as Le}from"../../../jotai/examples.js";import{useActiveVariantSchemaId as ke,useSchemaVariantSelection as Te,useMediaTypeContent as Ve}from"./hooks.js";import{isSequentialMediaType as Ae}from"../../../utils/media-type.js";import{isRecord as O}from"../../../adapters/helpers.js";import{updateObjectProperties as Be}from"../../../adapters/openapi/configure/merge-utils.js";import{useCopyCodeTelemetry as $e}from"../../../hooks/useCopyCodeTelemetry.js";import{VariantPicker as Ke,ExampleDescription as Ne,ExampleSelector as Pe,MediaTypeSelector as Ue,PayloadDisplay as Me}from"./selectors.js";import{LanguageDropdown as Re}from"../LanguageItem/LanguageDropdown.js";import{StyledPanelHeader as we}from"./styled.js";import{ServerDropdown as De}from"./ServerDropdown.js";import{globalOptionsAtom as Fe}from"../../../jotai/store.js";import{createLanguageSwitchEvent as je}from"../../../events/languageSwitch.js";import{createCodeSampleCopyEvent as Ge}from"../../../events/codeSampleCopy.js";import{useActiveServer as Oe}from"./useActiveServer.js";import{useCodeSampleLanguages as We,WEBHOOK_LANGUAGE_SAMPLES as W}from"./useCodeSampleLanguages.js";import{useReplayRequestState as _e}from"./useReplayRequestState.js";import{useTryItFooter as He}from"./useTryItFooter.js";import{generateRequestSample as ze}from"./generate-request-sample.js";import{SecuritySchemeSelector as Je}from"./SecuritySchemeSelector.js";function Tt({node:o}){const l=I(Fe),d=ve(),e=o.source,c=I(Le),{mediaTypes:A,activeMediaType:n,effectiveSchemaId:x,effectiveExampleIds:a,onMediaTypeChange:_}=Ve(o),H=o.isWebhook?"response":"request",z=Te(a?.length?void 0:x),J=ke(x),Q=Ae(n)?x:J,B=be(Q,a,H,n),$=de(xe)??"",v=ye(Se($)),X=I(ge({itemId:$,key:"activeExampleKey"})),r=_e(e),Y=He(o);ue(()=>{if(!r.exampleName)return;const t=c[r.exampleName]?.key??r.exampleName;v({activeExampleKey:t})},[r.exampleName,c,v]);const u=`${n}|${a?.join(",")}`,K=he(a,X||void 0,t=>c[t]),N=K?a?.indexOf(K)??-1:-1,[C,P]=ce({contentKey:u,idx:0}),f=N>=0?N:C.contentKey===u?C.idx:0;(C.idx!==f||C.contentKey!==u)&&P({contentKey:u,idx:f});const Z=V(t=>{P({contentKey:u,idx:t});const i=a?.[t],g=i?c[i]?.key:void 0;v({activeExampleKey:g??""})},[u,a,c,v]),h=B[f]??B[0],ee=(a?.length??0)>0||!!x,{languages:S,filteredDefinitionSamples:U,activeLanguage:m,setLanguage:M}=We(o,ee),p=Oe(o),R=I(qe),w=e.securityGroups,E=a?.[f],b=E?c[E]?.key??E:void 0,y=T(()=>{const t=e.requestValues?.serverBody;return(p.specUrl&&t?.[p.specUrl])??e.requestValues?.body},[p.specUrl,e.requestValues?.body,e.requestValues?.serverBody]),te=T(()=>r.displayBody!==void 0?r.displayBody:y!==void 0?h===void 0?y:O(h)&&O(y)?Be(h,y):y:h,[r.displayBody,h,y]),oe=T(()=>{if(m==="payload")return"";const t=U?.find(g=>G(g)===m);if(t)return fe(t.source,e.requestValues,p.specUrl);let i;return i=ze({source:e,activeLanguage:m,serverUrl:p.url,activeServerSpecUrl:p.specUrl,mediaType:n,environment:p.environment[0]??{},harRequestValues:r.harRequestValues,securityGroups:w,securityIdx:R,replayBody:r.body,exampleName:b,options:l,resolvers:r.resolvers,translate:d}),i??`// ${d("unsupportedLanguage","Language is not supported.")}`},[m,U,e,p,d,n,r,w,R,b,l]),q=S.find(t=>t.key===m)??S[0],D=o.definitionSamples?.find(t=>G(t)===m),L=D?.lang??q?.lang,ae=L&&Ie(L),F=$e("request"),re=V(t=>()=>{F(t)(),l.events?.codeSamplesCopy?.(Ge({operation:{id:`${e.method}:${e.path}`,path:e.path,httpVerb:e.method,name:`${e.method.toUpperCase()} ${e.path}`},type:"request",lang:t??"",label:q?.title??"",activeMimeName:n??"",activeExampleName:b}))},[F,l.events,e.method,e.path,q,n,b]),se=V(t=>{M(t);const i=(o.isWebhook?W:S).find(g=>g.key===t);l.events?.codeSamplesLanguageSwitch&&i&&l.events.codeSamplesLanguageSwitch(je({operation:{id:`${e.method}:${e.path}`,path:e.path,httpVerb:e.method,name:`${e.method.toUpperCase()} ${e.path}`},sample:{lang:i.lang,label:i.title}}))},[M,S,o.isWebhook,l.events,e.method,e.path]),ne=e.method,ie=e.path,k=m==="payload",me=!k&&!!D,pe=(a?.length??0)>0;return s(le,{children:j(Ce,{className:"panel-request-samples",footer:Y,header:()=>j(we,{isExpandable:!1,children:[s(De,{servers:o.servers??[],method:ne,path:ie}),s(Re,{activeTab:m,samples:o.isWebhook?W:S,onChange:se})]}),isExpandable:!1,children:[s(Je,{requirements:e.securityGroups}),A.length>1&&s(Ue,{mediaTypes:A,value:n,onChange:_,label:k?d("contentType","Payload media type"):d("contentType","Request media type")}),!me&&!pe&&s(Ke,{selection:z}),s(Pe,{exampleIds:a,selectedIdx:f,onSelect:Z}),s(Ne,{description:c[E??""]?.description}),k?s(Me,{payload:te,emptyMessage:`// ${d("noRequestPayload","No request payload")}`,mediaType:n,snippetType:"request"}):s(Ee,{lang:ae,source:oe,header:{className:"code-block-header",controls:{copy:{onClick:re(L)}}}})]})})}export{Tt as CodeSampleItem};

package/lib/components/panels/ExampleItem/SecuritySchemeSelector.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+/**
+ * Picks which OpenAPI `security` AND-group the generated code sample is built
+ * against. Renders nothing unless the operation declares more than one group —
+ * with a single group there is nothing to choose.
+ */
+export declare function SecuritySchemeSelector({ requirements, }: {
+    requirements?: Array<Record<string, string[]>>;
+}): ReactElement | null;

package/lib/components/panels/ExampleItem/SecuritySchemeSelector.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useAtom as m}from"jotai";import{selectedSecuritySchemeIdxAtom as n}from"../../../jotai/app.js";import{PanelDropdownSelect as l}from"./selectors.js";import{MediaTypeRow as a}from"./styled.js";function h({requirements:e}){const[c,i]=m(n);return!e||e.length<=1?null:r(a,{children:r(l,{value:String(c),onChange:t=>i(Number(t)),"aria-label":"Security scheme",options:e.map((t,o)=>({key:String(o),value:String(o),label:Object.keys(t).join(" + ")||`Scheme ${o+1}`}))})})}export{h as SecuritySchemeSelector};

package/lib/components/panels/ExampleItem/ServerDropdown.js

@@ -1,4 +1,4 @@
-import{jsx as i,jsxs as p}from"react/jsx-runtime";import{useCallback as f,useEffect as P,useMemo as g}from"react";import{useAtom as $,useAtomValue as h}from"jotai";import{styled as S}from"styled-components";import{getOperationColor as D}from"@redocly/theme/core/openapi";import{breakpoints as M}from"@redocly/theme/core/openapi";import{Dropdown as V}from"@redocly/theme/components/Dropdown/Dropdown";import{DropdownMenu as W}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as B}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{CopyButton as I}from"@redocly/theme/components/Buttons/CopyButton";import{environmentAtom as L,savedEnvironmentNameAtom as O}from"../../../jotai/app.js";import{resolveServerUrl as w}from"../../../services/code-samples/replay/normalize-servers.js";import{replaceServerVariables as q}from"../../../services/code-samples/server-variables.js";import{getServerEnvName as T}from"../../../utils/environments.js";import{globalOptionsAtom as _}from"../../../jotai/store.js";import{useTelemetry as H}from"../../../hooks/useTelemetry.js";import{createTargetServerSwitchEvent as R}from"../../../events/serverSwitch.js";import{PanelItem as z}from"../../common/PanelItem.js";import{HttpVerb as U,PathLabel as C,PathWrapper as F,StaticPathWrapper as G}from"./styled.js";function J(o="",n="",t="/"){return o.endsWith(t)&&o!==t&&(o=o.slice(0,-t.length)),n.startsWith(t)&&(n=n.slice(t.length)),!o||!n||o===t?o+n:o+t+n}const K=S(B)`
+import{jsx as i,jsxs as p}from"react/jsx-runtime";import{useCallback as f,useEffect as P,useMemo as g}from"react";import{useAtom as $,useAtomValue as h}from"jotai";import{styled as S}from"styled-components";import{getOperationColor as D}from"@redocly/theme/core/openapi";import{breakpoints as M}from"@redocly/theme/core/openapi";import{Dropdown as V}from"@redocly/theme/components/Dropdown/Dropdown";import{DropdownMenu as W}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as B}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{CopyButton as I}from"@redocly/theme/components/Buttons/CopyButton";import{environmentAtom as L,savedEnvironmentNameAtom as O}from"../../../jotai/app.js";import{resolveServerUrl as w}from"../../../services/code-samples/normalize-servers.js";import{replaceServerVariables as q}from"../../../services/code-samples/server-variables.js";import{getServerEnvName as T}from"../../../utils/environments.js";import{globalOptionsAtom as _}from"../../../jotai/store.js";import{useTelemetry as H}from"../../../hooks/useTelemetry.js";import{createTargetServerSwitchEvent as R}from"../../../events/serverSwitch.js";import{PanelItem as z}from"../../common/PanelItem.js";import{HttpVerb as U,PathLabel as C,PathWrapper as F,StaticPathWrapper as G}from"./styled.js";function J(o="",n="",t="/"){return o.endsWith(t)&&o!==t&&(o=o.slice(0,-t.length)),n.startsWith(t)&&(n=n.slice(t.length)),!o||!n||o===t?o+n:o+t+n}const K=S(B)`
   padding: calc(var(--spacing-unit) * 1.5) var(--spacing-xs) calc(var(--spacing-unit) * 1.5)
     var(--spacing-lg);
   @media screen and (max-width: ${M.large}) {

package/lib/components/panels/ExampleItem/generate-request-sample.d.ts

@@ -0,0 +1,28 @@
+import type { CodeSampleSource } from '../../../services/code-samples/index.js';
+import type { HARBuildResolvers, HARBuildSelections } from '../../../services/code-samples/index.js';
+import type { ApiDocsOptions } from '../../../types/options.js';
+type GenerateRequestSampleParams = {
+    source: CodeSampleSource;
+    activeLanguage: string;
+    serverUrl: string | undefined;
+    /** Raw (templated) spec URL of the active server — keys the env-variable overrides. */
+    activeServerSpecUrl: string | undefined;
+    mediaType: string | undefined;
+    environment: HARBuildSelections['environment'];
+    harRequestValues: HARBuildSelections['requestValues'];
+    securityGroups: CodeSampleSource['securityGroups'];
+    securityIdx: number;
+    replayBody: unknown;
+    exampleName: string | undefined;
+    options: ApiDocsOptions;
+    resolvers: HARBuildResolvers;
+    translate: (key: string, fallback: string) => string;
+};
+/**
+ * Builds the generated (non-`x-codeSamples`) request sample for the active
+ * language. Excluded from the community edition — only spec-provided samples
+ * and the payload view render there. Returns `undefined` for languages
+ * without a generator.
+ */
+export declare function generateRequestSample({ source, activeLanguage, serverUrl, activeServerSpecUrl, mediaType, environment, harRequestValues, securityGroups, securityIdx, replayBody, exampleName, options, resolvers, translate, }: GenerateRequestSampleParams): string | undefined;
+export {};

package/lib/components/panels/ExampleItem/generate-request-sample.js

@@ -0,0 +1 @@
+import{getGeneratorKey as C}from"../../../utils/languages.js";import{buildCodeSampleHAR as O,tryGenerateCodeSample as y}from"../../../services/code-samples/index.js";import{applyEnvVariables as b}from"../../../services/code-samples/apply-env-variables.js";function P({source:l,activeLanguage:n,serverUrl:o,activeServerSpecUrl:d,mediaType:m,environment:p,harRequestValues:i,securityGroups:e,securityIdx:s,replayBody:u,exampleName:S,options:a,resolvers:c,translate:f}){const h=e?.length?Object.keys(e.length>1?e[s]??e[0]:e[0]):void 0,g=O(l,{serverUrl:o,mediaType:m,environment:p,requestValues:i,activeSecuritySchemeIds:h,replayBody:u,exampleName:S},{skipOptionalParameters:a.codeSamples?.skipOptionalParameters,withOAuth2Call:a.codeSamples?.withOAuth2Call,generatedPayloadSamplesMaxDepth:a.generatedSamplesMaxDepth},c),r=a.codeSamples?.languages?.find(k=>k.key===n),t=y(r?C(r):n,g,r?.options);if(t.kind!=="unsupported-language")return t.kind==="error"?(console.error(t.error),`// ${f("failedToGenerateCodeSample","Failed to generate code sample.")}`):b(t.source,l.requestValues,d)}export{P as generateRequestSample};

package/lib/components/panels/ExampleItem/styled.d.ts

@@ -21,55 +21,7 @@ export declare const PathLabel: import("styled-components/dist/types").IStyledCo
 export declare const ResponsePanelHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const MediaTypeRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const DisabledMimeSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>>> & string;
-export declare const StyledSelectDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
-    trigger: React.ReactNode;
-    triggerEvent?: 'click' | 'hover';
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    active?: boolean;
-    closeOnClick?: boolean;
-    dataAttributes?: Record<string, string>;
-    className?: string;
-    withArrow?: boolean;
-    portalled?: boolean;
-    onClick?: (event: React.UIEvent) => void;
-    onClose?: () => void;
-    onOpen?: () => void;
-} & {
-    children?: React.ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<{
-    trigger: React.ReactNode;
-    triggerEvent?: 'click' | 'hover';
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    active?: boolean;
-    closeOnClick?: boolean;
-    dataAttributes?: Record<string, string>;
-    className?: string;
-    withArrow?: boolean;
-    portalled?: boolean;
-    onClick?: (event: React.UIEvent) => void;
-    onClose?: () => void;
-    onOpen?: () => void;
-} & {
-    children?: React.ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<import("react").ForwardRefExoticComponent<{
-    trigger: React.ReactNode;
-    triggerEvent?: 'click' | 'hover';
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    active?: boolean;
-    closeOnClick?: boolean;
-    dataAttributes?: Record<string, string>;
-    className?: string;
-    withArrow?: boolean;
-    portalled?: boolean;
-    onClick?: (event: React.UIEvent) => void;
-    onClose?: () => void;
-    onOpen?: () => void;
-} & {
-    children?: React.ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledSelectDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@redocly/theme").DropdownProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("@redocly/theme").DropdownProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<import("react").ForwardRefExoticComponent<import("@redocly/theme").DropdownProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const SelectDropdownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@redocly/theme").DropdownMenuProps & import("styled-components/dist/types").BaseObject, never> & Partial<Pick<import("@redocly/theme").DropdownMenuProps & import("styled-components/dist/types").BaseObject, never>>> & string & Omit<typeof DropdownMenu, keyof import("react").Component<any, {}, any>>;
 export declare const SelectDropdownMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Partial<Pick<import("@redocly/theme").LinkProps, "external" | "target" | "to">> & {
     prefix?: import("react").ReactNode;

package/lib/components/panels/ExampleItem/useActiveServer.d.ts

@@ -0,0 +1,17 @@
+import type { CodeSamplePanelItem } from '../../../types/content.js';
+type ActiveServer = {
+    /** Environment atom value — the first entry holds the active env variables. */
+    environment: [Record<string, string>, string];
+    /** Variable-substituted URL of the active server. */
+    url: string | undefined;
+    /** Raw (templated) spec URL — keys `requestValues.serverBody`/`serverEnvVariables`. */
+    specUrl: string | undefined;
+};
+/**
+ * The active server for the code-sample panel.
+ * `requestValues.serverBody`/`serverEnvVariables` are keyed by the raw
+ * (templated) spec server URL, while the environment may hold the
+ * variable-substituted URL — keep both forms of the active server.
+ */
+export declare function useActiveServer(node: CodeSamplePanelItem): ActiveServer;
+export {};

package/lib/components/panels/ExampleItem/useActiveServer.js

@@ -0,0 +1 @@
+import{useMemo as c}from"react";import{useAtomValue as l}from"jotai";import{environmentAtom as v}from"../../../jotai/app.js";import{replaceServerVariables as m,serverMatchesUrl as i}from"../../../services/code-samples/server-variables.js";function A(e){const t=e.source,r=l(v);return c(()=>{const s=r[0].server,u=s?e.servers?.find(n=>i(n,s)):void 0;if(s&&u)return{environment:r,url:s,specUrl:u.url};const o=e.servers?.[0];return o?{environment:r,url:m(o),specUrl:o.url}:{environment:r,url:t.servers[0]?.url,specUrl:t.servers[0]?.url}},[r,e.servers,t.servers])}export{A as useActiveServer};

package/lib/components/panels/ExampleItem/useCodeSampleLanguages.d.ts

@@ -0,0 +1,23 @@
+import type { CodeSamplePanelItem } from '../../../types/content.js';
+export declare const PAYLOAD_LANGUAGE: import("../../../index.js").Language;
+export declare const WEBHOOK_LANGUAGE_SAMPLES: {
+    key: string;
+    lang: string;
+    title: string;
+}[];
+type LanguageTab = {
+    key: string;
+    lang: string;
+    title: string;
+};
+type CodeSampleLanguages = {
+    /** Language tabs offered for this panel. */
+    languages: LanguageTab[];
+    /** `x-codeSamples` limited to the configured languages. */
+    filteredDefinitionSamples: CodeSamplePanelItem['definitionSamples'];
+    activeLanguage: string;
+    setLanguage: (key: string) => void;
+};
+/** Which language tabs the code-sample panel offers and which one is active. */
+export declare function useCodeSampleLanguages(node: CodeSamplePanelItem, hasPayloadData: boolean): CodeSampleLanguages;
+export {};

package/lib/components/panels/ExampleItem/useCodeSampleLanguages.js

@@ -0,0 +1 @@
+import{useMemo as c}from"react";import{useAtom as b}from"jotai";import{filterAvailableLanguages as E}from"../../../services/code-samples/language-availability.js";import{DEFAULT_LANGUAGES as A,getLangKey as y}from"../../../utils/languages.js";import{languageAtom as h}from"../../../jotai/app.js";const l=A.find(n=>n.key==="payload")??A[0],f={key:l.key,lang:l.lang,title:l.label},O=[f];function W(n,u){const[{activeLanguage:L,languages:o},k]=b(h),r=n.isWebhook?"payload":L||"curl",i=n.definitionSamples,s=c(()=>{if(!i?.length)return i;const a=new Set((o??[]).map(t=>t.key));return i.filter(t=>a.has(y(t)))},[i,o]),g=c(()=>{const a=(o??[]).map(({key:e,lang:S,title:G})=>({key:e,lang:S,title:G}));let t=u?a:a.filter(e=>e.key!=="payload");const m=new Set(s?.map(e=>y(e))??[]);n.isWebhook&&(t=t.filter(e=>e.key==="payload"||m.has(e.key)));const p=E(t,m);return p.length?p:[a.find(e=>e.key===f.key)??f]},[u,o,n.isWebhook,s]),d=g.some(a=>a.key===r)?r:g[0]?.key??r;return{languages:g,filteredDefinitionSamples:s,activeLanguage:d,setLanguage:k}}export{l as PAYLOAD_LANGUAGE,O as WEBHOOK_LANGUAGE_SAMPLES,W as useCodeSampleLanguages};

package/lib/components/panels/ExampleItem/useReplayRequestState.d.ts

@@ -0,0 +1,18 @@
+import type { CodeSampleSource } from '../../../services/code-samples/index.js';
+import type { HARBuildResolvers, HARBuildSelections } from '../../../services/code-samples/index.js';
+type ReplayRequestState = {
+    /** Raw body the user edited in Replay — feeds sample generation. */
+    body: unknown;
+    /** Replay body parsed for PayloadDisplay (JSON strings become objects). */
+    displayBody: unknown;
+    /** Example the user selected in Replay. */
+    exampleName: string | undefined;
+    harRequestValues: HARBuildSelections['requestValues'];
+    resolvers: HARBuildResolvers;
+};
+/**
+ * Request values the user edited in Replay (Try It) for this operation.
+ * Excluded from the community edition.
+ */
+export declare function useReplayRequestState(source: CodeSampleSource): ReplayRequestState;
+export {};

package/lib/components/panels/ExampleItem/useReplayRequestState.js

@@ -0,0 +1 @@
+import{useMemo as m}from"react";import{useAtomValue as p}from"jotai";import{requestValuesAtom as c}from"../../../jotai/app.js";import{mapReplayAtomValuesToHarRequestValues as y,useCodeSampleResolvers as f}from"../../../services/code-samples/index.js";function x(e){const s=p(c),t=f(),i=`${e.method.toLowerCase()}:${e.path}`,r=s[i],a=m(()=>{const l=y(r??{});return e.requestValues?.security?{...l,security:e.requestValues.security}:l},[r,e.requestValues?.security]),o=r?.body,u=r?.activeExampleName,n=typeof u=="string"?u:void 0;return m(()=>({body:o,displayBody:V(o),exampleName:n,harRequestValues:a,resolvers:t}),[o,n,a,t])}function V(e){if(typeof e!="string")return e;const s=e.trim();if(!s)return e;try{const t=JSON.parse(s);if(t!==null&&typeof t=="object")return t}catch{}return e}export{x as useReplayRequestState};

package/lib/components/panels/ExampleItem/useTryItFooter.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { CodeSamplePanelItem } from '../../../types/content.js';
+export declare function useTryItFooter(node: CodeSamplePanelItem): ReactElement | undefined;

package/lib/components/panels/ExampleItem/useTryItFooter.js

@@ -0,0 +1,7 @@
+import{jsx as r}from"react/jsx-runtime";import{useMemo as n}from"react";import{useAtomValue as p}from"jotai";import{styled as a}from"styled-components";import{globalOptionsAtom as s}from"../../../jotai/store.js";import{useOpenApiDefinition as l}from"../../../hoc/withReplayPrefetch.js";import{pickReplayDefinitionDownloadUrl as m}from"../../../utils/fetch-openapi-definition.js";import{Replay as d}from"../../Replay/index.js";function A(o){const e=p(s),t=l(),i=!(e.hideReplay||o.hideReplay)&&!o.isWebhook&&!!(t??m(e.downloadUrls));return n(()=>i?r(f,{children:r(d,{node:o})}):void 0,[i,o])}const f=a.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: var(--panel-border);
+  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
+`;export{A as useTryItFooter};

package/lib/components/panels/GroupPanelItem.js

@@ -53,7 +53,7 @@ import{Fragment as G,jsx as t,jsxs as l}from"react/jsx-runtime";import{styled as
     margin-left: 0;
   }
 `,S=o(z)`
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-lg);
   background: var(--bg-color);
   justify-content: space-between;
   width: 100%;

package/lib/components/panels/McpPanelItem.js

@@ -1,4 +1,4 @@
-import{jsx as n,jsxs as s}from"react/jsx-runtime";import{styled as a}from"styled-components";import{memo as v}from"react";import{PageActions as g}from"@redocly/theme/components/PageActions/PageActions";import{panelKind as o}from"../../types/common.js";import{useSpecTranslate as u}from"../../hooks/useTranslate.js";import{resolveText as d}from"../../utils/resolveText.js";import{OverviewPanel as m}from"./styled.js";function K({node:e}){const r=e,l=u(),i=r.children,c=d(l,e.titleTranslationKey,e.title);return n(m,{header:c,className:"panel-api-docs",isExpandable:!1,children:n(y,{children:i.map((t,h)=>n(b,{item:t,translate:l},x(t,h)))})})}function x(e,r){return e.kind===o.ATTRIBUTE?`${e.label}-${r}`:e.kind===o.TAGS?`${e.title||"tags"}-${r}`:e.kind===o.EXTERNAL_LINK?`${e.url}-${r}`:e.kind===o.CONNECT_MCP_BUTTON?`${e.mcpUrl}-${r}`:`mcp-item-${r}`}const b=v(function({item:r,translate:l}){const i=d(l,r.titleTranslationKey,r.title),c="label"in r?d(l,r.labelTranslationKey,r.label):"";return r.kind===o.ATTRIBUTE?s(p,{children:[n(f,{children:r.title||c}),n(k,{children:r.value})]}):r.kind===o.TAGS?s(p,{children:[n(f,{children:i||"Tags"}),n(P,{children:r.tags.map(t=>s(w,{variant:t.color==="green"?"success":void 0,children:[t.icon==="checkmark"&&n(T,{})," ",t.text]},t.text))})]}):r.kind===o.EXTERNAL_LINK?s(p,{children:[n(f,{children:i||"Link"}),n($,{href:r.url,target:"_blank",rel:"noopener noreferrer",children:r.label})]}):r.kind===o.CONNECT_MCP_BUTTON?n(N,{children:n(g,{actions:r.actions,mcpUrl:r.mcpUrl})}):null});function T(){return n("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:n("polyline",{points:"20 6 9 17 4 12"})})}const y=a.div`
+import{jsx as n,jsxs as s}from"react/jsx-runtime";import{styled as a}from"styled-components";import{memo as g}from"react";import{PageActions as v}from"@redocly/theme/components/PageActions/PageActions";import{panelKind as o}from"../../types/common.js";import{useSpecTranslate as u}from"../../hooks/useTranslate.js";import{resolveText as d}from"../../utils/resolveText.js";import{OverviewPanel as m}from"./styled.js";function K({node:e}){const r=e,l=u(),i=r.children,c=d(l,e.titleTranslationKey,e.title);return n(m,{header:c,className:"panel-api-docs",isExpandable:!1,children:n(y,{children:i.map((t,h)=>n(b,{item:t,translate:l},x(t,h)))})})}function x(e,r){return e.kind===o.ATTRIBUTE?`${e.label}-${r}`:e.kind===o.TAGS?`${e.title||"tags"}-${r}`:e.kind===o.EXTERNAL_LINK?`${e.url}-${r}`:e.kind===o.CONNECT_MCP_BUTTON?`${e.mcpUrl}-${r}`:`mcp-item-${r}`}const b=g(function({item:r,translate:l}){const i=d(l,r.titleTranslationKey,r.title),c="label"in r?d(l,r.labelTranslationKey,r.label):"";return r.kind===o.ATTRIBUTE?s(p,{children:[n(f,{children:r.title||c}),n(k,{children:r.value})]}):r.kind===o.TAGS?s(p,{children:[n(f,{children:i||"Tags"}),n(P,{children:r.tags.map(t=>s(w,{variant:t.color==="green"?"success":void 0,children:[t.icon==="checkmark"&&n(T,{})," ",t.text]},t.text))})]}):r.kind===o.EXTERNAL_LINK?s(p,{children:[n(f,{children:i||"Link"}),n($,{href:r.url,target:"_blank",rel:"noopener noreferrer",children:r.label})]}):r.kind===o.CONNECT_MCP_BUTTON?n(N,{children:n(v,{actions:r.actions,mcpUrl:r.mcpUrl})}):null});function T(){return n("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:n("polyline",{points:"20 6 9 17 4 12"})})}const y=a.div`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
@@ -29,7 +29,7 @@ import{jsx as n,jsxs as s}from"react/jsx-runtime";import{styled as a}from"styled
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   padding: 0 var(--spacing-xxs);
-  border-radius: var(--border-radius);
+  border-radius: var(--tag-border-radius);
   font-family: var(--font-family-monospaced);
   background: ${({variant:e})=>e==="success"?"var(--badge-ok-bg-color, var(--tag-bg-color))":"var(--tag-bg-color, var(--border-color-secondary))"};
   color: ${({variant:e})=>e==="success"?"var(--badge-ok-text-color, var(--text-color-secondary))":"var(--text-color-secondary)"};

package/lib/components/panels/ServerItem/ServerItem.js

@@ -1,4 +1,4 @@
-import{jsx as i,jsxs as t}from"react/jsx-runtime";import{styled as o}from"styled-components";import{CopyButton as f}from"@redocly/theme/components/Buttons/CopyButton";import{PanelItem as x,PanelItemDescription as b,Title as v,ServerTitleWrapper as u,TitleWrap as y}from"../../common/PanelItem.js";import{Tag as h}from"../../common/Tag.js";import{useSpecTranslate as w}from"../../../hooks/useTranslate.js";import{Markdown as S}from"../../common/Markdown.js";import{ViewNested as T}from"../../common/ViewNested.js";import{ServerDescriptionTooltip as D}from"./ServerDescriptionTooltip.js";import{resolveServerUrl as j}from"../../../services/code-samples/replay/normalize-servers.js";function U({server:e}){const n=w(),a=j(e.url),p=Object.keys(e.variables||{}).length,l=p===1?"variable":"variables",d=`${p||""} ${n(l,l)}`,g=!!e.name&&!!e.description;return t(x,{children:[t(u,{children:[i(b,{"data-testid":"server-panel-item-name",children:e.name||e.description}),g&&i(D,{description:e.description})]}),t(y,{children:[i(v,{suppressHydrationWarning:!0,children:a}),i(f,{data:a},a)]}),e.variables&&i(T,{expandText:`${n("actions.show","Show")} ${d}`,hideText:`${n("actions.hide","Hide")} ${d}`,expandByDefault:!1,expandable:!0,hideDivider:!0,children:i($,{children:Object.entries(e.variables||{}).map(([c,r])=>t(z,{children:[i(k,{children:c}),t(s,{children:[n("default","Default")," ",i(h,{className:"tag-grey",children:r.default})]}),r.description&&(typeof r.description=="string"?i("div",{children:r.description}):i(W,{source:r.description})),r.enum&&t(s,{children:[n("enum","Enum")," ",i(C,{children:r.enum.map(m=>i(h,{className:"tag-grey",children:m},m))})]})]},c))})})]},e.url)}const $=o.div`
+import{jsx as i,jsxs as t}from"react/jsx-runtime";import{styled as o}from"styled-components";import{CopyButton as f}from"@redocly/theme/components/Buttons/CopyButton";import{PanelItem as x,PanelItemDescription as b,Title as v,ServerTitleWrapper as u,TitleWrap as y}from"../../common/PanelItem.js";import{Tag as h}from"../../common/Tag.js";import{useSpecTranslate as w}from"../../../hooks/useTranslate.js";import{Markdown as S}from"../../common/Markdown.js";import{ViewNested as T}from"../../common/ViewNested.js";import{ServerDescriptionTooltip as D}from"./ServerDescriptionTooltip.js";import{resolveServerUrl as j}from"../../../services/code-samples/normalize-servers.js";function U({server:e}){const n=w(),a=j(e.url),p=Object.keys(e.variables||{}).length,l=p===1?"variable":"variables",d=`${p||""} ${n(l,l)}`,g=!!e.name&&!!e.description;return t(x,{children:[t(u,{children:[i(b,{"data-testid":"server-panel-item-name",children:e.name||e.description}),g&&i(D,{description:e.description})]}),t(y,{children:[i(v,{suppressHydrationWarning:!0,children:a}),i(f,{data:a},a)]}),e.variables&&i(T,{expandText:`${n("actions.show","Show")} ${d}`,hideText:`${n("actions.hide","Hide")} ${d}`,expandByDefault:!1,expandable:!0,hideDivider:!0,children:i($,{children:Object.entries(e.variables||{}).map(([c,r])=>t(z,{children:[i(k,{children:c}),t(s,{children:[n("default","Default")," ",i(h,{className:"tag-grey",children:r.default})]}),r.description&&(typeof r.description=="string"?i("div",{children:r.description}):i(W,{source:r.description})),r.enum&&t(s,{children:[n("enum","Enum")," ",i(C,{children:r.enum.map(m=>i(h,{className:"tag-grey",children:m},m))})]})]},c))})})]},e.url)}const $=o.div`
   padding-left: var(--spacing-xxs);
   & > div {
     border-bottom: 1px solid var(--border-color-secondary);

package/lib/components/panels/asyncapi/BrokerItem/BrokerModal.js

@@ -1,4 +1,4 @@
-import{jsx as o,jsxs as i}from"react/jsx-runtime";import{styled as e}from"styled-components";import{useState as d,useRef as m}from"react";import{Button as g}from"@redocly/theme/components/Button/Button";import{Typography as f}from"@redocly/theme/components/Typography/Typography";import{Segmented as h}from"@redocly/theme/components/Segmented/Segmented";import{CloseIcon as v}from"@redocly/theme/icons/CloseIcon/CloseIcon";import{DatabaseIcon as u}from"@redocly/theme/icons/DatabaseIcon/DatabaseIcon";import{KafkaIcon as x}from"@redocly/theme/icons/KafkaIcon/KafkaIcon";import{RabbitMQIcon as b}from"@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon";import{useOutsideClick as k}from"@redocly/theme/core/hooks";import{useFocusTrap as w}from"@redocly/theme/core/hooks";import{BrokerOverviewSection as B}from"./BrokerOverviewSection.js";import{BrokerBindingsSection as z}from"./BrokerBindingsSection.js";const y=[{label:"Overview",value:0}],S=({protocol:t})=>{switch(t){case"kafka":return o(x,{size:"24px"});case"amqp":return o(b,{size:"24px"});default:return o(u,{size:"24px"})}},A=({broker:t,onClose:n,panelLabel:l})=>{const[r,p]=d(0),a=m(null);k(a,n),w(a);const s=[...y];return t.bindings&&s.push({label:"Configuration",value:2}),o(I,{"data-component-name":"BrokerModal/BrokerModal",children:i(C,{ref:a,tabIndex:0,children:[o(M,{onClick:n,"data-testid":"close",variant:"ghost",icon:o(v,{})}),i(O,{children:[o(S,{protocol:t.protocol||""}),o(T,{children:t.protocol}),": ",t.name]}),o(h,{value:r,onChange:({value:c})=>p(c),options:s}),i(j,{children:[r===0&&o(B,{broker:t}),r===2&&o(z,{broker:t,panelLabel:l})]})]})})},I=e.div`
+import{jsx as o,jsxs as i}from"react/jsx-runtime";import{styled as e}from"styled-components";import{useState as d,useRef as m}from"react";import{Button as g}from"@redocly/theme/components/Button/Button";import{Typography as f}from"@redocly/theme/components/Typography/Typography";import{Segmented as h}from"@redocly/theme/components/Segmented/Segmented";import{CloseIcon as v}from"@redocly/theme/icons/CloseIcon/CloseIcon";import{DatabaseIcon as u}from"@redocly/theme/icons/DatabaseIcon/DatabaseIcon";import{KafkaIcon as x}from"@redocly/theme/icons/KafkaIcon/KafkaIcon";import{RabbitMQIcon as b}from"@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon";import{useOutsideClick as k}from"@redocly/theme/core/hooks";import{useFocusTrap as w}from"@redocly/theme/core/openapi";import{BrokerOverviewSection as B}from"./BrokerOverviewSection.js";import{BrokerBindingsSection as z}from"./BrokerBindingsSection.js";const y=[{label:"Overview",value:0}],S=({protocol:t})=>{switch(t){case"kafka":return o(x,{size:"24px"});case"amqp":return o(b,{size:"24px"});default:return o(u,{size:"24px"})}},A=({broker:t,onClose:n,panelLabel:l})=>{const[r,p]=d(0),a=m(null);k(a,n),w(a);const s=[...y];return t.bindings&&s.push({label:"Configuration",value:2}),o(I,{"data-component-name":"BrokerModal/BrokerModal",children:i(C,{ref:a,tabIndex:0,children:[o(M,{onClick:n,"data-testid":"close",variant:"ghost",icon:o(v,{})}),i(O,{children:[o(S,{protocol:t.protocol||""}),o(T,{children:t.protocol}),": ",t.name]}),o(h,{value:r,onChange:({value:c})=>p(c),options:s}),i(j,{children:[r===0&&o(B,{broker:t}),r===2&&o(z,{broker:t,panelLabel:l})]})]})})},I=e.div`
   background: var(--bg-color-modal-overlay);
   position: fixed;
   width: 100vw;

package/lib/components/panels/asyncapi/BrokerItem/BrokerPanelItem.js

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{styled as o}from"styled-components";import{memo as b,useCallback as h,useState as B}from"react";import{CopyButton as k}from"@redocly/theme/components/Buttons/CopyButton";import{DatabaseIcon as y}from"@redocly/theme/icons/DatabaseIcon/DatabaseIcon";import{KafkaIcon as M}from"@redocly/theme/icons/KafkaIcon/KafkaIcon";import{RabbitMQIcon as w}from"@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon";import{useModalScrollLock as I}from"@redocly/theme/core/hooks";import{Portal as L}from"@redocly/theme/components/Portal/Portal";import{Panel as S}from"@redocly/theme/components/Panel/Panel";import{MoreDetailsButton as j}from"../../../common/MoreDetailsButton.js";import{useSpecTranslate as P}from"../../../../hooks/useTranslate.js";import{useTelemetry as z}from"../../../../hooks/useTelemetry.js";import{resolveText as C}from"../../../../utils/resolveText.js";import{BrokerModal as T}from"./BrokerModal.js";import{HostList as D}from"./BrokerPanel.styled.js";function H(t){switch(t){case"kafka":return e(M,{size:"20px"});case"amqp":return e(w,{size:"20px"});default:return e(y,{size:"20px"})}}const O=b(function({broker:r,showMoreDetailsButton:i,onOpenModal:s}){return a(Q,{"data-component-name":"BrokerPanel/BrokerItem",children:[a(_,{children:[e(W,{children:H(r.protocol)}),e(q,{children:r.name})]}),r.url&&a(E,{children:[e(D,{children:r.url.split(" ").map((l,c)=>e("span",{children:l},c))}),e(k,{data:r.url},r.url)]}),!i&&e(N,{onClick:()=>s(r),children:e(j,{expanded:!1})})]})});function ie({node:t}){const r=t.children[0],i=r?.brokers??[],s=P(),l=z(),c=C(s,t.titleTranslationKey,t.title),v=r?.panelLabel||c||"Brokers",p=!t.title,[d,m]=B(null);I(d!==null);const g=h(n=>{l.sendServerModalOpenedMessage([{id:"serverModalButton",object:"button",uri:"urn:redocly:redoc:ui:button:serverModalButton",server:n.name??n.url??"unknown"}]),m(n)},[l]),x=h(()=>{m(null)},[]),u=e(A,{children:i.map(n=>e(O,{broker:n,showMoreDetailsButton:p,onOpenModal:g},n.name))}),f=d&&e(L,{mountId:"api-content",children:e(T,{broker:d,onClose:x,panelLabel:v})});return p?a(K,{children:[u,f]}):a(R,{header:t.title,className:"panel-api-docs",isExpandable:!1,children:[u,f]})}const R=o(S)`
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{styled as o}from"styled-components";import{memo as b,useCallback as h,useState as B}from"react";import{CopyButton as k}from"@redocly/theme/components/Buttons/CopyButton";import{DatabaseIcon as y}from"@redocly/theme/icons/DatabaseIcon/DatabaseIcon";import{KafkaIcon as M}from"@redocly/theme/icons/KafkaIcon/KafkaIcon";import{RabbitMQIcon as w}from"@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon";import{useModalScrollLock as I}from"@redocly/theme/core/openapi";import{Portal as L}from"@redocly/theme/components/Portal/Portal";import{Panel as S}from"@redocly/theme/components/Panel/Panel";import{MoreDetailsButton as j}from"../../../common/MoreDetailsButton.js";import{useSpecTranslate as P}from"../../../../hooks/useTranslate.js";import{useTelemetry as z}from"../../../../hooks/useTelemetry.js";import{resolveText as C}from"../../../../utils/resolveText.js";import{BrokerModal as T}from"./BrokerModal.js";import{HostList as D}from"./BrokerPanel.styled.js";function H(t){switch(t){case"kafka":return e(M,{size:"20px"});case"amqp":return e(w,{size:"20px"});default:return e(y,{size:"20px"})}}const O=b(function({broker:r,showMoreDetailsButton:i,onOpenModal:s}){return a(Q,{"data-component-name":"BrokerPanel/BrokerItem",children:[a(_,{children:[e(W,{children:H(r.protocol)}),e(q,{children:r.name})]}),r.url&&a(E,{children:[e(D,{children:r.url.split(" ").map((l,c)=>e("span",{children:l},c))}),e(k,{data:r.url},r.url)]}),!i&&e(N,{onClick:()=>s(r),children:e(j,{expanded:!1})})]})});function ie({node:t}){const r=t.children[0],i=r?.brokers??[],s=P(),l=z(),c=C(s,t.titleTranslationKey,t.title),v=r?.panelLabel||c||"Brokers",p=!t.title,[d,m]=B(null);I(d!==null);const g=h(n=>{l.sendServerModalOpenedMessage([{id:"serverModalButton",object:"button",uri:"urn:redocly:redoc:ui:button:serverModalButton",server:n.name??n.url??"unknown"}]),m(n)},[l]),x=h(()=>{m(null)},[]),u=e(A,{children:i.map(n=>e(O,{broker:n,showMoreDetailsButton:p,onOpenModal:g},n.name))}),f=d&&e(L,{mountId:"api-content",children:e(T,{broker:d,onClose:x,panelLabel:v})});return p?a(K,{children:[u,f]}):a(R,{header:t.title,className:"panel-api-docs",isExpandable:!1,children:[u,f]})}const R=o(S)`
   [data-component-name='Panel/PanelBody'] {
     padding: 0;
   }