@redocly/theme 0.69.0-next.1 → 0.69.0-next.3

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

@@ -5,5 +5,7 @@ export type BadgeProps = PropsWithChildren<{
     key?: string;
     className?: string;
     icon?: string;
+    /** Inline SVG content for the icon */
+    iconRawContent?: string;
 }>;
-export declare function Badge({ icon, children, deprecated, color, ...props }: BadgeProps): JSX.Element;
+export declare function Badge({ icon, iconRawContent, children, deprecated, color, ...props }: BadgeProps): JSX.Element;

package/lib/components/Badge/Badge.js

@@ -52,9 +52,9 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function Badge(_a) {
-    var { icon, children, deprecated, color } = _a, props = __rest(_a, ["icon", "children", "deprecated", "color"]);
+    var { icon, iconRawContent, children, deprecated, color } = _a, props = __rest(_a, ["icon", "iconRawContent", "children", "deprecated", "color"]);
     return (react_1.default.createElement(BadgeComponent, Object.assign({}, props, { $color: color, $deprecated: deprecated, "data-component-name": "Badge/Badge" }),
-        icon ? react_1.default.createElement(BadgeIcon, { icon: icon }) : null,
+        icon || iconRawContent ? react_1.default.createElement(BadgeIcon, { icon: icon, rawContent: iconRawContent }) : null,
         children));
 }
 const BadgeComponent = styled_components_1.default.span `
@@ -82,5 +82,10 @@ const BadgeIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
   margin-right: var(--spacing-xxs);
   flex-shrink: 0;
   vertical-align: middle;
+
+  /* For inline SVG to align properly */
+  svg {
+    display: block;
+  }
 `;
 //# sourceMappingURL=Badge.js.map

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/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-heading.js

@@ -5,16 +5,20 @@ const react_1 = require("react");
 const react_router_1 = require("react-router");
 const utils_1 = require("../utils");
 const constants_1 = require("../constants");
+const TARGET_TOLERANCE = 2;
 function useActiveHeading(contentElement, displayedHeadings) {
     const [heading, setHeading] = (0, react_1.useState)(undefined);
     const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
     const headingElementsRef = (0, react_1.useRef)({});
     const displayedHeadingsRef = (0, react_1.useRef)(displayedHeadings);
     const lockObserver = (0, react_1.useRef)(false);
+    const clickScroll = (0, react_1.useRef)(null);
     const location = (0, react_router_1.useLocation)();
     (0, react_1.useEffect)(() => {
         setHeading(undefined);
         headingElementsRef.current = {};
+        clickScroll.current = null;
+        lockObserver.current = false;
     }, [location.pathname]);
     (0, react_1.useEffect)(() => {
         displayedHeadingsRef.current = displayedHeadings;
@@ -98,13 +102,13 @@ function useActiveHeading(contentElement, displayedHeadings) {
     }, [calculateVirtualPositions]);
     const intersectionCallback = (0, react_1.useCallback)((entries) => {
         var _a, _b, _c;
-        if (lockObserver.current) {
-            return;
-        }
         headingElementsRef.current = entries.reduce((map, entry) => {
             map[entry.target.id] = entry;
             return map;
         }, headingElementsRef.current);
+        if (lockObserver.current) {
+            return;
+        }
         if (isTopOfPage()) {
             const newHeading = ((_a = headingElements[0]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
             setHeading(newHeading);
@@ -145,18 +149,56 @@ function useActiveHeading(contentElement, displayedHeadings) {
         }
         setHeading(visibleHeadings[0].target.id);
     }, [getIndexFromId, headingElements, getTriggerOffset, findActiveHeaderByVirtualPosition]);
+    const releaseClickScroll = (0, react_1.useCallback)(() => {
+        clickScroll.current = null;
+        lockObserver.current = false;
+    }, []);
+    const trackClickScroll = (0, react_1.useCallback)(() => {
+        const clickScrollState = clickScroll.current;
+        if (!clickScrollState) {
+            return;
+        }
+        const { top } = clickScrollState.target.getBoundingClientRect();
+        if (clickScrollState.reached) {
+            if (top >= 0 && top <= getTriggerOffset()) {
+                return;
+            }
+        }
+        else {
+            const distance = Math.abs(top - clickScrollState.scrollMargin);
+            if (distance <= TARGET_TOLERANCE) {
+                clickScrollState.reached = true;
+                return;
+            }
+            if (distance <= clickScrollState.closestDistance + TARGET_TOLERANCE) {
+                clickScrollState.closestDistance = Math.min(clickScrollState.closestDistance, distance);
+                return;
+            }
+        }
+        releaseClickScroll();
+        intersectionCallback([]);
+    }, [releaseClickScroll, intersectionCallback, getTriggerOffset]);
     const handleHeadingClick = (0, react_1.useCallback)((headingId) => {
-        lockObserver.current = true;
+        releaseClickScroll();
         setHeading(headingId);
-        const headingElement = headingElements.find((el) => el.id === headingId);
-        if (headingElement && headingElement.scrollIntoView) {
-            headingElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
-        setTimeout(() => {
-            headingElementsRef.current = {};
-            lockObserver.current = false;
-        }, 300);
-    }, [headingElements]);
+        const target = document.getElementById(headingId) || headingElements.find((el) => el.id === headingId);
+        if (!(target === null || target === void 0 ? void 0 : target.scrollIntoView)) {
+            return;
+        }
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        if (!target.getClientRects().length) {
+            return;
+        }
+        const scrollMargin = parseFloat(getComputedStyle(target).scrollMarginTop) || 0;
+        const distance = Math.abs(target.getBoundingClientRect().top - scrollMargin);
+        lockObserver.current = true;
+        clickScroll.current = {
+            target,
+            scrollMargin,
+            closestDistance: distance,
+            reached: distance <= TARGET_TOLERANCE,
+        };
+    }, [headingElements, releaseClickScroll]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!contentElement) {
@@ -203,8 +245,10 @@ function useActiveHeading(contentElement, displayedHeadings) {
         });
         const handleScroll = () => {
             var _a;
-            if (lockObserver.current)
+            if (clickScroll.current) {
+                trackClickScroll();
                 return;
+            }
             if (isTopOfPage()) {
                 setHeading(((_a = headingElements[0]) === null || _a === void 0 ? void 0 : _a.id) || undefined);
             }
@@ -214,7 +258,7 @@ function useActiveHeading(contentElement, displayedHeadings) {
             observer.disconnect();
             window.removeEventListener('scroll', handleScroll);
         };
-    }, [headingElements, intersectionCallback, getTriggerOffset]);
+    }, [headingElements, intersectionCallback, getTriggerOffset, trackClickScroll]);
     return { heading, handleHeadingClick };
 }
 //# sourceMappingURL=use-active-heading.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

@@ -1037,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
@@ -1054,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
 
   /**

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;