@redocly/api-docs 0.0.2

package/lib/components/Security/styled.js

@@ -0,0 +1,219 @@
+import{styled as r}from"styled-components";import{Panel as a}from"@redocly/theme/components/Panel/Panel";import{Button as e}from"@redocly/theme/components/Button/Button";import{Typography as t}from"@redocly/theme/components/Typography/Typography";import{DeprecatedBadge as A}from"../Schema/styled.js";const c=r(a)`
+  margin-top: var(--spacing-xs);
+  border: var(--panel-border, 1px solid var(--border-color-primary));
+  border-radius: var(--panel-border-radius, var(--border-radius));
+  font-size: var(--font-size-base);
+
+  &&& {
+    margin-bottom: var(--spacing-lg);
+  }
+`,d=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  color: var(--link-color-primary);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background-color: var(--layer-color, var(--bg-color));
+  border-bottom: var(--panel-border, 1px solid var(--border-color-primary));
+  border-radius: var(--panel-border-radius, var(--border-radius))
+    var(--panel-border-radius, var(--border-radius)) 0 0;
+`,g=r(e)`
+  margin-left: auto;
+  font-size: var(--font-size-sm);
+`,v=r.span`
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-color-primary);
+`,x=r.div`
+  display: block;
+  overflow: hidden;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--text-color-primary);
+  line-height: var(--line-height-base);
+`,m=r.span`
+  font-weight: var(--font-weight-medium);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  text-decoration: ${o=>o.deprecated?"line-through":"none"};
+`,f=r.span`
+  color: var(--text-color-description);
+  line-height: var(--line-height-base);
+`,b=r.span`
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
+  color: var(--text-color-secondary);
+  line-height: var(--line-height-base);
+`,h=r.div`
+  background: var(--bg-color-modal-overlay, rgba(0, 0, 0, 0.4));
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--z-index-popover, 1000);
+  left: 0;
+  top: 0;
+  pointer-events: auto;
+`,y=r.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);
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  width: 720px;
+  max-width: 100%;
+  height: auto;
+  max-height: 600px;
+  overflow-y: scroll;
+  left: 50%;
+  top: 100px;
+  transform: translateX(-50%);
+
+  .tag-grey span {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+`,u=r(e)`
+  position: absolute;
+  right: var(--spacing-md);
+  top: var(--spacing-md);
+`,w=r(t)`
+  display: flex;
+  align-items: center;
+  font-size: var(--h4-font-size);
+  font-weight: var(--h4-font-weight);
+  margin-bottom: var(--spacing-lg);
+
+  svg {
+    margin-right: var(--spacing-xs);
+  }
+`,z=r.div`
+  background: var(--layer-color, var(--bg-color));
+  padding: var(--spacing-base);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color-secondary, var(--border-color-primary));
+  width: 100%;
+  margin-top: var(--spacing-base);
+`,k=r.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  margin: 0 0 var(--spacing-xs);
+`,S=r.p`
+  font-size: var(--font-size-base);
+  margin: 0;
+  text-transform: capitalize;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-base);
+`,T=r.div`
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color-description);
+  margin-bottom: var(--spacing-xs);
+`,F=r.div`
+  width: 100%;
+  margin-top: var(--spacing-md);
+`,B=r.div`
+  margin-bottom: var(--spacing-xs);
+`,L=r.span`
+  color: var(--text-color-primary);
+  font-weight: var(--font-weight-medium);
+`,O=r.div`
+  padding-left: var(--spacing-xs);
+  margin-bottom: var(--spacing-xxs);
+`,P=r.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  color: var(--text-color-secondary);
+`,j=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  flex: 1;
+`,$=r.div`
+  flex: 1;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  word-break: break-word;
+`,C=r.a`
+  color: var(--link-color-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`,D=r.div`
+  margin-top: var(--spacing-xxs);
+`,M=r.span`
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color-secondary);
+  display: block;
+  margin-bottom: var(--spacing-xxs);
+`,W=r.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xxs);
+`,N=r.span`
+  display: inline-block;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family-monospaced);
+  padding: 0 var(--spacing-xxs);
+  border-radius: var(--border-radius);
+  background: var(--tag-bg-color, var(--border-color-secondary));
+  color: var(--text-color-secondary);
+`,V=r.button`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  border: 0;
+  padding: 0;
+  margin-top: var(--spacing-xxs);
+  margin-bottom: var(--spacing-xxs);
+  background: transparent;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  cursor: pointer;
+`,H=r.div`
+  max-height: ${o=>o.isOpen?"1000px":"0"};
+  opacity: ${o=>o.isOpen?"1":"0"};
+  overflow: hidden;
+  transition:
+    max-height 0.3s ease-in-out,
+    opacity 0.3s ease-in-out;
+`,I=r.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: ${o=>o.isOpen?"rotate(90deg)":"rotate(0deg)"};
+  transition: transform 0.3s ease-in-out;
+`,i=r.div`
+  border-radius: var(--border-radius);
+  padding: 0 var(--spacing-xxs);
+  font-family: var(--font-family-monospaced);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--text-color-primary);
+  background-color: var(--tag-bg-color, var(--border-color-secondary));
+  width: fit-content;
+`,R=r(i)`
+  color: var(--color-warm-grey-8);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  margin-bottom: var(--spacing-xs);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+`;export{u as CloseButton,f as Conjunction,A as DeprecatedBadge,T as FlowDescription,F as FlowProperties,S as FlowTitle,k as FlowTitleWrapper,O as FlowTypeBody,L as FlowTypeName,B as FlowTypeSection,R as FlowTypeTag,z as FlowWrapper,h as ModalBackground,w as ModalTitle,y as ModalWrapper,I as OptionalScopesChevron,H as OptionalScopesList,V as OptionalScopesToggle,j as PropertyLabel,P as PropertyRow,$ as PropertyValue,C as SchemeLink,m as SchemeName,b as ScopeInline,N as ScopeTag,M as ScopesLabel,W as ScopesList,D as ScopesSection,d as SecurityHeader,x as SecurityList,c as SecurityPanel,i as Tag,v as Title,g as ViewDetailsButton};

package/lib/components/Security/types.d.ts

@@ -0,0 +1,3 @@
+import type { SecurityNode, SecuritySchemeDetail } from '../../types/content.js';
+export type SecurityRequirements = SecurityNode['requirements'];
+export type SecurityScheme = SecuritySchemeDetail;

package/lib/components/SideMenu/SideMenu.d.ts

@@ -0,0 +1,7 @@
+import type { ApiItem } from '../../types/store.js';
+type SideMenuProps = {
+    items: ApiItem[];
+    className?: string;
+};
+export declare const SideMenu: import("react").NamedExoticComponent<SideMenuProps>;
+export {};

package/lib/components/SideMenu/SideMenu.js

@@ -0,0 +1,4 @@
+import{jsx as e}from"react/jsx-runtime";import{memo as t}from"react";import{styled as n}from"styled-components";import{Menu as s}from"@redocly/theme/components/Menu/Menu";import{useMenuItems as i}from"./useMenuItems.js";const p=({items:o,className:m})=>{const r=i({items:o});return e(u,{className:m,children:e(s,{items:r})})},M=t(p),u=n.div`
+  flex: 1;
+  overflow-y: auto;
+`;export{M as SideMenu};

package/lib/components/SideMenu/buildMenuItems.d.ts

@@ -0,0 +1,29 @@
+import type { ItemBadge } from '@redocly/config';
+import type { ApiItem } from '../../types/store.js';
+import type { TFunction } from '../../hooks/useTranslate.js';
+export type MenuItemState = {
+    type?: string;
+    label?: string;
+    link?: string;
+    httpVerb?: string;
+    isAdditionalOperation?: boolean;
+    badges?: ItemBadge[];
+    active: boolean;
+    hasActiveSubItem: boolean;
+    deprecated?: boolean;
+    items: MenuItemState[];
+    modified?: boolean;
+    variant?: 'primary' | 'secondary';
+    separatorLine?: boolean;
+    linePosition?: 'top' | 'bottom';
+    expanded?: string;
+    icon?: string;
+    srcSet?: string;
+};
+/**
+ * Converts API items into menu item states. The per-item `cache` returns the
+ * previous `MenuItemState` reference when nothing changed for that row, so
+ * the memoized `MenuItem` in `@redocly/theme` only re-renders rows whose
+ * state actually flipped.
+ */
+export declare function buildMenuItems(items: ApiItem[], activePath: string, translate: TFunction, cache: WeakMap<ApiItem, MenuItemState>): MenuItemState[];

package/lib/components/SideMenu/buildMenuItems.js

@@ -0,0 +1 @@
+import{resolveText as b}from"../../utils/resolveText.js";const v=[];function S(n,e,r,i){return n.map(d=>g(d,e,r,i))}function g(n,e,r,i){const d=i.get(n),a=n.items??[],o=a.length?S(a,e,r,i):v,t=A(n.link??n.routeSlug),s=t&&decodeURIComponent(t),u=!!s&&(e===s||e===s+"/"),l=o.some(f=>f.active||f.hasActiveSubItem),c=b(r,n.labelTranslationKey,n.label);if(d&&d.active===u&&d.hasActiveSubItem===l&&d.label===c&&h(d.items,o))return d;const p={type:n.type,label:c,link:t,httpVerb:"httpVerb"in n?n.httpVerb:void 0,isAdditionalOperation:"isAdditionalOperation"in n?n.isAdditionalOperation:void 0,badges:"badges"in n?n.badges:void 0,deprecated:"deprecated"in n?n.deprecated:void 0,separatorLine:"separatorLine"in n?n.separatorLine:void 0,linePosition:"linePosition"in n?n.linePosition:void 0,expanded:"expanded"in n?n.expanded:void 0,icon:"icon"in n?n.icon:void 0,srcSet:"srcSet"in n?n.srcSet:void 0,variant:"variant"in n?n.variant:void 0,active:u,hasActiveSubItem:l,modified:!0,items:o};return i.set(n,p),p}function h(n,e){return n===e||n.length===e.length&&n.every((r,i)=>r===e[i])}function A(n){return n&&n.replace(/\/{2,}/g,"/")}export{S as buildMenuItems};

package/lib/components/SideMenu/useMenuItems.d.ts

@@ -0,0 +1,14 @@
+import type { ApiItem } from '../../types/store.js';
+import type { MenuItemState } from './buildMenuItems.js';
+type UseMenuItemsInput = {
+    items: ApiItem[];
+};
+/**
+ * The active path drives both `active` (highlight) and `hasActiveSubItem`
+ * (expansion): `activeScrollSection` (scroll-spy) with a `location.pathname`
+ * fallback. Scroll-spy updates the URL via `history.replaceState`, which
+ * react-router doesn't observe — so `pathname` alone would freeze the
+ * highlight on the last clicked item while the user scrolls.
+ */
+export declare function useMenuItems({ items }: UseMenuItemsInput): MenuItemState[];
+export {};

package/lib/components/SideMenu/useMenuItems.js

@@ -0,0 +1 @@
+import{useMemo as m,useRef as a}from"react";import{useAtomValue as s}from"jotai";import{useLocation as u}from"react-router-dom";import{activeScrollSectionAtom as i}from"../../jotai/app.js";import{useSpecTranslate as p}from"../../hooks/useTranslate.js";import{buildMenuItems as f}from"./buildMenuItems.js";function I({items:e}){const{pathname:o}=u(),t=s(i),r=p(),n=a(new WeakMap);return m(()=>{const c=decodeURIComponent(t??o);return f(e,c,r,n.current)},[e,o,t,r])}export{I as useMenuItems};

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

@@ -0,0 +1 @@
+export declare const SidebarActions: () => React.JSX.Element;

package/lib/components/StickySidebar/SidebarActions.js

@@ -0,0 +1,5 @@
+import{jsx as r}from"react/jsx-runtime";import{useAtom as i}from"jotai";import{styled as d}from"styled-components";import{LayoutVariant as o}from"@redocly/config";import{SidebarActions as l}from"@redocly/theme/components/SidebarActions/SidebarActions";import{collapsedSidebarAtom as m,layoutAtom as p}from"../../jotai/app.js";import{useTelemetry as u}from"../../hooks/useTelemetry.js";const L=()=>{const[t,s]=i(p),[e,n]=i(m),c=u();return r(y,{children:r(l,{layout:t,onChangeViewClick:()=>{const a=t===o.STACKED?o.THREE_PANEL:o.STACKED;c.sendChangeLayoutClickedMessage([{id:"changeLayoutButton",object:"button",uri:"urn:redocly:redoc:ui:button:changeLayoutButton",layoutType:a}]),s(a)},collapsedSidebar:e,onChangeCollapseSidebarClick:()=>n(!e),isApiDocs:!0})})},y=d.div`
+  position: sticky;
+  top: calc(100vh);
+  padding: var(--spacing-sm) var(--spacing-md);
+`;export{L as SidebarActions};

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

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+type StickySidebarProps = {
+    className?: string;
+    collapsedSidebar?: boolean;
+};
+export declare const StickySidebar: import("react").NamedExoticComponent<PropsWithChildren<StickySidebarProps>>;
+export {};

package/lib/components/StickySidebar/StickySidebar.js

@@ -0,0 +1,22 @@
+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`
+  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;
+  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);
+        `}
+
+  @media print {
+    display: none;
+  }
+`;export{b as StickySidebar};

package/lib/components/common/Badge.d.ts

@@ -0,0 +1,43 @@
+import type { ReactElement } from 'react';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+export declare const TextBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@redocly/theme").TagProps, never> & Partial<Pick<import("@redocly/theme").TagProps, never>>> & string & Omit<typeof Tag, keyof import("react").Component<any, {}, any>>;
+export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("@redocly/theme").TagProps, "$deprecated" | "color" | "webhook"> & {
+    color?: string;
+    $deprecated?: boolean;
+    webhook?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("@redocly/theme").TagProps, "$deprecated" | "color" | "webhook"> & {
+    color?: string;
+    $deprecated?: boolean;
+    webhook?: boolean;
+}, never>>> & string & Omit<typeof Tag, keyof import("react").Component<any, {}, any>>;
+export declare const NavigationBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("@redocly/theme").TagProps, "$deprecated" | "color" | "webhook"> & {
+    color?: string;
+    $deprecated?: boolean;
+    webhook?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("@redocly/theme").TagProps, "$deprecated" | "color" | "webhook"> & {
+    color?: string;
+    $deprecated?: boolean;
+    webhook?: boolean;
+}, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "$deprecated"> & {
+    $deprecated?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("@redocly/theme").TagProps, "$deprecated" | "color" | "webhook"> & {
+    color?: string;
+    $deprecated?: boolean;
+    webhook?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("@redocly/theme").TagProps, "$deprecated" | "color" | "webhook"> & {
+    color?: string;
+    $deprecated?: boolean;
+    webhook?: boolean;
+}, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "$deprecated"> & {
+    $deprecated?: boolean;
+}, never>>> & string;
+export declare function renderPropertyBadge(badge: {
+    name: string;
+    color?: string;
+}): ReactElement;

package/lib/components/common/Badge.js

@@ -0,0 +1,33 @@
+import{jsx as n}from"react/jsx-runtime";import{styled as o,css as r}from"styled-components";import{Tag as a}from"@redocly/theme/components/Tag/Tag";const l=o(a)`
+  text-transform: uppercase;
+  background-color: unset;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-family: var(--font-family-monospaced);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  align-self: flex-end;
+`,t=o(a)`
+  margin-left: 0;
+  ${({$deprecated:e})=>e&&r`
+      color: var(--badge-deprecated-text-color);
+      background-color: var(--badge-deprecated-bg-color);
+      border-radius: var(--badge-deprecated-border-radius);
+    `};
+  ${({webhook:e})=>e&&r`
+      color: var(--badge-webhook-text-color);
+      background-color: var(--badge-webhook-bg-color);
+      border-radius: var(--badge-webhook-border-radius);
+    `};
+`,g=o(t)`
+  margin-left: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  padding: 0 var(--spacing-xxs);
+  max-width: 80px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;function c(e){return n(t,{color:e.color,children:e.name},e.name)}export{g as NavigationBadge,t as StyledBadge,l as TextBadge,c as renderPropertyBadge};

package/lib/components/common/Breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+export type Breadcrumb = {
+    name: string;
+    href: string;
+};
+type BreadcrumbsProps = {
+    breadcrumbs: Breadcrumb[];
+    onClick: (href: string) => void;
+};
+export declare function Breadcrumbs({ breadcrumbs, onClick }: BreadcrumbsProps): ReactElement | null;
+export {};

package/lib/components/common/Breadcrumbs.js

@@ -0,0 +1,43 @@
+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`
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  font-size: var(--font-size-sm);
+`,W=c.nav`
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--spacing-xxs);
+  max-width: 100%;
+  /* No overflow: hidden here — it would clip the collapsed "..." dropdown menu,
+     which the theme Dropdown renders inline (absolute, not portaled). Truncation
+     is handled per-crumb via trimText + the button's text-overflow: ellipsis. */
+`,y=c.button`
+  background: none;
+  border: none;
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--text-color-secondary);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  padding: 1px calc(var(--spacing-xxs) / 2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+
+  &:hover {
+    color: var(--text-color-primary);
+    text-decoration: underline;
+  }
+`,f=c.span`
+  line-height: var(--line-height-sm);
+  padding: 0 calc(var(--spacing-xxs) / 2);
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-sm);
+`,I=c(y)`
+  text-align: center;
+  overflow: visible;
+`;export{$ as Breadcrumbs};

package/lib/components/common/ContentWrapper.d.ts

@@ -0,0 +1,25 @@
+import { LayoutVariant } from '@redocly/config';
+import type { PanelNode } from '../../types/content.js';
+type ContentWrapperProps = {
+    children: React.ReactNode;
+    panels?: PanelNode[];
+    sectionId?: string;
+};
+declare const ContentWrapperComponent: ({ children, panels, sectionId }: ContentWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentWrapper: import("react").MemoExoticComponent<typeof ContentWrapperComponent>;
+export declare const Row: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$layout"> & {
+    $layout?: LayoutVariant;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$layout"> & {
+    $layout?: LayoutVariant;
+}, never>>> & string;
+export declare const MiddlePanel: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isStacked"> & {
+    $isStacked?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isStacked"> & {
+    $isStacked?: boolean;
+}, never>>> & string;
+export declare const RightPanel: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isStacked"> & {
+    $isStacked: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isStacked"> & {
+    $isStacked: boolean;
+}, never>>> & string;
+export {};

package/lib/components/common/ContentWrapper.js

@@ -0,0 +1,106 @@
+import{Fragment as x,jsx as t,jsxs as $}from"react/jsx-runtime";import{memo as u,useMemo as w}from"react";import{styled as o,css as b}from"styled-components";import{useAtomValue as y}from"jotai";import{LayoutVariant as g}from"@redocly/config";import{breakpoints as i}from"@redocly/theme/core/openapi";import{SECTION_ATTR as z}from"../../constants/openapi.js";import{layoutAtom as P}from"../../jotai/app.js";import{PanelMapper as T}from"../panels/PanelMapper.js";const r="middle-panel",m="right-panel",k=({children:a,panels:d,sectionId:p})=>{const l=y(P),n=l===g.STACKED,e=w(()=>d?.map((c,h)=>{const f=c.children?.[0]?.kind||"panel";return t(T,{node:c},`${f}-${h}`)}),[d]),s=p?{[z]:p}:{};return t(x,{children:e?$(A,{$layout:l,...s,children:[t(v,{$isStacked:n,"data-testid":r,children:a}),e&&t(E,{$isStacked:n,"data-testid":m,children:e})]}):t(v,{$isStacked:n,"data-testid":r,...s,children:a})})},K=u(k),A=o.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+
+  @media screen and (min-width: ${i.large}) {
+    flex-direction: ${({$layout:a})=>a!==g.STACKED?"row":"column"};
+  }
+
+  @media print {
+    flex-direction: column;
+  }
+`,v=o.div`
+  ${({$isStacked:a})=>b`
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: 0;
+      padding: var(--spacing-sm) var(--panel-gap-horizontal);
+      margin-bottom: var(--spacing-xs);
+
+      &:empty {
+        display: none;
+      }
+
+      @media screen and (min-width: ${i.large}) {
+        width: ${a?"100%":"calc(100% - var(--panel-samples-width))"};
+        padding-left: calc(var(--panel-gap-horizontal) * 2);
+        padding-right: ${a?"var(--panel-gap-vertical)":"var(--panel-gap-horizontal)"};
+        padding-top: 0;
+        padding-bottom: ${a?"var(--spacing-vertical)":0};
+      }
+
+      @media screen and (max-width: ${i.small}) {
+        padding-top: 0;
+        padding-bottom: var(--spacing-vertical);
+      }
+
+      @media print {
+        width: 100%;
+        padding-top: var(--spacing-vertical);
+        padding-bottom: var(--spacing-vertical);
+      }
+    `}
+
+  & + & {
+    padding-top: 0;
+  }
+
+  & [data-testid="${r}"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  & [data-testid="${m}"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`,E=o.div`
+  margin-left: auto;
+  --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) 20px;
+  color: var(--panel-samples-text-color);
+  width: 100%;
+  height: fit-content;
+  padding-top: var(--panel-gap-vertical);
+  padding-bottom: var(--panel-gap-vertical);
+  padding-left: var(--panel-gap-horizontal);
+  padding-right: var(--panel-gap-horizontal);
+  margin-bottom: var(--spacing-sm);
+
+  & > [data-component-name='Panel/Panel']:not(:last-child) {
+    margin-bottom: var(--spacing-sm);
+  }
+
+  &:has([data-component-name='BrokerPanel/BrokerItem']) {
+    padding-top: var(--spacing-lg);
+    padding-bottom: 0;
+  }
+
+  position: sticky;
+  z-index: var(--panel-z-index);
+  top: calc(var(--navbar-height) + var(--panel-gap-vertical));
+
+  &:has([data-testid='items-navigation-list']) {
+    position: static;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  @media screen and (min-width: ${i.large}) {
+    width: ${({$isStacked:a})=>a?"100%":"var(--panel-samples-width)"};
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: ${({$isStacked:a})=>a?"calc(var(--panel-gap-horizontal) * 2)":"var(--panel-gap-horizontal)"};
+    padding-right: ${({$isStacked:a})=>a?"var(--panel-gap-horizontal)":"calc(var(--panel-gap-horizontal) * 2)"};
+  }
+
+  @media print {
+    width: 100%;
+    padding-top: var(--spacing-vertical);
+    padding-bottom: var(--spacing-vertical);
+  }
+`;export{K as ContentWrapper,v as MiddlePanel,E as RightPanel,A as Row};

package/lib/components/common/DeepLinkAnchor.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react';
+export type DeepLinkAnchorVariant = 'heading' | 'field';
+export interface DeepLinkAnchorProps {
+    /** Full link target (path + hash), also used as the element id */
+    to: string;
+    /** Accessible label */
+    label?: string;
+    variant?: DeepLinkAnchorVariant;
+}
+declare function DeepLinkAnchorComponent({ to, label, variant, }: DeepLinkAnchorProps): ReactElement;
+export declare const DeepLinkAnchor: import("react").MemoExoticComponent<typeof DeepLinkAnchorComponent>;
+/** Marks the deep-link control for {@link deepLinkHoverReveal} (avoid hiding other header SVGs). */
+export declare const DEEP_LINK_ANCHOR_ATTR = "data-deep-link-anchor";
+/**
+ * CSS mixin to reveal deep link anchor icons on parent hover.
+ * Apply this to styled components that contain a DeepLinkAnchor.
+ * Only targets SVGs inside `[data-deep-link-anchor]` so sibling icons (e.g. PageActions) stay visible.
+ */
+export declare const deepLinkHoverReveal = "\n  & [data-deep-link-anchor] svg {\n    visibility: hidden;\n  }\n  &:hover [data-deep-link-anchor] svg,\n  & [data-deep-link-anchor] a:focus svg {\n    visibility: visible;\n  }\n";
+export {};