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

package/lib/components/Toast/variables.js

@@ -18,7 +18,7 @@ exports.toast = (0, styled_components_1.css) `
   --toast-max-width: 360px;
   --toast-bg-color: var(--layer-color); // @presenter Color
   --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
-  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --toast-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --toast-font-family: var(--font-family-base); // @presenter FontFamily
 
   /**

package/lib/components/Tooltip/AnchorTooltip.js

@@ -209,7 +209,7 @@ const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) =>
   overflow-wrap: break-word;
   text-align: left;
 
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   transition: opacity 0.3s ease-out;
 
   font-size: var(--font-size-base);
@@ -229,7 +229,7 @@ const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) =>
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+  border: var(--tooltip-border-width, 2px) var(--tooltip-border-style, solid)
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 

package/lib/components/Tooltip/JsTooltip.js

@@ -227,7 +227,7 @@ const TooltipBody = styled_components_1.default.span `
   word-break: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   transition: opacity 0.3s ease-out;
 
   font-size: var(--font-size-base);
@@ -247,7 +247,7 @@ const TooltipBody = styled_components_1.default.span `
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+  border: var(--tooltip-border-width, 2px) var(--tooltip-border-style, solid)
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 

package/lib/components/UserMenu/variables.js

@@ -51,7 +51,7 @@ exports.userMenu = (0, styled_components_1.css) `
   --user-menu-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --user-menu-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --user-menu-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --user-menu-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --user-menu-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --user-menu-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color

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

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

package/lib/core/constants/mcp.js

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

package/lib/core/constants/search.js

@@ -25,13 +25,13 @@ exports.AI_SEARCH_ERROR_CONFIG = {
         headerKey: 'search.ai.error.header.forbidden',
         headerDefault: 'Feature Unavailable',
         messageKey: 'search.ai.error.description.forbidden',
-        messageDefault: 'AI Search is currently unavailable.',
+        messageDefault: 'AI assistant is currently unavailable.',
     },
     [AiSearchError.Unauthorized]: {
         headerKey: 'search.ai.error.header.unauthorized',
         headerDefault: 'Authentication Required',
         messageKey: 'search.ai.error.description.unauthorized',
-        messageDefault: 'You are not authorized to use AI Search.',
+        messageDefault: 'You are not authorized to use AI assistant.',
     },
     [AiSearchError.HttpRequestFailed]: defaultErrorConfig,
     [AiSearchError.EmptyResponse]: defaultErrorConfig,

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

@@ -0,0 +1,5 @@
+/**
+ * Whether the first heading inside the enclosing `Markdown` mounts the page actions.
+ * Without a provider `Heading` falls back to the page type in the page metadata.
+ */
+export declare const PageActionsContext: import("react").Context<boolean | null>;

package/lib/core/contexts/PageActionsContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActionsContext = void 0;
+const react_1 = require("react");
+/**
+ * Whether the first heading inside the enclosing `Markdown` mounts the page actions.
+ * Without a provider `Heading` falls back to the page type in the page metadata.
+ */
+exports.PageActionsContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=PageActionsContext.js.map

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

@@ -1,5 +1,6 @@
 export * from './ThemeDataContext';
 export * from './MarkdownLinkContext';
+export * from './PageActionsContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
 export * from './CodeSnippetContext';

package/lib/core/contexts/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ThemeDataContext"), exports);
 __exportStar(require("./MarkdownLinkContext"), exports);
+__exportStar(require("./PageActionsContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
 __exportStar(require("./CodeSnippetContext"), exports);

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -16,9 +16,6 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     const location = (0, react_router_1.useLocation)();
     const navigate = (0, react_router_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
-    const filtersRef = (0, react_1.useRef)(filters);
-    const inputsRef = (0, react_1.useRef)(inputs);
-    const togglesRef = (0, react_1.useRef)(toggles);
     const getInitialState = () => {
         var _a, _b;
         var _c, _d;
@@ -36,18 +33,10 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         return state;
     };
     const [controlsState, setControlsState] = (0, react_1.useState)(getInitialState);
-    (0, react_1.useEffect)(() => {
-        const sameProps = [
-            JSON.stringify(filters) === JSON.stringify(filtersRef.current),
-            JSON.stringify(inputs) === JSON.stringify(inputsRef.current),
-            JSON.stringify(toggles) === JSON.stringify(togglesRef.current),
-        ];
-        if (sameProps.every(Boolean)) {
-            return;
-        }
-        filtersRef.current = filters;
-        inputsRef.current = inputs;
-        togglesRef.current = toggles;
+    const controlsKey = JSON.stringify([filters, inputs, toggles]);
+    const [prevControlsKey, setPrevControlsKey] = (0, react_1.useState)(controlsKey);
+    if (prevControlsKey !== controlsKey) {
+        setPrevControlsKey(controlsKey);
         const newState = getInitialState();
         // Preserve existing values where control type hasn't changed
         Object.entries(newState).forEach(([id, control]) => {
@@ -58,8 +47,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
             }
         });
         setControlsState(newState);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, inputs, toggles, enableDeepLink]);
+    }
     const changeControlState = (id, value) => {
         setControlsState((prev) => {
             const control = prev[id];

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.js

@@ -171,6 +171,7 @@ function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }) {
         }
         const rootTopOffset = (_c = (_a = root.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _c !== void 0 ? _c : 0;
         if (!activeStep && rootTopOffset <= options.navbarHeight) {
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- seeded from root.current.offsetTop, a post-layout measurement
             setActiveStep(((_b = visibleSteps[0]) === null || _b === void 0 ? void 0 : _b.id) || null);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/core/hooks/menu/use-menu-item-expanded.js

@@ -11,6 +11,7 @@ function useMenuItemExpanded(item) {
     // it's important for transitions
     const [controlledValue, setControlledValue] = (0, react_1.useState)(isItemExpanded(item));
     (0, react_1.useEffect)(() => {
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- deferred a commit on purpose so CSS transitions still run
         setIsExpanded(controlledValue);
     }, [controlledValue]);
     (0, react_1.useEffect)(() => {

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/hooks/use-control.js

@@ -11,6 +11,9 @@ const useControl = (initialVal = false) => {
             clearTimeout(timeoutRef.current);
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        return clearOpenTimer;
+    }, [clearOpenTimer]);
     const handleOpen = (0, react_1.useCallback)(() => {
         clearOpenTimer();
         timeoutRef.current = setTimeout(() => {

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

@@ -22,6 +22,7 @@ function useLocalState(key, initialValue) {
     (0, react_1.useEffect)(() => {
         if (!(0, js_utils_1.isBrowser)())
             return;
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- localStorage is read after mount so SSR and client hydrate from the same value
         setValue(getStoredValue(key, initialValue));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [key]);

package/lib/core/hooks/use-mcp-config.d.ts

@@ -5,5 +5,7 @@ export type McpConfig = {
     cursorUrl: string;
     vscodeUrl: string;
     isMcpDisabled: boolean;
+    isPublicEndpointPage: boolean;
+    alternateServerUrl?: string;
 };
 export declare function useMCPConfig(): McpConfig;

package/lib/core/hooks/use-mcp-config.js

@@ -9,13 +9,21 @@ const mcp_1 = require("../utils/mcp");
 const urls_1 = require("../utils/urls");
 function useMCPConfig() {
     var _a;
-    const { useMcpData } = (0, use_theme_hooks_1.useThemeHooks)();
-    const { docs: { enabled, name }, } = useMcpData();
+    var _b;
+    const { useMcpData, usePageData } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { docs: { enabled, name, publicEndpoint }, } = useMcpData();
+    const pageSlug = (_a = usePageData()) === null || _a === void 0 ? void 0 : _a.slug;
     const origin = dom_1.IS_BROWSER
         ? window.location.origin
-        : ((_a = globalThis['SSR_HOSTNAME']) !== null && _a !== void 0 ? _a : '');
+        : ((_b = globalThis['SSR_HOSTNAME']) !== null && _b !== void 0 ? _b : '');
     const serverName = name || constants_1.DEFAULT_MCP_SERVER_NAME;
-    const serverUrl = `${origin}${(0, urls_1.withPathPrefix)('/mcp')}`;
+    const isPublicEndpointPage = pageSlug === (0, urls_1.withPathPrefix)(constants_1.PUBLIC_MCP_ROUTE);
+    const serverUrl = `${origin}${(0, urls_1.withPathPrefix)(isPublicEndpointPage ? constants_1.PUBLIC_MCP_ROUTE : constants_1.MCP_ROUTE)}`;
+    const alternateServerUrl = isPublicEndpointPage
+        ? `${origin}${(0, urls_1.withPathPrefix)(constants_1.MCP_ROUTE)}`
+        : publicEndpoint
+            ? `${origin}${(0, urls_1.withPathPrefix)(constants_1.PUBLIC_MCP_ROUTE)}`
+            : undefined;
     const isMcpDisabled = !enabled || false;
     const cursorUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('cursor', { serverName, url: serverUrl }), [serverName, serverUrl]);
     const vscodeUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('vscode', { serverName, url: serverUrl }), [serverName, serverUrl]);
@@ -26,6 +34,8 @@ function useMCPConfig() {
         cursorUrl,
         vscodeUrl,
         isMcpDisabled,
+        isPublicEndpointPage,
+        alternateServerUrl,
     };
 }
 //# sourceMappingURL=use-mcp-config.js.map

package/lib/core/hooks/use-mobile-menu.js

@@ -7,9 +7,17 @@ const use_modal_scroll_lock_1 = require("./use-modal-scroll-lock");
 function useMobileMenu(initialState = false) {
     const location = (0, react_router_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
-    (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname, location.hash]);
+    const locationKey = `${location.pathname}${location.hash}`;
+    const [prevLocationKey, setPrevLocationKey] = (0, react_1.useState)(locationKey);
+    if (isOpen && prevLocationKey !== locationKey) {
+        setPrevLocationKey(locationKey);
+        setIsOpen(false);
+    }
     (0, use_modal_scroll_lock_1.useModalScrollLock)(isOpen);
-    const openMobileMenu = () => setIsOpen(true);
+    const openMobileMenu = () => {
+        setPrevLocationKey(locationKey);
+        setIsOpen(true);
+    };
     const closeMobileMenu = () => setIsOpen(false);
     return { isOpen, openMobileMenu, closeMobileMenu };
 }

package/lib/core/styles/global.js

@@ -451,18 +451,24 @@ const borders = (0, styled_components_1.css) `
 
   --border-color-primary: var(--color-warm-grey-3); // Raised dividers
   --border-color-secondary: var(--color-warm-grey-2); // Default dividers, borders
-  --border-color-invers: var(--color-warm-grey-10);
+  --border-color-inverse: var(--color-warm-grey-10);
+  --border-color-invers: var(--border-color-inverse, var(--color-warm-grey-10)); // Deprecated: use --border-color-inverse
 
   /**
      * @tokens Border Radius
      * @presenter BorderRadius
      */
 
+  --border-radius-none: 0;
   --border-radius: 4px;
   --border-radius-md: calc(var(--border-radius) * 1.5);
   --border-radius-lg: calc(var(--border-radius) * 2);
   --border-radius-xl: calc(var(--border-radius) * 3);
   --border-radius-xxl: calc(var(--border-radius) * 4);
+  --border-radius-xxxl: calc(var(--border-radius) * 6);
+  --border-radius-full: 999px;
+
+  // @tokens End
 `;
 const headingsTypography = (0, styled_components_1.css) `
   * {
@@ -816,7 +822,7 @@ const badges = (0, styled_components_1.css) `
 
   --badge-text-color: var(--text-color-inverse); // @presenter Color
   --badge-bg-color: var(--color-purple-6); // @presenter Color
-  --badge-border-radius: var(--border-radius); // @presenter BorderRadius
+  --badge-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   /**
     * @tokens Deprecated Badge
@@ -824,7 +830,7 @@ const badges = (0, styled_components_1.css) `
 
   --badge-deprecated-text-color: var(--color-warm-grey-1); // @presenter Color
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
-  --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
+  --badge-deprecated-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
    /**
     * @tokens Webhook Badge
@@ -832,7 +838,7 @@ const badges = (0, styled_components_1.css) `
 
   --badge-webhook-text-color: var(--color-warm-grey-1); // @presenter Color
   --badge-webhook-bg-color: var(--color-purple-7); // @presenter Color
-  --badge-webhook-border-radius: var(--border-radius); // @presenter BorderRadius
+  --badge-webhook-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   /**
     * @tokens Audience Badge
@@ -1035,11 +1041,6 @@ const pages = (0, styled_components_1.css) `
   --page-mcp-405-margin-vertical-mobile: var(--spacing-xxl);
   --page-mcp-405-margin-horizontal-mobile: 1rem;
 
-  --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-title-text-color: var(--text-color-primary);
   --page-mcp-405-title-font-size: 42px; // @presenter FontSize
   --page-mcp-405-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
@@ -1054,6 +1055,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
 
   /**
@@ -1244,7 +1250,7 @@ const tree = (0, styled_components_1.css) `
 
     *::-webkit-scrollbar-thumb {
         background-color: var(--color-warm-grey-2);
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-full);
     }
 
     *::-webkit-scrollbar-thumb:hover {
@@ -1309,7 +1315,6 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_5.breadcrumbs}
     ${variables_20.button}
     ${variables_21.aiAssistantButton}
-    ${variables_21.connectMCPButton}
     ${variables_42.cards}
     ${variables_8.catalog}
     ${variables_11.catalogClassic}

package/lib/core/styles/palette.js

@@ -245,5 +245,7 @@ function brandPaletteLight(palette) {
  */
 exports.activeBrandPaletteLight = (0, styled_components_1.css) `
   ${({ palette }) => brandPaletteLight(palette)}
+
+  // @tokens End
 `;
 //# sourceMappingURL=palette.js.map

package/lib/core/types/button-group.d.ts

@@ -0,0 +1,2 @@
+export type ButtonGroupVariant = 'primary' | 'secondary' | 'outlined';
+export type ButtonGroupSize = 'small' | 'medium' | 'large';

package/lib/core/types/button-group.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=button-group.js.map

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

@@ -180,10 +180,8 @@ export type BffCatalogList<T> = {
 export type BffCatalogEntityList = BffCatalogList<BffCatalogEntity>;
 export type BffCatalogRelatedEntityList = BffCatalogList<BffCatalogRelatedEntity>;
 export type Page = {
-    endCursor: string | null;
-    startCursor: string | null;
-    hasNextPage: boolean;
-    hasPrevPage: boolean;
+    nextPage: string | null;
+    previousPage: string | null;
     limit: number;
     total: number;
 };

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

@@ -1,3 +1,5 @@
+import type React from 'react';
 import { DEFAULT_COLOR_MODES } from '../constants';
 export type Plural<T extends string> = `${T}s`;
 export type ColorMode = (typeof DEFAULT_COLOR_MODES)[keyof typeof DEFAULT_COLOR_MODES];
+export type RenderableChildren<Context> = React.ReactNode | ((context: Context) => React.ReactNode);

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

@@ -119,6 +119,7 @@ export type ThemeHooks = {
         docs: {
             enabled: boolean;
             name?: string;
+            publicEndpoint?: boolean;
         };
     };
     useSidebarItems: (activeVersion?: Version | null) => {

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

@@ -22,3 +22,4 @@ export type * from './segmented';
 export type * from './tooltip';
 export type * from './toast';
 export type * from './link';
+export type * from './button-group';