@redocly/theme 0.69.0-next.0 → 0.69.0-next.2

package/lib/components/Buttons/ConnectMCPButton.js

@@ -44,11 +44,14 @@ const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem")
 const Button_1 = require("../../components/Button/Button");
 const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
+const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
+const CodexIcon_1 = require("../../icons/CodexIcon/CodexIcon");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const hooks_1 = require("../../core/hooks");
+const constants_1 = require("../../core/constants");
 const MENU_OPTIONS = [
     {
         key: 'cursor',
@@ -66,6 +69,22 @@ const MENU_OPTIONS = [
         descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
         descriptionDefault: 'Install MCP server on VS Code',
     },
+    {
+        key: 'claude-code',
+        icon: ClaudeIcon_1.ClaudeIcon,
+        titleTranslationKey: 'page.actions.connectMcp.claudeCode',
+        titleDefault: 'Connect to Claude Code',
+        descriptionTranslationKey: 'page.actions.connectMcp.claudeCodeDescription',
+        descriptionDefault: 'Copy the Claude Code CLI command',
+    },
+    {
+        key: 'codex',
+        icon: CodexIcon_1.CodexIcon,
+        titleTranslationKey: 'page.actions.connectMcp.codex',
+        titleDefault: 'Connect to Codex CLI',
+        descriptionTranslationKey: 'page.actions.connectMcp.codexDescription',
+        descriptionDefault: 'Copy the Codex CLI command',
+    },
     {
         key: 'copy',
         icon: CopyIcon_1.CopyIcon,
@@ -75,12 +94,14 @@ const MENU_OPTIONS = [
         descriptionDefault: 'Copy MCP JSON Configuration',
     },
 ];
-function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = ['cursor', 'vscode', 'copy'], }) {
+// Copy actions keep the dropdown open so the copied checkmark is visible.
+const COPY_OPTIONS = ['claude-code', 'codex', 'copy'];
+function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = constants_1.DEFAULT_MCP_OPTIONS, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const wrapperRef = (0, react_1.useRef)(null);
-    const { isCopied, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
+    const { copiedOption, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
     (0, hooks_1.useOutsideClick)(wrapperRef, () => setIsOpen(false));
     const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
     const primaryOption = menuOptions[0];
@@ -88,12 +109,12 @@ function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = [
     if (!primaryOption)
         return null;
     const PrimaryIcon = primaryOption.icon;
-    // When copy is the primary action there is no dropdown item to show the copied state, so the
-    // primary button itself must reflect it.
-    const showPrimaryCopied = primaryOption.key === 'copy' && isCopied;
+    const showPrimaryCopied = copiedOption === primaryOption.key;
     const handleMenuAction = (key) => {
         handleAction(key);
-        setIsOpen(false);
+        if (!COPY_OPTIONS.includes(key)) {
+            setIsOpen(false);
+        }
     };
     return (react_1.default.createElement(ConnectMCPButtonWrapper, { ref: wrapperRef, "data-component-name": "Buttons/ConnectMCPButton" },
         react_1.default.createElement(SplitButtonGroup, null,
@@ -102,7 +123,7 @@ function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = [
         isOpen && dropdownOptions.length > 0 && (react_1.default.createElement(DropdownWrapper, { $placement: placement, $alignment: alignment },
             react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, dropdownOptions.map((option) => {
                 const Icon = option.icon;
-                const showCheckmark = option.key === 'copy' && isCopied;
+                const showCheckmark = copiedOption === option.key;
                 return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleMenuAction(option.key) },
                     react_1.default.createElement(MenuItemContent, null,
                         react_1.default.createElement(MenuItemIcon, null, showCheckmark ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(Icon, null))),
@@ -119,16 +140,24 @@ const SplitButtonGroup = styled_components_1.default.div `
   display: inline-flex;
   align-items: stretch;
 `;
+/* Doubled selectors outrank the base button class in any style injection order,
+   and margin: 0 keeps themed button margins from splitting the group apart. */
 const PrimaryButton = (0, styled_components_1.default)(Button_1.Button) `
-  --button-gap: var(--connect-mcp-button-gap);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  && {
+    --button-gap: var(--connect-mcp-button-gap);
+    margin: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 `;
 const ChevronButton = (0, styled_components_1.default)(Button_1.Button) `
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: none;
-  padding-inline: var(--connect-mcp-button-chevron-padding-inline);
+  && {
+    margin: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+    padding-inline: var(--connect-mcp-button-chevron-padding-inline);
+  }
 `;
 const DropdownWrapper = styled_components_1.default.div `
   position: absolute;

package/lib/components/MCP/McpConnectionTabs.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export type McpConnectionTab = 'claude' | 'chatgpt' | 'json';
+export type McpConnectionTabsProps = {
+    options?: McpConnectionTab[];
+    className?: string;
+};
+export declare function McpConnectionTabs({ options, className, }: McpConnectionTabsProps): JSX.Element | null;

package/lib/components/MCP/McpConnectionTabs.js

@@ -0,0 +1,151 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.McpConnectionTabs = McpConnectionTabs;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
+const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
+const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
+const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
+const Tabs_1 = require("../../markdoc/components/Tabs/Tabs");
+const TabItemFragment_1 = require("../../markdoc/components/Tabs/TabItemFragment");
+const NumberedList_1 = require("../../markdoc/components/NumberedList/NumberedList");
+const NumberedItem_1 = require("../../markdoc/components/NumberedList/NumberedItem");
+const DEFAULT_TAB_OPTIONS = ['claude', 'chatgpt', 'json'];
+const TAB_LABELS = {
+    claude: {
+        translationKey: 'page.mcpNotAllowed.tabs.claude',
+        defaultLabel: 'Claude',
+        icon: ClaudeIcon_1.ClaudeIcon,
+    },
+    chatgpt: {
+        translationKey: 'page.mcpNotAllowed.tabs.chatgpt',
+        defaultLabel: 'ChatGPT',
+        icon: ChatGptIcon_1.ChatGptIcon,
+    },
+    json: { translationKey: 'page.mcpNotAllowed.tabs.json', defaultLabel: 'JSON' },
+};
+// The report control is docs feedback, not useful on the connection page.
+const CODE_BLOCK_HEADER = { controls: { copy: {}, report: { hidden: true } } };
+function McpConnectionTabs({ options = DEFAULT_TAB_OPTIONS, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { serverName, serverUrl, isMcpDisabled } = (0, hooks_1.useMCPConfig)();
+    // The SSR markup of error pages is cached with the build-time origin, so the
+    // tabs remount after hydration to pick up the real browser origin.
+    const [hydrated, setHydrated] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setHydrated(true), []);
+    if (isMcpDisabled) {
+        return null;
+    }
+    const connection = { serverName, url: serverUrl };
+    return (react_1.default.createElement(McpConnectionTabsWrapper, { key: hydrated ? 'client' : 'ssr', "data-component-name": "MCP/McpConnectionTabs", "data-testid": "mcp-connection-tabs", className: className },
+        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.SMALL }, options.map((option) => {
+            const { translationKey, defaultLabel, icon: TabIcon } = TAB_LABELS[option];
+            return (react_1.default.createElement(TabItemFragment_1.TabItemFragment, { key: option, label: translate(translationKey, defaultLabel), icon: TabIcon ? react_1.default.createElement(TabIcon, null) : undefined }, renderTabContent(option, connection, translate)));
+        }))));
+}
+function renderTabContent(option, connection, translate) {
+    const terminalHint = (react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.terminal.hint', 'Run this command in your terminal:')));
+    const urlBlock = react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: CODE_BLOCK_HEADER });
+    const assistantPromptClient = {
+        headline: translate('page.mcpNotAllowed.snippets.prompt.headline', 'Prompt'),
+        content: (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.prompt.hint', 'Or paste this prompt into the chat to have it add the server for you:')),
+            react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: (0, utils_1.generateMcpInstallPrompt)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+    };
+    switch (option) {
+        case 'claude':
+            return renderClientList([
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.claudeCode.headline', 'Claude Code'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        terminalHint,
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateClaudeCodeCommand)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+                },
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude Desktop'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'In Claude Desktop, open Settings → Developer → Edit Config, add this to the configuration file, and restart Claude Desktop:')),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: (0, utils_1.generateClaudeDesktopConfig)(connection), header: CODE_BLOCK_HEADER }))),
+                },
+            ]);
+        case 'chatgpt':
+            return renderClientList([
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.codexCli.headline', 'Codex CLI'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        terminalHint,
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateCodexCommand)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+                },
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.chatgptApp.headline', 'ChatGPT desktop app'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.chatgptApp.instruction', 'In the ChatGPT desktop app, go to Settings → Plugins → MCPs and add a server with the "Streamable HTTP" type and this URL (restart the app afterwards):')),
+                        urlBlock)),
+                },
+                assistantPromptClient,
+            ]);
+        case 'json':
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.json.hint', 'Add this server entry to your MCP client configuration file:')),
+                react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: JSON.stringify({ [connection.serverName]: { url: connection.url, description: 'MCP Server' } }, null, 2), header: CODE_BLOCK_HEADER })));
+    }
+}
+function renderClientList(clients) {
+    return (react_1.default.createElement(NumberedList_1.NumberedList, null, clients.map((client, index) => (react_1.default.createElement(NumberedItem_1.NumberedItem, { key: index, type: "dot", size: "small", headline: client.headline, index: index + 1, isLast: index === clients.length - 1 }, client.content)))));
+}
+const McpConnectionTabsWrapper = styled_components_1.default.div `
+  --md-numbered-list-margin: 0 0 var(--spacing-sm);
+
+  font-size: var(--page-mcp-405-snippets-font-size);
+  line-height: var(--page-mcp-405-snippets-line-height);
+  text-align: left;
+
+  /* The copy control floats over the code, so wrapped lines need room to clear it. */
+  pre[data-testid='source-code'] {
+    padding-right: var(--page-mcp-405-snippets-code-padding-right);
+  }
+`;
+const TabHint = styled_components_1.default.p `
+  margin: 0 0 var(--spacing-xs);
+  color: var(--page-mcp-405-snippets-hint-text-color);
+`;
+//# sourceMappingURL=McpConnectionTabs.js.map

package/lib/components/Markdown/Markdown.js

@@ -184,7 +184,7 @@ exports.Markdown = styled_components_1.default.main
     margin: var(--md-hr-margin-vertical) 0;
   }
 
-  details {
+  details:not(${constants_1.ACCORDION_SELECTOR}) {
     margin: 1.125em 0;
 
     summary {

package/lib/core/constants/accordion.d.ts

@@ -0,0 +1,3 @@
+export declare const ACCORDION_COMPONENT_NAME = "Markdoc/Accordion/Accordion";
+export declare const ACCORDION_GROUP_COMPONENT_NAME = "Markdoc/Accordion/AccordionGroup";
+export declare const ACCORDION_SELECTOR = "[data-component-name='Markdoc/Accordion/Accordion']";

package/lib/core/constants/accordion.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACCORDION_SELECTOR = exports.ACCORDION_GROUP_COMPONENT_NAME = exports.ACCORDION_COMPONENT_NAME = void 0;
+exports.ACCORDION_COMPONENT_NAME = 'Markdoc/Accordion/Accordion';
+exports.ACCORDION_GROUP_COMPONENT_NAME = 'Markdoc/Accordion/AccordionGroup';
+exports.ACCORDION_SELECTOR = `[data-component-name='${exports.ACCORDION_COMPONENT_NAME}']`;
+//# sourceMappingURL=accordion.js.map

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

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './common';
 export * from './environments';
 export * from './code-walkthrough';

package/lib/core/constants/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./accordion"), exports);
 __exportStar(require("./common"), exports);
 __exportStar(require("./environments"), exports);
 __exportStar(require("./code-walkthrough"), exports);

package/lib/core/constants/mcp.d.ts

@@ -1 +1,3 @@
+import type { MCPOption } from '../types/mcp';
 export declare const DEFAULT_MCP_SERVER_NAME = "mcp-server";
+export declare const DEFAULT_MCP_OPTIONS: MCPOption[];

package/lib/core/constants/mcp.js

@@ -1,5 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_MCP_SERVER_NAME = void 0;
+exports.DEFAULT_MCP_OPTIONS = exports.DEFAULT_MCP_SERVER_NAME = void 0;
 exports.DEFAULT_MCP_SERVER_NAME = 'mcp-server';
+exports.DEFAULT_MCP_OPTIONS = [
+    'cursor',
+    'vscode',
+    'claude-code',
+    'codex',
+    'copy',
+];
 //# sourceMappingURL=mcp.js.map

package/lib/core/hooks/use-active-section-id.js

@@ -45,10 +45,12 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
             return;
         }
         window.addEventListener('scroll', scrollListener, { capture: false });
-        setTimeout(() => {
+        const initialRead = setTimeout(() => {
             scrollListener();
         }, 10);
         return () => {
+            clearTimeout(initialRead);
+            scrollListener.cancel();
             window.removeEventListener('scroll', scrollListener);
         };
     }, [location, heightOffset, scrollListener]);

package/lib/core/hooks/use-connect-mcp-button.d.ts

@@ -3,7 +3,7 @@ export type McpButtonOptions = {
     options?: MCPOption[];
 };
 export type McpButtonSettings = {
-    isCopied: boolean;
+    copiedOption: MCPOption | null;
     cursorUrl: string;
     vscodeUrl: string;
     triggerButtonText: string;

package/lib/core/hooks/use-connect-mcp-button.js

@@ -9,24 +9,27 @@ const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
 const use_theme_hooks_1 = require("./use-theme-hooks");
 const use_mcp_config_1 = require("./use-mcp-config");
 const clipboard_service_1 = require("../utils/clipboard-service");
+const mcp_1 = require("../constants/mcp");
+const mcp_2 = require("../utils/mcp");
 const COPIED_RESET_TIMEOUT = 1000;
-function useConnectMCPButton({ options = ['cursor', 'vscode', 'copy'], } = {}) {
+function useConnectMCPButton({ options = mcp_1.DEFAULT_MCP_OPTIONS, } = {}) {
     const { useTranslate } = (0, use_theme_hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { serverName, serverUrl, cursorUrl, vscodeUrl } = (0, use_mcp_config_1.useMCPConfig)();
-    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    const [copiedOption, setCopiedOption] = (0, react_1.useState)(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const resetCopied = (0, react_1.useCallback)((0, lodash_debounce_1.default)(() => setIsCopied(false), COPIED_RESET_TIMEOUT), []);
+    const resetCopied = (0, react_1.useCallback)((0, lodash_debounce_1.default)(() => setCopiedOption(null), COPIED_RESET_TIMEOUT), []);
     const handleAction = (0, react_1.useCallback)((action) => {
-        if (action === 'copy') {
-            const config = {
-                [serverName]: {
-                    url: serverUrl,
-                    description: 'MCP Server',
-                },
-            };
-            clipboard_service_1.ClipboardService.copyCustom(JSON.stringify(config, null, 2));
-            setIsCopied(true);
+        const connection = { serverName, url: serverUrl };
+        const copyTextMap = {
+            copy: JSON.stringify({ [serverName]: { url: serverUrl, description: 'MCP Server' } }, null, 2),
+            'claude-code': (0, mcp_2.generateClaudeCodeCommand)(connection),
+            codex: (0, mcp_2.generateCodexCommand)(connection),
+        };
+        const copyText = copyTextMap[action];
+        if (copyText !== undefined) {
+            clipboard_service_1.ClipboardService.copyCustom(copyText);
+            setCopiedOption(action);
             resetCopied();
             return;
         }
@@ -39,7 +42,7 @@ function useConnectMCPButton({ options = ['cursor', 'vscode', 'copy'], } = {}) {
     const triggerButtonText = (0, react_1.useMemo)(() => translate('page.actions.connectMcp', 'Connect MCP'), [translate]);
     const visibleOptions = (0, react_1.useMemo)(() => options.filter(Boolean), [options]);
     return {
-        isCopied,
+        copiedOption,
         cursorUrl,
         vscodeUrl,
         triggerButtonText,

package/lib/core/styles/global.js

@@ -30,25 +30,26 @@ const variables_25 = require("../../components/CodeBlock/variables");
 const variables_26 = require("../../components/Product/variables");
 const variables_27 = require("../../components/Markdown/variables");
 const variables_28 = require("../../components/Banner/variables");
-const variables_29 = require("../../markdoc/components/Tabs/variables");
-const variables_30 = require("../../markdoc/components/NumberedList/variables");
-const variables_31 = require("../../markdoc/components/Diagram/variables");
-const variables_32 = require("../../components/LastUpdated/variables");
-const variables_33 = require("../../components/Logo/variables");
-const variables_34 = require("../../components/StatusCode/variables");
-const variables_35 = require("../../components/Segmented/variables");
-const variables_36 = require("../../components/UserMenu/variables");
-const variables_37 = require("../../components/Tags/variables");
-const variables_38 = require("../../components/VersionPicker/variables");
-const variables_39 = require("../../components/DatePicker/variables");
-const variables_40 = require("../../components/Switch/variables");
-const variables_41 = require("../../markdoc/components/Cards/variables");
-const variables_42 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_43 = require("../../components/SkipContent/variables");
-const variables_44 = require("../../components/PageActions/variables");
-const variables_45 = require("../../components/SvgViewer/variables");
-const variables_46 = require("../../components/Toast/variables");
-const variables_47 = require("../../components/PageNavigation/variables");
+const variables_29 = require("../../markdoc/components/Accordion/variables");
+const variables_30 = require("../../markdoc/components/Tabs/variables");
+const variables_31 = require("../../markdoc/components/NumberedList/variables");
+const variables_32 = require("../../markdoc/components/Diagram/variables");
+const variables_33 = require("../../components/LastUpdated/variables");
+const variables_34 = require("../../components/Logo/variables");
+const variables_35 = require("../../components/StatusCode/variables");
+const variables_36 = require("../../components/Segmented/variables");
+const variables_37 = require("../../components/UserMenu/variables");
+const variables_38 = require("../../components/Tags/variables");
+const variables_39 = require("../../components/VersionPicker/variables");
+const variables_40 = require("../../components/DatePicker/variables");
+const variables_41 = require("../../components/Switch/variables");
+const variables_42 = require("../../markdoc/components/Cards/variables");
+const variables_43 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_44 = require("../../components/SkipContent/variables");
+const variables_45 = require("../../components/PageActions/variables");
+const variables_46 = require("../../components/SvgViewer/variables");
+const variables_47 = require("../../components/Toast/variables");
+const variables_48 = require("../../components/PageNavigation/variables");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -1036,8 +1037,8 @@ const pages = (0, styled_components_1.css) `
 
   --page-mcp-405-status-text-color: var(--text-color-helper);
   --page-mcp-405-status-font-size: var(--font-size-lg); // @presenter FontSize
-  --page-mcp-405-status-line-height: var(--line-height-lg); // @presenter LineHeight
   --page-mcp-405-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --page-mcp-405-status-line-height: var(--line-height-lg); // @presenter LineHeight
 
   --page-mcp-405-title-text-color: var(--text-color-primary);
   --page-mcp-405-title-font-size: 42px; // @presenter FontSize
@@ -1053,6 +1054,11 @@ const pages = (0, styled_components_1.css) `
   --page-mcp-405-description-font-size-mobile: var(--font-size-lg);
   --page-mcp-405-description-line-height-mobile: var(--line-height-lg);
 
+  --page-mcp-405-snippets-font-size: var(--font-size-base); // @presenter FontSize
+  --page-mcp-405-snippets-line-height: var(--line-height-base); // @presenter LineHeight
+  --page-mcp-405-snippets-hint-text-color: var(--text-color-secondary);
+  --page-mcp-405-snippets-code-padding-right: var(--spacing-xxl);
+
    // @tokens End
 
   /**
@@ -1309,29 +1315,30 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_20.button}
     ${variables_21.aiAssistantButton}
     ${variables_21.connectMCPButton}
-    ${variables_41.cards}
+    ${variables_42.cards}
     ${variables_8.catalog}
     ${variables_11.catalogClassic}
     ${variables_25.code}
-    ${variables_42.codeWalkthrough}
+    ${variables_43.codeWalkthrough}
     ${docsDropdown}
     ${variables_15.dropdown}
     ${error}
     ${variables_10.filter}
     ${variables_19.footer}
     ${headingsTypography}
-    ${variables_37.httpTag}
+    ${variables_38.httpTag}
     ${variables_9.image}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_32.lastUpdated}
+    ${variables_33.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_33.logo}
+    ${variables_34.logo}
     ${variables_27.markdown}
-    ${variables_29.markdownTabs}
-    ${variables_30.markdownNumberedList}
-    ${variables_31.diagram}
+    ${variables_29.markdownAccordion}
+    ${variables_30.markdownTabs}
+    ${variables_31.markdownNumberedList}
+    ${variables_32.diagram}
     ${variables_24.menu}
     ${variables_24.mobileMenu}
     ${modal}
@@ -1350,26 +1357,26 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_16.tooltip}
     ${typography}
-    ${variables_36.userMenu}
-    ${variables_38.versionPicker}
+    ${variables_37.userMenu}
+    ${variables_39.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_34.statusCode}
+    ${variables_35.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_35.segmented}
-    ${variables_40.switcher}
+    ${variables_36.segmented}
+    ${variables_41.switcher}
     ${variables_17.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_39.datePicker}
+    ${variables_40.datePicker}
     ${replay}
-    ${variables_43.skipContent}
-    ${variables_44.pageActions}
-    ${variables_45.svgViewer}
-    ${variables_46.toast}
-    ${variables_47.pageNavigation}
+    ${variables_44.skipContent}
+    ${variables_45.pageActions}
+    ${variables_46.svgViewer}
+    ${variables_47.toast}
+    ${variables_48.pageNavigation}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -180,6 +180,8 @@ export type BffCatalogList<T> = {
 export type BffCatalogEntityList = BffCatalogList<BffCatalogEntity>;
 export type BffCatalogRelatedEntityList = BffCatalogList<BffCatalogRelatedEntity>;
 export type Page = {
+    nextPage?: string | null;
+    previousPage?: string | null;
     endCursor: string | null;
     startCursor: string | null;
     hasNextPage: boolean;