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

package/src/components/Tooltip/JsTooltip.tsx

@@ -254,7 +254,7 @@ const TooltipBody = styled.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);
@@ -274,7 +274,7 @@ const TooltipBody = styled.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/src/components/UserMenu/variables.ts

@@ -49,7 +49,7 @@ export const userMenu = 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/src/core/constants/mcp.ts

@@ -1 +1,15 @@
+import type { MCPOption } from '../types/mcp';
+
 export const DEFAULT_MCP_SERVER_NAME = 'mcp-server';
+
+export const MCP_ROUTE = '/mcp';
+
+export const PUBLIC_MCP_ROUTE = '/mcp-public';
+
+export const DEFAULT_MCP_OPTIONS: MCPOption[] = [
+  'cursor',
+  'vscode',
+  'claude-code',
+  'codex',
+  'copy',
+];

package/src/core/constants/search.ts

@@ -29,13 +29,13 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
     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/src/core/contexts/PageActionsContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from '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.
+ */
+export const PageActionsContext = createContext<boolean | null>(null);

package/src/core/contexts/index.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/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
 import type {
@@ -50,10 +50,6 @@ export function useCodeWalkthroughControls(
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
 
-  const filtersRef = useRef(filters);
-  const inputsRef = useRef(inputs);
-  const togglesRef = useRef(toggles);
-
   const getInitialState = () => {
     const state: CodeWalkthroughControlsState = {};
 
@@ -90,20 +86,11 @@ export function useCodeWalkthroughControls(
 
   const [controlsState, setControlsState] = useState(getInitialState);
 
-  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;
-    }
+  const controlsKey = JSON.stringify([filters, inputs, toggles]);
+  const [prevControlsKey, setPrevControlsKey] = useState(controlsKey);
 
-    filtersRef.current = filters;
-    inputsRef.current = inputs;
-    togglesRef.current = toggles;
+  if (prevControlsKey !== controlsKey) {
+    setPrevControlsKey(controlsKey);
 
     const newState = getInitialState();
 
@@ -120,8 +107,7 @@ export function useCodeWalkthroughControls(
     });
 
     setControlsState(newState);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters, inputs, toggles, enableDeepLink]);
+  }
 
   const changeControlState = (id: string, value: string | boolean) => {
     setControlsState((prev) => {

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -252,6 +252,7 @@ export function useCodeWalkthroughSteps({
 
     const rootTopOffset = root.current?.offsetTop ?? 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(visibleSteps[0]?.id || null);
     }
 

package/src/core/hooks/menu/use-menu-item-expanded.ts

@@ -16,6 +16,7 @@ export function useMenuItemExpanded(item: ItemState): [boolean, Dispatch<SetStat
   const [controlledValue, setControlledValue] = useState(isItemExpanded(item));
 
   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]);
 

package/src/core/hooks/use-active-heading.ts

@@ -8,6 +8,15 @@ type HeadingEntry = {
   [key: string]: IntersectionObserverEntry;
 };
 
+type ClickScroll = {
+  target: HTMLElement;
+  scrollMargin: number;
+  closestDistance: number;
+  reached: boolean;
+};
+
+const TARGET_TOLERANCE = 2;
+
 export function useActiveHeading(
   contentElement: HTMLDivElement | null,
   displayedHeadings?: Array<{ id: string; depth: number } | null>,
@@ -17,11 +26,14 @@ export function useActiveHeading(
   const headingElementsRef = useRef<HeadingEntry>({});
   const displayedHeadingsRef = useRef(displayedHeadings);
   const lockObserver = useRef<boolean>(false);
+  const clickScroll = useRef<ClickScroll | null>(null);
   const location = useLocation();
 
   useEffect(() => {
     setHeading(undefined);
     headingElementsRef.current = {};
+    clickScroll.current = null;
+    lockObserver.current = false;
   }, [location.pathname]);
 
   useEffect(() => {
@@ -133,10 +145,6 @@ export function useActiveHeading(
 
   const intersectionCallback = useCallback(
     (entries: IntersectionObserverEntry[]) => {
-      if (lockObserver.current) {
-        return;
-      }
-
       headingElementsRef.current = entries.reduce(
         (map: HeadingEntry, entry: IntersectionObserverEntry) => {
           map[entry.target.id] = entry;
@@ -145,6 +153,10 @@ export function useActiveHeading(
         headingElementsRef.current,
       );
 
+      if (lockObserver.current) {
+        return;
+      }
+
       if (isTopOfPage()) {
         const newHeading = headingElements[0]?.id || undefined;
         setHeading(newHeading);
@@ -202,22 +214,71 @@ export function useActiveHeading(
     [getIndexFromId, headingElements, getTriggerOffset, findActiveHeaderByVirtualPosition],
   );
 
+  const releaseClickScroll = useCallback(() => {
+    clickScroll.current = null;
+    lockObserver.current = false;
+  }, []);
+
+  const trackClickScroll = 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 = useCallback(
     (headingId: string) => {
-      lockObserver.current = true;
+      releaseClickScroll();
       setHeading(headingId);
 
-      const headingElement = headingElements.find((el) => el.id === headingId);
-      if (headingElement && headingElement.scrollIntoView) {
-        headingElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const target =
+        document.getElementById(headingId) || headingElements.find((el) => el.id === headingId);
+
+      if (!target?.scrollIntoView) {
+        return;
+      }
+
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+      if (!target.getClientRects().length) {
+        return;
       }
 
-      setTimeout(() => {
-        headingElementsRef.current = {};
-        lockObserver.current = false;
-      }, 300);
+      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],
+    [headingElements, releaseClickScroll],
   );
 
   useEffect(() => {
@@ -268,7 +329,10 @@ export function useActiveHeading(
     });
 
     const handleScroll = () => {
-      if (lockObserver.current) return;
+      if (clickScroll.current) {
+        trackClickScroll();
+        return;
+      }
 
       if (isTopOfPage()) {
         setHeading(headingElements[0]?.id || undefined);
@@ -281,7 +345,7 @@ export function useActiveHeading(
       observer.disconnect();
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [headingElements, intersectionCallback, getTriggerOffset]);
+  }, [headingElements, intersectionCallback, getTriggerOffset, trackClickScroll]);
 
   return { heading, handleHeadingClick };
 }

package/src/core/hooks/use-active-section-id.ts

@@ -60,11 +60,13 @@ export function useActiveSectionId(
     }
 
     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/src/core/hooks/use-connect-mcp-button.ts

@@ -6,13 +6,15 @@ import type { MCPOption } from '../types';
 import { useThemeHooks } from './use-theme-hooks';
 import { useMCPConfig } from './use-mcp-config';
 import { ClipboardService } from '../utils/clipboard-service';
+import { DEFAULT_MCP_OPTIONS } from '../constants/mcp';
+import { generateClaudeCodeCommand, generateCodexCommand } from '../utils/mcp';
 
 export type McpButtonOptions = {
   options?: MCPOption[];
 };
 
 export type McpButtonSettings = {
-  isCopied: boolean;
+  copiedOption: MCPOption | null;
   cursorUrl: string;
   vscodeUrl: string;
   triggerButtonText: string;
@@ -23,35 +25,41 @@ export type McpButtonSettings = {
 const COPIED_RESET_TIMEOUT = 1000;
 
 export function useConnectMCPButton({
-  options = ['cursor', 'vscode', 'copy'],
+  options = DEFAULT_MCP_OPTIONS,
 }: McpButtonOptions = {}): McpButtonSettings {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { serverName, serverUrl, cursorUrl, vscodeUrl } = useMCPConfig();
-  const [isCopied, setIsCopied] = useState(false);
+  const [copiedOption, setCopiedOption] = useState<MCPOption | null>(null);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const resetCopied = useCallback(
-    debounce(() => setIsCopied(false), COPIED_RESET_TIMEOUT),
+    debounce(() => setCopiedOption(null), COPIED_RESET_TIMEOUT),
     [],
   );
 
   const handleAction = useCallback(
     (action: MCPOption) => {
-      if (action === 'copy') {
-        const config = {
-          [serverName]: {
-            url: serverUrl,
-            description: 'MCP Server',
-          },
-        };
-        ClipboardService.copyCustom(JSON.stringify(config, null, 2));
-        setIsCopied(true);
+      const connection = { serverName, url: serverUrl };
+      const copyTextMap: Partial<Record<MCPOption, string>> = {
+        copy: JSON.stringify(
+          { [serverName]: { url: serverUrl, description: 'MCP Server' } },
+          null,
+          2,
+        ),
+        'claude-code': generateClaudeCodeCommand(connection),
+        codex: generateCodexCommand(connection),
+      };
+
+      const copyText = copyTextMap[action];
+      if (copyText !== undefined) {
+        ClipboardService.copyCustom(copyText);
+        setCopiedOption(action);
         resetCopied();
         return;
       }
 
-      const urlMap: Record<Exclude<MCPOption, 'copy'>, string> = {
+      const urlMap: Partial<Record<MCPOption, string>> = {
         cursor: cursorUrl,
         vscode: vscodeUrl,
       };
@@ -69,7 +77,7 @@ export function useConnectMCPButton({
   const visibleOptions = useMemo(() => options.filter(Boolean), [options]);
 
   return {
-    isCopied,
+    copiedOption,
     cursorUrl,
     vscodeUrl,
     triggerButtonText,

package/src/core/hooks/use-control.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 
 const DEFAULT_CONTROL_OPEN_DELAY = 300;
 
@@ -18,6 +18,10 @@ export const useControl = (initialVal = false): UseControlReturnType => {
     }
   }, []);
 
+  useEffect(() => {
+    return clearOpenTimer;
+  }, [clearOpenTimer]);
+
   const handleOpen = useCallback(() => {
     clearOpenTimer();
     timeoutRef.current = setTimeout(() => {

package/src/core/hooks/use-local-state.ts

@@ -21,6 +21,7 @@ export function useLocalState<T>(key: string, initialValue: T): [T, (value: T) =
   // then client loads the actual stored value without hydration mismatch
   useEffect(() => {
     if (!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/src/core/hooks/use-mcp-config.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { useThemeHooks } from './use-theme-hooks';
 import { IS_BROWSER } from '../utils/dom';
-import { DEFAULT_MCP_SERVER_NAME } from '../constants';
+import { DEFAULT_MCP_SERVER_NAME, MCP_ROUTE, PUBLIC_MCP_ROUTE } from '../constants';
 import { generateMCPDeepLink } from '../utils/mcp';
 import { withPathPrefix } from '../utils/urls';
 
@@ -13,20 +13,29 @@ export type McpConfig = {
   cursorUrl: string;
   vscodeUrl: string;
   isMcpDisabled: boolean;
+  isPublicEndpointPage: boolean;
+  alternateServerUrl?: string;
 };
 
 export function useMCPConfig(): McpConfig {
-  const { useMcpData } = useThemeHooks();
+  const { useMcpData, usePageData } = useThemeHooks();
 
   const {
-    docs: { enabled, name },
+    docs: { enabled, name, publicEndpoint },
   } = useMcpData();
+  const pageSlug = usePageData()?.slug;
 
   const origin = IS_BROWSER
     ? window.location.origin
     : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
   const serverName = name || DEFAULT_MCP_SERVER_NAME;
-  const serverUrl = `${origin}${withPathPrefix('/mcp')}`;
+  const isPublicEndpointPage = pageSlug === withPathPrefix(PUBLIC_MCP_ROUTE);
+  const serverUrl = `${origin}${withPathPrefix(isPublicEndpointPage ? PUBLIC_MCP_ROUTE : MCP_ROUTE)}`;
+  const alternateServerUrl = isPublicEndpointPage
+    ? `${origin}${withPathPrefix(MCP_ROUTE)}`
+    : publicEndpoint
+      ? `${origin}${withPathPrefix(PUBLIC_MCP_ROUTE)}`
+      : undefined;
   const isMcpDisabled = !enabled || false;
 
   const cursorUrl = useMemo(
@@ -46,5 +55,7 @@ export function useMCPConfig(): McpConfig {
     cursorUrl,
     vscodeUrl,
     isMcpDisabled,
+    isPublicEndpointPage,
+    alternateServerUrl,
   };
 }

package/src/core/hooks/use-mobile-menu.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useLocation } from 'react-router';
 
 import { useModalScrollLock } from './use-modal-scroll-lock';
@@ -6,11 +6,19 @@ import { useModalScrollLock } from './use-modal-scroll-lock';
 export function useMobileMenu(initialState = false) {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
+  const locationKey = `${location.pathname}${location.hash}`;
+  const [prevLocationKey, setPrevLocationKey] = useState(locationKey);
 
-  useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
+  if (isOpen && prevLocationKey !== locationKey) {
+    setPrevLocationKey(locationKey);
+    setIsOpen(false);
+  }
   useModalScrollLock(isOpen);
 
-  const openMobileMenu = () => setIsOpen(true);
+  const openMobileMenu = () => {
+    setPrevLocationKey(locationKey);
+    setIsOpen(true);
+  };
   const closeMobileMenu = () => setIsOpen(false);
 
   return { isOpen, openMobileMenu, closeMobileMenu };

package/src/core/openapi/index.ts

@@ -1,5 +1,5 @@
 // This file is intended to provide selective imports from @redocly/theme/core
-// to reduce bundle size by exporting only functionality used in the @redocly/openapi-docs package.
+// to reduce bundle size by exporting only functionality used in the @redocly/api-docs package.
 //
 // This selective import approach will help with tree shaking and reduce
 // the overall bundle size by avoiding importing the entire theme package

package/src/core/styles/global.ts

@@ -20,7 +20,7 @@ import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
-import { aiAssistantButton, connectMCPButton } from '@redocly/theme/components/Buttons/variables';
+import { aiAssistantButton } from '@redocly/theme/components/Buttons/variables';
 import { navbar } from '@redocly/theme/components/Navbar/variables';
 import { search } from '@redocly/theme/components/Search/variables';
 import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
@@ -454,18 +454,24 @@ const borders = 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 = css`
@@ -824,7 +830,7 @@ const badges = 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
@@ -832,7 +838,7 @@ const badges = 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
@@ -840,7 +846,7 @@ const badges = 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
@@ -1048,11 +1054,6 @@ const pages = 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
@@ -1067,6 +1068,11 @@ const pages = 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
 
   /**
@@ -1264,7 +1270,7 @@ const tree = 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 {
@@ -1332,7 +1338,6 @@ export const styles = css<{ palette?: string }>`
     ${breadcrumbs}
     ${button}
     ${aiAssistantButton}
-    ${connectMCPButton}
     ${cards}
     ${catalog}
     ${catalogClassic}

package/src/core/styles/palette.ts

@@ -244,4 +244,6 @@ function brandPaletteLight(palette: string | undefined): RuleSet<object> {
  */
 export const activeBrandPaletteLight = css<{ palette?: string }>`
   ${({ palette }) => brandPaletteLight(palette)}
+
+  // @tokens End
 `;

package/src/core/types/button-group.ts

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

package/src/core/types/catalog.ts

@@ -212,10 +212,8 @@ 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/src/core/types/common.ts

@@ -1,5 +1,8 @@
+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/src/core/types/hooks.ts

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

package/src/core/types/index.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';