@redocly/theme 0.58.0-next.8 → 0.58.0

package/lib/core/hooks/use-page-actions.js

@@ -19,9 +19,11 @@ const use_theme_hooks_1 = require("./use-theme-hooks");
 const use_theme_config_1 = require("./use-theme-config");
 const clipboard_service_1 = require("../utils/clipboard-service");
 const dom_1 = require("../utils/dom");
+const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'];
-function usePageActions(pageSlug) {
-    var _a;
+const CURSOR_URL = 'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
+function usePageActions(pageSlug, mcpUrl, actions) {
+    var _a, _b, _c;
     const { useTranslate, usePageData, usePageProps, usePageSharedData } = (0, use_theme_hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const themeConfig = (0, use_theme_config_1.useThemeConfig)();
@@ -29,7 +31,7 @@ function usePageActions(pageSlug) {
     const openApiSharedData = usePageSharedData('openAPIDocsStore');
     const shouldHideAllActions = shouldHidePageActions(pageProps, themeConfig, (_a = openApiSharedData === null || openApiSharedData === void 0 ? void 0 : openApiSharedData.options) === null || _a === void 0 ? void 0 : _a.excludeFromSearch);
     const { isPublic } = usePageData() || {};
-    const actions = (0, react_1.useMemo)(() => {
+    const result = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (shouldHideAllActions) {
             return [];
@@ -43,9 +45,41 @@ function usePageActions(pageSlug) {
             url.searchParams.set('q', externalAiPrompt);
             return url.toString();
         }
-        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || DEFAULT_ENABLED_ACTIONS)
+        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || actions || DEFAULT_ENABLED_ACTIONS)
             .map((action) => {
+            function generateMCPConfig(isCursor) {
+                const jsonConfig = {
+                    'mcp-server': {
+                        url: mcpUrl,
+                        description: 'MCP Server',
+                    },
+                };
+                if (isCursor) {
+                    const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace('$BASE64_ENCODED_CONFIG', btoa(JSON.stringify(jsonConfig['mcp-server'])));
+                    return url;
+                }
+                return JSON.stringify(jsonConfig, null, 2);
+            }
             switch (action) {
+                case 'mcp-cursor':
+                    if (!mcpUrl) {
+                        return null;
+                    }
+                    return {
+                        buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
+                        title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
+                        description: translate('page.actions.cursorMcpDescription', 'Install MCP server on Cursor'),
+                        iconComponent: CursorIcon_1.CursorIcon,
+                        onClick: () => {
+                            try {
+                                const url = generateMCPConfig(true);
+                                window.open(url, '_blank');
+                            }
+                            catch (error) {
+                                console.error(error);
+                            }
+                        },
+                    };
                 case 'copy':
                     return {
                         buttonText: translate('page.actions.copyButtonText', 'Copy'),
@@ -99,8 +133,16 @@ function usePageActions(pageSlug) {
             }
         })
             .filter((action) => action !== null);
-    }, [themeConfig, translate, pageSlug, isPublic, shouldHideAllActions]);
-    return actions;
+    }, [
+        shouldHideAllActions,
+        pageSlug,
+        (_c = (_b = themeConfig.navigation) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.items,
+        actions,
+        mcpUrl,
+        translate,
+        isPublic,
+    ]);
+    return result;
 }
 function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
     var _a, _b, _c, _d, _e, _f;

package/lib/core/openapi/index.d.ts

@@ -4,6 +4,7 @@ export type { TFunction, TOptions } from '../types/l10n';
 export type { SelectOption, SelectProps } from '../types/select';
 export { IS_BROWSER } from '../utils/dom';
 export { addLeadingSlash, removeLeadingSlash, getPathPrefix, combineUrls, addTrailingSlash, withPathPrefix, } from '../utils/urls';
+export { capitalize } from '../utils/string';
 export { typedMemo } from '../hoc/typedMemo';
 export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -10,6 +10,8 @@ Object.defineProperty(exports, "getPathPrefix", { enumerable: true, get: functio
 Object.defineProperty(exports, "combineUrls", { enumerable: true, get: function () { return urls_1.combineUrls; } });
 Object.defineProperty(exports, "addTrailingSlash", { enumerable: true, get: function () { return urls_1.addTrailingSlash; } });
 Object.defineProperty(exports, "withPathPrefix", { enumerable: true, get: function () { return urls_1.withPathPrefix; } });
+var string_1 = require("../utils/string");
+Object.defineProperty(exports, "capitalize", { enumerable: true, get: function () { return string_1.capitalize; } });
 var typedMemo_1 = require("../hoc/typedMemo");
 Object.defineProperty(exports, "typedMemo", { enumerable: true, get: function () { return typedMemo_1.typedMemo; } });
 var use_mount_1 = require("../hooks/use-mount");

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/types/open-api-server.d.ts

@@ -1,6 +1,7 @@
 export type OpenAPIServer = {
     url: string;
     description?: string;
+    name?: string;
     variables?: Record<string, {
         default: string;
         enum?: string[];

package/lib/icons/CursorIcon/CursorIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CursorIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/CursorIcon/CursorIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CursorIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M7.99956 15V8.0001L2 11.4999L7.99956 15Z", fill: "#939393" }),
+    react_1.default.createElement("path", { d: "M14 4.49979L7.99956 15V8.0001L14 4.49979Z", fill: "#E3E3E3" }),
+    react_1.default.createElement("path", { d: "M2 4.49979H14L7.99956 8.0001L2 4.49979Z", fill: "white" }),
+    react_1.default.createElement("path", { d: "M8.00025 1V4.49995L14 4.49979L8.00025 1Z", fill: "#444444" }),
+    react_1.default.createElement("path", { d: "M2 4.49979L8.00025 4.49995V1L2 4.49979ZM13.9999 11.4998L10.9999 9.74987L7.99956 15L13.9999 11.4998Z", fill: "#939393" }),
+    react_1.default.createElement("path", { d: "M14 4.49979L10.9999 9.74987L13.9999 11.4998L14 4.49979ZM7.99956 8.0001L2 11.4999V4.49979L7.99956 8.0001Z", fill: "#444444" })));
+exports.CursorIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CursorIcon/CursorIcon',
+})) `
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=CursorIcon.js.map

package/lib/layouts/DocumentationLayout.js

@@ -12,13 +12,11 @@ const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
 const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
 const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
 const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
-const use_local_state_1 = require("../core/hooks/use-local-state");
 function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
     var _a;
     const { editPage: themeEditPage } = config || {};
     const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
-    const [activeSnippetName, setActiveSnippetName] = (0, use_local_state_1.useLocalState)(CodeSnippetContext_1.CODE_GROUP_SNIPPET_NAME_KEY, '');
-    return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetContext.Provider, { value: { activeSnippetName, setActiveSnippetName } },
+    return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetProvider, null,
         react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
             react_1.default.createElement(ContentWrapper, { withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
                 react_1.default.createElement(Breadcrumbs, null),

package/lib/markdoc/components/CodeGroup/CodeGroup.js

@@ -31,42 +31,64 @@ const contexts_1 = require("../../../core/contexts");
 function CodeGroup(props) {
     const mode = props.mode || 'tabs';
     const isTabsMode = mode === 'tabs';
-    const rawSnippets = React.useMemo(() => React.Children.toArray(props.children).map((child, idx) => {
-        const childProps = child;
-        return {
-            name: getTabName(childProps.props, idx),
-            languageName: (0, utils_1.langToName)(childProps.props.lang || 'Default'),
-            lang: childProps.props.lang || '',
-            props: childProps.props,
-        };
-    }), [props.children]);
-    const [activeSnippetName, setActiveSnippetName] = (0, contexts_1.useActiveCodeSnippetName)(mode);
-    const snippets = React.useMemo(() => Object.fromEntries(rawSnippets.map((snippet) => {
-        const getItemName = (snippet) => isTabsMode ? snippet === null || snippet === void 0 ? void 0 : snippet.name : (snippet === null || snippet === void 0 ? void 0 : snippet.languageName) || '';
-        const name = getItemName(snippet);
-        const items = rawSnippets.map((item) => ({
-            name: getItemName(item),
-            lang: item.lang,
-        }));
+    const rawSnippets = React.useMemo(() => parseSnippetsFromChildren(props.children), [props.children]);
+    const groupId = React.useMemo(() => generateGroupId(rawSnippets, mode), [rawSnippets, mode]);
+    const [activeSnippetId, setActiveSnippetId] = (0, contexts_1.useActiveCodeSnippetId)(groupId, rawSnippets);
+    const snippets = React.useMemo(() => {
+        const items = createItemsFromSnippets(rawSnippets, isTabsMode);
         const itemsProps = {
             items,
-            onChange: (name) => {
-                setActiveSnippetName(name);
-            },
-            value: activeSnippetName || getItemName(rawSnippets[0]),
+            onChange: (id) => setActiveSnippetId(id),
+            value: activeSnippetId,
         };
-        const snippetProps = Object.assign(Object.assign(Object.assign({}, snippet.props), { header: Object.assign(Object.assign({}, snippet.props.header), { title: isTabsMode ? undefined : snippet.name }) }), (isTabsMode ? { tabs: itemsProps } : { dropdown: itemsProps }));
-        return [name, snippetProps];
-    })), [rawSnippets, activeSnippetName, isTabsMode, setActiveSnippetName]);
-    const firstName = Object.keys(snippets)[0];
-    const activeSnippet = snippets[activeSnippetName] || snippets[firstName];
+        return Object.fromEntries(rawSnippets.map((snippet) => {
+            const snippetProps = Object.assign(Object.assign(Object.assign({}, snippet.props), { header: Object.assign(Object.assign({}, snippet.props.header), { title: isTabsMode ? undefined : snippet.name }) }), (isTabsMode ? { tabs: itemsProps } : { dropdown: itemsProps }));
+            return [snippet.id, snippetProps];
+        }));
+    }, [rawSnippets, activeSnippetId, isTabsMode, setActiveSnippetId]);
+    const activeSnippet = snippets[activeSnippetId];
     if (!activeSnippet) {
         return null;
     }
     return React.createElement(CodeBlock_1.CodeBlock, Object.assign({}, activeSnippet));
 }
+function generateContentHash(content) {
+    let hash = 0;
+    for (let i = 0; i < content.length; i++) {
+        hash = content.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return Math.abs(hash);
+}
+// Generate unique group ID for CodeGroup instance
+// Examples: "dropdown-8901234", "tabs-1234567"
+function generateGroupId(rawSnippets, mode) {
+    const content = rawSnippets.map((s) => s.id + (s.props.source || '')).join('|') + `|${mode}`;
+    const hash = generateContentHash(content);
+    return `${mode}-${hash}`;
+}
 function getTabName(props, idx) {
     var _a;
-    return String(((_a = props.header) === null || _a === void 0 ? void 0 : _a.title) || props.file || (0, utils_1.langToName)(props.lang || '') || 'Tab ' + String(idx + 1));
+    const fallbackName = `Tab ${idx + 1}`;
+    return String(((_a = props.header) === null || _a === void 0 ? void 0 : _a.title) || props.file || (0, utils_1.langToName)(props.lang || '') || fallbackName);
+}
+function parseSnippetsFromChildren(children) {
+    return React.Children.toArray(children).map((child, idx) => {
+        const childProps = child;
+        const props = childProps.props;
+        return {
+            name: getTabName(props, idx),
+            languageName: String((0, utils_1.langToName)(props.lang || 'Default') || ''),
+            lang: props.lang || '',
+            props,
+            id: `${props.lang || ''}-${idx}`,
+        };
+    });
+}
+function createItemsFromSnippets(snippets, isTabsMode) {
+    return snippets.map((snippet) => ({
+        name: isTabsMode ? snippet.name : snippet.languageName || '',
+        lang: snippet.lang,
+        id: snippet.id,
+    }));
 }
 //# sourceMappingURL=CodeGroup.js.map

package/lib/markdoc/components/Tabs/TabList.js

@@ -63,6 +63,8 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                 const { label } = childrenArray[index].props;
                 const tabId = getTabId(label, index);
                 return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                        var _a, _b;
+                        (_b = (_a = childrenArray[index].props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                         onTabClick(index);
                     }, disabled: childrenArray[index].props.disable }, label));
             })))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.8",
+  "version": "0.58.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -32,7 +32,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^6.21.1",
-    "styled-components": "^4.1.1 || ^5.3.11",
+    "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.35.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.3"
+    "@redocly/realm-asyncapi-sdk": "0.4.0",
+    "@redocly/config": "0.35.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -24,6 +24,7 @@ import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/C
 export type CatalogEntityProps = {
   RedocSchema: React.ComponentType<any>;
   StoreProvider: React.ComponentType<any>;
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };
 
 type CatalogEntityPageProps = {
@@ -50,6 +51,7 @@ const renderDataSchemaSection = (
   relatedEntity: BffCatalogRelatedEntity | null,
   RedocSchema: React.ComponentType<any>,
   StoreProvider: React.ComponentType<any>,
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>,
 ): React.ReactElement | null => {
   if (entity.type !== 'data-schema') {
     return null;
@@ -61,11 +63,16 @@ const renderDataSchemaSection = (
       relatedEntity={relatedEntity}
       RedocSchema={RedocSchema}
       StoreProvider={StoreProvider}
+      GraphqlTypeRenderer={GraphqlTypeRenderer}
     />
   );
 };
 
-export function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps) {
+export function CatalogEntity({
+  RedocSchema,
+  StoreProvider,
+  GraphqlTypeRenderer,
+}: CatalogEntityProps) {
   const { useTranslate, useCatalog, usePageProps } = useThemeHooks();
   const { translate } = useTranslate();
   const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } =
@@ -98,7 +105,13 @@ export function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps
                       tag={entity.key}
                     />
                     <CatalogEntityProperties entity={entity} />
-                    {renderDataSchemaSection(entity, relatedEntity, RedocSchema, StoreProvider)}
+                    {renderDataSchemaSection(
+                      entity,
+                      relatedEntity,
+                      RedocSchema,
+                      StoreProvider,
+                      GraphqlTypeRenderer,
+                    )}
                     <CatalogTwoColumnsSection>
                       {renderFirstColumnEntitySection(entity)}
                       <CatalogEntityLinks entity={entity} />

package/src/components/Catalog/CatalogEntity/CatalogEntityMetadata.tsx

@@ -16,7 +16,7 @@ export type CatalogEntityMetadataProps = {
 
 function renderMetadataValue(value: any): React.JSX.Element {
   if (isPlainObject(value)) {
-    return <JsonViewerWrapper data={value} expandLevel={3} hideHeader={true} />;
+    return <JsonViewerWrapper data={value} expandLevel={3} controls={false} />;
   }
 
   if (Array.isArray(value)) {
@@ -25,7 +25,7 @@ function renderMetadataValue(value: any): React.JSX.Element {
         {value.map((item, index) => (
           <div key={index}>
             {isPlainObject(item) ? (
-              <JsonViewerWrapper data={item} expandLevel={3} hideHeader={true} />
+              <JsonViewerWrapper data={item} expandLevel={3} controls={false} />
             ) : (
               <span>{String(item)}</span>
             )}
@@ -41,7 +41,7 @@ function renderMetadataValue(value: any): React.JSX.Element {
 export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const { schema, ...metadata } = entity.metadata || {};
+  const { schema, sdl, ...metadata } = entity.metadata || {};
   const metadataToShow = Object.entries(metadata).filter(
     ([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'),
   );

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -13,6 +13,7 @@ export type CatalogEntitySchemaProps = {
   relatedEntity: BffCatalogRelatedEntity | null;
   RedocSchema: React.ComponentType<any>;
   StoreProvider: React.ComponentType<any>;
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };
 
 export function CatalogEntitySchema({
@@ -20,37 +21,45 @@ export function CatalogEntitySchema({
   relatedEntity,
   RedocSchema,
   StoreProvider,
+  GraphqlTypeRenderer,
 }: CatalogEntitySchemaProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { definition, parsedSchema, rawSchema } = useCatalogEntitySchema({ entity, relatedEntity });
+  const isGraphql = entity.metadata?.specType === 'graphql';
+  const graphqlSDL = entity?.metadata?.sdl;
 
   return (
     <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
       <HeaderWrapper>
         <Heading>{translate('catalog.entity.schema.title')}</Heading>
-        <CopyButton
-          data={rawSchema}
-          buttonText="Copy Schema"
-          type="compound"
-          variant="secondary"
-          iconPosition="right"
-          size="medium"
-        ></CopyButton>
+        {!isGraphql && (
+          <CopyButton
+            data={rawSchema}
+            buttonText="Copy Schema"
+            type="compound"
+            variant="secondary"
+            iconPosition="right"
+            size="medium"
+          ></CopyButton>
+        )}
       </HeaderWrapper>
       <SplitViewWrapper>
         <SchemaContentWrapper>
-          <StoreProvider definition={definition}>
-            <RedocSchema schema={parsedSchema} />
-          </StoreProvider>
+          {isGraphql && graphqlSDL && GraphqlTypeRenderer ? (
+            <GraphqlTypeRenderer sdl={graphqlSDL} typeName={entity.title} />
+          ) : (
+            <StoreProvider definition={definition}>
+              <RedocSchema schema={parsedSchema} />
+            </StoreProvider>
+          )}
         </SchemaContentWrapper>
-        <SchemaSampleWrapper>
-          <JsonViewer
-            data={Sampler.sample({ ...parsedSchema })}
-            expandLevel={3}
-            hideHeader={false}
-          />
-        </SchemaSampleWrapper>
+
+        {!isGraphql && (
+          <SchemaSampleWrapper>
+            <JsonViewer data={Sampler.sample({ ...parsedSchema })} expandLevel={3} />
+          </SchemaSampleWrapper>
+        )}
       </SplitViewWrapper>
     </MetadataWrapper>
   );

package/src/components/CatalogClassic/CatalogClassic.tsx

@@ -8,6 +8,7 @@ import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks, useModalScrollLock } from '@redocly/theme/core/hooks';
 import { H2 } from '@redocly/theme/components/Typography/H2';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
 import { HighlightContext } from '@redocly/theme/components/CatalogClassic/CatalogClassicHighlight';
 import { CatalogClassicActions } from '@redocly/theme/components/CatalogClassic/CatalogClassicActions';
@@ -37,16 +38,18 @@ export default function CatalogClassic(props: CatalogClassicProps): JSX.Element
         data-component-name="CatalogClassic/CatalogClassic"
         withoutFilters={!filters.length}
       >
-        <FiltersSidebar
-          menu={
-            <FilterContent
-              setFilterTerm={setFilterTerm}
-              filters={filters}
-              filterTerm={filterTerm}
-              filterValuesCasing={catalogConfig.filterValuesCasing}
-            />
-          }
-        />
+        {Boolean(filters.length) && (
+          <FiltersSidebar
+            menu={
+              <FilterContent
+                setFilterTerm={setFilterTerm}
+                filters={filters}
+                filterTerm={filterTerm}
+                filterValuesCasing={catalogConfig.filterValuesCasing}
+              />
+            }
+          />
+        )}
         {filterPopoverVisible && (
           <FilterPopover
             onClose={() => setFilterPopoverVisible(false)}
@@ -75,6 +78,14 @@ export default function CatalogClassic(props: CatalogClassicProps): JSX.Element
                 {translate(catalogConfig.descriptionTranslationKey, catalogConfig.description)}{' '}
               </CatalogDescription>
             ) : null}
+            {!filters.length && (
+              <CatalogSearchWrapper>
+                <FilterInput
+                  value={filterTerm}
+                  onChange={(updatedTerm) => setFilterTerm(updatedTerm)}
+                />
+              </CatalogSearchWrapper>
+            )}
           </CatalogPageDescriptionWrapper>
 
           <CatalogClassicVirtualizedGroups
@@ -163,3 +174,8 @@ const FiltersSidebar = styled(Sidebar)`
   }
   --menu-container-padding-top: 0;
 `;
+
+const CatalogSearchWrapper = styled.div`
+  margin-top: var(--spacing-base);
+  max-width: 300px;
+`;

package/src/components/CodeBlock/CodeBlock.tsx

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