@redocly/theme 0.58.0-next.9 → 0.59.0-next.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/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

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

@@ -40,7 +40,7 @@ const teamColumns = [
 ];
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },

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/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/components/Panel/variables.js

@@ -330,6 +330,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   .panel-language-list,
   .panel-overview,
   .panel-download,
+  .panel-mcp-overview,
   .panel-servers-list,
   .panel-request-samples,
   .panel-response-samples,

package/lib/components/Tag/Tag.d.ts

@@ -8,7 +8,7 @@ type ActionColor = 'receive' | 'send';
 type ChannelColor = 'channel';
 type HttpStatusColor = 'http-deprecated';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | ActionColor | ChannelColor | HttpStatusColor;
-type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
+type Color = 'red' | 'green' | 'blue' | 'grey' | 'turquoise' | 'magenta' | 'purple' | 'carrot' | 'raspberry' | 'orange' | 'grass' | 'persian-green' | 'sky' | 'blueberry';
 export type TagProps = {
     className?: string;
     children?: React.ReactNode;
@@ -27,7 +27,8 @@ export type TagProps = {
     onClose?: (event: React.MouseEvent) => void;
     maxLength?: number;
     textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+    variant?: 'outline' | 'filled';
 };
-export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, textTransform, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, textTransform, variant, ...otherProps }: TagProps): JSX.Element;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -21,7 +21,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength, textTransform } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform"]);
+    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength, textTransform, variant = 'filled' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform", "variant"]);
     const truncateText = (text, maxLen) => {
         if (text.length <= maxLen)
             return text;
@@ -74,7 +74,7 @@ function Tag(_a) {
         }
         return children;
     };
-    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform }, otherProps),
+    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform, variant: variant }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
         react_1.default.createElement(exports.ContentWrapper, null, renderChildren()),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
@@ -131,11 +131,27 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
   ${({ textTransform }) => `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: var(--tag-bg-color);
-  ${({ borderless }) => borderless
+  background-color: ${({ variant }) => variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
+  ${({ borderless, variant }) => borderless
     ? ''
-    : 'border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);'}
+    : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
   border-radius: var(--tag-border-radius);
+
+  svg {
+    width: var(--tag-icon-width);
+    height: var(--tag-icon-height);
+  }
+
+  &:hover {
+    background-color: ${({ variant }) => variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
+    border-color: ${({ variant }) => variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--tag-border-color-focused);
+    outline-offset: 2px;
+    border-radius: var(--tag-border-radius-focused);
+  }
 `;
 const StatusDot = styled_components_1.default.div `
   display: inline-block;

package/lib/components/Tag/variables.dark.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.tagDarkMode = (0, styled_components_1.css) `
+  --tag-border-color-focused: var(--color-blue-8); // @presenter Color
+  --tag-badge-border-color: var(--border-color-secondary);
+
   --tag-operation-color-delete: #fa82a2; // @presenter Color
   --tag-operation-bg-color-delete: #77214C; // @presenter Color
 
@@ -41,7 +44,139 @@ exports.tagDarkMode = (0, styled_components_1.css) `
   .tag-draft,
   .tag-schema,
   .tag-default {
+    --tag-color: var(--color-warm-grey-8); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+  }
+
+  .tag-red {
+    --tag-color: var(--color-red-7); // @presenter Color
+    --tag-bg-color: var(--color-red-1); // @presenter Color
+    --tag-border-color: var(--color-red-8); // @presenter Color
+    --tag-border-color-hover: var(--color-red-6); // @presenter Color
+  }
+
+  .tag-green {
+    --tag-color: var(--color-green-6); // @presenter Color
+    --tag-bg-color: var(--color-green-1); // @presenter Color
+    --tag-border-color: var(--color-green-3); // @presenter Color
+    --tag-border-color-hover: var(--color-green-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-green-2); // @presenter Color
+  }
+
+  .tag-blue {
+    --tag-color: var(--color-blue-7); // @presenter Color
+    --tag-bg-color: var(--color-blue-1); // @presenter Color
+    --tag-border-color-hover: var(--color-blue-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
+  }
+
+  .tag-magenta,
+  .tag-hook { 
+    --tag-color: var(--color-magenta-4); // @presenter Color
+    --tag-bg-color: var(--color-magenta-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
+  }
+
+  .tag-purple,
+  .tag-head {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: var(--color-purple-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-border-color-hover: var(--color-purple-5); // @presenter Color
+  }
+
+  .tag-carrot {
+    --tag-color: var(--color-carrot-6); // @presenter Color
+    --tag-bg-color: var(--color-carrot-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-border-color: var(--color-carrot-4); // @presenter Color
+  }
+
+  .tag-raspberry {
+    --tag-color: var(--color-raspberry-7); // @presenter Color
+    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+  }
+
+  .tag-orange {
+    --tag-color: var(--color-orange-7); // @presenter Color
+    --tag-bg-color: var(--color-orange-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-border-color: var(--color-orange-3); // @presenter Color
+    --tag-border-color-hover: var(--color-orange-5); // @presenter Color
+  }
+
+  .tag-grass {
+    --tag-bg-color: var(--color-grass-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-color: var(--color-grass-7); // @presenter Color
+    --tag-border-color: var(--color-grass-3); // @presenter Color
+    --tag-border-color-hover: var(--color-grass-5); // @presenter Color
+  }
+
+  .tag-persian-green {
+    --tag-color: var(--color-persian-green-7); // @presenter Color
+    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-border-color: var(--color-persian-green-3); // @presenter Color
+    --tag-border-color-hover: var(--color-persian-green-5); // @presenter Color
+  }
+
+  .tag-turquoise,
+  .tag-option {
+    --tag-color: var(--color-turquoise-6); // @presenter Color
+    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-border-color: var(--color-turquoise-4); // @presenter Color
+  }
+
+  .tag-sky {
+    --tag-color: var(--color-sky-6); // @presenter Color
+    --tag-bg-color: var(--color-sky-1); // @presenter Color
+    --tag-border-color: var(--color-sky-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
+  }
+
+  .tag-blueberry {
+    --tag-color: var(--color-blueberry-7); // @presenter Color
+    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
+    --tag-border-color-hover: var(--color-blueberry-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+  }
+
+  .tag-warning,
+  .tag-deprecated {
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-bg-color: var(--color-warning-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
+  }
+
+  .tag-processing,
+  .tag-info {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+  }
+
+  .tag-error,
+  .tag-declined {
+    --tag-color: var(--color-error-active); // @presenter Color
+    --tag-bg-color: var(--color-error-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
+  }
+
+  .tag-success,
+  .tag-approved  {
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-bg-color: var(--color-success-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+  }
+
+  .tag-link {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
   }
 `;
 //# sourceMappingURL=variables.dark.js.map