@redocly/theme 0.58.0-next.8 → 0.58.0

package/lib/components/Catalog/CatalogEntity/CatalogEntity.d.ts

@@ -2,5 +2,9 @@ import React from 'react';
 export type CatalogEntityProps = {
     RedocSchema: React.ComponentType<any>;
     StoreProvider: React.ComponentType<any>;
+    GraphqlTypeRenderer?: React.ComponentType<{
+        sdl: string;
+        typeName: string;
+    }>;
 };
-export declare function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps): React.JSX.Element;
+export declare function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }: CatalogEntityProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -26,13 +26,13 @@ const renderFirstColumnEntitySection = (entity) => {
             return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
     }
 };
-const renderDataSchemaSection = (entity, relatedEntity, RedocSchema, StoreProvider) => {
+const renderDataSchemaSection = (entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer) => {
     if (entity.type !== 'data-schema') {
         return null;
     }
-    return (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity, relatedEntity: relatedEntity, RedocSchema: RedocSchema, StoreProvider: StoreProvider }));
+    return (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity, relatedEntity: relatedEntity, RedocSchema: RedocSchema, StoreProvider: StoreProvider, GraphqlTypeRenderer: GraphqlTypeRenderer }));
 };
-function CatalogEntity({ RedocSchema, StoreProvider }) {
+function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     var _a;
     const { useTranslate, useCatalog, usePageProps } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -52,7 +52,7 @@ function CatalogEntity({ RedocSchema, StoreProvider }) {
                         react_1.default.createElement(react_router_dom_1.Route, { index: true, element: react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                                 react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
-                                renderDataSchemaSection(entity, relatedEntity, RedocSchema, StoreProvider),
+                                renderDataSchemaSection(entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer),
                                 react_1.default.createElement(CatalogTwoColumnsSection, null,
                                     renderFirstColumnEntitySection(entity),
                                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),

package/lib/components/Catalog/CatalogEntity/CatalogEntityMetadata.js

@@ -48,17 +48,17 @@ const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntit
 const MAX_INITIAL_ITEMS = 4;
 function renderMetadataValue(value) {
     if ((0, utils_1.isPlainObject)(value)) {
-        return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, hideHeader: true });
+        return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, controls: false });
     }
     if (Array.isArray(value)) {
-        return (react_1.default.createElement(ArrayWrapper, null, value.map((item, index) => (react_1.default.createElement("div", { key: index }, (0, utils_1.isPlainObject)(item) ? (react_1.default.createElement(JsonViewerWrapper, { data: item, expandLevel: 3, hideHeader: true })) : (react_1.default.createElement("span", null, String(item))))))));
+        return (react_1.default.createElement(ArrayWrapper, null, value.map((item, index) => (react_1.default.createElement("div", { key: index }, (0, utils_1.isPlainObject)(item) ? (react_1.default.createElement(JsonViewerWrapper, { data: item, expandLevel: 3, controls: false })) : (react_1.default.createElement("span", null, String(item))))))));
     }
     return react_1.default.createElement("span", null, String(value));
 }
 function CatalogEntityMetadata({ entity }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const _a = entity.metadata || {}, { schema } = _a, metadata = __rest(_a, ["schema"]);
+    const _a = entity.metadata || {}, { schema, sdl } = _a, metadata = __rest(_a, ["schema", "sdl"]);
     const metadataToShow = Object.entries(metadata).filter(([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'));
     const [isOn, setIsOn] = (0, react_1.useState)(false);
     const hasMoreItems = metadataToShow.length > MAX_INITIAL_ITEMS;

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.d.ts

@@ -5,5 +5,9 @@ export type CatalogEntitySchemaProps = {
     relatedEntity: BffCatalogRelatedEntity | null;
     RedocSchema: React.ComponentType<any>;
     StoreProvider: React.ComponentType<any>;
+    GraphqlTypeRenderer?: React.ComponentType<{
+        sdl: string;
+        typeName: string;
+    }>;
 };
-export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, }: CatalogEntitySchemaProps): React.JSX.Element;
+export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }: CatalogEntitySchemaProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -34,20 +34,22 @@ const hooks_1 = require("../../../core/hooks");
 const useCatalogEntitySchema_1 = require("../../../core/hooks/catalog/useCatalogEntitySchema");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const CopyButton_1 = require("../../../components/Buttons/CopyButton");
-function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, }) {
+function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
+    var _a, _b;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { definition, parsedSchema, rawSchema } = (0, useCatalogEntitySchema_1.useCatalogEntitySchema)({ entity, relatedEntity });
+    const isGraphql = ((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType) === 'graphql';
+    const graphqlSDL = (_b = entity === null || entity === void 0 ? void 0 : entity.metadata) === null || _b === void 0 ? void 0 : _b.sdl;
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
         react_1.default.createElement(HeaderWrapper, null,
             react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
-            react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium" })),
+            !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium" }))),
         react_1.default.createElement(SplitViewWrapper, null,
-            react_1.default.createElement(SchemaContentWrapper, null,
-                react_1.default.createElement(StoreProvider, { definition: definition },
-                    react_1.default.createElement(RedocSchema, { schema: parsedSchema }))),
-            react_1.default.createElement(SchemaSampleWrapper, null,
-                react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3, hideHeader: false })))));
+            react_1.default.createElement(SchemaContentWrapper, null, isGraphql && graphqlSDL && GraphqlTypeRenderer ? (react_1.default.createElement(GraphqlTypeRenderer, { sdl: graphqlSDL, typeName: entity.title })) : (react_1.default.createElement(StoreProvider, { definition: definition },
+                react_1.default.createElement(RedocSchema, { schema: parsedSchema })))),
+            !isGraphql && (react_1.default.createElement(SchemaSampleWrapper, null,
+                react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3 }))))));
 }
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/CatalogClassic/CatalogClassic.js

@@ -11,6 +11,7 @@ const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
+const FilterInput_1 = require("../../components/Filter/FilterInput");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
 const CatalogClassicActions_1 = require("../../components/CatalogClassic/CatalogClassicActions");
@@ -25,7 +26,7 @@ function CatalogClassic(props) {
     (0, hooks_1.useModalScrollLock)(filterPopoverVisible);
     return (react_1.default.createElement(CatalogClassicHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "CatalogClassic/CatalogClassic", withoutFilters: !filters.length },
-            react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) }),
+            Boolean(filters.length) && (react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) })),
             filterPopoverVisible && (react_1.default.createElement(FilterPopover_1.FilterPopover, { onClose: () => setFilterPopoverVisible(false), setFilterTerm: setFilterTerm, filterTerm: filterTerm, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
             react_1.default.createElement(CatalogClassicActions_1.CatalogClassicActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
             react_1.default.createElement(exports.CatalogPageContent, null,
@@ -37,7 +38,9 @@ function CatalogClassic(props) {
                     catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, { "data-translation-key": catalogConfig.descriptionTranslationKey },
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
-                        ' ')) : null),
+                        ' ')) : null,
+                    !filters.length && (react_1.default.createElement(CatalogSearchWrapper, null,
+                        react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })))),
                 react_1.default.createElement(CatalogClassicVirtualizedGroups_1.CatalogClassicVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
 }
 exports.CatalogPageContent = styled_components_1.default.main `
@@ -110,4 +113,8 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   }
   --menu-container-padding-top: 0;
 `;
+const CatalogSearchWrapper = styled_components_1.default.div `
+  margin-top: var(--spacing-base);
+  max-width: 300px;
+`;
 //# sourceMappingURL=CatalogClassic.js.map

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -8,8 +8,8 @@ export type CodeBlockProps = {
     header?: CodeBlockControlsProps;
     dataTestId?: string;
     className?: string;
-    tabs?: CodeBlockTabItems;
-    dropdown?: CodeBlockDropdownItems;
+    tabs?: CodeBlockItems;
+    dropdown?: CodeBlockItems;
     withLineNumbers?: boolean;
     startLineNumber?: number;
     highlightedHtml?: string;
@@ -25,20 +25,13 @@ type UnstableExternalCodeSample = {
     label?: string;
     get: (source: ExternalSource) => string;
 };
-export type CodeBlockTabItems = {
+export type CodeBlockItems = {
     items: {
         name: string;
         lang?: string;
+        id: string;
     }[];
-    onChange: (name: string) => void;
-    value: string;
-};
-export type CodeBlockDropdownItems = {
-    items: {
-        name: string;
-        lang?: string;
-    }[];
-    onChange: (name: string | string[]) => void;
+    onChange: (id: string) => void;
     value: string;
 };
 type ExternalSource = {

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { CodeBlockDropdownItems, CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockControlsProps = {
     children?: React.ReactNode;
     className?: string;
     title?: React.ReactNode | string;
     controls?: ControlItems | false;
-    tabs?: CodeBlockTabItems;
-    dropdown?: CodeBlockDropdownItems;
+    tabs?: CodeBlockItems;
+    dropdown?: CodeBlockItems;
 };
 type ControlItems = {
     copy?: CopyControlProps;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -38,7 +38,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
             dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
+            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
             expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,

package/lib/components/CodeBlock/CodeBlockDropdown.d.ts

@@ -1,3 +1,3 @@
 import { type JSX } from 'react';
-import type { CodeBlockDropdownItems } from '../../components/CodeBlock/CodeBlock';
-export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element;
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
+export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockItems): JSX.Element;

package/lib/components/CodeBlock/CodeBlockDropdown.js

@@ -5,31 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockDropdown = CodeBlockDropdown;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../components/Button/Button");
-const ChevronSortIcon_1 = require("../../icons/ChevronSortIcon/ChevronSortIcon");
 const NoneIcon_1 = require("../../icons/NoneIcon/NoneIcon");
 const utils_1 = require("../../core/utils");
 function CodeBlockDropdown({ items, onChange, value }) {
-    const activeItem = items.find((item) => item.name === value) || items[0];
+    const activeItem = items.find((item) => item.id === value) || items[0];
     const icon = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) ? (0, utils_1.getFileIconByLanguage)(activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) : null;
-    return (react_1.default.createElement(StyledDropdown, { alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronSortIcon_1.ChevronSortIcon, null), iconPosition: "right", variant: "text", size: "small" },
+    return (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { iconPosition: "right", variant: "ghost", size: "small" },
             icon,
             activeItem.name) },
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item) => {
             const icon = (0, utils_1.getFileIconByLanguage)(item.lang || '');
-            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.lang, onAction: () => onChange(item.name), active: item.name === activeItem.name, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
+            const isActive = item.id === value;
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.id, onAction: () => onChange(item.id), active: isActive, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
         }))));
 }
-const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
-  margin-left: auto;
-  --icon-size: 18px;
-  --button-color: var(--text-color-secondary);
-  button.button-size-small {
-    --button-icon-size: 18px;
-  }
-`;
 //# sourceMappingURL=CodeBlockDropdown.js.map

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockTabsProps = {
-    tabs: CodeBlockTabItems;
+    tabs: CodeBlockItems;
 };
 export declare function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -40,15 +40,16 @@ function CodeBlockTabs({ tabs }) {
         tabRefs,
     });
     (0, react_1.useEffect)(() => {
-        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === tabs.value);
+        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.id) === tabs.value);
         if (activeTab) {
             activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
         }
     }, [tabs.value]);
     return (react_1.default.createElement(CodeBlockTabsWrapper, { ref: containerRef, "data-component-name": "CodeBlock/CodeBlockTabs" },
         react_1.default.createElement(ShadowWrapper, null,
-            react_1.default.createElement(Tabs, null, tabs.items.map(({ name, lang }, i) => {
+            react_1.default.createElement(Tabs, null, tabs.items.map((item, i) => {
                 var _a;
+                const { name, lang, id } = item;
                 const ext = (_a = name.match(/\.([^.]+)$/)) === null || _a === void 0 ? void 0 : _a[1];
                 const fileIcon = lang
                     ? (0, get_file_icon_1.getFileIconByLanguage)(lang)
@@ -57,7 +58,7 @@ function CodeBlockTabs({ tabs }) {
                         : null;
                 return (react_1.default.createElement(Tab, { ref: (el) => {
                         tabRefs.current[i] = el;
-                    }, "data-name": name, active: name === tabs.value, key: name + i, onClick: () => tabs.onChange(name) },
+                    }, "data-name": name, active: id === tabs.value, key: id, onClick: () => tabs.onChange(id) },
                     fileIcon,
                     name));
             }))),

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -3,11 +3,11 @@ import type { CodeBlockControlsProps } from '../../components/CodeBlock/CodeBloc
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 export type JsonProps = {
     title?: CodeBlockControlsProps['title'];
+    controls?: CodeBlockControlsProps['controls'];
     data: any;
     className?: string;
     expandLevel: number;
     startLineNumber?: number;
-    hideHeader?: boolean;
     onCopyClick?: () => void;
     onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };

package/lib/components/JsonViewer/JsonViewer.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const helpers_1 = require("./helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, hideHeader, }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
@@ -49,18 +49,17 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
         });
     };
     const source = JSON.stringify(data, null, 2);
+    const hasHeader = title || controls;
     return (react_1.default.createElement(exports.JsonViewerWrap, { "data-testid": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
-        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hideHeader
-                ? undefined
-                : {
+        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hasHeader
+                ? {
                     title,
                     className: 'code-block-header',
-                    controls: {
-                        copy: { data, onClick: onCopyClick, handleOutside: true },
-                        expand: showFoldingButtons ? { onClick: expandAll } : undefined,
-                        collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
-                    },
-                }, source: source },
+                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: showFoldingButtons
+                            ? Object.assign(Object.assign({}, controls.expand), { onClick: expandAll }) : undefined, collapse: showFoldingButtons
+                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: collapseAll }) : undefined }),
+                }
+                : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
                 react_1.default.createElement(helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
 }

package/lib/components/PageActions/PageActions.d.ts

@@ -1,6 +1,9 @@
 import type { JSX } from 'react';
+import { PageActionType } from '../../core/hooks';
 type PageActionProps = {
-    pageSlug: string;
+    pageSlug?: string;
+    mcpUrl?: string;
+    actions?: PageActionType[];
 };
 export declare function PageActions(props: PageActionProps): JSX.Element | null;
 export {};

package/lib/components/PageActions/PageActions.js

@@ -49,8 +49,8 @@ const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/Checkmark
 const hooks_1 = require("../../core/hooks");
 const ACTION_DONE_DISPLAY_DURATION = 1000;
 function PageActions(props) {
-    const { pageSlug } = props;
-    const actions = (0, hooks_1.usePageActions)(pageSlug || '/');
+    const { pageSlug, mcpUrl } = props;
+    const actions = (0, hooks_1.usePageActions)(pageSlug || '/', mcpUrl, props.actions);
     const [actionState, setActionState] = (0, react_1.useState)('idle');
     if (!actions.length) {
         return null;

package/lib/core/constants/catalog.js

@@ -37,6 +37,8 @@ exports.reverseRelationMap = {
     memberOf: 'hasMember',
     triggers: 'triggeredBy',
     triggeredBy: 'triggers',
+    returns: 'returnedBy',
+    returnedBy: 'returns',
 };
 exports.relationTypeMap = {
     partOf: 'Part of',
@@ -64,6 +66,8 @@ exports.relationTypeMap = {
     memberOf: 'Member of',
     triggers: 'Triggers',
     triggeredBy: 'Triggered by',
+    returns: 'Returns',
+    returnedBy: 'Returned by',
 };
 var GraphHandleType;
 (function (GraphHandleType) {

package/lib/core/contexts/CodeSnippetContext.d.ts

@@ -1,7 +1,15 @@
-export type CodeSnippetContextType = {
-    activeSnippetName: string;
-    setActiveSnippetName: (name: string) => void;
-};
+import React from 'react';
 export declare const CODE_GROUP_SNIPPET_NAME_KEY = "redocly:codeGroupSnippetName";
-export declare const CodeSnippetContext: import("react").Context<CodeSnippetContextType | null>;
-export declare function useActiveCodeSnippetName(mode: 'tabs' | 'dropdown'): [string, (name: string) => void];
+type CodeSnippetContextType = {
+    activeSnippets: Record<string, string>;
+    setActiveSnippet: (groupId: string, snippetId: string) => void;
+};
+export declare const CodeSnippetContext: React.Context<CodeSnippetContextType | null>;
+export declare function CodeSnippetProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare const useCodeSnippetContext: () => CodeSnippetContextType;
+export declare const useActiveCodeSnippetId: (groupId?: string, availableSnippets?: {
+    id: string;
+}[]) => [string, (id: string) => void];
+export {};

package/lib/core/contexts/CodeSnippetContext.js

@@ -1,23 +1,66 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
-exports.useActiveCodeSnippetName = useActiveCodeSnippetName;
-const react_1 = require("react");
+exports.useActiveCodeSnippetId = exports.useCodeSnippetContext = exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
+exports.CodeSnippetProvider = CodeSnippetProvider;
+const react_1 = __importStar(require("react"));
+const use_local_state_1 = require("../hooks/use-local-state");
 exports.CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
 exports.CodeSnippetContext = (0, react_1.createContext)(null);
-function useActiveCodeSnippetName(mode) {
+function CodeSnippetProvider({ children }) {
+    const [activeSnippets, setActiveSnippets] = (0, use_local_state_1.useLocalState)(exports.CODE_GROUP_SNIPPET_NAME_KEY, {});
+    const setActiveSnippet = (0, react_1.useCallback)((groupId, snippetId) => {
+        setActiveSnippets(Object.assign(Object.assign({}, activeSnippets), { [groupId]: snippetId }));
+    }, [activeSnippets, setActiveSnippets]);
+    const contextValue = { activeSnippets, setActiveSnippet };
+    return react_1.default.createElement(exports.CodeSnippetContext.Provider, { value: contextValue }, children);
+}
+const useCodeSnippetContext = () => {
     const context = (0, react_1.useContext)(exports.CodeSnippetContext);
     if (!context) {
         throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
     }
-    const [activeSnippetName, setActiveSnippetName] = (0, react_1.useState)(mode === 'tabs' ? '' : context.activeSnippetName);
-    if (mode === 'tabs') {
-        // use non-synced state for tabs mode
-        return [activeSnippetName, setActiveSnippetName];
-    }
-    else {
-        // use global synced state for dropdown mode
-        return [context.activeSnippetName, context.setActiveSnippetName];
-    }
-}
+    return context;
+};
+exports.useCodeSnippetContext = useCodeSnippetContext;
+const useActiveCodeSnippetId = (groupId, availableSnippets) => {
+    const { activeSnippets, setActiveSnippet } = (0, exports.useCodeSnippetContext)();
+    const storedSnippetId = groupId ? activeSnippets[groupId] || '' : '';
+    const activeId = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!(availableSnippets === null || availableSnippets === void 0 ? void 0 : availableSnippets.length))
+            return storedSnippetId;
+        const found = storedSnippetId && availableSnippets.find((s) => s.id === storedSnippetId);
+        return found ? storedSnippetId : ((_a = availableSnippets[0]) === null || _a === void 0 ? void 0 : _a.id) || '';
+    }, [storedSnippetId, availableSnippets]);
+    const setActiveSnippetId = (0, react_1.useCallback)((id) => {
+        if (groupId) {
+            setActiveSnippet(groupId, id);
+        }
+    }, [groupId, setActiveSnippet]);
+    return [activeId, setActiveSnippetId];
+};
+exports.useActiveCodeSnippetId = useActiveCodeSnippetId;
 //# sourceMappingURL=CodeSnippetContext.js.map

package/lib/core/hooks/use-codeblock-tabs-controls.d.ts

@@ -1,6 +1,6 @@
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 type CodeBlockTabsProps = {
-    tabs: CodeBlockTabItems;
+    tabs: CodeBlockItems;
     containerRef: React.RefObject<HTMLDivElement | null>;
     tabRefs: React.RefObject<HTMLButtonElement[]>;
 };

package/lib/core/hooks/use-local-state.js

@@ -2,31 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLocalState = useLocalState;
 const react_1 = require("react");
-function getInitialValue(key, initialValue) {
-    if (typeof window === 'undefined') {
-        return initialValue;
-    }
+const js_utils_1 = require("../utils/js-utils");
+function getStoredValue(key, fallback) {
+    if (!(0, js_utils_1.isBrowser)())
+        return fallback;
     try {
         const savedValue = localStorage.getItem(key);
-        if (savedValue) {
-            return JSON.parse(savedValue);
-        }
+        return savedValue ? JSON.parse(savedValue) : fallback;
     }
-    catch (error) {
-        console.error(`Error reading from localStorage for key "${key}":`, error);
+    catch (_a) {
+        return fallback;
     }
-    return initialValue;
 }
 function useLocalState(key, initialValue) {
-    const [value, setValue] = (0, react_1.useState)(() => getInitialValue(key, initialValue));
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    // Load stored value from localStorage after component mounts
+    // This ensures SSR compatibility: server and client both start with initialValue,
+    // then client loads the actual stored value without hydration mismatch
     (0, react_1.useEffect)(() => {
-        try {
-            localStorage.setItem(key, JSON.stringify(value));
-        }
-        catch (error) {
-            console.error(`Error writing to localStorage for key "${key}":`, error);
+        if (!(0, js_utils_1.isBrowser)())
+            return;
+        setValue(getStoredValue(key, initialValue));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key]);
+    const handleSetValue = (0, react_1.useCallback)((newValue) => {
+        setValue(newValue);
+        if ((0, js_utils_1.isBrowser)()) {
+            localStorage.setItem(key, JSON.stringify(newValue));
         }
-    }, [key, value]);
-    return [value, setValue];
+    }, [key]);
+    return [value, handleSetValue];
 }
 //# sourceMappingURL=use-local-state.js.map

package/lib/core/hooks/use-page-actions.d.ts

@@ -1,2 +1,3 @@
 import type { PageAction } from '../types';
-export declare function usePageActions(pageSlug: string): PageAction[];
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
+export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];