@redocly/theme 0.70.0-next.7 → 0.70.0-next.8

package/lib/markdoc/components/CodeWalkthrough/CodePanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type CodePanelProps = {
     files: CodeWalkthroughFile[];
     downloadAssociatedFiles: CodeWalkthroughFile[];

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type CodePanelHeaderProps = {
     files: CodeWalkthroughFile[];
     handleTabSwitch: (name: string) => void;

package/lib/markdoc/components/CodeWalkthrough/CodePanelToolbar.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type CodeToolbarProps = {
     file: CodeWalkthroughFile;
 };

package/lib/markdoc/components/CodeWalkthrough/CodeStep.d.ts

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react';
-import type { WithConditions } from '@redocly/config';
+import type { WithConditions } from '../../../core/types';
 export type CodeStepProps = WithConditions<{
     id: string;
     heading?: string;

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.d.ts

@@ -1,4 +1,4 @@
 import React, { type PropsWithChildren } from 'react';
-import type { CodeWalkthroughAttr } from '@redocly/config';
+import type { CodeWalkthroughAttr } from '../../../core/types';
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 export declare function CodeWalkthrough({ children, steps, preview, ...attributes }: CodeWalkthroughProps): React.JSX.Element;

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

@@ -152,7 +152,7 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
         overflowTabs.some((i) => childrenArray[i] && activeTab === childrenArray[i].props.label);
     // Show as selector when no visible tabs (all tabs in dropdown)
     const showAsSelector = visibleTabs.length === 0 && hasOverflow;
-    const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(hasOverflow, dropdownRef);
+    const { dropdownPosition, isDropdownOpen, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(hasOverflow, dropdownRef);
     return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: containerRef },
         react_1.default.createElement(HighlightBar, { $size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
@@ -163,11 +163,9 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
                 return null;
             return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
         }),
-        hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: "dropdown-tab" },
-            react_1.default.createElement(DropdownWrapper, { $top: dropdownPosition.top, $left: dropdownPosition.left, onClickCapture: () => {
-                    setIsDropdownOpen(true);
-                } },
-                react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onClose: () => {
+        hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: isDropdownOpen ? 'dropdown-tab dropdown-tab-open' : 'dropdown-tab' },
+            react_1.default.createElement(DropdownWrapper, { $top: dropdownPosition.top, $left: dropdownPosition.left },
+                react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onOpen: () => setIsDropdownOpen(true), onClose: () => {
                         setIsDropdownOpen(false);
                         setDropdownPosition({});
                     } },
@@ -259,6 +257,10 @@ exports.TabListContainer = styled_components_1.default.ul `
         min-width: 0;
         max-width: 100%;
       }
+
+      &.dropdown-tab-open {
+        z-index: var(--dropdown-menu-z-index);
+      }
     }
   }
 `;

package/lib/markdoc/tags/code-walkthrough.d.ts

@@ -1,6 +1,6 @@
 import type { Node, RenderableTreeNode } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
-import type { CodeWalkthroughConditions, CodeWalkthroughFilter, TogglesMarkdocAttr, InputsMarkdocAttr } from '@redocly/config';
+import type { CodeWalkthroughConditions, CodeWalkthroughFilter, TogglesMarkdocAttr, InputsMarkdocAttr } from '../../core/types';
 export declare const codeWalkthrough: MarkdocSchemaWrapper;
 export declare function collectStepsFromChildren(children: RenderableTreeNode[], idx?: number): RenderableTreeNode[];
 export declare function collectTogglesFromChildren(children: Node[], toggles?: TogglesMarkdocAttr): TogglesMarkdocAttr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.7",
+  "version": "0.70.0-next.8",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.16.0-next.2",
+    "@redocly/realm-asyncapi-sdk": "0.16.0-next.4",
     "@redocly/tooling-test-utils": "0.0.0",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
@@ -72,7 +72,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.62.0",
+    "@redocly/config": "0.65.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -41,6 +41,13 @@ const MENU_OPTIONS: Record<MCPOption, MenuOption> = {
     descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
     descriptionDefault: 'Install MCP server on VS Code',
   },
+  claude: {
+    icon: ClaudeIcon,
+    titleTranslationKey: 'page.actions.connectMcp.claude',
+    titleDefault: 'Connect to Claude',
+    descriptionTranslationKey: 'page.actions.connectMcp.claudeDescription',
+    descriptionDefault: 'Add MCP server to your Claude account',
+  },
   'claude-code': {
     icon: ClaudeIcon,
     titleTranslationKey: 'page.actions.connectMcp.claudeCode',
@@ -118,7 +125,7 @@ export function ConnectMCPButton({
       >
         {dropdownOptions.length > 0
           ? ({ close }: { close: () => void }) => (
-              <DropdownMenu>
+              <StyledDropdownMenu>
                 {dropdownOptions.map((option) => {
                   const Icon = option.icon;
                   const showCheckmark = copiedOption === option.key;
@@ -150,7 +157,7 @@ export function ConnectMCPButton({
                     </DropdownMenuItem>
                   );
                 })}
-              </DropdownMenu>
+              </StyledDropdownMenu>
             )
           : null}
       </SplitButton>
@@ -158,6 +165,10 @@ export function ConnectMCPButton({
   );
 }
 
+const StyledDropdownMenu = styled(DropdownMenu)`
+  --dropdown-menu-max-height: var(--connect-mcp-button-dropdown-max-height);
+`;
+
 const ConnectMCPButtonWrapper = styled.div`
   display: inline-block;
   position: relative;

package/src/components/Buttons/variables.ts

@@ -50,3 +50,7 @@ export const aiAssistantButton = css`
   // @tokens End
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
+
+export const connectMcpButton = css`
+  --connect-mcp-button-dropdown-max-height: fit-content;
+`;

package/src/components/Catalog/Catalog.tsx

@@ -162,9 +162,11 @@ export function Catalog(props: CatalogProps): JSX.Element {
             <CatalogPageContentWrapper>
               <CatalogTitleWrapper>
                 <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
-                  {catalogConfig?.titleTranslationKey
-                    ? translate(catalogConfig?.titleTranslationKey)
-                    : catalogConfig?.slug}{' '}
+                  <span>
+                    {catalogConfig?.titleTranslationKey
+                      ? translate(catalogConfig?.titleTranslationKey)
+                      : catalogConfig?.slug}
+                  </span>{' '}
                 </CatalogTitle>
                 <CounterTag borderless>{entitiesCounter}</CounterTag>
               </CatalogTitleWrapper>

package/src/components/JsonViewer/Helpers.tsx

@@ -79,7 +79,7 @@ export function JsonValue(props: {
             fold={fold}
             maxStringLength={maxStringLength}
           />
-          {index < value.length - 1 ? ',\n' : null}
+          {index < value.length - 1 ? <span>{',\n'}</span> : null}
         </React.Fragment>
       ))
     : keys.map((key, index) => (
@@ -92,7 +92,7 @@ export function JsonValue(props: {
             fold={fold}
             maxStringLength={maxStringLength}
           />
-          {index < keys.length - 1 ? ',\n' : null}
+          {index < keys.length - 1 ? <span>{',\n'}</span> : null}
         </React.Fragment>
       ));
 
@@ -177,7 +177,9 @@ function JsonKeyValue(props: {
       {isFoldable(value) ? (
         <ExpandIcon onClick={() => fold.setExpanded(path, !isExpanded)} isExpanded={isExpanded} />
       ) : null}
-      <span className="property token string">{`"${name}"`}</span>: {valueElement}
+      <span className="property token string">{`"${name}"`}</span>
+      <span>{': '}</span>
+      {valueElement}
     </>
   );
 }

package/src/components/MCP/McpConnectionTabs.tsx

@@ -10,9 +10,11 @@ import { useMCPConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import {
   generateClaudeCodeCommand,
   generateCodexCommand,
+  generateMCPDeepLink,
   generateMcpInstallPrompt,
   getBaseDataAttributes,
 } from '@redocly/theme/core/utils';
+import { Button } from '@redocly/theme/components/Button/Button';
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
 import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
@@ -167,16 +169,26 @@ function renderTabContent(
           ),
         },
         {
-          headline: translate(
-            'page.mcpNotAllowed.snippets.claudeDesktop.headline',
-            'Claude Desktop',
-          ),
+          headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude app'),
           content: (
             <>
+              <TabHint>
+                {translate(
+                  'page.mcpNotAllowed.snippets.claudeDesktop.accountHint',
+                  'Claude adds the connector to your account and syncs it between Claude on the web and Claude Desktop.',
+                )}
+              </TabHint>
+              <ConnectButton
+                variant="secondary"
+                icon={<ClaudeIcon />}
+                onClick={() => window.open(generateMCPDeepLink('claude', connection), '_blank')}
+              >
+                {translate('page.actions.connectMcp.claude', 'Connect to Claude')}
+              </ConnectButton>
               <TabHint>
                 {translate(
                   'page.mcpNotAllowed.snippets.claudeDesktop.instruction',
-                  'Open Customize → Connectors → Add custom connector and paste this server URL:',
+                  'Or open Customize → Connectors → Add custom connector and paste this server URL:',
                 )}
               </TabHint>
               <CodeBlock
@@ -278,6 +290,11 @@ const McpConnectionTabsWrapper = styled.div`
   }
 `;
 
+const ConnectButton = styled(Button)`
+  align-self: flex-start;
+  margin-bottom: var(--spacing-sm);
+`;
+
 const TabHint = styled.p`
   margin: 0 0 var(--spacing-xs);
   color: var(--page-mcp-405-snippets-hint-text-color);

package/src/components/Search/SearchItem.tsx

@@ -78,7 +78,9 @@ export function SearchItem({
               <SearchItemOperationTag color={httpColor}>
                 {document.httpMethod.toUpperCase()}
               </SearchItemOperationTag>
-              {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
+              <span>
+                {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
+              </span>
             </SearchItemOperation>
           ) : null}
           <SearchItemTitleWrapper>

package/src/components/Search/SearchTrigger.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -9,6 +9,9 @@ import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 import { breakpoints, getUserAgent } from '@redocly/theme/core/utils';
 import { DEFAULT_KEYBOARD_SHORTCUTS } from '@redocly/theme/core/constants';
 
+const MAC_SHORTCUT_LABEL = '⌘K';
+const SHORTCUT_LABEL = 'Ctrl+K';
+
 export type SearchTriggerProps = {
   onClick: () => void;
   className?: string;
@@ -31,8 +34,8 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   }
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
-  // A page can be cached and served to every platform, so the server renders a hidden
-  // placeholder and the browser picks the label after hydration.
+  // A page can be cached and served to every platform, so the server renders an empty
+  // slot and the browser picks the label after hydration.
   const [isMac, setIsMac] = React.useState<boolean | undefined>(undefined);
   React.useEffect(() => setIsMac(getUserAgent().includes('Mac')), []);
 
@@ -56,8 +59,12 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
         {mainShortcutKey === DEFAULT_KEYBOARD_SHORTCUTS ? (
-          <SearchTriggerShortcut $isPending={isMac === undefined}>
-            {isMac ? '⌘K' : 'Ctrl+K'}
+          <SearchTriggerShortcut>
+            {isMac === undefined ? null : (
+              <SearchTriggerShortcutLabel>
+                {isMac ? MAC_SHORTCUT_LABEL : SHORTCUT_LABEL}
+              </SearchTriggerShortcutLabel>
+            )}
           </SearchTriggerShortcut>
         ) : (
           <span>{mainShortcutKey}</span>
@@ -85,8 +92,36 @@ const SearchTriggerButton = styled(Button)`
   }
 `;
 
-const SearchTriggerShortcut = styled.span<{ $isPending: boolean }>`
-  visibility: ${({ $isPending }) => ($isPending ? 'hidden' : 'visible')};
+// The hidden copy of the wider label keeps the slot the same width before and after
+// hydration on every platform, so the trigger does not shift when the label appears.
+const SearchTriggerShortcut = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  &::after {
+    content: '${SHORTCUT_LABEL}';
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+`;
+
+const shortcutAppear = keyframes`
+  from {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translateY(3px);
+  }
+`;
+
+const SearchTriggerShortcutLabel = styled.span`
+  animation: ${shortcutAppear} var(--search-trigger-shortcut-appear-duration)
+    var(--search-trigger-shortcut-appear-easing);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 `;
 
 const SearchTriggerInput = styled.div`

package/src/components/Search/variables.ts

@@ -145,6 +145,8 @@ export const search = css`
   --search-trigger-bg-color: var(--navbar-bg-color);
   --search-trigger-icon-size: 16px;
   --search-trigger-line-height: var(--line-height-base);
+  --search-trigger-shortcut-appear-duration: 300ms;
+  --search-trigger-shortcut-appear-easing: ease-out;
 
   /**
   * @tokens AI Search

package/src/core/constants/mcp.ts

@@ -4,6 +4,6 @@ export const MCP_ROUTE = '/mcp';
 
 export const PUBLIC_MCP_ROUTE = '/mcp-public';
 
-export const MCP_OPTIONS = ['cursor', 'vscode', 'claude-code', 'codex', 'copy'] as const;
+export const MCP_OPTIONS = ['cursor', 'vscode', 'claude', 'claude-code', 'codex', 'copy'] as const;
 
 export const DEFAULT_MCP_OPTIONS = [...MCP_OPTIONS];

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

@@ -4,7 +4,7 @@ import type {
   CodeWalkthroughFile,
   CodeWalkthroughNode,
   CodeWalkthroughConditionsObject,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { CodeWalkthroughControlsStateContext } from '../../contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
 import { CodeWalkthroughStepsContext } from '../../contexts/CodeWalkthrough/CodeWalkthroughStepsContext';

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

@@ -10,7 +10,7 @@ import type {
   CodeWalkthroughFilterItem,
   CodeWalkthroughConditionsObject,
   CodeWalkthroughControlsState,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { downloadCodeWalkthrough } from '../../utils/download-code-walkthrough';
 import { matchCodeWalkthroughConditions } from '../../utils/match-code-walkthrough-conditions';
@@ -98,7 +98,7 @@ export function useCodeWalkthroughControls(
     Object.entries(newState).forEach(([id, control]) => {
       const existingControl = controlsState[id];
       if (existingControl && existingControl.type === control.type) {
-        // @ts-expect-error
+        // @ts-expect-error: TS2322 - the spread loses the link between `type` and `value` in the control union
         newState[id] = {
           ...control,
           value: existingControl.value,

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
-import type { CodeWalkthroughStepAttr } from '@redocly/config';
+import type { CodeWalkthroughStepAttr } from '@redocly/theme/core/types';
 import type { ActiveStep, WalkthroughStepsState } from '../../types/code-walkthrough';
 import type { MarkerArea } from '../../types/marker';
 

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

@@ -1,9 +1,9 @@
 import type {
+  CodeWalkthroughAttr,
   CodeWalkthroughFile,
   CodeWalkthroughStepAttr,
-  CodeWalkthroughAttr,
-} from '@redocly/config';
-import type { WalkthroughStepsState } from '../../types/code-walkthrough';
+  WalkthroughStepsState,
+} from '../../types/code-walkthrough';
 
 import {
   useCodeWalkthroughControls,

package/src/core/hooks/code-walkthrough/use-renderable-files.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { findClosestCommonDirectory } from '../../utils/find-closest-common-directory';
 import { getFileIconByExt } from '../../utils/GetFileIcon';

package/src/core/hooks/use-connect-mcp-button.ts

@@ -7,7 +7,12 @@ 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, isMCPOption } from '../utils/mcp';
+import {
+  generateClaudeCodeCommand,
+  generateCodexCommand,
+  generateMCPDeepLink,
+  isMCPOption,
+} from '../utils/mcp';
 import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
 
 export type McpButtonOptions = {
@@ -68,6 +73,7 @@ export function useConnectMCPButton({
       const urlMap: Partial<Record<MCPOption, string>> = {
         cursor: cursorUrl,
         vscode: vscodeUrl,
+        claude: generateMCPDeepLink('claude', connection),
       };
 
       window.open(urlMap[action], '_blank');

package/src/core/hooks/use-page-actions.ts

@@ -31,6 +31,7 @@ const DEFAULT_ENABLED_ACTIONS = [
   'claude',
   'docs-mcp-cursor',
   'docs-mcp-vscode',
+  'docs-mcp-claude',
 ] as const;
 
 export type PageActionType =
@@ -40,6 +41,7 @@ export type PageActionType =
   | 'claude'
   | 'docs-mcp-cursor'
   | 'docs-mcp-vscode'
+  | 'docs-mcp-claude'
   // Used in OpenAPI docs x-mcp
   | 'mcp-cursor'
   | 'mcp-vscode';
@@ -114,6 +116,7 @@ export function usePageActions(
     const actionHandlers: Record<PageActionType, () => PageAction> = {
       'docs-mcp-cursor': createMCPHandler('cursor', false),
       'docs-mcp-vscode': createMCPHandler('vscode', false),
+      'docs-mcp-claude': createMCPHandler('claude', false),
       'mcp-cursor': createMCPHandler('cursor', true),
       'mcp-vscode': createMCPHandler('vscode', true),
 
@@ -261,6 +264,19 @@ function createMCPAction({
     };
   }
 
+  if (clientType === 'claude') {
+    return {
+      ...sharedProps,
+      buttonText: translate('page.actions.connectMcp.claude', 'Connect to Claude'),
+      title: translate('page.actions.connectMcp.claude', 'Connect to Claude'),
+      description: translate(
+        'page.actions.connectMcp.claudeDescription',
+        'Add MCP server to your Claude account',
+      ),
+      iconComponent: ClaudeIcon,
+    };
+  }
+
   return {
     ...sharedProps,
     buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'),
@@ -337,6 +353,7 @@ function shouldHideActionByType(
       return !isPublic;
     case 'docs-mcp-cursor':
     case 'docs-mcp-vscode':
+    case 'docs-mcp-claude':
       return Boolean(mcpUrl) || isMcpDisabled;
     case 'mcp-cursor':
     case 'mcp-vscode':

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 } from '@redocly/theme/components/Buttons/variables';
+import { aiAssistantButton, connectMcpButton } 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';
@@ -1343,6 +1343,7 @@ export const tokens = css`
   ${breadcrumbs}
   ${button}
   ${aiAssistantButton}
+  ${connectMcpButton}
   ${cards}
   ${catalog}
   ${catalogClassic}

package/src/core/types/code-walkthrough.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { MarkerArea } from './marker';
 
 export type ActiveStep = string | null;
@@ -13,3 +14,105 @@ export type WalkthroughStepsState = {
   lockObserver?: React.RefObject<boolean>;
   filtersElementRef?: React.RefObject<HTMLDivElement | null>;
 };
+
+export type CodeWalkthroughStepAttr = {
+  id: string;
+  title?: string;
+};
+
+export type FilesetsMarkdocAttr = WithConditions<{
+  files?: string[];
+  downloadAssociatedFiles?: string[];
+}>[];
+
+export type InputsMarkdocAttr = {
+  [id: string]: WithConditions<{ value: string }>;
+};
+
+export type TogglesMarkdocAttr = {
+  [id: string]: CodeWalkthroughConditionsObject;
+};
+
+export type CodeWalkthroughConditions = {
+  [key: string]: string | string[] | undefined | boolean;
+};
+
+export type CodeWalkthroughFileset = WithConditions<{
+  files?: CodeWalkthroughFile[];
+  downloadAssociatedFiles?: CodeWalkthroughFile[];
+}>;
+export type CodeWalkthroughFile = {
+  path: string;
+  content: CodeWalkthroughNode[];
+  basename: string;
+  metadata: CodeWalkthroughFileMetadata;
+  language: string;
+};
+
+export type CodeWalkthroughChunk = {
+  start: number;
+  children: CodeWalkthroughNode[];
+  condition: CodeWalkthroughChunkCondition;
+};
+
+export type CodeWalkthroughChunkCondition = WithConditions<{
+  steps: string[];
+}>;
+
+export type CodeWalkthroughNode = CodeWalkthroughChunk | string;
+
+export type CodeWalkthroughFileMetadata = {
+  steps: string[];
+};
+
+export type CodeWalkthroughFilter = WithConditions<{
+  id: string;
+  label?: string;
+  items: CodeWalkthroughFilterItem[];
+}>;
+
+export type CodeWalkthroughFilterItem = WithConditions<{
+  value: string;
+}>;
+
+export type CodeWalkthroughConditionsObject = {
+  when?: CodeWalkthroughConditions;
+  unless?: CodeWalkthroughConditions;
+};
+
+export type WithConditions<T> = T & CodeWalkthroughConditionsObject;
+
+export type CodeWalkthroughControls = {
+  toggle: boolean;
+  input: string;
+  filter: string;
+};
+
+export type CodeWalkthroughControlState = WithConditions<
+  | {
+      value: string;
+      render: boolean;
+      type: 'input';
+    }
+  | {
+      value: string;
+      render: boolean;
+      type: 'filter';
+    }
+  | {
+      value: boolean;
+      render: boolean;
+      type: 'toggle';
+    }
+>;
+export type CodeWalkthroughControlsState = Record<string, CodeWalkthroughControlState>;
+
+export type CodeWalkthroughAttr = {
+  steps: CodeWalkthroughStepAttr[];
+  filters: Record<string, CodeWalkthroughFilter>;
+  filesets: CodeWalkthroughFileset[];
+  preview: ReactNode[];
+  inputs: InputsMarkdocAttr;
+  toggles: TogglesMarkdocAttr;
+  __idx: number;
+};

package/src/core/types/hooks.ts

@@ -191,6 +191,7 @@ export type ThemeHooks = {
     | 'startSpan'
     | 'constructCloudEvent'
     | 'sendToOtelService'
+    | 'withTracer'
   > & {
     send<TEventType extends AsyncApiRealmUI.EventType>(
       event: TEventType,